@spark-ui/components 17.2.3-beta.1 → 17.2.4-beta.0

package/dist/input-CmYeHYWQ.mjs

@@ -0,0 +1,355 @@
+import { Slot as e } from "./slot/index.mjs";
+import { t } from "./icon-D05Uqh8_.mjs";
+import { cva as n, cx as r } from "class-variance-authority";
+import { Children as i, cloneElement as a, createContext as o, isValidElement as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useMergeRefs as h } from "@spark-ui/hooks/use-merge-refs";
+import { useFormFieldControl as g } from "@spark-ui/components/form-field";
+import { useCombinedState as _ } from "@spark-ui/hooks/use-combined-state";
+import { DeleteOutline as v } from "@spark-ui/icons/DeleteOutline";
+//#region src/input/InputGroupContext.ts
+var y = o(null), b = () => l(y) || { isStandalone: !0 }, x = ({ className: e, tabIndex: n = -1, onClick: i, inline: a = !1, ref: o, ...s }) => {
+	let { onClear: c, hasTrailingIcon: l } = b(), u = (e) => {
+		i && i(e), c && c();
+	};
+	return /* @__PURE__ */ p("button", {
+		ref: o,
+		"data-spark-component": "input-clear-button",
+		className: r(e, "pointer-events-auto absolute", a ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2", "inline-flex h-full items-center justify-center outline-hidden", "text-neutral hover:text-neutral-hovered", l ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"),
+		tabIndex: n,
+		onClick: u,
+		type: "button",
+		...s,
+		children: /* @__PURE__ */ p(t, {
+			size: "sm",
+			children: /* @__PURE__ */ p(v, {})
+		})
+	});
+}, S = Object.assign(x, { id: "ClearButton" });
+x.displayName = "InputGroup.ClearButton";
+//#endregion
+//#region src/input/InputGroup.styles.ts
+var C = n(["relative inline-flex w-full"], { variants: {
+	disabled: {
+		true: [
+			"cursor-not-allowed",
+			"relative",
+			"after:absolute",
+			"after:top-0",
+			"after:h-full",
+			"after:w-full",
+			"after:border-sm after:border-outline",
+			"after:rounded-lg"
+		],
+		false: "after:hidden"
+	},
+	readOnly: {
+		true: [
+			"relative",
+			"after:absolute",
+			"after:top-0",
+			"after:h-full",
+			"after:w-full",
+			"after:border-sm after:border-outline",
+			"after:rounded-lg"
+		],
+		false: "after:hidden"
+	}
+} }), w = ({ className: e, children: t, state: n, disabled: r, readOnly: o, onClear: l, ref: v, ...b }) => {
+	let x = (e) => e ? e.type.id : "", S = (...e) => w.find((t) => e.includes(x(t) || "")), w = i.toArray(t).filter(s), T = S("Input"), E = T?.props || {}, D = f(null), O = f(l), k = h(T?.ref, D), [A, j] = _(E.value, E.defaultValue, E.onValueChange), M = g(), N = M.state ?? n, P = M.disabled || !!r, F = M.readOnly || !!o, I = S("LeadingAddon"), L = S("LeadingIcon"), R = S("ClearButton"), z = S("TrailingIcon"), B = S("TrailingAddon"), V = !!I, H = !!B, U = !!L, W = !!z, G = !!A && !!R && !P && !F, K = (e) => {
+		E.onChange && E.onChange(e), j(e.target.value);
+	}, q = c(() => {
+		O.current && O.current(), j(""), D.current.focus();
+	}, [j]), J = d(() => ({
+		state: N,
+		disabled: P,
+		readOnly: F,
+		hasLeadingIcon: U,
+		hasTrailingIcon: W,
+		hasLeadingAddon: V,
+		hasTrailingAddon: H,
+		hasClearButton: G,
+		onClear: q
+	}), [
+		N,
+		P,
+		F,
+		U,
+		W,
+		V,
+		H,
+		G,
+		q
+	]);
+	u(() => {
+		O.current = l;
+	}, [l]);
+	let Y = D.current?.value;
+	return /* @__PURE__ */ p(y.Provider, {
+		value: J,
+		children: /* @__PURE__ */ m("div", {
+			"data-spark-component": "input-group",
+			ref: v,
+			className: C({
+				disabled: P,
+				readOnly: F,
+				className: e
+			}),
+			...b,
+			children: [
+				V && I,
+				/* @__PURE__ */ m("div", {
+					className: "relative inline-flex w-full",
+					children: [
+						T && a(T, {
+							value: A ?? Y ?? "",
+							ref: k,
+							defaultValue: void 0,
+							onChange: K
+						}),
+						L,
+						G && R,
+						z
+					]
+				}),
+				H && B
+			]
+		})
+	});
+};
+w.displayName = "InputGroup";
+//#endregion
+//#region src/input/InputAddon.styles.ts
+var T = n([
+	"overflow-hidden",
+	"border-sm",
+	"shrink-0",
+	"h-full",
+	"focus-visible:relative focus-visible:z-raised",
+	"mx-0"
+], {
+	variants: {
+		asChild: { false: [
+			"flex",
+			"items-center",
+			"px-lg"
+		] },
+		intent: {
+			neutral: "border-outline",
+			error: "border-error",
+			alert: "border-alert",
+			success: "border-success"
+		},
+		disabled: { true: ["pointer-events-none border-outline!"] },
+		readOnly: { true: ["pointer-events-none"] },
+		design: {
+			text: "",
+			solid: "",
+			inline: ""
+		}
+	},
+	compoundVariants: [
+		{
+			disabled: !1,
+			readOnly: !1,
+			design: "text",
+			class: ["bg-surface", "text-on-surface"]
+		},
+		{
+			disabled: !0,
+			design: "text",
+			class: ["text-on-surface/dim-3"]
+		},
+		{
+			disabled: !0,
+			design: ["solid", "inline"],
+			class: ["opacity-dim-3"]
+		}
+	],
+	defaultVariants: { intent: "neutral" }
+}), E = ({ asChild: t, className: n, children: r, ref: a, ...o }) => {
+	let { state: s, disabled: c, readOnly: l } = b(), u = typeof r == "string", d = !!(!u && t), f = u ? r : i.only(r), m = d && !u ? e : "div", h = u ? "text" : d ? "solid" : "inline";
+	return /* @__PURE__ */ p(m, {
+		ref: a,
+		"data-spark-component": "input-addon",
+		className: T({
+			className: n,
+			intent: s,
+			disabled: c,
+			readOnly: l,
+			asChild: d,
+			design: h
+		}),
+		...c && { tabIndex: -1 },
+		...o,
+		children: f
+	});
+};
+E.displayName = "InputGroup.Addon";
+//#endregion
+//#region src/input/InputLeadingAddon.tsx
+var D = ({ className: e, ref: t, ...n }) => {
+	let { disabled: i, readOnly: a } = b();
+	return /* @__PURE__ */ p("div", {
+		className: r("rounded-l-lg", i || a ? "bg-on-surface/dim-5" : null),
+		children: /* @__PURE__ */ p(E, {
+			ref: t,
+			className: r(e, "rounded-r-0! mr-[-1px] rounded-l-lg"),
+			...n
+		})
+	});
+}, O = Object.assign(D, { id: "LeadingAddon" });
+D.displayName = "InputGroup.LeadingAddon";
+//#endregion
+//#region src/input/InputIcon.tsx
+var k = ({ className: e, intent: n, children: i, ...a }) => {
+	let { disabled: o, readOnly: s } = b(), c = o || s;
+	return /* @__PURE__ */ p(t, {
+		"data-spark-component": "input-icon",
+		intent: n,
+		className: r(e, "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2", n ? void 0 : "text-neutral peer-focus:text-outline-high", c ? "opacity-dim-3" : void 0),
+		...a,
+		children: i
+	});
+};
+k.displayName = "InputGroup.Icon";
+//#endregion
+//#region src/input/InputLeadingIcon.tsx
+var A = ({ className: e, ...t }) => /* @__PURE__ */ p(k, {
+	className: r(e, "left-lg text-body-1"),
+	...t
+});
+A.id = "LeadingIcon", A.displayName = "InputGroup.LeadingIcon";
+//#endregion
+//#region src/input/InputTrailingAddon.tsx
+var j = ({ className: e, ref: t, ...n }) => {
+	let { disabled: i, readOnly: a } = b();
+	return /* @__PURE__ */ p("div", {
+		className: r("rounded-r-lg", i || a ? "bg-on-surface/dim-5" : null),
+		children: /* @__PURE__ */ p(E, {
+			ref: t,
+			className: r(e, "rounded-l-0! ml-[-1px] rounded-r-lg"),
+			...n
+		})
+	});
+}, M = Object.assign(j, { id: "TrailingAddon" });
+j.displayName = "InputGroup.TrailingAddon";
+//#endregion
+//#region src/input/InputTrailingIcon.tsx
+var N = ({ className: e, ...t }) => /* @__PURE__ */ p(k, {
+	className: r(e, "right-lg text-body-1"),
+	...t
+});
+N.id = "TrailingIcon", N.displayName = "InputGroup.TrailingIcon";
+//#endregion
+//#region src/input/Input.styles.ts
+var P = n([
+	"relative",
+	"border-sm",
+	"peer",
+	"w-full",
+	"appearance-none outline-hidden",
+	"bg-surface",
+	"text-ellipsis text-body-1 text-on-surface",
+	"caret-neutral",
+	"[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
+	"autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
+	"disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
+	"read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
+	"focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
+], {
+	variants: {
+		asChild: {
+			true: ["min-h-sz-44"],
+			false: ["h-sz-44"]
+		},
+		intent: {
+			neutral: ["border-outline", "default:hover:border-outline-high"],
+			success: ["default:border-success"],
+			alert: ["default:border-alert"],
+			error: ["default:border-error"]
+		},
+		hasLeadingAddon: {
+			true: ["rounded-l-0"],
+			false: ["rounded-l-lg"]
+		},
+		hasTrailingAddon: {
+			true: ["rounded-r-0"],
+			false: ["rounded-r-lg"]
+		},
+		hasLeadingIcon: {
+			true: ["pl-3xl"],
+			false: ["pl-lg"]
+		},
+		hasTrailingIcon: { true: "" },
+		hasClearButton: { true: "" }
+	},
+	compoundVariants: [
+		{
+			hasTrailingIcon: !1,
+			hasClearButton: !1,
+			class: "pr-lg"
+		},
+		{
+			hasTrailingIcon: !0,
+			hasClearButton: !1,
+			class: "pr-3xl"
+		},
+		{
+			hasTrailingIcon: !1,
+			hasClearButton: !0,
+			class: "pr-3xl"
+		},
+		{
+			hasTrailingIcon: !0,
+			hasClearButton: !0,
+			class: "pr-[calc(var(--spacing-3xl)*2)]"
+		}
+	],
+	defaultVariants: { intent: "neutral" }
+}), F = ({ className: t, asChild: n = !1, onValueChange: r, onChange: i, onKeyDown: a, disabled: o, readOnly: s, ref: c, ...l }) => {
+	let u = g(), d = b(), { id: f, name: m, isInvalid: h, isRequired: _, description: v } = u, { hasLeadingAddon: y, hasTrailingAddon: x, hasLeadingIcon: S, hasTrailingIcon: C, hasClearButton: w, onClear: T } = d, E = n ? e : "input", D = u.state || d.state, O = u.disabled || d.disabled || o, k = u.readOnly || d.readOnly || s, A = (e) => {
+		i && i(e), r && r(e.target.value);
+	}, j = (e) => {
+		a && a(e), w && T && e.key === "Escape" && T();
+	};
+	return /* @__PURE__ */ p(E, {
+		"data-spark-component": "input",
+		ref: c,
+		id: f,
+		name: m,
+		className: P({
+			asChild: n,
+			className: t,
+			intent: D,
+			hasLeadingAddon: !!y,
+			hasTrailingAddon: !!x,
+			hasLeadingIcon: !!S,
+			hasTrailingIcon: !!C,
+			hasClearButton: !!w
+		}),
+		disabled: O,
+		readOnly: k,
+		required: _,
+		"aria-describedby": v,
+		"aria-invalid": h,
+		onChange: A,
+		onKeyDown: j,
+		...l
+	});
+}, I = Object.assign(F, { id: "Input" });
+F.displayName = "Input";
+//#endregion
+//#region src/input/index.ts
+var L = Object.assign(w, {
+	LeadingAddon: O,
+	TrailingAddon: M,
+	LeadingIcon: A,
+	TrailingIcon: N,
+	ClearButton: S
+});
+L.displayName = "InputGroup", O.displayName = "InputGroup.LeadingAddon", M.displayName = "InputGroup.TrailingAddon", A.displayName = "InputGroup.LeadingIcon", N.displayName = "InputGroup.TrailingIcon", S.displayName = "InputGroup.ClearButton";
+//#endregion
+export { I as n, b as r, L as t };
+
+//# sourceMappingURL=input-CmYeHYWQ.mjs.map

