@spark-ui/components 18.1.1 → 18.1.3

package/dist/{form-field-B38U0zp8.js.map → form-field-DMHwopHt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-B38U0zp8.js","names":[],"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/FormFieldDescription.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 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 value={value}>{children}</FormFieldContext>\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\n    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-md 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, 'default: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\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\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\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\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\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\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\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\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\n/** A helper text message displayed below the form control. Renders a <span> element. */\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\n/** The label for the form field control. Renders a <label> element. */\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(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\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\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\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 { FormFieldDescription } from './FormFieldDescription'\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\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\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  Description: FormFieldDescription,\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'\nFormFieldDescription.displayName = 'FormField.Description'\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 FormFieldDescriptionProps } from './FormFieldDescription'\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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"}
+{"version":3,"file":"form-field-DMHwopHt.js","names":[],"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/FormFieldDescription.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 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 value={value}>{children}</FormFieldContext>\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\n    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-md 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, 'default: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\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\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\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\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\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\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\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\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\n/** A helper text message displayed below the form control. Renders a <span> element. */\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\n/** The label for the form field control. Renders a <label> element. */\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(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\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\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\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 { FormFieldDescription } from './FormFieldDescription'\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\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\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  Description: FormFieldDescription,\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'\nFormFieldDescription.displayName = 'FormField.Description'\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 FormFieldDescriptionProps } from './FormFieldDescription'\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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"}

package/dist/{form-field-DCKyhBmv.mjs → form-field-Doq4zLEX.mjs}

@@ -1,7 +1,7 @@
 import { Slot as e, Slottable as t } from "./slot/index.mjs";
-import { t as n } from "./icon-Bs-39J-H.mjs";
-import { t as r } from "./label-RKaPen31.mjs";
-import { t as i } from "./FormFieldRequiredIndicator-COKYxTNs.mjs";
+import { t as n } from "./icon-VM_Ys9Xn.mjs";
+import { t as r } from "./label-BqWu-wLT.mjs";
+import { t as i } from "./FormFieldRequiredIndicator-CfE6AOta.mjs";
 import { cx as a } from "class-variance-authority";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useMemo as d, useState as f } from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
@@ -238,4 +238,4 @@ F.displayName = "FormField", N.displayName = "FormField.Label", A.displayName =
 //#endregion
 export { O as n, F as t };
 
-//# sourceMappingURL=form-field-DCKyhBmv.mjs.map
+//# sourceMappingURL=form-field-Doq4zLEX.mjs.map

package/dist/{form-field-DCKyhBmv.mjs.map → form-field-Doq4zLEX.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-DCKyhBmv.mjs","names":[],"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/FormFieldDescription.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 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 value={value}>{children}</FormFieldContext>\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\n    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-md 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, 'default: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\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\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\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\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\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\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\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\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\n/** A helper text message displayed below the form control. Renders a <span> element. */\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\n/** The label for the form field control. Renders a <label> element. */\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(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\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\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\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 { FormFieldDescription } from './FormFieldDescription'\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\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\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  Description: FormFieldDescription,\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'\nFormFieldDescription.displayName = 'FormField.Description'\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 FormFieldDescriptionProps } from './FormFieldDescription'\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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"}
+{"version":3,"file":"form-field-Doq4zLEX.mjs","names":[],"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/FormFieldDescription.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 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 value={value}>{children}</FormFieldContext>\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\n    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-md 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, 'default: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\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\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\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\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\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\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\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\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\n/** A helper text message displayed below the form control. Renders a <span> element. */\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\n/** The label for the form field control. Renders a <label> element. */\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(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\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\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\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 { FormFieldDescription } from './FormFieldDescription'\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\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\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  Description: FormFieldDescription,\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'\nFormFieldDescription.displayName = 'FormField.Description'\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 FormFieldDescriptionProps } from './FormFieldDescription'\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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"}

