@instruments/materia-ui 0.1.0

package/dist/components/icon-morph.d.ts

@@ -0,0 +1,2 @@
+export type { IconMorphProps } from "./icon-morph/icon-morph-root.js";
+export { IconMorph } from "./icon-morph/icon-morph-root.js";

package/dist/components/icon-morph.js

@@ -0,0 +1 @@
+export { IconMorph } from "./icon-morph/icon-morph-root.js";

package/dist/components/icon.d.ts

@@ -0,0 +1 @@
+export { ICON_SIZE_CLASS, Icon, type IconProps, type IconSize, } from "./icon/icon-root.js";

package/dist/components/icon.js

@@ -0,0 +1 @@
+export { ICON_SIZE_CLASS, Icon, } from "./icon/icon-root.js";

package/dist/components/identified-surface.d.ts

@@ -0,0 +1,24 @@
+export interface IdentifiedSurfaceFrameProps {
+    /** Persists the stronger treatment after the identified object is selected. */
+    active?: boolean;
+    className?: string;
+    /** Reveals the complete frame while a related control is hovered or focused. */
+    highlighted?: boolean;
+    label: string;
+    labelAlign?: "center" | "end" | "start";
+    labelPlacement?: "above" | "below";
+    /** Keeps the complete evidence boundary visible before interaction. */
+    persistentFrame?: boolean;
+    secondaryLabel?: string | undefined;
+    thumbnailUrl?: string | null | undefined;
+}
+/**
+ * High-contrast brackets and disclosure frame for an object identified inside
+ * an image or document. Resting corners preserve the evidence geometry;
+ * highlight and active states reveal the complete frame and compact label.
+ *
+ * @bestPractice Position this over the exact identified bounds inside a relative container; inflate the bounds outside this component when the source geometry is smaller than a comfortable pointer target.
+ * @bestPractice Pair it with a real button or link. This component is deliberately pointer-transparent and carries no interaction semantics of its own.
+ * @category composites
+ */
+export declare const IdentifiedSurfaceFrame: ({ active, className, highlighted, label, labelAlign, labelPlacement, persistentFrame, secondaryLabel, thumbnailUrl, }: IdentifiedSurfaceFrameProps) => import("react").JSX.Element;

