@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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-md 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'>,\n    ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\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\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\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\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\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"],"names":["outlinedVariants","tw","tintedVariants","dashedVariants","chipStyles","cva","makeVariants","ChipContext","createContext","useChipContext","useContext","getDisplayName","element","findElement","children","values","Children","isValidElement","child","displayName","useChipElement","onClick","asChild","pressed","defaultPressed","disabled","value","defaultValue","onClear","isPressed","setIsPressed","useCombinedState","innerValue","findChipElement","leadingIcon","trailingIcon","content","clearButton","isButton","formattedChildren","jsx","jsxs","Fragment","onKeyDown","event","emulateTab","Slot","Chip","design","intent","className","forwardedRef","otherProps","ChipElement","chipProps","compoundElements","chipClearButtonWrapperStyles","chipClearButtonStyles","ChipClearButton","Icon","Close","tabIndex","label","onClearHandler","useCallback","cloneElement","ChipContent","cx","ChipIcon","ChipLeadingIcon","props","ChipTrailingIcon","Root"],"mappings":"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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-md 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\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\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\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\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\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/chunk-C91j1N6u.js

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/circular-meter/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),M=require("@base-ui/react/meter"),m=require("class-variance-authority"),a=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),L=m.cva(["focus-visible:u-outline gap-md flex items-center"],{variants:{orientation:{vertical:["default:flex-col"],horizontal:["default:flex-row"]}},defaultVariants:{orientation:"vertical"}}),N=a.createContext(null),S=":circular-meter",h=()=>{const r=a.useContext(N);if(!r)throw new Error("useCircularMeter must be used within a CircularMeter provider");return r},E={sm:{diameter:24,strokeWidth:4},md:{diameter:64,strokeWidth:8},lg:{diameter:96,strokeWidth:8},xl:{diameter:128,strokeWidth:8}},I=({className:r,value:t,max:i=100,min:s=0,size:o="lg",intent:l="support",orientation:n="vertical",children:e,ref:d,...u})=>{const[f,p]=a.useState(),{diameter:x,strokeWidth:C}=E[o],y=x/2-C/2,b=2*Math.PI*y,g=a.useMemo(()=>({value:t??0,max:i,min:s,intent:l,onLabelId:p,sizeProp:o,orientation:n,size:x,radius:y,circumference:b,strokeWidth:C}),[i,s,t,l,p,o,n,x,y,b,C]);return c.jsx(N.Provider,{value:g,children:c.jsx(M.Meter.Root,{"data-spark-component":"circular-meter",ref:d,className:m.cx(L({orientation:n}),r),style:u.style,value:t,max:i,min:s,"aria-labelledby":f,...u,children:e})})};I.displayName="CircularMeter";const v=({className:r,children:t,...i})=>{const{orientation:s}=h();return c.jsx("div",{"data-spark-component":"circular-meter-content",className:m.cx("gap-xs flex default:flex-col",s==="vertical"&&"default:text-center",r),...i,children:t})};v.displayName="CircularMeter.Content";function q(r,t,i={}){const{threshold:s=.1,rootMargin:o}=i,l=a.useRef(!1),n=a.useRef(t);return a.useEffect(()=>{n.current=t},[t]),a.useEffect(()=>{const e=r.current;if(!e||l.current)return;const d=new IntersectionObserver(u=>{u.forEach(f=>{f.isIntersecting&&!l.current&&requestAnimationFrame(()=>{l.current||(l.current=!0,n.current(),d.disconnect())})})},{threshold:s,rootMargin:o});return d.observe(e),()=>{d.disconnect()}},[r,s,o]),l.current}const R=a.createContext(!1),V=()=>a.useContext(R),A=m.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"]}}}),O=m.cva([],{variants:{intent:{main:["text-main"],support:["text-support"],success:["text-success"],alert:["text-alert"],danger:["text-error"],info:["text-info"]}}}),k=({className:r,children:t,...i})=>{const{value:s,max:o,min:l,intent:n,size:e,radius:d,circumference:u,strokeWidth:f}=h(),p=(s-l)/(o-l)*100,x=u-p/100*u,C=O({intent:n}),y=a.useRef(null),[b,g]=a.useState(!1);return q(y,()=>{g(!0)}),c.jsx(M.Meter.Track,{"data-spark-component":"circular-meter-track",className:r,...i,children:c.jsx(R.Provider,{value:!0,children:c.jsxs("svg",{ref:y,width:e,height:e,viewBox:`0 0 ${e} ${e}`,children:[c.jsxs("g",{style:{transform:"rotate(-90deg)",transformOrigin:"center"},children:[c.jsx("circle",{cx:e/2,cy:e/2,r:d,fill:"none",stroke:"currentColor",strokeWidth:f,className:A({intent:n})}),c.jsx("circle",{"data-spark-component":"circular-meter-indicator",cx:e/2,cy:e/2,r:d,fill:"none",stroke:"currentColor",strokeWidth:f,strokeLinecap:"round",className:m.cx(C,"ease-standard transition-[stroke-dashoffset] duration-700","motion-reduce:transition-none"),style:{strokeDasharray:u,strokeDashoffset:b?x:u}})]}),t&&c.jsx("foreignObject",{x:8,y:8,width:e-16,height:e-16,children:c.jsx("div",{className:"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center",style:{width:e-16,height:e-16},children:t})})]})})})};k.displayName="CircularMeter.Track";const W=m.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}}),z=({id:r,children:t,className:i,ref:s,...o})=>{const l=`${S}-label-${a.useId()}`,n=r||l,{onLabelId:e,sizeProp:d}=h(),u=V(),f=a.useCallback(x=>{e(x?n:void 0)},[n,e]),p=w.useMergeRefs(s,f);return c.jsx(M.Meter.Label,{"data-spark-component":"circular-meter-label",id:n,className:W({size:d,inside:u,className:i}),ref:p,...o,children:t})};z.displayName="CircularMeter.Label";const P=m.cva(["default:text-on-surface default:font-bold"],{variants:{size:{sm:"",md:"",lg:"",xl:""},inside:{true:[],false:[]}},compoundVariants:[{size:"sm",inside:!0,class:"default:text-body-2 default:font-bold"},{size:"md",inside:!0,class:"default:text-body-2 default:font-bold"},{size:"lg",inside:!0,class:"default:text-body-1 default:font-bold"},{size:"xl",inside:!0,class:"default:text-display-3"},{size:"sm",inside:!1,class:"default:text-body-1 default:font-bold"},{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}}),j=({className:r,children:t,...i})=>{const{sizeProp:s}=h(),o=V();return c.jsx(M.Meter.Value,{"data-spark-component":"circular-meter-value",className:P({size:s,inside:o,className:r}),...i,children:t})};j.displayName="CircularMeter.Value";const T=Object.assign(I,{Content:v,Label:z,Track:k,Value:j});T.displayName="CircularMeter";v.displayName="CircularMeter.Content";z.displayName="CircularMeter.Label";k.displayName="CircularMeter.Track";j.displayName="CircularMeter.Value";exports.CircularMeter=T;
-//# sourceMappingURL=index.js.map
+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 default:font-bold`],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[],false:[]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-body-2 default:font-bold`},{size:`md`,inside:!0,class:`default:text-body-2 default:font-bold`},{size:`lg`,inside:!0,class:`default:text-body-1 default:font-bold`},{size:`xl`,inside:!0,class:`default:text-display-3`},{size:`sm`,inside:!1,class:`default:text-body-1 default:font-bold`},{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","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 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\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\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\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 default:font-bold'], {\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 default:font-bold' },\n    { size: 'md', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'lg', inside: true, class: 'default:text-body-1 default:font-bold' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1 default:font-bold' },\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\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\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"],"names":["circularMeterStyles","cva","CircularMeterContext","createContext","ID_PREFIX","useCircularMeter","context","useContext","CIRCULAR_METER_SIZE_CONFIG","CircularMeter","className","value","max","min","sizeProp","intent","orientation","children","ref","others","labelId","setLabelId","useState","size","strokeWidth","radius","circumference","contextValue","useMemo","jsx","BaseMeter","cx","CircularMeterContent","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","CircularMeterTrackContext","useCircularMeterTrack","circularMeterTrackStyles","circularMeterIndicatorStyles","CircularMeterTrack","percentage","offset","intentClasses","svgRef","hasAnimated","setHasAnimated","jsxs","labelStyles","CircularMeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","isInside","rootRef","useCallback","el","useMergeRefs","valueStyles","CircularMeterValue","Root"],"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.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\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\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\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 default:font-bold'], {\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 default:font-bold' },\n    { size: 'md', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'lg', inside: true, class: 'default:text-body-1 default:font-bold' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1 default:font-bold' },\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\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\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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"}