@spark-ui/components 14.1.2 → 15.0.0

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":"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"}
+{"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/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 { 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","FormFieldLabel","htmlForProp","requiredIndicator","FormFieldRequiredIndicator","control","htmlFor","Label","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;ACR9B,MAAMC,IAAiB,CAAC;AAAA,EAC7B,SAASC;AAAA,EACT,WAAAjC;AAAA,EACA,UAAAjB;AAAA,EACA,mBAAAmD,sBAAqBC,GAAA,EAA2B;AAAA,EAChD,SAAAlC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAA2B;AACzB,QAAMiC,IAAU/D,EAAA,GAEV,EAAE,UAAAM,GAAU,SAAAK,GAAS,YAAAF,EAAA,IAAesD,GACpCC,IAAUpC,IAAU,SAAYgC,KAAeG,EAAQ;AAE7D,SACE,gBAAAtC;AAAA,IAACwC;AAAA,IAAA;AAAA,MACC,KAAApC;AAAA,MACA,IAAIlB;AAAA,MACJ,wBAAqB;AAAA,MACrB,SAAAqD;AAAA,MACA,WAAWhC,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,KAAcoD;AAAA,MAAA,EAAA,CACjB;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAe,cAAc;ACxCtB,MAAMQ,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,OAAOT;AAAA,EACP,SAASJ;AAAA,EACT,cAAchB;AAAA,EACd,gBAAgB4B;AAAA,EAChB,cAActB;AAAA,EACd,cAAcY;AAAA,EACd,eAAeC;AAAA,EACf,mBAAmBI;AAAA,EACnB,iBAAiBf;AACnB,CAAC;AAEDrB,EAAU,cAAc;AACxBiC,EAAe,cAAc;AAC7BJ,EAAiB,cAAc;AAC/BhB,EAAsB,cAAc;AACpC4B,EAAwB,cAAc;AACtCtB,EAAsB,cAAc;AACpCY,EAAsB,cAAc;AACpCC,EAAuB,cAAc;AACrCI,EAA2B,cAAc;AACzCf,EAAyB,cAAc;"}

package/dist/slider/Slider.d.ts

@@ -1,28 +1,23 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { PropsWithChildren, Ref } from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
 import { SliderRangeVariantsProps } from './SliderTrack.styles';
-export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
+export interface SliderProps extends Omit<ComponentProps<typeof BaseSlider.Root>, 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'>, PropsWithChildren<SliderRangeVariantsProps> {
     /**
      * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
      */
-    defaultValue?: number[];
+    defaultValue?: number;
     /**
      * The controlled value of the slider. Must be used in conjunction with `onValueChange`.
      */
-    value?: number[];
+    value?: number;
     /**
      * Event handler called when the value changes.
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: (value: number) => void;
     /**
      * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
      */
