@gridui/input 1.1.6 → 3.0.0

package/dist/input-group/input-group.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace InputGroup
+ * @description Input Group
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type InputGroupProps = ComponentPropsWithRef<"div"> & {
+    readonly controlSize?: "standard" | "small";
+};
+export declare const InputGroup: FC<InputGroupProps>;

package/dist/input-group-addon/input-group-addon.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace InputGroupAddon
+ * @description Input Group Addon
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type InputGroupAddonProps = ComponentPropsWithRef<"div"> & {
+    readonly align?: "inline-start" | "inline-end" | "block-start" | "block-end";
+};
+export declare const InputGroupAddon: FC<InputGroupAddonProps>;

package/dist/input-group-button/input-group-button.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace InputGroupButton
+ * @description Input Group Button
+ */
+import { type ButtonProps } from "@gridui/button";
+import type { FC } from "react";
+export type InputGroupButtonProps = ButtonProps;
+export declare const InputGroupButton: FC<InputGroupButtonProps>;

package/dist/password-input/password-input.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace PasswordInput
+ * @description Password Input
+ */
+import { type InputProps } from "../input/input";
+import { type FC } from "react";
+export type PasswordInputProps = Omit<InputProps, "type"> & {
+    readonly showLabel: string;
+    readonly hideLabel: string;
+    readonly rootClassName?: string;
+};
+export declare const PasswordInput: FC<PasswordInputProps>;

package/dist/search-input/search-input.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace SearchInput
+ * @description Search Input
+ */
+import { type InputProps } from "../input/input";
+import { type FC } from "react";
+export type SearchInputProps = Omit<InputProps, "type"> & {
+    readonly clearLabel: string;
+    readonly loading?: boolean;
+    readonly loadingLabel?: string;
+    readonly rootClassName?: string;
+};
+export declare const SearchInput: FC<SearchInputProps>;

package/dist/shared/input-group-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Shared
+ * @description Input Group Context
+ */
+export declare const inputGroupContext: import("react").Context<"standard" | "small" | null>;
+export declare const useInputGroupSize: () => "standard" | "small" | null;

package/dist/shared/text-control-options.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Input
+ * @namespace Shared
+ * @description Text Control Options
+ */
+export type TextControlOptions = {
+    readonly controlSize?: "standard" | "small";
+    readonly onValueChange?: (value: string) => void;
+};

package/dist/styles.css

