@epilot/spark-ui 0.10.0

package/dist/components/input-group.cjs

@@ -0,0 +1,165 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_theme = require("./theme.cjs");
+const require_components_field = require("./field.cjs");
+const require_components_input = require("./input.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let cnfast = require("cnfast");
+//#region src/components/input-group.tsx
+const GHOST = "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!";
+const inputGroupVariants = (0, class_variance_authority.cva)("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", {
+	variants: {
+		chrome: {
+			inset: GHOST,
+			box: "h-11 rounded-lg px-3 transition-all motion-reduce:transition-none"
+		},
+		inputStyle: {
+			soft: "",
+			surface: "",
+			outlined: "",
+			ghost: ""
+		},
+		inputColor: {
+			brand: "",
+			gray: ""
+		}
+	},
+	compoundVariants: [
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			class: "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"
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "brand",
+			class: "bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover"
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: "bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: ["surface", "outlined"],
+			class: "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!"
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: "border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: "border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: "border-input focus-within:border-input-active focus-within:ring-spark-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: "border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			class: GHOST
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		},
+		{
+			chrome: "inset",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "inset",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		}
+	]
+});
+function InputGroup({ className, ...props }) {
+	const field = require_components_field.useFieldContext();
+	const theme = require_components_theme.useTheme();
+	const inputStyle = field?.inputStyle ?? theme.inputStyle ?? "soft";
+	const inputColor = field?.inputColor ?? theme.inputColor ?? "brand";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: (0, cnfast.cn)(inputGroupVariants({
+			chrome: field?.labelPosition === "inset" ? "inset" : "box",
+			inputStyle,
+			inputColor
+		}), className),
+		...props
+	});
+}
+const inputGroupAddonVariants = (0, class_variance_authority.cva)("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", {
+	variants: { align: {
+		"inline-start": "order-first has-[>button]:-ml-2",
+		"inline-end": "order-last has-[>button]:-mr-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: (0, cnfast.cn)(inputGroupAddonVariants({ align }), className),
+		onClick: (event) => {
+			if (event.target.closest("button")) return;
+			event.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4", 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;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+
+//# sourceMappingURL=input-group.cjs.map

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

@@ -0,0 +1 @@
+{"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;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,gBAAgB;CAC9B,MAAM,QAAQC,yBAAAA,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBC,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { InputProps } from "./input.cjs";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/input-group.d.ts
+declare function InputGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").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

@@ -0,0 +1,27 @@
+"use client";
+
+import { InputProps } from "./input.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/input-group.d.ts
+declare function InputGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").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

@@ -0,0 +1,159 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { useTheme } from "./theme.js";
+import { useFieldContext } from "./field.js";
+import { Input } from "./input.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input-group.tsx
+const GHOST = "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!";
+const inputGroupVariants = cva("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", {
+	variants: {
+		chrome: {
+			inset: GHOST,
+			box: "h-11 rounded-lg px-3 transition-all motion-reduce:transition-none"
+		},
+		inputStyle: {
+			soft: "",
+			surface: "",
+			outlined: "",
+			ghost: ""
+		},
+		inputColor: {
+			brand: "",
+			gray: ""
+		}
+	},
+	compoundVariants: [
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			class: "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"
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "brand",
+			class: "bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover"
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: "bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: ["surface", "outlined"],
+			class: "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!"
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: "border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: "border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: "border-input focus-within:border-input-active focus-within:ring-spark-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: "border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4"
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			class: GHOST
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		},
+		{
+			chrome: "inset",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "inset",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		}
+	]
+});
+function InputGroup({ className, ...props }) {
+	const field = useFieldContext();
+	const theme = useTheme();
+	const inputStyle = field?.inputStyle ?? theme.inputStyle ?? "soft";
+	const inputColor = field?.inputColor ?? theme.inputColor ?? "brand";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn(inputGroupVariants({
+			chrome: field?.labelPosition === "inset" ? "inset" : "box",
+			inputStyle,
+			inputColor
+		}), className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("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", {
+	variants: { align: {
+		"inline-start": "order-first has-[>button]:-ml-2",
+		"inline-end": "order-last has-[>button]:-mr-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (event) => {
+			if (event.target.closest("button")) return;
+			event.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4", 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 };
+
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"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;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,UAAU;GAClC,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;EACJ;EACA;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAM;EACnD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;EACT;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAKA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAE5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;EAAW,CAAC,GACrD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;CAChB,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,UAAU;GAClB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;GACrD,MAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,SAAS;EAC5B;EACL,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/input-otp.cjs

@@ -0,0 +1,112 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let _base_ui_react_otp_field = require("@base-ui/react/otp-field");
+let cnfast = require("cnfast");
+//#region src/components/input-otp.tsx
+const slotVariants = (0, class_variance_authority.cva)("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", {
+	variants: {
+		chrome: {
+			inset: require_lib_input_box_variants.GHOST_UNDERLINE,
+			box: "h-11 rounded-lg"
+		},
+		inputStyle: {
+			soft: "",
+			surface: "",
+			outlined: "",
+			ghost: ""
+		},
+		inputColor: {
+			brand: "",
+			gray: ""
+		}
+	},
+	compoundVariants: [
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "brand",
+			class: require_lib_input_box_variants.boxChrome.soft.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: require_lib_input_box_variants.boxChrome.soft.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: require_lib_input_box_variants.boxChrome.surface.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: require_lib_input_box_variants.boxChrome.surface.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: require_lib_input_box_variants.boxChrome.outlined.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: require_lib_input_box_variants.boxChrome.outlined.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: require_lib_input_box_variants.boxChrome.ghost.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: require_lib_input_box_variants.boxChrome.ghost.gray
+		},
+		{
+			chrome: "inset",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "inset",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		}
+	]
+});
+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, {
+		"data-slot": "input-otp",
+		length,
+		id,
+		onValueComplete: onComplete,
+		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 : slotAriaLabel(index),
+			"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
+			className: slotVariants({
+				chrome,
+				inputStyle,
+				inputColor
+			})
+		}, index))
+	});
+}
+//#endregion
+exports.InputOtp = InputOtp;
+
+//# sourceMappingURL=input-otp.cjs.map

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

@@ -0,0 +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  /** 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,+BAAAA;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAcA,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,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,KAAK;GACzD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GANM,KAMN,CACF;CACY,CAAA;AAEnB"}

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { OTPFieldRootProps } from "@base-ui/react/otp-field";
+
+//#region src/components/input-otp.d.ts
+interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'> {
+  /** Number of code slots. */
+  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): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { InputOtp, type InputOtpProps };
+//# sourceMappingURL=input-otp.d.cts.map

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { OTPFieldRootProps } from "@base-ui/react/otp-field";
+
+//#region src/components/input-otp.d.ts
+interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'> {
+  /** Number of code slots. */
+  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): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { InputOtp, type InputOtpProps };
+//# sourceMappingURL=input-otp.d.ts.map