@tangible/ui 0.0.1 → 0.0.3

package/components/Select/types.d.ts

@@ -0,0 +1,216 @@
+import type { Placement, FloatingContext, ReferenceType } from '@floating-ui/react';
+import type { RefObject, CSSProperties, MutableRefObject } from 'react';
+import type { SizeStandard } from '../../types/sizes';
+import type { OptionValue } from '../../utils/value-key';
+/**
+ * Placement sides for the dropdown content.
+ */
+export type Side = 'top' | 'bottom';
+/**
+ * Alignment relative to trigger.
+ */
+export type Align = 'start' | 'center' | 'end';
+export type SelectProps = {
+    /**
+     * Control size.
+     * @default 'md'
+     */
+    size?: SizeStandard;
+    /**
+     * Controlled selected value.
+     */
+    value?: OptionValue;
+    /**
+     * Default value for uncontrolled usage.
+     */
+    defaultValue?: OptionValue;
+    /**
+     * Callback when selection changes.
+     * Called with undefined when selection is cleared.
+     */
+    onValueChange?: (value: OptionValue | undefined) => void;
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the entire select is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Preferred side of the trigger to place the listbox.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment along the side.
+     * @default 'start'
+     */
+    align?: Align;
+    /**
+     * Distance from the trigger in pixels.
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Whether the selection can be cleared with a clear button.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Accessible name for the select.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this select.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element(s) that describe this select.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional trigger ID override.
+     * Useful for Field integration via htmlFor.
+     */
+    id?: string;
+    children: React.ReactNode;
+};
+export type SelectTriggerProps = {
+    /**
+     * When true, merges props onto the child element instead of wrapping.
+     * Child must be a single React element that accepts ref and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children?: React.ReactNode;
+};
+export type SelectContentProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type SelectOptionProps = {
+    /**
+     * The value for this option. Required and must be unique.
+     * Can be string or number.
+     */
+    value: OptionValue;
+    /**
+     * Whether this option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text value for typeahead. Required when children is not a string.
+     * If children is a string, defaults to that.
+     */
+    textValue?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type SelectGroupProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type SelectLabelProps = {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+/**
+ * Registration record for an option.
+ */
+export type RegisteredOption = {
+    value: OptionValue;
+    ref: RefObject<HTMLElement | null>;
+    disabled: boolean;
+    textValue: string;
+};
+/**
+ * Stable context: config, IDs, refs, and stable callbacks.
+ * Rarely changes — safe to subscribe without rerender concerns.
+ */
+export type SelectActionsContextValue = {
+    disabled: boolean;
+    placeholder: string;
+    clearable: boolean;
+    size: SizeStandard;
+    triggerId: string;
+    listboxId: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    setOpen: (open: boolean) => void;
+    setValue: (value: OptionValue | undefined, textValue?: string) => void;
+    registerOption: (option: RegisteredOption) => void;
+    unregisterOption: (value: OptionValue) => void;
+    handleSelect: (index: number | null) => void;
+    refs: {
+        reference: React.RefObject<ReferenceType | null>;
+        floating: React.RefObject<HTMLElement | null>;
+        setReference: (node: ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    listRef: MutableRefObject<(HTMLElement | null)[]>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+/**
+ * State context: values that change during interaction.
+ * Subscribe only when you need reactive updates.
+ */
+export type SelectStateContextValue = {
+    open: boolean;
+    value: OptionValue | undefined;
+    getSelectedTextValue: () => string | undefined;
+    activeIndex: number | null;
+    highlightedValue: OptionValue | null;
+    orderedOptions: RegisteredOption[];
+    floatingStyles: CSSProperties;
+    floatingContext: FloatingContext;
+};
+/**
+ * Combined context value (for backwards compat and convenience hooks).
+ * @deprecated Prefer using useSelectActions + useSelectState separately.
+ */
+export type SelectContextValue = SelectActionsContextValue & SelectStateContextValue;
+export type SelectContentContextValue = {
+    listRef: MutableRefObject<(HTMLElement | null)[]>;
+    activeIndex: number | null;
+    handleSelect: (index: number | null) => void;
+    orderedOptions: RegisteredOption[];
+};
+/**
+ * Convert side + align to Floating UI placement.
+ */
+export declare function toPlacement(side: Side, align: Align): Placement;

package/components/Select/types.js

@@ -0,0 +1,11 @@
+// -----------------------------------------------------------------------------
+// Utility
+// -----------------------------------------------------------------------------
+/**
+ * Convert side + align to Floating UI placement.
+ */
+export function toPlacement(side, align) {
+    if (align === 'center')
+        return side;
+    return `${side}-${align}`;
+}

package/components/Sidebar/Sidebar.js

@@ -6,7 +6,7 @@ const isBrowser = typeof document !== 'undefined';
 // Sidebar (Root)
 // =============================================================================
 function SidebarRoot(props) {
-    const { position = 'left', drawer = false, isOpen = false, onClose, ariaLabel, children, className, } = props;
+    const { position = 'left', drawer = false, open = false, onClose, 'aria-label': ariaLabel, children, className, } = props;
     const sidebarRef = useRef(null);
     const restoreRef = useRef(null);
     const rootClassName = ['tui-sidebar', className].filter(Boolean).join(' ');
@@ -16,7 +16,7 @@ function SidebarRoot(props) {
     useEffect(() => {
         if (!drawer || !isBrowser)
             return;
-        if (isOpen) {
+        if (open) {
             // Capture focus target when opening
             restoreRef.current = document.activeElement;
         }
@@ -28,41 +28,41 @@ function SidebarRoot(props) {
             }
             restoreRef.current = null;
         }
-    }, [drawer, isOpen]);
+    }, [drawer, open]);
     // ---------------------------------------------------------------------------
     // Drawer mode: body scroll lock
     // ---------------------------------------------------------------------------
     useEffect(() => {
-        if (!drawer || !isOpen)
+        if (!drawer || !open)
             return;
         document.body.classList.add('tui-sidebar-drawer-open');
         return () => {
             document.body.classList.remove('tui-sidebar-drawer-open');
         };
-    }, [drawer, isOpen]);
+    }, [drawer, open]);
     // ---------------------------------------------------------------------------
     // Drawer mode: focus trap (handles Tab cycling and ESC to close)
     // ---------------------------------------------------------------------------
     useFocusTrap(sidebarRef, {
-        isActive: drawer && isOpen,
+        isActive: drawer && open,
         onEscape: onClose,
     });
     // ---------------------------------------------------------------------------
     // Drawer mode: initial focus
     // ---------------------------------------------------------------------------
     useEffect(() => {
-        if (!drawer || !isOpen)
+        if (!drawer || !open)
             return;
         const sidebar = sidebarRef.current;
         if (!sidebar)
             return;
         const target = getInitialFocus(sidebar);
         target.focus({ preventScroll: true });
-    }, [drawer, isOpen]);
+    }, [drawer, open]);
     // ---------------------------------------------------------------------------
     // Sidebar content (shared between static and drawer modes)
     // ---------------------------------------------------------------------------
-    const sidebarContent = (_jsx("aside", { ref: sidebarRef, className: rootClassName, "data-position": position, "aria-label": ariaLabel, "aria-modal": drawer && isOpen ? 'true' : undefined, tabIndex: drawer ? -1 : undefined, children: children }));
+    const sidebarContent = (_jsx("aside", { ref: sidebarRef, className: rootClassName, "data-position": position, "aria-label": ariaLabel, "aria-modal": drawer && open ? 'true' : undefined, tabIndex: drawer ? -1 : undefined, children: children }));
     // ---------------------------------------------------------------------------
     // Static mode: render directly
     // ---------------------------------------------------------------------------
@@ -72,7 +72,7 @@ function SidebarRoot(props) {
     // ---------------------------------------------------------------------------
     // Drawer mode: render inline with fixed positioning (no portal needed)
     // ---------------------------------------------------------------------------
-    if (!isOpen) {
+    if (!open) {
         return null;
     }
     const drawerClassName = [
@@ -95,9 +95,9 @@ function SidebarHeader(props) {
 // Sidebar.Nav
 // =============================================================================
 function SidebarNav(props) {
-    const { ariaLabel, ariaLabelledBy, children, className } = props;
+    const { 'aria-label': navAriaLabel, 'aria-labelledby': navAriaLabelledBy, children, className } = props;
     const navClassName = ['tui-sidebar__nav', className].filter(Boolean).join(' ');
-    return (_jsx("nav", { className: navClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: children }));
+    return (_jsx("nav", { className: navClassName, "aria-label": navAriaLabel, "aria-labelledby": navAriaLabelledBy, children: children }));
 }
 SidebarHeader.displayName = 'Sidebar.Header';
 SidebarNav.displayName = 'Sidebar.Nav';

package/components/Sidebar/types.d.ts

@@ -14,7 +14,7 @@ export type SidebarProps = {
     /**
      * Drawer open state. Required when `drawer={true}`.
      */
-    isOpen?: boolean;
+    open?: boolean;
     /**
      * Callback to close the drawer.
      * Called when ESC is pressed or backdrop is clicked.
@@ -22,9 +22,9 @@ export type SidebarProps = {
     onClose?: () => void;
     /**
      * Accessible label for the aside landmark.
-     * Typically omit this if using `ariaLabel` on `Sidebar.Nav` instead.
+     * Typically omit this if using `aria-label` on `Sidebar.Nav` instead.
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * Sidebar content (Header, Nav, etc.).
      */
@@ -49,11 +49,11 @@ export type SidebarNavProps = {
      * Accessible label for the nav landmark.
      * Use this for the primary label since nav is the actionable region.
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of a visible heading that labels the navigation.
      */
-    ariaLabelledBy?: string;
+    'aria-labelledby'?: string;
     /**
      * Nav content (typically Accordion with StepList).
      */

package/components/StepIndicator/StepIndicator.js

@@ -60,5 +60,5 @@ export function StepIndicator(props) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsx("div", { className: rootClassName, children: _jsxs(Progress, { mode: "circle", variant: variant, size: size, value: displayValue, showLabels: showValue || hasIcon, labelPosition: "inside", ariaLabel: ariaLabel, children: [hasIcon && iconName && (_jsx(Icon, { name: iconName })), showValue && status === 'in-progress' && (_jsxs("span", { className: "tui-step-indicator__value", children: [Math.round(displayValue), "%"] }))] }) }));
+    return (_jsx("div", { className: rootClassName, children: _jsxs(Progress, { mode: "circle", variant: variant, size: size, value: displayValue, showLabels: showValue || hasIcon, labelPosition: "inside", "aria-label": ariaLabel, children: [hasIcon && iconName && (_jsx(Icon, { name: iconName })), showValue && status === 'in-progress' && (_jsxs("span", { className: "tui-step-indicator__value", children: [Math.round(displayValue), "%"] }))] }) }));
 }

package/components/StepList/StepList.js

@@ -7,11 +7,11 @@ import { StepIndicator } from '../StepIndicator/index.js';
 // StepList (Root)
 // =============================================================================
 function StepListRoot(props) {
-    const { ariaLabel, ariaLabelledBy, ariaCurrent = 'step', current, onSelect, children, className, } = props;
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCurrent = 'step', current, onSelect, children, className, } = props;
     // Dev warning for missing nav label
     if (import.meta.env.DEV && !ariaLabel && !ariaLabelledBy) {
         console.warn('StepList: Navigation landmark requires a label. ' +
-            'Provide either `ariaLabel` or `ariaLabelledBy` prop for screen reader users.');
+            'Provide either `aria-label` or `aria-labelledby` prop for screen reader users.');
     }
     const rootClassName = cx('tui-steplist', className);
     // Memoize context value to prevent unnecessary re-renders of all items

package/components/StepList/types.d.ts

@@ -5,14 +5,14 @@ export type { StepStatus };
 export type StepListProps = {
     /**
      * Accessible label for the navigation landmark.
-     * Use either `ariaLabel` or `ariaLabelledBy`, not both.
+     * Use either `aria-label` or `aria-labelledby`, not both.
      */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /**
      * ID of a visible heading that labels the navigation.
-     * Use either `ariaLabel` or `ariaLabelledBy`, not both.
+     * Use either `aria-label` or `aria-labelledby`, not both.
      */
-    ariaLabelledBy?: string;
+    'aria-labelledby'?: string;
     /**
      * What `aria-current` value to use for the current item.
      * - `'step'`: For step-by-step progressions (default)

package/components/Switch/Switch.d.ts

@@ -0,0 +1,9 @@
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "role" | "aria-checked" | "onChange"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: import("..").SizeStandard;
+    label?: import("react").ReactNode;
+    disabled?: boolean;
+    className?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/components/Switch/Switch.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { cx } from '../../utils/cx.js';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { useControllableState } from '../../utils/use-controllable-state.js';
+import { isDev } from '../../utils/is-dev.js';
+// =============================================================================
+// Switch Component
+// =============================================================================
+//
+// <button role="switch"> with animated thumb. Uses new tui-switch SCSS.
+// Existing tui-toggle CSS untouched (stays for CSS-only usage).
+//
+// Bare (no label): returns <button> directly for Field.Control cloneElement.
+// With label: wraps in <label>, native label click focuses the button.
+//
+// CSS token API:
+//   --tui-switch-accent     Accent color for on state
+//   --tui-switch-track-off  Track color when off
+//
+// =============================================================================
+// Props that should route to the <button>, not the wrapper
+const BUTTON_PROPS = new Set([
+    'id',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-required',
+    'aria-label',
+    'aria-labelledby',
+    'form',
+    'tabIndex',
+    'onFocus',
+    'onBlur',
+]);
+export const Switch = forwardRef(function Switch({ checked: controlledChecked, defaultChecked = false, onCheckedChange, size = 'md', label, disabled, className, ...rest }, externalRef) {
+    const internalRef = useRef(null);
+    const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
+    const [checked, setChecked] = useControllableState({
+        value: controlledChecked,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
+    // Dev-only: warn if bare switch has no accessible name (fire once)
+    const hasWarnedRef = useRef(false);
+    useEffect(() => {
+        if (hasWarnedRef.current)
+            return;
+        if (isDev() && !label) {
+            const hasName = 'aria-label' in rest || 'aria-labelledby' in rest;
+            if (!hasName) {
+                console.warn('Switch: Missing accessible name. Provide label prop, aria-label, or aria-labelledby.');
+                hasWarnedRef.current = true;
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Extract onClick from rest so prop spreading can't override internal handler
+    const { onClick: onClickProp, ...restWithoutClick } = rest;
+    const handleClick = (e) => {
+        setChecked((prev) => !prev);
+        onClickProp?.(e);
+    };
+    const isChecked = checked ?? false;
+    // Bare: no label — Field.Control can inject id/aria-* directly
+    if (!label) {
+        return (_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', sizeClass, isChecked && 'is-checked', className), onClick: handleClick, ...restWithoutClick, children: _jsx("span", { className: "tui-switch__thumb" }) }));
+    }
+    // Split rest props: some go on button, some on wrapper
+    const buttonProps = {};
+    const wrapperProps = {};
+    for (const [key, val] of Object.entries(restWithoutClick)) {
+        if (BUTTON_PROPS.has(key)) {
+            buttonProps[key] = val;
+        }
+        else {
+            wrapperProps[key] = val;
+        }
+    }
+    // With label: <label> wrapper provides click-anywhere-to-toggle natively.
+    // We intercept the label click to toggle state and prevent the browser's
+    // default label→button activation (which would double-toggle).
+    const handleLabelClick = (e) => {
+        // Prevent native label click from also activating the button
+        e.preventDefault();
+        if (disabled)
+            return;
+        internalRef.current?.focus();
+        setChecked((prev) => !prev);
+    };
+    return (_jsxs("label", { className: cx('tui-switch', sizeClass, disabled && 'is-disabled', className), onClick: handleLabelClick, ...wrapperProps, children: [_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', isChecked && 'is-checked'), ...buttonProps, children: _jsx("span", { className: "tui-switch__thumb" }) }), _jsx("span", { className: "tui-switch__label", children: label })] }));
+});

package/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './types';

package/components/Switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './Switch.js';

package/components/Switch/types.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SizeStandard } from '../../types/sizes';
+export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'onChange' | 'aria-checked'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: SizeStandard;
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};

package/components/Switch/types.js

@@ -0,0 +1 @@
+export {};

package/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "prefix"> & {
+    type?: import("./types").TextInputType;
+    size?: import("..").SizeStandard;
+    prefix?: import("react").ReactNode;
+    suffix?: import("react").ReactNode;
+    className?: string;
+    inputClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/components/TextInput/TextInput.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../utils/cx.js';
+// =============================================================================
+// TextInput Component
+// =============================================================================
+//
+// A controlled text input with optional prefix/suffix slots.
+// Works with Field.Control for label, helper text, and error wiring.
+//
+// CSS token API (inherited from input styles):
+//   --tui-input-bg            Background color
+//   --tui-input-fg            Foreground/text color
+//   --tui-input-border        Border color
+//   --tui-input-border-focus  Focus state border color
+//   --tui-input-border-invalid Invalid state border color
+//   --tui-input-radius        Border radius
+//
+// =============================================================================
+export const TextInput = forwardRef(function TextInput({ type = 'text', size = 'md', prefix, suffix, className, inputClassName, disabled, ...rest }, ref) {
+    const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
+    // Always wrap in tui-input-group so className consistently targets the root.
+    // ARIA/form props from Field.Control reach the <input> via ...rest.
+    return (_jsxs("div", { className: cx('tui-input-group', sizeClass, disabled && 'is-disabled', className), children: [prefix && _jsx("span", { className: "tui-input-group__prefix", children: prefix }), _jsx("input", { ref: ref, type: type, disabled: disabled, className: cx('tui-input', inputClassName), ...rest }), suffix && _jsx("span", { className: "tui-input-group__suffix", children: suffix })] }));
+});

package/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export type { TextInputProps, TextInputType } from './types';

package/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from './TextInput.js';

package/components/TextInput/types.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode, InputHTMLAttributes } from 'react';
+import type { SizeStandard } from '../../types/sizes';
+export type TextInputType = 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'number';
+export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'prefix' | 'size'> & {
+    /**
+     * Input type.
+     * @default 'text'
+     */
+    type?: TextInputType;
+    /**
+     * Control size.
+     * @default 'md'
+     */
+    size?: SizeStandard;
+    /**
+     * Content to render before the input (icon, text).
+     */
+    prefix?: ReactNode;
+    /**
+     * Content to render after the input (icon, button).
+     */
+    suffix?: ReactNode;
+    /**
+     * Additional class name applied to the root wrapper element.
+     */
+    className?: string;
+    /**
+     * Class name applied directly to the `<input>` element.
+     * Use for utilities like `tui-input-reset` that must target the input itself.
+     */
+    inputClassName?: string;
+};

package/components/TextInput/types.js

@@ -0,0 +1 @@
+export {};

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    size?: import("..").SizeStandard;
+    resize?: import("./types").TextareaResize;
+    autoResize?: boolean;
+    className?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/components/Textarea/Textarea.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { cx } from '../../utils/cx.js';
+import { composeRefs } from '../../utils/compose-refs.js';
+// =============================================================================
+// Textarea Component
+// =============================================================================
+//
+// A controlled textarea with optional auto-resize.
+// Works with Field.Control for label, helper text, and error wiring.
+//
+// CSS token API (inherited from input styles):
+//   --tui-input-bg            Background color
+//   --tui-input-fg            Foreground/text color
+//   --tui-input-border        Border color
+//   --tui-input-border-focus  Focus state border color
+//   --tui-input-border-invalid Invalid state border color
+//   --tui-input-radius        Border radius
+//
+// =============================================================================
+export const Textarea = forwardRef(function Textarea({ size = 'md', resize = 'vertical', autoResize = false, className, onInput, ...rest }, externalRef) {
+    const internalRef = useRef(null);
+    const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
+    // Auto-resize: adjust height to fit content
+    const adjustHeight = useCallback(() => {
+        const el = internalRef.current;
+        if (!el)
+            return;
+        // Reset to auto so scrollHeight reflects actual content height
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, []);
+    // Size on mount and when value changes externally (controlled).
+    // Track rest.value so we only re-measure when content actually changes,
+    // not on every render.
+    const value = rest.value;
+    useEffect(() => {
+        if (autoResize) {
+            adjustHeight();
+        }
+    }, [autoResize, adjustHeight, value]);
+    const handleInput = useCallback((e) => {
+        if (autoResize) {
+            adjustHeight();
+        }
+        onInput?.(e);
+    }, [autoResize, adjustHeight, onInput]);
+    return (_jsx("textarea", { ref: composeRefs(internalRef, externalRef), className: cx('tui-textarea', sizeClass, autoResize && 'is-autoresize', className), style: !autoResize ? { resize } : undefined, onInput: handleInput, ...rest }));
+});

package/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaResize } from './types';