@spark-ui/components 13.1.4 → 13.2.0

package/dist/form-field/index.js

@@ -1,553 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/form-field/index.ts
-var form_field_exports = {};
-__export(form_field_exports, {
-  FormField: () => FormField2,
-  useFormFieldControl: () => useFormFieldControl
-});
-module.exports = __toCommonJS(form_field_exports);
-
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react4 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/form-field/FormFieldContext.tsx
-var import_react2 = require("react");
-var FormFieldContext = (0, import_react2.createContext)(null);
-var ID_PREFIX = ":form-field";
-var useFormField = () => {
-  const context = (0, import_react2.useContext)(FormFieldContext);
-  if (!context) {
-    throw Error("useFormField must be used within a FormField provider");
-  }
-  return context;
-};
-
-// src/form-field/FormFieldProvider.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormFieldProvider = ({
-  id,
-  name,
-  disabled = false,
-  readOnly = false,
-  state,
-  isRequired,
-  children
-}) => {
-  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
-  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
-  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
-  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => [...ids, msgId]);
-  }, []);
-  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => ids.filter((current) => current !== msgId));
-  }, []);
-  const value = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
-};
-FormFieldProvider.displayName = "FormFieldProvider";
-
-// src/form-field/FormField.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormField = ({
-  className,
-  disabled = false,
-  readOnly = false,
-  name,
-  state,
-  isRequired = false,
-  asChild = false,
-  ref,
-  ...others
-}) => {
-  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    FormFieldProvider,
-    {
-      id,
-      name,
-      isRequired,
-      disabled,
-      readOnly,
-      state,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Component,
-        {
-          ref,
-          "data-spark-component": "form-field",
-          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
-          ...others
-        }
-      )
-    }
-  );
-};
-FormField.displayName = "FormField";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
-var import_Check = require("@spark-ui/icons/Check");
-var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
-var import_class_variance_authority4 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react5 = require("react");
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react5.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react5.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/form-field/FormFieldMessage.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormFieldMessage = ({
-  id: idProp,
-  className,
-  ref,
-  ...others
-}) => {
-  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
-  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
-  const id = idProp || currentId;
-  (0, import_react6.useEffect)(() => {
-    onMessageIdAdd(id);
-    return () => {
-      onMessageIdRemove(id);
-    };
-  }, [id, onMessageIdAdd, onMessageIdRemove]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      ref,
-      id,
-      "data-spark-component": "form-field-message",
-      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
-      ...others
-    }
-  );
-};
-FormFieldMessage.displayName = "FormField.Message";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FormFieldStateMessage = ({
-  className,
-  state,
-  children,
-  ref,
-  ...others
-}) => {
-  const field = useFormField();
-  if (field.state !== state) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-state-message",
-      className: (0, import_class_variance_authority4.cx)(
-        "gap-sm flex items-center",
-        state === "error" ? "text-error" : "text-on-surface/dim-1",
-        className
-      ),
-      ...others,
-      children: [
-        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
-        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
-        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
-        children
-      ]
-    }
-  );
-};
-FormFieldStateMessage.displayName = "FormField.StateMessage";
-
-// src/form-field/FormFieldAlertMessage.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var FormFieldAlertMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-alert-message",
-      state: "alert",
-      ...props
-    }
-  );
-};
-FormFieldAlertMessage.displayName = "FormField.AlertMessage";
-
-// src/form-field/FormFieldCharactersCount.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FormFieldCharactersCount = ({
-  className,
-  value = "",
-  maxLength,
-  description,
-  liveAnnouncement,
-  ref,
-  ...others
-}) => {
-  const [throttledValue, setThrottledValue] = (0, import_react7.useState)(value);
-  (0, import_react7.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
-      setThrottledValue(value);
-    }, 1e3);
-    return () => clearTimeout(timeoutId);
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ml-auto self-start", children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormFieldMessage, { className: "default:sr-only", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "span",
-      {
-        ref,
-        "aria-hidden": true,
-        "data-spark-component": "form-field-characters-count",
-        className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
-        ...others,
-        children: `${value.length}/${maxLength}`
-      }
-    ),
-    liveAnnouncement && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement({ remainingChars: maxLength - throttledValue.length }) })
-  ] });
-};
-FormFieldCharactersCount.displayName = "FormField.CharactersCount";
-
-// src/form-field/FormFieldControl.tsx
-var import_react8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var useFormFieldControl = () => {
-  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react8.useContext)(FormFieldContext) || {};
-  return {
-    id,
-    name,
-    description,
-    disabled,
-    readOnly,
-    state,
-    labelId,
-    isInvalid,
-    isRequired
-  };
-};
-var FormFieldControl = ({ children }) => {
-  const props = useFormFieldControl();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
-};
-FormFieldControl.displayName = "FormField.Control";
-
-// src/form-field/FormFieldErrorMessage.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var FormFieldErrorMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-error-message",
-      state: "error",
-      ...props
-    }
-  );
-};
-FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
-
-// src/form-field/FormFieldHelperMessage.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FormFieldHelperMessage = ({
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-helper-message",
-      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
-      ...others
-    }
-  );
-};
-FormFieldHelperMessage.displayName = "FormField.HelperMessage";
-
-// src/form-field/FormFieldLabel.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-
-// src/label/Label.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Label = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_radix_ui2.Label.Label,
-    {
-      ref,
-      "data-spark-component": "label",
-      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
-      ...others
-    }
-  );
-};
-Label.displayName = "Label";
-
-// src/label/LabelRequiredIndicator.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var LabelRequiredIndicator = ({
-  className,
-  children = "*",
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "label-required-indicator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
-      ...others,
-      children
-    }
-  );
-};
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/label/index.ts
-var Label2 = Object.assign(Label, {
-  RequiredIndicator: LabelRequiredIndicator
-});
-Label2.displayName = "Label";
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/form-field/FormFieldRequiredIndicator.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var FormFieldRequiredIndicator = ({
-  className,
-  ref,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
-};
-FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
-
-// src/form-field/FormFieldLabel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var FormFieldLabel = ({
-  htmlFor: htmlForProp,
-  className,
-  children,
-  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
-  asChild,
-  ref,
-  ...others
-}) => {
-  const control = useFormField();
-  const { disabled, labelId, isRequired } = control;
-  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Label2,
-    {
-      ref,
-      id: labelId,
-      "data-spark-component": "form-field-label",
-      htmlFor,
-      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild,
-      ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
-        isRequired && requiredIndicator
-      ] })
-    }
-  );
-};
-FormFieldLabel.displayName = "FormField.Label";
-
-// src/form-field/FormFieldSuccessMessage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var FormFieldSuccessMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    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
-});
-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";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FormField,
-  useFormFieldControl
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),F=require("class-variance-authority"),i=require("react"),$=require("../Slot-DQ8z2zsy.js"),V=require("@spark-ui/icons/AlertOutline"),w=require("@spark-ui/icons/Check"),W=require("@spark-ui/icons/WarningOutline"),M=require("../Icon-CF0W0LKr.js"),E=require("../label/index.js"),I=i.createContext(null),j=":form-field",y=()=>{const s=i.useContext(I);if(!s)throw Error("useFormField must be used within a FormField provider");return s},O=({id:s,name:e,disabled:a=!1,readOnly:l=!1,state:t,isRequired:n,children:d})=>{const o=`${j}-label-${i.useId()}`,[c,m]=i.useState([]),u=c.length>0?c.join(" "):void 0,g=i.useCallback(x=>{m(N=>[...N,x])},[]),A=i.useCallback(x=>{m(N=>N.filter(z=>z!==x))},[]),T=i.useMemo(()=>({id:s,labelId:o,name:e,disabled:a,readOnly:l,state:t,isRequired:n,isInvalid:t==="error",description:u,onMessageIdAdd:g,onMessageIdRemove:A}),[s,o,e,a,l,u,t,n,g,A]);return r.jsx(I.Provider,{value:T,children:d})};O.displayName="FormFieldProvider";const L=({className:s,disabled:e=!1,readOnly:a=!1,name:l,state:t,isRequired:n=!1,asChild:d=!1,ref:o,...c})=>{const m=`${j}-${i.useId()}`,u=d?$.Slot:"div";return r.jsx(O,{id:m,name:l,isRequired:n,disabled:e,readOnly:a,state:t,children:r.jsx(u,{ref:o,"data-spark-component":"form-field",className:F.cx(s,"gap-sm flex flex-col"),...c})})};L.displayName="FormField";const f=({id:s,className:e,ref:a,...l})=>{const{onMessageIdAdd:t,onMessageIdRemove:n}=y(),d=`${j}-message-${i.useId()}`,o=s||d;return i.useEffect(()=>(t(o),()=>{n(o)}),[o,t,n]),r.jsx("span",{ref:a,id:o,"data-spark-component":"form-field-message",className:F.cx(e,"text-caption"),...l})};f.displayName="FormField.Message";const p=({className:s,state:e,children:a,ref:l,...t})=>y().state!==e?null:r.jsxs(f,{ref:l,"data-spark-component":"form-field-state-message",className:F.cx("gap-sm flex items-center",e==="error"?"text-error":"text-on-surface/dim-1",s),...t,children:[e==="alert"&&r.jsx(M.Icon,{size:"sm",children:r.jsx(W.WarningOutline,{})}),e==="error"&&r.jsx(M.Icon,{size:"sm",intent:"error",children:r.jsx(V.AlertOutline,{})}),e==="success"&&r.jsx(M.Icon,{size:"sm",children:r.jsx(w.Check,{})}),a]});p.displayName="FormField.StateMessage";const C=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...e});C.displayName="FormField.AlertMessage";const b=({className:s,value:e="",maxLength:a,description:l,liveAnnouncement:t,ref:n,...d})=>{const[o,c]=i.useState(e);return i.useEffect(()=>{const m=setTimeout(()=>{c(e)},1e3);return()=>clearTimeout(m)},[e]),r.jsxs("span",{className:"ml-auto self-start",children:[l&&r.jsx(f,{className:"default:sr-only",children:l}),r.jsx("span",{ref:n,"aria-hidden":!0,"data-spark-component":"form-field-characters-count",className:F.cx(s,"text-caption","text-neutral"),...d,children:`${e.length}/${a}`}),t&&r.jsx("span",{className:"sr-only","aria-live":"polite",children:t({remainingChars:a-o.length})})]})};b.displayName="FormField.CharactersCount";const P=()=>{const{id:s,name:e,description:a,disabled:l,readOnly:t,state:n,labelId:d,isInvalid:o,isRequired:c}=i.useContext(I)||{};return{id:s,name:e,description:a,disabled:l,readOnly:t,state:n,labelId:d,isInvalid:o,isRequired:c}},q=({children:s})=>{const e=P();return r.jsx(r.Fragment,{children:s(e)})};q.displayName="FormField.Control";const S=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...e});S.displayName="FormField.ErrorMessage";const v=({className:s,ref:e,...a})=>r.jsx(f,{ref:e,"data-spark-component":"form-field-helper-message",className:F.cx("text-on-surface/dim-1",s),...a});v.displayName="FormField.HelperMessage";const h=({className:s,ref:e,...a})=>r.jsx(E.Label.RequiredIndicator,{ref:e,className:F.cx("ml-sm",s),...a});h.displayName="FormField.RequiredIndicator";const k=({htmlFor:s,className:e,children:a,requiredIndicator:l=r.jsx(h,{}),asChild:t,ref:n,...d})=>{const o=y(),{disabled:c,labelId:m,isRequired:u}=o,g=t?void 0:s||o.id;return r.jsx(E.Label,{ref:n,id:m,"data-spark-component":"form-field-label",htmlFor:g,className:F.cx(e,c?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:t,...d,children:r.jsxs(r.Fragment,{children:[r.jsx($.Slottable,{children:a}),u&&l]})})};k.displayName="FormField.Label";const R=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...e});R.displayName="FormField.SuccessMessage";const H=Object.assign(L,{Label:k,Control:q,StateMessage:p,SuccessMessage:R,AlertMessage:C,ErrorMessage:S,HelperMessage:v,RequiredIndicator:h,CharactersCount:b});H.displayName="FormField";k.displayName="FormField.Label";q.displayName="FormField.Control";p.displayName="FormField.StateMessage";R.displayName="FormField.SuccessMessage";C.displayName="FormField.AlertMessage";S.displayName="FormField.ErrorMessage";v.displayName="FormField.HelperMessage";h.displayName="FormField.RequiredIndicator";b.displayName="FormField.CharactersCount";exports.FormField=H;exports.useFormFieldControl=P;
+//# sourceMappingURL=index.js.map