@timmbr/ui 1.0.0-beta

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@timmbr/utils';
+import { motion } from '@timmbr/motion';
+import { resolveMotion } from '../../types/motion.js';
+import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from './Tabs.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const TabsContext = React.createContext({
+  variant: "pills",
+  size: "default",
+  setActiveTab: () => {
+  },
+  shouldAnimate: true,
+  instanceId: "default"
+});
+const Tabs = React.forwardRef(
+  ({
+    className,
+    variant = "pills",
+    size = "default",
+    motion: localMotion,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      controlledValue ?? defaultValue ?? ""
+    );
+    const activeTab = controlledValue !== void 0 ? controlledValue : internalValue;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate } = resolveMotion(localMotion, globalMotion);
+    const rawId = React.useId();
+    const instanceId = React.useMemo(() => rawId.replace(/[^a-zA-Z0-9_-]/g, ""), [rawId]);
+    const handleValueChange = (val) => {
+      if (controlledValue === void 0) {
+        setInternalValue(val);
+      }
+      onValueChange?.(val);
+    };
+    return /* @__PURE__ */ jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          variant,
+          size,
+          activeTab,
+          setActiveTab: handleValueChange,
+          shouldAnimate,
+          instanceId
+        },
+        children: /* @__PURE__ */ jsx(
+          TabsPrimitive.Root,
+          {
+            ref,
+            value: activeTab || void 0,
+            defaultValue,
+            onValueChange: handleValueChange,
+            "data-slot": "tabs",
+            className: cn("w-full font-sans", className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Tabs.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React.forwardRef(({ className, variant: localVariant, size: localSize, ...props }, ref) => {
+  const context = React.useContext(TabsContext);
+  const variant = localVariant ?? context.variant;
+  const size = localSize ?? context.size;
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      className: cn(tabsListVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(
+  ({
+    className,
+    value,
+    variant: localVariant,
+    size: localSize,
+    motion: triggerMotion,
+    children,
+    ...props
+  }, ref) => {
+    const context = React.useContext(TabsContext);
+    const variant = localVariant ?? context.variant;
+    const size = localSize ?? context.size;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate: triggerShouldAnimate, motionClass } = resolveMotion(
+      triggerMotion,
+      globalMotion
+    );
+    const shouldAnimate = context.shouldAnimate && triggerShouldAnimate;
+    React.useEffect(() => {
+      if (!context.activeTab && value) {
+        context.setActiveTab(value);
+      }
+    }, []);
+    const isActive = context.activeTab === value;
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        value,
+        "data-slot": "tabs-trigger",
+        className: cn(
+          "relative",
+          tabsTriggerVariants({ variant, size }),
+          !shouldAnimate && "transition-none active:scale-100",
+          // Static active styles when animation is disabled
+          !shouldAnimate && isActive && variant === "pills" && "bg-primary text-white shadow-sm",
+          !shouldAnimate && isActive && variant === "underline" && "border-b-2 border-primary text-primary font-semibold",
+          !shouldAnimate && isActive && variant === "outline" && "bg-grey-200 dark:bg-grey-700 text-foreground",
+          // Text styling when active with animation
+          shouldAnimate && isActive && variant === "pills" && "text-white",
+          shouldAnimate && isActive && variant === "underline" && "text-primary font-semibold",
+          shouldAnimate && isActive && variant === "outline" && "text-foreground",
+          motionClass,
+          className
+        ),
+        ...props,
+        children: [
+          isActive && shouldAnimate && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: `tabs-indicator-${context.instanceId}`,
+              transition: { type: "spring", stiffness: 500, damping: 35 },
+              className: cn(
+                "absolute inset-0 pointer-events-none z-0",
+                variant === "pills" && "rounded-sm bg-primary shadow-sm",
+                variant === "underline" && "bottom-0 top-auto h-0.5 bg-primary rounded-none",
+                variant === "outline" && "rounded-sm bg-grey-200 dark:bg-grey-700"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center gap-1.5", children })
+        ]
+      }
+    );
+  }
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, motion: contentMotion, ...props }, ref) => {
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate, motionClass } = resolveMotion(contentMotion, globalMotion);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tabs-content",
+      className: cn(
+        tabsContentVariants(),
+        !shouldAnimate && "transition-none animate-none",
+        motionClass,
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/Tabs/Tabs.styles.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const tabsListVariants: (props?: ({
+    variant?: "outline" | "underline" | "pills" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTriggerVariants: (props?: ({
+    variant?: "outline" | "underline" | "pills" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TabsListVariants = VariantProps<typeof tabsListVariants>;
+export type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>;
+//# sourceMappingURL=Tabs.styles.d.ts.map

package/dist/components/Tabs/Tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;8EAwB5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;8EAwB/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/Tabs/Tabs.styles.js

@@ -0,0 +1,51 @@
+import { cva } from 'class-variance-authority';
+
+const tabsListVariants = cva(
+  "inline-flex items-center justify-center font-sans select-none",
+  {
+    variants: {
+      variant: {
+        pills: "rounded-md bg-grey-100 dark:bg-grey-800 p-1 text-muted-foreground",
+        underline: "border-b border-grey-200 dark:border-grey-700 bg-transparent p-0 gap-6 w-full justify-start",
+        outline: "rounded-md border border-grey-200 dark:border-grey-700 bg-transparent p-1 gap-1"
+      },
+      size: {
+        sm: "h-8 text-xs",
+        default: "h-10 text-sm",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "pills",
+      size: "default"
+    }
+  }
+);
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        pills: "rounded-sm px-3 py-1.5 data-[state=inactive]:text-muted-foreground hover:text-foreground",
+        underline: "pb-3 pt-2 px-1 rounded-none data-[state=inactive]:text-muted-foreground hover:text-foreground",
+        outline: "rounded-sm px-3 py-1.5 data-[state=inactive]:text-muted-foreground hover:text-foreground"
+      },
+      size: {
+        sm: "px-2.5 py-1 text-xs",
+        default: "px-3 py-1.5 text-sm",
+        md: "px-3 py-1.5 text-sm",
+        lg: "px-4 py-2 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "pills",
+      size: "default"
+    }
+  }
+);
+const tabsContentVariants = cva(
+  "mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary font-sans text-foreground data-[state=active]:animate-tab-slide"
+);
+
+export { tabsContentVariants, tabsListVariants, tabsTriggerVariants };

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,35 @@
+import type * as React from 'react';
+import type * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { TabsListVariants, TabsTriggerVariants } from './Tabs.styles';
+import type { MotionProp } from '../../types/motion';
+export interface TabsProps extends TabsPrimitive.TabsProps {
+    /**
+     * Visual variant style for the tab strip.
+     * @default 'pills'
+     */
+    variant?: 'underline' | 'pills' | 'outline';
+    /**
+     * Tab size.
+     * @default 'default'
+     */
+    size?: 'sm' | 'default' | 'md' | 'lg';
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListVariants {
+}
+export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, TabsTriggerVariants {
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+//# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/Tabs/Tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,SAAS;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,gBAAgB;CAAG;AAEvB,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,mBAAmB;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Tabs';
+export * from './Tabs.types';
+export * from './Tabs.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { TextProps } from './Text.types';
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,+EAuChB,CAAC"}

package/dist/components/Text/Text.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { textVariants } from './Text.styles.js';
+
+const Text = React.forwardRef(
+  ({
+    className,
+    style,
+    as = "p",
+    variant = "body-1",
+    foreground = "default",
+    weight,
+    italic,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const Component = asChild ? Slot : as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-slot": "text",
+        "data-testid": "timmbr-text",
+        style,
+        className: cn(
+          textVariants({
+            variant,
+            foreground,
+            weight,
+            italic,
+            className
+          })
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+
+export { Text };

package/dist/components/Text/Text.styles.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const textVariants: (props?: ({
+    variant?: "caption" | "body-1" | "body-2" | "body-2-medium" | "body-2-semibold" | "body-2-light" | "body-3" | "body-3-light" | "subtitle-1" | "subtitle-2" | null | undefined;
+    foreground?: "default" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "destructive" | "muted" | null | undefined;
+    weight?: "bold" | "light" | "normal" | "medium" | "semibold" | null | undefined;
+    italic?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextVariants = VariantProps<typeof textVariants>;
+//# sourceMappingURL=Text.styles.d.ts.map

package/dist/components/Text/Text.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;8EAwCvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/Text/Text.styles.js

@@ -0,0 +1,45 @@
+import { cva } from 'class-variance-authority';
+
+const textVariants = cva("font-sans transition-colors leading-[1.3]", {
+  variants: {
+    variant: {
+      "body-1": "text-[16px] font-normal",
+      "body-2": "text-[14px] font-normal",
+      "body-2-medium": "text-[14px] font-medium",
+      "body-2-semibold": "text-[14px] font-semibold",
+      "body-2-light": "text-[14px] font-light",
+      "body-3": "text-[12px] font-normal",
+      "body-3-light": "text-[12px] font-light",
+      "subtitle-1": "text-[18px] font-semibold",
+      "subtitle-2": "text-[18px] font-semibold",
+      caption: "text-[11px] font-normal tracking-wide"
+    },
+    foreground: {
+      default: "text-foreground",
+      muted: "text-grey-600 dark:text-grey-400",
+      subtle: "text-grey-500 dark:text-grey-500",
+      primary: "text-primary",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive",
+      white: "text-white",
+      inherit: "text-inherit"
+    },
+    weight: {
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    italic: {
+      true: "italic",
+      false: "not-italic"
+    }
+  },
+  defaultVariants: {
+    variant: "body-1",
+    foreground: "default"
+  }
+});
+
+export { textVariants };

package/dist/components/Text/Text.types.d.ts

@@ -0,0 +1,28 @@
+import type * as React from 'react';
+import type { TextVariants } from './Text.styles';
+export type TextTag = 'p' | 'span';
+export interface TextProps extends React.HTMLAttributes<HTMLElement>, TextVariants {
+    /**
+     * Allowed HTML tags for Text elements (strictly 'p' or 'span').
+     * @default 'p'
+     */
+    as?: TextTag;
+    /**
+     * If true, renders child element via Radix Slot while applying text styles.
+     */
+    asChild?: boolean;
+    /**
+     * Font weight override.
+     */
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Toggles italic styling.
+     */
+    italic?: boolean;
+    /**
+     * Foreground color token.
+     * @default 'default'
+     */
+    foreground?: 'default' | 'muted' | 'subtle' | 'primary' | 'secondary' | 'destructive' | 'white' | 'inherit';
+}
+//# sourceMappingURL=Text.types.d.ts.map

package/dist/components/Text/Text.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,OAAO,GAAG,GAAG,GAAG,MAAM,CAAC;AAEnC,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACvC,YAAY;IACd;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,aAAa,GACb,OAAO,GACP,SAAS,CAAC;CACf"}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Text';
+export * from './Text.types';
+export * from './Text.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { TextareaProps } from './Textarea.types';
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,QAAQ,2FAkLpB,CAAC"}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { AlertCircle, Info } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { textareaVariants } from './Textarea.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Textarea = React.forwardRef(
+  ({
+    className,
+    containerClassName,
+    style,
+    variant,
+    size,
+    resize = "vertical",
+    label,
+    floating = false,
+    helperText,
+    error,
+    maxLength,
+    showCount = false,
+    autoResize = false,
+    rows = 4,
+    disabled,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
+    motion,
+    id: customId,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const id = customId || generatedId;
+    const isError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue !== void 0 ? String(defaultValue) : ""
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? String(value ?? "") : internalValue;
+    const isFloatingActive = isFocused || currentValue.length > 0;
+    const internalRef = React.useRef(null);
+    const handleResize = React.useCallback(() => {
+      if (autoResize && internalRef.current) {
+        internalRef.current.style.height = "auto";
+        internalRef.current.style.height = `${internalRef.current.scrollHeight}px`;
+      }
+    }, [autoResize]);
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      handleResize();
+      onChange?.(e);
+    };
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+    React.useEffect(() => {
+      if (autoResize) {
+        handleResize();
+      }
+    }, [autoResize, currentValue, handleResize]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-1.5 w-full font-sans", containerClassName),
+        style,
+        children: [
+          label && !floating && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: "text-xs font-semibold text-foreground tracking-wide select-none text-left",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+            label && floating && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: cn(
+                  "absolute pointer-events-none transition-all duration-200 select-none z-10 truncate max-w-[calc(100%-24px)]",
+                  isFloatingActive ? "-top-2.5 left-2.5 px-1 bg-white dark:bg-grey-900 text-[11px] font-semibold leading-none rounded-xs" : "top-3 left-3 text-sm text-muted-foreground leading-none"
+                ),
+                style: {
+                  color: isFloatingActive ? isError ? "var(--color-destructive)" : "var(--color-primary)" : void 0
+                },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: (node) => {
+                  internalRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                id,
+                rows,
+                maxLength,
+                value,
+                defaultValue,
+                disabled,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                placeholder: floating && !isFloatingActive ? void 0 : placeholder,
+                "aria-invalid": isError ? "true" : void 0,
+                "aria-describedby": errorMessage || helperText ? `${id}-desc` : void 0,
+                className: cn(
+                  textareaVariants({
+                    variant,
+                    size,
+                    resize: autoResize ? "none" : resize,
+                    isError
+                  }),
+                  floating && "pt-3 pb-2",
+                  !shouldAnimate && "transition-none",
+                  motionClass,
+                  className
+                ),
+                ...props
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            errorMessage || helperText ? /* @__PURE__ */ jsxs(
+              "p",
+              {
+                id: `${id}-desc`,
+                className: cn(
+                  "text-xs mt-0.5 flex items-center gap-1.5 flex-1",
+                  isError ? "text-destructive font-medium" : "text-muted"
+                ),
+                children: [
+                  isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-mono text-muted shrink-0 select-none", children: [
+              currentValue.length,
+              "/",
+              maxLength
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/components/Textarea/Textarea.styles.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const textareaVariants: (props?: ({
+    variant?: "outline" | "filled" | "subtle" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
+    isError?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextareaVariants = VariantProps<typeof textareaVariants>;
+//# sourceMappingURL=Textarea.styles.d.ts.map

package/dist/components/Textarea/Textarea.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;;;8EAoC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}