package/dist/components/identified-surface.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { durations } from "../tokens/motion.js";
+import { cn } from "../utils/cn.js";
+const SurfaceCorner = ({ className }) => (_jsx("span", { className: cn("absolute size-5 border-white", className), "data-testid": "identified-surface-corner", style: { filter: "drop-shadow(0 0 1px rgb(17 24 39 / 0.9))" } }));
+const getFrameState = (active, highlighted) => {
+    if (active) {
+        return "active";
+    }
+    if (highlighted) {
+        return "highlighted";
+    }
+    return "rest";
+};
+const getLabelInitialY = (reduceMotion, labelPlacement) => {
+    if (reduceMotion === true) {
+        return 0;
+    }
+    return labelPlacement === "below" ? -2 : 2;
+};
+const getFrameShadow = (active) => {
+    if (active) {
+        return "inset 0 0 0 1px rgb(17 24 39 / 0.22), 0 0 0 1px rgb(255 255 255 / 0.58), 0 20px 56px rgb(17 24 39 / 0.32)";
+    }
+    return "inset 0 0 0 1px rgb(17 24 39 / 0.2), 0 0 0 1px rgb(255 255 255 / 0.52), 0 18px 50px rgb(17 24 39 / 0.28)";
+};
+const getLabelAlignmentClass = (labelAlign) => {
+    if (labelAlign === "start") {
+        return "left-0";
+    }
+    if (labelAlign === "end") {
+        return "right-0";
+    }
+    return "left-1/2 -translate-x-1/2";
+};
+const SurfaceLabel = ({ label, labelAlign, labelPlacement, reduceMotion, secondaryLabel, thumbnailUrl, }) => (_jsxs(m.span, { animate: { opacity: 1, y: 0 }, className: cn("text-caption absolute flex max-w-64 items-center gap-2 rounded-full border border-gray-950/80 bg-gray-950/90 py-1 pr-3 pl-1.5 font-medium text-white shadow-lg backdrop-blur-md", getLabelAlignmentClass(labelAlign), labelPlacement === "below" ? "top-full mt-2" : "bottom-full mb-2"), initial: {
+        opacity: 0,
+        y: getLabelInitialY(reduceMotion, labelPlacement),
+    }, transition: { duration: durations.quick, ease: "easeOut" }, children: [thumbnailUrl !== undefined &&
+            thumbnailUrl !== null &&
+            thumbnailUrl.length > 0 ? (_jsx("img", { alt: "", className: "size-7 shrink-0 rounded-full border border-white/70 bg-gray-100 object-cover shadow-inner", src: thumbnailUrl })) : null, _jsx("span", { className: "min-w-0 truncate", children: label }), secondaryLabel !== undefined && secondaryLabel.length > 0 ? (_jsx("span", { className: "text-caption max-w-24 truncate text-gray-300", children: secondaryLabel })) : null] }));
+/**
+ * High-contrast brackets and disclosure frame for an object identified inside
+ * an image or document. Resting corners preserve the evidence geometry;
+ * highlight and active states reveal the complete frame and compact label.
+ *
+ * @bestPractice Position this over the exact identified bounds inside a relative container; inflate the bounds outside this component when the source geometry is smaller than a comfortable pointer target.
+ * @bestPractice Pair it with a real button or link. This component is deliberately pointer-transparent and carries no interaction semantics of its own.
+ * @category composites
+ */
+export const IdentifiedSurfaceFrame = ({ active = false, className, highlighted = false, label, labelAlign = "center", labelPlacement = "above", persistentFrame = false, secondaryLabel, thumbnailUrl, }) => {
+    const reduceMotion = useReducedMotion();
+    const disclosed = active || highlighted;
+    const frameVisible = disclosed || persistentFrame;
+    const state = getFrameState(active, highlighted);
+    const frameShadow = getFrameShadow(active);
+    return (_jsxs("span", { className: cn("pointer-events-none absolute inset-0", className), "data-state": state, "data-testid": "identified-surface", children: [frameVisible ? (_jsx(m.span, { animate: { opacity: 1, scale: 1 }, className: "absolute inset-0 rounded-xl border-2 border-white bg-white/8", "data-testid": "identified-surface-frame", initial: { opacity: 0, scale: reduceMotion === true ? 1 : 0.985 }, style: { boxShadow: frameShadow }, transition: { duration: durations.quick, ease: "easeOut" } })) : null, _jsx(SurfaceCorner, { className: "-top-1 -left-1 rounded-tl-xl border-t-2 border-l-2" }), _jsx(SurfaceCorner, { className: "-top-1 -right-1 rounded-tr-xl border-t-2 border-r-2" }), _jsx(SurfaceCorner, { className: "-bottom-1 -left-1 rounded-bl-xl border-b-2 border-l-2" }), _jsx(SurfaceCorner, { className: "-right-1 -bottom-1 rounded-br-xl border-r-2 border-b-2" }), disclosed ? (_jsx(SurfaceLabel, { label: label, labelAlign: labelAlign, labelPlacement: labelPlacement, reduceMotion: reduceMotion, secondaryLabel: secondaryLabel, thumbnailUrl: thumbnailUrl })) : null] }));
+};

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

