@epilot/spark-ui 0.18.2 → 0.20.0

package/dist/components/hero-metric.d.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { Tone } from "../lib/tones.js";
+
+//#region src/components/hero-metric.d.ts
+declare const HeroMetric: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValue: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValueUnit: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit };
+//# sourceMappingURL=hero-metric.d.ts.map

package/dist/components/{feed-in-hero.js → hero-metric.js}

@@ -2,18 +2,14 @@
 import { cn } from "../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/feed-in-hero.tsx
-const FeedInHero = ({ className, ...rest }) => {
+//#region src/components/hero-metric.tsx
+const HeroMetric = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center", className),
 		...rest
 	});
 };
-/**
-* Label row above the value. Lays out children in a flex row with a small
-* gap so a tooltip / icon can sit alongside the label text.
-*/
-const FeedInHeroLabel = ({ className, ...rest }) => {
+const HeroMetricLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-1.5 text-xs font-medium text-gray-light", className),
 		...rest
@@ -29,7 +25,7 @@ const valueToneVariants = cva("text-4xl font-bold tabular-nums", {
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const FeedInHeroValue = ({ className, tone, ...rest }) => {
+const HeroMetricValue = ({ className, tone, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: valueToneVariants({
 			tone,
@@ -38,14 +34,13 @@ const FeedInHeroValue = ({ className, tone, ...rest }) => {
 		...rest
 	});
 };
-/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
-const FeedInHeroValueUnit = ({ className, ...rest }) => {
+const HeroMetricValueUnit = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: cn("text-2xl font-semibold", className),
 		...rest
 	});
 };
 //#endregion
-export { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit };
+export { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit };
 
-//# sourceMappingURL=feed-in-hero.js.map
+//# sourceMappingURL=hero-metric.js.map

package/dist/components/hero-metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-metric.js","names":[],"sources":["../../src/components/hero-metric.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst HeroMetric = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst HeroMetricLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst HeroMetricValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\nconst HeroMetricValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit }\n"],"mappings":";;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,oBAAoB,IAAI,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,oBAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;AAEA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}

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

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

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

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

package/dist/components/input-date.cjs

@@ -21,7 +21,7 @@ function useControllableState({ defaultProp, onChange, prop }) {
 		onChange?.(next);
 	}, [isControlled, onChange])];
 }
