feat(textarea): ✨ finish theming & stories

src/textarea/Textarea.tsx

@@ -12,14 +12,14 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const { wrapperProps, baseProps, iconProps, ghostProps, uiProps } =
       useTextareaProps(props);
-    const { loading, invalid, spinner } = uiProps;
+    const { loading, icon, spinner } = uiProps;
 
     return (
       <TextareaWrapper {...wrapperProps}>
         <TextareaBase ref={ref} {...baseProps} />
         {loading ? (
           runIfFn(spinner, uiProps)
-        ) : invalid ? (
+        ) : icon ? (
           <TextareaIcon {...iconProps} />
         ) : null}
         <TextareaGhost {...ghostProps} />

src/textarea/TextareaBase.tsx

@@ -1,4 +1,5 @@
 import { ChangeEvent } from "react";
+import { FocusableOptions, useFocusable } from "ariakit";
 import { cx, useEvent, useForkRef } from "ariakit-utils";
 import {
   createComponent,
@@ -7,8 +8,8 @@ import {
 } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
+import { tcm } from "../utils";
 
 import { TextareaUIProps } from "./TextareaProps";
 
@@ -31,18 +32,22 @@ export const useTextareaBase = createHook<TextareaBaseOptions>(
     ...props
   }) => {
     const theme = useTheme("textarea");
-    const className = cx(
-      theme.base.common,
-      size ? theme.base.size[size] : "",
-      variant ? theme.base.variant[variant].common : "",
-      props.disabled || invalid
+    const className = tcm(
+      theme.base.default,
+      resize ? theme.base.resize[resize] : "",
+      size ? theme.size[size]?.base : "",
+      props.disabled
         ? ""
         : variant
-        ? theme.base.variant[variant].interactions
+        ? cx(
+            theme.variant[variant]?.default?.base,
+            theme.variant[variant]?.hover?.base,
+            theme.variant[variant]?.active?.base,
+            theme.variant[variant]?.focus?.base,
+            invalid ? theme.variant[variant]?.invalid?.base : "",
+          )
         : "",
-      variant && props.disabled ? theme.base.variant[variant].disabled : "",
-      variant && invalid ? theme.base.variant[variant].invalid : "",
-      resize ? theme.base.resize[resize] : "",
+      variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
       props.className,
     );
 
@@ -64,7 +69,7 @@ export const useTextareaBase = createHook<TextareaBaseOptions>(
       className,
       style: { ...inputStyles, ...props.style },
     };
-    props = useBox(props);
+    props = useFocusable(props);
 
     return props;
   },
@@ -76,8 +81,8 @@ export const TextareaBase = createComponent<TextareaBaseOptions>(props => {
   return createElement("textarea", htmlProps);
 });
 
-export type TextareaBaseOptions<T extends As = "textarea"> = BoxOptions<T> &
-  Partial<TextareaUIProps> & {};
+export type TextareaBaseOptions<T extends As = "textarea"> =
+  FocusableOptions<T> & Partial<TextareaUIProps> & {};
 
 export type TextareaBaseProps<T extends As = "textarea"> = Props<
   TextareaBaseOptions<T>

src/textarea/TextareaGhost.tsx

@@ -1,3 +1,4 @@
+import { FocusableOptions, useFocusable } from "ariakit";
 import { cx, useForkRef } from "ariakit-utils";
 import {
   createComponent,
@@ -6,8 +7,8 @@ import {
 } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
+import { tcm } from "../utils";
 
 import { TextareaUIProps } from "./TextareaProps";
 
@@ -30,18 +31,22 @@ export const useTextareaGhost = createHook<TextareaGhostOptions>(
     ...props
   }) => {
     const theme = useTheme("textarea");
-    const className = cx(
-      theme.base.common,
-      size ? theme.base.size[size] : "",
-      variant ? theme.base.variant[variant].common : "",
-      props.disabled || invalid
+    const className = tcm(
+      theme.base.default,
+      resize ? theme.base.resize[resize] : "",
+      size ? theme.size[size]?.base : "",
+      props.disabled
         ? ""
         : variant
-        ? theme.base.variant[variant].interactions
+        ? cx(
+            theme.variant[variant]?.default?.base,
+            theme.variant[variant]?.hover?.base,
+            theme.variant[variant]?.active?.base,
+            theme.variant[variant]?.focus?.base,
+            invalid ? theme.variant[variant]?.invalid?.base : "",
+          )
         : "",
-      variant && props.disabled ? theme.base.variant[variant].disabled : "",
-      variant && invalid ? theme.base.variant[variant].invalid : "",
-      resize ? theme.base.resize[resize] : "",
+      variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
       theme.ghost,
       props.className,
     );
@@ -52,7 +57,7 @@ export const useTextareaGhost = createHook<TextareaGhostOptions>(
       className,
       ref: useForkRef(ghostRef, props.ref),
     };
-    props = useBox(props);
+    props = useFocusable(props);
 
     return props;
   },
@@ -64,8 +69,8 @@ export const TextareaGhost = createComponent<TextareaGhostOptions>(props => {
   return createElement("textarea", htmlProps);
 });
 
-export type TextareaGhostOptions<T extends As = "textarea"> = BoxOptions<T> &
-  Partial<TextareaUIProps> & {};
+export type TextareaGhostOptions<T extends As = "textarea"> =
+  FocusableOptions<T> & Partial<TextareaUIProps> & {};
 
 export type TextareaGhostProps<T extends As = "textarea"> = Props<
   TextareaGhostOptions<T>

src/textarea/TextareaIcon.tsx

@@ -9,6 +9,7 @@ import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
 import { cx } from "../utils";
 
+import { TextareaBaseProps } from "./TextareaBase";
 import { TextareaUIProps } from "./TextareaProps";
 
 export const useTextareaIcon = createHook<TextareaIconOptions>(
@@ -21,6 +22,7 @@ export const useTextareaIcon = createHook<TextareaIconOptions>(
     rowsMin,
     invalid,
     loading,
+    disabled,
     icon,
     spinner,
     autoSizeOnChange,
@@ -31,10 +33,21 @@ export const useTextareaIcon = createHook<TextareaIconOptions>(
   }) => {
     const theme = useTheme("textarea");
     const className = cx(
-      theme.icon.common,
-      autoSize ? theme.icon.normal : "",
-      size ? theme.icon.size[size] : "",
-      invalid ? theme.icon.invalid : "",
+      theme.icon.base,
+      autoSize ? theme.icon.autoSize : "",
+      size ? theme.size[size]?.icon : "",
+      disabled
+        ? ""
+        : variant
+        ? cx(
+            theme.variant[variant]?.default?.icon,
+            theme.variant[variant]?.hover?.icon,
+            theme.variant[variant]?.active?.icon,
+            theme.variant[variant]?.focus?.icon,
+            invalid ? theme.variant[variant]?.invalid?.icon : "",
+          )
+        : "",
+      variant && disabled ? theme.variant[variant]?.disabled?.icon : "",
       props.className,
     );
 
@@ -52,7 +65,8 @@ export const TextareaIcon = createComponent<TextareaIconOptions>(props => {
 });
 
 export type TextareaIconOptions<T extends As = "div"> = BoxOptions<T> &
-  Partial<TextareaUIProps> & {};
+  Partial<TextareaUIProps> &
+  Pick<TextareaBaseProps, "disabled"> & {};
 
 export type TextareaIconProps<T extends As = "div"> = Props<
   TextareaIconOptions<T>

src/textarea/TextareaProps.tsx

@@ -34,6 +34,7 @@ export const useTextareaProps = ({
   className,
   style,
   children,
+  disabled,
   ...restProps
 }: TextareaProps): TextareaPropsReturn => {
   const uiState = useTextareaUIState({
@@ -69,22 +70,25 @@ export const useTextareaProps = ({
     ...uiProps,
     placeholder,
     value,
+    disabled,
     ...restProps,
     ...componentProps.baseProps,
   };
 
-  const iconProps: TextareaIconProps = {
-    ...uiProps,
-    ...componentProps.iconProps,
-    children: withIconA11y(runIfFn(uiProps.icon, uiProps)),
-  };
-
   const ghostProps: TextareaGhostProps = {
     ...uiProps,
+    disabled,
     ...restProps,
     ...componentProps.ghostProps,
   };
 
+  const iconProps: TextareaIconProps = {
+    ...uiProps,
+    disabled,
+    ...componentProps.iconProps,
+    children: withIconA11y(runIfFn(uiProps.icon, uiProps)),
+  };
+
   return {
     uiProps,
     wrapperProps,

src/textarea/TextareaUIState.tsx

@@ -17,7 +17,7 @@ export function useTextareaUIState(
     rowsMin = 1,
     invalid = false,
     loading = false,
-    icon = <SlotIcon />,
+    icon = invalid ? <SlotIcon /> : null,
     spinner = DefaultTextareaSpinner,
   } = props;
 
@@ -44,14 +44,14 @@ export type TextareaUIState = {
    *
    * @default md
    */
-  size: keyof AdaptUI.GetThemeValue<"textarea", "base", "size">;
+  size: keyof AdaptUI.GetThemeValue<"textarea", "size">;
 
   /**
    * How the textarea should look?
    *
    * @default outline
    */
-  variant: keyof AdaptUI.GetThemeValue<"textarea", "base", "variant">;
+  variant: keyof AdaptUI.GetThemeValue<"textarea", "variant">;
 
   /**
    * Minimum number of rows to be displayed.

src/textarea/__utils.tsx

@@ -10,7 +10,7 @@ export const DefaultTextareaSpinner = (props: TextareaUIProps) => {
 
   return (
     <Spinner
-      className={tcm(theme.icon.common, autoSize ? theme.icon.normal : "")}
+      className={tcm(theme.icon.base, autoSize ? theme.icon.autoSize : "")}
       size={size !== "xl" ? "xs" : "md"}
     />
   );

src/textarea/stories/TextareaBasic.stories.tsx

@@ -21,23 +21,23 @@ export default {
   title: "Forms/Textarea/Basic",
   component: TextareaBasic,
   argTypes: {
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    ...createControls(undefined, {
+    ...createControls("textarea", {
       ignore: [
-        "unstable_system",
-        "unstable_clickOnEnter",
-        "unstable_clickOnSpace",
+        "ref",
         "wrapElement",
-        "focusable",
         "as",
-        "setState",
-        "checked",
-        "value",
-        "defaultState",
-        "state",
-        "onStateChange",
         "icon",
+        "spinner",
+        "inputRef",
+        "ghostRef",
+        "inputStyles",
+        "autoSizeOnChange",
+        "autoFocus",
+        "focusable",
+        "accessibleWhenDisabled",
+        "onFocusVisible",
+        "clickOnEnter",
+        "clickOnSpace",
       ],
     }),
   },
@@ -54,6 +54,8 @@ export const Default: Story = {
     variant: "outline",
     rowsMin: 3,
     cols: 30,
+    autoSize: false,
+    resize: "none",
   },
 };