@spark-ui/components 10.0.2 → 10.0.3

package/dist/chunk-7PMPYEHJ.mjs

@@ -1,379 +0,0 @@
-import {
-  Label
-} from "./chunk-HLXYG643.mjs";
-import {
-  Icon
-} from "./chunk-AESXFMCC.mjs";
-import {
-  Slot,
-  Slottable
-} from "./chunk-4F5DOL57.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 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 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__ */ jsx(FormFieldContext.Provider, { value, children });
-};
-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 id = `${ID_PREFIX}-${useId2()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx2(
-    FormFieldProvider,
-    {
-      id,
-      name,
-      isRequired,
-      disabled,
-      readOnly,
-      state,
-      children: /* @__PURE__ */ jsx2(
-        Component,
-        {
-          ref,
-          "data-spark-component": "form-field",
-          className: cx(className, "gap-sm flex flex-col"),
-          ...others
-        }
-      )
-    }
-  );
-};
-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, 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,
-      id,
-      "data-spark-component": "form-field-message",
-      className: cx2(className, "text-caption"),
-      ...others
-    }
-  );
-};
-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;
-  }
-  return /* @__PURE__ */ jsxs(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-state-message",
-      "aria-live": "polite",
-      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 { jsx as jsx6 } from "react/jsx-runtime";
-var FormFieldCharactersCount = ({
-  className,
-  value = "",
-  maxLength,
-  ref,
-  ...others
-}) => {
-  const displayValue = `${value.length}/${maxLength}`;
-  return /* @__PURE__ */ jsx6(
-    "span",
-    {
-      ref,
-      "data-spark-component": "form-field-characters-count",
-      className: cx4(className, "text-caption", "text-neutral"),
-      ...others,
-      children: displayValue
-    }
-  );
-};
-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,
-    name,
-    description,
-    disabled,
-    readOnly,
-    state,
-    labelId,
-    isInvalid,
-    isRequired
-  };
-};
-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 jsxs2 } from "react/jsx-runtime";
-var FormFieldLabel = ({
-  htmlFor: htmlForProp,
-  className,
-  children,
-  requiredIndicator = /* @__PURE__ */ jsx11(FormFieldRequiredIndicator, {}),
-  asChild,
-  ref,
-  ...others
-}) => {
-  const control = useFormField();
-  const { disabled, labelId, isRequired } = control;
-  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
-  return /* @__PURE__ */ jsx11(
-    Label,
-    {
-      ref,
-      id: labelId,
-      "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__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx11(Slottable, { children }),
-        isRequired && requiredIndicator
-      ] })
-    }
-  );
-};
-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
-});
-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 {
-  useFormFieldControl,
-  FormField2 as FormField
-};
-//# sourceMappingURL=chunk-7PMPYEHJ.mjs.map

package/dist/chunk-7PMPYEHJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form-field/FormField.tsx","../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldMessage.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/FormFieldRequiredIndicator.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["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 { 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 { 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      aria-live=\"polite\"\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 { 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 { 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 } from 'react'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\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  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const displayValue = `${value.length}/${maxLength}`\n\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"form-field-characters-count\"\n      className={cx(className, 'text-caption', 'text-neutral')}\n      {...others}\n    >\n      {displayValue}\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 { 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 { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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","names":["useId","jsx","useId","cx","cx","useId","jsx","useId","cx","jsx","cx","jsx","cx","jsx","useContext","jsx","useContext","jsx","cx","jsx","cx","cx","cx","jsx","cx","Fragment","jsx","jsxs","cx","jsx","FormField"]}