@@ -0,0 +1,37 @@
+import type { ResponsiveSize } from "@instruments/materia-ui/tokens/size";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { WithTestId } from "../../utils/with-test-id.js";
+import { standaloneInputVariants } from "../input/input-variants.js";
+export type InputProps = WithTestId<Omit<React.ComponentProps<"input">, "size">> & VariantProps<typeof standaloneInputVariants> & {
+    /**
+     * Field size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. @default "xl" (48px)
+     */
+    size?: ResponsiveSize;
+    /** Force error styling; overrides invalid state inherited from an ancestor Field. */
+    hasError?: boolean;
+    /** Force focus ring display (for documentation/testing) */
+    focused?: boolean;
+};
+/**
+ * Simple standalone input field (Base UI `Input`). Inside a Field it is the
+ * field's control: the FieldLabel targets it, FieldDescription/FieldError
+ * describe it, and it inherits the field's invalid state (`aria-invalid`).
+ * `hasError` forces error styling and `aria-invalid` on a standalone input.
+ * For inputs with icons, addons, or buttons, use InputGroup.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter text..." />
+ * <Input size="lg" radius="full" />
+ * <Input hasError placeholder="Invalid input" />
+ * ```
+ *
+ * @bestPractice For icons, addons, prefixes, or trailing buttons use `InputGroup`, not `Input` plus manually absolute-positioned decorations.
+ * @bestPractice Inside a `Field`, let invalid state cascade - omit `hasError`; pass `hasError` only to force error styling on a standalone `Input`. An invalid `Field` keeps `aria-invalid` on its control even with `hasError={false}`.
+ * @bestPractice Give every `Input` an associated label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.
+ * @bestPractice `size` defaults to `"xl"` (48px); pass a responsive object like `{ base: "sm", md: "xl" }` rather than swapping components per breakpoint.
+ * @category forms
+ */
+export declare const Input: ({ className, testId, size, radius, hasError, focused, ...props }: InputProps) => React.JSX.Element;

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

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { focusInput } from "@instruments/materia-ui/tokens/focus-input";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { hasErrorInput } from "../../tokens/has-error-input.js";
+import { getResponsiveSizeClasses } from "../../tokens/responsive.js";
+import { useFieldContext } from "../field/field-context.js";
+import { DEFAULT_INPUT_SIZE, INPUT_SIZE_CLASSES, standaloneInputVariants, } from "../input/input-variants.js";
+/**
+ * Simple standalone input field (Base UI `Input`). Inside a Field it is the
+ * field's control: the FieldLabel targets it, FieldDescription/FieldError
+ * describe it, and it inherits the field's invalid state (`aria-invalid`).
+ * `hasError` forces error styling and `aria-invalid` on a standalone input.
+ * For inputs with icons, addons, or buttons, use InputGroup.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter text..." />
+ * <Input size="lg" radius="full" />
+ * <Input hasError placeholder="Invalid input" />
+ * ```
+ *
+ * @bestPractice For icons, addons, prefixes, or trailing buttons use `InputGroup`, not `Input` plus manually absolute-positioned decorations.
+ * @bestPractice Inside a `Field`, let invalid state cascade - omit `hasError`; pass `hasError` only to force error styling on a standalone `Input`. An invalid `Field` keeps `aria-invalid` on its control even with `hasError={false}`.
+ * @bestPractice Give every `Input` an associated label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.
+ * @bestPractice `size` defaults to `"xl"` (48px); pass a responsive object like `{ base: "sm", md: "xl" }` rather than swapping components per breakpoint.
+ * @category forms
+ */
+export const Input = ({ className, testId, size, radius, hasError, focused, ...props }) => {
+    const field = useFieldContext();
+    // Explicit hasError wins for styling; otherwise inherit from an ancestor Field.
+    const resolvedError = hasError ?? field?.invalid ?? false;
+    return (_jsx(InputPrimitive, { className: cn(standaloneInputVariants({ radius }), getResponsiveSizeClasses(size, INPUT_SIZE_CLASSES, DEFAULT_INPUT_SIZE), focusInput(), hasErrorInput, className), "data-component": "input", "data-slot": "input", ...(hasError === true ? { "aria-invalid": true } : {}), ...(resolvedError ? { "data-error": true } : {}), ...(focused === true ? { "data-focused": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }));
+};

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

@@ -0,0 +1,6 @@
+import type { LucideIcon } from "lucide-react";
+import type * as React from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+/** Component size scale for Input and related parts. */
+export type InputSize = Exclude<ComponentSize, "3xl">;
+export type InputIcon = LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;

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

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

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

@@ -0,0 +1,17 @@
+import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * Per-size class map (height + padding + text). Applied via
+ * `getResponsiveSizeClasses` in the component - NOT as a cva variant - so
+ * `size` can be a single token or a per-breakpoint responsive object.
+ */
+export declare const INPUT_SIZE_CLASSES: Record<"2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs", string>;
+/** Default Input size (Figma canonical 48px field). */
+export declare const DEFAULT_INPUT_SIZE: ComponentSize;
+/**
+ * Standalone input variants (everything except `size`, which is resolved
+ * responsively in the component). For composed inputs with icons/addons, use
+ * InputGroup.
+ */
+export declare const standaloneInputVariants: (props?: ({
+    radius?: "full" | "rounded" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+import { withControlHeights } from "../../tokens/size.js";
+/**
+ * Per-size padding/text extras. Heights come from the shared
+ * CONTROL_HEIGHT_CLASSES (via `withControlHeights`) so an Input lines up with a
+ * Button/Select at the same `size`. Default is `xl` (48px) - the Figma
+ * canonical field - while `lg` (40px) etc. now match Button's ladder.
+ */
+const INPUT_SIZE_EXTRAS = {
+    "2xl": "px-5 py-3.5 text-paragraph file:h-10 file:text-paragraph",
+    "2xs": "px-2 py-1 text-caption file:h-4 file:text-caption",
+    "3xl": "px-6 py-4 text-paragraph file:h-11 file:text-paragraph",
+    base: "px-3.5 py-2 text-paragraph-sm file:h-7 file:text-paragraph-sm",
+    lg: "px-4 py-2 text-paragraph-sm file:h-8 file:text-paragraph-sm",
+    sm: "px-3 py-1.5 text-paragraph-sm file:h-6 file:text-caption",
+    xl: "px-4 py-3 text-paragraph-sm file:h-9 file:text-paragraph-sm",
+    xs: "px-2.5 py-1 text-caption file:h-5 file:text-caption",
+};
+/**
+ * Per-size class map (height + padding + text). Applied via
+ * `getResponsiveSizeClasses` in the component - NOT as a cva variant - so
+ * `size` can be a single token or a per-breakpoint responsive object.
+ */
+export const INPUT_SIZE_CLASSES = withControlHeights(INPUT_SIZE_EXTRAS);
+/** Default Input size (Figma canonical 48px field). */
+export const DEFAULT_INPUT_SIZE = "xl";
+/**
+ * Standalone input variants (everything except `size`, which is resolved
+ * responsively in the component). For composed inputs with icons/addons, use
+ * InputGroup.
+ */
+export const standaloneInputVariants = cva("border-border bg-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground md:text-paragraph-sm w-full min-w-0 border shadow-xs transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", {
+    defaultVariants: {
+        radius: "rounded",
+    },
+    variants: {
+        // Input radius is 8px (Figma rounded-md), not the shared 10px `rounded-lg`.
+        radius: {
+            full: "rounded-full",
+            rounded: "rounded-md",
+            square: "rounded-none",
+        },
+    },
+});

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

@@ -0,0 +1,45 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * inputCardSizeStyles helper for InputCard.
+ *  */
+declare const inputCardSizeStyles: Record<ComponentSize, string>;
+/**
+ * Map card size to icon size.
+ * Following Button's restrained pattern: icons stay small (xs) for most sizes.
+ */
+declare const INPUT_CARD_ICON_SIZE: Record<ComponentSize, ComponentSize>;
+/** Get the appropriate icon size for a given card size */
+declare const getInputCardIconSize: (cardSize: ComponentSize) => ComponentSize;
+interface InputCardIconProps {
+    className?: string;
+    icon: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    selected?: boolean;
+    size: ComponentSize;
+}
+/** Renders an icon for InputCard with proper sizing and selection state styling */
+declare const InputCardIcon: ({ icon, size, selected, className, }: InputCardIconProps) => React.JSX.Element;
+/**
+ * inputCardBaseStyles helper for InputCard.
+ *  */
+declare const inputCardBaseStyles: string;
+/**
+ * A chosen card keeps its fill and takes a dark outline, the design's "outline
+ * as pressed" rule that Toggle follows too, so it reads on any surface.
+ */
+declare const inputCardSelectedStyles: string;
+export interface InputCardProps extends useRender.ComponentProps<"div"> {
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Selected state; drives the primary-tinted styling and the `data-selected` attribute. */
+    selected?: boolean;
+    /** Component size */
+    size?: ComponentSize;
+}
+declare function InputCard({ render, selected, disabled, size, className, ref, ...props }: InputCardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare namespace InputCard {
+    var displayName: string;
+}
+export { getInputCardIconSize, INPUT_CARD_ICON_SIZE, InputCard, InputCardIcon, inputCardBaseStyles, inputCardSelectedStyles, inputCardSizeStyles, };

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { focusInput } from "@instruments/materia-ui/tokens/focus-input";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { hasErrorInput } from "../../tokens/has-error-input.js";
+import { Icon } from "../icon.js";
+/**
+ * inputCardSizeStyles helper for InputCard.
+ *  */
+const inputCardSizeStyles = {
+    "2xl": "gap-2 px-6 py-4",
+    "2xs": "gap-1 px-2 py-1",
+    "3xl": "gap-2 px-7 py-5",
+    base: "gap-2 px-3.5 py-2.5",
+    lg: "gap-2 px-4 py-3",
+    sm: "gap-1.5 px-3 py-2",
+    xl: "gap-2 px-5 py-3.5",
+    xs: "gap-1.5 px-2.5 py-1.5",
+};
+/**
+ * Size-aware corner radius for InputCard.
+ * Smaller controls should not look pill-like.
+ */
+const inputCardRadiusStyles = {
+    "2xl": "rounded-2xl",
+    "2xs": "rounded-md",
+    "3xl": "rounded-2xl",
+    base: "rounded-lg",
+    lg: "rounded-xl",
+    sm: "rounded-lg",
+    xl: "rounded-xl",
+    xs: "rounded-md",
+};
+/**
+ * Map card size to icon size.
+ * Following Button's restrained pattern: icons stay small (xs) for most sizes.
+ */
+const INPUT_CARD_ICON_SIZE = {
+    "2xl": "base",
+    "2xs": "2xs",
+    "3xl": "base",
+    base: "xs",
+    lg: "sm",
+    sm: "xs",
+    xl: "sm",
+    xs: "2xs",
+};
+/** Get the appropriate icon size for a given card size */
+const getInputCardIconSize = (cardSize) => INPUT_CARD_ICON_SIZE[cardSize];
+/** Renders an icon for InputCard with proper sizing and selection state styling */
+const InputCardIcon = ({ icon, size, selected, className, }) => (_jsx(Icon, { className: cn("text-muted-foreground transition-colors", selected === true && "text-primary", className), icon: icon, size: getInputCardIconSize(size) }));
+/**
+ * inputCardBaseStyles helper for InputCard.
+ *  */
+const inputCardBaseStyles = cn(
+// focusInput() leads cn() so the superset transition list below survives
+// the tailwind-merge conflict (transition-trap idiom, see 48c766b94).
+focusInput(), 
+// The whole card is a click target (RadioCard / CheckboxCard), so its
+// label-like text must not become a drag/double-click text selection - match
+// the clickable-text treatment used by MenuItem/SelectItem/CommandItem.
+"group relative flex cursor-pointer items-center select-none", "border-border bg-card border shadow-xs", "text-card-foreground", "transition-color-bg-shadow-border", "hover:border-foreground/30", hasErrorInput, 
+// Disabled styles - support both disabled attribute and data-disabled
+"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50");
+/**
+ * A chosen card keeps its fill and takes a dark outline, the design's "outline
+ * as pressed" rule that Toggle follows too, so it reads on any surface.
+ */
+const inputCardSelectedStyles = cn("data-checked:border-foreground data-checked:shadow-none", "data-indeterminate:border-foreground data-indeterminate:shadow-none", "data-[selected=true]:border-foreground data-[selected=true]:shadow-none");
+/**
+ * Primitive selectable card used as the base for RadioCard and CheckboxCard.
+ *
+ * Purely presentational - the parent owns `selected` and click handling.
+ * Selection and disabled states are exposed as `data-selected`/`data-disabled`
+ * for styling.
+ *
+ * @bestPractice `InputCard` is a presentational primitive - the parent owns `selected` and click handling; for real form semantics use `RadioCardGroup`/`CheckboxCardGroup`, which build on it.
+ * @bestPractice Drive the selected look via the `selected` prop (it sets `data-selected` + the primary tint), not by appending your own active classes.
+ * @bestPractice Use `render` to project the card styling onto a real interactive element (e.g. a `<label>` wrapping an input) when you need native selection behaviour.
+ * @category forms
+ */
+const InputCard = ({ render, selected, disabled, size = "base", className, ref, ...props }) => {
+    const rootProps = {
+        className: cn(inputCardBaseStyles, inputCardSelectedStyles, inputCardSizeStyles[size], inputCardRadiusStyles[size], className),
+        "data-disabled": disabled === true ? true : undefined,
+        "data-selected": selected === true ? true : undefined,
+        ...props,
+    };
+    if (disabled !== undefined) {
+        Object.assign(rootProps, { disabled });
+    }
+    return useRender({
+        defaultTagName: "div",
+        props: rootProps,
+        ref,
+        render,
+    });
+};
+InputCard.displayName = "InputCard";
+export { getInputCardIconSize, INPUT_CARD_ICON_SIZE, InputCard, InputCardIcon, inputCardBaseStyles, inputCardSelectedStyles, inputCardSizeStyles, };

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

@@ -0,0 +1,2 @@
+export type { InputCardProps } from "./input-card/input-card-root.js";
+export { getInputCardIconSize, INPUT_CARD_ICON_SIZE, InputCard, InputCardIcon, inputCardBaseStyles, inputCardSelectedStyles, inputCardSizeStyles, } from "./input-card/input-card-root.js";

package/dist/components/input-card.js

@@ -0,0 +1 @@
+export { getInputCardIconSize, INPUT_CARD_ICON_SIZE, InputCard, InputCardIcon, inputCardBaseStyles, inputCardSelectedStyles, inputCardSizeStyles, } from "./input-card/input-card-root.js";

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

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { InputGroupAddonAlign, InputGroupAddonVariant } from "../input-group/input-group-types.js";
+export type InputGroupAddonProps = React.ComponentProps<"div"> & {
+    /** Alignment of the addon within the input group. */
+    align?: InputGroupAddonAlign;
+    /** Visual variant of the addon. */
+    variant?: InputGroupAddonVariant;
+};
+/**
+ * Addon element for InputGroup.
+ * Used for text labels, currency symbols, or icons.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupAddon variant="muted">$</InputGroupAddon>
+ *   <InputGroupInput placeholder="0.00" />
+ *   <InputGroupAddon align="inline-end" variant="muted">USD</InputGroupAddon>
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroupAddon: ({ className, align, variant, children, ...props }: InputGroupAddonProps) => React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+import { useInputGroup } from "../input-group/input-group-context.js";
+import { inputGroupAddonMutedVariants } from "../input-group/input-group-variants.js";
+/**
+ * Addon element for InputGroup.
+ * Used for text labels, currency symbols, or icons.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupAddon variant="muted">$</InputGroupAddon>
+ *   <InputGroupInput placeholder="0.00" />
+ *   <InputGroupAddon align="inline-end" variant="muted">USD</InputGroupAddon>
+ * </InputGroup>
+ * ```
+ */
+export const InputGroupAddon = ({ className, align = "inline-start", variant = "default", children, ...props }) => {
+    const { size } = useInputGroup();
+    if (variant === "muted") {
+        return (_jsx("div", { className: cn(inputGroupAddonMutedVariants({ align, size }), 
+            // Height adjustments for muted variant
+            align === "inline-start" && "h-full", align === "inline-end" && "h-full", className), "data-component": "input-group-addon", "data-slot": "input-group-addon", ...props, children: children }));
+    }
+    return (_jsx(Flex, { align: "center", className: cn("text-muted-foreground", 
+        // Position-based styling for default variant
+        align === "inline-start" && "order-first", align === "inline-end" && "order-last", align === "block-start" && "self-start", align === "block-end" && "self-end", className), "data-component": "input-group-addon", "data-slot": "input-group-addon", ...props, children: children }));
+};

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

@@ -0,0 +1,5 @@
+/**
+ * InputGroup component anatomy.
+ * Documents the composition structure for inputs with addons, icons, and buttons.
+ */
+export declare const inputGroupAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

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

@@ -0,0 +1,32 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * InputGroup component anatomy.
+ * Documents the composition structure for inputs with addons, icons, and buttons.
+ */
+export const inputGroupAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Decorative icon (typically at inline-start)",
+            label: "InputGroupIcon",
+            slot: "input-group-icon",
+        },
+        {
+            description: "Text or icon addon with alignment (inline-start, inline-end, block-start, block-end)",
+            label: "InputGroupAddon",
+            slot: "input-group-addon",
+        },
+        {
+            description: "The form control element (input or textarea)",
+            label: "InputGroupInput / InputGroupTextarea",
+            slot: "input-group-control",
+        },
+        {
+            description: "Action button (clear, copy, submit, etc.)",
+            label: "InputGroupButton",
+            slot: "input-group-button",
+        },
+    ],
+    description: "Composition container for inputs with addons, icons, and buttons",
+    label: "InputGroup",
+    slot: "input-group",
+});

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

@@ -0,0 +1,25 @@
+import type { LucideIcon } from "lucide-react";
+import type * as React from "react";
+import type { ButtonEmphasis, ButtonTone } from "../button.js";
+import { Button } from "../button.js";
+export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> & {
+    /** Icon to display. */
+    icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Button tone. */
+    tone?: ButtonTone;
+    /** Button emphasis. */
+    emphasis?: ButtonEmphasis;
+};
+/**
+ * Button element for use inside InputGroup.
+ * Automatically sizes based on InputGroup context.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupInput value={value} onChange={...} />
+ *   {value && <InputGroupButton icon={X} onClick={() => setValue("")} />}
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroupButton: ({ className, icon, tone, emphasis, disabled: disabledProp, children, ...props }: InputGroupButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Button } from "../button.js";
+import { useInputGroup } from "../input-group/input-group-context.js";
+import { inputGroupButtonVariants, inputGroupSizeToButtonSize, } from "../input-group/input-group-variants.js";
+/**
+ * Button element for use inside InputGroup.
+ * Automatically sizes based on InputGroup context.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup size="base">
+ *   <InputGroupInput value={value} onChange={...} />
+ *   {value && <InputGroupButton icon={X} onClick={() => setValue("")} />}
+ * </InputGroup>
+ * ```
+ */
+export const InputGroupButton = ({ className, icon, tone, emphasis = "ghost", disabled: disabledProp, children, ...props }) => {
+    const { size, radius, disabled: contextDisabled } = useInputGroup();
+    const disabled = disabledProp ?? contextDisabled;
+    const buttonSize = inputGroupSizeToButtonSize(size);
+    // SAFETY: Filter removes undefined values but preserves the prop keys and types
+    const filteredProps = Object.fromEntries(Object.entries(props).filter(([, v]) => v !== undefined));
+    return (_jsx(Button, { emphasis: emphasis, className: cn(
+        // Exact height for consistent 2px gap, pulled towards the edge
+        inputGroupButtonVariants({ size: size ?? undefined }), 
+        // Nested radius: tighter corners for buttons inside inputs
+        radius === "full" ? "rounded-full" : "rounded-sm", className), "data-component": "input-group-button", "data-slot": "input-group-button", disabled: disabled, icon: icon, radius: "square", size: buttonSize, square: true, tone: tone, ...filteredProps, children: children }));
+};

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

@@ -0,0 +1,20 @@
+import type { Radius } from "../../tokens/radius.js";
+import type { InputGroupSize } from "../input-group/input-group-types.js";
+interface InputGroupContextValue {
+    disabled: boolean;
+    hasError: boolean;
+    radius: Radius;
+    size: InputGroupSize;
+}
+declare const InputGroupContext: import("react").Context<InputGroupContextValue | null>;
+/**
+ * Hook to access InputGroup context.
+ * Throws if used outside of InputGroup.
+ */
+export declare const useInputGroup: () => InputGroupContextValue;
+/**
+ * Hook to optionally access InputGroup context.
+ * Returns null if used outside of InputGroup.
+ */
+export declare const useOptionalInputGroup: () => InputGroupContextValue | null;
+export { InputGroupContext };

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

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, use } from "react";
+const InputGroupContext = createContext(null);
+/**
+ * Hook to access InputGroup context.
+ * Throws if used outside of InputGroup.
+ */
+export const useInputGroup = () => {
+    const context = use(InputGroupContext);
+    if (!context) {
+        throw new Error("InputGroup components must be used within InputGroup");
+    }
+    return context;
+};
+/**
+ * Hook to optionally access InputGroup context.
+ * Returns null if used outside of InputGroup.
+ */
+export const useOptionalInputGroup = () => use(InputGroupContext);
+export { InputGroupContext };

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

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+import type * as React from "react";
+export type InputGroupIconProps = Omit<React.SVGProps<SVGSVGElement>, "strokeWidth"> & {
+    /** Icon component from lucide-react or any SVG React component. */
+    icon: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+/**
+ * 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 declare const InputGroupIcon: ({ icon, className, ...props }: InputGroupIconProps) => React.JSX.Element;