@epilot/spark-ui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/components/accordion.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/accordion.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {

package/dist/components/bar-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

package/dist/components/bubble.d.cts

@@ -12,7 +12,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "ghost" | "outline" | "secondary" | "destructive" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -12,7 +12,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "ghost" | "outline" | "secondary" | "destructive" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -10,8 +10,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  color?: "accent" | "neutral" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends React$1.ComponentProps<typeof Button$1>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/button.d.ts

@@ -10,8 +10,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  color?: "accent" | "neutral" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends React$1.ComponentProps<typeof Button$1>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/callout.d.cts

@@ -9,7 +9,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "info" | "warning" | "success" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {}
 declare const CalloutTitle: ({

package/dist/components/callout.d.ts

@@ -9,7 +9,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "info" | "warning" | "success" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {}
 declare const CalloutTitle: ({

package/dist/components/info-block.d.cts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/info-block.d.ts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/input-group.cjs

@@ -147,14 +147,15 @@ function InputGroupText({ className, ...props }) {
 		...props
 	});
 }
-function InputGroupInput({ className, ...props }) {
+const InputGroupInput = react.forwardRef(function InputGroupInput({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input.Input, {
 		"data-slot": "input",
 		variant: "none",
 		className: (0, cnfast.cn)("flex-1", className),
+		ref,
 		...props
 	});
-}
+});
 //#endregion
 exports.InputGroup = InputGroup;
 exports.InputGroupAddon = InputGroupAddon;

package/dist/components/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({ className, ...props }: InputProps) {\n  return (\n    <Input\n      data-slot=\"input\"\n      variant=\"none\"\n      className={cn('flex-1', className)}\n      {...props}\n    />\n  )\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,sBAAA,GAAA,yBAAA,KACJ,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,iBAAiB;CAC/B,MAAM,QAAQC,cAAAA,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAqB;AAC5D,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;EAClC,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","React","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,sBAAA,GAAA,yBAAA,KACJ,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,iBAAiB;CAC/B,MAAM,QAAQC,cAAAA,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,kBAAkBC,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;AACrD,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;EAC7B;EACL,GAAI;EACJ,CAAA;EAGP"}

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

@@ -12,7 +12,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,
@@ -23,10 +23,7 @@ declare function InputGroupText({
   className,
   ...props
 }: React$1.ComponentProps<'span'>): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupInput({
-  className,
-  ...props
-}: InputProps): _$react_jsx_runtime0.JSX.Element;
+declare const InputGroupInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
 //# sourceMappingURL=input-group.d.cts.map

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

@@ -12,7 +12,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,
@@ -23,10 +23,7 @@ declare function InputGroupText({
   className,
   ...props
 }: React$1.ComponentProps<'span'>): _$react_jsx_runtime0.JSX.Element;
-declare function InputGroupInput({
-  className,
-  ...props
-}: InputProps): _$react_jsx_runtime0.JSX.Element;
+declare const InputGroupInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
 //# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group.js

@@ -4,7 +4,7 @@ import { cn } from "../utils/cn.js";
 import { n as useTheme } from "../theme-8PDO9E0S.js";
 import { useFieldContext } from "./field.js";
 import { Input } from "./input.js";
-import "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/input-group.tsx
@@ -144,14 +144,15 @@ function InputGroupText({ className, ...props }) {
 		...props
 	});
 }
-function InputGroupInput({ className, ...props }) {
+const InputGroupInput = React$1.forwardRef(function InputGroupInput({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Input, {
 		"data-slot": "input",
 		variant: "none",
 		className: cn("flex-1", className),
+		ref,
 		...props
 	});
-}
+});
 //#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
 

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({ className, ...props }: InputProps) {\n  return (\n    <Input\n      data-slot=\"input\"\n      variant=\"none\"\n      className={cn('flex-1', className)}\n      {...props}\n    />\n  )\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,qBAAqB,IACzB,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAqB;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,UAAU;EAClC,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input-group.js","names":["React"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n  'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n  'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; the group keeps the\n        // classic underline (inputs inside stay chrome-less)\n        inset: GHOST,\n        // h-11 matches the standalone Input box\n        box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        // invalid hover deepens the error tint instead of the accent hover\n        class:\n          'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class:\n          'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class:\n          'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: ['surface', 'outlined'],\n        class:\n          'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class:\n          'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class:\n          'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class:\n          'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class:\n          'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n      },\n      { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: 'border-b-input',\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: 'border-b-input-gray',\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  const field = useFieldContext()\n  const theme = useTheme()\n  const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n  const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        inputGroupVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n  {\n    variants: {\n      align: {\n        // button addons bring their own inner padding — pull them halfway\n        // into the group's px so the visual gap matches the text side\n        'inline-start': 'order-first has-[>button]:-ml-2',\n        'inline-end': 'order-last has-[>button]:-mr-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n)\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest('button')) return\n        event.currentTarget.parentElement?.querySelector('input')?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        data-slot=\"input\"\n        variant=\"none\"\n        className={cn('flex-1', className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,qBAAqB,IACzB,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;AACrD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,UAAU;EAC7B;EACL,GAAI;EACJ,CAAA;EAGP"}

package/dist/components/input-otp.cjs

@@ -86,7 +86,7 @@ const slotVariants = (0, class_variance_authority.cva)("flex w-11 min-w-0 items-
 		}
 	]
 });
-function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
+function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({ id: idProp });
 	const chrome = field?.labelPosition === "inset" ? "inset" : "box";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPField.Root, {
@@ -97,7 +97,7 @@ function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
 		className: (0, cnfast.cn)("flex items-center gap-2", className),
 		...props,
 		children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPField.Input, {
-			"aria-label": index === 0 ? void 0 : `Digit ${index + 1}`,
+			"aria-label": index === 0 ? void 0 : slotAriaLabel(index),
 			"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
 			className: slotVariants({
 				chrome,

package/dist/components/input-otp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : `Digit ${index + 1}`}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAYD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,SAAS,QAAQ;GACvD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}
+{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Digit ${index + 1}`,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAcD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,MAAM;GAC1D,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}

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

@@ -9,12 +9,15 @@ interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue'
   length?: number;
   /** Fired when every slot is filled. */
   onComplete?: OTPFieldRootProps['onValueComplete'];
+  /** Accessible name per slot (for localization). */
+  slotAriaLabel?: (index: number) => string;
 }
 declare function InputOtp({
   length,
   className,
   id: idProp,
   onComplete,
+  slotAriaLabel,
   ...props
 }: InputOtpProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion

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

@@ -9,12 +9,15 @@ interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue'
   length?: number;
   /** Fired when every slot is filled. */
   onComplete?: OTPFieldRootProps['onValueComplete'];
+  /** Accessible name per slot (for localization). */
+  slotAriaLabel?: (index: number) => string;
 }
 declare function InputOtp({
   length,
   className,
   id: idProp,
   onComplete,
+  slotAriaLabel,
   ...props
 }: InputOtpProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/input-otp.js

@@ -84,7 +84,7 @@ const slotVariants = cva("flex w-11 min-w-0 items-center justify-center bg-trans
 		}
 	]
 });
-function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
+function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({ id: idProp });
 	const chrome = field?.labelPosition === "inset" ? "inset" : "box";
 	return /* @__PURE__ */ jsx(OTPField.Root, {
@@ -95,7 +95,7 @@ function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
 		className: cn("flex items-center gap-2", className),
 		...props,
 		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
-			"aria-label": index === 0 ? void 0 : `Digit ${index + 1}`,
+			"aria-label": index === 0 ? void 0 : slotAriaLabel(index),
 			"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
 			className: slotVariants({
 				chrome,

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : `Digit ${index + 1}`}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAYD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,SAAS,QAAQ;GACvD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Digit ${index + 1}`,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAcD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,MAAM;GAC1D,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}

package/dist/components/input.cjs

@@ -88,7 +88,7 @@ const inputVariants = (0, class_variance_authority.cva)("flex h-10 w-full min-w-
 		}
 	]
 });
-function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }) {
+const Input = react.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({
 		id: idProp,
 		ariaDescribedBy: ariaDescribedByProp,
@@ -102,10 +102,11 @@ function Input({ variant, className, id: idProp, "aria-describedby": ariaDescrib
 			inputColor
 		}), className),
 		id,
+		ref,
 		...props,
 		"aria-describedby": ariaDescribedBy
 	});
