@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.3

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

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/info-block.d.ts
+declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+  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>>;
+declare const InfoBlockHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const InfoBlockTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const InfoBlockLabel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const InfoBlockDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const InfoBlockValue: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { InfoBlock, InfoBlockContent, InfoBlockDescription, InfoBlockHeader, InfoBlockIcon, InfoBlockLabel, InfoBlockTitle, InfoBlockValue };
+//# sourceMappingURL=info-block.d.ts.map

package/dist/components/info-block.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/info-block.tsx
+const infoBlockVariants = cva("flex items-center gap-3", {
+	variants: { variant: {
+		default: "rounded-2xl border border-gray p-4",
+		bare: "rounded-none border-none"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const InfoBlock = React$1.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn(infoBlockVariants({ variant }), className),
+	ref,
+	...props
+}));
+InfoBlock.displayName = "InfoBlock";
+const InfoBlockIcon = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl", className),
+	ref,
+	...props
+}));
+InfoBlockIcon.displayName = "InfoBlockIcon";
+const InfoBlockContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-2", className),
+	ref,
+	...props
+}));
+InfoBlockContent.displayName = "InfoBlockContent";
+const InfoBlockHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center justify-between gap-2", className),
+	ref,
+	...props
+}));
+InfoBlockHeader.displayName = "InfoBlockHeader";
+const InfoBlockTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-sm font-medium text-gray", className),
+	ref,
+	...props
+}));
+InfoBlockTitle.displayName = "InfoBlockTitle";
+const InfoBlockLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-xs font-medium text-gray-light", className),
+	ref,
+	...props
+}));
+InfoBlockLabel.displayName = "InfoBlockLabel";
+const InfoBlockDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-xs text-gray-light", className),
+	ref,
+	...props
+}));
+InfoBlockDescription.displayName = "InfoBlockDescription";
+const InfoBlockValue = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-lg font-bold text-gray tabular-nums", className),
+	ref,
+	...props
+}));
+InfoBlockValue.displayName = "InfoBlockValue";
+//#endregion
+export { InfoBlock, InfoBlockContent, InfoBlockDescription, InfoBlockHeader, InfoBlockIcon, InfoBlockLabel, InfoBlockTitle, InfoBlockValue };
+
+//# sourceMappingURL=info-block.js.map

package/dist/components/info-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-block.js","names":["React"],"sources":["../../src/components/info-block.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst infoBlockVariants = cva('flex items-center gap-3', {\n  variants: {\n    variant: {\n      default: 'rounded-2xl border border-gray p-4',\n      bare: 'rounded-none border-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst InfoBlock = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof infoBlockVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    className={cn(infoBlockVariants({ variant }), className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlock.displayName = 'InfoBlock'\n\nconst InfoBlockIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex size-10 shrink-0 items-center justify-center rounded-xl',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockIcon.displayName = 'InfoBlockIcon'\n\nconst InfoBlockContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex min-w-0 flex-1 flex-col gap-2', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockContent.displayName = 'InfoBlockContent'\n\nconst InfoBlockHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center justify-between gap-2', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockHeader.displayName = 'InfoBlockHeader'\n\nconst InfoBlockTitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    className={cn('text-sm font-medium text-gray', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockTitle.displayName = 'InfoBlockTitle'\n\nconst InfoBlockLabel = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    className={cn('text-xs font-medium text-gray-light', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockLabel.displayName = 'InfoBlockLabel'\n\nconst InfoBlockDescription = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    className={cn('text-xs text-gray-light', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockDescription.displayName = 'InfoBlockDescription'\n\nconst InfoBlockValue = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    className={cn('text-lg font-bold text-gray tabular-nums', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nInfoBlockValue.displayName = 'InfoBlockValue'\n\nexport {\n  InfoBlock,\n  InfoBlockContent,\n  InfoBlockDescription,\n  InfoBlockHeader,\n  InfoBlockIcon,\n  InfoBlockLabel,\n  InfoBlockTitle,\n  InfoBlockValue,\n}\n"],"mappings":";;;;;;AAIA,MAAM,oBAAoB,IAAI,2BAA2B;CACvD,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACE,WAAW,GAAG,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;CACnD;CACL,GAAI;CACJ,CAAA,CACF;AAEF,UAAU,cAAc;AAExB,MAAM,gBAAgBA,QAAM,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,gEACA,UACD;CACI;CACL,GAAI;CACJ,CAAA,CACF;AAEF,cAAc,cAAc;AAE5B,MAAM,mBAAmBA,QAAM,YAG5B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,sCAAsC,UAAU;CACzD;CACL,GAAI;CACJ,CAAA,CACF;AAEF,iBAAiB,cAAc;AAE/B,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2CAA2C,UAAU;CAC9D;CACL,GAAI;CACJ,CAAA,CACF;AAEF,gBAAgB,cAAc;AAE9B,MAAM,iBAAiBA,QAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACE,WAAW,GAAG,iCAAiC,UAAU;CACpD;CACL,GAAI;CACJ,CAAA,CACF;AAEF,eAAe,cAAc;AAE7B,MAAM,iBAAiBA,QAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACE,WAAW,GAAG,uCAAuC,UAAU;CAC1D;CACL,GAAI;CACJ,CAAA,CACF;AAEF,eAAe,cAAc;AAE7B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACE,WAAW,GAAG,2BAA2B,UAAU;CAC9C;CACL,GAAI;CACJ,CAAA,CACF;AAEF,qBAAqB,cAAc;AAEnC,MAAM,iBAAiBA,QAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACE,WAAW,GAAG,4CAA4C,UAAU;CAC/D;CACL,GAAI;CACJ,CAAA,CACF;AAEF,eAAe,cAAc"}

package/dist/components/input-group.cjs

@@ -0,0 +1,164 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_theme = require("../theme-C9_OSe0S.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_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
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input.Input, {
+		"data-slot": "input",
+		variant: "none",
+		className: (0, cnfast.cn)("flex-1", className),
+		...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","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"}

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

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

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

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

package/dist/components/input-group.js

@@ -0,0 +1,158 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { n as useTheme } from "../theme-B3WtiByA.js";
+import { useFieldContext } from "./field.js";
+import { Input } from "./input.js";
+import "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
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input",
+		variant: "none",
+		className: cn("flex-1", className),
+		...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":[],"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"}

package/dist/components/input-otp.cjs

@@ -0,0 +1,113 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_components_field = require("./field.cjs");
+const require_input_box_variants = require("../input-box-variants-BMDdwvqg.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_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_input_box_variants.boxChrome.soft.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: require_input_box_variants.boxChrome.soft.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: require_input_box_variants.boxChrome.surface.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: require_input_box_variants.boxChrome.surface.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: require_input_box_variants.boxChrome.outlined.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: require_input_box_variants.boxChrome.outlined.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: require_input_box_variants.boxChrome.ghost.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: require_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, ...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 : `Digit ${index + 1}`,
+			"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}\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"}