@gridui/input 3.0.1 → 4.0.0

package/README.md

@@ -56,3 +56,9 @@ Fetching, debouncing, caching and form submission remain application-owned.
 For both compositions, ref, className, style, name and native attributes target
 the input; `rootClassName` styles the group. Standard and small densities remain
 available. `Field` and `useField` from Form can associate labels and help text.
+
+Textarea's `resizeHandle` selects `edge` (default), `corner`, `footer`, or `false`.
+Automatic sizing hides the handle. Its optional `footer` slot composes counters
+or actions. Unlike the single-line compositions above, Textarea's className/style
+style its structural frame; the ref and native attributes still target the native
+textarea. See the [Textarea migration contract](docs/textarea.md#frame-styling-and-migration).

package/dist/index.js

@@ -305,11 +305,242 @@ var SearchInput = (props) => {
   );
 };
 
+// src/textarea/resize-handle.tsx
+import { GripHorizontal, MoveVertical } from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ResizeHandle = (props) => {
+  const { variant, label, controlId, dragging, ...restProps } = props;
+  const Icon = variant === "edge" ? GripHorizontal : MoveVertical;
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      ...restProps,
+      type: "button",
+      className: "gridui-textarea-resize-handle",
+      "data-variant": variant,
+      "data-dragging": dragging || void 0,
+      "aria-label": label,
+      "aria-controls": controlId,
+      "aria-keyshortcuts": "ArrowUp ArrowDown Home End Enter Space",
+      children: /* @__PURE__ */ jsx8(
+        Icon,
+        {
+          size: 16,
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+};
+
+// src/textarea/use-textarea-footer-height.ts
+import { useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+var useTextareaFooterHeight = (visible) => {
+  const ref = useRef2(null);
+  const [
+    height,
+    setHeight
+  ] = useState2();
+  useLayoutEffect(() => {
+    const footer = ref.current;
+    if (!visible || !footer) {
+      return;
+    }
+    const measure = () => {
+      setHeight(parseFloat(footer.ownerDocument.defaultView.getComputedStyle(footer).height));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(footer);
+    return () => {
+      observer.disconnect();
+    };
+  }, [visible]);
+  return {
+    ref,
+    height: visible ? height : void 0
+  };
+};
+
+// src/textarea/use-textarea-resize.ts
+import { isComposingKeyEvent, listenForDragCancellation } from "@gridui/interaction";
+import { useCallback, useEffect, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState3 } from "react";
+var getResizeGeometry = (frame) => {
+  const style = frame.ownerDocument.defaultView.getComputedStyle(frame);
+  return {
+    height: parseFloat(style.height),
+    maximum: style.maxHeight === "none" ? void 0 : style.maxHeight,
+    scale: frame.getBoundingClientRect().height / frame.offsetHeight || 1
+  };
+};
+var releaseDrag = (drag) => {
+  drag.cleanup();
+  if (drag.handle.hasPointerCapture(drag.pointerId)) {
+    drag.handle.releasePointerCapture(drag.pointerId);
+  }
+};
+var useTextareaResize = ({ frame, input, enabled, disabled }) => {
+  const [
+    height,
+    setHeight
+  ] = useState3();
+  const [
+    dragging,
+    setDragging
+  ] = useState3(false);
+  const drag = useRef3(null);
+  const blocked = () => {
+    return !enabled || disabled || !input.current || input.current.matches(":disabled") || input.current.inert;
+  };
+  const finish = (restore) => {
+    const active = drag.current;
+    if (!active) {
+      return;
+    }
+    drag.current = null;
+    releaseDrag(active);
+    if (restore) {
+      setHeight(active.previousHeight);
+    }
+    setDragging(false);
+  };
+  const cancel = useRef3(() => {
+    return;
+  });
+  useLayoutEffect2(() => {
+    cancel.current = () => {
+      finish(true);
+    };
+    if (blocked()) {
+      finish(true);
+    }
+  });
+  useLayoutEffect2(() => {
+    if (!enabled) {
+      setHeight(void 0);
+    }
+  }, [enabled]);
+  useEffect(() => {
+    return () => {
+      cancel.current();
+    };
+  }, []);
+  const handleRef = useCallback((handle) => {
+    if (!handle) {
+      return;
+    }
+    return () => {
+      if (handle.ownerDocument.activeElement === handle) {
+        input.current?.focus({ preventScroll: true });
+      }
+    };
+  }, [input]);
+  const update = (next) => {
+    if (blocked() || !frame.current) {
+      finish(true);
+      return;
+    }
+    setHeight(typeof next === "number" ? Math.max(0, next) : next);
+  };
+  const reset = () => {
+    if (!blocked()) {
+      finish(false);
+      setHeight(void 0);
+    }
+  };
+  const handleProps = {
+    ref: handleRef,
+    onPointerDown: (event) => {
+      if (blocked() || event.button !== 0 || !event.isPrimary || drag.current || !frame.current) {
+        return;
+      }
+      const bounds = getResizeGeometry(frame.current);
+      const handle = event.currentTarget;
+      event.preventDefault();
+      handle.focus({ preventScroll: true });
+      drag.current = {
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        startHeight: bounds.height,
+        previousHeight: height,
+        scale: bounds.scale,
+        handle,
+        cleanup: listenForDragCancellation(handle, () => {
+          cancel.current();
+        })
+      };
+      handle.setPointerCapture(event.pointerId);
+      setDragging(true);
+    },
+    onPointerMove: (event) => {
+      const active = drag.current;
+      if (active?.pointerId === event.pointerId) {
+        update(active.startHeight + (event.clientY - active.startY) / active.scale);
+      }
+    },
+    onPointerUp: (event) => {
+      if (drag.current?.pointerId === event.pointerId) {
+        finish(blocked());
+      }
+    },
+    onPointerCancel: (event) => {
+      if (drag.current?.pointerId === event.pointerId) {
+        finish(true);
+      }
+    },
+    onLostPointerCapture: (event) => {
+      if (drag.current?.pointerId === event.pointerId) {
+        finish(true);
+      }
+    },
+    onKeyDown: (event) => {
+      if (blocked() || drag.current || !frame.current || isComposingKeyEvent(event.nativeEvent)) {
+        return;
+      }
+      const bounds = getResizeGeometry(frame.current);
+      const step = event.shiftKey ? 64 : 16;
+      let next;
+      switch (event.key) {
+        case "ArrowUp":
+          next = bounds.height - step;
+          break;
+        case "ArrowDown":
+          next = bounds.height + step;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          if (bounds.maximum === void 0) {
+            return;
+          }
+          next = bounds.maximum;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      update(next);
+    },
+    onClick: (event) => {
+      if (event.detail === 0) {
+        reset();
+      }
+    },
+    onDoubleClick: reset
+  };
+  return {
+    height,
+    dragging,
+    handleProps
+  };
+};
+
 // src/textarea/textarea.tsx
 import { useScrollbars } from "@gridui/overlay";
 import { cn as cn8 } from "@gridui/style-utils";
-import "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useId, useImperativeHandle as useImperativeHandle2, useRef as useRef4 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Textarea = (props) => {
   const groupSize = useInputGroupSize();
   const {
@@ -323,6 +554,9 @@ var Textarea = (props) => {
     maxRows,
     rows = 2,
     style,
+    resizeHandle = "edge",
+    resizeLabel = "Resize text area",
+    footer,
     ...restProps
   } = props;
   if (maxHeight !== void 0 && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {
@@ -334,27 +568,100 @@ var Textarea = (props) => {
   if (maxHeight !== void 0 && maxRows !== void 0) {
     throw new RangeError("Textarea accepts either maxRows or maxHeight, not both.");
   }
-  const scrollRef = useScrollbars({ ref });
+  const frame = useRef4(null);
+  const input = useRef4(null);
+  const generatedId = useId();
+  const inputId = restProps.id ?? generatedId;
+  useImperativeHandle2(ref, () => {
+    return input.current;
+  }, []);
+  const scrollRef = useScrollbars({ ref: input });
+  const manual = !autoSize && resizeHandle !== false;
+  const resize = useTextareaResize({
+    frame,
+    input,
+    enabled: manual,
+    disabled: Boolean(restProps.disabled)
+  });
+  const hasFooter = footer !== void 0 && footer !== null && typeof footer !== "boolean";
+  const showFooter = hasFooter || manual && resizeHandle === "footer";
+  const footerLayout = useTextareaFooterHeight(showFooter);
+  const handle = manual ? /* @__PURE__ */ jsx9(
+    ResizeHandle,
+    {
+      ...resize.handleProps,
+      variant: resizeHandle,
+      label: resizeLabel,
+      controlId: inputId,
+      dragging: resize.dragging,
+      disabled: restProps.disabled
+    }
+  ) : null;
   const sizing = {
     "--_gridui-textarea-rows": rows,
     "--_gridui-textarea-max-rows": maxRows,
+    "--_gridui-textarea-footer-height": footerLayout.height === void 0 ? void 0 : `${footerLayout.height}px`,
     ...style,
-    ...autoSize && maxHeight !== void 0 ? { maxHeight } : {}
+    ...maxHeight !== void 0 ? { maxHeight } : {},
+    ...manual && resize.height !== void 0 ? { height: resize.height } : {}
   };
-  return /* @__PURE__ */ jsx8(
-    "textarea",
+  return /* @__PURE__ */ jsxs4(
+    "div",
     {
-      ...restProps,
-      ref: scrollRef,
-      rows,
+      ref: frame,
+      dir: restProps.dir,
+      lang: restProps.lang,
+      hidden: restProps.hidden,
+      inert: restProps.inert,
       style: sizing,
+      className: cn8(controlStyles(), "gridui-textarea-frame", restProps["aria-invalid"] && restProps["aria-invalid"] !== "false" && "gridui-u-input--border-danger-foreground", groupSize && "gridui-u-input--border-0 gridui-u-input--border-inherit gridui-u-input--bg-transparent", className),
+      "data-gridui-outline-target": groupSize === null ? "" : void 0,
+      "data-control-size": controlSize,
+      "data-grouped": groupSize !== null || void 0,
       "data-autosize": autoSize || void 0,
       "data-max-rows": maxRows !== void 0 || void 0,
-      onChange: (event) => {
-        onChange?.(event);
-        onValueChange?.(event.currentTarget.value);
-      },
-      className: cn8(controlVariants({ size: controlSize }), "gridui-textarea gridui-u-input--overflow-auto", groupSize && "gridui-u-input--border-0 gridui-u-input--bg-transparent", autoSize ? "gridui-u-input--resize-none gridui-u-input--min-h-(--_gridui-textarea-min-height)" : "gridui-u-input--resize-y", className)
+      "data-resize-handle": manual ? resizeHandle : void 0,
+      "data-footer": hasFooter || void 0,
+      children: [
+        /* @__PURE__ */ jsx9(
+          "textarea",
+          {
+            ...restProps,
+            id: inputId,
+            ref: scrollRef,
+            rows,
+            onChange: (event) => {
+              onChange?.(event);
+              onValueChange?.(event.currentTarget.value);
+            },
+            className: "gridui-textarea"
+          }
+        ),
+        manual && resizeHandle !== "footer" && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: "gridui-textarea-resize-row",
+            children: handle
+          }
+        ),
+        showFooter && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            ref: footerLayout.ref,
+            className: "gridui-textarea-footer",
+            children: [
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "gridui-textarea-footer-content",
+                  children: footer
+                }
+              ),
+              resizeHandle === "footer" && handle
+            ]
+          }
+        )
+      ]
     }
   );
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/shared/input-group-context.ts", "../src/shared/style.ts", "../src/input/input.tsx", "../src/input-group/input-group.tsx", "../src/input-group-addon/input-group-addon.tsx", "../src/input-group-button/input-group-button.tsx", "../src/label/style.ts", "../src/label/label.tsx", "../src/password-input/password-input.tsx", "../src/search-input/search-input.tsx", "../src/textarea/textarea.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Input Group Context\n */\n\nimport { createContext, useContext } from \"react\";\n\nexport const inputGroupContext = createContext<\"standard\" | \"small\" | null>(null);\nexport const useInputGroupSize = () => {\n    return useContext(inputGroupContext);\n};\n", "/**\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-input--min-w-0 gridui-u-input--w-full gridui-u-input--box-border gridui-u-input--border gridui-u-input--border-solid gridui-u-input--border-border gridui-u-input--rounded-control gridui-u-input--text-foreground gridui-u-input--bg-background gridui-u-input--type-input\",\n    \"gridui-u-input--disabled:opacity-50 gridui-u-input--disabled:cursor-not-allowed\",\n    \"gridui-u-input--aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"gridui-u-input--p-gridui-8 gridui-u-input--min-h-gridui-control\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"gridui-u-input--py-gridui-4 gridui-u-input--px-gridui-8 gridui-u-input--min-h-gridui-control-small\",\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 { useInputGroupSize } from \"../shared/input-group-context\";\nimport { controlVariants } from \"../shared/style\";\nimport type { TextControlOptions } from \"../shared/text-control-options\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & TextControlOptions;\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const groupSize = useInputGroupSize();\n    const {\n        size,\n        controlSize = groupSize ?? \"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 }), groupSize && \"gridui-u-input--flex-1 gridui-u-input--w-0 gridui-u-input--border-0 gridui-u-input--bg-transparent\", className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroup\n * @description Input Group\n */\n\nimport { inputGroupContext } from \"../shared/input-group-context\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputGroupProps = ComponentPropsWithRef<\"div\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n};\nexport const InputGroup: FC<InputGroupProps> = (props: InputGroupProps) => {\n    const { controlSize = \"standard\", className, children, ...restProps } = props;\n    return (<inputGroupContext.Provider\n        value={controlSize}\n    >\n        <div\n            {...restProps}\n            data-control-size={controlSize}\n            data-gridui-outline-target=\"\"\n            className={cn(\"gridui-input-group\", className)}\n        >\n            {children}\n        </div>\n    </inputGroupContext.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroupAddon\n * @description Input Group Addon\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputGroupAddonProps = ComponentPropsWithRef<\"div\"> & {\n    readonly align?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\n};\nexport const InputGroupAddon: FC<InputGroupAddonProps> = (props: InputGroupAddonProps) => {\n    const { align = \"inline-start\", className, ...restProps } = props;\n    return (<div\n        {...restProps}\n        data-align={align}\n        className={cn(\"gridui-input-group-addon\", className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroupButton\n * @description Input Group Button\n */\n\nimport { useInputGroupSize } from \"../shared/input-group-context\";\nimport { Button, type ButtonProps } from \"@gridui/button\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC } from \"react\";\n\nexport type InputGroupButtonProps = ButtonProps;\nexport const InputGroupButton: FC<InputGroupButtonProps> = (props: InputGroupButtonProps) => {\n    const size = useInputGroupSize() ?? \"standard\";\n    const { className, ...restProps } = props;\n    return (<Button\n        variant=\"quiet\"\n        size={size}\n        {...restProps}\n        className={cn(\"gridui-input-group-button\", 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-input--inline-flex gridui-u-input--items-center gridui-u-input--gap-gridui-4 gridui-u-input--type-ui\",\n));\n\nexport const labelIconStyles = cva(\"gridui-u-input--inline-flex gridui-u-input--shrink-0 gridui-u-input--text-foreground gridui-u-input--[&>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 PasswordInput\n * @description Password Input\n */\n\nimport { Input, type InputProps } from \"../input/input\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { InputGroupAddon } from \"../input-group-addon/input-group-addon\";\nimport { InputGroupButton } from \"../input-group-button/input-group-button\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport { type FC, useState } from \"react\";\n\nexport type PasswordInputProps = Omit<InputProps, \"type\"> & {\n    readonly showLabel: string;\n    readonly hideLabel: string;\n    readonly rootClassName?: string;\n};\nexport const PasswordInput: FC<PasswordInputProps> = (props: PasswordInputProps) => {\n    const { showLabel, hideLabel, rootClassName, controlSize = \"standard\", ...restProps } = props;\n    const [\n        visible,\n        setVisible,\n    ] = useState(false);\n    return (<InputGroup\n        controlSize={controlSize}\n        dir={restProps.dir}\n        className={rootClassName}\n    >\n        <Input\n            {...restProps}\n            type={visible ? \"text\" : \"password\"}\n        />\n        <InputGroupAddon\n            align=\"inline-end\"\n        >\n            <InputGroupButton\n                layout=\"icon\"\n                aria-label={visible ? hideLabel : showLabel}\n                disabled={restProps.disabled}\n                onClick={() => {\n                    setVisible(current => {\n                        return !current;\n                    });\n                }}\n            >\n                {visible ? (<EyeOff\n                    aria-hidden=\"true\"\n                />) : (<Eye\n                    aria-hidden=\"true\"\n                />)}\n            </InputGroupButton>\n        </InputGroupAddon>\n    </InputGroup>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace SearchInput\n * @description Search Input\n */\n\nimport { Input, type InputProps } from \"../input/input\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { InputGroupAddon } from \"../input-group-addon/input-group-addon\";\nimport { InputGroupButton } from \"../input-group-button/input-group-button\";\nimport { Search, X } from \"lucide-react\";\nimport { type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type SearchInputProps = Omit<InputProps, \"type\"> & {\n    readonly clearLabel: string;\n    readonly loading?: boolean;\n    readonly loadingLabel?: string;\n    readonly rootClassName?: string;\n};\nexport const SearchInput: FC<SearchInputProps> = (props: SearchInputProps) => {\n    const { clearLabel, loading = false, loadingLabel, rootClassName, controlSize = \"standard\", ref,\n        onValueChange, ...restProps } = props;\n    const input = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => {\n        return input.current!;\n    });\n    return (<InputGroup\n        controlSize={controlSize}\n        dir={restProps.dir}\n        className={rootClassName}\n    >\n        <Input\n            {...restProps}\n            ref={input}\n            type=\"search\"\n            aria-busy={loading || restProps[\"aria-busy\"]}\n            onValueChange={(next) => {\n                onValueChange?.(next);\n            }}\n        />\n        <InputGroupAddon\n            aria-hidden=\"true\"\n        >\n            <Search\n                size={16}\n            />\n        </InputGroupAddon>\n        <InputGroupAddon\n            align=\"inline-end\"\n        >\n            {loading && (<span\n                role=\"status\"\n            >\n                {loadingLabel}\n            </span>)}\n            <InputGroupButton\n                layout=\"icon\"\n                aria-label={clearLabel}\n                disabled={restProps.disabled || restProps.readOnly}\n                onClick={() => {\n                    const element = input.current;\n                    if (!element || element.matches(\":disabled\") || element.readOnly) {\n                        return;\n                    }\n                    if (element.value !== \"\") {\n                        if (restProps.value === undefined) {\n                            element.value = \"\";\n                        }\n                        onValueChange?.(\"\");\n                    }\n                    element.focus();\n                }}\n            >\n                <X\n                    aria-hidden=\"true\"\n                />\n            </InputGroupButton>\n        </InputGroupAddon>\n    </InputGroup>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { useInputGroupSize } from \"../shared/input-group-context\";\nimport { controlVariants } from \"../shared/style\";\nimport type { TextControlOptions } from \"../shared/text-control-options\";\nimport { useScrollbars } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type CSSProperties, type FC } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & TextControlOptions & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly maxRows?: number;\n};\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const groupSize = useInputGroupSize();\n    const { controlSize = groupSize ?? \"standard\", className, onChange, onValueChange, ref, autoSize = false,\n        maxHeight, maxRows, rows = 2, style, ...restProps } = props;\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new RangeError(\"Textarea maxHeight must be finite and positive.\");\n    }\n    if (maxRows !== undefined && (!Number.isSafeInteger(maxRows) || maxRows < rows)) {\n        throw new RangeError(\"Textarea maxRows must be an integer at least as large as rows.\");\n    }\n    if (maxHeight !== undefined && maxRows !== undefined) {\n        throw new RangeError(\"Textarea accepts either maxRows or maxHeight, not both.\");\n    }\n    const scrollRef = useScrollbars<HTMLTextAreaElement>({ ref });\n    const sizing: CSSProperties & Record<`--${string}`, string | number | undefined> = {\n        \"--_gridui-textarea-rows\": rows,\n        \"--_gridui-textarea-max-rows\": maxRows,\n        ...style,\n        ...(autoSize && maxHeight !== undefined ? { maxHeight } : {}),\n    };\n    return (<textarea\n        {...restProps}\n        ref={scrollRef}\n        rows={rows}\n        style={sizing}\n        data-autosize={autoSize || undefined}\n        data-max-rows={maxRows !== undefined || undefined}\n        onChange={(event) => {\n            onChange?.(event);\n            onValueChange?.(event.currentTarget.value);\n        }}\n        className={cn(controlVariants({ size: controlSize }), \"gridui-textarea gridui-u-input--overflow-auto\", groupSize && \"gridui-u-input--border-0 gridui-u-input--bg-transparent\", autoSize ? \"gridui-u-input--resize-none gridui-u-input--min-h-(--_gridui-textarea-min-height)\" : \"gridui-u-input--resize-y\", className)}\n    />);\n};\n"],
-  "mappings": "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",
-  "names": ["cn", "cn", "jsx", "cn", "jsx", "cn", "jsx", "cn", "cva", "cn", "jsx", "jsx", "jsxs", "jsx", "jsxs", "cn", "jsx"]
+  "sources": ["../src/shared/input-group-context.ts", "../src/shared/style.ts", "../src/input/input.tsx", "../src/input-group/input-group.tsx", "../src/input-group-addon/input-group-addon.tsx", "../src/input-group-button/input-group-button.tsx", "../src/label/style.ts", "../src/label/label.tsx", "../src/password-input/password-input.tsx", "../src/search-input/search-input.tsx", "../src/textarea/resize-handle.tsx", "../src/textarea/use-textarea-footer-height.ts", "../src/textarea/use-textarea-resize.ts", "../src/textarea/textarea.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Input\n * @namespace Shared\n * @description Input Group Context\n */\n\nimport { createContext, useContext } from \"react\";\n\nexport const inputGroupContext = createContext<\"standard\" | \"small\" | null>(null);\nexport const useInputGroupSize = () => {\n    return useContext(inputGroupContext);\n};\n", "/**\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-input--min-w-0 gridui-u-input--w-full gridui-u-input--box-border gridui-u-input--border gridui-u-input--border-solid gridui-u-input--border-border gridui-u-input--rounded-control gridui-u-input--text-foreground gridui-u-input--bg-background gridui-u-input--type-input\",\n    \"gridui-u-input--disabled:opacity-50 gridui-u-input--disabled:cursor-not-allowed\",\n    \"gridui-u-input--aria-invalid:border-danger-foreground\",\n));\n\nexport const controlStandardStyles = cva(cn(\n    \"gridui-control-standard\",\n    \"gridui-u-input--p-gridui-8 gridui-u-input--min-h-gridui-control\",\n));\n\nexport const controlSmallStyles = cva(cn(\n    \"gridui-control-small\",\n    \"gridui-u-input--py-gridui-4 gridui-u-input--px-gridui-8 gridui-u-input--min-h-gridui-control-small\",\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 { useInputGroupSize } from \"../shared/input-group-context\";\nimport { controlVariants } from \"../shared/style\";\nimport type { TextControlOptions } from \"../shared/text-control-options\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputProps = ComponentPropsWithRef<\"input\"> & TextControlOptions;\n\nexport const Input: FC<InputProps> = (props: InputProps) => {\n    const groupSize = useInputGroupSize();\n    const {\n        size,\n        controlSize = groupSize ?? \"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 }), groupSize && \"gridui-u-input--flex-1 gridui-u-input--w-0 gridui-u-input--border-0 gridui-u-input--bg-transparent\", className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroup\n * @description Input Group\n */\n\nimport { inputGroupContext } from \"../shared/input-group-context\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputGroupProps = ComponentPropsWithRef<\"div\"> & {\n    readonly controlSize?: \"standard\" | \"small\";\n};\nexport const InputGroup: FC<InputGroupProps> = (props: InputGroupProps) => {\n    const { controlSize = \"standard\", className, children, ...restProps } = props;\n    return (<inputGroupContext.Provider\n        value={controlSize}\n    >\n        <div\n            {...restProps}\n            data-control-size={controlSize}\n            data-gridui-outline-target=\"\"\n            className={cn(\"gridui-input-group\", className)}\n        >\n            {children}\n        </div>\n    </inputGroupContext.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroupAddon\n * @description Input Group Addon\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type InputGroupAddonProps = ComponentPropsWithRef<\"div\"> & {\n    readonly align?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\n};\nexport const InputGroupAddon: FC<InputGroupAddonProps> = (props: InputGroupAddonProps) => {\n    const { align = \"inline-start\", className, ...restProps } = props;\n    return (<div\n        {...restProps}\n        data-align={align}\n        className={cn(\"gridui-input-group-addon\", className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace InputGroupButton\n * @description Input Group Button\n */\n\nimport { useInputGroupSize } from \"../shared/input-group-context\";\nimport { Button, type ButtonProps } from \"@gridui/button\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC } from \"react\";\n\nexport type InputGroupButtonProps = ButtonProps;\nexport const InputGroupButton: FC<InputGroupButtonProps> = (props: InputGroupButtonProps) => {\n    const size = useInputGroupSize() ?? \"standard\";\n    const { className, ...restProps } = props;\n    return (<Button\n        variant=\"quiet\"\n        size={size}\n        {...restProps}\n        className={cn(\"gridui-input-group-button\", 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-input--inline-flex gridui-u-input--items-center gridui-u-input--gap-gridui-4 gridui-u-input--type-ui\",\n));\n\nexport const labelIconStyles = cva(\"gridui-u-input--inline-flex gridui-u-input--shrink-0 gridui-u-input--text-foreground gridui-u-input--[&>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 PasswordInput\n * @description Password Input\n */\n\nimport { Input, type InputProps } from \"../input/input\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { InputGroupAddon } from \"../input-group-addon/input-group-addon\";\nimport { InputGroupButton } from \"../input-group-button/input-group-button\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport { type FC, useState } from \"react\";\n\nexport type PasswordInputProps = Omit<InputProps, \"type\"> & {\n    readonly showLabel: string;\n    readonly hideLabel: string;\n    readonly rootClassName?: string;\n};\nexport const PasswordInput: FC<PasswordInputProps> = (props: PasswordInputProps) => {\n    const { showLabel, hideLabel, rootClassName, controlSize = \"standard\", ...restProps } = props;\n    const [\n        visible,\n        setVisible,\n    ] = useState(false);\n    return (<InputGroup\n        controlSize={controlSize}\n        dir={restProps.dir}\n        className={rootClassName}\n    >\n        <Input\n            {...restProps}\n            type={visible ? \"text\" : \"password\"}\n        />\n        <InputGroupAddon\n            align=\"inline-end\"\n        >\n            <InputGroupButton\n                layout=\"icon\"\n                aria-label={visible ? hideLabel : showLabel}\n                disabled={restProps.disabled}\n                onClick={() => {\n                    setVisible(current => {\n                        return !current;\n                    });\n                }}\n            >\n                {visible ? (<EyeOff\n                    aria-hidden=\"true\"\n                />) : (<Eye\n                    aria-hidden=\"true\"\n                />)}\n            </InputGroupButton>\n        </InputGroupAddon>\n    </InputGroup>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace SearchInput\n * @description Search Input\n */\n\nimport { Input, type InputProps } from \"../input/input\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { InputGroupAddon } from \"../input-group-addon/input-group-addon\";\nimport { InputGroupButton } from \"../input-group-button/input-group-button\";\nimport { Search, X } from \"lucide-react\";\nimport { type FC, useImperativeHandle, useRef } from \"react\";\n\nexport type SearchInputProps = Omit<InputProps, \"type\"> & {\n    readonly clearLabel: string;\n    readonly loading?: boolean;\n    readonly loadingLabel?: string;\n    readonly rootClassName?: string;\n};\nexport const SearchInput: FC<SearchInputProps> = (props: SearchInputProps) => {\n    const { clearLabel, loading = false, loadingLabel, rootClassName, controlSize = \"standard\", ref,\n        onValueChange, ...restProps } = props;\n    const input = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => {\n        return input.current!;\n    });\n    return (<InputGroup\n        controlSize={controlSize}\n        dir={restProps.dir}\n        className={rootClassName}\n    >\n        <Input\n            {...restProps}\n            ref={input}\n            type=\"search\"\n            aria-busy={loading || restProps[\"aria-busy\"]}\n            onValueChange={(next) => {\n                onValueChange?.(next);\n            }}\n        />\n        <InputGroupAddon\n            aria-hidden=\"true\"\n        >\n            <Search\n                size={16}\n            />\n        </InputGroupAddon>\n        <InputGroupAddon\n            align=\"inline-end\"\n        >\n            {loading && (<span\n                role=\"status\"\n            >\n                {loadingLabel}\n            </span>)}\n            <InputGroupButton\n                layout=\"icon\"\n                aria-label={clearLabel}\n                disabled={restProps.disabled || restProps.readOnly}\n                onClick={() => {\n                    const element = input.current;\n                    if (!element || element.matches(\":disabled\") || element.readOnly) {\n                        return;\n                    }\n                    if (element.value !== \"\") {\n                        if (restProps.value === undefined) {\n                            element.value = \"\";\n                        }\n                        onValueChange?.(\"\");\n                    }\n                    element.focus();\n                }}\n            >\n                <X\n                    aria-hidden=\"true\"\n                />\n            </InputGroupButton>\n        </InputGroupAddon>\n    </InputGroup>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Resize Handle\n */\n\nimport { GripHorizontal, MoveVertical } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ResizeHandleProps = ComponentPropsWithRef<\"button\"> & {\n    readonly variant: \"corner\" | \"edge\" | \"footer\";\n    readonly label: string;\n    readonly controlId: string;\n    readonly dragging: boolean;\n};\n\nexport const ResizeHandle: FC<ResizeHandleProps> = (props: ResizeHandleProps) => {\n    const { variant, label, controlId, dragging, ...restProps } = props;\n    const Icon = variant === \"edge\" ? GripHorizontal : MoveVertical;\n    return (<button\n        {...restProps}\n        type=\"button\"\n        className=\"gridui-textarea-resize-handle\"\n        data-variant={variant}\n        data-dragging={dragging || undefined}\n        aria-label={label}\n        aria-controls={controlId}\n        aria-keyshortcuts=\"ArrowUp ArrowDown Home End Enter Space\"\n    >\n        <Icon\n            size={16}\n            aria-hidden=\"true\"\n        />\n    </button>);\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Footer Height\n */\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nexport const useTextareaFooterHeight = (visible: boolean) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [\n        height,\n        setHeight,\n    ] = useState<number>();\n    useLayoutEffect(() => {\n        const footer = ref.current;\n        if (!visible || !footer) {\n            return;\n        }\n        const measure = () => {\n            setHeight(parseFloat(footer.ownerDocument.defaultView!.getComputedStyle(footer).height));\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(footer);\n        return () => {\n            observer.disconnect();\n        };\n    }, [visible]);\n    return {\n        ref,\n        height: visible ? height : undefined,\n    };\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Use Textarea Resize\n */\n\nimport { isComposingKeyEvent, listenForDragCancellation } from \"@gridui/interaction\";\nimport { type ComponentPropsWithRef, type CSSProperties, type RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\ntype ResizeOptions = {\n    readonly frame: RefObject<HTMLDivElement | null>;\n    readonly input: RefObject<HTMLTextAreaElement | null>;\n    readonly enabled: boolean;\n    readonly disabled: boolean;\n};\n\ntype Drag = {\n    readonly pointerId: number;\n    readonly startY: number;\n    readonly startHeight: number;\n    readonly previousHeight: CSSProperties[\"height\"];\n    readonly scale: number;\n    readonly handle: HTMLButtonElement;\n    readonly cleanup: () => void;\n};\n\nconst getResizeGeometry = (frame: HTMLDivElement) => {\n    const style = frame.ownerDocument.defaultView!.getComputedStyle(frame);\n    return {\n        height: parseFloat(style.height),\n        maximum: style.maxHeight === \"none\" ? undefined : style.maxHeight,\n        scale: frame.getBoundingClientRect().height / frame.offsetHeight || 1,\n    };\n};\n\nconst releaseDrag = (drag: Drag): void => {\n    drag.cleanup();\n    if (drag.handle.hasPointerCapture(drag.pointerId)) {\n        drag.handle.releasePointerCapture(drag.pointerId);\n    }\n};\n\nexport const useTextareaResize = ({ frame, input, enabled, disabled }: ResizeOptions): {\n    height: CSSProperties[\"height\"];\n    dragging: boolean;\n    handleProps: ComponentPropsWithRef<\"button\">;\n} => {\n    const [\n        height,\n        setHeight,\n    ] = useState<CSSProperties[\"height\"]>();\n    const [\n        dragging,\n        setDragging,\n    ] = useState(false);\n    const drag = useRef<Drag | null>(null);\n    const blocked = (): boolean => {\n        return !enabled || disabled || !input.current || input.current.matches(\":disabled\") || input.current.inert;\n    };\n    const finish = (restore: boolean): void => {\n        const active = drag.current;\n        if (!active) {\n            return;\n        }\n        drag.current = null;\n        releaseDrag(active);\n        if (restore) {\n            setHeight(active.previousHeight);\n        }\n        setDragging(false);\n    };\n    const cancel = useRef(() => {\n        return;\n    });\n    useLayoutEffect(() => {\n        cancel.current = () => {\n            finish(true);\n        };\n        if (blocked()) {\n            finish(true);\n        }\n    });\n    useLayoutEffect(() => {\n        if (!enabled) {\n            setHeight(undefined);\n        }\n    }, [enabled]);\n    useEffect(() => {\n        return () => {\n            cancel.current();\n        };\n    }, []);\n    const handleRef = useCallback((handle: HTMLButtonElement | null) => {\n        if (!handle) {\n            return;\n        }\n        return () => {\n            if (handle.ownerDocument.activeElement === handle) {\n                input.current?.focus({ preventScroll: true });\n            }\n        };\n    }, [input]);\n    const update = (next: CSSProperties[\"height\"]): void => {\n        if (blocked() || !frame.current) {\n            finish(true);\n            return;\n        }\n        // CSS resolves constraints, including percentages and content-dependent minima.\n        setHeight(typeof next === \"number\" ? Math.max(0, next) : next);\n    };\n    const reset = (): void => {\n        if (!blocked()) {\n            finish(false);\n            setHeight(undefined);\n        }\n    };\n    const handleProps: ComponentPropsWithRef<\"button\"> = {\n        ref: handleRef,\n        onPointerDown: (event) => {\n            if (blocked() || event.button !== 0 || !event.isPrimary || drag.current || !frame.current) {\n                return;\n            }\n            const bounds = getResizeGeometry(frame.current);\n            const handle = event.currentTarget;\n            event.preventDefault();\n            handle.focus({ preventScroll: true });\n            drag.current = {\n                pointerId: event.pointerId,\n                startY: event.clientY,\n                startHeight: bounds.height,\n                previousHeight: height,\n                scale: bounds.scale,\n                handle,\n                cleanup: listenForDragCancellation(handle, () => {\n                    cancel.current();\n                }),\n            };\n            handle.setPointerCapture(event.pointerId);\n            setDragging(true);\n        },\n        onPointerMove: (event) => {\n            const active = drag.current;\n            if (active?.pointerId === event.pointerId) {\n                update(active.startHeight + (event.clientY - active.startY) / active.scale);\n            }\n        },\n        onPointerUp: (event) => {\n            if (drag.current?.pointerId === event.pointerId) {\n                finish(blocked());\n            }\n        },\n        onPointerCancel: (event) => {\n            if (drag.current?.pointerId === event.pointerId) {\n                finish(true);\n            }\n        },\n        onLostPointerCapture: (event) => {\n            if (drag.current?.pointerId === event.pointerId) {\n                finish(true);\n            }\n        },\n        onKeyDown: (event) => {\n            if (blocked() || drag.current || !frame.current || isComposingKeyEvent(event.nativeEvent)) {\n                return;\n            }\n            const bounds = getResizeGeometry(frame.current);\n            const step = event.shiftKey ? 64 : 16;\n            let next: CSSProperties[\"height\"];\n            switch (event.key) {\n                case \"ArrowUp\": next = bounds.height - step; break;\n                case \"ArrowDown\": next = bounds.height + step; break;\n                case \"Home\": next = 0; break;\n                case \"End\":\n                    if (bounds.maximum === undefined) {\n                        return;\n                    }\n                    next = bounds.maximum;\n                    break;\n                default: return;\n            }\n            event.preventDefault();\n            update(next);\n        },\n        onClick: (event) => {\n            // Keyboard and assistive-technology activation restore the natural height.\n            if (event.detail === 0) {\n                reset();\n            }\n        },\n        onDoubleClick: reset,\n    };\n    return {\n        height,\n        dragging,\n        handleProps,\n    };\n};\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Textarea\n * @description Textarea\n */\n\nimport { useInputGroupSize } from \"../shared/input-group-context\";\nimport { controlStyles } from \"../shared/style\";\nimport type { TextControlOptions } from \"../shared/text-control-options\";\nimport { ResizeHandle } from \"./resize-handle\";\nimport { useTextareaFooterHeight } from \"./use-textarea-footer-height\";\nimport { useTextareaResize } from \"./use-textarea-resize\";\nimport { useScrollbars } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { type ComponentPropsWithRef, type CSSProperties, type FC, type ReactNode, useId, useImperativeHandle, useRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithRef<\"textarea\"> & TextControlOptions & {\n    readonly autoSize?: boolean;\n    readonly maxHeight?: number;\n    readonly maxRows?: number;\n    /** Manual resize affordance. Automatic sizing always hides it. */\n    readonly resizeHandle?: \"corner\" | \"edge\" | \"footer\" | false;\n    readonly resizeLabel?: string;\n    /** Caller-owned footer content; footer handles share this row. */\n    readonly footer?: ReactNode;\n};\nexport const Textarea: FC<TextareaProps> = (props: TextareaProps) => {\n    const groupSize = useInputGroupSize();\n    const { controlSize = groupSize ?? \"standard\", className, onChange, onValueChange, ref, autoSize = false,\n        maxHeight, maxRows, rows = 2, style, resizeHandle = \"edge\", resizeLabel = \"Resize text area\", footer, ...restProps } = props;\n    if (maxHeight !== undefined && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {\n        throw new RangeError(\"Textarea maxHeight must be finite and positive.\");\n    }\n    if (maxRows !== undefined && (!Number.isSafeInteger(maxRows) || maxRows < rows)) {\n        throw new RangeError(\"Textarea maxRows must be an integer at least as large as rows.\");\n    }\n    if (maxHeight !== undefined && maxRows !== undefined) {\n        throw new RangeError(\"Textarea accepts either maxRows or maxHeight, not both.\");\n    }\n    const frame = useRef<HTMLDivElement>(null);\n    const input = useRef<HTMLTextAreaElement>(null);\n    const generatedId = useId();\n    const inputId = restProps.id ?? generatedId;\n    useImperativeHandle(ref, () => {\n        return input.current!;\n    }, []);\n    const scrollRef = useScrollbars<HTMLTextAreaElement>({ ref: input });\n    const manual = !autoSize && resizeHandle !== false;\n    const resize = useTextareaResize({\n        frame,\n        input,\n        enabled: manual,\n        disabled: Boolean(restProps.disabled),\n    });\n    const hasFooter = footer !== undefined && footer !== null && typeof footer !== \"boolean\";\n    const showFooter = hasFooter || manual && resizeHandle === \"footer\";\n    const footerLayout = useTextareaFooterHeight(showFooter);\n    const handle = manual ? (<ResizeHandle\n        {...resize.handleProps}\n        variant={resizeHandle}\n        label={resizeLabel}\n        controlId={inputId}\n        dragging={resize.dragging}\n        disabled={restProps.disabled}\n    />) : null;\n    const sizing: CSSProperties & Record<`--${string}`, string | number | undefined> = {\n        \"--_gridui-textarea-rows\": rows,\n        \"--_gridui-textarea-max-rows\": maxRows,\n        \"--_gridui-textarea-footer-height\": footerLayout.height === undefined ? undefined : `${footerLayout.height}px`,\n        ...style,\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...(manual && resize.height !== undefined ? { height: resize.height } : {}),\n    };\n    return (<div\n        ref={frame}\n        dir={restProps.dir}\n        lang={restProps.lang}\n        hidden={restProps.hidden}\n        inert={restProps.inert}\n        style={sizing}\n        className={cn(controlStyles(), \"gridui-textarea-frame\", restProps[\"aria-invalid\"] && restProps[\"aria-invalid\"] !== \"false\" && \"gridui-u-input--border-danger-foreground\", groupSize && \"gridui-u-input--border-0 gridui-u-input--border-inherit gridui-u-input--bg-transparent\", className)}\n        data-gridui-outline-target={groupSize === null ? \"\" : undefined}\n        data-control-size={controlSize}\n        data-grouped={groupSize !== null || undefined}\n        data-autosize={autoSize || undefined}\n        data-max-rows={maxRows !== undefined || undefined}\n        data-resize-handle={manual ? resizeHandle : undefined}\n        data-footer={hasFooter || undefined}\n    >\n        <textarea\n            {...restProps}\n            id={inputId}\n            ref={scrollRef}\n            rows={rows}\n            onChange={(event) => {\n                onChange?.(event);\n                onValueChange?.(event.currentTarget.value);\n            }}\n            className=\"gridui-textarea\"\n        />\n        {manual && resizeHandle !== \"footer\" && (<div\n            className=\"gridui-textarea-resize-row\"\n        >\n            {handle}\n        </div>)}\n        {showFooter && (<div\n            ref={footerLayout.ref}\n            className=\"gridui-textarea-footer\"\n        >\n            <div\n                className=\"gridui-textarea-footer-content\"\n            >\n                {footer}\n            </div>\n            {resizeHandle === \"footer\" && handle}\n        </div>)}\n    </div>);\n};\n"],
+  "mappings": "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",
+  "names": ["cn", "cn", "jsx", "cn", "jsx", "cn", "jsx", "cn", "cva", "cn", "jsx", "jsx", "jsxs", "jsx", "jsxs", "jsx", "useRef", "useState", "useLayoutEffect", "useRef", "useState", "cn", "useImperativeHandle", "useRef", "jsx", "jsxs"]
 }

package/dist/styles.css

@@ -8,9 +8,6 @@
   .gridui-u-input--inline-flex {
     display: inline-flex;
   }
-  .gridui-u-input--min-h-\(--_gridui-textarea-min-height\) {
-    min-height: var(--_gridui-textarea-min-height);
-  }
   .gridui-u-input--min-h-gridui-control {
     min-height: var(--gridui-control-min-height);
   }
@@ -32,21 +29,12 @@
   .gridui-u-input--shrink-0 {
     flex-shrink: 0;
   }
-  .gridui-u-input--resize-none {
-    resize: none;
-  }
-  .gridui-u-input--resize-y {
-    resize: vertical;
-  }
   .gridui-u-input--items-center {
     align-items: center;
   }
   .gridui-u-input--gap-gridui-4 {
     gap: var(--gridui-space-4);
   }
-  .gridui-u-input--overflow-auto {
-    overflow: auto;
-  }
   .gridui-u-input--rounded-control {
     border-radius: var(--gridui-control-radius);
   }
@@ -65,6 +53,12 @@
   .gridui-u-input--border-border {
     border-color: var(--gridui-border);
   }
+  .gridui-u-input--border-danger-foreground {
+    border-color: var(--gridui-danger-foreground);
+  }
+  .gridui-u-input--border-inherit {
+    border-color: inherit;
+  }
   .gridui-u-input--bg-background {
     background-color: var(--gridui-background);
   }
@@ -130,20 +124,20 @@
       background: transparent;
       outline: none;
     }
-    > textarea.gridui-control {
+    > .gridui-textarea-frame {
       flex-basis: 100%;
       width: 100%;
     }
-    &:has(> .gridui-control:focus-visible) {
+    &:has(> .gridui-control:focus-visible, > .gridui-textarea-frame > textarea:focus-visible) {
       z-index: var(--gridui-z-interaction);
       outline: var(--gridui-focus-width) solid var(--gridui-focus-color);
       outline-offset: var(--gridui-focus-offset);
     }
-    &:has(> .gridui-control[aria-invalid="true"]) {
+    &:has(> .gridui-control[aria-invalid="true"], > .gridui-textarea-frame > textarea[aria-invalid="true"]) {
       border-color: var(--gridui-danger-foreground);
     }
     @media (hover: hover) and (pointer: fine) {
-      &:has(> .gridui-control:hover:not(:disabled, [readonly])):not(:has(:focus-visible)) {
+      &:has(> .gridui-control:not(.gridui-textarea-frame):hover:not(:disabled, [readonly]), > .gridui-textarea-frame > textarea:hover:not(:disabled, [readonly])):not(:has(:focus-visible)) {
         outline: var(--gridui-hover-width) solid var(--gridui-focus-color);
         @supports (color: color-mix(in lab, red, red)) {
           outline: var(--gridui-hover-width) solid color-mix(in srgb, var(--gridui-focus-color) var(--gridui-hover-opacity), transparent);
@@ -177,18 +171,154 @@
   .gridui-input-group-button {
     flex: none;
   }
-  .gridui-textarea[data-autosize] {
-    --_gridui-textarea-inset: calc(2 * var(--gridui-space-8) + 2px);
-    --_gridui-textarea-minimum: var(--gridui-control-min-height);
+  .gridui-textarea-frame {
+    --_gridui-textarea-padding: var(--gridui-space-8);
+    --_gridui-textarea-control-minimum: var(--gridui-control-min-height);
+    --_gridui-textarea-resize-height: 0px;
+    --_gridui-textarea-footer-height: 0px;
+    --_gridui-textarea-border: 2px;
+    --_gridui-textarea-min-body: max(calc(var(--_gridui-textarea-control-minimum) - 2px), calc(var(--_gridui-textarea-rows) * 1lh + 2 * var(--_gridui-textarea-padding)));
+    --_gridui-textarea-chrome: calc(var(--_gridui-textarea-resize-height) + var(--_gridui-textarea-footer-height) + var(--_gridui-textarea-border));
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(var(--_gridui-textarea-min-body) + var(--_gridui-textarea-chrome));
+    padding: 0;
+    &[data-control-size="small"] {
+      --_gridui-textarea-padding: var(--gridui-space-4);
+      --_gridui-textarea-control-minimum: var(--gridui-control-min-height-small);
+    }
+    &[data-grouped] {
+      --_gridui-textarea-border: 0px;
+      border: 0;
+      background: transparent;
+    }
+    &[data-resize-handle="edge"] {
+      --_gridui-textarea-resize-height: var(--gridui-space-24);
+    }
+    &[data-resize-handle="corner"] {
+      --_gridui-textarea-resize-height: var(--gridui-space-32);
+    }
+    &:is([data-resize-handle="footer"], [data-footer]) {
+      --_gridui-textarea-footer-height: var(--gridui-control-min-height);
+    }
+    &[data-max-rows] {
+      max-height: calc(var(--_gridui-textarea-max-rows) * 1lh + 2 * var(--_gridui-textarea-padding) + var(--_gridui-textarea-chrome));
+    }
+    &:has(> textarea[aria-invalid="true"]) {
+      border-color: var(--gridui-danger-foreground);
+    }
+    &:not([data-grouped]):has(> textarea:focus-visible) {
+      outline: var(--gridui-focus-width) solid var(--gridui-focus-color);
+      outline-offset: var(--gridui-focus-offset);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      &:not([data-grouped]):has(> textarea:hover:not(:disabled, [readonly])):not(:has(:focus-visible)) {
+        outline: var(--gridui-hover-width) solid var(--gridui-focus-color);
+        @supports (color: color-mix(in lab, red, red)) {
+          outline: var(--gridui-hover-width) solid color-mix(in srgb, var(--gridui-focus-color) var(--gridui-hover-opacity), transparent);
+        }
+        outline-offset: var(--gridui-hover-offset);
+      }
+    }
+  }
+  .gridui-textarea {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    margin: 0;
+    padding: var(--_gridui-textarea-padding) var(--gridui-space-8);
+    border: 0;
+    border-radius: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    resize: none;
+    outline: none;
+    overflow: auto;
+    box-sizing: border-box;
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  .gridui-textarea-frame[data-autosize] > .gridui-textarea {
     field-sizing: content;
     height: auto;
-    --_gridui-textarea-min-height: max(var(--_gridui-textarea-minimum), calc(var(--_gridui-textarea-rows) * 1lh + var(--_gridui-textarea-inset)));
-    &.gridui-control-small {
-      --_gridui-textarea-inset: calc(2 * var(--gridui-space-4) + 2px);
-      --_gridui-textarea-minimum: var(--gridui-control-min-height-small);
+  }
+  .gridui-textarea-resize-row {
+    display: flex;
+    flex: none;
+    justify-content: flex-end;
+    height: var(--_gridui-textarea-resize-height);
+    border-color: inherit;
+  }
+  .gridui-textarea-footer {
+    display: flex;
+    flex: none;
+    align-items: stretch;
+    min-height: var(--gridui-control-min-height);
+    border-top: 1px solid;
+    border-color: inherit;
+    background: var(--gridui-surface);
+    box-sizing: border-box;
+  }
+  .gridui-textarea-footer-content {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--gridui-space-8);
+    min-width: 0;
+    padding: var(--gridui-space-8);
+  }
+  .gridui-textarea-resize-handle {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--gridui-control-min-height);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    border-color: inherit;
+    color: var(--gridui-muted);
+    background: transparent;
+    cursor: ns-resize;
+    touch-action: none;
+    user-select: none;
+    &[data-variant="edge"] {
+      width: 100%;
+      border-top: 1px solid;
+      border-color: inherit;
+      background: var(--gridui-surface);
     }
-    &[data-max-rows] {
-      max-height: calc(var(--_gridui-textarea-max-rows) * 1lh + var(--_gridui-textarea-inset));
+    &[data-variant="corner"] {
+      border-top: 1px solid;
+      border-inline-start: 1px solid;
+      border-color: inherit;
+    }
+    &[data-variant="footer"] {
+      border-inline-start: 1px solid;
+      border-color: inherit;
+    }
+    &:disabled {
+      cursor: not-allowed;
+      > svg {
+        opacity: 0.5;
+      }
+    }
+    &:is(:hover, [data-dragging]):not(:disabled) {
+      color: var(--gridui-foreground);
+      background: var(--gridui-surface);
+    }
+  }
+  @media (pointer: coarse) {
+    .gridui-textarea-frame:is([data-resize-handle="corner"], [data-resize-handle="edge"]) {
+      --_gridui-textarea-resize-height: var(--gridui-control-min-height);
     }
   }
   .gridui-input-group > input[type="search"]::-webkit-search-cancel-button {

package/dist/textarea/resize-handle.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Textarea
+ * @description Resize Handle
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type ResizeHandleProps = ComponentPropsWithRef<"button"> & {
+    readonly variant: "corner" | "edge" | "footer";
+    readonly label: string;
+    readonly controlId: string;
+    readonly dragging: boolean;
+};
+export declare const ResizeHandle: FC<ResizeHandleProps>;

package/dist/textarea/textarea.d.ts

@@ -5,10 +5,15 @@
  * @description Textarea
  */
 import type { TextControlOptions } from "../shared/text-control-options";
-import { type ComponentPropsWithRef, type FC } from "react";
+import { type ComponentPropsWithRef, type FC, type ReactNode } from "react";
 export type TextareaProps = ComponentPropsWithRef<"textarea"> & TextControlOptions & {
     readonly autoSize?: boolean;
     readonly maxHeight?: number;
     readonly maxRows?: number;
+    /** Manual resize affordance. Automatic sizing always hides it. */
+    readonly resizeHandle?: "corner" | "edge" | "footer" | false;
+    readonly resizeLabel?: string;
+    /** Caller-owned footer content; footer handles share this row. */
+    readonly footer?: ReactNode;
 };
 export declare const Textarea: FC<TextareaProps>;

package/dist/textarea/use-textarea-footer-height.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Textarea
+ * @description Use Textarea Footer Height
+ */
+export declare const useTextareaFooterHeight: (visible: boolean) => {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    height: number | undefined;
+};

package/dist/textarea/use-textarea-resize.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Textarea
+ * @description Use Textarea Resize
+ */
+import { type ComponentPropsWithRef, type CSSProperties, type RefObject } from "react";
+type ResizeOptions = {
+    readonly frame: RefObject<HTMLDivElement | null>;
+    readonly input: RefObject<HTMLTextAreaElement | null>;
+    readonly enabled: boolean;
+    readonly disabled: boolean;
+};
+export declare const useTextareaResize: ({ frame, input, enabled, disabled }: ResizeOptions) => {
+    height: CSSProperties["height"];
+    dragging: boolean;
+    handleProps: ComponentPropsWithRef<"button">;
+};
+export {};

package/docs/catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/input",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "category": "core",
   "description": "GridUI React input",
   "usage": "`Label` owns inline label alignment and an optional decorative `icon` slot. Icons use the standard 16px token size without an ancestor layout styling labels.",
@@ -114,10 +114,12 @@
   ],
   "examples": [
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/addons.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/getting-started.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/multiline.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/password-entry.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/search-entry.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/input-group.stories.tsx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/input.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/password-input.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/search-input.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/textarea.stories.tsx"

package/docs/reference/input.md

@@ -1,7 +1,7 @@
 <!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
 # Input
 
-Accepts a single line of text within a form. Use it with a visible label and field feedback to explain the expected value.
+Start with a labeled native text input. Add a Form composition when submission or validation needs its own workflow.
 
 Import from ``@gridui/input`` and load Theme before this family's stylesheet.
 
@@ -13,7 +13,7 @@ import "@gridui/input/styles.css";
 
 Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
 
-The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/storybook/scenarios/controls/input.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/input.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
 
 ## API
 

package/docs/reference/textarea.md

@@ -87,3 +87,23 @@ Default: ``false``
 
 ``number | undefined`` · Optional
 
+### resizeHandle
+
+``false | "footer" | "corner" | "edge" | undefined`` · Optional
+
+Default: ``"edge"``
+
+Manual resize affordance. Automatic sizing always hides it.
+
+### resizeLabel
+
+``string | undefined`` · Optional
+
+Default: ``"Resize text area"``
+
+### footer
+
+``ReactNode`` · Optional
+
+Caller-owned footer content; footer handles share this row.
+

package/docs/textarea.md

@@ -1,35 +1,74 @@
 # Textarea
 
-Textarea is a native multiline input. Native props, events and refs are retained,
-including name, form, value/defaultValue, rows, required, maxLength and ARIA.
-onChange runs before onValueChange. Enter and IME retain native multiline behavior.
+Textarea composes a native multiline input, one structural frame, and an optional
+resize handle/footer. Native props, events and refs target the textarea, including
+id, name, form, value/defaultValue, rows, required, maxLength and ARIA. onChange
+runs before onValueChange. Enter and IME retain native multiline behavior.
 Applications own labels, validation, persistence and submission.
 
-## Automatic height
+## Resize handles
 
-`autoSize` uses CSS `field-sizing: content`, available in Baseline 2026 browsers
-(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing).
-Automatic height requires support for that property. This replaces the JavaScript
-measurement and reset observers; there is no second sizing implementation.
-Ordinary non-autosizing textareas retain native rows and vertical resizing.
+`resizeHandle` selects `edge` (default), `corner`, `footer`, or `false`. All variants
+resize vertically and share interaction and constraints. Native browser resizing
+is disabled. Read-only content can still resize; disabled controls and disabled
+fieldsets cannot. `resizeLabel` names the handle for assistive technology and can
+be localized; its default is `Resize text area`.
 
-While autosizing, `rows` (default 2) establishes the minimum through line-height
-and control density. Content, width, visibility, fonts, controlled updates and
-native resets participate in browser layout. Height is automatic; avoid a competing
-explicit height. Overflow remains auto, including when caller CSS limits height.
+Drag the handle or focus it and use ArrowUp/ArrowDown (16px, 64px with Shift).
+Home reaches the CSS minimum; End reaches a finite configured maximum. Enter,
+Space, or double-click restores natural height. Escape, pointer cancellation,
+capture loss, and window blur cancel an active drag and restore its prior height.
+The handle is a non-submitting button; it never edits or submits the text.
+Native form reset restores the text but retains a manually chosen height, just
+like native textarea resizing.
 
-Choose either a positive finite pixel `maxHeight` or an integer `maxRows >= rows`.
-Supplying both throws. CSS minimum height wins when it exceeds an upper bound.
-The pixel prop overrides an inline style.maxHeight; without a prop the caller's
-CSS maximum remains effective. A caller can override generated sizing CSS through
-className/style, and owns the resulting geometry. Constraints do not apply while
-autoSize is false. Disabling autosizing restores ordinary native sizing without
-retained inline height or overflow mutations.
+```tsx
+<Textarea aria-label="Notes" resizeHandle="corner" />
+<Textarea aria-label="Notes" resizeHandle="edge" maxHeight={320} />
+<Textarea aria-label="Notes" resizeHandle="footer" footer={<span>Plain text</span>} />
+```
+
+`footer` is caller-owned content, such as a Form FieldCounter or existing buttons.
+The footer handle shares its row. With corner/edge handles, supplied footer content
+occupies a separate row below the handle. Without manual resizing, footer content
+remains visible. No count, format selector, sending behavior, or business action
+is built into Textarea. Use InputGroup for additional surrounding addons; it owns
+the outer border and outline when grouped. Textarea owns its internal seams.
+
+## Size and automatic height
+
+`rows` (default 2) sets the minimum text area through inherited line-height and
+control density. Choose either a positive finite pixel `maxHeight` or an integer
+`maxRows >= rows`. These limits apply to both manual and automatic sizing.
+`maxHeight` caps the whole frame; `maxRows` caps text rows and includes space for
+the handle/footer. Footer height follows its actual content, wrapping and font
+metrics, so it does not consume the reserved text rows. CSS minimum height wins
+over a smaller maximum. The browser resolves CSS limits, including percentages
+and calc() expressions; percentage heights need a definite containing-block height.
+
+`autoSize` uses CSS `field-sizing: content` and requires browser support for that
+property. It hides the handle and clears manual height without replacing the
+native input. Content, width, fonts, controlled updates and native form reset
+participate in browser layout. Overflow remains auto at a maximum. Avoid a
+competing fixed height when using automatic sizing.
 
 ```tsx
 <Textarea aria-label="Notes" autoSize rows={3} maxRows={8} />
 ```
 
-Use InputGroup with a block-start or block-end addon for a toolbar or footer.
-FieldCounter from Form uses native maxLength units and can be connected with
-aria-describedby. Composer owns sending; Textarea adds no submit shortcut.
+## Frame styling and migration
+
+`className` and `style` now target the structural frame, including width, height,
+min/max size, border, colors and typography. The native input inherits typography
+and colors. The pixel maxHeight prop overrides style.maxHeight; otherwise caller
+CSS limits remain effective. A manually chosen height overrides style.height until
+reset or automatic sizing. Keep geometry and border overrides on the frame.
+Input-specific padding, placeholder and background styling can target the native
+textarea through its caller-owned id. Keep line-height on the frame so row limits
+and the inherited input typography agree.
+
+This is a DOM contract change from the previous bare textarea. Ref, id, native
+attributes and events still target the actual textarea. Update direct-child CSS
+selectors to use the frame or the public InputGroup composition. Browser-native
+resize utilities no longer control the handle; use resizeHandle or autoSize.
+Composer continues to own sending and uses automatic sizing without a handle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/input",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "GridUI React input",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,10 +27,11 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/button": "^4.1.0",
-    "@gridui/overlay": "^2.0.0",
+    "@gridui/button": "^5.0.0",
+    "@gridui/interaction": "^1.2.1",
+    "@gridui/overlay": "^2.1.0",
     "@gridui/style-utils": "^4.0.0",
-    "@gridui/theme": "^2.5.3",
+    "@gridui/theme": "^2.5.4",
     "class-variance-authority": "0.7.1",
     "lucide-react": "1.70.0"
   },