@epilot/spark-ui 0.10.0

package/dist/components/input-otp.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/input-otp.tsx
+const slotVariants = 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: GHOST_UNDERLINE,
+			box: "h-11 rounded-lg"
+		},
+		inputStyle: {
+			soft: "",
+			surface: "",
+			outlined: "",
+			ghost: ""
+		},
+		inputColor: {
+			brand: "",
+			gray: ""
+		}
+	},
+	compoundVariants: [
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "brand",
+			class: boxChrome.soft.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: boxChrome.soft.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: boxChrome.surface.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: boxChrome.surface.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: boxChrome.outlined.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: boxChrome.outlined.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: boxChrome.ghost.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: 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 } = useFieldControl({ id: idProp });
+	const chrome = field?.labelPosition === "inset" ? "inset" : "box";
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		"data-slot": "input-otp",
+		length,
+		id,
+		onValueComplete: onComplete,
+		className: cn("flex items-center gap-2", className),
+		...props,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
+			"aria-label": index === 0 ? void 0 : slotAriaLabel(index),
+			"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
+			className: slotVariants({
+				chrome,
+				inputStyle,
+				inputColor
+			})
+		}, index))
+	});
+}
+//#endregion
+export { InputOtp };
+
+//# sourceMappingURL=input-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Digit ${index + 1}`,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;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,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,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,eAC9C,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,oBAAC,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.cjs

@@ -0,0 +1,113 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.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.tsx
+const inputVariants = (0, class_variance_authority.cva)("flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+	variants: {
+		chrome: {
+			none: "border-0 px-0",
+			inset: require_lib_input_box_variants.GHOST_UNDERLINE,
+			box: "h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none"
+		},
+		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"
+		}
+	]
+});
+const Input = react.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
+	const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({
+		id: idProp,
+		ariaDescribedBy: ariaDescribedByProp,
+		variant: variant !== "none" ? variant : void 0
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		"data-slot": "input",
+		className: (0, cnfast.cn)(inputVariants({
+			chrome: variant === "none" ? "none" : !variant && field?.labelPosition === "inset" ? "inset" : "box",
+			inputStyle,
+			inputColor
+		}), className),
+		id,
+		ref,
+		...props,
+		"aria-describedby": ariaDescribedBy
+	});
+});
+//#endregion
+exports.Input = Input;
+
+//# sourceMappingURL=input.cjs.map

package/dist/components/input.cjs.map

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

package/dist/components/input.d.cts

@@ -0,0 +1,14 @@
+"use client";
+
+import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+
+//#region src/components/input.d.ts
+type InputVariant = SparkInputStyle | 'none';
+interface InputProps extends React$1.ComponentProps<'input'> {
+  variant?: InputVariant;
+}
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Input, type InputProps, type InputVariant };
+//# sourceMappingURL=input.d.cts.map

package/dist/components/input.d.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+
+//#region src/components/input.d.ts
+type InputVariant = SparkInputStyle | 'none';
+interface InputProps extends React$1.ComponentProps<'input'> {
+  variant?: InputVariant;
+}
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Input, type InputProps, type InputVariant };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input.tsx
+const inputVariants = cva("flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+	variants: {
+		chrome: {
+			none: "border-0 px-0",
+			inset: GHOST_UNDERLINE,
+			box: "h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none"
+		},
+		inputStyle: {
+			soft: "",
+			surface: "",
+			outlined: "",
+			ghost: ""
+		},
+		inputColor: {
+			brand: "",
+			gray: ""
+		}
+	},
+	compoundVariants: [
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "brand",
+			class: boxChrome.soft.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "soft",
+			inputColor: "gray",
+			class: boxChrome.soft.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "brand",
+			class: boxChrome.surface.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "surface",
+			inputColor: "gray",
+			class: boxChrome.surface.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "brand",
+			class: boxChrome.outlined.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "outlined",
+			inputColor: "gray",
+			class: boxChrome.outlined.gray
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "brand",
+			class: boxChrome.ghost.brand
+		},
+		{
+			chrome: "box",
+			inputStyle: "ghost",
+			inputColor: "gray",
+			class: boxChrome.ghost.gray
+		},
+		{
+			chrome: "inset",
+			inputColor: "brand",
+			class: "border-b-input"
+		},
+		{
+			chrome: "inset",
+			inputColor: "gray",
+			class: "border-b-input-gray"
+		}
+	]
+});
+const Input = React$1.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
+	const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({
+		id: idProp,
+		ariaDescribedBy: ariaDescribedByProp,
+		variant: variant !== "none" ? variant : void 0
+	});
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": "input",
+		className: cn(inputVariants({
+			chrome: variant === "none" ? "none" : !variant && field?.labelPosition === "inset" ? "inset" : "box",
+			inputStyle,
+			inputColor
+		}), className),
+		id,
+		ref,
+		...props,
+		"aria-describedby": ariaDescribedBy
+	});
+});
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["React"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n  'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        // inside an inset field the shell is the box; the input keeps the\n        // classic underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n  variant?: InputVariant\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    variant,\n    className,\n    id: idProp,\n    'aria-describedby': ariaDescribedByProp,\n    ...props\n  },\n  ref,\n) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant: variant !== 'none' ? variant : undefined,\n    })\n  // an explicit variant prop keeps the box even inside an inset field\n  const chrome =\n    variant === 'none'\n      ? 'none'\n      : !variant && field?.labelPosition === 'inset'\n        ? 'inset'\n        : 'box'\n\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      id={id}\n      ref={ref}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,IACpB,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAO;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,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAOA,MAAM,QAAQA,QAAM,WAAyC,SAAS,MACpE,EACE,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;CAC1C,CAAC;CASH,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;EAAW,CAAC,GAChD,SACF;EACI;EACC;EACL,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CAAC"}

package/dist/components/label.cjs

@@ -0,0 +1,18 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/label.tsx
+const Label = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+	className: (0, cnfast.cn)("text-sm leading-5 font-normal text-gray-light", className),
+	ref,
+	...props
+}));
+Label.displayName = "Label";
+//#endregion
+exports.Label = Label;
+
+//# sourceMappingURL=label.cjs.map

