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

package/dist/form-field/index.mjs

@@ -1,284 +1,2 @@
-import { jsx as r, jsxs as N, Fragment as H } from "react/jsx-runtime";
-import { cx as c } from "class-variance-authority";
-import { createContext as D, useContext as L, useId as I, useState as P, useCallback as q, useMemo as W, useEffect as z } from "react";
-import { S as X, a as _ } from "../Slot-DLY1rJrG.mjs";
-import { AlertOutline as B } from "@spark-ui/icons/AlertOutline";
-import { Check as G } from "@spark-ui/icons/Check";
-import { WarningOutline as J } from "@spark-ui/icons/WarningOutline";
-import { I as M } from "../Icon-BO327oHU.mjs";
-import { Label as K } from "../label/index.mjs";
-import { F as y } from "../FormFieldRequiredIndicator-DTnCGiX2.mjs";
-const C = D(null), x = ":form-field", b = () => {
-  const s = L(C);
-  if (!s)
-    throw Error("useFormField must be used within a FormField provider");
-  return s;
-}, O = ({
-  id: s,
-  name: e,
-  disabled: a = !1,
-  readOnly: l = !1,
-  state: o,
-  isRequired: i,
-  children: d
-}) => {
-  const t = `${x}-label-${I()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = q((f) => {
-    m((h) => [...h, f]);
-  }, []), j = q((f) => {
-    m((h) => h.filter((V) => V !== f));
-  }, []), w = W(() => ({
-    id: s,
-    labelId: t,
-    name: e,
-    disabled: a,
-    readOnly: l,
-    state: o,
-    isRequired: i,
-    isInvalid: o === "error",
-    description: p,
-    onMessageIdAdd: u,
-    onMessageIdRemove: j
-  }), [
-    s,
-    t,
-    e,
-    a,
-    l,
-    p,
-    o,
-    i,
-    u,
-    j
-  ]);
-  return /* @__PURE__ */ r(C.Provider, { value: w, children: d });
-};
-O.displayName = "FormFieldProvider";
-const T = ({
-  className: s,
-  disabled: e = !1,
-  readOnly: a = !1,
-  name: l,
-  state: o,
-  isRequired: i = !1,
-  asChild: d = !1,
-  ref: t,
-  ...n
-}) => {
-  const m = `${x}-${I()}`;
-  return /* @__PURE__ */ r(
-    O,
-    {
-      id: m,
-      name: l,
-      isRequired: i,
-      disabled: e,
-      readOnly: a,
-      state: o,
-      children: /* @__PURE__ */ r(
-        d ? X : "div",
-        {
-          ref: t,
-          "data-spark-component": "form-field",
-          className: c(s, "gap-md flex flex-col"),
-          ...n
-        }
-      )
-    }
-  );
-};
-T.displayName = "FormField";
-const g = ({
-  id: s,
-  className: e,
-  ref: a,
-  ...l
-}) => {
-  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${I()}`, t = s || d;
-  return z(() => (o(t), () => {
-    i(t);
-  }), [t, o, i]), /* @__PURE__ */ r(
-    "span",
-    {
-      ref: a,
-      id: t,
-      "data-spark-component": "form-field-message",
-      className: c(e, "text-caption"),
-      ...l
-    }
-  );
-};
-g.displayName = "FormField.Message";
-const F = ({
-  className: s,
-  state: e,
-  children: a,
-  ref: l,
-  ...o
-}) => b().state !== e ? null : /* @__PURE__ */ N(
-  g,
-  {
-    ref: l,
-    "data-spark-component": "form-field-state-message",
-    className: c(
-      "gap-sm flex items-center",
-      e === "error" ? "text-error" : "text-on-surface/dim-1",
-      s
-    ),
-    ...o,
-    children: [
-      e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
-      e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(B, {}) }),
-      e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(G, {}) }),
-      a
-    ]
-  }
-);
-F.displayName = "FormField.StateMessage";
-const v = ({ ref: s, ...e }) => /* @__PURE__ */ r(
-  F,
-  {
-    ref: s,
-    "data-spark-component": "form-field-alert-message",
-    state: "alert",
-    ...e
-  }
-);
-v.displayName = "FormField.AlertMessage";
-const S = ({
-  className: s,
-  value: e = "",
-  maxLength: a,
-  description: l,
-  liveAnnouncement: o,
-  ref: i,
-  ...d
-}) => {
-  const [t, n] = P(e);
-  return z(() => {
-    const m = setTimeout(() => {
-      n(e);
-    }, 1e3);
-    return () => clearTimeout(m);
-  }, [e]), /* @__PURE__ */ N("span", { className: "ml-auto self-start", children: [
-    l && /* @__PURE__ */ r(g, { className: "default:sr-only", children: l }),
-    /* @__PURE__ */ r(
-      "span",
-      {
-        ref: i,
-        "aria-hidden": !0,
-        "data-spark-component": "form-field-characters-count",
-        className: c(s, "text-caption", "text-neutral"),
-        ...d,
-        children: `${e.length}/${a}`
-      }
-    ),
-    o && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: o({ remainingChars: a - t.length }) })
-  ] });
-};
-S.displayName = "FormField.CharactersCount";
-const Q = () => {
-  const { id: s, name: e, description: a, disabled: l, readOnly: o, state: i, labelId: d, isInvalid: t, isRequired: n } = L(C) || {};
-  return {
-    id: s,
-    name: e,
-    description: a,
-    disabled: l,
-    readOnly: o,
-    state: i,
-    labelId: d,
-    isInvalid: t,
-    isRequired: n
-  };
-}, k = ({ children: s }) => {
-  const e = Q();
-  return /* @__PURE__ */ r(H, { children: s(e) });
-};
-k.displayName = "FormField.Control";
-const $ = ({ ref: s, ...e }) => /* @__PURE__ */ r(
-  F,
-  {
-    ref: s,
-    "data-spark-component": "form-field-error-message",
-    state: "error",
-    ...e
-  }
-);
-$.displayName = "FormField.ErrorMessage";
-const R = ({
-  className: s,
-  ref: e,
-  ...a
-}) => /* @__PURE__ */ r(
-  g,
-  {
-    ref: e,
-    "data-spark-component": "form-field-helper-message",
-    className: c("text-on-surface/dim-1", s),
-    ...a
-  }
-);
-R.displayName = "FormField.HelperMessage";
-const A = ({
-  htmlFor: s,
-  className: e,
-  children: a,
-  requiredIndicator: l = /* @__PURE__ */ r(y, {}),
-  asChild: o,
-  ref: i,
-  ...d
-}) => {
-  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
-  return /* @__PURE__ */ r(
-    K,
-    {
-      ref: i,
-      id: m,
-      "data-spark-component": "form-field-label",
-      htmlFor: u,
-      className: c(e, n ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild: o,
-      ...d,
-      children: /* @__PURE__ */ N(H, { children: [
-        /* @__PURE__ */ r(_, { children: a }),
-        p && l
-      ] })
-    }
-  );
-};
-A.displayName = "FormField.Label";
-const E = ({ ref: s, ...e }) => /* @__PURE__ */ r(
-  F,
-  {
-    ref: s,
-    "data-spark-component": "form-field-success-message",
-    state: "success",
-    ...e
-  }
-);
-E.displayName = "FormField.SuccessMessage";
-const U = Object.assign(T, {
-  Label: A,
-  Control: k,
-  StateMessage: F,
-  SuccessMessage: E,
-  AlertMessage: v,
-  ErrorMessage: $,
-  HelperMessage: R,
-  RequiredIndicator: y,
-  CharactersCount: S
-});
-U.displayName = "FormField";
-A.displayName = "FormField.Label";
-k.displayName = "FormField.Control";
-F.displayName = "FormField.StateMessage";
-E.displayName = "FormField.SuccessMessage";
-v.displayName = "FormField.AlertMessage";
-$.displayName = "FormField.ErrorMessage";
-R.displayName = "FormField.HelperMessage";
-y.displayName = "FormField.RequiredIndicator";
-S.displayName = "FormField.CharactersCount";
-export {
-  U as FormField,
-  Q as useFormFieldControl
-};
-//# sourceMappingURL=index.mjs.map
+import { n as e, t } from "../form-field-B8QzM655.mjs";
+export { t as FormField, e as useFormFieldControl };

package/dist/form-field-B8QzM655.mjs

@@ -0,0 +1,231 @@
+import { Slot as e, Slottable as t } from "./slot/index.mjs";
+import { t as n } from "./icon-D05Uqh8_.mjs";
+import { t as r } from "./label-BqRlrca0.mjs";
+import { t as i } from "./FormFieldRequiredIndicator-DOGQ_HxO.mjs";
+import { cx as a } from "class-variance-authority";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useMemo as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Check as g } from "@spark-ui/icons/Check";
+import { WarningOutline as _ } from "@spark-ui/icons/WarningOutline";
+import { AlertOutline as v } from "@spark-ui/icons/AlertOutline";
+//#region src/form-field/FormFieldContext.tsx
+var y = o(null), b = ":form-field", x = () => {
+	let e = c(y);
+	if (!e) throw Error("useFormField must be used within a FormField provider");
+	return e;
+}, S = ({ id: e, name: t, disabled: n = !1, readOnly: r = !1, state: i, isRequired: a, children: o }) => {
+	let c = `${b}-label-${u()}`, [l, p] = f([]), h = l.length > 0 ? l.join(" ") : void 0, g = s((e) => {
+		p((t) => [...t, e]);
+	}, []), _ = s((e) => {
+		p((t) => t.filter((t) => t !== e));
+	}, []), v = d(() => ({
+		id: e,
+		labelId: c,
+		name: t,
+		disabled: n,
+		readOnly: r,
+		state: i,
+		isRequired: a,
+		isInvalid: i === "error",
+		description: h,
+		onMessageIdAdd: g,
+		onMessageIdRemove: _
+	}), [
+		e,
+		c,
+		t,
+		n,
+		r,
+		h,
+		i,
+		a,
+		g,
+		_
+	]);
+	return /* @__PURE__ */ m(y.Provider, {
+		value: v,
+		children: o
+	});
+};
+S.displayName = "FormFieldProvider";
+//#endregion
+//#region src/form-field/FormField.tsx
+var C = ({ className: t, disabled: n = !1, readOnly: r = !1, name: i, state: o, isRequired: s = !1, asChild: c = !1, ref: l, ...d }) => /* @__PURE__ */ m(S, {
+	id: `${b}-${u()}`,
+	name: i,
+	isRequired: s,
+	disabled: n,
+	readOnly: r,
+	state: o,
+	children: /* @__PURE__ */ m(c ? e : "div", {
+		ref: l,
+		"data-spark-component": "form-field",
+		className: a(t, "gap-md flex flex-col"),
+		...d
+	})
+});
+C.displayName = "FormField";
+//#endregion
+//#region src/form-field/FormFieldMessage.tsx
+var w = ({ id: e, className: t, ref: n, ...r }) => {
+	let { onMessageIdAdd: i, onMessageIdRemove: o } = x(), s = `${b}-message-${u()}`, c = e || s;
+	return l(() => (i(c), () => {
+		o(c);
+	}), [
+		c,
+		i,
+		o
+	]), /* @__PURE__ */ m("span", {
+		ref: n,
+		id: c,
+		"data-spark-component": "form-field-message",
+		className: a(t, "text-caption"),
+		...r
+	});
+};
+w.displayName = "FormField.Message";
+//#endregion
+//#region src/form-field/FormFieldStateMessage.tsx
+var T = ({ className: e, state: t, children: r, ref: i, ...o }) => x().state === t ? /* @__PURE__ */ h(w, {
+	ref: i,
+	"data-spark-component": "form-field-state-message",
+	className: a("gap-sm flex items-center", t === "error" ? "text-error" : "text-on-surface/dim-1", e),
+	...o,
+	children: [
+		t === "alert" && /* @__PURE__ */ m(n, {
+			size: "sm",
+			children: /* @__PURE__ */ m(_, {})
+		}),
+		t === "error" && /* @__PURE__ */ m(n, {
+			size: "sm",
+			intent: "error",
+			children: /* @__PURE__ */ m(v, {})
+		}),
+		t === "success" && /* @__PURE__ */ m(n, {
+			size: "sm",
+			children: /* @__PURE__ */ m(g, {})
+		}),
+		r
+	]
+}) : null;
+T.displayName = "FormField.StateMessage";
+//#endregion
+//#region src/form-field/FormFieldAlertMessage.tsx
+var E = ({ ref: e, ...t }) => /* @__PURE__ */ m(T, {
+	ref: e,
+	"data-spark-component": "form-field-alert-message",
+	state: "alert",
+	...t
+});
+E.displayName = "FormField.AlertMessage";
+//#endregion
+//#region src/form-field/FormFieldCharactersCount.tsx
+var D = ({ className: e, value: t = "", maxLength: n, description: r, liveAnnouncement: i, ref: o, ...s }) => {
+	let [c, u] = f(t);
+	return l(() => {
+		let e = setTimeout(() => {
+			u(t);
+		}, 1e3);
+		return () => clearTimeout(e);
+	}, [t]), /* @__PURE__ */ h("span", {
+		className: "ml-auto self-start",
+		children: [
+			r && /* @__PURE__ */ m(w, {
+				className: "default:sr-only",
+				children: r
+			}),
+			/* @__PURE__ */ m("span", {
+				ref: o,
+				"aria-hidden": !0,
+				"data-spark-component": "form-field-characters-count",
+				className: a(e, "text-caption", "text-neutral"),
+				...s,
+				children: `${t.length}/${n}`
+			}),
+			i && /* @__PURE__ */ m("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: i({ remainingChars: n - c.length })
+			})
+		]
+	});
+};
+D.displayName = "FormField.CharactersCount";
+//#endregion
+//#region src/form-field/FormFieldControl.tsx
+var O = () => {
+	let { id: e, name: t, description: n, disabled: r, readOnly: i, state: a, labelId: o, isInvalid: s, isRequired: l } = c(y) || {};
+	return {
+		id: e,
+		name: t,
+		description: n,
+		disabled: r,
+		readOnly: i,
+		state: a,
+		labelId: o,
+		isInvalid: s,
+		isRequired: l
+	};
+}, k = ({ children: e }) => /* @__PURE__ */ m(p, { children: e(O()) });
+k.displayName = "FormField.Control";
+//#endregion
+//#region src/form-field/FormFieldErrorMessage.tsx
+var A = ({ ref: e, ...t }) => /* @__PURE__ */ m(T, {
+	ref: e,
+	"data-spark-component": "form-field-error-message",
+	state: "error",
+	...t
+});
+A.displayName = "FormField.ErrorMessage";
+//#endregion
+//#region src/form-field/FormFieldHelperMessage.tsx
+var j = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ m(w, {
+	ref: t,
+	"data-spark-component": "form-field-helper-message",
+	className: a("text-on-surface/dim-1", e),
+	...n
+});
+j.displayName = "FormField.HelperMessage";
+//#endregion
+//#region src/form-field/FormFieldLabel.tsx
+var M = ({ htmlFor: e, className: n, children: o, requiredIndicator: s = /* @__PURE__ */ m(i, {}), asChild: c, ref: l, ...u }) => {
+	let d = x(), { disabled: f, labelId: g, isRequired: _ } = d, v = c ? void 0 : e || d.id;
+	return /* @__PURE__ */ m(r, {
+		ref: l,
+		id: g,
+		"data-spark-component": "form-field-label",
+		htmlFor: v,
+		className: a(n, f ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+		asChild: c,
+		...u,
+		children: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, { children: o }), _ && s] })
+	});
+};
+M.displayName = "FormField.Label";
+//#endregion
+//#region src/form-field/FormFieldSuccessMessage.tsx
+var N = ({ ref: e, ...t }) => /* @__PURE__ */ m(T, {
+	ref: e,
+	"data-spark-component": "form-field-success-message",
+	state: "success",
+	...t
+});
+N.displayName = "FormField.SuccessMessage";
+//#endregion
+//#region src/form-field/index.ts
+var P = Object.assign(C, {
+	Label: M,
+	Control: k,
+	StateMessage: T,
+	SuccessMessage: N,
+	AlertMessage: E,
+	ErrorMessage: A,
+	HelperMessage: j,
+	RequiredIndicator: i,
+	CharactersCount: D
+});
+P.displayName = "FormField", M.displayName = "FormField.Label", k.displayName = "FormField.Control", T.displayName = "FormField.StateMessage", N.displayName = "FormField.SuccessMessage", E.displayName = "FormField.AlertMessage", A.displayName = "FormField.ErrorMessage", j.displayName = "FormField.HelperMessage", i.displayName = "FormField.RequiredIndicator", D.displayName = "FormField.CharactersCount";
+//#endregion
+export { O as n, P as t };
+
+//# sourceMappingURL=form-field-B8QzM655.mjs.map

package/dist/form-field-B8QzM655.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-B8QzM655.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/form-field-Bu_0E9tb.js

@@ -0,0 +1,2 @@
+require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-DU0p0d-f.js`),r=require(`./FormFieldRequiredIndicator-CtgkvPZo.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});x.displayName=`FormField.ErrorMessage`;var S=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});S.displayName=`FormField.HelperMessage`;var C=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p,_=l?void 0:t||p.id;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:_,className:(0,i.cx)(a,m?`text-on-surface/dim-3 pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};C.displayName=`FormField.Label`;var w=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});w.displayName=`FormField.SuccessMessage`;var T=Object.assign(m,{Label:C,Control:b,StateMessage:g,SuccessMessage:w,AlertMessage:_,ErrorMessage:x,HelperMessage:S,RequiredIndicator:r.t,CharactersCount:v});T.displayName=`FormField`,C.displayName=`FormField.Label`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,w.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,x.displayName=`FormField.ErrorMessage`,S.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return T}});
+//# sourceMappingURL=form-field-Bu_0E9tb.js.map

package/dist/form-field-Bu_0E9tb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-Bu_0E9tb.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/icon/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Icon-C-cNTnzd.js");exports.Icon=e.Icon;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../icon-CRPcdgYp.js`);exports.Icon=e.t;

package/dist/icon/index.mjs

@@ -1,5 +1,2 @@
-import { I } from "../Icon-BO327oHU.mjs";
-export {
-  I as Icon
-};
-//# sourceMappingURL=index.mjs.map
+import { t as e } from "../icon-D05Uqh8_.mjs";
+export { e as Icon };

package/dist/icon-CRPcdgYp.js

@@ -0,0 +1,2 @@
+require(`./chunk-C91j1N6u.js`);const e=require(`./visually-hidden/index.js`);let t=require(`class-variance-authority`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`);var a=(0,t.cva)([`fill-current shrink-0`],{variants:{intent:(0,i.makeVariants)({current:[`text-current`],main:[`text-main`],support:[`text-support`],accent:[`text-accent`],success:[`text-success`],alert:[`text-alert`],error:[`text-error`],info:[`text-info`],neutral:[`text-neutral`]}),size:(0,i.makeVariants)({current:[`u-current-font-size`],sm:[`w-sz-16`,`h-sz-16`],md:[`w-sz-24`,`h-sz-24`],lg:[`w-sz-32`,`h-sz-32`],xl:[`w-sz-40`,`h-sz-40`]})}}),o=({label:t,className:i,size:o=`current`,intent:s=`current`,children:c,...l})=>(0,r.jsxs)(r.Fragment,{children:[(0,n.cloneElement)(n.Children.only(c),{className:a({className:i,size:o,intent:s}),"data-spark-component":`icon`,"aria-hidden":`true`,focusable:`false`,...l}),t&&(0,r.jsx)(e.VisuallyHidden,{children:t})]});o.displayName=`Icon`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=icon-CRPcdgYp.js.map