@instruments/materia-ui 0.1.0

package/dist/components/input-group/input-group-icon.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Icon } from "../icon.js";
+import { useInputGroup } from "../input-group/input-group-context.js";
+import { inputGroupSizeToIconSize } from "../input-group/input-group-variants.js";
+/**
+ * Decorative icon for use inside InputGroup.
+ * Automatically sizes based on InputGroup context.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupIcon icon={Search} />
+ *   <InputGroupInput placeholder="Search..." />
+ * </InputGroup>
+ * ```
+ */
+export const InputGroupIcon = ({ icon, className, ...props }) => {
+    const { size } = useInputGroup();
+    const iconSize = inputGroupSizeToIconSize(size);
+    return (_jsx(Icon, { className: cn("text-muted-foreground shrink-0", className), "data-component": "input-group-icon", "data-slot": "input-group-icon", icon: icon, size: iconSize, ...props }));
+};

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

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export type InputGroupInputProps = Omit<React.ComponentProps<"input">, "size"> & {
+    /** Test ID for testing. */
+    testId?: string;
+};
+/**
+ * Input element for use inside InputGroup (Base UI `Input`).
+ * Inherits size from InputGroup context; inside a Field it is the field's
+ * control, and it carries `aria-invalid` when the group has an error.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupInput placeholder="Enter text..." />
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroupInput: ({ className, type, testId, disabled: disabledProp, ...props }: InputGroupInputProps) => React.JSX.Element;

package/dist/components/input-group/input-group-input.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useInputGroup } from "../input-group/input-group-context.js";
+import { inputGroupControlVariants } from "../input-group/input-group-variants.js";
+/**
+ * Input element for use inside InputGroup (Base UI `Input`).
+ * Inherits size from InputGroup context; inside a Field it is the field's
+ * control, and it carries `aria-invalid` when the group has an error.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupInput placeholder="Enter text..." />
+ * </InputGroup>
+ * ```
+ */
+export const InputGroupInput = ({ className, type = "text", testId, disabled: disabledProp, ...props }) => {
+    const { size, disabled: contextDisabled, hasError } = useInputGroup();
+    const disabled = disabledProp ?? contextDisabled;
+    return (_jsx(InputPrimitive, { className: cn(inputGroupControlVariants({ size }), className), "data-component": "input-group-input", "data-slot": "input-group-control", disabled: disabled, type: type, ...(hasError ? { "aria-invalid": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }));
+};

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

@@ -0,0 +1,40 @@
+import type { ResponsiveSize } from "@instruments/materia-ui/tokens/size";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { Radius } from "../../tokens/radius.js";
+import { inputGroupVariants } from "../input-group/input-group-variants.js";
+export type InputGroupProps = React.ComponentProps<"div"> & Omit<VariantProps<typeof inputGroupVariants>, "size"> & {
+    /**
+     * Size of the input group - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. Children receive the resolved base size via
+     * context. @default "xl" (48px)
+     */
+    size?: ResponsiveSize;
+    /** Border radius style. */
+    radius?: Radius;
+    /** Show error styling; overrides the invalid state inherited from an ancestor Field. */
+    hasError?: boolean;
+    /** Disable the input group and its children. */
+    disabled?: boolean;
+};
+/**
+ * Composition container for inputs with addons, icons, and buttons. Distributes
+ * size/radius/disabled to its children via context, and inherits invalid state
+ * from an ancestor Field unless `hasError` is set explicitly.
+ * Import from "@instruments/materia-ui/components/input-group".
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupIcon icon={Search} />
+ *   <InputGroupInput placeholder="Search..." />
+ *   <InputGroupButton icon={X} onClick={clear} />
+ * </InputGroup>
+ * ```
+ *
+ * @bestPractice Compose with the `InputGroup*` parts (`InputGroupInput`, `InputGroupIcon`, `InputGroupAddon`, `InputGroupButton`) - a raw `<input>` won't receive the shared size/radius/disabled context.
+ * @bestPractice Set `size`/`radius`/`disabled` once on `InputGroup`; children inherit them via context, so don't re-set them per child.
+ * @bestPractice Inside a `Field` the group inherits invalid state and its `InputGroupInput`/`InputGroupTextarea` becomes the field's control (labelled, described, `aria-invalid`) - pass `hasError` only to force error styling and `aria-invalid` independently.
+ * @category forms
+ */
+export declare const InputGroup: ({ className, size, radius, hasError, disabled, children, ...props }: InputGroupProps) => React.JSX.Element;

package/dist/components/input-group/input-group-root.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useMemo } from "react";
+import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { useFieldContext } from "../field/field-context.js";
+import { InputGroupContext } from "../input-group/input-group-context.js";
+import { DEFAULT_INPUT_GROUP_SIZE, INPUT_GROUP_SIZE_CLASSES, inputGroupVariants, } from "../input-group/input-group-variants.js";
+/**
+ * Composition container for inputs with addons, icons, and buttons. Distributes
+ * size/radius/disabled to its children via context, and inherits invalid state
+ * from an ancestor Field unless `hasError` is set explicitly.
+ * Import from "@instruments/materia-ui/components/input-group".
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupIcon icon={Search} />
+ *   <InputGroupInput placeholder="Search..." />
+ *   <InputGroupButton icon={X} onClick={clear} />
+ * </InputGroup>
+ * ```
+ *
+ * @bestPractice Compose with the `InputGroup*` parts (`InputGroupInput`, `InputGroupIcon`, `InputGroupAddon`, `InputGroupButton`) - a raw `<input>` won't receive the shared size/radius/disabled context.
+ * @bestPractice Set `size`/`radius`/`disabled` once on `InputGroup`; children inherit them via context, so don't re-set them per child.
+ * @bestPractice Inside a `Field` the group inherits invalid state and its `InputGroupInput`/`InputGroupTextarea` becomes the field's control (labelled, described, `aria-invalid`) - pass `hasError` only to force error styling and `aria-invalid` independently.
+ * @category forms
+ */
+export const InputGroup = ({ className, size, radius = "rounded", hasError = false, disabled = false, children, ...props }) => {
+    const field = useFieldContext();
+    // Explicit hasError wins; otherwise inherit invalid state from an ancestor Field.
+    const resolvedError = hasError || (field?.invalid ?? false);
+    // Children read a single ComponentSize from context; the container itself
+    // layers the responsive `md:*` overrides on top of its base size.
+    const baseSize = resolveResponsiveBase(size, DEFAULT_INPUT_GROUP_SIZE);
+    const contextValue = useMemo(() => ({ disabled, hasError: resolvedError, radius, size: baseSize }), [baseSize, radius, disabled, resolvedError]);
+    return (_jsx(InputGroupContext.Provider, { value: contextValue, children: _jsx("div", { className: cn(inputGroupVariants({ radius, size: baseSize }), getResponsiveSizeOverrides(size, INPUT_GROUP_SIZE_CLASSES), 
+            // Clip addon backgrounds to border radius
+            "overflow-hidden", 
+            // Focus ring when any input-group-control inside is focused;
+            // gray-500/80 mirrors focusInput() default (see token JSDoc).
+            // ring-2/border-border is deliberate - a softer container ring
+            // than the field-level ring-3/border-ring.
+            "has-[[data-slot=input-group-control]:focus-visible]:ring-2", "has-[[data-slot=input-group-control]:focus-visible]:ring-gray-500/80", "has-[[data-slot=input-group-control]:focus-visible]:border-border", 
+            // Error styling
+            resolvedError && [
+                "ring-3",
+                "border-destructive",
+                "ring-destructive/20",
+                "dark:ring-destructive/40",
+            ], 
+            // Disabled styling
+            disabled && "cursor-not-allowed opacity-50", className), "data-component": "input-group", "data-slot": "input-group", ...props, children: children }) }));
+};

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

@@ -0,0 +1,22 @@
+import type * as React from "react";
+export type InputGroupTextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
+    /** Test ID for testing. */
+    testId?: string;
+};
+/**
+ * Textarea element for use inside InputGroup (Base UI `Field.Control`
+ * rendering a `<textarea>`). Inherits disabled state from InputGroup context;
+ * inside a Field it is the field's control, and it carries `aria-invalid`
+ * when the group has an error.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupTextarea placeholder="Enter message..." />
+ *   <InputGroupAddon align="block-end">
+ *     <InputGroupButton icon={Send}>Send</InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroupTextarea: ({ className, testId, disabled: disabledProp, id, name, ...props }: InputGroupTextareaProps) => React.JSX.Element;

package/dist/components/input-group/input-group-textarea.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { INPUT_CONTROL_RESET } from "../../tokens/input-shell.js";
+import { useInputGroup } from "../input-group/input-group-context.js";
+/**
+ * Textarea element for use inside InputGroup (Base UI `Field.Control`
+ * rendering a `<textarea>`). Inherits disabled state from InputGroup context;
+ * inside a Field it is the field's control, and it carries `aria-invalid`
+ * when the group has an error.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupTextarea placeholder="Enter message..." />
+ *   <InputGroupAddon align="block-end">
+ *     <InputGroupButton icon={Send}>Send</InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
+ * ```
+ */
+export const InputGroupTextarea = ({ className, testId, disabled: disabledProp, id, name, ...props }) => {
+    const { disabled: contextDisabled, hasError } = useInputGroup();
+    const disabled = disabledProp ?? contextDisabled;
+    // The control owns id/name/disabled so Field can label and validate it;
+    // textarea-only props ride on the rendered element.
+    return (_jsx(FieldPrimitive.Control, { disabled: disabled, render: _jsx("textarea", { className: cn(INPUT_CONTROL_RESET, "text-paragraph flex field-sizing-content min-h-16 resize-none px-0 py-2", className), "data-component": "input-group-textarea", "data-slot": "input-group-control", ...(hasError ? { "aria-invalid": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }), ...(id === undefined ? {} : { id }), ...(name === undefined ? {} : { name }) }));
+};

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

@@ -0,0 +1,7 @@
+import type { ComponentSize } from "../../tokens/size.js";
+/** Size options for InputGroup components. */
+export type InputGroupSize = ComponentSize;
+/** Alignment options for InputGroupAddon. */
+export type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
+/** Variant options for InputGroupAddon. */
+export type InputGroupAddonVariant = "default" | "muted";

package/dist/components/input-group/input-group-types.js

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

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

@@ -0,0 +1,45 @@
+import type { ComponentSize } from "../../tokens/size.js";
+import type { IconSize } from "../icon.js";
+import type { InputGroupSize } from "../input-group/input-group-types.js";
+/** Map input group size to icon size.
+ * Matches Button behavior: icons stay relatively consistent (xs for most sizes).
+ */
+export declare const inputGroupSizeToIconSize: (size: InputGroupSize | null | undefined) => IconSize;
+export type IconButtonSize = `icon-${ComponentSize}`;
+/** Map input group size to base button size (for styling/padding). */
+export declare const inputGroupSizeToButtonSize: (size: InputGroupSize | null | undefined) => IconButtonSize;
+/**
+ * InputGroupButton sizing: an exact height for a consistent 2px gap, and a
+ * negative end margin that pulls the button towards the edge.
+ *
+ * Height = container height - 2px border - 4px gap (2px each side), e.g. base:
+ * 36 - 2 - 4 = 30px. Margin = the group's `px` minus 0.5, leaving ~2px from the
+ * edge, e.g. base: px-2.5 - 0.5 = 2.
+ */
+export declare const inputGroupButtonVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Per-size class map for the InputGroup container (height + gap + padding).
+ * Heights from the shared CONTROL_HEIGHT_CLASSES so InputGroup lines up with
+ * Button/Input at the same `size`. `px` must match the addon negative-margins
+ * below. Named export so the container can layer per-breakpoint `md:*`
+ * overrides on top of the cva's base size via `getResponsiveSizeOverrides`.
+ */
+export declare const INPUT_GROUP_SIZE_CLASSES: Record<"2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs", string>;
+/** Default InputGroup size (Figma canonical 48px field). */
+export declare const DEFAULT_INPUT_GROUP_SIZE: ComponentSize;
+/** InputGroup container variants. */
+export declare const inputGroupVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+    radius?: "full" | "rounded" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** InputGroupInput/Textarea variants (inside InputGroup). */
+export declare const inputGroupControlVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** InputGroupAddon variants for muted background styling. */
+export declare const inputGroupAddonMutedVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/input-group/input-group-variants.js

@@ -0,0 +1,202 @@
+import { cva } from "class-variance-authority";
+import { INPUT_CONTROL_RESET, INPUT_WRAPPER } from "../../tokens/input-shell.js";
+import { withControlHeights } from "../../tokens/size.js";
+/** Map input group size to icon size.
+ * Matches Button behavior: icons stay relatively consistent (xs for most sizes).
+ */
+export const inputGroupSizeToIconSize = (size) => {
+    switch (size ?? "base") {
+        case "2xs": {
+            return "2xs";
+            // 12px
+        }
+        case "xs": {
+            return "2xs";
+            // 12px
+        }
+        case "sm": {
+            return "xs";
+            // 16px
+        }
+        case "base": {
+            return "xs";
+            // 16px
+        }
+        case "lg": {
+            return "xs";
+            // 16px
+        }
+        case "xl": {
+            return "xs";
+            // 16px
+        }
+        case "2xl": {
+            return "xs";
+            // 16px
+        }
+        case "3xl": {
+            return "xs";
+            // 16px
+        }
+        default: {
+            return "xs";
+        }
+    }
+};
+/** Map input group size to base button size (for styling/padding). */
+export const inputGroupSizeToButtonSize = (size) => {
+    switch (size ?? "base") {
+        case "2xs": {
+            return "icon-2xs";
+        }
+        case "xs": {
+            return "icon-2xs";
+        }
+        case "sm": {
+            return "icon-xs";
+        }
+        case "base": {
+            return "icon-sm";
+        }
+        case "lg": {
+            return "icon-base";
+        }
+        case "xl": {
+            return "icon-lg";
+        }
+        case "2xl": {
+            return "icon-xl";
+        }
+        case "3xl": {
+            return "icon-2xl";
+        }
+        default: {
+            return "icon-sm";
+        }
+    }
+};
+/**
+ * InputGroupButton sizing: an exact height for a consistent 2px gap, and a
+ * negative end margin that pulls the button towards the edge.
+ *
+ * Height = container height - 2px border - 4px gap (2px each side), e.g. base:
+ * 36 - 2 - 4 = 30px. Margin = the group's `px` minus 0.5, leaving ~2px from the
+ * edge, e.g. base: px-2.5 - 0.5 = 2.
+ */
+export const inputGroupButtonVariants = cva("", {
+    defaultVariants: {
+        size: "base",
+    },
+    variants: {
+        size: {
+            "2xs": "-mr-1 !h-4.5",
+            xs: "-mr-1.5 !h-5.5",
+            sm: "-mr-1.5 !h-6.5",
+            base: "-mr-2 !h-7.5",
+            lg: "-mr-2.5 !h-8.5",
+            xl: "-mr-2.5 !h-9.5",
+            "2xl": "-mr-3 !h-10.5",
+            "3xl": "-mr-3.5 !h-12.5",
+        },
+    },
+});
+/**
+ * Per-size class map for the InputGroup container (height + gap + padding).
+ * Heights from the shared CONTROL_HEIGHT_CLASSES so InputGroup lines up with
+ * Button/Input at the same `size`. `px` must match the addon negative-margins
+ * below. Named export so the container can layer per-breakpoint `md:*`
+ * overrides on top of the cva's base size via `getResponsiveSizeOverrides`.
+ */
+export const INPUT_GROUP_SIZE_CLASSES = withControlHeights({
+    "2xs": "gap-1 px-2",
+    xs: "gap-1.5 px-2.5",
+    sm: "gap-1.5 px-3",
+    base: "gap-2 px-3.5",
+    lg: "gap-2 px-4",
+    xl: "gap-2 px-4",
+    "2xl": "gap-2.5 px-5",
+    "3xl": "gap-3 px-6",
+});
+/** Default InputGroup size (Figma canonical 48px field). */
+export const DEFAULT_INPUT_GROUP_SIZE = "xl";
+/** InputGroup container variants. */
+export const inputGroupVariants = cva(INPUT_WRAPPER, {
+    defaultVariants: {
+        radius: "rounded",
+        size: "xl",
+    },
+    variants: {
+        // Default `xl` = 48px (Figma field). Height/padding come from
+        // INPUT_GROUP_SIZE_CLASSES (shared CONTROL_HEIGHT_CLASSES ladder).
+        size: INPUT_GROUP_SIZE_CLASSES,
+        radius: {
+            full: "rounded-full",
+            rounded: "rounded-md",
+            square: "rounded-none",
+        },
+    },
+});
+/** InputGroupInput/Textarea variants (inside InputGroup). */
+export const inputGroupControlVariants = cva(INPUT_CONTROL_RESET, {
+    defaultVariants: {
+        size: "xl",
+    },
+    variants: {
+        size: withControlHeights({
+            "2xs": "py-0.5 text-caption",
+            xs: "py-1 text-caption",
+            sm: "py-1 text-paragraph-sm",
+            base: "py-1.5 text-paragraph-sm",
+            lg: "py-2 text-paragraph-sm",
+            xl: "py-3 text-paragraph-sm",
+            "2xl": "py-3.5 text-paragraph",
+            "3xl": "py-4 text-paragraph",
+        }),
+    },
+});
+/** InputGroupAddon variants for muted background styling. */
+export const inputGroupAddonMutedVariants = cva("border-border bg-secondary text-muted-foreground flex items-center justify-center whitespace-nowrap", {
+    compoundVariants: [
+        // inline-start: negative margin + padding must match InputGroup px-* for each size
+        // Parent overflow-hidden clips to container border radius
+        { align: "inline-start", class: "-ml-2 px-2", size: "2xs" },
+        { align: "inline-start", class: "-ml-2.5 px-2.5", size: "xs" },
+        { align: "inline-start", class: "-ml-3 px-3", size: "sm" },
+        { align: "inline-start", class: "-ml-3.5 px-3.5", size: "base" },
+        { align: "inline-start", class: "-ml-4 px-4", size: "lg" },
+        { align: "inline-start", class: "-ml-4 px-4", size: "xl" },
+        { align: "inline-start", class: "-ml-5 px-5", size: "2xl" },
+        { align: "inline-start", class: "-ml-6 px-6", size: "3xl" },
+        // inline-end: same pattern for suffix
+        { align: "inline-end", class: "-mr-2 px-2", size: "2xs" },
+        { align: "inline-end", class: "-mr-2.5 px-2.5", size: "xs" },
+        { align: "inline-end", class: "-mr-3 px-3", size: "sm" },
+        { align: "inline-end", class: "-mr-3.5 px-3.5", size: "base" },
+        { align: "inline-end", class: "-mr-4 px-4", size: "lg" },
+        { align: "inline-end", class: "-mr-4 px-4", size: "xl" },
+        { align: "inline-end", class: "-mr-5 px-5", size: "2xl" },
+        { align: "inline-end", class: "-mr-6 px-6", size: "3xl" },
+    ],
+    defaultVariants: {
+        align: "inline-start",
+        size: "xl",
+    },
+    variants: {
+        size: {
+            "2xs": "text-caption",
+            xs: "text-caption",
+            sm: "text-paragraph-sm",
+            base: "text-paragraph-sm",
+            lg: "text-paragraph-sm",
+            xl: "text-paragraph-sm",
+            "2xl": "text-paragraph",
+            "3xl": "text-paragraph",
+        },
+        align: {
+            "inline-start": "border-r",
+            "inline-end": "border-l",
+            "block-start": "",
+            "block-end": "",
+        },
+    },
+});

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

@@ -0,0 +1,10 @@
+export { InputGroupAddon } from "./input-group/input-group-addon.js";
+export { inputGroupAnatomy } from "./input-group/input-group-anatomy.js";
+export { InputGroupButton } from "./input-group/input-group-button.js";
+export { InputGroupContext, useInputGroup, useOptionalInputGroup, } from "./input-group/input-group-context.js";
+export { InputGroupIcon } from "./input-group/input-group-icon.js";
+export { InputGroupInput } from "./input-group/input-group-input.js";
+export { InputGroup } from "./input-group/input-group-root.js";
+export { InputGroupTextarea } from "./input-group/input-group-textarea.js";
+export type { InputGroupAddonAlign, InputGroupAddonVariant, InputGroupSize, } from "./input-group/input-group-types.js";
+export { inputGroupAddonMutedVariants, inputGroupControlVariants, inputGroupSizeToButtonSize, inputGroupSizeToIconSize, inputGroupVariants, } from "./input-group/input-group-variants.js";

package/dist/components/input-group.js

@@ -0,0 +1,9 @@
+export { InputGroupAddon } from "./input-group/input-group-addon.js";
+export { inputGroupAnatomy } from "./input-group/input-group-anatomy.js";
+export { InputGroupButton } from "./input-group/input-group-button.js";
+export { InputGroupContext, useInputGroup, useOptionalInputGroup, } from "./input-group/input-group-context.js";
+export { InputGroupIcon } from "./input-group/input-group-icon.js";
+export { InputGroupInput } from "./input-group/input-group-input.js";
+export { InputGroup } from "./input-group/input-group-root.js";
+export { InputGroupTextarea } from "./input-group/input-group-textarea.js";
+export { inputGroupAddonMutedVariants, inputGroupControlVariants, inputGroupSizeToButtonSize, inputGroupSizeToIconSize, inputGroupVariants, } from "./input-group/input-group-variants.js";

package/dist/components/input-otp/input-otp-root.d.ts

@@ -0,0 +1,41 @@
+import { OTPField as OTPFieldPrimitive } from "@base-ui/react/otp-field";
+type InputOTPProps = OTPFieldPrimitive.Root.Props;
+/**
+ * One-time password input component for verification codes.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState("");
+ *
+ * <InputOTP length={6} value={value} onValueChange={setValue}>
+ *   <InputOTPGroup>
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *   </InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ *
+ * @bestPractice Set `length` to the code length and render exactly that many `InputOTPSlot`s - slots take their position from their order in the tree, so there is no `index` prop.
+ * @bestPractice Drive it controlled with `value`/`onValueChange` (a plain string), or react to `onValueComplete` once the string reaches full `length`.
+ * @bestPractice Characters are filtered by `validationType` (`"numeric"` by default; `"alpha"`, `"alphanumeric"` and `"none"` are also available) - pass `"alphanumeric"` for codes that contain letters.
+ * @bestPractice Split slots into `InputOTPGroup`s with an `InputOTPSeparator` between them for visual grouping only - it does not change the underlying value.
+ * @category forms
+ */
+declare const InputOTP: ({ className, ...props }: InputOTPProps) => import("react").JSX.Element;
+/**
+ * Groups a run of `InputOTPSlot`s into one visual cluster; place an
+ * `InputOTPSeparator` between groups.
+ */
+declare const InputOTPGroup: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+export type { InputOTPProps };
+export { InputOTP, InputOTPGroup };
+export { InputOTPSeparator } from "./input-otp-separator.js";
+export { InputOTPSlot } from "./input-otp-slot.js";
+export type { InputOTPSlotProps } from "./input-otp-slot.js";

package/dist/components/input-otp/input-otp-root.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OTPField as OTPFieldPrimitive } from "@base-ui/react/otp-field";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * One-time password input component for verification codes.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState("");
+ *
+ * <InputOTP length={6} value={value} onValueChange={setValue}>
+ *   <InputOTPGroup>
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *   </InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *     <InputOTPSlot />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ *
+ * @bestPractice Set `length` to the code length and render exactly that many `InputOTPSlot`s - slots take their position from their order in the tree, so there is no `index` prop.
+ * @bestPractice Drive it controlled with `value`/`onValueChange` (a plain string), or react to `onValueComplete` once the string reaches full `length`.
+ * @bestPractice Characters are filtered by `validationType` (`"numeric"` by default; `"alpha"`, `"alphanumeric"` and `"none"` are also available) - pass `"alphanumeric"` for codes that contain letters.
+ * @bestPractice Split slots into `InputOTPGroup`s with an `InputOTPSeparator` between them for visual grouping only - it does not change the underlying value.
+ * @category forms
+ */
+const InputOTP = ({ className, ...props }) => (_jsx(OTPFieldPrimitive.Root, { className: cn("flex items-center gap-2 has-disabled:opacity-50", className), "data-slot": "input-otp", ...props }));
+/**
+ * Groups a run of `InputOTPSlot`s into one visual cluster; place an
+ * `InputOTPSeparator` between groups.
+ */
+const InputOTPGroup = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: className, gap: "2xs", "data-slot": "input-otp-group", ...props }));
+export { InputOTP, InputOTPGroup };
+export { InputOTPSeparator } from "./input-otp-separator.js";
+export { InputOTPSlot } from "./input-otp-slot.js";