-}
+});
 //#endregion
 exports.Input = Input;
 

package/dist/components/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n  'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        // inside an inset field the shell is the box; the input keeps the\n        // classic underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n  variant?: InputVariant\n}\n\nfunction Input({\n  variant,\n  className,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: InputProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant: variant !== 'none' ? variant : undefined,\n    })\n  // an explicit variant prop keeps the box even inside an inset field\n  const chrome =\n    variant === 'none'\n      ? 'none'\n      : !variant && field?.labelPosition === 'inset'\n        ? 'inset'\n        : 'box'\n\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      id={id}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n}\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,iBAAA,GAAA,yBAAA,KACJ,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAMD,SAAS,MAAM,EACb,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SACU;CACb,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACJ,GAAI;EACJ,oBAAkB;EAClB,CAAA"}
+{"version":3,"file":"input.cjs","names":["GHOST_UNDERLINE","boxChrome","React","useFieldControl"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n  'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        // inside an inset field the shell is the box; the input keeps the\n        // classic underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n  variant?: InputVariant\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    variant,\n    className,\n    id: idProp,\n    'aria-describedby': ariaDescribedByProp,\n    ...props\n  },\n  ref,\n) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant: variant !== 'none' ? variant : undefined,\n    })\n  // an explicit variant prop keeps the box even inside an inset field\n  const chrome =\n    variant === 'none'\n      ? 'none'\n      : !variant && field?.labelPosition === 'inset'\n        ? 'inset'\n        : 'box'\n\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      id={id}\n      ref={ref}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,iBAAA,GAAA,yBAAA,KACJ,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAOD,MAAM,QAAQC,MAAM,WAAyC,SAAS,MACpE,EACE,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACC;EACL,GAAI;EACJ,oBAAkB;EAClB,CAAA;EAEJ"}

package/dist/components/input.d.cts

@@ -1,7 +1,6 @@
 "use client";
 
 import { i as SparkInputStyle } from "../theme-types-BwSJKdsB.cjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts
@@ -9,13 +8,7 @@ type InputVariant = SparkInputStyle | 'none';
 interface InputProps extends React$1.ComponentProps<'input'> {
   variant?: InputVariant;
 }
-declare function Input({
-  variant,
-  className,
-  id: idProp,
-  'aria-describedby': ariaDescribedByProp,
-  ...props
-}: InputProps): _$react_jsx_runtime0.JSX.Element;
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Input, type InputProps, type InputVariant };
 //# sourceMappingURL=input.d.cts.map

package/dist/components/input.d.ts

@@ -2,20 +2,13 @@
 
 import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/input.d.ts
 type InputVariant = SparkInputStyle | 'none';
 interface InputProps extends React$1.ComponentProps<'input'> {
   variant?: InputVariant;
 }
-declare function Input({
-  variant,
-  className,
-  id: idProp,
-  'aria-describedby': ariaDescribedByProp,
-  ...props
-}: InputProps): _$react_jsx_runtime0.JSX.Element;
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Input, type InputProps, type InputVariant };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input.js

@@ -2,7 +2,7 @@
 import { cn } from "../utils/cn.js";
 import { useFieldControl } from "./field.js";
 import { n as boxChrome, t as GHOST_UNDERLINE } from "../input-box-variants-DcajYXvo.js";
-import "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/input.tsx
@@ -85,7 +85,7 @@ const inputVariants = cva("flex h-10 w-full min-w-0 [appearance:textfield] bg-tr
 		}
 	]
 });
-function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }) {
+const Input = React$1.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({
 		id: idProp,
 		ariaDescribedBy: ariaDescribedByProp,
@@ -99,10 +99,11 @@ function Input({ variant, className, id: idProp, "aria-describedby": ariaDescrib
 			inputColor
 		}), className),
 		id,
+		ref,
 		...props,
 		"aria-describedby": ariaDescribedBy
 	});
-}
+});
 //#endregion
 export { Input };