package/dist/input-CmYeHYWQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-CmYeHYWQ.mjs","names":[],"sources":["../src/input/InputGroupContext.ts","../src/input/InputClearButton.tsx","../src/input/InputGroup.styles.ts","../src/input/InputGroup.tsx","../src/input/InputAddon.styles.ts","../src/input/InputAddon.tsx","../src/input/InputLeadingAddon.tsx","../src/input/InputIcon.tsx","../src/input/InputLeadingIcon.tsx","../src/input/InputTrailingAddon.tsx","../src/input/InputTrailingIcon.tsx","../src/input/Input.styles.ts","../src/input/Input.tsx","../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-lg'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-lg'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"mappings":"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"}

package/dist/input-DNr40G2Z.js

@@ -0,0 +1,2 @@
+require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/hooks/use-combined-state`),c=require(`@spark-ui/icons/DeleteOutline`);var l=(0,r.createContext)(null),u=()=>(0,r.useContext)(l)||{isStandalone:!0},d=({className:e,tabIndex:r=-1,onClick:a,inline:o=!1,ref:s,...l})=>{let{onClear:d,hasTrailingIcon:f}=u(),p=e=>{a&&a(e),d&&d()};return(0,i.jsx)(`button`,{ref:s,"data-spark-component":`input-clear-button`,className:(0,n.cx)(e,`pointer-events-auto absolute`,o?`h-sz-44 top-0 -translate-y-0`:`top-1/2 -translate-y-1/2`,`inline-flex h-full items-center justify-center outline-hidden`,`text-neutral hover:text-neutral-hovered`,f?`right-3xl px-sz-12`:`pl-md pr-lg right-0`),tabIndex:r,onClick:p,type:`button`,...l,children:(0,i.jsx)(t.t,{size:`sm`,children:(0,i.jsx)(c.DeleteOutline,{})})})},f=Object.assign(d,{id:`ClearButton`});d.displayName=`InputGroup.ClearButton`;var p=(0,n.cva)([`relative inline-flex w-full`],{variants:{disabled:{true:[`cursor-not-allowed`,`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`},readOnly:{true:[`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`}}}),m=({className:e,children:t,state:n,disabled:c,readOnly:u,onClear:d,ref:f,...m})=>{let h=e=>e?e.type.id:``,g=(...e)=>_.find(t=>e.includes(h(t)||``)),_=r.Children.toArray(t).filter(r.isValidElement),v=g(`Input`),y=v?.props||{},b=(0,r.useRef)(null),x=(0,r.useRef)(d),S=(0,a.useMergeRefs)(v?.ref,b),[C,w]=(0,s.useCombinedState)(y.value,y.defaultValue,y.onValueChange),T=(0,o.useFormFieldControl)(),E=T.state??n,D=T.disabled||!!c,O=T.readOnly||!!u,k=g(`LeadingAddon`),A=g(`LeadingIcon`),j=g(`ClearButton`),M=g(`TrailingIcon`),N=g(`TrailingAddon`),P=!!k,F=!!N,I=!!A,L=!!M,R=!!C&&!!j&&!D&&!O,z=e=>{y.onChange&&y.onChange(e),w(e.target.value)},B=(0,r.useCallback)(()=>{x.current&&x.current(),w(``),b.current.focus()},[w]),V=(0,r.useMemo)(()=>({state:E,disabled:D,readOnly:O,hasLeadingIcon:I,hasTrailingIcon:L,hasLeadingAddon:P,hasTrailingAddon:F,hasClearButton:R,onClear:B}),[E,D,O,I,L,P,F,R,B]);(0,r.useEffect)(()=>{x.current=d},[d]);let H=b.current?.value;return(0,i.jsx)(l.Provider,{value:V,children:(0,i.jsxs)(`div`,{"data-spark-component":`input-group`,ref:f,className:p({disabled:D,readOnly:O,className:e}),...m,children:[P&&k,(0,i.jsxs)(`div`,{className:`relative inline-flex w-full`,children:[v&&(0,r.cloneElement)(v,{value:C??H??``,ref:S,defaultValue:void 0,onChange:z}),A,R&&j,M]}),F&&N]})})};m.displayName=`InputGroup`;var h=(0,n.cva)([`overflow-hidden`,`border-sm`,`shrink-0`,`h-full`,`focus-visible:relative focus-visible:z-raised`,`mx-0`],{variants:{asChild:{false:[`flex`,`items-center`,`px-lg`]},intent:{neutral:`border-outline`,error:`border-error`,alert:`border-alert`,success:`border-success`},disabled:{true:[`pointer-events-none border-outline!`]},readOnly:{true:[`pointer-events-none`]},design:{text:``,solid:``,inline:``}},compoundVariants:[{disabled:!1,readOnly:!1,design:`text`,class:[`bg-surface`,`text-on-surface`]},{disabled:!0,design:`text`,class:[`text-on-surface/dim-3`]},{disabled:!0,design:[`solid`,`inline`],class:[`opacity-dim-3`]}],defaultVariants:{intent:`neutral`}}),g=({asChild:t,className:n,children:a,ref:o,...s})=>{let{state:c,disabled:l,readOnly:d}=u(),f=typeof a==`string`,p=!!(!f&&t),m=f?a:r.Children.only(a),g=p&&!f?e.Slot:`div`,_=f?`text`:p?`solid`:`inline`;return(0,i.jsx)(g,{ref:o,"data-spark-component":`input-addon`,className:h({className:n,intent:c,disabled:l,readOnly:d,asChild:p,design:_}),...l&&{tabIndex:-1},...s,children:m})};g.displayName=`InputGroup.Addon`;var _=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-l-lg`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-r-0! mr-[-1px] rounded-l-lg`),...r})})},v=Object.assign(_,{id:`LeadingAddon`});_.displayName=`InputGroup.LeadingAddon`;var y=({className:e,intent:r,children:a,...o})=>{let{disabled:s,readOnly:c}=u(),l=s||c;return(0,i.jsx)(t.t,{"data-spark-component":`input-icon`,intent:r,className:(0,n.cx)(e,`pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2`,r?void 0:`text-neutral peer-focus:text-outline-high`,l?`opacity-dim-3`:void 0),...o,children:a})};y.displayName=`InputGroup.Icon`;var b=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`left-lg text-body-1`),...t});b.id=`LeadingIcon`,b.displayName=`InputGroup.LeadingIcon`;var x=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-r-lg`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-l-0! ml-[-1px] rounded-r-lg`),...r})})},S=Object.assign(x,{id:`TrailingAddon`});x.displayName=`InputGroup.TrailingAddon`;var C=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`right-lg text-body-1`),...t});C.id=`TrailingIcon`,C.displayName=`InputGroup.TrailingIcon`;var w=(0,n.cva)([`relative`,`border-sm`,`peer`,`w-full`,`appearance-none outline-hidden`,`bg-surface`,`text-ellipsis text-body-1 text-on-surface`,`caret-neutral`,`[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]`,`autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]`,`disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3`,`read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5`,`focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus`],{variants:{asChild:{true:[`min-h-sz-44`],false:[`h-sz-44`]},intent:{neutral:[`border-outline`,`default:hover:border-outline-high`],success:[`default:border-success`],alert:[`default:border-alert`],error:[`default:border-error`]},hasLeadingAddon:{true:[`rounded-l-0`],false:[`rounded-l-lg`]},hasTrailingAddon:{true:[`rounded-r-0`],false:[`rounded-r-lg`]},hasLeadingIcon:{true:[`pl-3xl`],false:[`pl-lg`]},hasTrailingIcon:{true:``},hasClearButton:{true:``}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:`pr-lg`},{hasTrailingIcon:!0,hasClearButton:!1,class:`pr-3xl`},{hasTrailingIcon:!1,hasClearButton:!0,class:`pr-3xl`},{hasTrailingIcon:!0,hasClearButton:!0,class:`pr-[calc(var(--spacing-3xl)*2)]`}],defaultVariants:{intent:`neutral`}}),T=({className:t,asChild:n=!1,onValueChange:r,onChange:a,onKeyDown:s,disabled:c,readOnly:l,ref:d,...f})=>{let p=(0,o.useFormFieldControl)(),m=u(),{id:h,name:g,isInvalid:_,isRequired:v,description:y}=p,{hasLeadingAddon:b,hasTrailingAddon:x,hasLeadingIcon:S,hasTrailingIcon:C,hasClearButton:T,onClear:E}=m,D=n?e.Slot:`input`,O=p.state||m.state,k=p.disabled||m.disabled||c,A=p.readOnly||m.readOnly||l,j=e=>{a&&a(e),r&&r(e.target.value)},M=e=>{s&&s(e),T&&E&&e.key===`Escape`&&E()};return(0,i.jsx)(D,{"data-spark-component":`input`,ref:d,id:h,name:g,className:w({asChild:n,className:t,intent:O,hasLeadingAddon:!!b,hasTrailingAddon:!!x,hasLeadingIcon:!!S,hasTrailingIcon:!!C,hasClearButton:!!T}),disabled:k,readOnly:A,required:v,"aria-describedby":y,"aria-invalid":_,onChange:j,onKeyDown:M,...f})},E=Object.assign(T,{id:`Input`});T.displayName=`Input`;var D=Object.assign(m,{LeadingAddon:v,TrailingAddon:S,LeadingIcon:b,TrailingIcon:C,ClearButton:f});D.displayName=`InputGroup`,v.displayName=`InputGroup.LeadingAddon`,S.displayName=`InputGroup.TrailingAddon`,b.displayName=`InputGroup.LeadingIcon`,C.displayName=`InputGroup.TrailingIcon`,f.displayName=`InputGroup.ClearButton`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});
+//# sourceMappingURL=input-DNr40G2Z.js.map

package/dist/input-DNr40G2Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-DNr40G2Z.js","names":[],"sources":["../src/input/InputGroupContext.ts","../src/input/InputClearButton.tsx","../src/input/InputGroup.styles.ts","../src/input/InputGroup.tsx","../src/input/InputAddon.styles.ts","../src/input/InputAddon.tsx","../src/input/InputLeadingAddon.tsx","../src/input/InputIcon.tsx","../src/input/InputLeadingIcon.tsx","../src/input/InputTrailingAddon.tsx","../src/input/InputTrailingIcon.tsx","../src/input/Input.styles.ts","../src/input/Input.tsx","../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-lg'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-lg'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"mappings":"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"}

package/dist/input-otp/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),L=require("class-variance-authority"),o=require("react"),ue=require("@spark-ui/components/form-field"),ne=o.createContext(null),de=()=>{const e=o.useContext(ne);if(!e)throw new Error("InputOTP components must be used within InputOTP");return e};L.cva(["relative","inline-flex","items-center","gap-sm"]);const Q=L.cva(["relative h-[50px] w-sz-40","border-sm rounded-md","text-center text-display-3 text-on-surface","outline-hidden","transition-colors","flex items-center justify-center","data-[active=true]:ring-1","data-[active=true]:ring-inset","data-[active=true]:ring-l-2","data-[active=true]:border-focus","data-[active=true]:z-raised ring-focus","data-[disabled=true]:cursor-not-allowed","data-[disabled=true]:border-outline","data-[disabled=true]:bg-on-surface/dim-5","data-[disabled=true]:text-on-surface/dim-3","data-[readonly=true]:cursor-default","data-[readonly=true]:data-[active=false]:border-outline","data-[readonly=true]:bg-on-surface/dim-5","group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high"],{variants:{intent:{neutral:["data-[filled=true]:bg-neutral-container bg-surface border-outline"],success:["border-success bg-success-container text-on-success-container"],alert:["border-alert bg-alert-container text-on-alert-container"],error:["border-error bg-error-container text-on-error-container"]}},defaultVariants:{intent:"neutral"}}),pe=Q,D=({index:e,className:i,...t})=>{const c=de(),r=e??0,p=c.slots[r];if(!p)return null;const{char:f,isActive:O,hasFakeCaret:y}=p,P=!f,w=P&&!y&&c.placeholder,h=r===c.activeIndex;return b.jsxs("div",{className:Q({intent:c.intent,className:i}),"data-active":O,"data-disabled":c.disabled,"data-readonly":c.readOnly,"data-filled":!P,"data-focus-target":h,"data-valid":c.intent!=="error",...t,children:[b.jsx("span",{className:w?"text-on-surface/dim-3":"",children:c.type==="password"&&f?"•":f||(!y&&c.placeholder?c.placeholder:"")}),y&&b.jsx("span",{className:"pointer-events-none absolute inset-0 flex items-center justify-center","aria-hidden":"true",children:b.jsx("span",{className:"bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2"})})]})};D.displayName="InputOTP.Slot";const fe="Backspace",be="ArrowLeft",ve="ArrowUp",me="ArrowRight",xe="ArrowDown",ye="e",he=({maxLength:e,type:i,value:t,defaultValue:c,onValueChange:r,isValid:p,disabledProp:f,readOnlyProp:O,autoFocus:y,forceUppercase:P,filterKeys:w,pattern:h,placeholder:j,nameProp:B})=>{const W=o.useId(),s=o.useRef(null),Y=o.useRef(null),l=ue.useFormFieldControl(),S=l.id??W,k=B??l.name,v=l.disabled??f,I=l.readOnly??O,_=l.isInvalid??!p,U=l.isRequired??!1,F=l.labelId,K=l.description,R=l.state,E=["success","alert","error"].includes(R??"")?R:_?"error":"neutral",T=t!==void 0?t:c,M=P?T.toUpperCase():T,[H,N]=o.useState(M),[A,q]=o.useState(!1),u=t!==void 0?t:H,m=Math.min(u.length,e-1);o.useEffect(()=>{s.current&&s.current.setSelectionRange(m,m)},[m,u.length,e]);const V=o.useMemo(()=>Array.from({length:e},(n,a)=>({char:u[a]||"",isActive:a===m&&A,hasFakeCaret:a===m&&!u[a]&&!v&&!I&&A})),[e,u,m,A,v,I]);o.useEffect(()=>{s.current&&t!==void 0&&(s.current.value=t)},[t]),o.useEffect(()=>{y&&s.current&&s.current.focus()},[y]);const z=n=>{let a=n;if(P&&(a=a.toUpperCase()),i==="number"&&(a=a.replace(/[^\d]/g,"")),h)try{let g=h;h.startsWith("^")||(g=`^${h}$`);const d=new RegExp(g);a=a.split("").filter(x=>d.test(x)).join("")}catch(g){console.error("Invalid pattern provided to InputOTP:",h,g)}return a};return{uuid:S,inputRef:s,containerRef:Y,name:k,disabled:v,readOnly:I,isInvalid:_,isRequired:U,description:K,maxLength:e,intent:E,currentValue:u,activeIndex:m,slots:V,contextValue:{value:u,maxLength:e,slots:V,activeIndex:m,intent:E,disabled:v,readOnly:I,placeholder:j,type:i},handleChange:n=>{if(v||I)return;const a=n.target.value,d=z(a).slice(0,e);r&&r(d),t===void 0&&N(d);const x=Math.min(d.length,e-1);s.current&&s.current.setSelectionRange(x,x)},handleKeyDown:n=>{if(v||I)return;const a=(n.ctrlKey||n.metaKey)&&["a","c","v","x"].includes(n.key.toLowerCase());if(w.length>0&&w.includes(n.key)&&!a){n.preventDefault();return}switch(n.key){case fe:n.preventDefault();const g=u.length;if(g>0){const d=u.slice(0,g-1);r&&r(d),t===void 0&&N(d);const x=Math.max(0,d.length);s.current&&s.current.setSelectionRange(x,x)}break;case be:case me:n.preventDefault();break;case ve:case xe:n.preventDefault();break;case ye:case"E":i==="number"&&n.preventDefault();break}},handleCopy:n=>{v||(n.preventDefault(),u.length>0&&n.clipboardData.setData("text/plain",u))},handlePaste:n=>{if(v||I)return;n.preventDefault();const a=n.clipboardData.getData("text");if(!a)return;const d=z(a).slice(0,e);r&&r(d),t===void 0&&N(d);const x=Math.min(d.length,e-1);s.current&&s.current.setSelectionRange(x,x)},handleFocus:()=>{if(q(!0),s.current){const n=Math.min(u.length,e-1);s.current.setSelectionRange(n,n)}},handleBlur:()=>{q(!1)},handleClick:()=>{s.current&&s.current.focus()},labelId:F}},re=e=>{let i=0;return o.Children.forEach(e,t=>{if(o.isValidElement(t)){const c=t.props;t.type===D||t.type?.displayName==="InputOTP.Slot"?i++:c.children&&(i+=re(c.children))}}),i},se=(e,i=0)=>{let t=i;return[o.Children.map(e,r=>{if(o.isValidElement(r)){const p=r.props;if(r.type===D||r.type?.displayName==="InputOTP.Slot"){const f=typeof p.index=="number"?p.index:t++;return o.cloneElement(r,{...p,index:f})}else if(p.children){const[f,O]=se(p.children,t);return t=O,o.cloneElement(r,{...r.props,children:f})}}return r}),t]},ae=({maxLength:e,type:i="text",value:t,defaultValue:c="",onValueChange:r,isValid:p=!0,disabled:f=!1,readOnly:O=!1,autoFocus:y=!1,autoComplete:P="off",forceUppercase:w=!1,filterKeys:h=["-","."],pattern:j,inputMode:B,placeholder:W="-",name:s,className:Y,children:l,...S})=>{const k=o.useMemo(()=>{if(e!==void 0)return e;const C=re(l);return C>0?C:4},[e,l]),v=o.useMemo(()=>{const[C]=se(l);return C},[l]),{uuid:I,inputRef:_,containerRef:U,name:F,disabled:K,readOnly:R,isInvalid:$,isRequired:E,description:T,currentValue:M,contextValue:H,handleChange:N,handleKeyDown:A,handleCopy:q,handlePaste:u,handleFocus:m,handleBlur:V,handleClick:z,labelId:X}=he({maxLength:k,type:i,value:t,defaultValue:c,onValueChange:r,isValid:p,disabledProp:f,readOnlyProp:O,autoFocus:y,forceUppercase:w,filterKeys:h,pattern:j,placeholder:W,nameProp:s}),J="aria-label"in S?S["aria-label"]:void 0,{"aria-label":ie,...te}=S,G=X?{"aria-labelledby":X}:J?{"aria-label":J}:{};return b.jsx(ne.Provider,{value:H,children:b.jsxs("div",{ref:U,"data-spark-component":"input-otp",role:"group",...G,...T?{"aria-describedby":T}:{},className:L.cx("group gap-md relative inline-flex w-fit items-center default:cursor-text",{"cursor-not-allowed":K,"cursor-default":R},Y),onClick:z,...te,children:[F&&b.jsx("input",{type:"hidden",name:F,value:M,required:E,"aria-required":E,"aria-invalid":$,...G}),b.jsx("input",{ref:_,id:I,type:i==="password"?"password":"text",value:M,maxLength:k,autoFocus:y,autoComplete:P,disabled:K,readOnly:R,pattern:j,inputMode:B,...G,...T?{"aria-describedby":T}:{},"aria-invalid":$,onChange:N,onKeyDown:A,onCopy:q,onPaste:u,onFocus:m,onBlur:V,className:"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed",tabIndex:0}),v]})})};ae.displayName="InputOTP";const Z=({children:e,className:i,...t})=>b.jsx("div",{className:`gap-md flex ${i}`,...t,children:e});Z.displayName="InputOTP.Group";const ee=({className:e,...i})=>b.jsx("div",{className:`text-on-surface/dim-3 flex items-center justify-center ${e||""}`,...i,children:b.jsx("div",{className:"h-sz-4 w-sz-8 bg-outline rounded-full"})});ee.displayName="InputOTP.Separator";const oe=Object.assign(ae,{Group:Z,Slot:D,Separator:ee});oe.displayName="InputOTP";Z.displayName="InputOTP.Group";D.displayName="InputOTP.Slot";ee.displayName="InputOTP.Separator";exports.InputOTP=oe;exports.inputOTPSlotStyles=Q;exports.inputOTPStyles=pe;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/components/form-field`);var i=(0,t.createContext)(null),a=()=>{let e=(0,t.useContext)(i);if(!e)throw Error(`InputOTP components must be used within InputOTP`);return e};(0,e.cva)([`relative`,`inline-flex`,`items-center`,`gap-sm`]);var o=(0,e.cva)([`relative h-[50px] w-sz-40`,`border-sm rounded-md`,`text-center text-display-3 text-on-surface`,`outline-hidden`,`transition-colors`,`flex items-center justify-center`,`data-[active=true]:ring-1`,`data-[active=true]:ring-inset`,`data-[active=true]:ring-l-2`,`data-[active=true]:border-focus`,`data-[active=true]:z-raised ring-focus`,`data-[disabled=true]:cursor-not-allowed`,`data-[disabled=true]:border-outline`,`data-[disabled=true]:bg-on-surface/dim-5`,`data-[disabled=true]:text-on-surface/dim-3`,`data-[readonly=true]:cursor-default`,`data-[readonly=true]:data-[active=false]:border-outline`,`data-[readonly=true]:bg-on-surface/dim-5`,`group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high`],{variants:{intent:{neutral:[`data-[filled=true]:bg-neutral-container bg-surface border-outline`],success:[`border-success bg-success-container text-on-success-container`],alert:[`border-alert bg-alert-container text-on-alert-container`],error:[`border-error bg-error-container text-on-error-container`]}},defaultVariants:{intent:`neutral`}}),s=o,c=({index:e,className:t,...r})=>{let i=a(),s=e??0,c=i.slots[s];if(!c)return null;let{char:l,isActive:u,hasFakeCaret:d}=c,f=!l,p=f&&!d&&i.placeholder,m=s===i.activeIndex;return(0,n.jsxs)(`div`,{className:o({intent:i.intent,className:t}),"data-active":u,"data-disabled":i.disabled,"data-readonly":i.readOnly,"data-filled":!f,"data-focus-target":m,"data-valid":i.intent!==`error`,...r,children:[(0,n.jsx)(`span`,{className:p?`text-on-surface/dim-3`:``,children:i.type===`password`&&l?`•`:l||(!d&&i.placeholder?i.placeholder:``)}),d&&(0,n.jsx)(`span`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,"aria-hidden":`true`,children:(0,n.jsx)(`span`,{className:`bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2`})})]})};c.displayName=`InputOTP.Slot`;var l=`Backspace`,u=`ArrowLeft`,d=`ArrowUp`,f=`ArrowRight`,p=`ArrowDown`,m=`e`,h=({maxLength:e,type:n,value:i,defaultValue:a,onValueChange:o,isValid:s,disabledProp:c,readOnlyProp:h,autoFocus:g,forceUppercase:_,filterKeys:v,pattern:y,placeholder:b,nameProp:x})=>{let S=(0,t.useId)(),C=(0,t.useRef)(null),w=(0,t.useRef)(null),T=(0,r.useFormFieldControl)(),E=T.id??S,D=x??T.name,O=T.disabled??c,k=T.readOnly??h,A=T.isInvalid??!s,j=T.isRequired??!1,M=T.labelId,N=T.description,P=T.state,F=[`success`,`alert`,`error`].includes(P??``)?P:A?`error`:`neutral`,I=i===void 0?a:i,[L,R]=(0,t.useState)(_?I.toUpperCase():I),[z,B]=(0,t.useState)(!1),V=i===void 0?L:i,H=Math.min(V.length,e-1);(0,t.useEffect)(()=>{C.current&&C.current.setSelectionRange(H,H)},[H,V.length,e]);let U=(0,t.useMemo)(()=>Array.from({length:e},(e,t)=>({char:V[t]||``,isActive:t===H&&z,hasFakeCaret:t===H&&!V[t]&&!O&&!k&&z})),[e,V,H,z,O,k]);(0,t.useEffect)(()=>{C.current&&i!==void 0&&(C.current.value=i)},[i]),(0,t.useEffect)(()=>{g&&C.current&&C.current.focus()},[g]);let W=e=>{let t=e;if(_&&(t=t.toUpperCase()),n===`number`&&(t=t.replace(/[^\d]/g,``)),y)try{let e=y;y.startsWith(`^`)||(e=`^${y}$`);let n=new RegExp(e);t=t.split(``).filter(e=>n.test(e)).join(``)}catch(e){console.error(`Invalid pattern provided to InputOTP:`,y,e)}return t};return{uuid:E,inputRef:C,containerRef:w,name:D,disabled:O,readOnly:k,isInvalid:A,isRequired:j,description:N,maxLength:e,intent:F,currentValue:V,activeIndex:H,slots:U,contextValue:{value:V,maxLength:e,slots:U,activeIndex:H,intent:F,disabled:O,readOnly:k,placeholder:b,type:n},handleChange:t=>{if(O||k)return;let n=t.target.value,r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleKeyDown:e=>{if(O||k)return;let t=(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(e.key.toLowerCase());if(v.length>0&&v.includes(e.key)&&!t){e.preventDefault();return}switch(e.key){case l:e.preventDefault();let t=V.length;if(t>0){let e=V.slice(0,t-1);o&&o(e),i===void 0&&R(e);let n=Math.max(0,e.length);C.current&&C.current.setSelectionRange(n,n)}break;case u:case f:e.preventDefault();break;case d:case p:e.preventDefault();break;case m:case`E`:n===`number`&&e.preventDefault();break;default:break}},handleCopy:e=>{O||(e.preventDefault(),V.length>0&&e.clipboardData.setData(`text/plain`,V))},handlePaste:t=>{if(O||k)return;t.preventDefault();let n=t.clipboardData.getData(`text`);if(!n)return;let r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleFocus:()=>{if(B(!0),C.current){let t=Math.min(V.length,e-1);C.current.setSelectionRange(t,t)}},handleBlur:()=>{B(!1)},handleClick:()=>{C.current&&C.current.focus()},labelId:M}},g=e=>{let n=0;return t.Children.forEach(e,e=>{if((0,t.isValidElement)(e)){let t=e.props;e.type===c||e.type?.displayName===`InputOTP.Slot`?n++:t.children&&(n+=g(t.children))}}),n},_=(e,n=0)=>{let r=n;return[t.Children.map(e,e=>{if((0,t.isValidElement)(e)){let n=e.props;if(e.type===c||e.type?.displayName===`InputOTP.Slot`){let i=typeof n.index==`number`?n.index:r++;return(0,t.cloneElement)(e,{...n,index:i})}else if(n.children){let[i,a]=_(n.children,r);return r=a,(0,t.cloneElement)(e,{...e.props,children:i})}}return e}),r]},v=({maxLength:r,type:a=`text`,value:o,defaultValue:s=``,onValueChange:c,isValid:l=!0,disabled:u=!1,readOnly:d=!1,autoFocus:f=!1,autoComplete:p=`off`,forceUppercase:m=!1,filterKeys:v=[`-`,`.`],pattern:y,inputMode:b,placeholder:x=`-`,name:S,className:C,children:w,...T})=>{let E=(0,t.useMemo)(()=>{if(r!==void 0)return r;let e=g(w);return e>0?e:4},[r,w]),D=(0,t.useMemo)(()=>{let[e]=_(w);return e},[w]),{uuid:O,inputRef:k,containerRef:A,name:j,disabled:M,readOnly:N,isInvalid:P,isRequired:F,description:I,currentValue:L,contextValue:R,handleChange:z,handleKeyDown:B,handleCopy:V,handlePaste:H,handleFocus:U,handleBlur:W,handleClick:G,labelId:K}=h({maxLength:E,type:a,value:o,defaultValue:s,onValueChange:c,isValid:l,disabledProp:u,readOnlyProp:d,autoFocus:f,forceUppercase:m,filterKeys:v,pattern:y,placeholder:x,nameProp:S}),q=`aria-label`in T?T[`aria-label`]:void 0,{"aria-label":J,...Y}=T,X=K?{"aria-labelledby":K}:q?{"aria-label":q}:{};return(0,n.jsx)(i.Provider,{value:R,children:(0,n.jsxs)(`div`,{ref:A,"data-spark-component":`input-otp`,role:`group`,...X,...I?{"aria-describedby":I}:{},className:(0,e.cx)(`group gap-md relative inline-flex w-fit items-center default:cursor-text`,{"cursor-not-allowed":M,"cursor-default":N},C),onClick:G,...Y,children:[j&&(0,n.jsx)(`input`,{type:`hidden`,name:j,value:L,required:F,"aria-required":F,"aria-invalid":P,...X}),(0,n.jsx)(`input`,{ref:k,id:O,type:a===`password`?`password`:`text`,value:L,maxLength:E,autoFocus:f,autoComplete:p,disabled:M,readOnly:N,pattern:y,inputMode:b,...X,...I?{"aria-describedby":I}:{},"aria-invalid":P,onChange:z,onKeyDown:B,onCopy:V,onPaste:H,onFocus:U,onBlur:W,className:`bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed`,tabIndex:0}),D]})})};v.displayName=`InputOTP`;var y=({children:e,className:t,...r})=>(0,n.jsx)(`div`,{className:`gap-md flex ${t}`,...r,children:e});y.displayName=`InputOTP.Group`;var b=({className:e,...t})=>(0,n.jsx)(`div`,{className:`text-on-surface/dim-3 flex items-center justify-center ${e||``}`,...t,children:(0,n.jsx)(`div`,{className:`h-sz-4 w-sz-8 bg-outline rounded-full`})});b.displayName=`InputOTP.Separator`;var x=Object.assign(v,{Group:y,Slot:c,Separator:b});x.displayName=`InputOTP`,y.displayName=`InputOTP.Group`,c.displayName=`InputOTP.Slot`,b.displayName=`InputOTP.Separator`,exports.InputOTP=x,exports.inputOTPSlotStyles=o,exports.inputOTPStyles=s;
+//# sourceMappingURL=index.js.map