@spark-ui/components 13.1.2 → 13.1.4

package/dist/form-field/index.mjs

@@ -1,289 +1,392 @@
-import { jsx as r, jsxs as I, Fragment as j } from "react/jsx-runtime";
-import { a as c } from "../index-BmAFn37q.mjs";
-import { createContext as W, useContext as H, useId as y, useState as P, useCallback as L, useMemo as X, useEffect as z } from "react";
-import { a as _, S as B } from "../Slot-C98rL4yy.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 { I as M } from "../Icon-D1RueiPY.mjs";
-import { L as O } from "../index-C34GgsKQ.mjs";
-const C = W(null), x = ":form-field", b = () => {
-  const s = H(C);
-  if (!s)
+import {
+  Label
+} from "../chunk-HLXYG643.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import {
+  Slot,
+  Slottable
+} from "../chunk-6QCEPQ3U.mjs";
+
+// src/form-field/FormField.tsx
+import { cx } from "class-variance-authority";
+import { useId as useId2 } from "react";
+
+// src/form-field/FormFieldContext.tsx
+import { createContext, useContext } from "react";
+var FormFieldContext = createContext(null);
+var ID_PREFIX = ":form-field";
+var useFormField = () => {
+  const context = useContext(FormFieldContext);
+  if (!context) {
     throw Error("useFormField must be used within a FormField provider");
-  return s;
-}, T = ({
-  id: s,
-  name: e,
-  disabled: a = !1,
-  readOnly: l = !1,
-  state: o,
-  isRequired: i,
-  children: d
+  }
+  return context;
+};
+
+// src/form-field/FormFieldProvider.tsx
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var FormFieldProvider = ({
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  state,
+  isRequired,
+  children
 }) => {
-  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = L((f) => {
-    m((h) => [...h, f]);
-  }, []), q = L((f) => {
-    m((h) => h.filter((D) => D !== f));
-  }, []), V = X(() => ({
-    id: s,
-    labelId: t,
-    name: e,
-    disabled: a,
-    readOnly: l,
-    state: o,
-    isRequired: i,
-    isInvalid: o === "error",
-    description: p,
-    onMessageIdAdd: u,
-    onMessageIdRemove: q
-  }), [
-    s,
-    t,
-    e,
-    a,
-    l,
-    p,
-    o,
-    i,
-    u,
-    q
+  const labelId = `${ID_PREFIX}-label-${useId()}`;
+  const [messageIds, setMessageIds] = useState([]);
+  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
+  const handleMessageIdAdd = useCallback((msgId) => {
+    setMessageIds((ids) => [...ids, msgId]);
+  }, []);
+  const handleMessageIdRemove = useCallback((msgId) => {
+    setMessageIds((ids) => ids.filter((current) => current !== msgId));
+  }, []);
+  const value = useMemo(() => {
+    const isInvalid = state === "error";
+    return {
+      id,
+      labelId,
+      name,
+      disabled,
+      readOnly,
+      state,
+      isRequired,
+      isInvalid,
+      description,
+      onMessageIdAdd: handleMessageIdAdd,
+      onMessageIdRemove: handleMessageIdRemove
+    };
+  }, [
+    id,
+    labelId,
+    name,
+    disabled,
+    readOnly,
+    description,
+    state,
+    isRequired,
+    handleMessageIdAdd,
+    handleMessageIdRemove
   ]);
-  return /* @__PURE__ */ r(C.Provider, { value: V, children: d });
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
 };
-T.displayName = "FormFieldProvider";
-const w = ({
-  className: s,
-  disabled: e = !1,
-  readOnly: a = !1,
-  name: l,
-  state: o,
-  isRequired: i = !1,
-  asChild: d = !1,
-  ref: t,
-  ...n
+FormFieldProvider.displayName = "FormFieldProvider";
+
+// src/form-field/FormField.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
 }) => {
-  const m = `${x}-${y()}`;
-  return /* @__PURE__ */ r(
-    T,
+  const id = `${ID_PREFIX}-${useId2()}`;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx2(
+    FormFieldProvider,
     {
-      id: m,
-      name: l,
-      isRequired: i,
-      disabled: e,
-      readOnly: a,
-      state: o,
-      children: /* @__PURE__ */ r(
-        d ? _ : "div",
+      id,
+      name,
+      isRequired,
+      disabled,
+      readOnly,
+      state,
+      children: /* @__PURE__ */ jsx2(
+        Component,
         {
-          ref: t,
+          ref,
           "data-spark-component": "form-field",
-          className: c(s, "gap-sm flex flex-col"),
-          ...n
+          className: cx(className, "gap-sm flex flex-col"),
+          ...others
         }
       )
     }
   );
 };
-w.displayName = "FormField";
-const g = ({
-  id: s,
-  className: e,
-  ref: a,
-  ...l
+FormField.displayName = "FormField";
+
+// src/form-field/FormFieldStateMessage.tsx
+import { AlertOutline } from "@spark-ui/icons/AlertOutline";
+import { Check } from "@spark-ui/icons/Check";
+import { WarningOutline } from "@spark-ui/icons/WarningOutline";
+import { cx as cx3 } from "class-variance-authority";
+
+// src/form-field/FormFieldMessage.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { useEffect, useId as useId3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FormFieldMessage = ({
+  id: idProp,
+  className,
+  ref,
+  ...others
 }) => {
-  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
-  return z(() => (o(t), () => {
-    i(t);
-  }), [t, o, i]), /* @__PURE__ */ r(
+  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
+  const currentId = `${ID_PREFIX}-message-${useId3()}`;
+  const id = idProp || currentId;
+  useEffect(() => {
+    onMessageIdAdd(id);
+    return () => {
+      onMessageIdRemove(id);
+    };
+  }, [id, onMessageIdAdd, onMessageIdRemove]);
+  return /* @__PURE__ */ jsx3(
     "span",
     {
-      ref: a,
-      id: t,
+      ref,
+      id,
       "data-spark-component": "form-field-message",
-      className: c(e, "text-caption"),
-      ...l
+      className: cx2(className, "text-caption"),
+      ...others
     }
   );
 };
-g.displayName = "FormField.Message";
-const F = ({
-  className: s,
-  state: e,
-  children: a,
-  ref: l,
-  ...o
-}) => b().state !== e ? null : /* @__PURE__ */ I(
-  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(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, {}) }),
-      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
+FormFieldMessage.displayName = "FormField.Message";
+
+// src/form-field/FormFieldStateMessage.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var FormFieldStateMessage = ({
+  className,
+  state,
+  children,
+  ref,
+  ...others
+}) => {
+  const field = useFormField();
+  if (field.state !== state) {
+    return null;
   }
-);
-v.displayName = "FormField.AlertMessage";
-const S = ({
-  className: s,
-  value: e = "",
-  maxLength: a,
-  description: l,
-  liveAnnouncement: o,
-  ref: i,
-  ...d
+  return /* @__PURE__ */ jsxs(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-state-message",
+      className: cx3(
+        "gap-sm flex items-center",
+        state === "error" ? "text-error" : "text-on-surface/dim-1",
+        className
+      ),
+      ...others,
+      children: [
+        state === "alert" && /* @__PURE__ */ jsx4(Icon, { size: "sm", children: /* @__PURE__ */ jsx4(WarningOutline, {}) }),
+        state === "error" && /* @__PURE__ */ jsx4(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ jsx4(AlertOutline, {}) }),
+        state === "success" && /* @__PURE__ */ jsx4(Icon, { size: "sm", children: /* @__PURE__ */ jsx4(Check, {}) }),
+        children
+      ]
+    }
+  );
+};
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+
+// src/form-field/FormFieldAlertMessage.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var FormFieldAlertMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ jsx5(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-alert-message",
+      state: "alert",
+      ...props
+    }
+  );
+};
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+
+// src/form-field/FormFieldCharactersCount.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormFieldCharactersCount = ({
+  className,
+  value = "",
+  maxLength,
+  description,
+  liveAnnouncement,
+  ref,
+  ...others
 }) => {
-  const [t, n] = P(e);
-  return z(() => {
-    const m = setTimeout(() => {
-      n(e);
+  const [throttledValue, setThrottledValue] = useState2(value);
+  useEffect2(() => {
+    const timeoutId = setTimeout(() => {
+      setThrottledValue(value);
     }, 1e3);
-    return () => clearTimeout(m);
-  }, [e]), /* @__PURE__ */ I("span", { className: "ml-auto self-start", children: [
-    l && /* @__PURE__ */ r(g, { className: "default:sr-only", children: l }),
-    /* @__PURE__ */ r(
+    return () => clearTimeout(timeoutId);
+  }, [value]);
+  return /* @__PURE__ */ jsxs2("span", { className: "ml-auto self-start", children: [
+    description && /* @__PURE__ */ jsx6(FormFieldMessage, { className: "default:sr-only", children: description }),
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        ref: i,
-        "aria-hidden": !0,
+        ref,
+        "aria-hidden": true,
         "data-spark-component": "form-field-characters-count",
-        className: c(s, "text-caption", "text-neutral"),
-        ...d,
-        children: `${e.length}/${a}`
+        className: cx4(className, "text-caption", "text-neutral"),
+        ...others,
+        children: `${value.length}/${maxLength}`
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: o({ remainingChars: a - t.length }) })
+    liveAnnouncement && /* @__PURE__ */ jsx6("span", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement({ remainingChars: maxLength - throttledValue.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 } = H(C) || {};
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/form-field/FormFieldControl.tsx
+import { useContext as useContext2 } from "react";
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+var useFormFieldControl = () => {
+  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = useContext2(FormFieldContext) || {};
   return {
-    id: s,
-    name: e,
-    description: a,
-    disabled: l,
-    readOnly: o,
-    state: i,
-    labelId: d,
-    isInvalid: t,
-    isRequired: n
+    id,
+    name,
+    description,
+    disabled,
+    readOnly,
+    state,
+    labelId,
+    isInvalid,
+    isRequired
   };
-}, k = ({ children: s }) => {
-  const e = Q();
-  return /* @__PURE__ */ r(j, { children: s(e) });
 };
-k.displayName = "FormField.Control";
-const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
-  F,
-  {
-    ref: s,
-    "data-spark-component": "form-field-error-message",
-    state: "error",
-    ...e
-  }
-);
-R.displayName = "FormField.ErrorMessage";
-const $ = ({
-  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
-  }
-);
-$.displayName = "FormField.HelperMessage";
-const N = ({
-  className: s,
-  ref: e,
-  ...a
-}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...a });
-N.displayName = "FormField.RequiredIndicator";
-const A = ({
-  htmlFor: s,
-  className: e,
-  children: a,
-  requiredIndicator: l = /* @__PURE__ */ r(N, {}),
-  asChild: o,
-  ref: i,
-  ...d
+var FormFieldControl = ({ children }) => {
+  const props = useFormFieldControl();
+  return /* @__PURE__ */ jsx7(Fragment, { children: children(props) });
+};
+FormFieldControl.displayName = "FormField.Control";
+
+// src/form-field/FormFieldErrorMessage.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FormFieldErrorMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ jsx8(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-error-message",
+      state: "error",
+      ...props
+    }
+  );
+};
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+
+// src/form-field/FormFieldHelperMessage.tsx
+import { cx as cx5 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FormFieldHelperMessage = ({
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx9(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-helper-message",
+      className: cx5("text-on-surface/dim-1", className),
+      ...others
+    }
+  );
+};
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+
+// src/form-field/FormFieldLabel.tsx
+import { cx as cx7 } from "class-variance-authority";
+
+// src/form-field/FormFieldRequiredIndicator.tsx
+import { cx as cx6 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var FormFieldRequiredIndicator = ({
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx10(Label.RequiredIndicator, { ref, className: cx6("ml-sm", className), ...props });
+};
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+
+// src/form-field/FormFieldLabel.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormFieldLabel = ({
+  htmlFor: htmlForProp,
+  className,
+  children,
+  requiredIndicator = /* @__PURE__ */ jsx11(FormFieldRequiredIndicator, {}),
+  asChild,
+  ref,
+  ...others
 }) => {
-  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
-  return /* @__PURE__ */ r(
-    O,
+  const control = useFormField();
+  const { disabled, labelId, isRequired } = control;
+  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
+  return /* @__PURE__ */ jsx11(
+    Label,
     {
-      ref: i,
-      id: m,
+      ref,
+      id: labelId,
       "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__ */ I(j, { children: [
-        /* @__PURE__ */ r(B, { children: a }),
-        p && l
+      htmlFor,
+      className: cx7(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+      asChild,
+      ...others,
+      children: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx11(Slottable, { children }),
+        isRequired && requiredIndicator
       ] })
     }
   );
 };
-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(w, {
-  Label: A,
-  Control: k,
-  StateMessage: F,
-  SuccessMessage: E,
-  AlertMessage: v,
-  ErrorMessage: R,
-  HelperMessage: $,
-  RequiredIndicator: N,
-  CharactersCount: S
+FormFieldLabel.displayName = "FormField.Label";
+
+// src/form-field/FormFieldSuccessMessage.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var FormFieldSuccessMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ jsx12(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-success-message",
+      state: "success",
+      ...props
+    }
+  );
+};
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+
+// src/form-field/index.ts
+var FormField2 = Object.assign(FormField, {
+  Label: FormFieldLabel,
+  Control: FormFieldControl,
+  StateMessage: FormFieldStateMessage,
+  SuccessMessage: FormFieldSuccessMessage,
+  AlertMessage: FormFieldAlertMessage,
+  ErrorMessage: FormFieldErrorMessage,
+  HelperMessage: FormFieldHelperMessage,
+  RequiredIndicator: FormFieldRequiredIndicator,
+  CharactersCount: FormFieldCharactersCount
 });
-U.displayName = "FormField";
-A.displayName = "FormField.Label";
-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";
-S.displayName = "FormField.CharactersCount";
+FormField2.displayName = "FormField";
+FormFieldLabel.displayName = "FormField.Label";
+FormFieldControl.displayName = "FormField.Control";
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
 export {
-  U as FormField,
-  Q as useFormFieldControl
+  FormField2 as FormField,
+  useFormFieldControl
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map