@gridui/input 0.0.0-stage → 0.0.0

package/README.md

@@ -1,3 +1,14 @@
-# Temporary Holding Version
+# @gridui/input
+
+Core family. Public API: `Input`, `InputProps`, `Label`, `LabelProps`, `Textarea`, `TextareaProps`, `controlVariants`.
+
+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/).
+
+## 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.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Root
+ * @description Index
+ */
+export type { InputProps } from "./input/input";
+export { Input } from "./input/input";
+export type { LabelProps } from "./label/label";
+export { Label } from "./label/label";
+export { controlVariants } from "./shared/style";
+export type { TextareaProps } from "./textarea/textarea";
+export { Textarea } from "./textarea/textarea";

package/dist/index.js

@@ -0,0 +1,203 @@
+// src/shared/style.ts
+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"
+));
+var controlStandardStyles = cva(cn(
+  "gridui-control-standard",
+  "p-gridui-8 min-h-11"
+));
+var controlSmallStyles = cva(cn(
+  "gridui-control-small",
+  "py-gridui-4 px-gridui-8 min-h-9"
+));
+var controlVariants = cva(controlStyles(), {
+  variants: {
+    size: {
+      standard: controlStandardStyles(),
+      small: controlSmallStyles()
+    }
+  },
+  defaultVariants: { size: "standard" }
+});
+
+// src/input/input.tsx
+import { cn as cn2 } from "@gridui/style-utils";
+import { jsx } from "react/jsx-runtime";
+var Input = (props) => {
+  const {
+    size,
+    controlSize = "standard",
+    className,
+    onChange,
+    onValueChange,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...restProps,
+      size,
+      onChange: (event) => {
+        onChange?.(event);
+        onValueChange?.(event.currentTarget.value);
+      },
+      className: cn2(controlVariants({ size: controlSize }), className)
+    }
+  );
+};
+
+// src/label/style.ts
+import { cn as cn3 } from "@gridui/style-utils";
+import { cva as cva2 } from "class-variance-authority";
+var labelStyles = cva2(cn3(
+  "gridui-label",
+  "type-ui"
+));
+
+// src/label/label.tsx
+import { cn as cn4 } from "@gridui/style-utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Label = (props) => {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx2(
+    "label",
+    {
+      ...restProps,
+      className: cn4(labelStyles(), className)
+    }
+  );
+};
+
+// src/textarea/use-textarea-autosize.ts
+import { useCallback, useEffect, useLayoutEffect } from "react";
+var useTextareaAutosize = (ref, enabled, maxHeight) => {
+  if (maxHeight !== void 0 && (!Number.isFinite(maxHeight) || maxHeight <= 0)) {
+    throw new Error("Textarea maxHeight must be finite and positive.");
+  }
+  const resize = useCallback(() => {
+    const element = ref.current;
+    if (!enabled || !element || element.clientWidth === 0) {
+      return;
+    }
+    const style = getComputedStyle(element);
+    const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+    const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    element.style.height = "auto";
+    const contentHeight = element.scrollHeight;
+    const height = style.boxSizing === "border-box" ? contentHeight + borders : contentHeight - padding;
+    const boundedHeight = Math.min(height, maxHeight ?? Number.POSITIVE_INFINITY);
+    element.style.height = `${boundedHeight}px`;
+    element.style.overflowY = height > boundedHeight ? "auto" : "hidden";
+  }, [
+    ref,
+    enabled,
+    maxHeight
+  ]);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element) {
+      return;
+    }
+    const originalHeight = element.style.height;
+    const originalOverflow = element.style.overflowY;
+    return () => {
+      element.style.height = originalHeight;
+      element.style.overflowY = originalOverflow;
+    };
+  }, [
+    ref,
+    enabled
+  ]);
+  useLayoutEffect(() => {
+    resize();
+  });
+  useEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element) {
+      return;
+    }
+    let frame = 0;
+    let width = element.clientWidth;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(resize);
+    };
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+      if (element.clientWidth !== width) {
+        width = element.clientWidth;
+        schedule();
+      }
+    });
+    observer?.observe(element);
+    const reset = (event) => {
+      if (event.target === element.form) {
+        schedule();
+      }
+    };
+    const document = element.ownerDocument;
+    document.addEventListener("reset", reset, true);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      document.removeEventListener("reset", reset, true);
+    };
+  }, [
+    ref,
+    enabled,
+    resize
+  ]);
+  return resize;
+};
+
+// src/textarea/textarea.tsx
+import { cn as cn5 } from "@gridui/style-utils";
+import { useImperativeHandle, useRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Textarea = (props) => {
+  const {
+    controlSize = "standard",
+    className,
+    onChange,
+    onInput,
+    onValueChange,
+    ref,
+    autoSize = false,
+    maxHeight,
+    style,
+    ...restProps
+  } = props;
+  const element = useRef(null);
+  useImperativeHandle(ref, () => {
+    return element.current;
+  });
+  const resize = useTextareaAutosize(element, autoSize, maxHeight);
+  return /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      ...restProps,
+      ref: element,
+      style,
+      onInput: (event) => {
+        resize();
+        onInput?.(event);
+      },
+      onChange: (event) => {
+        onChange?.(event);
+        onValueChange?.(event.currentTarget.value);
+      },
+      className: cn5(controlVariants({ size: controlSize }), autoSize ? "resize-none" : "resize-y", className)
+    }
+  );
+};
+export {
+  Input,
+  Label,
+  Textarea,
+  controlVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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    \"type-ui\",\n));\n", "/**\n * @author WMXPY\n * @package Input\n * @namespace Label\n * @description Label\n */\n\nimport { labelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type LabelProps = ComponentPropsWithRef<\"label\">;\n\nexport const Label: FC<LabelProps> = (props: LabelProps) => {\n    const { className, ...restProps } = props;\n    return (<label\n        {...restProps}\n        className={cn(labelStyles(), className)}\n    />);\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": ";AAOA,SAAS,UAAU;AACnB,SAAS,WAAW;AAEb,IAAM,gBAAgB,IAAI;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,qBAAqB,IAAI;AAAA,EAClC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,kBAAkB,IAAI,cAAc,GAAG;AAAA,EAChD,UAAU;AAAA,IACN,MAAM;AAAA,MACF,UAAU,sBAAsB;AAAA,MAChC,OAAO,mBAAmB;AAAA,IAC9B;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,MAAM,WAAW;AACxC,CAAC;;;AC3BD,SAAS,MAAAA,WAAU;AAiBP;AATL,IAAM,QAAwB,CAAC,UAAsB;AACxD,QAAM;AAAA,IACF;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MACA,UAAU,CAAC,UAAU;AACjB,mBAAW,KAAK;AAChB,wBAAgB,MAAM,cAAc,KAAK;AAAA,MAC7C;AAAA,MACA,WAAWA,IAAG,gBAAgB,EAAE,MAAM,YAAY,CAAC,GAAG,SAAS;AAAA;AAAA,EACnE;AACJ;;;AC3BA,SAAS,MAAAC,WAAU;AACnB,SAAS,OAAAC,YAAW;AAEb,IAAM,cAAcA,KAAID;AAAA,EAC3B;AAAA,EACA;AACJ,CAAC;;;ACLD,SAAS,MAAAE,WAAU;AAOP,gBAAAC,YAAA;AAFL,IAAM,QAAwB,CAAC,UAAsB;AACxD,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SAAQ,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWD,IAAG,YAAY,GAAG,SAAS;AAAA;AAAA,EAC1C;AACJ;;;ACZA,SAAyB,aAAa,WAAW,uBAAuB;AAEjE,IAAM,sBAAsB,CAAC,KAA4C,SAAkB,cAAuB;AACrH,MAAI,cAAc,WAAc,CAAC,OAAO,SAAS,SAAS,KAAK,aAAa,IAAI;AAC5E,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACrE;AACA,QAAM,SAAS,YAAY,MAAM;AAC7B,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,WAAW,CAAC,WAAW,QAAQ,gBAAgB,GAAG;AACnD;AAAA,IACJ;AACA,UAAM,QAAQ,iBAAiB,OAAO;AACtC,UAAM,UAAU,WAAW,MAAM,cAAc,IAAI,WAAW,MAAM,iBAAiB;AACrF,UAAM,UAAU,WAAW,MAAM,UAAU,IAAI,WAAW,MAAM,aAAa;AAC7E,YAAQ,MAAM,SAAS;AACvB,UAAM,gBAAgB,QAAQ;AAC9B,UAAM,SAAS,MAAM,cAAc,eAAe,gBAAgB,UAAU,gBAAgB;AAC5F,UAAM,gBAAgB,KAAK,IAAI,QAAQ,aAAa,OAAO,iBAAiB;AAC5E,YAAQ,MAAM,SAAS,GAAG,aAAa;AACvC,YAAQ,MAAM,YAAY,SAAS,gBAAgB,SAAS;AAAA,EAChE,GAAG;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAC;AACD,kBAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,WAAW,CAAC,SAAS;AACtB;AAAA,IACJ;AACA,UAAM,iBAAiB,QAAQ,MAAM;AACrC,UAAM,mBAAmB,QAAQ,MAAM;AACvC,WAAO,MAAM;AACT,cAAQ,MAAM,SAAS;AACvB,cAAQ,MAAM,YAAY;AAAA,IAC9B;AAAA,EACJ,GAAG;AAAA,IACC;AAAA,IACA;AAAA,EACJ,CAAC;AACD,kBAAgB,MAAM;AAClB,WAAO;AAAA,EACX,CAAC;AACD,YAAU,MAAM;AACZ,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,WAAW,CAAC,SAAS;AACtB;AAAA,IACJ;AACA,QAAI,QAAQ;AACZ,QAAI,QAAQ,QAAQ;AACpB,UAAM,WAAW,MAAM;AACnB,2BAAqB,KAAK;AAC1B,cAAQ,sBAAsB,MAAM;AAAA,IACxC;AACA,UAAM,WAAW,OAAO,mBAAmB,cAAc,SAAY,IAAI,eAAe,MAAM;AAC1F,UAAI,QAAQ,gBAAgB,OAAO;AAC/B,gBAAQ,QAAQ;AAChB,iBAAS;AAAA,MACb;AAAA,IACJ,CAAC;AACD,cAAU,QAAQ,OAAO;AAEzB,UAAM,QAAQ,CAAC,UAAuB;AAClC,UAAI,MAAM,WAAW,QAAQ,MAAM;AAC/B,iBAAS;AAAA,MACb;AAAA,IACJ;AACA,UAAM,WAAW,QAAQ;AACzB,aAAS,iBAAiB,SAAS,OAAO,IAAI;AAC9C,WAAO,MAAM;AACT,2BAAqB,KAAK;AAC1B,gBAAU,WAAW;AACrB,eAAS,oBAAoB,SAAS,OAAO,IAAI;AAAA,IACrD;AAAA,EACJ,GAAG;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAC;AACD,SAAO;AACX;;;AC9EA,SAAS,MAAAE,WAAU;AACnB,SAA8C,qBAAqB,cAAc;AA4BrE,gBAAAC,YAAA;AAnBL,IAAM,WAA8B,CAAC,UAAyB;AACjE,QAAM;AAAA,IACF,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAU,OAA4B,IAAI;AAEhD,sBAAoB,KAAK,MAAM;AAC3B,WAAO,QAAQ;AAAA,EACnB,CAAC;AACD,QAAM,SAAS,oBAAoB,SAAS,UAAU,SAAS;AAC/D,SAAQ,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,SAAS,CAAC,UAAU;AAChB,eAAO;AACP,kBAAU,KAAK;AAAA,MACnB;AAAA,MACA,UAAU,CAAC,UAAU;AACjB,mBAAW,KAAK;AAChB,wBAAgB,MAAM,cAAc,KAAK;AAAA,MAC7C;AAAA,MACA,WAAWD,IAAG,gBAAgB,EAAE,MAAM,YAAY,CAAC,GAAG,WAAW,gBAAgB,YAAY,SAAS;AAAA;AAAA,EAC1G;AACJ;",
+  "names": ["cn", "cn", "cva", "cn", "jsx", "cn", "jsx"]
+}

