@spark-ui/components 17.11.0 → 17.11.1

package/dist/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\n/**\n * A radio button option. Renders a <label> element.\n */\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\n/**\n * A radio button option. Renders a <label> element.\n */\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext value={value}>{children}</RadioGroupContext>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}

package/dist/radio-group/index.mjs

@@ -156,8 +156,8 @@ S.displayName = "RadioGroup.Radio";
 var C = e(["flex"], { variants: { orientation: {
 	vertical: ["flex-col", "gap-lg"],
 	horizontal: ["flex-row", "gap-xl"]
-} } }), w = ({ intent: e, disabled: t, reverse: n, children: r }) => {
-	let i = a(() => ({
+} } }), w = ({ intent: e, disabled: t, reverse: n, children: r }) => /* @__PURE__ */ l(p, {
+	value: a(() => ({
 		intent: e,
 		disabled: t,
 		reverse: n
@@ -165,12 +165,9 @@ var C = e(["flex"], { variants: { orientation: {
 		e,
 		t,
 		n
-	]);
-	return /* @__PURE__ */ l(p.Provider, {
-		value: i,
-		children: r
-	});
-}, T = ({ orientation: e = "vertical", loop: t = !0, intent: n = "support", disabled: r, className: i, required: a, reverse: o = !1, ref: c, ...u }) => {
+	]),
+	children: r
+}), T = ({ orientation: e = "vertical", loop: t = !0, intent: n = "support", disabled: r, className: i, required: a, reverse: o = !1, ref: c, ...u }) => {
 	let { labelId: d, isInvalid: p, isRequired: m, description: h, name: g } = f(), _ = a === void 0 ? m : a;
 	return /* @__PURE__ */ l(w, {
 		reverse: o,

package/dist/radio-group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\n/**\n * A radio button option. Renders a <label> element.\n */\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\n/**\n * A radio button option. Renders a <label> element.\n */\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext value={value}>{children}</RadioGroupContext>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-CYGgse45.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-BCqHBvWN.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
 //# sourceMappingURL=index.js.map

package/dist/rating/index.mjs

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { n as t } from "../form-field-CV5dzt-I.mjs";
+import { n as t } from "../form-field-ByLHXtzx.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { useCallback as i, useId as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/rating-display/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s.Provider,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface`,{variants:{size:{sm:`text-caption-highlight`,md:`text-body-2-highlight`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface`,{variants:{size:{sm:`text-caption-highlight`,md:`text-body-2-highlight`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
 //# sourceMappingURL=index.js.map

package/dist/rating-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return <RatingDisplayContext value={{ value, size, count }}>{children}</RatingDisplayContext>\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}

package/dist/rating-display/index.mjs

@@ -6,7 +6,7 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { StarFill as c } from "@spark-ui/icons/StarFill";
 import { StarOutline as l } from "@spark-ui/icons/StarOutline";
 //#region src/rating-display/RatingDisplayContext.tsx
-var u = i(null), d = ({ value: e, size: t, count: n, children: r }) => /* @__PURE__ */ o(u.Provider, {
+var u = i(null), d = ({ value: e, size: t, count: n, children: r }) => /* @__PURE__ */ o(u, {
 	value: {
 		value: e,
 		size: t,

package/dist/rating-display/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return <RatingDisplayContext value={{ value, size, count }}>{children}</RatingDisplayContext>\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}

package/dist/scrolling-list/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-Tv2N8_24.js`),r=require(`../icon-button-CTe0v0g7.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/ArrowVerticalRight`),l=require(`@spark-ui/icons/ArrowVerticalLeft`),u=require(`react-snap-carousel`);var d=(0,a.createContext)(null),f=({snapType:e=`none`,snapStop:t=`normal`,scrollBehavior:n=`smooth`,loop:r=!1,gap:c=16,withFade:l=!1,scrollPadding:f=0,children:p,className:m,...h})=>{let g=(0,a.useRef)(null),_=(0,a.useRef)(null),v=(0,u.useSnapCarousel)(),{overflow:y,refresh:b}=(0,s.useScrollOverflow)(g,{precisionTreshold:1}),{activePageIndex:x,pages:S,refresh:C}=v,w=S[x],T=w?[w[0]+1,w[w.length-1]+1]:[0,0],E=(0,a.useCallback)(()=>{C&&g.current&&setTimeout(()=>{C()},0)},[C]);(0,a.useEffect)(()=>{E()},[p,E]),(0,a.useLayoutEffect)(()=>{g.current&&requestAnimationFrame(()=>{b()})},[p,b]);let D=()=>{_.current?.focus()},O={...v,snapType:e,snapStop:t,skipKeyboardNavigation:D,scrollBehavior:n,visibleItemsRange:T,loop:r,gap:c,withFade:l,scrollPadding:f,scrollAreaRef:g,overflow:y};return(0,o.jsxs)(d.Provider,{value:O,children:[(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list`,className:(0,i.cx)(`gap-lg group/scrolling-list relative flex flex-col default:w-full`,m),...h,children:p}),(0,o.jsx)(`span`,{ref:_,className:`size-0 overflow-hidden`,tabIndex:-1})]})};f.displayName=`ScrollingList`;var p=({children:e,visibility:t=`always`,className:n,...r})=>(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-controls`,className:(0,i.cx)(`default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden`,n),style:{"--scrolling-list-controls-opacity":t===`hover`?`0`:`1`},"data-orientation":`horizontal`,...r,children:e});p.displayName=`ScrollingList.Controls`;function m(e,t){let[n,r]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let n=e=>{r(!0);let n=e.target,i=t.current;if(n&&i){let e=n.getBoundingClientRect(),t=i.getBoundingClientRect();e.left>=t.left&&e.right<=t.right&&e.top>=t.top&&e.bottom<=t.bottom||n.scrollIntoView({behavior:`smooth`,inline:`center`,block:`nearest`})}},i=t=>{e.current&&!e.current.contains(t.relatedTarget)&&r(!1)},a=e.current;return a&&(a.addEventListener(`focusin`,n),a.addEventListener(`focusout`,i)),()=>{a&&(a.removeEventListener(`focusin`,n),a.removeEventListener(`focusout`,i))}},[e,t]),n}var h=({asChild:t=!1,children:n,index:r=0,className:s=``,...c})=>{let l=(0,a.useContext)(d),u=(0,a.useRef)(null),f=l.snapPointIndexes.has(r);return m(u,l.scrollAreaRef),(0,o.jsx)(t?e.Slot:`div`,{"data-spark-component":`scrolling-list-item`,role:`listitem`,ref:u,className:(0,i.cx)(`default:w-auto default:shrink-0`,{"snap-start":f,"snap-normal":f&&l.snapStop===`normal`,"snap-always":f&&l.snapStop===`always`},s),...c,children:n})};h.displayName=`ScrollingList.Item`;function g(...e){return t=>{e.forEach(e=>{typeof e==`function`?e(t):e&&typeof e==`object`&&`current`in e&&(e.current=t)})}}var _=({children:e,ref:t,className:n=``,...r})=>{let s=(0,a.useContext)(d),c={mandatory:`x mandatory`,proximity:`x proximity`,none:`none`},l=e=>{!s.loop&&!s.hasPrevPage||(e.preventDefault(),s.goTo(s.hasPrevPage?s.activePageIndex-1:s.pages.length-1,{behavior:s.scrollBehavior}))},u=e=>{!s.loop&&!s.hasNextPage||(e.preventDefault(),s.goTo(s.hasNextPage?s.activePageIndex+1:0,{behavior:s.scrollBehavior}))},f=e=>{e.key===`ArrowLeft`&&l(e),e.key===`ArrowRight`&&u(e)},p={scrollSnapType:c[s.snapType],scrollPaddingInline:`var(--scrolling-list-px)`,"--scrolling-list-px":`${s.scrollPadding}px`,"--scrolling-list-gap":`${s.gap}px`,...s.withFade&&{maskImage:`linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`calc(100% + ${s.overflow.left?`0px`:`44px`} + ${s.overflow.right?`0px`:`44px`}) 100%`,maskPosition:`${s.overflow.left?`0px`:`-44px`} 0`}};return(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-items`,id:`scrolling-list-items`,role:`list`,className:(0,i.cx)(`relative transition-all duration-300`,`u-no-scrollbar overflow-x-auto scroll-smooth`,`w-full gap-(--scrolling-list-gap) default:flex default:flex-row`,`focus-visible:u-outline`,n),ref:g(s.scrollAreaRef,s.scrollRef,t),style:p,onKeyDown:f,...r,children:a.Children.map(e,(e,t)=>(0,a.isValidElement)(e)?(0,a.cloneElement)(e,{index:t}):e)})};_.displayName=`ScrollingList.Items`;var v=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),l=()=>{s.hasNextPage?s.next({behavior:s.scrollBehavior}):s.goTo(0,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.right;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-next-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:l,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalRight,{})})})};v.displayName=`ScrollingList.NextButton`;var y=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),c=()=>{s.activePageIndex===0&&(s.scrollAreaRef.current?.scrollLeft||0)>0?s.goTo(0,{behavior:s.scrollBehavior}):s.hasPrevPage?s.prev({behavior:s.scrollBehavior}):s.goTo(s.pages.length-1,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.left;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-prev-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:c,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(l.ArrowVerticalLeft,{})})})};y.displayName=`ScrollingList.PrevButton`;var b=({children:e,...t})=>{let r=(0,a.useContext)(d);return(0,o.jsx)(n.t,{type:`button`,design:`tinted`,intent:`surface`,tabIndex:0,className:(0,i.cx)(`z-raised absolute top-1/2 left-0 -translate-y-1/2`,`not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0`),onClick:r.skipKeyboardNavigation,...t,children:e})};b.displayName=`ScrollingList.SkipButton`;var x=Object.assign(f,{Controls:p,NextButton:v,PrevButton:y,Item:h,Items:_,SkipButton:b});x.displayName=`ScrollingList`,exports.ScrollingList=x;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-Tv2N8_24.js`),r=require(`../icon-button-CTe0v0g7.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/ArrowVerticalRight`),l=require(`@spark-ui/icons/ArrowVerticalLeft`),u=require(`react-snap-carousel`);var d=(0,a.createContext)(null),f=({snapType:e=`none`,snapStop:t=`normal`,scrollBehavior:n=`smooth`,loop:r=!1,gap:c=16,withFade:l=!1,scrollPadding:f=0,children:p,className:m,...h})=>{let g=(0,a.useRef)(null),_=(0,a.useRef)(null),v=(0,u.useSnapCarousel)(),{overflow:y,refresh:b}=(0,s.useScrollOverflow)(g,{precisionTreshold:1}),{activePageIndex:x,pages:S,refresh:C}=v,w=S[x],T=w?[w[0]+1,w[w.length-1]+1]:[0,0],E=(0,a.useCallback)(()=>{C&&g.current&&setTimeout(()=>{C()},0)},[C]);(0,a.useEffect)(()=>{E()},[p,E]),(0,a.useLayoutEffect)(()=>{g.current&&requestAnimationFrame(()=>{b()})},[p,b]);let D=()=>{_.current?.focus()};return(0,o.jsxs)(d,{value:{...v,snapType:e,snapStop:t,skipKeyboardNavigation:D,scrollBehavior:n,visibleItemsRange:T,loop:r,gap:c,withFade:l,scrollPadding:f,scrollAreaRef:g,overflow:y},children:[(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list`,className:(0,i.cx)(`gap-lg group/scrolling-list relative flex flex-col default:w-full`,m),...h,children:p}),(0,o.jsx)(`span`,{ref:_,className:`size-0 overflow-hidden`,tabIndex:-1})]})};f.displayName=`ScrollingList`;var p=({children:e,visibility:t=`always`,className:n,...r})=>(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-controls`,className:(0,i.cx)(`default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden`,n),style:{"--scrolling-list-controls-opacity":t===`hover`?`0`:`1`},"data-orientation":`horizontal`,...r,children:e});p.displayName=`ScrollingList.Controls`;function m(e,t){let[n,r]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let n=e=>{r(!0);let n=e.target,i=t.current;if(n&&i){let e=n.getBoundingClientRect(),t=i.getBoundingClientRect();e.left>=t.left&&e.right<=t.right&&e.top>=t.top&&e.bottom<=t.bottom||n.scrollIntoView({behavior:`smooth`,inline:`center`,block:`nearest`})}},i=t=>{e.current&&!e.current.contains(t.relatedTarget)&&r(!1)},a=e.current;return a&&(a.addEventListener(`focusin`,n),a.addEventListener(`focusout`,i)),()=>{a&&(a.removeEventListener(`focusin`,n),a.removeEventListener(`focusout`,i))}},[e,t]),n}var h=({asChild:t=!1,children:n,index:r=0,className:s=``,...c})=>{let l=(0,a.useContext)(d),u=(0,a.useRef)(null),f=l.snapPointIndexes.has(r);return m(u,l.scrollAreaRef),(0,o.jsx)(t?e.Slot:`div`,{"data-spark-component":`scrolling-list-item`,role:`listitem`,ref:u,className:(0,i.cx)(`default:w-auto default:shrink-0`,{"snap-start":f,"snap-normal":f&&l.snapStop===`normal`,"snap-always":f&&l.snapStop===`always`},s),...c,children:n})};h.displayName=`ScrollingList.Item`;function g(...e){return t=>{e.forEach(e=>{typeof e==`function`?e(t):e&&typeof e==`object`&&`current`in e&&(e.current=t)})}}var _=({children:e,ref:t,className:n=``,...r})=>{let s=(0,a.useContext)(d),c={mandatory:`x mandatory`,proximity:`x proximity`,none:`none`},l=e=>{!s.loop&&!s.hasPrevPage||(e.preventDefault(),s.goTo(s.hasPrevPage?s.activePageIndex-1:s.pages.length-1,{behavior:s.scrollBehavior}))},u=e=>{!s.loop&&!s.hasNextPage||(e.preventDefault(),s.goTo(s.hasNextPage?s.activePageIndex+1:0,{behavior:s.scrollBehavior}))},f=e=>{e.key===`ArrowLeft`&&l(e),e.key===`ArrowRight`&&u(e)},p={scrollSnapType:c[s.snapType],scrollPaddingInline:`var(--scrolling-list-px)`,"--scrolling-list-px":`${s.scrollPadding}px`,"--scrolling-list-gap":`${s.gap}px`,...s.withFade&&{maskImage:`linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`calc(100% + ${s.overflow.left?`0px`:`44px`} + ${s.overflow.right?`0px`:`44px`}) 100%`,maskPosition:`${s.overflow.left?`0px`:`-44px`} 0`}};return(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-items`,id:`scrolling-list-items`,role:`list`,className:(0,i.cx)(`relative transition-all duration-300`,`u-no-scrollbar overflow-x-auto scroll-smooth`,`w-full gap-(--scrolling-list-gap) default:flex default:flex-row`,`focus-visible:u-outline`,n),ref:g(s.scrollAreaRef,s.scrollRef,t),style:p,onKeyDown:f,...r,children:a.Children.map(e,(e,t)=>(0,a.isValidElement)(e)?(0,a.cloneElement)(e,{index:t}):e)})};_.displayName=`ScrollingList.Items`;var v=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),l=()=>{s.hasNextPage?s.next({behavior:s.scrollBehavior}):s.goTo(0,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.right;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-next-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:l,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalRight,{})})})};v.displayName=`ScrollingList.NextButton`;var y=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),c=()=>{s.activePageIndex===0&&(s.scrollAreaRef.current?.scrollLeft||0)>0?s.goTo(0,{behavior:s.scrollBehavior}):s.hasPrevPage?s.prev({behavior:s.scrollBehavior}):s.goTo(s.pages.length-1,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.left;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-prev-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:c,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(l.ArrowVerticalLeft,{})})})};y.displayName=`ScrollingList.PrevButton`;var b=({children:e,...t})=>{let r=(0,a.useContext)(d);return(0,o.jsx)(n.t,{type:`button`,design:`tinted`,intent:`surface`,tabIndex:0,className:(0,i.cx)(`z-raised absolute top-1/2 left-0 -translate-y-1/2`,`not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0`),onClick:r.skipKeyboardNavigation,...t,children:e})};b.displayName=`ScrollingList.SkipButton`;var x=Object.assign(f,{Controls:p,NextButton:v,PrevButton:y,Item:h,Items:_,SkipButton:b});x.displayName=`ScrollingList`,exports.ScrollingList=x;
 //# sourceMappingURL=index.js.map