@gridui/input 1.1.1 → 1.1.2

package/README.md

@@ -5,12 +5,12 @@ Core family. Public API: `Input`, `InputProps`, `Label`, `LabelProps`, `Textarea
 Import components from `@gridui/input` and load `@gridui/input/styles.css` after Theme.
 Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
 
-See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).
+See [component ownership](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/component-ownership.md) and [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/input/.changeset/history).
 
 ## Native multiline input and point menus
 
 See [Textarea](docs/textarea.md) for multiline input contracts and
-[ContextMenu](../dropdown-menu/docs/context-menu.md) for controlled viewport-point menus.
+[ContextMenu](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/dropdown-menu/docs/context-menu.md) for controlled viewport-point menus.
 
 
 `Label` owns inline label alignment and an optional decorative `icon` slot.

package/dist/index.js

@@ -3,17 +3,17 @@ import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var controlStyles = cva(cn(
   "gridui-control",
-  "min-w-0 w-full box-border border border-solid border-border rounded-control text-foreground bg-background type-input",
-  "disabled:opacity-50 disabled:cursor-not-allowed",
-  "aria-invalid:border-danger-foreground"
+  "gridui-u-min-w-0 gridui-u-w-full gridui-u-box-border gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-rounded-control gridui-u-text-foreground gridui-u-bg-background gridui-u-type-input",
+  "gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed",
+  "gridui-u-aria-invalid:border-danger-foreground"
 ));
 var controlStandardStyles = cva(cn(
   "gridui-control-standard",
-  "p-gridui-8 min-h-11"
+  "gridui-u-p-gridui-8 gridui-u-min-h-11"
 ));
 var controlSmallStyles = cva(cn(
   "gridui-control-small",
-  "py-gridui-4 px-gridui-8 min-h-9"
+  "gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-min-h-9"
 ));
 var controlVariants = cva(controlStyles(), {
   variants: {
@@ -56,9 +56,9 @@ import { cn as cn3 } from "@gridui/style-utils";
 import { cva as cva2 } from "class-variance-authority";
 var labelStyles = cva2(cn3(
   "gridui-label",
-  "inline-flex items-center gap-gridui-4 type-ui"
+  "gridui-u-inline-flex gridui-u-items-center gridui-u-gap-gridui-4 gridui-u-type-ui"
 ));
-var labelIconStyles = cva2("inline-flex shrink-0 text-foreground [&>svg]:size-gridui-16");
+var labelIconStyles = cva2("gridui-u-inline-flex gridui-u-shrink-0 gridui-u-text-foreground gridui-u-[&>svg]:size-gridui-16");
 
 // src/label/label.tsx
 import { cn as cn4 } from "@gridui/style-utils";
@@ -202,7 +202,7 @@ var Textarea = (props) => {
         onChange?.(event);
         onValueChange?.(event.currentTarget.value);
       },
-      className: cn5(controlVariants({ size: controlSize }), autoSize ? "resize-none" : "resize-y", className)
+      className: cn5(controlVariants({ size: controlSize }), autoSize ? "gridui-u-resize-none" : "gridui-u-resize-y", className)
     }
   );
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shared/style.ts", "../src/input/input.tsx", "../src/label/style.ts", "../src/label/label.tsx", "../src/textarea/use-textarea-autosize.ts", "../src/textarea/textarea.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const controlStyles = cva(cn(\n    \"gridui-control\",\n    \"min-w-0 w-full box-border border border-solid border-border rounded-control text-foreground bg-background type-input\",\n    \"disabled:opacity-50 disabled:cursor-not-allowed\",\n    \"aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"p-gridui-8 min-h-11\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"py-gridui-4 px-gridui-8 min-h-9\",\n));\n\nexport const controlVariants = cva(controlStyles(), {\n    variants: {\n        size: {\n            standard: controlStandardStyles(),\n            small: controlSmallStyles(),\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Input\n * @description Input\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const {\n        size,\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onValueChange,\n        ...restProps\n    } = props;\n    return (<input\n        {...restProps}\n        size={size}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const labelStyles = cva(cn(\n    \"gridui-label\",\n    \"inline-flex items-center gap-gridui-4 type-ui\",\n));\n\nexport const labelIconStyles = cva(\"inline-flex shrink-0 text-foreground [&>svg]:size-gridui-16\");\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Label\n */\n\nimport { labelIconStyles, labelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type LabelProps = ComponentPropsWithRef<\"label\"> & {\n    readonly icon?: ReactNode;\n};\n\nexport const Label: FC<LabelProps> = (props: LabelProps) => {\n    const { icon, children, className, ...restProps } = props;\n    return (<label\n        {...restProps}\n        className={cn(labelStyles(), className)}\n    >\n        {icon && (<span\n            aria-hidden=\"true\"\n            className={labelIconStyles()}\n        >\n            {icon}\n        </span>)}\n        {children}\n    </label>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Autosize\n */\n\nimport { type RefObject, useCallback, useEffect, useLayoutEffect } from \"react\";\n\nexport const useTextareaAutosize = (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => {\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new Error(\"Textarea maxHeight must be finite and positive.\");\n    }\n    const resize = useCallback(() => {\n        const element = ref.current;\n        if (!enabled || !element || element.clientWidth === 0) {\n            return;\n        }\n        const style = getComputedStyle(element);\n        const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\n        const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n        element.style.height = \"auto\";\n        const contentHeight = element.scrollHeight;\n        const height = style.boxSizing === \"border-box\" ? contentHeight + borders : contentHeight - padding;\n        const boundedHeight = Math.min(height, maxHeight ?? Number.POSITIVE_INFINITY);\n        element.style.height = `${boundedHeight}px`;\n        element.style.overflowY = height > boundedHeight ? \"auto\" : \"hidden\";\n    }, [\n        ref,\n        enabled,\n        maxHeight,\n    ]);\n    useLayoutEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        const originalHeight = element.style.height;\n        const originalOverflow = element.style.overflowY;\n        return () => {\n            element.style.height = originalHeight;\n            element.style.overflowY = originalOverflow;\n        };\n    }, [\n        ref,\n        enabled,\n    ]);\n    useLayoutEffect(() => {\n        resize();\n    });\n    useEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        let frame = 0;\n        let width = element.clientWidth;\n        const schedule = () => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(resize);\n        };\n        const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(() => {\n            if (element.clientWidth !== width) {\n                width = element.clientWidth;\n                schedule();\n            }\n        });\n        observer?.observe(element);\n        // A capture listener follows the live form owner, including DOM reassociation.\n        const reset = (event: Event): void => {\n            if (event.target === element.form) {\n                schedule();\n            }\n        };\n        const document = element.ownerDocument;\n        document.addEventListener(\"reset\", reset, true);\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            document.removeEventListener(\"reset\", reset, true);\n        };\n    }, [\n        ref,\n        enabled,\n        resize,\n    ]);\n    return resize;\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { useTextareaAutosize } from \"./use-textarea-autosize\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const {\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onInput,\n        onValueChange,\n        ref,\n        autoSize = false,\n        maxHeight,\n        style,\n        ...restProps\n    } = props;\n    const element = useRef<HTMLTextAreaElement>(null);\n    // React attaches the native element before assigning imperative handles.\n    useImperativeHandle(ref, () => {\n        return element.current!;\n    });\n    const resize = useTextareaAutosize(element, autoSize, maxHeight);\n    return (<textarea\n        {...restProps}\n        ref={element}\n        style={style}\n        onInput={(event) => {\n            resize();\n            onInput?.(event);\n        }}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), autoSize ? \"resize-none\" : \"resize-y\", className)}\n    />);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const controlStyles = cva(cn(\n    \"gridui-control\",\n    \"gridui-u-min-w-0 gridui-u-w-full gridui-u-box-border gridui-u-border gridui-u-border-solid gridui-u-border-border gridui-u-rounded-control gridui-u-text-foreground gridui-u-bg-background gridui-u-type-input\",\n    \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n    \"gridui-u-aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"gridui-u-p-gridui-8 gridui-u-min-h-11\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-min-h-9\",\n));\n\nexport const controlVariants = cva(controlStyles(), {\n    variants: {\n        size: {\n            standard: controlStandardStyles(),\n            small: controlSmallStyles(),\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Input\n * @description Input\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const {\n        size,\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onValueChange,\n        ...restProps\n    } = props;\n    return (<input\n        {...restProps}\n        size={size}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const labelStyles = cva(cn(\n    \"gridui-label\",\n    \"gridui-u-inline-flex gridui-u-items-center gridui-u-gap-gridui-4 gridui-u-type-ui\",\n));\n\nexport const labelIconStyles = cva(\"gridui-u-inline-flex gridui-u-shrink-0 gridui-u-text-foreground gridui-u-[&>svg]:size-gridui-16\");\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Label\n */\n\nimport { labelIconStyles, labelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type LabelProps = ComponentPropsWithRef<\"label\"> & {\n    readonly icon?: ReactNode;\n};\n\nexport const Label: FC<LabelProps> = (props: LabelProps) => {\n    const { icon, children, className, ...restProps } = props;\n    return (<label\n        {...restProps}\n        className={cn(labelStyles(), className)}\n    >\n        {icon && (<span\n            aria-hidden=\"true\"\n            className={labelIconStyles()}\n        >\n            {icon}\n        </span>)}\n        {children}\n    </label>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Autosize\n */\n\nimport { type RefObject, useCallback, useEffect, useLayoutEffect } from \"react\";\n\nexport const useTextareaAutosize = (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => {\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new Error(\"Textarea maxHeight must be finite and positive.\");\n    }\n    const resize = useCallback(() => {\n        const element = ref.current;\n        if (!enabled || !element || element.clientWidth === 0) {\n            return;\n        }\n        const style = getComputedStyle(element);\n        const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\n        const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n        element.style.height = \"auto\";\n        const contentHeight = element.scrollHeight;\n        const height = style.boxSizing === \"border-box\" ? contentHeight + borders : contentHeight - padding;\n        const boundedHeight = Math.min(height, maxHeight ?? Number.POSITIVE_INFINITY);\n        element.style.height = `${boundedHeight}px`;\n        element.style.overflowY = height > boundedHeight ? \"auto\" : \"hidden\";\n    }, [\n        ref,\n        enabled,\n        maxHeight,\n    ]);\n    useLayoutEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        const originalHeight = element.style.height;\n        const originalOverflow = element.style.overflowY;\n        return () => {\n            element.style.height = originalHeight;\n            element.style.overflowY = originalOverflow;\n        };\n    }, [\n        ref,\n        enabled,\n    ]);\n    useLayoutEffect(() => {\n        resize();\n    });\n    useEffect(() => {\n        const element = ref.current;\n        if (!enabled || !element) {\n            return;\n        }\n        let frame = 0;\n        let width = element.clientWidth;\n        const schedule = () => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(resize);\n        };\n        const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(() => {\n            if (element.clientWidth !== width) {\n                width = element.clientWidth;\n                schedule();\n            }\n        });\n        observer?.observe(element);\n        // A capture listener follows the live form owner, including DOM reassociation.\n        const reset = (event: Event): void => {\n            if (event.target === element.form) {\n                schedule();\n            }\n        };\n        const document = element.ownerDocument;\n        document.addEventListener(\"reset\", reset, true);\n        return () => {\n            cancelAnimationFrame(frame);\n            observer?.disconnect();\n            document.removeEventListener(\"reset\", reset, true);\n        };\n    }, [\n        ref,\n        enabled,\n        resize,\n    ]);\n    return resize;\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { controlVariants } from \"../shared/style\";\nimport { useTextareaAutosize } from \"./use-textarea-autosize\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly controlSize?: \"standard\" | \"small\";\n    readonly onValueChange?: (value: string) => void;\n};\n\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const {\n        controlSize = \"standard\",\n        className,\n        onChange,\n        onInput,\n        onValueChange,\n        ref,\n        autoSize = false,\n        maxHeight,\n        style,\n        ...restProps\n    } = props;\n    const element = useRef<HTMLTextAreaElement>(null);\n    // React attaches the native element before assigning imperative handles.\n    useImperativeHandle(ref, () => {\n        return element.current!;\n    });\n    const resize = useTextareaAutosize(element, autoSize, maxHeight);\n    return (<textarea\n        {...restProps}\n        ref={element}\n        style={style}\n        onInput={(event) => {\n            resize();\n            onInput?.(event);\n        }}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), autoSize ? \"gridui-u-resize-none\" : \"gridui-u-resize-y\", className)}\n    />);\n};\n"],
+  "mappings": "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",
   "names": ["cn", "cn", "cva", "cn", "jsx", "cn", "jsx"]
 }

package/dist/styles.css

@@ -7,92 +7,86 @@
   }
 }
 @layer utilities {
-  .box-border {
+  .gridui-u-box-border {
     box-sizing: border-box;
   }
-  .hidden {
-    display: none;
-  }
-  .inline-flex {
+  .gridui-u-inline-flex {
     display: inline-flex;
   }
-  .min-h-9 {
+  .gridui-u-min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
-  .min-h-11 {
+  .gridui-u-min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
-  .w-full {
+  .gridui-u-w-full {
     width: 100%;
   }
-  .min-w-0 {
+  .gridui-u-min-w-0 {
     min-width: 0px;
   }
-  .shrink-0 {
+  .gridui-u-shrink-0 {
     flex-shrink: 0;
   }
-  .resize {
-    resize: both;
-  }
-  .resize-none {
+  .gridui-u-resize-none {
     resize: none;
   }
-  .resize-y {
+  .gridui-u-resize-y {
     resize: vertical;
   }
-  .items-center {
+  .gridui-u-items-center {
     align-items: center;
   }
-  .gap-gridui-4 {
+  .gridui-u-gap-gridui-4 {
     gap: var(--gridui-space-4);
   }
-  .rounded-control {
+  .gridui-u-rounded-control {
     border-radius: var(--gridui-control-radius);
   }
-  .border {
+  .gridui-u-border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-solid {
+  .gridui-u-border-solid {
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-border {
+  .gridui-u-border-border {
     border-color: var(--gridui-border);
   }
-  .bg-background {
+  .gridui-u-bg-background {
     background-color: var(--gridui-background);
   }
-  .p-gridui-8 {
+  .gridui-u-p-gridui-8 {
     padding: var(--gridui-space-8);
   }
-  .px-gridui-8 {
+  .gridui-u-px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .py-gridui-4 {
+  .gridui-u-py-gridui-4 {
     padding-block: var(--gridui-space-4);
   }
-  .type-input {
+  .gridui-u-type-input {
     font: var(--gridui-type-input);
     letter-spacing: normal;
   }
-  .type-ui {
+  .gridui-u-type-ui {
     font: var(--gridui-type-ui);
     letter-spacing: normal;
   }
-  .text-foreground {
+  .gridui-u-text-foreground {
     color: var(--gridui-foreground);
   }
-  .disabled\:cursor-not-allowed:disabled {
+  .gridui-u-disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
-  .disabled\:opacity-50:disabled {
+  .gridui-u-disabled\:opacity-50:disabled {
     opacity: 50%;
   }
-  .aria-invalid\:border-danger-foreground[aria-invalid="true"] {
+  .gridui-u-aria-invalid\:border-danger-foreground[aria-invalid="true"] {
     border-color: var(--gridui-danger-foreground);
   }
-  .\[\&\>svg\]\:size-gridui-16 > svg {
+  .gridui-u-\[\&\>svg\]\:size-gridui-16 > svg {
     width: var(--gridui-space-16);
     height: var(--gridui-space-16);
   }

package/docs/common-inputs.md

@@ -0,0 +1,166 @@
+# Common inputs
+
+Import MultiSelect from `@gridui/select`, NumberField from `@gridui/number-field`, Slider from `@gridui/slider`, and TagInput from `@gridui/tag-input`.
+Load the rendered family styles and Theme CSS using the shared installation instructions. These
+controls use native form elements and Radix primitives; no additional headless
+component library or animation runtime is required.
+
+Use a visible associated label or `aria-label` for each control. Localize all
+required labels, including slider thumb names and tag removal actions. Forward
+`aria-describedby` and `aria-invalid` to connect application-owned help and
+validation messages. Standard controls have a 44px minimum target; Slider keeps
+a 44px interaction region around its track and thumbs.
+
+## MultiSelect
+
+```tsx
+<MultiSelect
+    aria-label="Project teams"
+    name="teams"
+    defaultValue={["design"]}
+    options={[
+        { value: "design", label: "Design" },
+        { value: "engineering", label: "Engineering" },
+    ]}
+    placeholder="Choose teams"
+    searchLabel="Filter teams"
+    emptyLabel="No matching teams"
+    clearLabel="Clear teams"
+/>
+```
+
+MultiSelect uses a Radix Popover and a native search input with an
+active-descendant listbox. `options` accepts the same unique values, groups,
+labels, descriptions, icons, and disabled options as Select/Combobox. Filtering
+uses their normalized, case-insensitive label and description search. Search
+is local; callers own remote loading and option creation.
+
+Use `value: readonly string[]` with `onValueChange`, or `defaultValue` for local
+state. Values are deduplicated without changing their order. The closed trigger
+shows selected labels and wraps long content. Unknown selected values remain in
+form submission and display their value until matching options arrive.
+
+Enter, Space, or arrow keys open the popup and focus search. Up/Down navigate
+results; Enter or pointer activation toggles an enabled option without closing.
+Disabled options remain discoverable. When options change, a missing active item
+falls back to the first current result. Read-only and disabled transitions close
+the popup and discard the search; enabling it again leaves it closed.
+Native text editing and IME composition
+remain available. Escape closes and restores trigger focus; outside dismissal
+preserves the outside target's focus. `portalContainer` supports placement
+within an enclosing overlay. `dir` also applies to the portalled content.
+
+`name`, `form`, `required`, and `disabled` configure a hidden native multiple
+select. Read its values with `FormData.getAll(name)`. A supplied `clearLabel`
+adds a separate clear action, disabled when required or empty. `readOnly`
+prevents editing while retaining submitted values. Availability is checked at
+activation time, including disabled fieldsets and already-open portals.
+
+## NumberField
+
+```tsx
+<NumberField
+    aria-label="Quantity"
+    name="quantity"
+    defaultValue={1.5}
+    min={0}
+    max={10}
+    step={0.25}
+    incrementLabel="Increase quantity"
+    decrementLabel="Decrease quantity"
+/>
+```
+
+NumberField wraps a native `input[type=number]` with decrement/increment buttons.
+Its input ref, native attributes, required state, decimal stepping, constraints,
+form association, and keyboard editing remain native. Use `controlSize="small"`
+for the existing compact control size. `dir` applies to the entire control.
+
+`value` / `defaultValue` are `number | null`; null means empty. `onValueChange`
+receives numbers or null for both typing and step buttons. Native `onChange`
+receives input changes; buttons do not synthesize input events. A controlled
+consumer can reject a requested value. Buttons return focus to the input and
+stop at bounds. Typed out-of-range values remain visible for native/application
+validation instead of being silently clamped. Bounds and values must be finite,
+`min <= max`, and `step` must be positive and finite.
+
+## Slider
+
+```tsx
+<Slider
+    name="hours"
+    min={0}
+    max={24}
+    defaultValue={[9, 17]}
+    minStepsBetweenThumbs={1}
+    thumbLabels={["Start hour", "End hour"]}
+    getValueText={(value) => `${value}:00`}
+/>
+```
+
+Slider wraps Radix Slider. One value renders one thumb; an ordered array renders
+a range. Supply a unique meaningful `thumbLabels` entry per thumb. Optional
+`getValueText(value, index)` announces units and updates with local or controlled
+values. Use `value` / `onValueChange` for controlled state and `onValueCommit` for
+work that should happen after pointer or keyboard interaction.
+
+Radix owns pointer capture, arrow/Home/End/Page keys, RTL direction, vertical
+orientation, and thumb separation. GridUI mirrors named form values during SSR. A range named `hours` submits
+repeated `hours[]` fields; a single thumb submits `hours`. Set
+`orientation="vertical"` and optionally override height through `className`.
+The default vertical height is 10rem. Values must be sorted, finite, within the
+finite `min < max` range, and match the label count. Step must be positive.
+Direct manipulation does not add motion that lags behind the pointer.
+
+## TagInput
+
+```tsx
+<TagInput
+    aria-label="Project tags"
+    listLabel="Project tag list"
+    removeLabel={(tag) => `Remove tag ${tag}`}
+    name="tags"
+    defaultValue={["planning"]}
+    maxTags={8}
+/>
+```
+
+TagInput is a native text input and a list of removable values. Use `value` /
+`onValueChange` or `defaultValue`. Enter or comma commits a nonempty draft;
+comma/newline-delimited paste replaces the selected draft and commits multiple
+values. IME composition never commits on Enter. Values are trimmed, empty values
+ignored, and duplicates matched case-sensitively. `maxTags` limits new entries;
+`validateTag` optionally accepts each new value. Existing controlled values are
+not rewritten. `onReject` reports `{ value, reason }`, with reason `duplicate`,
+`invalid`, or `limit`. Invalid/limited drafts remain editable. Applications own
+visible validation feedback and live announcements.
+
+Backspace on an empty draft focuses the last removal button without deleting.
+Backspace/Delete or activation on that button removes its value and returns
+focus to the input. Long tags wrap. `readOnly` and `disabled` prevent changes.
+The visible field border reflects `aria-invalid`; disabled inputs also dim the
+containing tag field, including when disabled through a fieldset.
+A hidden multiple select owns `name`, `form`, `required`, and submission;
+`FormData.getAll(name)` returns committed tags, excluding the draft. Required
+validation focuses the visible input. Supply an application error message with
+`aria-describedby`/`aria-invalid` when needed.
+
+## Forms, reset, and rendering
+
+Uncontrolled values render during SSR and restore their initial values on
+native form reset. Cancelled reset events leave values unchanged. MultiSelect
+and TagInput also ask controlled consumers to restore their initial selection
+through `onValueChange`; consumers can reject the request. Controlled NumberField
+and Slider retain the consumer's value, so reset application state explicitly
+when desired. Reset clears an uncontrolled TagInput draft and closes MultiSelect.
+Disabled controls do not submit; readonly controls do. Fieldset disabling is
+checked before committing changes. Keep initial server/client values identical.
+
+Storybook includes empty, selected/range, disabled, readonly where supported,
+RTL, and controlled examples. Package tests cover SSR/native values and input
+validation; browser tests cover actual keyboard/pointer interaction, IME,
+submission, reset cancellation, limits, viewport sizes, themes, and reduced motion.
+
+The API and visual review reference shadcn's
+[Radix Slider](https://ui.shadcn.com/docs/components/radix/slider), while retaining
+GridUI's geometry, theme tokens, localization, and responsibility boundaries.

package/docs/textarea.md

@@ -0,0 +1,28 @@
+# Textarea
+
+Import `Textarea` and `TextareaProps` from `@gridui/input`. It is a native textarea with the same `controlSize`
+(`standard` or `small`), invalid, disabled, and focus styling as `Input`.
+
+All native textarea props and refs are forwarded, including `value`,
+`defaultValue`, `name`, `rows`, `required`, `maxLength`, and ARIA attributes.
+`onChange` runs before the optional `onValueChange(string)` notification, matching
+Input. Use `value` plus `onValueChange` for a controlled field. The default resize
+behavior is vertical; override it with `className` (for example `resize-none`).
+
+The caller supplies the accessible label and owns validation, persistence, and
+submission. Enter and IME input retain native multiline behavior; the library
+does not add a chat-specific send shortcut or automatic submission.
+
+## Optional automatic height
+
+Set `autoSize` to grow and shrink with the content. Native `rows` and CSS minimum
+height establish the baseline. Optional `maxHeight` is a positive finite CSS
+height in pixels; use a value at least as large as the configured CSS minimum
+height. Beyond the cap the field scrolls internally. The height and overflow are
+owned by autosizing while enabled; avoid competing `height` / `overflowY` styles.
+Without autosizing the existing vertical resize behavior remains unchanged.
+
+Sizing responds to native input, controlled value renders, element-width changes
+(including becoming visible), and native form reset. Width observation requires
+`ResizeObserver`. Disabling autosizing restores the original inline height and
+overflow. Native refs, onInput, onChange and onValueChange remain available.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gridui/input",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "GridUI React input",
   "license": "UNLICENSED",
   "type": "module",
   "files": [
     "dist",
+    "docs",
     "README.md"
   ],
   "sideEffects": [
@@ -26,8 +27,8 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.1.3",
-    "@gridui/theme": "^2.2.1",
+    "@gridui/style-utils": "^2.1.4",
+    "@gridui/theme": "^2.3.2",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {