@spark-ui/components 14.1.2 → 15.1.0

package/dist/form-field/index.mjs

@@ -1,80 +1,81 @@
-import { jsx as r, jsxs as I, Fragment as H } from "react/jsx-runtime";
+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 W, useContext as L, useId as y, useState as P, useCallback as j, useMemo as X, useEffect as z } from "react";
-import { a as _, S as B } from "../Slot-D2Bbf8Gw.mjs";
-import { AlertOutline as G } from "@spark-ui/icons/AlertOutline";
-import { Check as J } from "@spark-ui/icons/Check";
-import { WarningOutline as K } from "@spark-ui/icons/WarningOutline";
+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 { a as X, S as _ } from "../Slot-D2Bbf8Gw.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-Ck-dhfLd.mjs";
-import { Label as O } from "../label/index.mjs";
-const C = W(null), x = ":form-field", b = () => {
+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;
-}, T = ({
+}, O = ({
   id: s,
   name: e,
-  disabled: o = !1,
+  disabled: a = !1,
   readOnly: l = !1,
-  state: a,
+  state: o,
   isRequired: i,
   children: d
 }) => {
-  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = j((f) => {
+  const t = `${x}-label-${I()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = q((f) => {
     m((h) => [...h, f]);
-  }, []), q = j((f) => {
-    m((h) => h.filter((D) => D !== f));
-  }, []), V = X(() => ({
+  }, []), j = q((f) => {
+    m((h) => h.filter((V) => V !== f));
+  }, []), w = W(() => ({
     id: s,
     labelId: t,
     name: e,
-    disabled: o,
+    disabled: a,
     readOnly: l,
-    state: a,
+    state: o,
     isRequired: i,
-    isInvalid: a === "error",
+    isInvalid: o === "error",
     description: p,
     onMessageIdAdd: u,
-    onMessageIdRemove: q
+    onMessageIdRemove: j
   }), [
     s,
     t,
     e,
-    o,
+    a,
     l,
     p,
-    a,
+    o,
     i,
     u,
-    q
+    j
   ]);
-  return /* @__PURE__ */ r(C.Provider, { value: V, children: d });
+  return /* @__PURE__ */ r(C.Provider, { value: w, children: d });
 };
-T.displayName = "FormFieldProvider";
-const w = ({
+O.displayName = "FormFieldProvider";
+const T = ({
   className: s,
   disabled: e = !1,
-  readOnly: o = !1,
+  readOnly: a = !1,
   name: l,
-  state: a,
+  state: o,
   isRequired: i = !1,
   asChild: d = !1,
   ref: t,
   ...n
 }) => {
-  const m = `${x}-${y()}`;
+  const m = `${x}-${I()}`;
   return /* @__PURE__ */ r(
-    T,
+    O,
     {
       id: m,
       name: l,
       isRequired: i,
       disabled: e,
-      readOnly: o,
-      state: a,
+      readOnly: a,
+      state: o,
       children: /* @__PURE__ */ r(
-        d ? _ : "div",
+        d ? X : "div",
         {
           ref: t,
           "data-spark-component": "form-field",
@@ -85,20 +86,20 @@ const w = ({
     }
   );
 };
-w.displayName = "FormField";
+T.displayName = "FormField";
 const g = ({
   id: s,
   className: e,
-  ref: o,
+  ref: a,
   ...l
 }) => {
-  const { onMessageIdAdd: a, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
-  return z(() => (a(t), () => {
+  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${I()}`, t = s || d;
+  return z(() => (o(t), () => {
     i(t);
-  }), [t, a, i]), /* @__PURE__ */ r(
+  }), [t, o, i]), /* @__PURE__ */ r(
     "span",
     {
-      ref: o,
+      ref: a,
       id: t,
       "data-spark-component": "form-field-message",
       className: c(e, "text-caption"),
@@ -110,10 +111,10 @@ g.displayName = "FormField.Message";
 const F = ({
   className: s,
   state: e,
-  children: o,
+  children: a,
   ref: l,
-  ...a
-}) => b().state !== e ? null : /* @__PURE__ */ I(
+  ...o
+}) => b().state !== e ? null : /* @__PURE__ */ N(
   g,
   {
     ref: l,
@@ -123,12 +124,12 @@ const F = ({
       e === "error" ? "text-error" : "text-on-surface/dim-1",
       s
     ),
-    ...a,
+    ...o,
     children: [
-      e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(K, {}) }),
-      e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(G, {}) }),
-      e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
-      o
+      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
     ]
   }
 );
