@spark-ui/components 14.1.1 → 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":"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"}

package/dist/meter/MeterValue.d.ts

@@ -1,7 +1,9 @@
 import { Meter as BaseMeter } from '@base-ui/react/meter';
-import { ComponentProps, PropsWithChildren } from 'react';
-export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>;
+import { ComponentProps, ReactNode } from 'react';
+export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render' | 'children'> & {
+    children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined;
+};
 export declare const MeterValue: {
-    ({ className, children, ...others }: PropsWithChildren<MeterValueProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...others }: MeterValueProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/meter/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
 //# sourceMappingURL=index.js.map

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<MeterValueProps>) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"4PAaaA,EAAeC,EAAAA,cAAwC,IAAI,EAE3DC,EAAY,SAEZC,EAAW,IAAM,CAC5B,MAAMC,EAAUC,EAAAA,WAAWL,CAAY,EAEvC,GAAI,CAACI,EACH,MAAM,IAAI,MAAM,+CAA+C,EAGjE,OAAOA,CACT,ECJaE,EAAQ,CAAC,CACpB,UAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,IAAAC,EAAM,EACN,MAAAC,EAAQ,UACR,OAAAC,EAAS,UACT,SAAAC,EACA,IAAAC,EACA,GAAGC,CACL,IAAqC,CACnC,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAA,EAExBC,EAAeC,EAAAA,QAAQ,KACpB,CACL,MAAOZ,GAAS,EAChB,IAAAC,EACA,IAAAC,EACA,OAAAE,EACA,MAAAD,EACA,UAAWM,CAAA,GAEZ,CAACR,EAAKC,EAAKF,EAAOI,EAAQD,EAAOM,CAAU,CAAC,EAE/C,OACEI,EAAAA,IAACrB,EAAa,SAAb,CAAsB,MAAOmB,EAC5B,SAAAE,EAAAA,IAACC,EAAAA,MAAU,KAAV,CACC,uBAAqB,QACrB,IAAAR,EACA,UAAWS,EAAAA,GACT,iFACAhB,CAAA,EAEF,MAAAC,EACA,IAAAC,EACA,IAAAC,EACA,kBAAiBM,EAChB,GAAGD,EAEH,SAAAF,CAAA,CAAA,EAEL,CAEJ,EAEAP,EAAM,YAAc,QC1Db,MAAMkB,EAAa,CAAC,CACzB,GAAIC,EACJ,SAAAZ,EACA,IAAKa,EACL,GAAGX,CACL,IAAuB,CACrB,MAAMY,EAAa,GAAGzB,CAAS,UAAU0B,EAAAA,OAAO,GAC1CC,EAAKJ,GAAUE,EAEf,CAAE,UAAAG,CAAA,EAAc3B,EAAA,EAChB4B,EAAUC,EAAAA,YACbC,GAAwB,CACvBH,EAAUG,EAAKJ,EAAK,MAAS,CAC/B,EACA,CAACA,EAAIC,CAAS,CAAA,EAEVhB,EAAMoB,EAAAA,aAAaR,EAAcK,CAAO,EAE9C,OACEV,EAAAA,IAACC,EAAAA,MAAU,MAAV,CACC,uBAAqB,cACrB,GAAAO,EACA,UAAU,wDACV,IAAAf,EACC,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,EAEAW,EAAW,YAAc,cCrClB,MAAMW,EAAmBC,EAAAA,IAAI,CAClC,sBACA,gBACA,gCACA,wBACF,CAAC,EAIYC,EAAuBD,EAAAA,IAClC,CAAC,YAAa,gDAAiD,+BAA+B,EAC9F,CACE,SAAU,CAIR,OAAQ,CACN,KAAM,CAAC,SAAS,EAChB,QAAS,CAAC,YAAY,EACtB,QAAS,CAAC,YAAY,EACtB,MAAO,CAAC,UAAU,EAClB,OAAQ,CAAC,UAAU,EACnB,KAAM,CAAC,SAAS,CAAA,EAKlB,MAAO,CACL,OAAQ,CAAA,EACR,QAAS,CAAC,YAAY,CAAA,CACxB,CACF,CAEJ,ECRO,SAASE,EACdC,EACAC,EACAC,EAA2C,CAAA,EAClC,CACT,KAAM,CAAE,UAAAC,EAAY,GAAK,WAAAC,CAAA,EAAeF,EAClCG,EAAkBC,EAAAA,OAAO,EAAK,EAC9BC,EAAcD,EAAAA,OAAOL,CAAW,EAGtCO,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAY,QAAUN,CACxB,EAAG,CAACA,CAAW,CAAC,EAEhBO,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUT,EAAW,QAC3B,GAAI,CAACS,GAAWJ,EAAgB,QAAS,OAEzC,MAAMK,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACnBA,EAAM,gBAAkB,CAACP,EAAgB,SAE3C,sBAAsB,IAAM,CACrBA,EAAgB,UACnBA,EAAgB,QAAU,GAC1BE,EAAY,QAAA,EAEZG,EAAS,WAAA,EAEb,CAAC,CAEL,CAAC,CACH,EACA,CACE,UAAAP,EACA,WAAAC,CAAA,CACF,EAGF,OAAAM,EAAS,QAAQD,CAAO,EAEjB,IAAM,CACXC,EAAS,WAAA,CACX,CACF,EAAG,CAACV,EAAYG,EAAWC,CAAU,CAAC,EAE/BC,EAAgB,OACzB,CCjEO,MAAMQ,EAAa,CAAC,CAAE,UAAA7C,EAAW,GAAGQ,KAA8B,CACvE,KAAM,CAAE,MAAAP,EAAO,IAAAC,EAAK,IAAAC,EAAK,OAAAE,EAAQ,MAAAD,CAAA,EAAUR,EAAA,EACrCkD,GAAe7C,EAAQE,IAAQD,EAAMC,GAAQ,IAC7C4C,EAAWT,EAAAA,OAAuB,IAAI,EACtC,CAACU,EAAaC,CAAc,EAAItC,EAAAA,SAAS,EAAK,EAGpD,OAAAoB,EAAyBgB,EAAU,IAAM,CACvCE,EAAe,EAAI,CACrB,CAAC,EAGCnC,EAAAA,IAACC,EAAAA,MAAU,MAAV,CACC,IAAKgC,EACL,uBAAqB,cACrB,UAAW/B,EAAAA,GAAGY,IAAoB,CAAE,aAAcxB,IAAU,SAAA,EAAaJ,CAAS,EACjF,GAAGQ,EAEJ,SAAAM,EAAAA,IAACC,EAAAA,MAAU,UAAV,CACC,uBAAqB,kBACrB,UAAWe,EAAqB,CAAE,OAAAzB,EAAQ,MAAAD,EAAO,EACjD,MAAO,CACL,MAAO4C,EAAc,GAAGF,CAAU,IAAM,IAAA,CAC1C,CAAA,CACF,CAAA,CAGN,EAEAD,EAAW,YAAc,cC5BlB,MAAMK,EAAa,CAAC,CAAE,UAAAlD,EAAW,SAAAM,EAAU,GAAGE,KAEjDM,EAAAA,IAACC,EAAAA,MAAU,MAAV,CACC,uBAAqB,cACrB,UAAWC,EAAAA,GAAG,sCAAuC,yBAA0BhB,CAAS,EACvF,GAAGQ,EAEH,SAAAF,CAAA,CAAA,EAKP4C,EAAW,YAAc,cClBlB,MAAMnD,EAIT,OAAO,OAAOoD,EAAM,CACtB,MAAOlC,EACP,MAAO4B,EACP,MAAOK,CACT,CAAC,EAEDnD,EAAM,YAAc,QACpBkB,EAAW,YAAc,cACzB4B,EAAW,YAAc,cACzBK,EAAW,YAAc"}

