@spark-ui/components 13.1.3 → 13.1.4

package/dist/form-field/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldRequiredIndicator.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\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      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\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\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\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldRequiredIndicator","Label","FormFieldLabel","htmlForProp","requiredIndicator","control","htmlFor","Slottable","FormFieldSuccessMessage","Root"],"mappings":";;;;;;;;;AAiDO,MAAMA,IAAmBC,EAA4C,IAAI,GAEnEC,IAAY,eAEZC,IAAe,MAAM;AAChC,QAAMC,IAAUC,EAAWL,CAAgB;AAE3C,MAAI,CAACI;AACH,UAAM,MAAM,uDAAuD;AAGrE,SAAOA;AACT,GCjDaE,IAAoB,CAAC;AAAA,EAChC,IAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAA8B;AAC5B,QAAMC,IAAU,GAAGZ,CAAS,UAAUa,GAAO,IACvC,CAACC,GAAYC,CAAa,IAAIC,EAAmB,CAAA,CAAE,GACnDC,IAAcH,EAAW,SAAS,IAAIA,EAAW,KAAK,GAAG,IAAI,QAE7DI,IAAqBC,EAAY,CAACC,MAAkB;AACxD,IAAAL,EAAc,CAAAM,MAAO,CAAC,GAAGA,GAAKD,CAAK,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECE,IAAwBH,EAAY,CAACC,MAAkB;AAC3D,IAAAL,EAAc,OAAOM,EAAI,OAAO,CAAAE,MAAWA,MAAYH,CAAK,CAAC;AAAA,EAC/D,GAAG,CAAA,CAAE,GAECI,IAAQC,EAAQ,OAGb;AAAA,IACL,IAAApB;AAAA,IACA,SAAAO;AAAA,IACA,MAAAN;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAVgBD,MAAU;AAAA,IAW1B,aAAAQ;AAAA,IACA,gBAAgBC;AAAA,IAChB,mBAAmBI;AAAA,EAAA,IAEpB;AAAA,IACDjB;AAAA,IACAO;AAAA,IACAN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAS;AAAA,IACAR;AAAA,IACAC;AAAA,IACAQ;AAAA,IACAI;AAAA,EAAA,CACD;AAED,SAAO,gBAAAI,EAAC5B,EAAiB,UAAjB,EAA0B,OAAA0B,GAAe,UAAAb,EAAA,CAAS;AAC5D;AAEAP,EAAkB,cAAc;ACxCzB,MAAMuB,IAAY,CAAC;AAAA,EACxB,WAAAC;AAAA,EACA,UAAArB,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,MAAAF;AAAA,EACA,OAAAG;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAmB,IAAU;AAAA,EACV,KAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAM1B,IAAK,GAAGL,CAAS,IAAIa,GAAO;AAGlC,SACE,gBAAAa;AAAA,IAACtB;AAAA,IAAA;AAAA,MACC,IAAAC;AAAA,MACA,MAAAC;AAAA,MACA,YAAAI;AAAA,MACA,UAAAH;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MAEA,UAAA,gBAAAiB;AAAA,QAXcG,IAAUG,IAAO;AAAA,QAW9B;AAAA,UACC,KAAAF;AAAA,UACA,wBAAqB;AAAA,UACrB,WAAWG,EAAGL,GAAW,sBAAsB;AAAA,UAC9C,GAAGG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAJ,EAAU,cAAc;ACjDjB,MAAMO,IAAmB,CAAC;AAAA,EAC/B,IAAIC;AAAA,EACJ,WAAAP;AAAA,EACA,KAAAE;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAM,EAAE,gBAAAK,GAAgB,mBAAAC,EAAA,IAAsBpC,EAAA,GACxCqC,IAAY,GAAGtC,CAAS,YAAYa,GAAO,IAC3CR,IAAK8B,KAAUG;AAErB,SAAAC,EAAU,OACRH,EAAe/B,CAAE,GAEV,MAAM;AACX,IAAAgC,EAAkBhC,CAAE;AAAA,EACtB,IACC,CAACA,GAAI+B,GAAgBC,CAAiB,CAAC,GAGxC,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAI;AAAA,MACA,IAAAzB;AAAA,MACA,wBAAqB;AAAA,MACrB,WAAW4B,EAAGL,GAAW,cAAc;AAAA,MACtC,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAG,EAAiB,cAAc;ACvBxB,MAAMM,IAAwB,CAAC;AAAA,EACpC,WAAAZ;AAAA,EACA,OAAAnB;AAAA,EACA,UAAAE;AAAA,EACA,KAAAmB;AAAA,EACA,GAAGC;AACL,MACgB9B,EAAA,EAEJ,UAAUQ,IACX,OAIP,gBAAAgC;AAAA,EAACP;AAAA,EAAA;AAAA,IACC,KAAAJ;AAAA,IACA,wBAAqB;AAAA,IACrB,WAAWG;AAAA,MACT;AAAA,MACAxB,MAAU,UAAU,eAAe;AAAA,MACnCmB;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAtB,MAAU,WACT,gBAAAiB,EAACgB,GAAA,EAAK,MAAK,MACT,UAAA,gBAAAhB,EAACiB,KAAe,EAAA,CAClB;AAAA,MAEDlC,MAAU,WACT,gBAAAiB,EAACgB,GAAA,EAAK,MAAK,MAAK,QAAO,SACrB,UAAA,gBAAAhB,EAACkB,GAAA,CAAA,CAAa,EAAA,CAChB;AAAA,MAEDnC,MAAU,aACT,gBAAAiB,EAACgB,GAAA,EAAK,MAAK,MACT,UAAA,gBAAAhB,EAACmB,KAAM,EAAA,CACT;AAAA,MAGDlC;AAAA,IAAA;AAAA,EAAA;AAAA;AAKP6B,EAAsB,cAAc;ACpD7B,MAAMM,IAAwB,CAAC,EAAE,KAAAhB,GAAK,GAAGiB,QAE5C,gBAAArB;AAAA,EAACc;AAAA,EAAA;AAAA,IACC,KAAAV;AAAA,IACA,wBAAqB;AAAA,IACrB,OAAM;AAAA,IACL,GAAGiB;AAAA,EAAA;AAAA;AAKVD,EAAsB,cAAc;ACM7B,MAAME,IAA2B,CAAC;AAAA,EACvC,WAAApB;AAAA,EACA,OAAAJ,IAAQ;AAAA,EACR,WAAAyB;AAAA,EACA,aAAAhC;AAAA,EACA,kBAAAiC;AAAA,EACA,KAAApB;AAAA,EACA,GAAGC;AACL,MAAqC;AACnC,QAAM,CAACoB,GAAgBC,CAAiB,IAAIpC,EAASQ,CAAK;AAK1D,SAAAe,EAAU,MAAM;AACd,UAAMc,IAAY,WAAW,MAAM;AACjC,MAAAD,EAAkB5B,CAAK;AAAA,IACzB,GAAG,GAAI;AAEP,WAAO,MAAM,aAAa6B,CAAS;AAAA,EACrC,GAAG,CAAC7B,CAAK,CAAC,GAGR,gBAAAiB,EAAC,QAAA,EAAK,WAAU,sBACb,UAAA;AAAA,IAAAxB,KACC,gBAAAS,EAACQ,GAAA,EAAiB,WAAU,mBAAmB,UAAAjB,GAAY;AAAA,IAE7D,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAI;AAAA,QACA,eAAW;AAAA,QACX,wBAAqB;AAAA,QACrB,WAAWG,EAAGL,GAAW,gBAAgB,cAAc;AAAA,QACtD,GAAGG;AAAA,QAEH,UAAA,GAAGP,EAAM,MAAM,IAAIyB,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAG9BC,KACC,gBAAAxB,EAAC,QAAA,EAAK,WAAU,WAAU,aAAU,UACjC,UAAAwB,EAAiB,EAAE,gBAAgBD,IAAYE,EAAe,OAAA,CAAQ,EAAA,CACzE;AAAA,EAAA,GAEJ;AAEJ;AAEAH,EAAyB,cAAc;AChDhC,MAAMM,IAAsB,MAAM;AACvC,QAAM,EAAE,IAAAjD,GAAI,MAAAC,GAAM,aAAAW,GAAa,UAAAV,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAG,GAAS,WAAA2C,GAAW,YAAA7C,EAAA,IAC5EP,EAAWL,CAAgB,KAAK,CAAA;AAElC,SAAO;AAAA,IACL,IAAAO;AAAA,IACA,MAAAC;AAAA,IACA,aAAAW;AAAA,IACA,UAAAV;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAG;AAAA,IACA,WAAA2C;AAAA,IACA,YAAA7C;AAAA,EAAA;AAEJ,GAEa8C,IAAmB,CAAC,EAAE,UAAA7C,QAAsC;AACvE,QAAMoC,IAAQO,EAAA;AAEd,SAAO,gBAAA5B,EAAA+B,GAAA,EAAG,UAAA9C,EAASoC,CAAK,GAAE;AAC5B;AAEAS,EAAiB,cAAc;ACtCxB,MAAME,IAAwB,CAAC,EAAE,KAAA5B,GAAK,GAAGiB,QAE5C,gBAAArB;AAAA,EAACc;AAAA,EAAA;AAAA,IACC,KAAAV;AAAA,IACA,wBAAqB;AAAA,IACrB,OAAM;AAAA,IACL,GAAGiB;AAAA,EAAA;AAAA;AAKVW,EAAsB,cAAc;ACV7B,MAAMC,IAAyB,CAAC;AAAA,EACrC,WAAA/B;AAAA,EACA,KAAAE;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAL;AAAA,EAACQ;AAAA,EAAA;AAAA,IACC,KAAAJ;AAAA,IACA,wBAAqB;AAAA,IACrB,WAAWG,EAAG,yBAAyBL,CAAS;AAAA,IAC/C,GAAGG;AAAA,EAAA;AAAA;AAKV4B,EAAuB,cAAc;ACf9B,MAAMC,IAA6B,CAAC;AAAA,EACzC,WAAAhC;AAAA,EACA,KAAAE;AAAA,EACA,GAAGiB;AACL,MACS,gBAAArB,EAACmC,EAAM,mBAAN,EAAwB,KAAA/B,GAAU,WAAWG,EAAG,SAASL,CAAS,GAAI,GAAGmB,EAAA,CAAO;AAG1Fa,EAA2B,cAAc;ACDlC,MAAME,IAAiB,CAAC;AAAA,EAC7B,SAASC;AAAA,EACT,WAAAnC;AAAA,EACA,UAAAjB;AAAA,EACA,mBAAAqD,sBAAqBJ,GAAA,EAA2B;AAAA,EAChD,SAAA/B;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAA2B;AACzB,QAAMkC,IAAUhE,EAAA,GAEV,EAAE,UAAAM,GAAU,SAAAK,GAAS,YAAAF,EAAA,IAAeuD,GACpCC,IAAUrC,IAAU,SAAYkC,KAAeE,EAAQ;AAE7D,SACE,gBAAAvC;AAAA,IAACmC;AAAA,IAAA;AAAA,MACC,KAAA/B;AAAA,MACA,IAAIlB;AAAA,MACJ,wBAAqB;AAAA,MACrB,SAAAsD;AAAA,MACA,WAAWjC,EAAGL,GAAWrB,IAAW,8CAA8C,MAAS;AAAA,MAC3F,SAAAsB;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA,gBAAAU,EAAAgB,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA/B,EAACyC,KAAW,UAAAxD,GAAS;AAAA,QACpBD,KAAcsD;AAAA,MAAA,EAAA,CACjB;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAe,cAAc;ACxCtB,MAAMM,IAA0B,CAAC,EAAE,KAAAtC,GAAK,GAAGiB,QAE9C,gBAAArB;AAAA,EAACc;AAAA,EAAA;AAAA,IACC,KAAAV;AAAA,IACA,wBAAqB;AAAA,IACrB,OAAM;AAAA,IACL,GAAGiB;AAAA,EAAA;AAAA;AAKVqB,EAAwB,cAAc;ACR/B,MAAMzC,IAUT,OAAO,OAAO0C,GAAM;AAAA,EACtB,OAAOP;AAAA,EACP,SAASN;AAAA,EACT,cAAchB;AAAA,EACd,gBAAgB4B;AAAA,EAChB,cAActB;AAAA,EACd,cAAcY;AAAA,EACd,eAAeC;AAAA,EACf,mBAAmBC;AAAA,EACnB,iBAAiBZ;AACnB,CAAC;AAEDrB,EAAU,cAAc;AACxBmC,EAAe,cAAc;AAC7BN,EAAiB,cAAc;AAC/BhB,EAAsB,cAAc;AACpC4B,EAAwB,cAAc;AACtCtB,EAAsB,cAAc;AACpCY,EAAsB,cAAc;AACpCC,EAAuB,cAAc;AACrCC,EAA2B,cAAc;AACzCZ,EAAyB,cAAc;"}
+{"version":3,"sources":["../../src/form-field/FormField.tsx","../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, 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\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\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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","names":["useId","jsx","useId","cx","cx","useId","jsx","useId","cx","jsx","cx","jsx","cx","useEffect","useState","jsx","jsxs","useState","useEffect","cx","useContext","jsx","useContext","jsx","cx","jsx","cx","cx","cx","jsx","cx","Fragment","jsx","jsxs","cx","jsx","FormField"]}

package/dist/icon/index.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const iconStyles: (props?: ({
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    size?: "current" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconVariantsProps = VariantProps<typeof iconStyles>;
+
+interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {
+    /**
+     * The svg icon that will be wrapped
+     */
+    children: ReactNode;
+    /**
+     * The accessible label for the icon. This label will be visually hidden but announced to screen
+     * reader users, similar to `alt` text for `img` tags.
+     */
+    label?: string;
+}
+declare const Icon: {
+    ({ label, className, size, intent, children, ...others }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Icon, type IconProps };

package/dist/icon/index.d.ts

@@ -1 +1,28 @@
-export * from './Icon';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const iconStyles: (props?: ({
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    size?: "current" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type IconVariantsProps = VariantProps<typeof iconStyles>;
+
+interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {
+    /**
+     * The svg icon that will be wrapped
+     */
+    children: ReactNode;
+    /**
+     * The accessible label for the icon. This label will be visually hidden but announced to screen
+     * reader users, similar to `alt` text for `img` tags.
+     */
+    label?: string;
+}
+declare const Icon: {
+    ({ label, className, size, intent, children, ...others }: IconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Icon, type IconProps };

package/dist/icon/index.js

@@ -1,2 +1,127 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Icon-Bf0XrmiR.js");exports.Icon=e.Icon;
-//# sourceMappingURL=index.js.map
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/icon/index.ts
+var icon_exports = {};
+__export(icon_exports, {
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(icon_exports);
+
+// src/icon/Icon.tsx
+var import_react2 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react2.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    (0, import_react2.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon
+});
+//# sourceMappingURL=index.js.map

package/dist/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/icon/index.ts","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx"],"sourcesContent":["export * from './Icon'\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\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","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","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      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA0F;;;ACA1F,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,YAAwC,gBAAAC,KAAU;AAMxD,IAAM,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,MAAiB;AACpD,SAAO,4CAAC,gBAAAA,KAAU,MAAV,EAAe,KAAW,GAAG,OAAO;AAC9C;;;ACFI,IAAAC,sBAAA;AAJG,IAAM,iBAAiB,CAAC,EAAE,UAAU,OAAO,KAAK,GAAG,MAAM,MAA2B;AACzF,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;;;ACrC7B,4BAA6B;AAC7B,sCAAkC;AAE3B,IAAM,iBAAa,qCAAI,CAAC,uBAAuB,GAAG;AAAA,EACvD,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,YAAQ,oCAcN;AAAA,MACA,SAAS,CAAC,cAAc;AAAA,MACxB,MAAM,CAAC,WAAW;AAAA,MAClB,SAAS,CAAC,cAAc;AAAA,MACxB,QAAQ,CAAC,aAAa;AAAA,MACtB,OAAO,CAAC,YAAY;AAAA,MACpB,SAAS,CAAC,cAAc;AAAA,MACxB,OAAO,CAAC,YAAY;AAAA,MACpB,OAAO,CAAC,YAAY;AAAA,MACpB,MAAM,CAAC,WAAW;AAAA,MAClB,SAAS,CAAC,cAAc;AAAA,IAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,IAID,UAAM,oCAA0D;AAAA,MAC9D,SAAS,CAAC,qBAAqB;AAAA,MAC/B,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,IAC3B,CAAC;AAAA,EACH;AACF,CAAC;;;AHjBG,IAAAC,sBAAA;AAXG,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,QAAQ,uBAAS,KAAK,QAAQ;AAEpC,SACE,8EACG;AAAA,oCAAa,OAA4C;AAAA,MACxD,WAAW,WAAW,EAAE,WAAW,MAAM,OAAO,CAAC;AAAA,MACjD,wBAAwB;AAAA,MACxB,eAAe;AAAA,MACf,WAAW;AAAA,MACX,GAAG;AAAA,IACL,CAAC;AAAA,IAEA,SAAS,6CAAC,kBAAgB,iBAAM;AAAA,KACnC;AAEJ;AAEA,KAAK,cAAc;","names":["import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime"]}

package/dist/icon/index.mjs

@@ -1,5 +1,9 @@
-import { I } from "../Icon-D1RueiPY.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
 export {
-  I as Icon
+  Icon
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/icon/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/icon-button/index.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref } from 'react';
+import { ButtonProps } from '../button/index.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {
+    'aria-label': string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const IconButton: {
+    ({ design, disabled, intent, shape, size, className, ref, ...others }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { IconButton, type IconButtonProps };

package/dist/icon-button/index.d.ts

@@ -1 +1,16 @@
-export * from './IconButton';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref } from 'react';
+import { ButtonProps } from '../button/index.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {
+    'aria-label': string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const IconButton: {
+    ({ design, disabled, intent, shape, size, className, ref, ...others }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { IconButton, type IconButtonProps };