-const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, placeholder, readOnly, separator = ".", value: valueProp, ...props }, ref) {
+const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, pickerOnly = false, placeholder, separator = ".", value: valueProp, ...props }, ref) {
 	const inputRef = react.useRef(null);
 	const [text, setText] = useControllableState({
 		defaultProp: defaultValue,
@@ -65,12 +65,12 @@ const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarP
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_group.InputGroupInput, {
 				autoComplete: "off",
 				...props,
-				className: (0, cnfast.cn)(readOnly && "cursor-pointer"),
+				className: (0, cnfast.cn)(pickerOnly && "cursor-pointer"),
 				disabled,
 				id,
-				inputMode: readOnly ? void 0 : "numeric",
+				inputMode: pickerOnly ? void 0 : "numeric",
 				onChange: () => {},
-				onClick: readOnly && !disabled ? (event) => {
+				onClick: pickerOnly && !disabled ? (event) => {
 					props.onClick?.(event);
 					if (!event.defaultPrevented) setOpen(true);
 				} : props.onClick,
@@ -82,7 +82,7 @@ const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarP
 						setOpen(true);
 						return;
 					}
-					if (readOnly || !(0, ictus.isDateMaskKey)(event.key)) return;
+					if (pickerOnly || !(0, ictus.isDateMaskKey)(event.key)) return;
 					event.preventDefault();
 					const next = (0, ictus.apply)({
 						caret: event.currentTarget.selectionStart ?? 0,
@@ -99,7 +99,7 @@ const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarP
 					});
 				},
 				placeholder: placeholder ?? `DD${separator}MM${separator}YYYY`,
-				readOnly,
+				readOnly: pickerOnly,
 				ref: setInputRef,
 				spellCheck: false,
 				value: text

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

@@ -1 +1 @@
-{"version":3,"file":"input-date.cjs","names":["React","Popover","PopoverAnchor","InputGroup","InputGroupInput","InputGroupAddon","PopoverTrigger","Button","CalendarMonth","PopoverContent","Calendar"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n  defaultProp,\n  onChange,\n  prop,\n}: {\n  defaultProp: T\n  onChange?: (value: T) => void\n  prop?: T\n}) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : uncontrolled\n\n  const setValue = React.useCallback(\n    (next: T) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next)\n    },\n    [isControlled, onChange],\n  )\n\n  return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n  React.ComponentProps<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'type' | 'value'\n> & {\n  calendarLabel: string\n  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n  defaultOpen?: boolean\n  defaultValue?: string\n  onDateChange?: (date: Date | undefined) => void\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: string) => void\n  open?: boolean\n  separator?: string\n  value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n  function InputDate(\n    {\n      calendarLabel,\n      calendarProps,\n      className,\n      defaultOpen = false,\n      defaultValue = '',\n      disabled,\n      id,\n      onDateChange,\n      onKeyDown,\n      onOpenChange,\n      onValueChange,\n      open: openProp,\n      placeholder,\n      readOnly,\n      separator = '.',\n      value: valueProp,\n      ...props\n    },\n    ref,\n  ) {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [text, setText] = useControllableState({\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n      prop: valueProp,\n    })\n    const [open, setOpenState] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: openProp,\n    })\n    const selected = parseDate(text)\n    const [month, setMonth] = React.useState<Date | undefined>(\n      () => selected ?? calendarProps?.month,\n    )\n    const setOpen = React.useCallback(\n      (next: boolean) => {\n        if (next && calendarProps?.month === undefined) {\n          setMonth(parseDate(text) ?? new Date())\n        }\n        setOpenState(next)\n      },\n      [calendarProps?.month, setOpenState, text],\n    )\n\n    const commit = React.useCallback(\n      (next: string) => {\n        if (next === text) return\n        setText(next)\n        onDateChange?.(parseDate(next))\n      },\n      [onDateChange, setText, text],\n    )\n\n    const setInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverAnchor render={<InputGroup className={className} />}>\n          <InputGroupInput\n            autoComplete=\"off\"\n            {...props}\n            className={cn(readOnly && 'cursor-pointer')}\n            disabled={disabled}\n            id={id}\n            inputMode={readOnly ? undefined : 'numeric'}\n            onChange={() => {}}\n            onClick={\n              readOnly && !disabled\n                ? (event) => {\n                    props.onClick?.(event)\n                    if (!event.defaultPrevented) setOpen(true)\n                  }\n                : props.onClick\n            }\n            onKeyDown={(event) => {\n              onKeyDown?.(event)\n              if (event.defaultPrevented) return\n              if (event.key === 'ArrowDown') {\n                event.preventDefault()\n                setOpen(true)\n                return\n              }\n              if (readOnly || !isDateMaskKey(event.key)) return\n              event.preventDefault()\n              const next = apply({\n                caret: event.currentTarget.selectionStart ?? 0,\n                key: event.key,\n                selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n                separator,\n                value: event.currentTarget.value,\n              })\n              commit(next.value)\n              const caret = next.caret\n              const input = inputRef.current\n              requestAnimationFrame(() => {\n                input?.setSelectionRange(caret, caret)\n              })\n            }}\n            placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n            readOnly={readOnly}\n            ref={setInputRef}\n            spellCheck={false}\n            value={text}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <PopoverTrigger\n              render={\n                <Button\n                  aria-label={calendarLabel}\n                  color=\"neutral\"\n                  disabled={disabled}\n                  size=\"icon-small\"\n                  styleVariant=\"ghost\"\n                >\n                  <CalendarMonth />\n                </Button>\n              }\n            />\n          </InputGroupAddon>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          aria-label={calendarLabel}\n          className=\"w-auto p-0\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            month={calendarProps?.month ?? month}\n            onMonthChange={(next) => {\n              calendarProps?.onMonthChange?.(next)\n              if (calendarProps?.month === undefined) setMonth(next)\n            }}\n            onSelect={(next) => {\n              commit(next ? formatDate(next, separator) : '')\n              setOpen(false)\n            }}\n            selected={selected}\n          />\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\n\nexport { InputDate }\n"],"mappings":"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"}
+{"version":3,"file":"input-date.cjs","names":["React","Popover","PopoverAnchor","InputGroup","InputGroupInput","InputGroupAddon","PopoverTrigger","Button","CalendarMonth","PopoverContent","Calendar"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n  defaultProp,\n  onChange,\n  prop,\n}: {\n  defaultProp: T\n  onChange?: (value: T) => void\n  prop?: T\n}) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : uncontrolled\n\n  const setValue = React.useCallback(\n    (next: T) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next)\n    },\n    [isControlled, onChange],\n  )\n\n  return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n  React.ComponentProps<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n  calendarLabel: string\n  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n  defaultOpen?: boolean\n  defaultValue?: string\n  onDateChange?: (date: Date | undefined) => void\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: string) => void\n  open?: boolean\n  pickerOnly?: boolean\n  separator?: string\n  value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n  function InputDate(\n    {\n      calendarLabel,\n      calendarProps,\n      className,\n      defaultOpen = false,\n      defaultValue = '',\n      disabled,\n      id,\n      onDateChange,\n      onKeyDown,\n      onOpenChange,\n      onValueChange,\n      open: openProp,\n      pickerOnly = false,\n      placeholder,\n      separator = '.',\n      value: valueProp,\n      ...props\n    },\n    ref,\n  ) {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [text, setText] = useControllableState({\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n      prop: valueProp,\n    })\n    const [open, setOpenState] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: openProp,\n    })\n    const selected = parseDate(text)\n    const [month, setMonth] = React.useState<Date | undefined>(\n      () => selected ?? calendarProps?.month,\n    )\n    const setOpen = React.useCallback(\n      (next: boolean) => {\n        if (next && calendarProps?.month === undefined) {\n          setMonth(parseDate(text) ?? new Date())\n        }\n        setOpenState(next)\n      },\n      [calendarProps?.month, setOpenState, text],\n    )\n\n    const commit = React.useCallback(\n      (next: string) => {\n        if (next === text) return\n        setText(next)\n        onDateChange?.(parseDate(next))\n      },\n      [onDateChange, setText, text],\n    )\n\n    const setInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverAnchor render={<InputGroup className={className} />}>\n          <InputGroupInput\n            autoComplete=\"off\"\n            {...props}\n            className={cn(pickerOnly && 'cursor-pointer')}\n            disabled={disabled}\n            id={id}\n            inputMode={pickerOnly ? undefined : 'numeric'}\n            onChange={() => {}}\n            onClick={\n              pickerOnly && !disabled\n                ? (event) => {\n                    props.onClick?.(event)\n                    if (!event.defaultPrevented) setOpen(true)\n                  }\n                : props.onClick\n            }\n            onKeyDown={(event) => {\n              onKeyDown?.(event)\n              if (event.defaultPrevented) return\n              if (event.key === 'ArrowDown') {\n                event.preventDefault()\n                setOpen(true)\n                return\n              }\n              if (pickerOnly || !isDateMaskKey(event.key)) return\n              event.preventDefault()\n              const next = apply({\n                caret: event.currentTarget.selectionStart ?? 0,\n                key: event.key,\n                selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n                separator,\n                value: event.currentTarget.value,\n              })\n              commit(next.value)\n              const caret = next.caret\n              const input = inputRef.current\n              requestAnimationFrame(() => {\n                input?.setSelectionRange(caret, caret)\n              })\n            }}\n            placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n            readOnly={pickerOnly}\n            ref={setInputRef}\n            spellCheck={false}\n            value={text}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <PopoverTrigger\n              render={\n                <Button\n                  aria-label={calendarLabel}\n                  color=\"neutral\"\n                  disabled={disabled}\n                  size=\"icon-small\"\n                  styleVariant=\"ghost\"\n                >\n                  <CalendarMonth />\n                </Button>\n              }\n            />\n          </InputGroupAddon>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          aria-label={calendarLabel}\n          className=\"w-auto p-0\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            month={calendarProps?.month ?? month}\n            onMonthChange={(next) => {\n              calendarProps?.onMonthChange?.(next)\n              if (calendarProps?.month === undefined) setMonth(next)\n            }}\n            onSelect={(next) => {\n              commit(next ? formatDate(next, separator) : '')\n              setOpen(false)\n            }}\n            selected={selected}\n          />\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\n\nexport { InputDate }\n"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { CalendarProps } from "./calendar.cjs";
 import * as React$1 from "react";
 
 //#region src/components/input-date.d.ts