@@ -1,94 +1,200 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
-  .gridui-u-box-border {
+  .gridui-u-input--box-border {
     box-sizing: border-box;
   }
-  .gridui-u-inline-flex {
+  .gridui-u-input--inline-flex {
     display: inline-flex;
   }
-  .gridui-u-min-h-gridui-control {
+  .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);
   }
-  .gridui-u-min-h-gridui-control-small {
+  .gridui-u-input--min-h-gridui-control-small {
     min-height: var(--gridui-control-min-height-small);
   }
-  .gridui-u-w-full {
+  .gridui-u-input--w-0 {
+    width: 0px;
+  }
+  .gridui-u-input--w-full {
     width: 100%;
   }
-  .gridui-u-min-w-0 {
+  .gridui-u-input--min-w-0 {
     min-width: 0px;
   }
-  .gridui-u-shrink-0 {
+  .gridui-u-input--flex-1 {
+    flex: 1;
+  }
+  .gridui-u-input--shrink-0 {
     flex-shrink: 0;
   }
-  .gridui-u-resize-none {
+  .gridui-u-input--resize-none {
     resize: none;
   }
-  .gridui-u-resize-y {
+  .gridui-u-input--resize-y {
     resize: vertical;
   }
-  .gridui-u-items-center {
+  .gridui-u-input--items-center {
     align-items: center;
   }
-  .gridui-u-gap-gridui-4 {
+  .gridui-u-input--gap-gridui-4 {
     gap: var(--gridui-space-4);
   }
-  .gridui-u-overflow-auto {
+  .gridui-u-input--overflow-auto {
     overflow: auto;
   }
-  .gridui-u-rounded-control {
+  .gridui-u-input--rounded-control {
     border-radius: var(--gridui-control-radius);
   }
-  .gridui-u-border {
+  .gridui-u-input--border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .gridui-u-border-solid {
+  .gridui-u-input--border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .gridui-u-input--border-solid {
     --tw-border-style: solid;
     border-style: solid;
   }
-  .gridui-u-border-border {
+  .gridui-u-input--border-border {
     border-color: var(--gridui-border);
   }
-  .gridui-u-bg-background {
+  .gridui-u-input--bg-background {
     background-color: var(--gridui-background);
   }
-  .gridui-u-p-gridui-8 {
+  .gridui-u-input--bg-transparent {
+    background-color: transparent;
+  }
+  .gridui-u-input--p-gridui-8 {
     padding: var(--gridui-space-8);
   }
-  .gridui-u-px-gridui-8 {
+  .gridui-u-input--px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .gridui-u-py-gridui-4 {
+  .gridui-u-input--py-gridui-4 {
     padding-block: var(--gridui-space-4);
   }
-  .gridui-u-type-input {
+  .gridui-u-input--type-input {
     font: var(--gridui-type-input);
     letter-spacing: normal;
   }
-  .gridui-u-type-ui {
+  .gridui-u-input--type-ui {
     font: var(--gridui-type-ui);
     letter-spacing: normal;
   }
-  .gridui-u-text-foreground {
+  .gridui-u-input--text-foreground {
     color: var(--gridui-foreground);
   }
-  .gridui-u-disabled\:cursor-not-allowed:disabled {
+  .gridui-u-input--disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
-  .gridui-u-disabled\:opacity-50:disabled {
+  .gridui-u-input--disabled\:opacity-50:disabled {
     opacity: 50%;
   }
-  .gridui-u-aria-invalid\:border-danger-foreground[aria-invalid="true"] {
+  .gridui-u-input--aria-invalid\:border-danger-foreground[aria-invalid="true"] {
     border-color: var(--gridui-danger-foreground);
   }
-  .gridui-u-\[\&\>svg\]\:size-gridui-16 > svg {
+  .gridui-u-input--\[\&\>svg\]\:size-gridui-16 > svg {
     width: var(--gridui-space-16);
     height: var(--gridui-space-16);
   }
 }
+@layer components {
+  .gridui-input-group {
+    --_gridui-input-height: var(--gridui-control-min-height);
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    min-height: var(--_gridui-input-height);
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--gridui-border);
+    border-radius: var(--gridui-control-radius);
+    color: var(--gridui-foreground);
+    background: var(--gridui-background);
+    &[data-control-size="small"] {
+      --_gridui-input-height: var(--gridui-control-min-height-small);
+    }
+    > .gridui-control {
+      flex: 1;
+      width: 0;
+      border: 0;
+      background: transparent;
+      outline: none;
+    }
+    > textarea.gridui-control {
+      flex-basis: 100%;
+      width: 100%;
+    }
+    &:has(> .gridui-control: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"]) {
+      border-color: var(--gridui-danger-foreground);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      &:has(> .gridui-control: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-input-group-addon {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--gridui-space-8);
+    min-width: 0;
+    padding-inline: var(--gridui-space-8);
+    &[data-align="inline-start"] {
+      order: -1;
+    }
+    &[data-align="block-start"], &[data-align="block-end"] {
+      flex-basis: 100%;
+      box-sizing: border-box;
+      padding-block: var(--gridui-space-8);
+    }
+    &[data-align="block-start"] {
+      order: -2;
+    }
+    &[data-align="block-end"] {
+      order: 2;
+    }
+  }
+  .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);
+    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);
+    }
+    &[data-max-rows] {
+      max-height: calc(var(--_gridui-textarea-max-rows) * 1lh + var(--_gridui-textarea-inset));
+    }
+  }
+  .gridui-input-group > input[type="search"]::-webkit-search-cancel-button {
+    appearance: none;
+  }
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/dist/textarea/textarea.d.ts

@@ -4,11 +4,11 @@
  * @namespace Textarea
  * @description Textarea
  */
+import type { TextControlOptions } from "../shared/text-control-options";
 import { type ComponentPropsWithRef, type FC } from "react";
-export type TextareaProps = ComponentPropsWithRef<"textarea"> & {
+export type TextareaProps = ComponentPropsWithRef<"textarea"> & TextControlOptions & {
     readonly autoSize?: boolean;
     readonly maxHeight?: number;
-    readonly controlSize?: "standard" | "small";
-    readonly onValueChange?: (value: string) => void;
+    readonly maxRows?: number;
 };
 export declare const Textarea: FC<TextareaProps>;

package/docs/catalog.json

@@ -1,13 +1,22 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/input",
-  "version": "1.1.6",
+  "version": "3.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.",
   "documentation": [
     "README.md",
     "docs/common-inputs.md",
+    "docs/reference/README.md",
+    "docs/reference/input-group-addon.md",
+    "docs/reference/input-group-button.md",
+    "docs/reference/input-group.md",
+    "docs/reference/input.md",
+    "docs/reference/label.md",
+    "docs/reference/password-input.md",
+    "docs/reference/search-input.md",
+    "docs/reference/textarea.md",
     "docs/textarea.md"
   ],
   "exports": [
@@ -21,6 +30,36 @@
       "kind": "component",
       "importPath": "@gridui/input"
     },
+    {
+      "name": "InputGroup",
+      "kind": "component",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "InputGroupAddon",
+      "kind": "component",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "InputGroupAddonProps",
+      "kind": "type",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "InputGroupButton",
+      "kind": "component",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "InputGroupButtonProps",
+      "kind": "type",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "InputGroupProps",
+      "kind": "type",
+      "importPath": "@gridui/input"
+    },
     {
       "name": "InputProps",
       "kind": "type",
@@ -36,6 +75,26 @@
       "kind": "type",
       "importPath": "@gridui/input"
     },
+    {
+      "name": "PasswordInput",
+      "kind": "component",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "PasswordInputProps",
+      "kind": "type",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "SearchInput",
+      "kind": "component",
+      "importPath": "@gridui/input"
+    },
+    {
+      "name": "SearchInputProps",
+      "kind": "type",
+      "importPath": "@gridui/input"
+    },
     {
       "name": "Textarea",
       "kind": "component",
@@ -49,10 +108,14 @@
   ],
   "styles": [
     "@gridui/theme/styles.css",
+    "@gridui/button/styles.css",
     "@gridui/overlay/styles.css",
     "@gridui/input/styles.css"
   ],
   "examples": [
+    "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/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/README.md

@@ -0,0 +1,11 @@
+<!-- Generated by pnpm docs:storybook. -->
+# Component reference
+
+- [Input](input.md)
+- [InputGroup](input-group.md)
+- [InputGroupAddon](input-group-addon.md)
+- [InputGroupButton](input-group-button.md)
+- [Label](label.md)
+- [PasswordInput](password-input.md)
+- [SearchInput](search-input.md)
+- [Textarea](textarea.md)

package/docs/reference/input-group-addon.md

@@ -0,0 +1,63 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# InputGroupAddon
+
+Compose InputGroupAddon with InputGroup inside the same @gridui/input component family.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { InputGroupAddon } from "@gridui/input";
+import "@gridui/theme/styles.css";
+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/packages-core/input/stories/input-group.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLDivElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLDivElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### align
+
+``"inline-start" | "inline-end" | "block-start" | "block-end" | undefined`` · Optional
+
+Default: ``"inline-start"``
+

package/docs/reference/input-group-button.md

@@ -0,0 +1,99 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# InputGroupButton
+
+Compose InputGroupButton with InputGroup inside the same @gridui/input component family.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { InputGroupButton } from "@gridui/input";
+import "@gridui/theme/styles.css";
+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/packages-core/input/stories/input-group.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLButtonElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLButtonElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### size
+
+``"small" | "standard" | "large" | "extra-large" | null | undefined`` · Optional
+
+Component size preset.
+
+### iconMotion
+
+``"none" | "outward" | null | undefined`` · Optional
+
+### variant
+
+``"text" | "primary" | "secondary" | "quiet" | "highlight" | "underlined" | null | undefined`` · Optional
+
+Visual variant.
+
+### layout
+
+``"cell" | "standard" | "icon" | "entry" | "rail" | "divided" | null | undefined`` · Optional
+
+Layout within the containing region.
+
+### startIcon
+
+``ReactNode`` · Optional
+
+### startIconLayout
+
+``"divided" | "inline" | undefined`` · Optional
+
+### startIconSize
+
+``"standard" | "large" | "extra-large" | undefined`` · Optional
+
+### endIcon
+
+``ReactNode`` · Optional
+
+### loading
+
+``boolean | undefined`` · Optional
+

package/docs/reference/input-group.md

@@ -0,0 +1,63 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# InputGroup
+
+Combines a native text control with units, icons, or actions inside one outline. Use block addons for multiline tools.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { InputGroup } from "@gridui/input";
+import "@gridui/theme/styles.css";
+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/packages-core/input/stories/input-group.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLDivElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLDivElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### controlSize
+
+``"small" | "standard" | undefined`` · Optional
+
+Default: ``"standard"``
+