@spark-ui/components 17.10.5-beta.0 → 17.11.1

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}

package/dist/chip/index.mjs

@@ -454,7 +454,7 @@ var v = [
 		children: n,
 		onClear: l
 	}), { clearButton: _ } = g;
-	return /* @__PURE__ */ d(S.Provider, {
+	return /* @__PURE__ */ d(S, {
 		value: {
 			disabled: t,
 			design: e,

package/dist/chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext.Provider>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}

package/dist/circular-meter/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,e.cva)([`focus-visible:u-outline gap-md flex items-center`],{variants:{orientation:{vertical:[`default:flex-col`],horizontal:[`default:flex-row`]}},defaultVariants:{orientation:`vertical`}}),o=(0,t.createContext)(null),s=`:circular-meter`,c=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useCircularMeter must be used within a CircularMeter provider`);return e},l={sm:{diameter:24,strokeWidth:4},md:{diameter:64,strokeWidth:8},lg:{diameter:96,strokeWidth:8},xl:{diameter:128,strokeWidth:8}},u=({className:r,value:s,max:c=100,min:u=0,size:d=`lg`,intent:f=`support`,orientation:p=`vertical`,children:m,ref:h,...g})=>{let[_,v]=(0,t.useState)(),{diameter:y,strokeWidth:b}=l[d],x=y/2-b/2,S=2*Math.PI*x,C=(0,t.useMemo)(()=>({value:s??0,max:c,min:u,intent:f,onLabelId:v,sizeProp:d,orientation:p,size:y,radius:x,circumference:S,strokeWidth:b}),[c,u,s,f,v,d,p,y,x,S,b]);return(0,n.jsx)(o.Provider,{value:C,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`circular-meter`,ref:h,className:(0,e.cx)(a({orientation:p}),r),style:g.style,value:s,max:c,min:u,"aria-labelledby":_,...g,children:m})})};u.displayName=`CircularMeter`;var d=({className:t,children:r,...i})=>{let{orientation:a}=c();return(0,n.jsx)(`div`,{"data-spark-component":`circular-meter-content`,className:(0,e.cx)(`gap-xs flex default:flex-col`,a===`vertical`&&`default:text-center`,t),...i,children:r})};d.displayName=`CircularMeter.Content`;function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=(0,t.createContext)(!1),m=()=>(0,t.useContext)(p),h=(0,e.cva)([],{variants:{intent:{main:[`text-main/dim-4`],support:[`text-support/dim-4`],success:[`text-success/dim-4`],alert:[`text-alert/dim-4`],danger:[`text-error/dim-4`],info:[`text-info/dim-4`]}}}),g=(0,e.cva)([],{variants:{intent:{main:[`text-main`],support:[`text-support`],success:[`text-success`],alert:[`text-alert`],danger:[`text-error`],info:[`text-info`]}}}),_=({className:r,children:a,...o})=>{let{value:s,max:l,min:u,intent:d,size:m,radius:_,circumference:v,strokeWidth:y}=c(),b=v-(s-u)/(l-u)*100/100*v,x=g({intent:d}),S=(0,t.useRef)(null),[C,w]=(0,t.useState)(!1);return f(S,()=>{w(!0)}),(0,n.jsx)(i.Meter.Track,{"data-spark-component":`circular-meter-track`,className:r,...o,children:(0,n.jsx)(p.Provider,{value:!0,children:(0,n.jsxs)(`svg`,{ref:S,width:m,height:m,viewBox:`0 0 ${m} ${m}`,children:[(0,n.jsxs)(`g`,{style:{transform:`rotate(-90deg)`,transformOrigin:`center`},children:[(0,n.jsx)(`circle`,{cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,className:h({intent:d})}),(0,n.jsx)(`circle`,{"data-spark-component":`circular-meter-indicator`,cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,strokeLinecap:`round`,className:(0,e.cx)(x,`ease-standard transition-[stroke-dashoffset] duration-700`,`motion-reduce:transition-none`),style:{strokeDasharray:v,strokeDashoffset:C?b:v}})]}),a&&(0,n.jsx)(`foreignObject`,{x:8,y:8,width:m-16,height:m-16,children:(0,n.jsx)(`div`,{className:`p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center`,style:{width:m-16,height:m-16},children:a})})]})})})};_.displayName=`CircularMeter.Track`;var v=(0,e.cva)([],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[`default:text-on-surface/dim-1`],false:[`default:text-on-surface`]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-small`},{size:`md`,inside:!0,class:`default:text-small `},{size:`lg`,inside:!0,class:`default:text-caption`},{size:`xl`,inside:!0,class:`default:text-body-2`},{size:`sm`,inside:!1,class:`default:text-body-1`},{size:`md`,inside:!1,class:`default:text-body-1`},{size:`lg`,inside:!1,class:`default:text-body-1`},{size:`xl`,inside:!1,class:`default:text-body-1`}],defaultVariants:{size:`lg`,inside:!0}}),y=({id:e,children:a,className:o,ref:l,...u})=>{let d=`${s}-label-${(0,t.useId)()}`,f=e||d,{onLabelId:p,sizeProp:h}=c(),g=m(),_=(0,r.useMergeRefs)(l,(0,t.useCallback)(e=>{p(e?f:void 0)},[f,p]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`circular-meter-label`,id:f,className:v({size:h,inside:g,className:o}),ref:_,...u,children:a})};y.displayName=`CircularMeter.Label`;var b=(0,e.cva)([`default:text-on-surface`],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[],false:[]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-body-2-highlight`},{size:`md`,inside:!0,class:`default:text-body-2-highlight`},{size:`lg`,inside:!0,class:`default:text-body-1-highlight`},{size:`xl`,inside:!0,class:`default:text-display-3`},{size:`sm`,inside:!1,class:`default:text-body-1-highlight`},{size:`md`,inside:!1,class:`default:text-headline-2`},{size:`lg`,inside:!1,class:`default:text-headline-2`},{size:`xl`,inside:!1,class:`default:text-display-3`}],defaultVariants:{size:`lg`,inside:!0}}),x=({className:e,children:t,...r})=>{let{sizeProp:a}=c(),o=m();return(0,n.jsx)(i.Meter.Value,{"data-spark-component":`circular-meter-value`,className:b({size:a,inside:o,className:e}),...r,children:t})};x.displayName=`CircularMeter.Value`;var S=Object.assign(u,{Content:d,Label:y,Track:_,Value:x});S.displayName=`CircularMeter`,d.displayName=`CircularMeter.Content`,y.displayName=`CircularMeter.Label`,_.displayName=`CircularMeter.Track`,x.displayName=`CircularMeter.Value`,exports.CircularMeter=S;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,e.cva)([`focus-visible:u-outline gap-md flex items-center`],{variants:{orientation:{vertical:[`default:flex-col`],horizontal:[`default:flex-row`]}},defaultVariants:{orientation:`vertical`}}),o=(0,t.createContext)(null),s=`:circular-meter`,c=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useCircularMeter must be used within a CircularMeter provider`);return e},l={sm:{diameter:24,strokeWidth:4},md:{diameter:64,strokeWidth:8},lg:{diameter:96,strokeWidth:8},xl:{diameter:128,strokeWidth:8}},u=({className:r,value:s,max:c=100,min:u=0,size:d=`lg`,intent:f=`support`,orientation:p=`vertical`,children:m,ref:h,...g})=>{let[_,v]=(0,t.useState)(),{diameter:y,strokeWidth:b}=l[d],x=y/2-b/2,S=2*Math.PI*x;return(0,n.jsx)(o,{value:(0,t.useMemo)(()=>({value:s??0,max:c,min:u,intent:f,onLabelId:v,sizeProp:d,orientation:p,size:y,radius:x,circumference:S,strokeWidth:b}),[c,u,s,f,v,d,p,y,x,S,b]),children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`circular-meter`,ref:h,className:(0,e.cx)(a({orientation:p}),r),style:g.style,value:s,max:c,min:u,"aria-labelledby":_,...g,children:m})})};u.displayName=`CircularMeter`;var d=({className:t,children:r,...i})=>{let{orientation:a}=c();return(0,n.jsx)(`div`,{"data-spark-component":`circular-meter-content`,className:(0,e.cx)(`gap-xs flex default:flex-col`,a===`vertical`&&`default:text-center`,t),...i,children:r})};d.displayName=`CircularMeter.Content`;function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=(0,t.createContext)(!1),m=()=>(0,t.useContext)(p),h=(0,e.cva)([],{variants:{intent:{main:[`text-main/dim-4`],support:[`text-support/dim-4`],success:[`text-success/dim-4`],alert:[`text-alert/dim-4`],danger:[`text-error/dim-4`],info:[`text-info/dim-4`]}}}),g=(0,e.cva)([],{variants:{intent:{main:[`text-main`],support:[`text-support`],success:[`text-success`],alert:[`text-alert`],danger:[`text-error`],info:[`text-info`]}}}),_=({className:r,children:a,...o})=>{let{value:s,max:l,min:u,intent:d,size:m,radius:_,circumference:v,strokeWidth:y}=c(),b=v-(s-u)/(l-u)*100/100*v,x=g({intent:d}),S=(0,t.useRef)(null),[C,w]=(0,t.useState)(!1);return f(S,()=>{w(!0)}),(0,n.jsx)(i.Meter.Track,{"data-spark-component":`circular-meter-track`,className:r,...o,children:(0,n.jsx)(p,{value:!0,children:(0,n.jsxs)(`svg`,{ref:S,width:m,height:m,viewBox:`0 0 ${m} ${m}`,children:[(0,n.jsxs)(`g`,{style:{transform:`rotate(-90deg)`,transformOrigin:`center`},children:[(0,n.jsx)(`circle`,{cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,className:h({intent:d})}),(0,n.jsx)(`circle`,{"data-spark-component":`circular-meter-indicator`,cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,strokeLinecap:`round`,className:(0,e.cx)(x,`ease-standard transition-[stroke-dashoffset] duration-700`,`motion-reduce:transition-none`),style:{strokeDasharray:v,strokeDashoffset:C?b:v}})]}),a&&(0,n.jsx)(`foreignObject`,{x:8,y:8,width:m-16,height:m-16,children:(0,n.jsx)(`div`,{className:`p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center`,style:{width:m-16,height:m-16},children:a})})]})})})};_.displayName=`CircularMeter.Track`;var v=(0,e.cva)([],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[`default:text-on-surface/dim-1`],false:[`default:text-on-surface`]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-small`},{size:`md`,inside:!0,class:`default:text-small `},{size:`lg`,inside:!0,class:`default:text-caption`},{size:`xl`,inside:!0,class:`default:text-body-2`},{size:`sm`,inside:!1,class:`default:text-body-1`},{size:`md`,inside:!1,class:`default:text-body-1`},{size:`lg`,inside:!1,class:`default:text-body-1`},{size:`xl`,inside:!1,class:`default:text-body-1`}],defaultVariants:{size:`lg`,inside:!0}}),y=({id:e,children:a,className:o,ref:l,...u})=>{let d=`${s}-label-${(0,t.useId)()}`,f=e||d,{onLabelId:p,sizeProp:h}=c(),g=m(),_=(0,r.useMergeRefs)(l,(0,t.useCallback)(e=>{p(e?f:void 0)},[f,p]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`circular-meter-label`,id:f,className:v({size:h,inside:g,className:o}),ref:_,...u,children:a})};y.displayName=`CircularMeter.Label`;var b=(0,e.cva)([`default:text-on-surface`],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[],false:[]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-body-2-highlight`},{size:`md`,inside:!0,class:`default:text-body-2-highlight`},{size:`lg`,inside:!0,class:`default:text-body-1-highlight`},{size:`xl`,inside:!0,class:`default:text-display-3`},{size:`sm`,inside:!1,class:`default:text-body-1-highlight`},{size:`md`,inside:!1,class:`default:text-headline-2`},{size:`lg`,inside:!1,class:`default:text-headline-2`},{size:`xl`,inside:!1,class:`default:text-display-3`}],defaultVariants:{size:`lg`,inside:!0}}),x=({className:e,children:t,...r})=>{let{sizeProp:a}=c(),o=m();return(0,n.jsx)(i.Meter.Value,{"data-spark-component":`circular-meter-value`,className:b({size:a,inside:o,className:e}),...r,children:t})};x.displayName=`CircularMeter.Value`;var S=Object.assign(u,{Content:d,Label:y,Track:_,Value:x});S.displayName=`CircularMeter`,d.displayName=`CircularMeter.Content`,y.displayName=`CircularMeter.Label`,_.displayName=`CircularMeter.Track`,x.displayName=`CircularMeter.Value`,exports.CircularMeter=S;
 //# sourceMappingURL=index.js.map

package/dist/circular-meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext.Provider>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\n/**\n * Container for circular meter content such as labels and values. Renders a <div> element.\n */\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\n/**\n * The circular track of the meter showing progress. Renders an <svg> element.\n */\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext.Provider value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext.Provider>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\n/**\n * The label of the circular meter, announced to assistive technology. Renders a <span> element.\n */\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'md', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'lg', inside: true, class: 'default:text-body-1-highlight' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1-highlight' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\n/**\n * The value display of the circular meter. Renders a <span> element.\n */\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\n/**\n * Container for circular meter content such as labels and values. Renders a <div> element.\n */\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\n/**\n * The circular track of the meter showing progress. Renders an <svg> element.\n */\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\n/**\n * The label of the circular meter, announced to assistive technology. Renders a <span> element.\n */\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'md', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'lg', inside: true, class: 'default:text-body-1-highlight' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1-highlight' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\n/**\n * The value display of the circular meter. Renders a <span> element.\n */\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}