package/dist/components/label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.cjs","names":["React"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <label\n      className={cn('text-sm leading-5 font-normal text-gray-light', className)}\n      ref={ref}\n      {...props}\n    />\n  ),\n)\n\nLabel.displayName = 'Label'\n\nexport { Label }\nexport type { LabelProps }\n"],"mappings":";;;;;;;;AAKA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,GAAG,SAAS,QACxB,iBAAA,GAAA,kBAAA,KAAC,SAAD;CACE,YAAA,GAAA,OAAA,IAAc,iDAAiD,SAAS;CACnE;CACL,GAAI;AACL,CAAA,CAEL;AAEA,MAAM,cAAc"}

package/dist/components/label.d.cts

@@ -0,0 +1,10 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/label.d.ts
+interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {}
+declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { Label, type LabelProps };
+//# sourceMappingURL=label.d.cts.map

package/dist/components/label.d.ts

@@ -0,0 +1,10 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/label.d.ts
+interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {}
+declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { Label, type LabelProps };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.js

@@ -0,0 +1,15 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/label.tsx
+const Label = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("label", {
+	className: cn("text-sm leading-5 font-normal text-gray-light", className),
+	ref,
+	...props
+}));
+Label.displayName = "Label";
+//#endregion
+export { Label };
+
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":["React"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <label\n      className={cn('text-sm leading-5 font-normal text-gray-light', className)}\n      ref={ref}\n      {...props}\n    />\n  ),\n)\n\nLabel.displayName = 'Label'\n\nexport { Label }\nexport type { LabelProps }\n"],"mappings":";;;;;AAKA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,SAAD;CACE,WAAW,GAAG,iDAAiD,SAAS;CACnE;CACL,GAAI;AACL,CAAA,CAEL;AAEA,MAAM,cAAc"}

package/dist/components/layout.cjs

@@ -0,0 +1,14 @@
+"use client";
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/layout.tsx
+const PageContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("mx-auto flex w-full flex-col gap-[calc(var(--spark-layout-gap)*4)] md:max-w-152", className),
+		...rest
+	});
+};
+//#endregion
+module.exports = PageContainer;
+
+//# sourceMappingURL=layout.cjs.map

package/dist/components/layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.cjs","names":[],"sources":["../../src/components/layout.tsx"],"sourcesContent":["import type React from 'react'\nimport { cn } from '../utils/cn'\n\nconst PageContainer = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'mx-auto flex w-full flex-col gap-[calc(var(--spark-layout-gap)*4)] md:max-w-152',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default PageContainer\n"],"mappings":";;;;AAGA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/layout.d.cts

@@ -0,0 +1,11 @@
+"use client";
+
+import React from "react";
+
+//#region src/components/layout.d.ts
+declare const PageContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+export = PageContainer;
+//# sourceMappingURL=layout.d.cts.map

package/dist/components/layout.d.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+
+//#region src/components/layout.d.ts
+declare const PageContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PageContainer as default };
+//# sourceMappingURL=layout.d.ts.map

package/dist/components/layout.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout.tsx
+const PageContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mx-auto flex w-full flex-col gap-[calc(var(--spark-layout-gap)*4)] md:max-w-152", className),
+		...rest
+	});
+};
+//#endregion
+export { PageContainer as default };
+
+//# sourceMappingURL=layout.js.map

package/dist/components/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../src/components/layout.tsx"],"sourcesContent":["import type React from 'react'\nimport { cn } from '../utils/cn'\n\nconst PageContainer = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'mx-auto flex w-full flex-col gap-[calc(var(--spark-layout-gap)*4)] md:max-w-152',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default PageContainer\n"],"mappings":";;;;AAGA,MAAM,iBAAiB,EAAE,WAAW,GAAG,WAAwC;CAC7E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}