-    onValueCommit?: (value: number[]) => void;
+    onValueCommit?: (value: number) => void;
     /**
      * The name of the slider. Submitted with its owning form as part of a name/value pair.
      * If wrapped with a FormField with a name, will be inherited from it.
@@ -55,6 +50,6 @@ export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orie
     ref?: Ref<HTMLDivElement>;
 }
 export declare const Slider: {
-    ({ asChild, intent, shape, children, className, ref, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, children, className, ref, value: valueProp, defaultValue: defaultValueProp, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, onValueChange, onValueCommit, min, max, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderContext.d.ts

@@ -1,7 +1,13 @@
+import { RefObject } from 'react';
 import { SliderProps } from './Slider';
-export type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {
+export type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {
     fieldLabelId?: string;
     fieldId?: string;
+    onLabelId?: (id: string | undefined) => void;
+    hasValueInThumb: boolean;
+    registerValueInThumb: () => () => void;
+    controlRef: RefObject<HTMLElement | null>;
+    thumbRef: RefObject<HTMLElement | null>;
 };
 export declare const SliderContext: import('react').Context<SliderContextInterface>;
 export declare const useSliderContext: () => SliderContextInterface;

package/dist/slider/SliderControl.d.ts

@@ -0,0 +1,7 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>;
+export declare const SliderControl: {
+    ({ className, ref, ...rest }: SliderControlProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderIndicator.d.ts

@@ -0,0 +1,7 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>;
+export declare const SliderIndicator: {
+    ({ className, ref, ...rest }: SliderIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderLabel.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, Ref } from 'react';
+import { LabelProps } from '../label';
+export interface SliderLabelProps extends LabelProps {
+    /**
+     * Element shown when the input is required inside the label.
+     */
+    requiredIndicator?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+export declare const SliderLabel: {
+    ({ htmlFor: htmlForProp, id: idProp, className, children, requiredIndicator, asChild, ref, ...others }: SliderLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderMaxValue.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface SliderMaxValueProps {
+    className?: string;
+    children?: (value: number) => ReactNode;
+}
+export declare const SliderMaxValue: import('react').ForwardRefExoticComponent<SliderMaxValueProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/slider/SliderMinValue.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface SliderMinValueProps {
+    className?: string;
+    children?: (value: number) => ReactNode;
+}
+export declare const SliderMinValue: import('react').ForwardRefExoticComponent<SliderMinValueProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/slider/SliderThumb.d.ts

@@ -1,14 +1,7 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { Ref } from 'react';
-export interface SliderThumbProps extends RadixSlider.SliderThumbProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLSpanElement>;
-}
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps, PropsWithChildren } from 'react';
+export type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> & PropsWithChildren;
 export declare const SliderThumb: {
-    ({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ref: forwardedRef, children, ...rest }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderThumbContext.d.ts

@@ -0,0 +1,5 @@
+export interface SliderThumbContextValue {
+    isInsideThumb: true;
+}
+export declare const SliderThumbContext: import('react').Context<SliderThumbContextValue | null>;
+export declare const useSliderThumbContext: () => SliderThumbContextValue | null;

package/dist/slider/SliderTrack.d.ts

@@ -1,14 +1,7 @@
-import { Slider as RadixSlider } from 'radix-ui';
-import { Ref } from 'react';
-export interface SliderTrackProps extends RadixSlider.SliderTrackProps, RadixSlider.SliderRangeProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>;
 export declare const SliderTrack: {
-    ({ asChild, className, ref, ...rest }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ref, ...rest }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/slider/SliderTrack.styles.d.ts

@@ -1,9 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
-export declare const trackVariants: (props?: ({
-    shape?: "square" | "rounded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const rangeVariants: (props?: ({
     intent?: "main" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
-    shape?: "square" | "rounded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;

package/dist/slider/SliderValue.d.ts

@@ -0,0 +1,10 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+export type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>;
+/**
+ * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.
+ */
+export declare const SliderValue: {
+    ({ className, children, ref, ...rest }: SliderValueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/index.d.mts

@@ -1,8 +1,20 @@
 import { Slider as Root, SliderProps } from './Slider';
+import { SliderControl as Control, SliderControlProps } from './SliderControl';
+import { SliderIndicator as Indicator, SliderIndicatorProps } from './SliderIndicator';
+import { SliderLabel as Label, SliderLabelProps } from './SliderLabel';
+import { SliderMaxValue as MaxValue, SliderMaxValueProps } from './SliderMaxValue';
+import { SliderMinValue as MinValue, SliderMinValueProps } from './SliderMinValue';
 import { SliderThumb as Thumb, SliderThumbProps } from './SliderThumb';
 import { SliderTrack as Track, SliderTrackProps } from './SliderTrack';
+import { SliderValue as Value, SliderValueProps } from './SliderValue';
 export declare const Slider: typeof Root & {
+    Control: typeof Control;
+    Indicator: typeof Indicator;
+    Label: typeof Label;
+    MaxValue: typeof MaxValue;
+    MinValue: typeof MinValue;
     Thumb: typeof Thumb;
     Track: typeof Track;
+    Value: typeof Value;
 };
-export type { SliderProps, SliderThumbProps, SliderTrackProps };
+export type { SliderProps, SliderControlProps, SliderIndicatorProps, SliderLabelProps, SliderMaxValueProps, SliderMinValueProps, SliderThumbProps, SliderTrackProps, SliderValueProps, };

package/dist/slider/index.d.ts

@@ -1,8 +1,20 @@
 import { Slider as Root, SliderProps } from './Slider';
+import { SliderControl as Control, SliderControlProps } from './SliderControl';
+import { SliderIndicator as Indicator, SliderIndicatorProps } from './SliderIndicator';
+import { SliderLabel as Label, SliderLabelProps } from './SliderLabel';
+import { SliderMaxValue as MaxValue, SliderMaxValueProps } from './SliderMaxValue';
+import { SliderMinValue as MinValue, SliderMinValueProps } from './SliderMinValue';
 import { SliderThumb as Thumb, SliderThumbProps } from './SliderThumb';
 import { SliderTrack as Track, SliderTrackProps } from './SliderTrack';
+import { SliderValue as Value, SliderValueProps } from './SliderValue';
 export declare const Slider: typeof Root & {
+    Control: typeof Control;
+    Indicator: typeof Indicator;
+    Label: typeof Label;
+    MaxValue: typeof MaxValue;
+    MinValue: typeof MinValue;
     Thumb: typeof Thumb;
     Track: typeof Track;
+    Value: typeof Value;
 };
-export type { SliderProps, SliderThumbProps, SliderTrackProps };
+export type { SliderProps, SliderControlProps, SliderIndicatorProps, SliderLabelProps, SliderMaxValueProps, SliderMinValueProps, SliderThumbProps, SliderTrackProps, SliderValueProps, };

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),w=require("@spark-ui/components/form-field"),b=require("radix-ui"),u=require("class-variance-authority"),h=require("react"),q=u.cva(["flex relative h-sz-24 items-center","touch-none select-none","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"]),S=h.createContext({}),x=()=>h.useContext(S),T=({asChild:n=!1,intent:s="basic",shape:i="square",children:o,className:d,ref:a,disabled:f,readOnly:g,name:m,...p})=>{const r=w.useFormFieldControl(),t=r.disabled??f,l=r.readOnly??g,e=r.name??m;return console.log("✅ field ",r.disabled),c.jsx(S.Provider,{value:{intent:s,shape:i,fieldLabelId:r.labelId,fieldId:r.id},children:c.jsx(b.Slider.Root,{ref:a,"data-spark-component":"slider",asChild:n,className:q({className:d}),dir:"ltr",orientation:"horizontal",inverted:!1,minStepsBetweenThumbs:0,disabled:t||l,name:e,"aria-describedby":r.description,"aria-invalid":r.isInvalid,...p,children:o})})};T.displayName="Slider";const N=u.cva(["block h-sz-24 w-sz-24 rounded-full cursor-pointer","outline-hidden","focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus","data-[interaction=pointerdown]:focus-visible:ring-0!","data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed","after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide","after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300","hover:after:w-sz-32 hover:after:h-sz-32"],{variants:{intent:{main:["bg-main","after:bg-main-container after:border-main"],support:["bg-support","after:bg-support-container after:border-support"],accent:["bg-accent","after:bg-accent-container after:border-accent"],basic:["bg-basic","after:bg-basic-container after:border-basic"],info:["bg-info","after:bg-info-container after:border-info"],neutral:["bg-neutral","after:bg-neutral-container after:border-neutral"],success:["bg-success","after:bg-success-container after:border-success"],alert:["bg-alert","after:bg-alert-container after:border-alert"],error:["bg-error","after:bg-error-container after:border-error"]}},defaultVariants:{intent:"basic"}}),v=({asChild:n=!1,className:s,onPointerDown:i,onKeyDown:o,onBlur:d,ref:a,...f})=>{const{intent:g,fieldLabelId:m,fieldId:p}=x(),r=h.useRef(null),t=a||r,l=e=>{typeof t=="function"||!t.current||(t.current.dataset.interaction=e.type)};return c.jsx(b.Slider.Thumb,{"data-spark-component":"slider-thumb",ref:t,asChild:n,id:p,onPointerDown:e=>{l(e),i?.(e)},onKeyDown:e=>{l(e),o?.(e)},onBlur:e=>{l(e),d?.(e)},className:N({intent:g,className:s}),"aria-labelledby":m,...f})};v.displayName="Slider.Thumb";const j=u.cva(["relative grow h-sz-4 bg-on-background/dim-4"],{variants:{shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{shape:"square"}}),z=u.cva(["absolute h-full"],{variants:{intent:{main:["bg-main"],support:["bg-support"],accent:["bg-accent"],basic:["bg-basic"],info:["bg-info"],neutral:["bg-neutral"],success:["bg-success"],alert:["bg-alert"],error:["bg-error"]},shape:{rounded:"rounded-sm",square:"rounded-0"}},defaultVariants:{intent:"basic",shape:"square"}}),y=({asChild:n=!1,className:s,ref:i,...o})=>{const{intent:d,shape:a}=x();return c.jsx(b.Slider.Track,{"data-spark-component":"slider-track",ref:i,asChild:n,className:j({shape:a}),...o,children:c.jsx(b.Slider.Range,{className:z({intent:d,shape:a,className:s})})})};y.displayName="Slider.Track";const k=Object.assign(T,{Thumb:v,Track:y});k.displayName="Slider";v.displayName="Slider.Thumb";y.displayName="Slider.Track";exports.Slider=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),N=require("@base-ui/react/slider"),X=require("@spark-ui/components/form-field"),t=require("react"),S=require("class-variance-authority"),M=require("@spark-ui/hooks/use-merge-refs"),H=require("../FormFieldRequiredIndicator-CHfcoT2y.js"),J=require("../label/index.js"),K=require("../Slot-DQ8z2zsy.js"),Q=S.cva(["grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative","touch-none select-none","data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"]),$=t.createContext({}),C=()=>t.useContext($),B=({intent:r="basic",children:e,className:a,ref:n,value:o,defaultValue:d,disabled:f,readOnly:v,name:s,onValueChange:c,onValueCommit:m,min:b=0,max:g=100,...h})=>{const l=X.useFormFieldControl(),x=l.disabled??f,p=l.readOnly??v,y=l.name??s,[I,R]=t.useState(l.labelId),[V,T]=t.useState(0),k=t.useRef(null),_=t.useRef(null),D=t.useCallback(u=>{R(u)},[]),G=t.useCallback(()=>(T(u=>u+1),()=>T(u=>u-1)),[]);return i.jsx($.Provider,{value:{intent:r,min:b,max:g,fieldLabelId:l.labelId||I,fieldId:l.id,onLabelId:D,hasValueInThumb:V>0,registerValueInThumb:G,controlRef:k,thumbRef:_},children:i.jsx(N.Slider.Root,{ref:n,"data-spark-component":"slider",className:Q({className:a}),orientation:"horizontal",disabled:x||p,thumbAlignment:"edge",name:y,"aria-describedby":l.description,"aria-invalid":l.isInvalid,"aria-disabled":x||p?!0:void 0,value:o!==void 0?[o]:void 0,defaultValue:d!==void 0?[d]:void 0,onValueChange:c?u=>{const j=Array.isArray(u)?u[0]??0:u;c(j)}:void 0,onValueCommitted:m?u=>{const j=Array.isArray(u)?u[0]??0:u;m(j)}:void 0,min:b,max:g,...h,children:e})})};B.displayName="Slider";const z=({className:r,ref:e,...a})=>{const{hasValueInThumb:n,controlRef:o}=C(),d=M.useMergeRefs(o,e);return i.jsx(N.Slider.Control,{"data-spark-component":"slider-control",ref:d,className:S.cx("min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center",n&&"mt-xl",r),...a})};z.displayName="Slider.Control";const U=S.cva(["relative grow h-sz-4 bg-on-background/dim-4 rounded-sm"]),Y=S.cva(["absolute h-full rounded-sm","transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],accent:["bg-accent"],basic:["bg-basic"],info:["bg-info"],neutral:["bg-neutral"],success:["bg-success"],alert:["bg-alert"],error:["bg-error"]}},defaultVariants:{intent:"basic"}}),q=({className:r,ref:e,...a})=>{const{intent:n}=C();return i.jsx(N.Slider.Indicator,{"data-spark-component":"slider-indicator",ref:e,className:Y({intent:n,className:r}),...a})};q.displayName="Slider.Indicator";const Z=":slider-label",F=({htmlFor:r,id:e,className:a,children:n,requiredIndicator:o=i.jsx(H.FormFieldRequiredIndicator,{}),asChild:d,ref:f,...v})=>{const s=X.useFormFieldControl(),{fieldLabelId:c,fieldId:m,onLabelId:b}=C(),g=t.useId(),h=`${Z}-${g}`,l=e||c||s.labelId||h,x=d?void 0:r||m||s.id,p=s.disabled,y=s.isRequired,I=t.useRef(null),R=M.useMergeRefs(f,I);return t.useEffect(()=>{b&&!c&&!s.labelId&&b(l)},[b,c,s.labelId,l]),i.jsx(J.Label,{ref:R,id:l,"data-spark-component":"slider-label",htmlFor:x,className:S.cx(p?"text-on-surface/dim-3 pointer-events-none":void 0,a),asChild:d,...v,children:i.jsxs(i.Fragment,{children:[i.jsx(K.Slottable,{children:n}),y&&o]})})};F.displayName="Slider.Label";const L=t.forwardRef(({className:r,children:e},a)=>{const{max:n=100}=C(),o=e?e(n):n;return i.jsx("div",{"data-spark-component":"slider-max-value",ref:a,className:S.cx("text-on-surface/dim-1 text-body-2 col-start-2 text-right",r),children:o})});L.displayName="Slider.MaxValue";const w=t.forwardRef(({className:r,children:e},a)=>{const{min:n=0}=C(),o=e?e(n):n;return i.jsx("div",{"data-spark-component":"slider-min-value",ref:a,className:S.cx("text-on-surface/dim-1 text-body-2 col-start-1 text-left",r),children:o})});w.displayName="Slider.MinValue";const P=t.createContext(null),ee=()=>t.useContext(P),te=S.cva(["relative block size-sz-24 rounded-full cursor-pointer","outline-hidden","has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus","data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden","after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2","after:size-sz-24 after:rounded-full","before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2","before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75","hover:before:size-sz-32 data-dragging:before:size-sz-32"],{variants:{intent:{main:["after:bg-main","before:bg-main-container before:border-main"],support:["after:bg-support","before:bg-support-container before:border-support"],accent:["after:bg-accent","before:bg-accent-container before:border-accent"],basic:["after:bg-basic","before:bg-basic-container before:border-basic"],info:["after:bg-info","before:bg-info-container before:border-info"],neutral:["after:bg-neutral","before:bg-neutral-container before:border-neutral"],success:["after:bg-success","before:bg-success-container before:border-success"],alert:["after:bg-alert","before:bg-alert-container before:border-alert"],error:["after:bg-error","before:bg-error-container before:border-error"]}},defaultVariants:{intent:"basic"}}),A=({className:r,ref:e,children:a,...n})=>{const{intent:o,fieldLabelId:d,fieldId:f,thumbRef:v}=C(),s=t.useRef(null),c=M.useMergeRefs(v,e??s);return i.jsx(P.Provider,{value:{isInsideThumb:!0},children:i.jsx(N.Slider.Thumb,{"data-spark-component":"slider-thumb",ref:c,id:f,className:te({intent:o,className:r}),"aria-labelledby":d,...n,children:a})})};A.displayName="Slider.Thumb";const O=({className:r,ref:e,...a})=>i.jsx(N.Slider.Track,{"data-spark-component":"slider-track",ref:e,className:U({className:r}),...a});O.displayName="Slider.Track";function re(r,e,a,n){const[o,d]=t.useState(0),[f,v]=t.useState(!1);return t.useLayoutEffect(()=>{const s=r.current,c=e.current,m=a.current;if(!s||!c||!m){d(0),f||requestAnimationFrame(()=>v(!0));return}let b=!1;const g=()=>{if(b)return;const l=s.getBoundingClientRect(),x=c.getBoundingClientRect(),p=m.scrollWidth;if(p===0){requestAnimationFrame(g);return}const y=x.left-l.left+x.width/2,I=p/2,R=l.width-p/2,T=Math.max(I,Math.min(R,y))-y;d(k=>k!==T?T:k)};g();const h=new ResizeObserver(g);return h.observe(s),h.observe(m),()=>{b=!0,h.disconnect()}},[r,e,a,n,f]),o}const E=({className:r,children:e,ref:a,...n})=>{const{registerValueInThumb:o,controlRef:d,thumbRef:f}=C(),s=ee()!==null,c=t.useRef(null),m=M.useMergeRefs(c,a),[b,g]=t.useState(0),h=re(d,f,c,b);t.useEffect(()=>{if(s)return o()},[s,o]);const l=S.cx(s?"absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap":"default:text-body-1 col-start-2 text-right default:font-bold",r),x=t.useCallback((y,I)=>{const R=y[0]??String(I[0]??""),V=I[0]??0;return g(V),typeof e=="function"?e(R,V):R},[e]),p=s?{transform:`translate(calc(0% + ${h}px), 0)`}:void 0;return i.jsx(N.Slider.Value,{"data-spark-component":"slider-value",ref:m,className:l,style:p,...n,children:x})};E.displayName="Slider.Value";const W=Object.assign(B,{Control:z,Indicator:q,Label:F,MaxValue:L,MinValue:w,Thumb:A,Track:O,Value:E});W.displayName="Slider";z.displayName="Slider.Control";q.displayName="Slider.Indicator";F.displayName="Slider.Label";L.displayName="Slider.MaxValue";w.displayName="Slider.MinValue";A.displayName="Slider.Thumb";O.displayName="Slider.Track";E.displayName="Slider.Value";exports.Slider=W;
 //# sourceMappingURL=index.js.map

package/dist/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex relative h-sz-24 items-center',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {\n  fieldLabelId?: string\n  fieldId?: string\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { Slider as RadixSlider } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      RadixSlider.SliderProps,\n      'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number[]\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  asChild = false,\n  intent = 'basic',\n  shape = 'square',\n  children,\n  className,\n  ref,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  console.log('✅ field ', field.disabled)\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        shape,\n        fieldLabelId: field.labelId,\n        fieldId: field.id,\n      }}\n    >\n      <RadixSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        asChild={asChild}\n        className={rootStyles({ className })}\n        dir=\"ltr\"\n        orientation=\"horizontal\"\n        inverted={false}\n        minStepsBetweenThumbs={0}\n        disabled={disabled || readOnly}\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        {...rest}\n      >\n        {children}\n      </RadixSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'block h-sz-24 w-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus',\n    'data-[interaction=pointerdown]:focus-visible:ring-0!',\n    'data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed',\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide',\n    'after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300',\n    'hover:after:w-sz-32 hover:after:h-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main', 'after:bg-main-container after:border-main'],\n        support: ['bg-support', 'after:bg-support-container after:border-support'],\n        accent: ['bg-accent', 'after:bg-accent-container after:border-accent'],\n        basic: ['bg-basic', 'after:bg-basic-container after:border-basic'],\n        info: ['bg-info', 'after:bg-info-container after:border-info'],\n        neutral: ['bg-neutral', 'after:bg-neutral-container after:border-neutral'],\n        success: ['bg-success', 'after:bg-success-container after:border-success'],\n        alert: ['bg-alert', 'after:bg-alert-container after:border-alert'],\n        error: ['bg-error', 'after:bg-error-container after:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type PointerEvent, Ref, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport interface SliderThumbProps extends RadixSlider.SliderThumbProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SliderThumb = ({\n  asChild = false,\n  className,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId } = useSliderContext()\n\n  const innerRef = useRef(null)\n  const ref = forwardedRef || innerRef\n\n  const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {\n    /**\n     * Radix Slider implementation uses `.focus()` and thus prevent us to handle\n     * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay\n     * aware of the type of event, and adapt styles if needed.\n     */\n    if (typeof ref === 'function' || !ref.current) return\n    ref.current.dataset.interaction = e.type\n  }\n\n  return (\n    <RadixSlider.Thumb\n      data-spark-component=\"slider-thumb\"\n      ref={ref}\n      asChild={asChild}\n      id={fieldId}\n      onPointerDown={(e: PointerEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onPointerDown?.(e)\n      }}\n      onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onKeyDown?.(e)\n      }}\n      onBlur={(e: FocusEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onBlur?.(e)\n      }}\n      className={thumbVariants({ intent, className })}\n      aria-labelledby={fieldLabelId}\n      {...rest}\n    />\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4'], {\n  variants: {\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\n\nexport const rangeVariants = cva(['absolute h-full'], {\n  variants: {\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      basic: ['bg-basic'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      error: ['bg-error'],\n    },\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    intent: 'basic',\n    shape: 'square',\n  },\n})\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants, trackVariants } from './SliderTrack.styles'\n\nexport interface SliderTrackProps\n  extends RadixSlider.SliderTrackProps,\n    RadixSlider.SliderRangeProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SliderTrack = ({ asChild = false, className, ref, ...rest }: SliderTrackProps) => {\n  const { intent, shape } = useSliderContext()\n\n  return (\n    <RadixSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\n\nexport const Slider: typeof Root & {\n  Thumb: typeof Thumb\n  Track: typeof Track\n} = Object.assign(Root, {\n  Thumb,\n  Track,\n})\n\nSlider.displayName = 'Slider'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\n\nexport type { SliderProps, SliderThumbProps, SliderTrackProps }\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","disabledProp","readOnlyProp","nameProp","rest","field","useFormFieldControl","disabled","readOnly","name","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","fieldLabelId","fieldId","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'basic',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={\n          defaultValueProp !== undefined ? [defaultValueProp] : undefined\n        }\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? value[0] ?? 0 : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? value[0] ?? 0 : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        basic: ['bg-basic'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps 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 SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        basic: ['after:bg-basic', 'before:bg-basic-container before:border-basic'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return (children as unknown as (formatted: string, value: number) => ReactNode)(\n          formatted,\n          value\n        )\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}