-type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'> & {
   calendarLabel: string;
   calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
   defaultOpen?: boolean;
@@ -13,6 +13,7 @@ type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaul
   onOpenChange?: (open: boolean) => void;
   onValueChange?: (value: string) => void;
   open?: boolean;
+  pickerOnly?: boolean;
   separator?: string;
   value?: string;
 };

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

@@ -4,7 +4,7 @@ import { CalendarProps } from "./calendar.js";
 import * as React$1 from "react";
 
 //#region src/components/input-date.d.ts
-type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'> & {
   calendarLabel: string;
   calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
   defaultOpen?: boolean;
@@ -13,6 +13,7 @@ type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaul
   onOpenChange?: (open: boolean) => void;
   onValueChange?: (value: string) => void;
   open?: boolean;
+  pickerOnly?: boolean;
   separator?: string;
   value?: string;
 };

package/dist/components/input-date.js

@@ -18,7 +18,7 @@ function useControllableState({ defaultProp, onChange, prop }) {
 		onChange?.(next);
 	}, [isControlled, onChange])];
 }
-const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, placeholder, readOnly, separator = ".", value: valueProp, ...props }, ref) {
+const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, pickerOnly = false, placeholder, separator = ".", value: valueProp, ...props }, ref) {
 	const inputRef = React$1.useRef(null);
 	const [text, setText] = useControllableState({
 		defaultProp: defaultValue,
@@ -62,12 +62,12 @@ const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calenda
 			children: [/* @__PURE__ */ jsx(InputGroupInput, {
 				autoComplete: "off",
 				...props,
-				className: cn(readOnly && "cursor-pointer"),
+				className: cn(pickerOnly && "cursor-pointer"),
 				disabled,
 				id,
-				inputMode: readOnly ? void 0 : "numeric",
+				inputMode: pickerOnly ? void 0 : "numeric",
 				onChange: () => {},
-				onClick: readOnly && !disabled ? (event) => {
+				onClick: pickerOnly && !disabled ? (event) => {
 					props.onClick?.(event);
 					if (!event.defaultPrevented) setOpen(true);
 				} : props.onClick,
@@ -79,7 +79,7 @@ const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calenda
 						setOpen(true);
 						return;
 					}
-					if (readOnly || !isDateMaskKey(event.key)) return;
+					if (pickerOnly || !isDateMaskKey(event.key)) return;
 					event.preventDefault();
 					const next = apply({
 						caret: event.currentTarget.selectionStart ?? 0,
@@ -96,7 +96,7 @@ const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calenda
 					});
 				},
 				placeholder: placeholder ?? `DD${separator}MM${separator}YYYY`,
-				readOnly,
+				readOnly: pickerOnly,
 				ref: setInputRef,
 				spellCheck: false,
 				value: text

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

@@ -1 +1 @@
-{"version":3,"file":"input-date.js","names":["React"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n  defaultProp,\n  onChange,\n  prop,\n}: {\n  defaultProp: T\n  onChange?: (value: T) => void\n  prop?: T\n}) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : uncontrolled\n\n  const setValue = React.useCallback(\n    (next: T) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next)\n    },\n    [isControlled, onChange],\n  )\n\n  return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n  React.ComponentProps<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'type' | 'value'\n> & {\n  calendarLabel: string\n  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n  defaultOpen?: boolean\n  defaultValue?: string\n  onDateChange?: (date: Date | undefined) => void\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: string) => void\n  open?: boolean\n  separator?: string\n  value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n  function InputDate(\n    {\n      calendarLabel,\n      calendarProps,\n      className,\n      defaultOpen = false,\n      defaultValue = '',\n      disabled,\n      id,\n      onDateChange,\n      onKeyDown,\n      onOpenChange,\n      onValueChange,\n      open: openProp,\n      placeholder,\n      readOnly,\n      separator = '.',\n      value: valueProp,\n      ...props\n    },\n    ref,\n  ) {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [text, setText] = useControllableState({\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n      prop: valueProp,\n    })\n    const [open, setOpenState] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: openProp,\n    })\n    const selected = parseDate(text)\n    const [month, setMonth] = React.useState<Date | undefined>(\n      () => selected ?? calendarProps?.month,\n    )\n    const setOpen = React.useCallback(\n      (next: boolean) => {\n        if (next && calendarProps?.month === undefined) {\n          setMonth(parseDate(text) ?? new Date())\n        }\n        setOpenState(next)\n      },\n      [calendarProps?.month, setOpenState, text],\n    )\n\n    const commit = React.useCallback(\n      (next: string) => {\n        if (next === text) return\n        setText(next)\n        onDateChange?.(parseDate(next))\n      },\n      [onDateChange, setText, text],\n    )\n\n    const setInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverAnchor render={<InputGroup className={className} />}>\n          <InputGroupInput\n            autoComplete=\"off\"\n            {...props}\n            className={cn(readOnly && 'cursor-pointer')}\n            disabled={disabled}\n            id={id}\n            inputMode={readOnly ? undefined : 'numeric'}\n            onChange={() => {}}\n            onClick={\n              readOnly && !disabled\n                ? (event) => {\n                    props.onClick?.(event)\n                    if (!event.defaultPrevented) setOpen(true)\n                  }\n                : props.onClick\n            }\n            onKeyDown={(event) => {\n              onKeyDown?.(event)\n              if (event.defaultPrevented) return\n              if (event.key === 'ArrowDown') {\n                event.preventDefault()\n                setOpen(true)\n                return\n              }\n              if (readOnly || !isDateMaskKey(event.key)) return\n              event.preventDefault()\n              const next = apply({\n                caret: event.currentTarget.selectionStart ?? 0,\n                key: event.key,\n                selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n                separator,\n                value: event.currentTarget.value,\n              })\n              commit(next.value)\n              const caret = next.caret\n              const input = inputRef.current\n              requestAnimationFrame(() => {\n                input?.setSelectionRange(caret, caret)\n              })\n            }}\n            placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n            readOnly={readOnly}\n            ref={setInputRef}\n            spellCheck={false}\n            value={text}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <PopoverTrigger\n              render={\n                <Button\n                  aria-label={calendarLabel}\n                  color=\"neutral\"\n                  disabled={disabled}\n                  size=\"icon-small\"\n                  styleVariant=\"ghost\"\n                >\n                  <CalendarMonth />\n                </Button>\n              }\n            />\n          </InputGroupAddon>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          aria-label={calendarLabel}\n          className=\"w-auto p-0\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            month={calendarProps?.month ?? month}\n            onMonthChange={(next) => {\n              calendarProps?.onMonthChange?.(next)\n              if (calendarProps?.month === undefined) setMonth(next)\n            }}\n            onSelect={(next) => {\n              commit(next ? formatDate(next, separator) : '')\n              setOpen(false)\n            }}\n            selected={selected}\n          />\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\n\nexport { InputDate }\n"],"mappings":"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"}
+{"version":3,"file":"input-date.js","names":["React"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n  defaultProp,\n  onChange,\n  prop,\n}: {\n  defaultProp: T\n  onChange?: (value: T) => void\n  prop?: T\n}) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : uncontrolled\n\n  const setValue = React.useCallback(\n    (next: T) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next)\n    },\n    [isControlled, onChange],\n  )\n\n  return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n  React.ComponentProps<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n  calendarLabel: string\n  calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n  defaultOpen?: boolean\n  defaultValue?: string\n  onDateChange?: (date: Date | undefined) => void\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: string) => void\n  open?: boolean\n  pickerOnly?: boolean\n  separator?: string\n  value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n  function InputDate(\n    {\n      calendarLabel,\n      calendarProps,\n      className,\n      defaultOpen = false,\n      defaultValue = '',\n      disabled,\n      id,\n      onDateChange,\n      onKeyDown,\n      onOpenChange,\n      onValueChange,\n      open: openProp,\n      pickerOnly = false,\n      placeholder,\n      separator = '.',\n      value: valueProp,\n      ...props\n    },\n    ref,\n  ) {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [text, setText] = useControllableState({\n      defaultProp: defaultValue,\n      onChange: onValueChange,\n      prop: valueProp,\n    })\n    const [open, setOpenState] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: openProp,\n    })\n    const selected = parseDate(text)\n    const [month, setMonth] = React.useState<Date | undefined>(\n      () => selected ?? calendarProps?.month,\n    )\n    const setOpen = React.useCallback(\n      (next: boolean) => {\n        if (next && calendarProps?.month === undefined) {\n          setMonth(parseDate(text) ?? new Date())\n        }\n        setOpenState(next)\n      },\n      [calendarProps?.month, setOpenState, text],\n    )\n\n    const commit = React.useCallback(\n      (next: string) => {\n        if (next === text) return\n        setText(next)\n        onDateChange?.(parseDate(next))\n      },\n      [onDateChange, setText, text],\n    )\n\n    const setInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref],\n    )\n\n    return (\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverAnchor render={<InputGroup className={className} />}>\n          <InputGroupInput\n            autoComplete=\"off\"\n            {...props}\n            className={cn(pickerOnly && 'cursor-pointer')}\n            disabled={disabled}\n            id={id}\n            inputMode={pickerOnly ? undefined : 'numeric'}\n            onChange={() => {}}\n            onClick={\n              pickerOnly && !disabled\n                ? (event) => {\n                    props.onClick?.(event)\n                    if (!event.defaultPrevented) setOpen(true)\n                  }\n                : props.onClick\n            }\n            onKeyDown={(event) => {\n              onKeyDown?.(event)\n              if (event.defaultPrevented) return\n              if (event.key === 'ArrowDown') {\n                event.preventDefault()\n                setOpen(true)\n                return\n              }\n              if (pickerOnly || !isDateMaskKey(event.key)) return\n              event.preventDefault()\n              const next = apply({\n                caret: event.currentTarget.selectionStart ?? 0,\n                key: event.key,\n                selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n                separator,\n                value: event.currentTarget.value,\n              })\n              commit(next.value)\n              const caret = next.caret\n              const input = inputRef.current\n              requestAnimationFrame(() => {\n                input?.setSelectionRange(caret, caret)\n              })\n            }}\n            placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n            readOnly={pickerOnly}\n            ref={setInputRef}\n            spellCheck={false}\n            value={text}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <PopoverTrigger\n              render={\n                <Button\n                  aria-label={calendarLabel}\n                  color=\"neutral\"\n                  disabled={disabled}\n                  size=\"icon-small\"\n                  styleVariant=\"ghost\"\n                >\n                  <CalendarMonth />\n                </Button>\n              }\n            />\n          </InputGroupAddon>\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          aria-label={calendarLabel}\n          className=\"w-auto p-0\"\n        >\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            month={calendarProps?.month ?? month}\n            onMonthChange={(next) => {\n              calendarProps?.onMonthChange?.(next)\n              if (calendarProps?.month === undefined) setMonth(next)\n            }}\n            onSelect={(next) => {\n              commit(next ? formatDate(next, separator) : '')\n              setOpen(false)\n            }}\n            selected={selected}\n          />\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\n\nexport { InputDate }\n"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | null | undefined;
+  align?: "inline-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

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

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | null | undefined;
+  align?: "inline-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/components/input-otp.cjs

@@ -7,7 +7,7 @@ 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", {
+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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none", {
 	variants: {
 		chrome: {
 			inset: require_lib_input_box_variants.GHOST_UNDERLINE,

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-md',\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'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\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) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, ariaInvalid, 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      validationType={validationType}\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          aria-invalid={index === 0 ? ariaInvalid : 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;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3DC,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;EACY;EAChB,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,gBAAc,UAAU,IAAI,cAAc,KAAA;GAC1C,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GAPM,KAON,CACF;CACY,CAAA;AAEnB"}
+{"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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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-md',\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'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\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) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, ariaInvalid, 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      validationType={validationType}\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          aria-invalid={index === 0 ? ariaInvalid : 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,0XACA;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;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3DC,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;EACY;EAChB,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,gBAAc,UAAU,IAAI,cAAc,KAAA;GAC1C,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GAPM,KAON,CACF;CACY,CAAA;AAEnB"}

package/dist/components/input-otp.js

@@ -6,7 +6,7 @@ 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", {
+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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none", {
 	variants: {
 		chrome: {
 			inset: GHOST_UNDERLINE,

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-md',\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'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\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) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, ariaInvalid, 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      validationType={validationType}\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          aria-invalid={index === 0 ? ariaInvalid : 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;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3D,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACY;EAChB,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,gBAAc,UAAU,IAAI,cAAc,KAAA;GAC1C,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GAPM,KAON,CACF;CACY,CAAA;AAEnB"}
+{"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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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-md',\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'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\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) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, ariaInvalid, 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      validationType={validationType}\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          aria-invalid={index === 0 ? ariaInvalid : 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,0XACA;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;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3D,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACY;EAChB,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,gBAAc,UAAU,IAAI,cAAc,KAAA;GAC1C,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GAPM,KAON,CACF;CACY,CAAA;AAEnB"}

package/dist/components/input.cjs

@@ -9,7 +9,7 @@ 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", {
+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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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",

package/dist/components/input.cjs.map

@@ -1 +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-md 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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,aAAa,YAAY,eAC3DC,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,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CAAC"}
+{"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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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-md 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,iBAAA,GAAA,yBAAA,KACJ,2aACA;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,aAAa,YAAY,eAC3DC,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,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CAAC"}

package/dist/components/input.js

@@ -6,7 +6,7 @@ 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", {
+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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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",

package/dist/components/input.js.map

@@ -1 +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-md 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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,aAAa,YAAY,eAC3D,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,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CAAC"}
+{"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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:placeholder: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-md 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,IACpB,2aACA;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,aAAa,YAAY,eAC3D,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,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CAAC"}

package/dist/components/label.cjs

@@ -7,7 +7,7 @@ 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),
+	className: (0, cnfast.cn)("text-sm leading-5 font-normal text-gray", className),
 	ref,
 	...props
 }));

package/dist/components/label.cjs.map

@@ -1 +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"}
+{"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', 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,2CAA2C,SAAS;CAC7D;CACL,GAAI;AACL,CAAA,CAEL;AAEA,MAAM,cAAc"}

package/dist/components/label.js

@@ -4,7 +4,7 @@ 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),
+	className: cn("text-sm leading-5 font-normal text-gray", className),
 	ref,
 	...props
 }));

package/dist/components/label.js.map

@@ -1 +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"}
+{"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', 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,2CAA2C,SAAS;CAC7D;CACL,GAAI;AACL,CAAA,CAEL;AAEA,MAAM,cAAc"}

package/dist/components/line-chart.cjs

@@ -1,12 +1,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
-const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/line-chart.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../utils/cn.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
+import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
-import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";