package/dist/components/input-otp/input-otp-separator.d.ts

@@ -0,0 +1,3 @@
+/** Decorative minus-icon divider between slot groups; rendered `aria-hidden`. */
+declare const InputOTPSeparator: ({ ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+export { InputOTPSeparator };

package/dist/components/input-otp/input-otp-separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MinusIcon } from "lucide-react";
+import { Icon } from "../icon.js";
+/** Decorative minus-icon divider between slot groups; rendered `aria-hidden`. */
+const InputOTPSeparator = ({ ...props }) => (_jsx("div", { "aria-hidden": "true", "data-slot": "input-otp-separator", ...props, children: _jsx(Icon, { className: "text-muted-foreground", icon: MinusIcon, size: "xs" }) }));
+export { InputOTPSeparator };

package/dist/components/input-otp/input-otp-slot.d.ts

@@ -0,0 +1,10 @@
+import { OTPField as OTPFieldPrimitive } from "@base-ui/react/otp-field";
+type InputOTPSlotProps = OTPFieldPrimitive.Input.Props;
+/**
+ * A single character cell, a real input; its position in the code is its
+ * order within the `InputOTP`. Each slot is named "Digit n of N" by default;
+ * pass `aria-label` to override.
+ */
+declare const InputOTPSlot: ({ className, "aria-label": ariaLabel, ...props }: InputOTPSlotProps) => import("react").JSX.Element;
+export type { InputOTPSlotProps };
+export { InputOTPSlot };

package/dist/components/input-otp/input-otp-slot.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OTPField as OTPFieldPrimitive } from "@base-ui/react/otp-field";
+import { cn } from "@instruments/materia-ui/utils/cn";
+// Hoisted so only `className` varies per render.
+const inputOtpSlotBaseStyles = cn("border-border bg-input text-foreground text-paragraph relative m-0 flex size-12 items-center justify-center border p-0 text-center shadow-xs transition outline-none first:rounded-l-md first:border-l last:rounded-r-md disabled:cursor-not-allowed", "aria-invalid:border-destructive", 
+// Mirrors focusInput() default (see token JSDoc).
+"focus-visible:border-ring focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-gray-500/80", "focus-visible:aria-invalid:border-destructive focus-visible:aria-invalid:ring-destructive/20 focus-visible:aria-invalid:ring-3");
+/**
+ * A single character cell, a real input; its position in the code is its
+ * order within the `InputOTP`. Each slot is named "Digit n of N" by default;
+ * pass `aria-label` to override.
+ */
+const InputOTPSlot = ({ className, "aria-label": ariaLabel, ...props }) => (_jsx(OTPFieldPrimitive.Input, { className: cn(inputOtpSlotBaseStyles, className), "data-slot": "input-otp-slot", 
+    // Base UI drops `aria-label` on the first slot and names the rest only via
+    // a Field label, so each slot is named here ("Digit 2 of 6") unless the
+    // consumer supplies their own.
+    render: (inputProps, state) => (_jsx("input", { ...inputProps, "aria-label": ariaLabel ?? `Digit ${state.index + 1} of ${state.length}` })), ...props }));
+export { InputOTPSlot };

package/dist/components/input-otp.d.ts

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./input-otp/input-otp-root.js";

package/dist/components/input-otp.js

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./input-otp/input-otp-root.js";