package/dist/input/input.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Input
+ * @description Input
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type InputProps = ComponentPropsWithRef<"input"> & {
+    readonly controlSize?: "standard" | "small";
+    readonly onValueChange?: (value: string) => void;
+};
+export declare const Input: FC<InputProps>;

package/dist/label/label.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Label
+ * @description Label
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type LabelProps = ComponentPropsWithRef<"label">;
+export declare const Label: FC<LabelProps>;

package/dist/label/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Label
+ * @description Style
+ */
+export declare const labelStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/shared/style.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Shared
+ * @description Style
+ */
+export declare const controlStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const controlStandardStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const controlSmallStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const controlVariants: (props?: ({
+    size?: "standard" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/styles.css

@@ -0,0 +1,95 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+  }
+}
+@layer utilities {
+  .box-border {
+    box-sizing: border-box;
+  }
+  .hidden {
+    display: none;
+  }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .min-w-0 {
+    min-width: 0px;
+  }
+  .resize {
+    resize: both;
+  }
+  .resize-none {
+    resize: none;
+  }
+  .resize-y {
+    resize: vertical;
+  }
+  .rounded-control {
+    border-radius: var(--gridui-control-radius);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-border {
+    border-color: var(--gridui-border);
+  }
+  .bg-background {
+    background-color: var(--gridui-background);
+  }
+  .p-gridui-8 {
+    padding: var(--gridui-space-8);
+  }
+  .px-gridui-8 {
+    padding-inline: var(--gridui-space-8);
+  }
+  .py-gridui-4 {
+    padding-block: var(--gridui-space-4);
+  }
+  .type-input {
+    font: var(--gridui-type-input);
+    letter-spacing: normal;
+  }
+  .type-ui {
+    font: var(--gridui-type-ui);
+    letter-spacing: normal;
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+  .disabled\:opacity-50:disabled {
+    opacity: 50%;
+  }
+  .aria-invalid\:border-danger-foreground[aria-invalid="true"] {
+    border-color: var(--gridui-danger-foreground);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Textarea
+ * @description Textarea
+ */
+import { type ComponentPropsWithRef, type FC } from "react";
+export type TextareaProps = ComponentPropsWithRef<"textarea"> & {
+    readonly autoSize?: boolean;
+    readonly maxHeight?: number;
+    readonly controlSize?: "standard" | "small";
+    readonly onValueChange?: (value: string) => void;
+};
+export declare const Textarea: FC<TextareaProps>;

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

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Textarea
+ * @description Use Textarea Autosize
+ */
+import { type RefObject } from "react";
+export declare const useTextareaAutosize: (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => () => void;

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@gridui/input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "GridUI React input",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/style-utils": "^2.1.2",
+    "@gridui/theme": "^2.1.2",
+    "class-variance-authority": "0.7.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0",
+    "@jest/globals": "30.5.2",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest --passWithNoTests",
+    "coverage": "jest --coverage --passWithNoTests"
+  }
 }