@@ -146,9 +147,9 @@ v.displayName = "FormField.AlertMessage";
 const S = ({
   className: s,
   value: e = "",
-  maxLength: o,
+  maxLength: a,
   description: l,
-  liveAnnouncement: a,
+  liveAnnouncement: o,
   ref: i,
   ...d
 }) => {
@@ -158,7 +159,7 @@ const S = ({
       n(e);
     }, 1e3);
     return () => clearTimeout(m);
-  }, [e]), /* @__PURE__ */ I("span", { className: "ml-auto self-start", children: [
+  }, [e]), /* @__PURE__ */ N("span", { className: "ml-auto self-start", children: [
     l && /* @__PURE__ */ r(g, { className: "default:sr-only", children: l }),
     /* @__PURE__ */ r(
       "span",
@@ -168,21 +169,21 @@ const S = ({
         "data-spark-component": "form-field-characters-count",
         className: c(s, "text-caption", "text-neutral"),
         ...d,
-        children: `${e.length}/${o}`
+        children: `${e.length}/${a}`
       }
     ),
-    a && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: a({ remainingChars: o - t.length }) })
+    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: o, disabled: l, readOnly: a, state: i, labelId: d, isInvalid: t, isRequired: n } = L(C) || {};
+  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: o,
+    description: a,
     disabled: l,
-    readOnly: a,
+    readOnly: o,
     state: i,
     labelId: d,
     isInvalid: t,
@@ -193,7 +194,7 @@ const Q = () => {
   return /* @__PURE__ */ r(H, { children: s(e) });
 };
 k.displayName = "FormField.Control";
-const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
+const $ = ({ ref: s, ...e }) => /* @__PURE__ */ r(
   F,
   {
     ref: s,
@@ -202,49 +203,43 @@ const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
     ...e
   }
 );
-R.displayName = "FormField.ErrorMessage";
-const $ = ({
+$.displayName = "FormField.ErrorMessage";
+const R = ({
   className: s,
   ref: e,
-  ...o
+  ...a
 }) => /* @__PURE__ */ r(
   g,
   {
     ref: e,
     "data-spark-component": "form-field-helper-message",
     className: c("text-on-surface/dim-1", s),
-    ...o
+    ...a
   }
 );
-$.displayName = "FormField.HelperMessage";
-const N = ({
-  className: s,
-  ref: e,
-  ...o
-}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...o });
-N.displayName = "FormField.RequiredIndicator";
+R.displayName = "FormField.HelperMessage";
 const A = ({
   htmlFor: s,
   className: e,
-  children: o,
-  requiredIndicator: l = /* @__PURE__ */ r(N, {}),
-  asChild: a,
+  children: a,
+  requiredIndicator: l = /* @__PURE__ */ r(y, {}),
+  asChild: o,
   ref: i,
   ...d
 }) => {
-  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = a ? void 0 : s || t.id;
+  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
   return /* @__PURE__ */ r(
-    O,
+    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: a,
+      asChild: o,
       ...d,
-      children: /* @__PURE__ */ I(H, { children: [
-        /* @__PURE__ */ r(B, { children: o }),
+      children: /* @__PURE__ */ N(H, { children: [
+        /* @__PURE__ */ r(_, { children: a }),
         p && l
       ] })
     }
@@ -261,15 +256,15 @@ const E = ({ ref: s, ...e }) => /* @__PURE__ */ r(
   }
 );
 E.displayName = "FormField.SuccessMessage";
-const U = Object.assign(w, {
+const U = Object.assign(T, {
   Label: A,
   Control: k,
   StateMessage: F,
   SuccessMessage: E,
   AlertMessage: v,
-  ErrorMessage: R,
-  HelperMessage: $,
-  RequiredIndicator: N,
+  ErrorMessage: $,
+  HelperMessage: R,
+  RequiredIndicator: y,
   CharactersCount: S
 });
 U.displayName = "FormField";
@@ -278,9 +273,9 @@ k.displayName = "FormField.Control";
 F.displayName = "FormField.StateMessage";
 E.displayName = "FormField.SuccessMessage";
 v.displayName = "FormField.AlertMessage";
-R.displayName = "FormField.ErrorMessage";
-$.displayName = "FormField.HelperMessage";
-N.displayName = "FormField.RequiredIndicator";
+$.displayName = "FormField.ErrorMessage";
+R.displayName = "FormField.HelperMessage";
+y.displayName = "FormField.RequiredIndicator";
 S.displayName = "FormField.CharactersCount";
 export {
   U as FormField,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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/FormFieldRequiredIndicator.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\n  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 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-sm 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 { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\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"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldRequiredIndicator","Label","FormFieldLabel","htmlForProp","requiredIndicator","control","htmlFor","Slottable","FormFieldSuccessMessage","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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\n  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 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-sm 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"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldLabel","htmlForProp","requiredIndicator","FormFieldRequiredIndicator","control","htmlFor","Label","Slottable","FormFieldSuccessMessage","Root"],"mappings":"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"}

package/dist/slider/Slider.d.ts

@@ -1,28 +1,23 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { PropsWithChildren, Ref } from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
 import { SliderRangeVariantsProps } from './SliderTrack.styles';
-export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
+export interface SliderProps extends Omit<ComponentProps<typeof BaseSlider.Root>, 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'>, PropsWithChildren<SliderRangeVariantsProps> {
     /**
      * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
      */
-    defaultValue?: number[];
+    defaultValue?: number;
     /**
      * The controlled value of the slider. Must be used in conjunction with `onValueChange`.
      */
-    value?: number[];
+    value?: number;
     /**
      * Event handler called when the value changes.
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: (value: number) => void;
     /**
      * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
      */
-    onValueCommit?: (value: number[]) => void;
+    onValueCommit?: (value: number) => void;
     /**
      * The name of the slider. Submitted with its owning form as part of a name/value pair.
      * If wrapped with a FormField with a name, will be inherited from it.
@@ -55,6 +50,6 @@ export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orie
     ref?: Ref<HTMLDivElement>;
 }
 export declare const Slider: {
-    ({ asChild, intent, shape, children, className, ref, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, children, className, ref, value: valueProp, defaultValue: defaultValueProp, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, onValueChange, onValueCommit, min, max, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderContext.d.ts

@@ -1,7 +1,13 @@
+import { RefObject } from 'react';
 import { SliderProps } from './Slider';
-export type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {
+export type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {
     fieldLabelId?: string;
     fieldId?: string;
+    onLabelId?: (id: string | undefined) => void;
+    hasValueInThumb: boolean;
+    registerValueInThumb: () => () => void;
+    controlRef: RefObject<HTMLElement | null>;
+    thumbRef: RefObject<HTMLElement | null>;
 };
 export declare const SliderContext: import('react').Context<SliderContextInterface>;
 export declare const useSliderContext: () => SliderContextInterface;

package/dist/slider/SliderControl.d.ts

@@ -0,0 +1,7 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>;
+export declare const SliderControl: {
+    ({ className, ref, ...rest }: SliderControlProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderIndicator.d.ts

@@ -0,0 +1,7 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>;
+export declare const SliderIndicator: {
+    ({ className, ref, ...rest }: SliderIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderLabel.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, Ref } from 'react';
+import { LabelProps } from '../label';
+export interface SliderLabelProps extends LabelProps {
+    /**
+     * Element shown when the input is required inside the label.
+     */
+    requiredIndicator?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+export declare const SliderLabel: {
+    ({ htmlFor: htmlForProp, id: idProp, className, children, requiredIndicator, asChild, ref, ...others }: SliderLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderMaxValue.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface SliderMaxValueProps {
+    className?: string;
+    children?: (value: number) => ReactNode;
+}
+export declare const SliderMaxValue: import('react').ForwardRefExoticComponent<SliderMaxValueProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/slider/SliderMinValue.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface SliderMinValueProps {
+    className?: string;
+    children?: (value: number) => ReactNode;
+}
+export declare const SliderMinValue: import('react').ForwardRefExoticComponent<SliderMinValueProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/slider/SliderThumb.d.ts

@@ -1,14 +1,7 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { Ref } from 'react';
-export interface SliderThumbProps extends RadixSlider.SliderThumbProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLSpanElement>;
-}
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps, PropsWithChildren } from 'react';
+export type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> & PropsWithChildren;
 export declare const SliderThumb: {
-    ({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ref: forwardedRef, children, ...rest }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderThumbContext.d.ts

@@ -0,0 +1,5 @@
+export interface SliderThumbContextValue {
+    isInsideThumb: true;
+}
+export declare const SliderThumbContext: import('react').Context<SliderThumbContextValue | null>;
+export declare const useSliderThumbContext: () => SliderThumbContextValue | null;

package/dist/slider/SliderTrack.d.ts

@@ -1,14 +1,7 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { Ref } from 'react';
-export interface SliderTrackProps extends RadixSlider.SliderTrackProps, RadixSlider.SliderRangeProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>;
 export declare const SliderTrack: {
-    ({ asChild, className, ref, ...rest }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ref, ...rest }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderTrack.styles.d.ts

@@ -1,9 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
-export declare const trackVariants: (props?: ({
-    shape?: "square" | "rounded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const rangeVariants: (props?: ({
     intent?: "main" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
-    shape?: "square" | "rounded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;

package/dist/slider/SliderValue.d.ts

@@ -0,0 +1,10 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>;
+/**
+ * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.
+ */
+export declare const SliderValue: {
+    ({ className, children, ref, ...rest }: SliderValueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};