@spark-ui/components 13.1.4 → 13.2.0

package/dist/form-field/index.mjs

@@ -1,392 +1,289 @@
-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) {
+import { jsx as r, jsxs as I, 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 { I as M } from "../Icon-Ck-dhfLd.mjs";
+import { Label as O } from "../label/index.mjs";
+const C = W(null), x = ":form-field", b = () => {
+  const s = L(C);
+  if (!s)
     throw Error("useFormField must be used within a FormField provider");
-  }
-  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
+  return s;
+}, T = ({
+  id: s,
+  name: e,
+  disabled: o = !1,
+  readOnly: l = !1,
+  state: a,
+  isRequired: i,
+  children: d
 }) => {
-  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
+  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = j((f) => {
+    m((h) => [...h, f]);
+  }, []), q = j((f) => {
+    m((h) => h.filter((D) => D !== f));
+  }, []), V = X(() => ({
+    id: s,
+    labelId: t,
+    name: e,
+    disabled: o,
+    readOnly: l,
+    state: a,
+    isRequired: i,
+    isInvalid: a === "error",
+    description: p,
+    onMessageIdAdd: u,
+    onMessageIdRemove: q
+  }), [
+    s,
+    t,
+    e,
+    o,
+    l,
+    p,
+    a,
+    i,
+    u,
+    q
   ]);
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
+  return /* @__PURE__ */ r(C.Provider, { value: V, children: d });
 };
-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
+T.displayName = "FormFieldProvider";
+const w = ({
+  className: s,
+  disabled: e = !1,
+  readOnly: o = !1,
+  name: l,
+  state: a,
+  isRequired: i = !1,
+  asChild: d = !1,
+  ref: t,
+  ...n
 }) => {
-  const id = `${ID_PREFIX}-${useId2()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx2(
-    FormFieldProvider,
+  const m = `${x}-${y()}`;
+  return /* @__PURE__ */ r(
+    T,
     {
-      id,
-      name,
-      isRequired,
-      disabled,
-      readOnly,
-      state,
-      children: /* @__PURE__ */ jsx2(
-        Component,
+      id: m,
+      name: l,
+      isRequired: i,
+      disabled: e,
+      readOnly: o,
+      state: a,
+      children: /* @__PURE__ */ r(
+        d ? _ : "div",
         {
-          ref,
+          ref: t,
           "data-spark-component": "form-field",
-          className: cx(className, "gap-sm flex flex-col"),
-          ...others
+          className: c(s, "gap-sm flex flex-col"),
+          ...n
         }
       )
     }
   );
 };
-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
+w.displayName = "FormField";
+const g = ({
+  id: s,
+  className: e,
+  ref: o,
+  ...l
 }) => {
-  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(
+  const { onMessageIdAdd: a, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
+  return z(() => (a(t), () => {
+    i(t);
+  }), [t, a, i]), /* @__PURE__ */ r(
     "span",
     {
-      ref,
-      id,
+      ref: o,
+      id: t,
       "data-spark-component": "form-field-message",
-      className: cx2(className, "text-caption"),
-      ...others
+      className: c(e, "text-caption"),
+      ...l
     }
   );
 };
-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;
+g.displayName = "FormField.Message";
+const F = ({
+  className: s,
+  state: e,
+  children: o,
+  ref: l,
+  ...a
+}) => 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
+    ),
+    ...a,
+    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
+    ]
   }
-  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
+);
+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: o,
+  description: l,
+  liveAnnouncement: a,
+  ref: i,
+  ...d
 }) => {
-  const [throttledValue, setThrottledValue] = useState2(value);
-  useEffect2(() => {
-    const timeoutId = setTimeout(() => {
-      setThrottledValue(value);
+  const [t, n] = P(e);
+  return z(() => {
+    const m = setTimeout(() => {
+      n(e);
     }, 1e3);
-    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(
+    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(
       "span",
       {
-        ref,
-        "aria-hidden": true,
+        ref: i,
+        "aria-hidden": !0,
         "data-spark-component": "form-field-characters-count",
-        className: cx4(className, "text-caption", "text-neutral"),
-        ...others,
-        children: `${value.length}/${maxLength}`
+        className: c(s, "text-caption", "text-neutral"),
+        ...d,
+        children: `${e.length}/${o}`
       }
     ),
-    liveAnnouncement && /* @__PURE__ */ jsx6("span", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement({ remainingChars: maxLength - throttledValue.length }) })
+    a && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: a({ remainingChars: o - t.length }) })
   ] });
 };
-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) || {};
+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) || {};
   return {
-    id,
-    name,
-    description,
-    disabled,
-    readOnly,
-    state,
-    labelId,
-    isInvalid,
-    isRequired
+    id: s,
+    name: e,
+    description: o,
+    disabled: l,
+    readOnly: a,
+    state: i,
+    labelId: d,
+    isInvalid: t,
+    isRequired: n
   };
+}, k = ({ children: s }) => {
+  const e = Q();
+  return /* @__PURE__ */ r(H, { children: s(e) });
 };
-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
+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,
+  ...o
+}) => /* @__PURE__ */ r(
+  g,
+  {
+    ref: e,
+    "data-spark-component": "form-field-helper-message",
+    className: c("text-on-surface/dim-1", s),
+    ...o
+  }
+);
+$.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";
+const A = ({
+  htmlFor: s,
+  className: e,
+  children: o,
+  requiredIndicator: l = /* @__PURE__ */ r(N, {}),
+  asChild: a,
+  ref: i,
+  ...d
 }) => {
-  const control = useFormField();
-  const { disabled, labelId, isRequired } = control;
-  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
-  return /* @__PURE__ */ jsx11(
-    Label,
+  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = a ? void 0 : s || t.id;
+  return /* @__PURE__ */ r(
+    O,
     {
-      ref,
-      id: labelId,
+      ref: i,
+      id: m,
       "data-spark-component": "form-field-label",
-      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
+      htmlFor: u,
+      className: c(e, n ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+      asChild: a,
+      ...d,
+      children: /* @__PURE__ */ I(H, { children: [
+        /* @__PURE__ */ r(B, { children: o }),
+        p && l
       ] })
     }
   );
 };
-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
+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
 });
-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";
+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";
 export {
-  FormField2 as FormField,
-  useFormFieldControl
+  U as FormField,
+  Q as useFormFieldControl
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map