package/dist/meter/index.mjs

@@ -3,8 +3,8 @@ import { Meter as m } from "@base-ui/react/meter";
 import { cx as p, cva as h } from "class-variance-authority";
 import { createContext as w, useContext as L, useState as y, useMemo as R, useId as T, useCallback as V, useRef as f, useEffect as k } from "react";
 import { useMergeRefs as $ } from "@spark-ui/hooks/use-merge-refs";
-const v = w(null), A = ":meter", x = () => {
-  const t = L(v);
+const x = w(null), A = ":meter", v = () => {
+  const t = L(x);
   if (!t)
     throw new Error("useMeter must be used within a Meter provider");
   return t;
@@ -27,12 +27,15 @@ const v = w(null), A = ":meter", x = () => {
     shape: s,
     onLabelId: u
   }), [a, n, r, e, s, u]);
-  return /* @__PURE__ */ d(v.Provider, { value: I, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ d(x.Provider, { value: I, children: /* @__PURE__ */ d(
     m.Root,
     {
       "data-spark-component": "meter",
       ref: l,
-      className: p("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2", t),
+      className: p(
+        "gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]",
+        t
+      ),
       value: r,
       max: a,
       min: n,
@@ -49,7 +52,7 @@ const b = ({
   ref: a,
   ...n
 }) => {
-  const s = `${A}-label-${T()}`, e = t || s, { onLabelId: o } = x(), l = V(
+  const s = `${A}-label-${T()}`, e = t || s, { onLabelId: o } = v(), l = V(
     (i) => {
       o(i ? e : void 0);
     },
@@ -123,8 +126,8 @@ function S(t, r, a = {}) {
     };
   }, [t, n, s]), e.current;
 }
-const M = ({ className: t, ...r }) => {
-  const { value: a, max: n, min: s, intent: e, shape: o } = x(), l = (a - s) / (n - s) * 100, c = f(null), [i, u] = y(!1);
+const g = ({ className: t, ...r }) => {
+  const { value: a, max: n, min: s, intent: e, shape: o } = v(), l = (a - s) / (n - s) * 100, c = f(null), [i, u] = y(!1);
   return S(c, () => {
     u(!0);
   }), /* @__PURE__ */ d(
@@ -147,12 +150,8 @@ const M = ({ className: t, ...r }) => {
     }
   );
 };
-M.displayName = "Meter.Track";
-const g = ({
-  className: t,
-  children: r,
-  ...a
-}) => /* @__PURE__ */ d(
+g.displayName = "Meter.Track";
+const M = ({ className: t, children: r, ...a }) => /* @__PURE__ */ d(
   m.Value,
   {
     "data-spark-component": "meter-value",
@@ -161,16 +160,16 @@ const g = ({
     children: r
   }
 );
-g.displayName = "Meter.Value";
+M.displayName = "Meter.Value";
 const j = Object.assign(N, {
   Label: b,
-  Track: M,
-  Value: g
+  Track: g,
+  Value: M
 });
 j.displayName = "Meter";
 b.displayName = "Meter.Label";
-M.displayName = "Meter.Track";
-g.displayName = "Meter.Value";
+g.displayName = "Meter.Track";
+M.displayName = "Meter.Value";
 export {
   j as Meter
 };

package/dist/meter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<MeterValueProps>) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":";;;;;AAaO,MAAMA,IAAeC,EAAwC,IAAI,GAE3DC,IAAY,UAEZC,IAAW,MAAM;AAC5B,QAAMC,IAAUC,EAAWL,CAAY;AAEvC,MAAI,CAACI;AACH,UAAM,IAAI,MAAM,+CAA+C;AAGjE,SAAOA;AACT,GCJaE,IAAQ,CAAC;AAAA,EACpB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAqC;AACnC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GAExBC,IAAeC,EAAQ,OACpB;AAAA,IACL,OAAOZ,KAAS;AAAA,IAChB,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,QAAAE;AAAA,IACA,OAAAD;AAAA,IACA,WAAWM;AAAA,EAAA,IAEZ,CAACR,GAAKC,GAAKF,GAAOI,GAAQD,GAAOM,CAAU,CAAC;AAE/C,SACE,gBAAAI,EAACrB,EAAa,UAAb,EAAsB,OAAOmB,GAC5B,UAAA,gBAAAE;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAR;AAAA,MACA,WAAWS,EAAG,gEAAgEhB,CAAS;AAAA,MACvF,OAAAC;AAAA,MACA,KAAAC;AAAA,MACA,KAAAC;AAAA,MACA,mBAAiBM;AAAA,MAChB,GAAGD;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEAP,EAAM,cAAc;ACvDb,MAAMkB,IAAa,CAAC;AAAA,EACzB,IAAIC;AAAA,EACJ,UAAAZ;AAAA,EACA,KAAKa;AAAA,EACL,GAAGX;AACL,MAAuB;AACrB,QAAMY,IAAa,GAAGzB,CAAS,UAAU0B,GAAO,IAC1CC,IAAKJ,KAAUE,GAEf,EAAE,WAAAG,EAAA,IAAc3B,EAAA,GAChB4B,IAAUC;AAAA,IACd,CAACC,MAAwB;AACvB,MAAAH,EAAUG,IAAKJ,IAAK,MAAS;AAAA,IAC/B;AAAA,IACA,CAACA,GAAIC,CAAS;AAAA,EAAA,GAEVhB,IAAMoB,EAAaR,GAAcK,CAAO;AAE9C,SACE,gBAAAV;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,wBAAqB;AAAA,MACrB,IAAAO;AAAA,MACA,WAAU;AAAA,MACV,KAAAf;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAW,EAAW,cAAc;ACrClB,MAAMW,IAAmBC,EAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,GAIYC,IAAuBD;AAAA,EAClC,CAAC,aAAa,iDAAiD,+BAA+B;AAAA,EAC9F;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAQ;AAAA,QACN,MAAM,CAAC,SAAS;AAAA,QAChB,SAAS,CAAC,YAAY;AAAA,QACtB,SAAS,CAAC,YAAY;AAAA,QACtB,OAAO,CAAC,UAAU;AAAA,QAClB,QAAQ,CAAC,UAAU;AAAA,QACnB,MAAM,CAAC,SAAS;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKlB,OAAO;AAAA,QACL,QAAQ,CAAA;AAAA,QACR,SAAS,CAAC,YAAY;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAEJ;ACRO,SAASE,EACdC,GACAC,GACAC,IAA2C,CAAA,GAClC;AACT,QAAM,EAAE,WAAAC,IAAY,KAAK,YAAAC,EAAA,IAAeF,GAClCG,IAAkBC,EAAO,EAAK,GAC9BC,IAAcD,EAAOL,CAAW;AAGtC,SAAAO,EAAU,MAAM;AACd,IAAAD,EAAY,UAAUN;AAAA,EACxB,GAAG,CAACA,CAAW,CAAC,GAEhBO,EAAU,MAAM;AACd,UAAMC,IAAUT,EAAW;AAC3B,QAAI,CAACS,KAAWJ,EAAgB,QAAS;AAEzC,UAAMK,IAAW,IAAI;AAAA,MACnB,CAAAC,MAAW;AACT,QAAAA,EAAQ,QAAQ,CAAAC,MAAS;AACvB,UAAIA,EAAM,kBAAkB,CAACP,EAAgB,WAE3C,sBAAsB,MAAM;AAC1B,YAAKA,EAAgB,YACnBA,EAAgB,UAAU,IAC1BE,EAAY,QAAA,GAEZG,EAAS,WAAA;AAAA,UAEb,CAAC;AAAA,QAEL,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE,WAAAP;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IACF;AAGF,WAAAM,EAAS,QAAQD,CAAO,GAEjB,MAAM;AACX,MAAAC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACV,GAAYG,GAAWC,CAAU,CAAC,GAE/BC,EAAgB;AACzB;ACjEO,MAAMQ,IAAa,CAAC,EAAE,WAAA7C,GAAW,GAAGQ,QAA8B;AACvE,QAAM,EAAE,OAAAP,GAAO,KAAAC,GAAK,KAAAC,GAAK,QAAAE,GAAQ,OAAAD,EAAA,IAAUR,EAAA,GACrCkD,KAAe7C,IAAQE,MAAQD,IAAMC,KAAQ,KAC7C4C,IAAWT,EAAuB,IAAI,GACtC,CAACU,GAAaC,CAAc,IAAItC,EAAS,EAAK;AAGpD,SAAAoB,EAAyBgB,GAAU,MAAM;AACvC,IAAAE,EAAe,EAAI;AAAA,EACrB,CAAC,GAGC,gBAAAnC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,KAAKgC;AAAA,MACL,wBAAqB;AAAA,MACrB,WAAW/B,EAAGY,KAAoB,EAAE,cAAcxB,MAAU,UAAA,GAAaJ,CAAS;AAAA,MACjF,GAAGQ;AAAA,MAEJ,UAAA,gBAAAM;AAAA,QAACC,EAAU;AAAA,QAAV;AAAA,UACC,wBAAqB;AAAA,UACrB,WAAWe,EAAqB,EAAE,QAAAzB,GAAQ,OAAAD,GAAO;AAAA,UACjD,OAAO;AAAA,YACL,OAAO4C,IAAc,GAAGF,CAAU,MAAM;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEAD,EAAW,cAAc;ACjClB,MAAMK,IAAa,CAAC;AAAA,EACzB,WAAAlD;AAAA,EACA,UAAAM;AAAA,EACA,GAAGE;AACL,MAEI,gBAAAM;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACC,wBAAqB;AAAA,IACrB,WAAWC,EAAG,uCAAuC,0BAA0BhB,CAAS;AAAA,IACvF,GAAGQ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKP4C,EAAW,cAAc;ACjBlB,MAAMnD,IAIT,OAAO,OAAOoD,GAAM;AAAA,EACtB,OAAOlC;AAAA,EACP,OAAO4B;AAAA,EACP,OAAOK;AACT,CAAC;AAEDnD,EAAM,cAAc;AACpBkB,EAAW,cAAc;AACzB4B,EAAW,cAAc;AACzBK,EAAW,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":";;;;;AAaO,MAAMA,IAAeC,EAAwC,IAAI,GAE3DC,IAAY,UAEZC,IAAW,MAAM;AAC5B,QAAMC,IAAUC,EAAWL,CAAY;AAEvC,MAAI,CAACI;AACH,UAAM,IAAI,MAAM,+CAA+C;AAGjE,SAAOA;AACT,GCJaE,IAAQ,CAAC;AAAA,EACpB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAqC;AACnC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GAExBC,IAAeC,EAAQ,OACpB;AAAA,IACL,OAAOZ,KAAS;AAAA,IAChB,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,QAAAE;AAAA,IACA,OAAAD;AAAA,IACA,WAAWM;AAAA,EAAA,IAEZ,CAACR,GAAKC,GAAKF,GAAOI,GAAQD,GAAOM,CAAU,CAAC;AAE/C,SACE,gBAAAI,EAACrB,EAAa,UAAb,EAAsB,OAAOmB,GAC5B,UAAA,gBAAAE;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACAhB;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,KAAAC;AAAA,MACA,KAAAC;AAAA,MACA,mBAAiBM;AAAA,MAChB,GAAGD;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEAP,EAAM,cAAc;AC1Db,MAAMkB,IAAa,CAAC;AAAA,EACzB,IAAIC;AAAA,EACJ,UAAAZ;AAAA,EACA,KAAKa;AAAA,EACL,GAAGX;AACL,MAAuB;AACrB,QAAMY,IAAa,GAAGzB,CAAS,UAAU0B,GAAO,IAC1CC,IAAKJ,KAAUE,GAEf,EAAE,WAAAG,EAAA,IAAc3B,EAAA,GAChB4B,IAAUC;AAAA,IACd,CAACC,MAAwB;AACvB,MAAAH,EAAUG,IAAKJ,IAAK,MAAS;AAAA,IAC/B;AAAA,IACA,CAACA,GAAIC,CAAS;AAAA,EAAA,GAEVhB,IAAMoB,EAAaR,GAAcK,CAAO;AAE9C,SACE,gBAAAV;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,wBAAqB;AAAA,MACrB,IAAAO;AAAA,MACA,WAAU;AAAA,MACV,KAAAf;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAW,EAAW,cAAc;ACrClB,MAAMW,IAAmBC,EAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,GAIYC,IAAuBD;AAAA,EAClC,CAAC,aAAa,iDAAiD,+BAA+B;AAAA,EAC9F;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAQ;AAAA,QACN,MAAM,CAAC,SAAS;AAAA,QAChB,SAAS,CAAC,YAAY;AAAA,QACtB,SAAS,CAAC,YAAY;AAAA,QACtB,OAAO,CAAC,UAAU;AAAA,QAClB,QAAQ,CAAC,UAAU;AAAA,QACnB,MAAM,CAAC,SAAS;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKlB,OAAO;AAAA,QACL,QAAQ,CAAA;AAAA,QACR,SAAS,CAAC,YAAY;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAEJ;ACRO,SAASE,EACdC,GACAC,GACAC,IAA2C,CAAA,GAClC;AACT,QAAM,EAAE,WAAAC,IAAY,KAAK,YAAAC,EAAA,IAAeF,GAClCG,IAAkBC,EAAO,EAAK,GAC9BC,IAAcD,EAAOL,CAAW;AAGtC,SAAAO,EAAU,MAAM;AACd,IAAAD,EAAY,UAAUN;AAAA,EACxB,GAAG,CAACA,CAAW,CAAC,GAEhBO,EAAU,MAAM;AACd,UAAMC,IAAUT,EAAW;AAC3B,QAAI,CAACS,KAAWJ,EAAgB,QAAS;AAEzC,UAAMK,IAAW,IAAI;AAAA,MACnB,CAAAC,MAAW;AACT,QAAAA,EAAQ,QAAQ,CAAAC,MAAS;AACvB,UAAIA,EAAM,kBAAkB,CAACP,EAAgB,WAE3C,sBAAsB,MAAM;AAC1B,YAAKA,EAAgB,YACnBA,EAAgB,UAAU,IAC1BE,EAAY,QAAA,GAEZG,EAAS,WAAA;AAAA,UAEb,CAAC;AAAA,QAEL,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE,WAAAP;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IACF;AAGF,WAAAM,EAAS,QAAQD,CAAO,GAEjB,MAAM;AACX,MAAAC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACV,GAAYG,GAAWC,CAAU,CAAC,GAE/BC,EAAgB;AACzB;ACjEO,MAAMQ,IAAa,CAAC,EAAE,WAAA7C,GAAW,GAAGQ,QAA8B;AACvE,QAAM,EAAE,OAAAP,GAAO,KAAAC,GAAK,KAAAC,GAAK,QAAAE,GAAQ,OAAAD,EAAA,IAAUR,EAAA,GACrCkD,KAAe7C,IAAQE,MAAQD,IAAMC,KAAQ,KAC7C4C,IAAWT,EAAuB,IAAI,GACtC,CAACU,GAAaC,CAAc,IAAItC,EAAS,EAAK;AAGpD,SAAAoB,EAAyBgB,GAAU,MAAM;AACvC,IAAAE,EAAe,EAAI;AAAA,EACrB,CAAC,GAGC,gBAAAnC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,KAAKgC;AAAA,MACL,wBAAqB;AAAA,MACrB,WAAW/B,EAAGY,KAAoB,EAAE,cAAcxB,MAAU,UAAA,GAAaJ,CAAS;AAAA,MACjF,GAAGQ;AAAA,MAEJ,UAAA,gBAAAM;AAAA,QAACC,EAAU;AAAA,QAAV;AAAA,UACC,wBAAqB;AAAA,UACrB,WAAWe,EAAqB,EAAE,QAAAzB,GAAQ,OAAAD,GAAO;AAAA,UACjD,OAAO;AAAA,YACL,OAAO4C,IAAc,GAAGF,CAAU,MAAM;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEAD,EAAW,cAAc;AC5BlB,MAAMK,IAAa,CAAC,EAAE,WAAAlD,GAAW,UAAAM,GAAU,GAAGE,QAEjD,gBAAAM;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACC,wBAAqB;AAAA,IACrB,WAAWC,EAAG,uCAAuC,0BAA0BhB,CAAS;AAAA,IACvF,GAAGQ;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA;AAKP4C,EAAW,cAAc;AClBlB,MAAMnD,IAIT,OAAO,OAAOoD,GAAM;AAAA,EACtB,OAAOlC;AAAA,EACP,OAAO4B;AAAA,EACP,OAAOK;AACT,CAAC;AAEDnD,EAAM,cAAc;AACpBkB,EAAW,cAAc;AACzB4B,EAAW,cAAc;AACzBK,EAAW,cAAc;"}

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("@base-ui/react/progress"),b=require("class-variance-authority"),i=require("react"),L=require("@spark-ui/hooks/use-merge-refs"),I=i.createContext(null),R=":progress",h=()=>{const s=i.useContext(I);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},C=b.cva(["h-full w-full","transition-width duration-400"],{variants:{intent:{basic:["bg-basic"],main:["bg-main"],support:["bg-support"],accent:["bg-accent"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"],neutral:["bg-neutral"]},shape:{square:[],rounded:["rounded-sm"]}}}),j=({className:s,style:t,ref:r,onTransitionEnd:n,...c})=>{const{value:e,max:a,min:l,intent:u,shape:d,onComplete:p}=h(),f=e!==null?(e-l)/(a-l)*100:0,m=e===null,P=y=>{n?.(y),e!==null&&e>=a&&p&&p()};return o.jsx(g.Progress.Indicator,{"data-spark-component":"progress-indicator",className:b.cx(C({className:s,intent:u,shape:d}),m&&"animate-standalone-indeterminate-bar absolute -translate-x-1/2"),style:{...t,...!m&&e!==null&&{width:`${f}%`}},ref:r,onTransitionEnd:P,...c})};j.displayName="ProgressIndicator";const x=({className:s,...t})=>{const{shape:r}=h();return o.jsx(g.Progress.Track,{"data-spark-component":"progress-track",className:b.cx("h-sz-4 relative col-span-2 w-full","transform-gpu","overflow-hidden","bg-on-background/dim-4",{"rounded-sm":r==="rounded"},s),...t,children:o.jsx(j,{})})};x.displayName="Progress.Track";const T=({className:s,value:t,max:r=100,min:n=0,shape:c="square",intent:e="basic",onComplete:a,getValueLabel:l,getAriaValueText:u,children:d=o.jsx(x,{}),ref:p,...f})=>{const[m,P]=i.useState(),y=i.useMemo(()=>({value:t??null,max:r,min:n,intent:e,shape:c,onLabelId:P,onComplete:a}),[r,n,t,e,c,P,a]),V=u||(l?(q,v)=>v===null?q??"":l(v,r):void 0);return o.jsx(I.Provider,{value:y,children:o.jsx(g.Progress.Root,{"data-spark-component":"progress",ref:p,className:b.cx("gap-sm focus-visible:u-outline grid grid-cols-2",s),value:t??null,max:r,min:n,"aria-labelledby":m,getAriaValueText:V,...f,children:d})})};T.displayName="Progress";const N=({id:s,children:t,ref:r,...n})=>{const c=`${R}-label-${i.useId()}`,e=s||c,{onLabelId:a}=h(),l=i.useCallback(d=>{a(d?e:void 0)},[e,a]),u=L.useMergeRefs(r,l);return o.jsx(g.Progress.Label,{"data-spark-component":"progress-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:t})};N.displayName="Progress.Label";const k=({className:s,children:t,...r})=>o.jsx(g.Progress.Value,{"data-spark-component":"progress-value",className:b.cx("default:text-body-1 text-on-surface col-start-2 text-right",s),...r,children:t});k.displayName="Progress.Value";const w=Object.assign(T,{Label:N,Track:x,Value:k});w.displayName="Progress";N.displayName="Progress.Label";x.displayName="Progress.Track";k.displayName="Progress.Value";exports.Progress=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("@base-ui/react/progress"),b=require("class-variance-authority"),u=require("react"),L=require("@spark-ui/hooks/use-merge-refs"),I=u.createContext(null),R=":progress",h=()=>{const s=u.useContext(I);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},C=b.cva(["h-full w-full","transition-width duration-400"],{variants:{intent:{basic:["bg-basic"],main:["bg-main"],support:["bg-support"],accent:["bg-accent"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"],neutral:["bg-neutral"]},shape:{square:[],rounded:["rounded-sm"]}}}),j=({className:s,style:t,ref:r,onTransitionEnd:n,...c})=>{const{value:e,max:a,min:l,intent:i,shape:d,onComplete:p}=h(),x=e!==null?(e-l)/(a-l)*100:0,m=e===null,P=y=>{n?.(y),e!==null&&e>=a&&p&&p()};return o.jsx(g.Progress.Indicator,{"data-spark-component":"progress-indicator",className:b.cx(C({className:s,intent:i,shape:d}),m&&"animate-standalone-indeterminate-bar absolute -translate-x-1/2"),style:{...t,...!m&&e!==null&&{width:`${x}%`}},ref:r,onTransitionEnd:P,...c})};j.displayName="ProgressIndicator";const f=({className:s,...t})=>{const{shape:r}=h();return o.jsx(g.Progress.Track,{"data-spark-component":"progress-track",className:b.cx("h-sz-4 relative col-span-2 w-full","transform-gpu","overflow-hidden","bg-on-background/dim-4",{"rounded-sm":r==="rounded"},s),...t,children:o.jsx(j,{})})};f.displayName="Progress.Track";const T=({className:s,value:t,max:r=100,min:n=0,shape:c="square",intent:e="basic",onComplete:a,getValueLabel:l,getAriaValueText:i,children:d=o.jsx(f,{}),ref:p,...x})=>{const[m,P]=u.useState(),y=u.useMemo(()=>({value:t??null,max:r,min:n,intent:e,shape:c,onLabelId:P,onComplete:a}),[r,n,t,e,c,P,a]),V=i||(l?(q,v)=>v===null?q??"":l(v,r):void 0);return o.jsx(I.Provider,{value:y,children:o.jsx(g.Progress.Root,{"data-spark-component":"progress",ref:p,className:b.cx("gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]",s),value:t??null,max:r,min:n,"aria-labelledby":m,getAriaValueText:V,...x,children:d})})};T.displayName="Progress";const N=({id:s,children:t,ref:r,...n})=>{const c=`${R}-label-${u.useId()}`,e=s||c,{onLabelId:a}=h(),l=u.useCallback(d=>{a(d?e:void 0)},[e,a]),i=L.useMergeRefs(r,l);return o.jsx(g.Progress.Label,{"data-spark-component":"progress-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:i,...n,children:t})};N.displayName="Progress.Label";const k=({className:s,children:t,...r})=>o.jsx(g.Progress.Value,{"data-spark-component":"progress-value",className:b.cx("default:text-body-1 text-on-surface col-start-2 text-right",s),...r,children:t});k.displayName="Progress.Value";const w=Object.assign(T,{Label:N,Track:f,Value:k});w.displayName="Progress";N.displayName="Progress.Label";f.displayName="Progress.Track";k.displayName="Progress.Value";exports.Progress=w;
 //# sourceMappingURL=index.js.map

package/dist/progress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-2', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}

package/dist/progress/index.mjs

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Progress as u } from "@base-ui/react/progress";
+import { Progress as d } from "@base-ui/react/progress";
 import { cva as V, cx as b } from "class-variance-authority";
 import { createContext as $, useContext as C, useState as E, useMemo as R, useId as j, useCallback as q } from "react";
 import { useMergeRefs as A } from "@spark-ui/hooks/use-merge-refs";
@@ -39,18 +39,18 @@ const I = $(null), D = ":progress", y = () => {
   onTransitionEnd: n,
   ...c
 }) => {
-  const { value: e, max: t, min: l, intent: i, shape: d, onComplete: g } = y(), P = e !== null ? (e - l) / (t - l) * 100 : 0, p = e === null, m = (x) => {
+  const { value: e, max: t, min: l, intent: i, shape: u, onComplete: g } = y(), P = e !== null ? (e - l) / (t - l) * 100 : 0, p = e === null, m = (x) => {
     n?.(x), e !== null && e >= t && g && g();
   };
   return /* @__PURE__ */ o(
-    u.Indicator,
+    d.Indicator,
     {
       "data-spark-component": "progress-indicator",
       className: b(
         M({
           className: s,
           intent: i,
-          shape: d
+          shape: u
         }),
         p && "animate-standalone-indeterminate-bar absolute -translate-x-1/2"
       ),
@@ -68,7 +68,7 @@ v.displayName = "ProgressIndicator";
 const f = ({ className: s, ...a }) => {
   const { shape: r } = y();
   return /* @__PURE__ */ o(
-    u.Track,
+    d.Track,
     {
       "data-spark-component": "progress-track",
       className: b(
@@ -95,7 +95,7 @@ const T = ({
   onComplete: t,
   getValueLabel: l,
   getAriaValueText: i,
-  children: d = /* @__PURE__ */ o(f, {}),
+  children: u = /* @__PURE__ */ o(f, {}),
   ref: g,
   ...P
 }) => {
@@ -109,18 +109,18 @@ const T = ({
     onComplete: t
   }), [r, n, a, e, c, m, t]), w = i || (l ? (L, k) => k === null ? L ?? "" : l(k, r) : void 0);
   return /* @__PURE__ */ o(I.Provider, { value: x, children: /* @__PURE__ */ o(
-    u.Root,
+    d.Root,
     {
       "data-spark-component": "progress",
       ref: g,
-      className: b("gap-sm focus-visible:u-outline grid grid-cols-2", s),
+      className: b("gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]", s),
       value: a ?? null,
       max: r,
       min: n,
       "aria-labelledby": p,
       getAriaValueText: w,
       ...P,
-      children: d
+      children: u
     }
   ) });
 };
@@ -132,13 +132,13 @@ const N = ({
   ...n
 }) => {
   const c = `${D}-label-${j()}`, e = s || c, { onLabelId: t } = y(), l = q(
-    (d) => {
-      t(d ? e : void 0);
+    (u) => {
+      t(u ? e : void 0);
     },
     [e, t]
   ), i = A(r, l);
   return /* @__PURE__ */ o(
-    u.Label,
+    d.Label,
     {
       "data-spark-component": "progress-label",
       id: e,
@@ -155,7 +155,7 @@ const h = ({
   children: a,
   ...r
 }) => /* @__PURE__ */ o(
-  u.Value,
+  d.Value,
   {
     "data-spark-component": "progress-value",
     className: b("default:text-body-1 text-on-surface col-start-2 text-right", s),