package/dist/icon/Icon.styles.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const iconStyles: (props?: ({
-    intent?: "main" | "current" | "alert" | "support" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
+    intent?: "main" | "support" | "alert" | "current" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
     size?: "current" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantsProps = VariantProps<typeof iconStyles>;

package/dist/icon/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js");exports.Icon=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-CfEsla9z.js");exports.Icon=e.t;

package/dist/icon/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../icon-Bs-39J-H.mjs";
+import { t as e } from "../icon-VM_Ys9Xn.mjs";
 export { e as Icon };

package/dist/icon-CfEsla9z.js

@@ -0,0 +1,2 @@
+const e=require("./visually-hidden/index.js");let t=require("@spark-ui/internal-utils"),n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime");var a=(0,n.cva)([`fill-current shrink-0`],{variants:{intent:(0,t.makeVariants)({current:[`text-current`],main:[`text-main`],support:[`text-support`],accent:[`text-accent`],success:[`text-success`],alert:[`text-alert`],error:[`text-error`],info:[`text-info`],neutral:[`text-neutral`]}),size:(0,t.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`]})}}),o=({label:t,className:n,size:o=`current`,intent:s=`current`,children:c,...l})=>(0,i.jsxs)(i.Fragment,{children:[(0,r.cloneElement)(r.Children.only(c),{className:a({className:n,size:o,intent:s}),"data-spark-component":`icon`,"aria-hidden":`true`,focusable:`false`,...l}),t&&(0,i.jsx)(e.VisuallyHidden,{children:t})]});o.displayName=`Icon`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=icon-CfEsla9z.js.map

package/dist/{icon-DY4l9nsc.js.map → icon-CfEsla9z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-DY4l9nsc.js","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\n/**\n * A wrapper component that renders SVG icons with consistent sizing and styling.\n */\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n"],"mappings":"gLAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CAAiB,CAAC,uBAAuB,EAAG,CACvD,SAAU,CAIR,QAAA,EAAA,EAAA,aAAA,CAGE,CACA,QAAS,CAAC,cAAc,EACxB,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,OAAQ,CAAC,aAAa,EACtB,QAAS,CAAC,cAAc,EACxB,MAAO,CAAC,YAAY,EACpB,MAAO,CAAC,YAAY,EACpB,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,CAC1B,CAAC,EAID,MAAA,EAAA,EAAA,aAAA,CAAgE,CAC9D,QAAS,CAAC,qBAAqB,EAC/B,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,CAC3B,CAAC,CACH,CACF,CAAC,ECbY,GAAQ,CACnB,QACA,YACA,OAAO,UACP,SAAS,UACT,WACA,GAAG,MAKD,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,EAAA,EAAA,aAAA,CAHY,EAAA,SAAS,KAAK,CAIV,EAA4C,CACxD,UAAW,EAAW,CAAE,YAAW,OAAM,QAAO,CAAC,EACjD,uBAAwB,OACxB,cAAe,OACf,UAAW,QACX,GAAG,CACL,CAAC,EAEA,IAAS,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAA,SAAiB,CAAsB,CAAA,CACjD,CAAA,CAAA,EAIN,EAAK,YAAc"}
+{"version":3,"file":"icon-CfEsla9z.js","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\n/**\n * A wrapper component that renders SVG icons with consistent sizing and styling.\n */\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n"],"mappings":"gLAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CAAiB,CAAC,uBAAuB,EAAG,CACvD,SAAU,CAIR,QAAA,EAAA,EAAA,aAAA,CAGE,CACA,QAAS,CAAC,cAAc,EACxB,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,OAAQ,CAAC,aAAa,EACtB,QAAS,CAAC,cAAc,EACxB,MAAO,CAAC,YAAY,EACpB,MAAO,CAAC,YAAY,EACpB,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,CAC1B,CAAC,EAID,MAAA,EAAA,EAAA,aAAA,CAAgE,CAC9D,QAAS,CAAC,qBAAqB,EAC/B,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,EACzB,GAAI,CAAC,UAAW,SAAS,CAC3B,CAAC,CACH,CACF,CAAC,ECbY,GAAQ,CACnB,QACA,YACA,OAAO,UACP,SAAS,UACT,WACA,GAAG,MAKD,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,EAAA,EAAA,aAAA,CAHY,EAAA,SAAS,KAAK,CAIV,EAA4C,CACxD,UAAW,EAAW,CAAE,YAAW,OAAM,QAAO,CAAC,EACjD,uBAAwB,OACxB,cAAe,OACf,UAAW,QACX,GAAG,CACL,CAAC,EAEA,IAAS,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAA,SAAiB,CAAsB,CAAA,CACjD,CAAA,CAAA,EAIN,EAAK,YAAc"}

package/dist/{icon-Bs-39J-H.mjs → icon-VM_Ys9Xn.mjs}

@@ -1,11 +1,11 @@
 import { VisuallyHidden as e } from "./visually-hidden/index.mjs";
-import { cva as t } from "class-variance-authority";
-import { Children as n, cloneElement as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { makeVariants as s } from "@spark-ui/internal-utils";
+import { makeVariants as t } from "@spark-ui/internal-utils";
+import { cva as n } from "class-variance-authority";
+import { Children as r, cloneElement as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/icon/Icon.styles.tsx
-var c = t(["fill-current shrink-0"], { variants: {
-	intent: s({
+var c = n(["fill-current shrink-0"], { variants: {
+	intent: t({
 		current: ["text-current"],
 		main: ["text-main"],
 		support: ["text-support"],
@@ -16,16 +16,16 @@ var c = t(["fill-current shrink-0"], { variants: {
 		info: ["text-info"],
 		neutral: ["text-neutral"]
 	}),
-	size: s({
+	size: t({
 		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"]
 	})
-} }), l = ({ label: t, className: s, size: l = "current", intent: u = "current", children: d, ...f }) => /* @__PURE__ */ o(i, { children: [r(n.only(d), {
+} }), l = ({ label: t, className: n, size: l = "current", intent: u = "current", children: d, ...f }) => /* @__PURE__ */ s(a, { children: [i(r.only(d), {
 	className: c({
-		className: s,
+		className: n,
 		size: l,
 		intent: u
 	}),
@@ -33,9 +33,9 @@ var c = t(["fill-current shrink-0"], { variants: {
 	"aria-hidden": "true",
 	focusable: "false",
 	...f
-}), t && /* @__PURE__ */ a(e, { children: t })] });
+}), t && /* @__PURE__ */ o(e, { children: t })] });
 l.displayName = "Icon";
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=icon-Bs-39J-H.mjs.map
+//# sourceMappingURL=icon-VM_Ys9Xn.mjs.map

package/dist/{icon-Bs-39J-H.mjs.map → icon-VM_Ys9Xn.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-Bs-39J-H.mjs","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\n/**\n * A wrapper component that renders SVG icons with consistent sizing and styling.\n */\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n"],"mappings":";;;;;;AAGA,IAAa,IAAa,EAAI,CAAC,uBAAuB,GAAG,EACvD,UAAU;CAIR,QAAQ,EAGN;EACA,SAAS,CAAC,cAAc;EACxB,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,cAAc;EACxB,QAAQ,CAAC,aAAa;EACtB,SAAS,CAAC,cAAc;EACxB,OAAO,CAAC,YAAY;EACpB,OAAO,CAAC,YAAY;EACpB,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,cAAc;CAC1B,CAAC;CAID,MAAM,EAA0D;EAC9D,SAAS,CAAC,qBAAqB;EAC/B,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;CAC3B,CAAC;AACH,EACF,CAAC,GCbY,KAAQ,EACnB,UACA,cACA,UAAO,WACP,YAAS,WACT,aACA,GAAG,QAKD,kBAAA,GAAA,EAAA,UAAA,CACG,EAJS,EAAS,KAAK,CAIV,GAA4C;CACxD,WAAW,EAAW;EAAE;EAAW;EAAM;CAAO,CAAC;CACjD,wBAAwB;CACxB,eAAe;CACf,WAAW;CACX,GAAG;AACL,CAAC,GAEA,KAAS,kBAAC,GAAD,EAAA,UAAiB,EAAsB,CAAA,CACjD,EAAA,CAAA;AAIN,EAAK,cAAc"}
+{"version":3,"file":"icon-VM_Ys9Xn.mjs","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\n/**\n * A wrapper component that renders SVG icons with consistent sizing and styling.\n */\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n"],"mappings":";;;;;;AAGA,IAAa,IAAa,EAAI,CAAC,uBAAuB,GAAG,EACvD,UAAU;CAIR,QAAQ,EAGN;EACA,SAAS,CAAC,cAAc;EACxB,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,cAAc;EACxB,QAAQ,CAAC,aAAa;EACtB,SAAS,CAAC,cAAc;EACxB,OAAO,CAAC,YAAY;EACpB,OAAO,CAAC,YAAY;EACpB,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,cAAc;CAC1B,CAAC;CAID,MAAM,EAA0D;EAC9D,SAAS,CAAC,qBAAqB;EAC/B,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;CAC3B,CAAC;AACH,EACF,CAAC,GCbY,KAAQ,EACnB,UACA,cACA,UAAO,WACP,YAAS,WACT,aACA,GAAG,QAKD,kBAAA,GAAA,EAAA,UAAA,CACG,EAJS,EAAS,KAAK,CAIV,GAA4C;CACxD,WAAW,EAAW;EAAE;EAAW;EAAM;CAAO,CAAC;CACjD,wBAAwB;CACxB,eAAe;CACf,WAAW;CACX,GAAG;AACL,CAAC,GAEA,KAAS,kBAAC,GAAD,EAAA,UAAiB,EAAsB,CAAA,CACjD,EAAA,CAAA;AAIN,EAAK,cAAc"}

package/dist/icon-button/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-button-DRFf308H.js");exports.IconButton=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-button-B2TM0Xby.js");exports.IconButton=e.t;

package/dist/icon-button/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../icon-button-C1ThqdK1.mjs";
+import { t as e } from "../icon-button-CexCkoV0.mjs";
 export { e as IconButton };

package/dist/icon-button-B2TM0Xby.js

@@ -0,0 +1,2 @@
+const e=require("./button-3vvMrf1L.js");let t=require("@spark-ui/internal-utils"),n=require("class-variance-authority"),r=require("react/jsx-runtime");var i=(0,n.cva)([`pl-0 pr-0`],{variants:{size:(0,t.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({appearance:t,design:n=`filled`,disabled:a=!1,intent:o=`main`,shape:s=`pill`,size:c=`md`,className:l,ref:u,...d})=>(0,r.jsx)(e.t,{"data-spark-component":`icon-button`,ref:u,className:i({size:c,className:l}),appearance:t,design:n,disabled:a,intent:o,shape:s,size:c,...d});a.displayName=`IconButton`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=icon-button-B2TM0Xby.js.map

package/dist/{icon-button-DRFf308H.js.map → icon-button-B2TM0Xby.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-DRFf308H.js","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  appearance,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'pill',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      appearance={appearance}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"uJAIA,IAAa,GAAA,EAAA,EAAA,IAAA,CAAuB,CAAC,WAAW,EAAG,CACjD,SAAU,CAIR,MAAA,EAAA,EAAA,aAAA,CAA+C,CAC7C,GAAI,CAAC,aAAa,EAClB,GAAI,CAAC,aAAa,EAClB,GAAI,CAAC,gBAAgB,CACvB,CAAC,CACH,CACF,CAAC,ECFY,GAAc,CACzB,aACA,SAAS,SACT,WAAW,GACX,SAAS,OACT,QAAQ,OACR,OAAO,KACP,YACA,MACA,GAAG,MAGD,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,uBAAqB,cAChB,MACL,UAAW,EAAiB,CAAE,OAAM,WAAU,CAAC,EACnC,aACJ,SACE,WACF,SACD,QACD,OACN,GAAI,CACL,CAAA,EAIL,EAAW,YAAc"}
+{"version":3,"file":"icon-button-B2TM0Xby.js","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  appearance,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'pill',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      appearance={appearance}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"uJAIA,IAAa,GAAA,EAAA,EAAA,IAAA,CAAuB,CAAC,WAAW,EAAG,CACjD,SAAU,CAIR,MAAA,EAAA,EAAA,aAAA,CAA+C,CAC7C,GAAI,CAAC,aAAa,EAClB,GAAI,CAAC,aAAa,EAClB,GAAI,CAAC,gBAAgB,CACvB,CAAC,CACH,CACF,CAAC,ECFY,GAAc,CACzB,aACA,SAAS,SACT,WAAW,GACX,SAAS,OACT,QAAQ,OACR,OAAO,KACP,YACA,MACA,GAAG,MAGD,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,uBAAqB,cAChB,MACL,UAAW,EAAiB,CAAE,OAAM,WAAU,CAAC,EACnC,aACJ,SACE,WACF,SACD,QACD,OACN,GAAI,CACL,CAAA,EAIL,EAAW,YAAc"}

package/dist/icon-button-CexCkoV0.mjs

@@ -0,0 +1,29 @@
+import { t as e } from "./button-DBNjh3Bi.mjs";
+import { makeVariants as t } from "@spark-ui/internal-utils";
+import { cva as n } from "class-variance-authority";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/icon-button/IconButton.styles.tsx
+var i = n(["pl-0 pr-0"], { variants: { size: t({
+	sm: ["text-body-1"],
+	md: ["text-body-1"],
+	lg: ["text-display-3"]
+}) } }), a = ({ appearance: t, design: n = "filled", disabled: a = !1, intent: o = "main", shape: s = "pill", size: c = "md", className: l, ref: u, ...d }) => /* @__PURE__ */ r(e, {
+	"data-spark-component": "icon-button",
+	ref: u,
+	className: i({
+		size: c,
+		className: l
+	}),
+	appearance: t,
+	design: n,
+	disabled: a,
+	intent: o,
+	shape: s,
+	size: c,
+	...d
+});
+a.displayName = "IconButton";
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=icon-button-CexCkoV0.mjs.map

package/dist/{icon-button-C1ThqdK1.mjs.map → icon-button-CexCkoV0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-C1ThqdK1.mjs","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  appearance,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'pill',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      appearance={appearance}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAIA,IAAa,IAAmB,EAAI,CAAC,WAAW,GAAG,EACjD,UAAU,EAIR,MAAM,EAAyC;CAC7C,IAAI,CAAC,aAAa;CAClB,IAAI,CAAC,aAAa;CAClB,IAAI,CAAC,gBAAgB;AACvB,CAAC,EACH,EACF,CAAC,GCFY,KAAc,EACzB,eACA,YAAS,UACT,cAAW,IACX,YAAS,QACT,WAAQ,QACR,UAAO,MACP,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CACnC;CACJ;CACE;CACF;CACD;CACD;CACN,GAAI;AACL,CAAA;AAIL,EAAW,cAAc"}
+{"version":3,"file":"icon-button-CexCkoV0.mjs","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  appearance,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'pill',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      appearance={appearance}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAIA,IAAa,IAAmB,EAAI,CAAC,WAAW,GAAG,EACjD,UAAU,EAIR,MAAM,EAAyC;CAC7C,IAAI,CAAC,aAAa;CAClB,IAAI,CAAC,aAAa;CAClB,IAAI,CAAC,gBAAgB;AACvB,CAAC,EACH,EACF,CAAC,GCFY,KAAc,EACzB,eACA,YAAS,UACT,cAAW,IACX,YAAS,QACT,WAAQ,QACR,UAAO,MACP,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CACnC;CACJ;CACE;CACF;CACD;CACD;CACN,GAAI;AACL,CAAA;AAIL,EAAW,cAAc"}

package/dist/input/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../input-BoxJZira.js");exports.Input=e.n,exports.InputGroup=e.t,exports.useInputGroup=e.i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../input-CADvgFpY.js");exports.Input=e.n,exports.InputGroup=e.t,exports.useInputGroup=e.i;

package/dist/input/index.mjs

@@ -1,2 +1,2 @@
-import { i as e, n as t, t as n } from "../input-Du9YSgAt.mjs";
+import { i as e, n as t, t as n } from "../input-CmlNZ4Bo.mjs";
 export { t as Input, n as InputGroup, e as useInputGroup };

package/dist/{input-BoxJZira.js → input-CADvgFpY.js}

@@ -1,2 +1,2 @@
-const e=require("./slot/index.js"),t=require("./icon-DY4l9nsc.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/hooks/use-merge-refs"),o=require("@spark-ui/components/form-field"),s=require("@spark-ui/hooks/use-combined-state"),c=require("@spark-ui/icons/DeleteOutline");var l=(0,r.createContext)(null),u=()=>(0,r.useContext)(l)||{isStandalone:!0},d=({className:e,tabIndex:r=-1,onClick:a,inline:o=!1,ref:s,...l})=>{let{onClear:d,hasTrailingIcon:f}=u();return(0,i.jsx)(`button`,{ref:s,"data-spark-component":`input-clear-button`,className:(0,n.cx)(e,`pointer-events-auto absolute`,o?`h-sz-44 top-0 -translate-y-0`:`top-1/2 -translate-y-1/2`,`inline-flex h-full items-center justify-center outline-hidden`,`text-neutral hover:text-neutral-hovered`,f?`right-3xl px-sz-12`:`pl-md pr-lg right-0`),tabIndex:r,onClick:e=>{a&&a(e),d&&d()},type:`button`,...l,children:(0,i.jsx)(t.t,{size:`sm`,children:(0,i.jsx)(c.DeleteOutline,{})})})},f=Object.assign(d,{id:`ClearButton`});d.displayName=`InputGroup.ClearButton`;var p=(0,n.cva)([`relative inline-flex w-full`],{variants:{disabled:{true:[`cursor-not-allowed`,`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`},readOnly:{true:[`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`}}}),m=({className:e,children:t,state:n,disabled:c,readOnly:u,onClear:d,ref:f,...m})=>{let h=e=>e?e.type.id:``,g=(...e)=>_.find(t=>e.includes(h(t)||``)),_=r.Children.toArray(t).filter(r.isValidElement),v=g(`Input`),y=v?.props||{},b=(0,r.useRef)(null),x=(0,r.useRef)(d),S=(0,a.useMergeRefs)(v?.props.ref,b),[C,w]=(0,s.useCombinedState)(y.value,y.defaultValue,y.onValueChange),T=(0,o.useFormFieldControl)(),E=T.state??n,D=T.disabled||!!c,O=T.readOnly||!!u,k=g(`LeadingAddon`),A=g(`LeadingIcon`),j=g(`ClearButton`),M=g(`TrailingIcon`),N=g(`TrailingAddon`),P=!!k,F=!!N,I=!!A,L=!!M,R=!!C&&!!j&&!D&&!O,z=e=>{y.onChange&&y.onChange(e),w(e.target.value)},B=(0,r.useCallback)(()=>{x.current&&x.current(),w(``),b.current.focus()},[w]),V=(0,r.useMemo)(()=>({state:E,disabled:D,readOnly:O,hasLeadingIcon:I,hasTrailingIcon:L,hasLeadingAddon:P,hasTrailingAddon:F,hasClearButton:R,onClear:B}),[E,D,O,I,L,P,F,R,B]);(0,r.useEffect)(()=>{x.current=d},[d]);let H=b.current?.value;return(0,i.jsx)(l,{value:V,children:(0,i.jsxs)(`div`,{"data-spark-component":`input-group`,ref:f,className:p({disabled:D,readOnly:O,className:e}),...m,children:[P&&k,(0,i.jsxs)(`div`,{className:`relative inline-flex w-full`,children:[v&&(0,r.cloneElement)(v,{value:C??H??``,ref:S,defaultValue:void 0,onChange:z}),A,R&&j,M]}),F&&N]})})};m.displayName=`InputGroup`;var h=(0,n.cva)([`overflow-hidden`,`border-sm`,`shrink-0`,`h-full`,`focus-visible:relative focus-visible:z-raised`,`mx-0`],{variants:{asChild:{false:[`flex`,`items-center`,`px-lg`]},intent:{neutral:`border-outline`,error:`border-error`,alert:`border-alert`,success:`border-success`},disabled:{true:[`pointer-events-none border-outline!`]},readOnly:{true:[`pointer-events-none`]},design:{text:``,solid:``,inline:``}},compoundVariants:[{disabled:!1,readOnly:!1,design:`text`,class:[`bg-surface`,`text-on-surface`]},{disabled:!0,design:`text`,class:[`text-on-surface/dim-3`]},{disabled:!0,design:[`solid`,`inline`],class:[`opacity-dim-3`]}],defaultVariants:{intent:`neutral`}}),g=({asChild:t,className:n,children:a,ref:o,...s})=>{let{state:c,disabled:l,readOnly:d}=u(),f=typeof a==`string`,p=!!(!f&&t),m=f?a:r.Children.only(a),g=p&&!f?e.Slot:`div`;return(0,i.jsx)(g,{ref:o,"data-spark-component":`input-addon`,className:h({className:n,intent:c,disabled:l,readOnly:d,asChild:p,design:f?`text`:p?`solid`:`inline`}),...l&&{tabIndex:-1},...s,children:m})};g.displayName=`InputGroup.Addon`;var _=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-l-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-r-0! -mr-px rounded-l-full`),...r})})},v=Object.assign(_,{id:`LeadingAddon`});_.displayName=`InputGroup.LeadingAddon`;var y=({className:e,intent:r,children:a,...o})=>{let{disabled:s,readOnly:c}=u();return(0,i.jsx)(t.t,{"data-spark-component":`input-icon`,intent:r,className:(0,n.cx)(e,`pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2`,r?void 0:`text-neutral peer-focus:text-outline-high`,s||c?`opacity-dim-3`:void 0),...o,children:a})};y.displayName=`InputGroup.Icon`;var b=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`left-lg text-body-1`),...t});b.id=`LeadingIcon`,b.displayName=`InputGroup.LeadingIcon`;var x=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-r-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-l-0! -ml-px rounded-r-full`),...r})})},S=Object.assign(x,{id:`TrailingAddon`});x.displayName=`InputGroup.TrailingAddon`;var C=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`right-lg text-body-1`),...t});C.id=`TrailingIcon`,C.displayName=`InputGroup.TrailingIcon`;var w=(0,n.cva)([`relative`,`border-sm`,`peer`,`w-full`,`appearance-none outline-hidden`,`bg-surface`,`text-ellipsis text-body-1 text-on-surface`,`caret-neutral`,`[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]`,`autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]`,`disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3`,`read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5`,`focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus`],{variants:{asChild:{true:[`min-h-sz-44`],false:[`h-sz-44`]},intent:{neutral:[`border-outline`,`default:hover:border-outline-high`],success:[`default:border-success`],alert:[`default:border-alert`],error:[`default:border-error`]},hasLeadingAddon:{true:[`rounded-l-0`],false:[`rounded-l-input`]},hasTrailingAddon:{true:[`rounded-r-0`],false:[`rounded-r-input`]},hasLeadingIcon:{true:[`pl-3xl`],false:[`pl-lg`]},hasTrailingIcon:{true:``},hasClearButton:{true:``}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:`pr-lg`},{hasTrailingIcon:!0,hasClearButton:!1,class:`pr-3xl`},{hasTrailingIcon:!1,hasClearButton:!0,class:`pr-3xl`},{hasTrailingIcon:!0,hasClearButton:!0,class:`pr-[calc(var(--spacing-3xl)*2)]`}],defaultVariants:{intent:`neutral`}}),T=({className:t,asChild:n=!1,onValueChange:r,onChange:a,onKeyDown:s,disabled:c,readOnly:l,ref:d,...f})=>{let p=(0,o.useFormFieldControl)(),m=u(),{id:h,name:g,isInvalid:_,isRequired:v,description:y}=p,{hasLeadingAddon:b,hasTrailingAddon:x,hasLeadingIcon:S,hasTrailingIcon:C,hasClearButton:T,onClear:E}=m,D=n?e.Slot:`input`,O=p.state||m.state,k=p.disabled||m.disabled||c,A=p.readOnly||m.readOnly||l;return(0,i.jsx)(D,{"data-spark-component":`input`,ref:d,id:h,name:g,className:w({asChild:n,className:t,intent:O,hasLeadingAddon:!!b,hasTrailingAddon:!!x,hasLeadingIcon:!!S,hasTrailingIcon:!!C,hasClearButton:!!T}),disabled:k,readOnly:A,required:v,"aria-describedby":y,"aria-invalid":_,onChange:e=>{a&&a(e),r&&r(e.target.value)},onKeyDown:e=>{s&&s(e),T&&E&&e.key===`Escape`&&E()},...f})},E=Object.assign(T,{id:`Input`});T.displayName=`Input`;var D=Object.assign(m,{LeadingAddon:v,TrailingAddon:S,LeadingIcon:b,TrailingIcon:C,ClearButton:f});D.displayName=`InputGroup`,v.displayName=`InputGroup.LeadingAddon`,S.displayName=`InputGroup.TrailingAddon`,b.displayName=`InputGroup.LeadingIcon`,C.displayName=`InputGroup.TrailingIcon`,f.displayName=`InputGroup.ClearButton`,Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return D}});
-//# sourceMappingURL=input-BoxJZira.js.map
+const e=require("./slot/index.js"),t=require("./icon-CfEsla9z.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/hooks/use-merge-refs"),o=require("@spark-ui/components/form-field"),s=require("@spark-ui/hooks/use-combined-state"),c=require("@spark-ui/icons/DeleteOutline");var l=(0,r.createContext)(null),u=()=>(0,r.useContext)(l)||{isStandalone:!0},d=({className:e,tabIndex:r=-1,onClick:a,inline:o=!1,ref:s,...l})=>{let{onClear:d,hasTrailingIcon:f}=u();return(0,i.jsx)(`button`,{ref:s,"data-spark-component":`input-clear-button`,className:(0,n.cx)(e,`pointer-events-auto absolute`,o?`h-sz-44 top-0 -translate-y-0`:`top-1/2 -translate-y-1/2`,`inline-flex h-full items-center justify-center outline-hidden`,`text-neutral hover:text-neutral-hovered`,f?`right-3xl px-sz-12`:`pl-md pr-lg right-0`),tabIndex:r,onClick:e=>{a&&a(e),d&&d()},type:`button`,...l,children:(0,i.jsx)(t.t,{size:`sm`,children:(0,i.jsx)(c.DeleteOutline,{})})})},f=Object.assign(d,{id:`ClearButton`});d.displayName=`InputGroup.ClearButton`;var p=(0,n.cva)([`relative inline-flex w-full`],{variants:{disabled:{true:[`cursor-not-allowed`,`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`},readOnly:{true:[`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`}}}),m=({className:e,children:t,state:n,disabled:c,readOnly:u,onClear:d,ref:f,...m})=>{let h=e=>e?e.type.id:``,g=(...e)=>_.find(t=>e.includes(h(t)||``)),_=r.Children.toArray(t).filter(r.isValidElement),v=g(`Input`),y=v?.props||{},b=(0,r.useRef)(null),x=(0,r.useRef)(d),S=(0,a.useMergeRefs)(v?.props.ref,b),[C,w]=(0,s.useCombinedState)(y.value,y.defaultValue,y.onValueChange),T=(0,o.useFormFieldControl)(),E=T.state??n,D=T.disabled||!!c,O=T.readOnly||!!u,k=g(`LeadingAddon`),A=g(`LeadingIcon`),j=g(`ClearButton`),M=g(`TrailingIcon`),N=g(`TrailingAddon`),P=!!k,F=!!N,I=!!A,L=!!M,R=!!C&&!!j&&!D&&!O,z=e=>{y.onChange&&y.onChange(e),w(e.target.value)},B=(0,r.useCallback)(()=>{x.current&&x.current(),w(``),b.current.focus()},[w]),V=(0,r.useMemo)(()=>({state:E,disabled:D,readOnly:O,hasLeadingIcon:I,hasTrailingIcon:L,hasLeadingAddon:P,hasTrailingAddon:F,hasClearButton:R,onClear:B}),[E,D,O,I,L,P,F,R,B]);(0,r.useEffect)(()=>{x.current=d},[d]);let H=b.current?.value;return(0,i.jsx)(l,{value:V,children:(0,i.jsxs)(`div`,{"data-spark-component":`input-group`,ref:f,className:p({disabled:D,readOnly:O,className:e}),...m,children:[P&&k,(0,i.jsxs)(`div`,{className:`relative inline-flex w-full`,children:[v&&(0,r.cloneElement)(v,{value:C??H??``,ref:S,defaultValue:void 0,onChange:z}),A,R&&j,M]}),F&&N]})})};m.displayName=`InputGroup`;var h=(0,n.cva)([`overflow-hidden`,`border-sm`,`shrink-0`,`h-full`,`focus-visible:relative focus-visible:z-raised`,`mx-0`],{variants:{asChild:{false:[`flex`,`items-center`,`px-lg`]},intent:{neutral:`border-outline`,error:`border-error`,alert:`border-alert`,success:`border-success`},disabled:{true:[`pointer-events-none border-outline!`]},readOnly:{true:[`pointer-events-none`]},design:{text:``,solid:``,inline:``}},compoundVariants:[{disabled:!1,readOnly:!1,design:`text`,class:[`bg-surface`,`text-on-surface`]},{disabled:!0,design:`text`,class:[`text-on-surface/dim-3`]},{disabled:!0,design:[`solid`,`inline`],class:[`opacity-dim-3`]}],defaultVariants:{intent:`neutral`}}),g=({asChild:t,className:n,children:a,ref:o,...s})=>{let{state:c,disabled:l,readOnly:d}=u(),f=typeof a==`string`,p=!!(!f&&t),m=f?a:r.Children.only(a),g=p&&!f?e.Slot:`div`;return(0,i.jsx)(g,{ref:o,"data-spark-component":`input-addon`,className:h({className:n,intent:c,disabled:l,readOnly:d,asChild:p,design:f?`text`:p?`solid`:`inline`}),...l&&{tabIndex:-1},...s,children:m})};g.displayName=`InputGroup.Addon`;var _=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-l-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-r-0! -mr-px rounded-l-full`),...r})})},v=Object.assign(_,{id:`LeadingAddon`});_.displayName=`InputGroup.LeadingAddon`;var y=({className:e,intent:r,children:a,...o})=>{let{disabled:s,readOnly:c}=u();return(0,i.jsx)(t.t,{"data-spark-component":`input-icon`,intent:r,className:(0,n.cx)(e,`pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2`,r?void 0:`text-neutral peer-focus:text-outline-high`,s||c?`opacity-dim-3`:void 0),...o,children:a})};y.displayName=`InputGroup.Icon`;var b=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`left-lg text-body-1`),...t});b.id=`LeadingIcon`,b.displayName=`InputGroup.LeadingIcon`;var x=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-r-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-l-0! -ml-px rounded-r-full`),...r})})},S=Object.assign(x,{id:`TrailingAddon`});x.displayName=`InputGroup.TrailingAddon`;var C=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`right-lg text-body-1`),...t});C.id=`TrailingIcon`,C.displayName=`InputGroup.TrailingIcon`;var w=(0,n.cva)([`relative`,`border-sm`,`peer`,`w-full`,`appearance-none outline-hidden`,`bg-surface`,`text-ellipsis text-body-1 text-on-surface`,`caret-neutral`,`[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]`,`autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]`,`disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3`,`read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5`,`focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus`],{variants:{asChild:{true:[`min-h-sz-44`],false:[`h-sz-44`]},intent:{neutral:[`border-outline`,`default:hover:border-outline-high`],success:[`default:border-success`],alert:[`default:border-alert`],error:[`default:border-error`]},hasLeadingAddon:{true:[`rounded-l-0`],false:[`rounded-l-input`]},hasTrailingAddon:{true:[`rounded-r-0`],false:[`rounded-r-input`]},hasLeadingIcon:{true:[`pl-3xl`],false:[`pl-lg`]},hasTrailingIcon:{true:``},hasClearButton:{true:``}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:`pr-lg`},{hasTrailingIcon:!0,hasClearButton:!1,class:`pr-3xl`},{hasTrailingIcon:!1,hasClearButton:!0,class:`pr-3xl`},{hasTrailingIcon:!0,hasClearButton:!0,class:`pr-[calc(var(--spacing-3xl)*2)]`}],defaultVariants:{intent:`neutral`}}),T=({className:t,asChild:n=!1,onValueChange:r,onChange:a,onKeyDown:s,disabled:c,readOnly:l,ref:d,...f})=>{let p=(0,o.useFormFieldControl)(),m=u(),{id:h,name:g,isInvalid:_,isRequired:v,description:y}=p,{hasLeadingAddon:b,hasTrailingAddon:x,hasLeadingIcon:S,hasTrailingIcon:C,hasClearButton:T,onClear:E}=m,D=n?e.Slot:`input`,O=p.state||m.state,k=p.disabled||m.disabled||c,A=p.readOnly||m.readOnly||l;return(0,i.jsx)(D,{"data-spark-component":`input`,ref:d,id:h,name:g,className:w({asChild:n,className:t,intent:O,hasLeadingAddon:!!b,hasTrailingAddon:!!x,hasLeadingIcon:!!S,hasTrailingIcon:!!C,hasClearButton:!!T}),disabled:k,readOnly:A,required:v,"aria-describedby":y,"aria-invalid":_,onChange:e=>{a&&a(e),r&&r(e.target.value)},onKeyDown:e=>{s&&s(e),T&&E&&e.key===`Escape`&&E()},...f})},E=Object.assign(T,{id:`Input`});T.displayName=`Input`;var D=Object.assign(m,{LeadingAddon:v,TrailingAddon:S,LeadingIcon:b,TrailingIcon:C,ClearButton:f});D.displayName=`InputGroup`,v.displayName=`InputGroup.LeadingAddon`,S.displayName=`InputGroup.TrailingAddon`,b.displayName=`InputGroup.LeadingIcon`,C.displayName=`InputGroup.TrailingIcon`,f.displayName=`InputGroup.ClearButton`,Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return D}});
+//# sourceMappingURL=input-CADvgFpY.js.map