@spear-ai/spectral 1.15.3 → 1.15.5

package/dist/Tabs/TabsBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsBase.js","names":[],"sources":["../../src/components/Tabs/TabsBase.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ComponentPropsWithoutRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\nimport { calculateIndicatorStyle, debounce, generateId, prefersReducedMotion, type IndicatorStyle } from './tabsUtils'\n\nexport interface TabsContextValue {\n  activationMode: 'automatic' | 'manual'\n  baseId: string\n  dir: 'ltr' | 'rtl'\n  disabled: boolean\n  onValueChange: (value: string) => void\n  orientation: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value: string\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport const useTabsContext = (componentName: string = 'Tabs'): TabsContextValue => {\n  const context = useContext(TabsContext)\n  if (context === null) {\n    throw new Error(`${componentName} components must be used within a Tabs.Root`)\n  }\n  return context\n}\n\nexport interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir' | 'defaultValue'> {\n  onValueChange?: (value: string) => void\n  activationMode?: 'automatic' | 'manual'\n  defaultValue?: string\n  children: ReactNode\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value?: string\n}\n\nexport const TabsBase = function Tabs({\n  ref,\n  activationMode = 'automatic',\n  children,\n  defaultValue,\n  dir = 'ltr',\n  disabled = false,\n  onValueChange,\n  orientation = 'horizontal',\n  rightSlot,\n  value: controlledValue,\n  ...props\n}: TabsBaseProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(defaultValue ?? '')\n  const baseId = useId() ?? generateId('tabs')\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = useCallback(\n    (newValue: string): void => {\n      if (disabled) return\n\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange, disabled],\n  )\n\n  const contextValue = {\n    activationMode,\n    baseId,\n    dir,\n    disabled,\n    onValueChange: handleValueChange,\n    orientation,\n    rightSlot,\n    value,\n  } as const satisfies TabsContextValue\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        data-testid='spectral-tabs'\n        data-orientation={orientation}\n        data-disabled={disabled ? '' : undefined}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nexport interface TabsListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  children?: ReactNode\n  loop?: boolean\n  rightSlot?: ReactNode | undefined\n}\n\nexport const TabsList = function TabsList({\n  ref,\n  children,\n  className,\n  loop = true,\n  rightSlot,\n  ...props\n}: TabsListProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { orientation, disabled, value } = useTabsContext('TabsList')\n  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyle | null>(null)\n  const tabsListRef = useRef<HTMLDivElement>(null)\n\n  // Calculate indicator position\n  const calculatePosition = useCallback(() => {\n    const newStyle = calculateIndicatorStyle(tabsListRef)\n    // Only update if we have a valid position (width/height > 0)\n    if (newStyle.width > 0 || newStyle.height > 0) {\n      setIndicatorStyle(newStyle)\n    }\n  }, [])\n\n  // Debounced version for resize/mutation observers\n  const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), [calculatePosition])\n\n  // Initial calculation and observer setup\n  useEffect(() => {\n    // Immediate calculation on mount\n    calculatePosition()\n\n    // Only set up observers if browser APIs are available\n    if (typeof ResizeObserver === 'undefined' || typeof MutationObserver === 'undefined') {\n      return\n    }\n\n    const resizeObserver = new ResizeObserver(debouncedCalculatePosition)\n    const mutationObserver = new MutationObserver(debouncedCalculatePosition)\n\n    const currentRef = tabsListRef.current\n    if (currentRef) {\n      resizeObserver.observe(currentRef)\n      mutationObserver.observe(currentRef, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n\n    return () => {\n      resizeObserver.disconnect()\n      mutationObserver.disconnect()\n      debouncedCalculatePosition.cancel()\n    }\n  }, [calculatePosition, debouncedCalculatePosition])\n\n  // Recalculate when value changes\n  useEffect(() => {\n    calculatePosition()\n  }, [value, calculatePosition])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>): void => {\n      if (disabled) return\n\n      const triggers = Array.from(tabsListRef.current?.querySelectorAll<HTMLElement>(`[role='tab']:not([disabled]):not([aria-disabled='true'])`) ?? [])\n\n      if (triggers.length === 0) return\n\n      const currentIndex = triggers.findIndex((trigger) => trigger === document.activeElement)\n      if (currentIndex === -1) return\n\n      let nextIndex: number | null = null\n\n      const { key, ctrlKey, metaKey } = event\n      const isModified = ctrlKey || metaKey\n\n      if (orientation === 'horizontal') {\n        if (key === 'ArrowLeft' || (key === 'ArrowUp' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowRight' || (key === 'ArrowDown' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      } else {\n        if (key === 'ArrowUp' || (key === 'ArrowLeft' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowDown' || (key === 'ArrowRight' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      }\n\n      if (key === 'Home') {\n        nextIndex = 0\n      } else if (key === 'End') {\n        nextIndex = triggers.length - 1\n      }\n\n      if (nextIndex !== null && nextIndex !== currentIndex) {\n        event.preventDefault()\n        event.stopPropagation()\n        ;(triggers[nextIndex] as HTMLButtonElement)?.focus()\n      }\n    },\n    [disabled, orientation, loop],\n  )\n\n  return (\n    <div\n      className='relative'\n      ref={tabsListRef}\n    >\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        role='tablist'\n        tabIndex={-1}\n        data-testid='spectral-tabs-list'\n        aria-orientation={orientation}\n        aria-disabled={disabled}\n        className={cn('tabs-list flex', orientation === 'horizontal' && 'items-center justify-between', orientation === 'vertical' && 'flex-col', className)}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        <div className={cn('flex', orientation === 'horizontal' && 'items-center', orientation === 'vertical' && 'flex-col')}>{children}</div>\n        {rightSlot && <div className='z-10 flex items-center'>{rightSlot}</div>}\n      </div>\n      {/* Animated indicator - only rendered after first measurement */}\n      {indicatorStyle && (\n        <div\n          className={cn(\n            'top-0 left-0 pointer-events-none absolute select-none',\n            indicatorStyle.orientation === 'horizontal' && !indicatorStyle.isEnclosed && `after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'vertical' && !indicatorStyle.isEnclosed && `after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'horizontal' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n            indicatorStyle.orientation === 'vertical' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n          )}\n          aria-hidden='true'\n          style={{\n            left: indicatorStyle.left,\n            top: indicatorStyle.isEnclosed ? indicatorStyle.top + indicatorStyle.height * 0.1 : indicatorStyle.top,\n            width: indicatorStyle.width,\n            height: indicatorStyle.isEnclosed ? (indicatorStyle.orientation === 'vertical' ? 40 : indicatorStyle.height * 0.8) : indicatorStyle.height,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nexport interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {\n  value: string\n  disabled?: boolean\n}\n\nexport const TabsTrigger = function TabsTrigger({\n  ref,\n  className,\n  value: triggerValue,\n  onClick,\n  onKeyDown,\n  disabled: triggerDisabled = false,\n  ...props\n}: TabsTriggerProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, onValueChange, activationMode, disabled: contextDisabled, baseId } = useTabsContext('TabsTrigger')\n\n  const triggerId = `${baseId}-trigger-${triggerValue}`\n  const contentId = `${baseId}-content-${triggerValue}`\n  const isActive = value === triggerValue\n  const isDisabled = contextDisabled || triggerDisabled\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onValueChange(triggerValue)\n      onClick?.(event)\n    },\n    [triggerValue, onValueChange, onClick, isDisabled],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n\n      const { key } = event\n\n      if (key === 'Enter' || key === ' ') {\n        event.preventDefault()\n        event.stopPropagation()\n        onValueChange(triggerValue)\n      }\n\n      onKeyDown?.(event)\n    },\n    [triggerValue, onValueChange, onKeyDown, isDisabled],\n  )\n\n  const handleFocus = useCallback((): void => {\n    if (isDisabled) return\n    if (activationMode === 'automatic') {\n      onValueChange(triggerValue)\n    }\n  }, [activationMode, onValueChange, triggerValue, isDisabled])\n\n  return (\n    <button\n      aria-controls={contentId}\n      aria-disabled={isDisabled}\n      aria-selected={isActive}\n      className={cn('tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', className)}\n      data-disabled={isDisabled ? '' : undefined}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-trigger'\n      disabled={isDisabled}\n      id={triggerId}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={ref as Ref<HTMLButtonElement>}\n      role='tab'\n      tabIndex={isActive ? 0 : -1}\n      type='button'\n      {...props}\n    />\n  )\n}\n\nexport interface TabsContentContainerProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const TabsContentContainer = function TabsContentContainer({\n  ref,\n  children,\n  className,\n}: TabsContentContainerProps & {\n  ref?: Ref<HTMLDivElement>\n}) {\n  const { value } = useTabsContext('TabsContentContainer')\n  const reducedMotion = prefersReducedMotion()\n\n  return (\n    <div\n      ref={ref}\n      className={cn('overflow-hidden', className)}\n      data-testid='spectral-tabs-content-container'\n    >\n      <AnimatePresence\n        mode='wait'\n        initial={false}\n      >\n        <motion.div\n          key={value}\n          initial={reducedMotion ? false : { opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={reducedMotion ? undefined : { opacity: 0, y: -8 }}\n          transition={\n            reducedMotion\n              ? { duration: 0 }\n              : {\n                  duration: 0.2,\n                  ease: 'easeOut',\n                }\n          }\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nexport interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {\n  value: string\n  forceMount?: boolean\n}\n\nexport const TabsContent = function TabsContent({\n  ref,\n  className,\n  value: contentValue,\n  forceMount = false,\n  ...props\n}: TabsContentProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, baseId } = useTabsContext('TabsContent')\n  const contentId = `${baseId}-content-${contentValue}`\n  const triggerId = `${baseId}-trigger-${contentValue}`\n  const isActive = value === contentValue\n\n  if (!forceMount && !isActive) {\n    return null\n  }\n\n  return (\n    <div\n      aria-labelledby={triggerId}\n      className={cn('tabs-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', className)}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-content'\n      hidden={!isActive}\n      id={contentId}\n      ref={ref as Ref<HTMLDivElement>}\n      role='tabpanel'\n      tabIndex={0}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabsBase.js","names":[],"sources":["../../src/components/Tabs/TabsBase.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ComponentPropsWithoutRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\nimport { calculateIndicatorStyle, debounce, generateId, prefersReducedMotion, type IndicatorStyle } from './tabsUtils'\n\nexport interface TabsContextValue {\n  activationMode: 'automatic' | 'manual'\n  baseId: string\n  dir: 'ltr' | 'rtl'\n  disabled: boolean\n  onValueChange: (value: string) => void\n  orientation: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value: string\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport const useTabsContext = (componentName: string = 'Tabs'): TabsContextValue => {\n  const context = useContext(TabsContext)\n  if (context === null) {\n    throw new Error(`${componentName} components must be used within a Tabs.Root`)\n  }\n  return context\n}\n\nexport interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir' | 'defaultValue'> {\n  onValueChange?: (value: string) => void\n  activationMode?: 'automatic' | 'manual'\n  defaultValue?: string\n  children: ReactNode\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value?: string\n}\n\nexport const TabsBase = function Tabs({\n  ref,\n  activationMode = 'automatic',\n  children,\n  defaultValue,\n  dir = 'ltr',\n  disabled = false,\n  onValueChange,\n  orientation = 'horizontal',\n  rightSlot,\n  value: controlledValue,\n  ...props\n}: TabsBaseProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(defaultValue ?? '')\n  const baseId = useId() ?? generateId('tabs')\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = useCallback(\n    (newValue: string): void => {\n      if (disabled) return\n\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange, disabled],\n  )\n\n  const contextValue = {\n    activationMode,\n    baseId,\n    dir,\n    disabled,\n    onValueChange: handleValueChange,\n    orientation,\n    rightSlot,\n    value,\n  } as const satisfies TabsContextValue\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div ref={ref as Ref<HTMLDivElement>} data-testid='spectral-tabs' data-orientation={orientation} data-disabled={disabled ? '' : undefined} dir={dir} {...props}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nexport interface TabsListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  children?: ReactNode\n  loop?: boolean\n  rightSlot?: ReactNode | undefined\n}\n\nexport const TabsList = function TabsList({\n  ref,\n  children,\n  className,\n  loop = true,\n  rightSlot,\n  ...props\n}: TabsListProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { orientation, disabled, value } = useTabsContext('TabsList')\n  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyle | null>(null)\n  const tabsListRef = useRef<HTMLDivElement>(null)\n\n  // Calculate indicator position\n  const calculatePosition = useCallback(() => {\n    const newStyle = calculateIndicatorStyle(tabsListRef)\n    // Only update if we have a valid position (width/height > 0)\n    if (newStyle.width > 0 || newStyle.height > 0) {\n      setIndicatorStyle(newStyle)\n    }\n  }, [])\n\n  // Debounced version for resize/mutation observers\n  const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), [calculatePosition])\n\n  // Initial calculation and observer setup\n  useEffect(() => {\n    // Immediate calculation on mount\n    calculatePosition()\n\n    // Only set up observers if browser APIs are available\n    if (typeof ResizeObserver === 'undefined' || typeof MutationObserver === 'undefined') {\n      return\n    }\n\n    const resizeObserver = new ResizeObserver(debouncedCalculatePosition)\n    const mutationObserver = new MutationObserver(debouncedCalculatePosition)\n\n    const currentRef = tabsListRef.current\n    if (currentRef) {\n      resizeObserver.observe(currentRef)\n      mutationObserver.observe(currentRef, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n\n    return () => {\n      resizeObserver.disconnect()\n      mutationObserver.disconnect()\n      debouncedCalculatePosition.cancel()\n    }\n  }, [calculatePosition, debouncedCalculatePosition])\n\n  // Recalculate when value changes\n  useEffect(() => {\n    calculatePosition()\n  }, [value, calculatePosition])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>): void => {\n      if (disabled) return\n\n      const triggers = Array.from(tabsListRef.current?.querySelectorAll<HTMLElement>(`[role='tab']:not([disabled]):not([aria-disabled='true'])`) ?? [])\n\n      if (triggers.length === 0) return\n\n      const currentIndex = triggers.findIndex((trigger) => trigger === document.activeElement)\n      if (currentIndex === -1) return\n\n      let nextIndex: number | null = null\n\n      const { key, ctrlKey, metaKey } = event\n      const isModified = ctrlKey || metaKey\n\n      if (orientation === 'horizontal') {\n        if (key === 'ArrowLeft' || (key === 'ArrowUp' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowRight' || (key === 'ArrowDown' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      } else {\n        if (key === 'ArrowUp' || (key === 'ArrowLeft' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowDown' || (key === 'ArrowRight' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      }\n\n      if (key === 'Home') {\n        nextIndex = 0\n      } else if (key === 'End') {\n        nextIndex = triggers.length - 1\n      }\n\n      if (nextIndex !== null && nextIndex !== currentIndex) {\n        event.preventDefault()\n        event.stopPropagation()\n        ;(triggers[nextIndex] as HTMLButtonElement)?.focus()\n      }\n    },\n    [disabled, orientation, loop],\n  )\n\n  return (\n    <div className='relative' ref={tabsListRef}>\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        role='tablist'\n        tabIndex={-1}\n        data-testid='spectral-tabs-list'\n        aria-orientation={orientation}\n        aria-disabled={disabled}\n        className={cn('tabs-list flex', orientation === 'horizontal' && 'items-center justify-between', orientation === 'vertical' && 'flex-col', className)}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        <div className={cn('flex', orientation === 'horizontal' && 'items-center', orientation === 'vertical' && 'flex-col')}>{children}</div>\n        {rightSlot && <div className='z-10 flex items-center'>{rightSlot}</div>}\n      </div>\n      {/* Animated indicator - only rendered after first measurement */}\n      {indicatorStyle && (\n        <div\n          className={cn(\n            'top-0 left-0 pointer-events-none absolute select-none',\n            indicatorStyle.orientation === 'horizontal' && !indicatorStyle.isEnclosed && `after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'vertical' && !indicatorStyle.isEnclosed && `after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'horizontal' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n            indicatorStyle.orientation === 'vertical' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n          )}\n          aria-hidden='true'\n          style={{\n            left: indicatorStyle.left,\n            top: indicatorStyle.isEnclosed ? indicatorStyle.top + indicatorStyle.height * 0.1 : indicatorStyle.top,\n            width: indicatorStyle.width,\n            height: indicatorStyle.isEnclosed ? (indicatorStyle.orientation === 'vertical' ? 40 : indicatorStyle.height * 0.8) : indicatorStyle.height,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nexport interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {\n  value: string\n  disabled?: boolean\n}\n\nexport const TabsTrigger = function TabsTrigger({\n  ref,\n  className,\n  value: triggerValue,\n  onClick,\n  onKeyDown,\n  disabled: triggerDisabled = false,\n  ...props\n}: TabsTriggerProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, onValueChange, activationMode, disabled: contextDisabled, baseId } = useTabsContext('TabsTrigger')\n\n  const triggerId = `${baseId}-trigger-${triggerValue}`\n  const contentId = `${baseId}-content-${triggerValue}`\n  const isActive = value === triggerValue\n  const isDisabled = contextDisabled || triggerDisabled\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onValueChange(triggerValue)\n      onClick?.(event)\n    },\n    [triggerValue, onValueChange, onClick, isDisabled],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n\n      const { key } = event\n\n      if (key === 'Enter' || key === ' ') {\n        event.preventDefault()\n        event.stopPropagation()\n        onValueChange(triggerValue)\n      }\n\n      onKeyDown?.(event)\n    },\n    [triggerValue, onValueChange, onKeyDown, isDisabled],\n  )\n\n  const handleFocus = useCallback((): void => {\n    if (isDisabled) return\n    if (activationMode === 'automatic') {\n      onValueChange(triggerValue)\n    }\n  }, [activationMode, onValueChange, triggerValue, isDisabled])\n\n  return (\n    <button\n      aria-controls={contentId}\n      aria-disabled={isDisabled}\n      aria-selected={isActive}\n      className={cn('tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', className)}\n      data-disabled={isDisabled ? '' : undefined}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-trigger'\n      disabled={isDisabled}\n      id={triggerId}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={ref as Ref<HTMLButtonElement>}\n      role='tab'\n      tabIndex={isActive ? 0 : -1}\n      type='button'\n      {...props}\n    />\n  )\n}\n\nexport interface TabsContentContainerProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const TabsContentContainer = function TabsContentContainer({\n  ref,\n  children,\n  className,\n}: TabsContentContainerProps & {\n  ref?: Ref<HTMLDivElement>\n}) {\n  const { value } = useTabsContext('TabsContentContainer')\n  const reducedMotion = prefersReducedMotion()\n\n  return (\n    <div\n      ref={ref}\n      className={cn('overflow-hidden', className)}\n      data-testid='spectral-tabs-content-container'\n    >\n      <AnimatePresence mode='wait' initial={false}>\n        <motion.div\n          key={value}\n          initial={reducedMotion ? false : { opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={reducedMotion ? undefined : { opacity: 0, y: -8 }}\n          transition={\n            reducedMotion\n              ? { duration: 0 }\n              : {\n                  duration: 0.2,\n                  ease: 'easeOut',\n                }\n          }\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nexport interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {\n  value: string\n  forceMount?: boolean\n}\n\nexport const TabsContent = function TabsContent({\n  ref,\n  className,\n  value: contentValue,\n  forceMount = false,\n  ...props\n}: TabsContentProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, baseId } = useTabsContext('TabsContent')\n  const contentId = `${baseId}-content-${contentValue}`\n  const triggerId = `${baseId}-trigger-${contentValue}`\n  const isActive = value === contentValue\n\n  if (!forceMount && !isActive) {\n    return null\n  }\n\n  return (\n    <div\n      aria-labelledby={triggerId}\n      className={cn('tabs-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', className)}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-content'\n      hidden={!isActive}\n      id={contentId}\n      ref={ref as Ref<HTMLDivElement>}\n      role='tabpanel'\n      tabIndex={0}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","names":[],"sources":["../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;;UAKiB,QAAA;EACf,QAAA,EAAU,SAAA;EACV,QAAA;EACA,GAAA;EACA,KAAA,EAAO,SAAA;EACP,YAAA;EACA,kBAAA;AAAA;AAAA,UAGe,SAAA,SAAkB,IAAA,CAAK,aAAA;EACtC,cAAA;EACA,SAAA;EACA,SAAA;EARO;EAUP,WAAA;EACA,cAAA,IAAkB,QAAA,UAAkB,QAAA,uBAA+B,OAAA;EACnE,OAAA,KAAY,KAAA,EAAO,KAAA;EACnB,OAAA;EACA,UAAA;EACA,SAAA,GAAY,SAAA;EACZ,SAAA,EAAW,QAAA;EAX2B;;;;;;EAkBtC,KAAA;EACA,OAAA;AAAA;AAAA,cAGW,IAAA;EAAI,cAAA;EAAA,SAAA;EAAA,SAAA;EAAA,WAAA;EAAA,OAAA;EAAA,cAAA;EAAA,OAAA;EAAA,aAAA;EAAA,UAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA,EAAA,eAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAgBd,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAmJA,OAAA,WAAkB,QAAA,MAAc,CAAA;AAAA,KAChC,eAAA,wBAAuC,QAAA;EAAa,GAAA,EAAK,IAAA;AAAA"}
+{"version":3,"file":"Tabs.d.ts","names":[],"sources":["../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;;UAKiB,QAAA;EACf,QAAA,EAAU,SAAA;EACV,QAAA;EACA,GAAA;EACA,KAAA,EAAO,SAAA;EACP,YAAA;EACA,kBAAA;AAAA;AAAA,UAGe,SAAA,SAAkB,IAAA,CAAK,aAAA;EACtC,cAAA;EACA,SAAA;EACA,SAAA;EARO;EAUP,WAAA;EACA,cAAA,IAAkB,QAAA,UAAkB,QAAA,uBAA+B,OAAA;EACnE,OAAA,KAAY,KAAA,EAAO,KAAA;EACnB,OAAA;EACA,UAAA;EACA,SAAA,GAAY,SAAA;EACZ,SAAA,EAAW,QAAA;EAX2B;;;;;;EAkBtC,KAAA;EACA,OAAA;AAAA;AAAA,cAGW,IAAA;EAAI,cAAA;EAAA,SAAA;EAAA,SAAA;EAAA,WAAA;EAAA,OAAA;EAAA,cAAA;EAAA,OAAA;EAAA,aAAA;EAAA,UAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA,EAAA,eAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAgBd,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAmIA,OAAA,WAAkB,QAAA,MAAc,CAAA;AAAA,KAChC,eAAA,wBAAuC,QAAA;EAAa,GAAA,EAAK,IAAA;AAAA"}

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ReactNode } from 'react'\nimport { TabsBase, TabsContent, TabsContentContainer, TabsList, TabsTrigger, type TabsBaseProps } from './TabsBase'\nimport { getTabKeys, validateTabValues } from './tabsUtils'\n\nexport interface TabValue {\n  children: ReactNode\n  disabled?: boolean | undefined\n  key: string | undefined\n  label: ReactNode\n  'aria-label'?: string | undefined\n  'aria-describedby'?: string | undefined\n}\n\nexport interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValue' | 'onError' | 'disabled' | 'value'> {\n  activationMode?: 'automatic' | 'manual' | undefined\n  ariaLabel?: string | undefined\n  className?: string | undefined\n  /** Hide the content panel, useful when managing content display externally */\n  hideContent?: boolean | undefined\n  onBeforeChange?: (newValue: string, oldValue: string) => boolean | Promise<boolean> | undefined\n  onError?: ((error: Error) => void) | undefined\n  loading?: boolean | undefined\n  openOnLoad?: string | undefined\n  rightSlot?: ReactNode | undefined\n  tabValues: TabValue[] | undefined\n  /**\n   * Controlled value - the currently active tab key.\n   * When provided, the component operates in controlled mode and the parent\n   * must manage the active tab state via `onValueChange`.\n   * Mutually exclusive with `openOnLoad` - use one or the other.\n   */\n  value?: string | undefined\n  variant?: 'enclosed' | 'default'\n}\n\nexport const Tabs = ({\n  activationMode = 'automatic',\n  ariaLabel,\n  className,\n  hideContent = false,\n  loading = false,\n  onBeforeChange,\n  onError,\n  onValueChange,\n  openOnLoad,\n  orientation = 'horizontal',\n  rightSlot,\n  tabValues = [],\n  value: controlledValue,\n  variant = 'default',\n  ...props\n}: TabsProps) => {\n  if (loading) {\n    return (\n      <div\n        className='p-4 relative flex w-full flex-col text-center text-text-secondary'\n        role='status'\n        aria-live='polite'\n      >\n        <p>Loading tabs…</p>\n      </div>\n    )\n  }\n\n  const validTabs = tabValues.filter((tab): tab is TabValue & { key: string } => tab.key !== undefined)\n  const isControlled = controlledValue !== undefined\n\n  if (!validateTabValues(validTabs as { key: string; label: unknown; children: unknown; [K: string]: unknown }[])) {\n    const error = new Error('Invalid tabValues provided to Tabs component')\n    onError?.(error)\n\n    return (\n      <div\n        className='p-4 text-gray-500 relative flex w-full flex-col text-center'\n        role='alert'\n        aria-live='polite'\n      >\n        <p>No valid tabs provided</p>\n      </div>\n    )\n  }\n\n  const validKeys = getTabKeys(validTabs)\n\n  // Compute effective value for controlled mode (fallback if invalid)\n  let effectiveValue: string | undefined\n  if (isControlled) {\n    if (validKeys.includes(controlledValue)) {\n      effectiveValue = controlledValue\n    } else {\n      console.warn(`Tabs: value '${controlledValue}' is not a valid tab key, falling back to first tab`)\n      effectiveValue = validKeys[0]\n    }\n  }\n\n  // For uncontrolled mode, determine the default value\n  let defaultValue: string | undefined\n  if (!isControlled) {\n    defaultValue = openOnLoad ?? validKeys[0]\n\n    if (openOnLoad && !validKeys.includes(openOnLoad)) {\n      console.warn(`Tabs: openOnLoad value '${openOnLoad}' is not a valid tab key`)\n      defaultValue = validKeys[0]\n    }\n\n    if (!defaultValue) {\n      const error = new Error('No valid default tab available')\n      onError?.(error)\n      return (\n        <div\n          className='p-4 relative flex w-full flex-col text-center text-text-secondary'\n          role='alert'\n          aria-live='polite'\n        >\n          <p>Unable to render tabs</p>\n        </div>\n      )\n    }\n  }\n\n  const handleValueChange = async (newValue: string) => {\n    if (onBeforeChange && onValueChange) {\n      const currentValue = isControlled ? (effectiveValue ?? '') : (defaultValue ?? '')\n      try {\n        const canChange = await onBeforeChange(newValue, currentValue)\n        if (canChange === false) return\n      } catch (error) {\n        onError?.(error instanceof Error ? error : new Error('Before change callback failed'))\n        return\n      }\n    }\n\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <div className='relative flex w-full flex-col'>\n      <TabsBase\n        aria-label={ariaLabel}\n        className={cn('relative w-full data-[orientation=vertical]:flex', variant, className)}\n        {...(isControlled ? { value: effectiveValue } : { defaultValue })}\n        orientation={orientation}\n        activationMode={activationMode}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        <TabsList\n          className={cn(\n            'inline-flex w-full items-center justify-between',\n            orientation === 'horizontal' && variant === 'default' && 'border-b border-tabs-border',\n            orientation === 'vertical' && variant === 'default' && 'm-0 py-1 relative h-auto w-auto flex-col items-stretch border-r border-tabs-border',\n            orientation === 'horizontal' && variant === 'enclosed' && 'rounded-lg p-1 relative border-0 bg-tabs-group-bg',\n            orientation === 'vertical' && variant === 'enclosed' && 'rounded-lg p-1 w-auto flex-col border-0 bg-tabs-group-bg',\n          )}\n          rightSlot={rightSlot}\n        >\n          {validTabs.map((tab) => (\n            <TabsTrigger\n              key={tab.key}\n              value={tab.key}\n              disabled={tab.disabled}\n              aria-label={tab['aria-label']}\n              aria-describedby={tab['aria-describedby']}\n              className={cn(\n                'font-semibold relative whitespace-nowrap transition-colors duration-200 ease-out',\n                orientation === 'horizontal' && variant === 'default' && 'py-2 px-4 hover:bg-tabs-bg--hover text-text-primary hover:text-accent',\n                orientation === 'vertical' && variant === 'default' && 'h-10 px-4 py-2 hover:bg-tabs-bg--hover flex items-center text-text-primary hover:text-accent data-[state=active]:text-accent',\n                orientation === 'horizontal' && variant === 'enclosed' && 'px-4 py-2 hover:bg-tabs-bg--hover z-[1] inline-flex items-center justify-center text-text-primary hover:text-accent data-[state=active]:text-accent',\n                orientation === 'vertical' && variant === 'enclosed' && 'px-4 py-2 hover:bg-tabs-bg--hover z-1 text-text-primary hover:text-accent data-[state=active]:text-accent',\n                'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-text-primary',\n              )}\n            >\n              {tab.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n        {!hideContent && (\n          <TabsContentContainer className={cn(orientation === 'vertical' && 'flex-1')}>\n            {validTabs.map((tab) => (\n              <TabsContent\n                key={tab.key}\n                value={tab.key}\n                className={cn('text-text-primary focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', orientation === 'horizontal' && 'pb-4', orientation === 'vertical' && 'py-2 px-4')}\n              >\n                {tab.children}\n              </TabsContent>\n            ))}\n          </TabsContentContainer>\n        )}\n      </TabsBase>\n    </div>\n  )\n}\n\nexport { TabsContent, TabsContentContainer, TabsList, TabsBase as TabsRoot, TabsTrigger }\n\nexport type { TabsBaseProps, TabsContentContainerProps, TabsContentProps, TabsListProps, TabsTriggerProps } from './TabsBase'\n\nexport type TabKeys<T extends TabValue[]> = T[number]['key']\nexport type TabValueWithKey<TKey extends string> = TabValue & { key: TKey }\n"],"mappings":";;;;;;;;AAoCA,MAAa,QAAQ,EACnB,iBAAiB,aACjB,WACA,WACA,cAAc,OACd,UAAU,OACV,gBACA,SACA,eACA,YACA,cAAc,cACd,WACA,YAAY,EAAE,EACd,OAAO,iBACP,UAAU,WACV,GAAG,YACY;AACf,KAAI,QACF,QACE,oBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,aAAU;YAEV,oBAAC,KAAD,YAAG,iBAAiB;EAChB;CAIV,MAAM,YAAY,UAAU,QAAQ,QAA2C,IAAI,QAAQ,OAAU;CACrG,MAAM,eAAe,oBAAoB;AAEzC,KAAI,CAAC,kBAAkB,UAAwF,EAAE;AAE/G,4BAAU,IADQ,MAAM,+CACT,CAAC;AAEhB,SACE,oBAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,aAAU;aAEV,oBAAC,KAAD,YAAG,0BAA0B;GACzB;;CAIV,MAAM,YAAY,WAAW,UAAU;CAGvC,IAAI;AACJ,KAAI,aACF,KAAI,UAAU,SAAS,gBAAgB,CACrC,kBAAiB;MACZ;AACL,UAAQ,KAAK,gBAAgB,gBAAgB,qDAAqD;AAClG,mBAAiB,UAAU;;CAK/B,IAAI;AACJ,KAAI,CAAC,cAAc;AACjB,iBAAe,cAAc,UAAU;AAEvC,MAAI,cAAc,CAAC,UAAU,SAAS,WAAW,EAAE;AACjD,WAAQ,KAAK,2BAA2B,WAAW,0BAA0B;AAC7E,kBAAe,UAAU;;AAG3B,MAAI,CAAC,cAAc;AAEjB,6BAAU,IADQ,MAAM,iCACT,CAAC;AAChB,UACE,oBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,aAAU;cAEV,oBAAC,KAAD,YAAG,yBAAyB;IACxB;;;CAKZ,MAAM,oBAAoB,OAAO,aAAqB;AACpD,MAAI,kBAAkB,eAAe;GACnC,MAAM,eAAe,eAAgB,kBAAkB,KAAO,gBAAgB;AAC9E,OAAI;AAEF,QAAI,MADoB,eAAe,UAAU,aAAa,KAC5C,MAAO;YAClB,OAAO;AACd,cAAU,iBAAiB,QAAQ,wBAAQ,IAAI,MAAM,gCAAgC,CAAC;AACtF;;;AAIJ,kBAAgB,SAAS;;AAG3B,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,UAAD;GACE,cAAY;GACZ,WAAW,GAAG,oDAAoD,SAAS,UAAU;GACrF,GAAK,eAAe,EAAE,OAAO,gBAAgB,GAAG,EAAE,cAAc;GACnD;GACG;GAChB,eAAe;GACf,GAAI;aAPN,CASE,oBAAC,UAAD;IACE,WAAW,GACT,mDACA,gBAAgB,gBAAgB,YAAY,aAAa,+BACzD,gBAAgB,cAAc,YAAY,aAAa,sFACvD,gBAAgB,gBAAgB,YAAY,cAAc,qDAC1D,gBAAgB,cAAc,YAAY,cAAc,2DACzD;IACU;cAEV,UAAU,KAAK,QACd,oBAAC,aAAD;KAEE,OAAO,IAAI;KACX,UAAU,IAAI;KACd,cAAY,IAAI;KAChB,oBAAkB,IAAI;KACtB,WAAW,GACT,oFACA,gBAAgB,gBAAgB,YAAY,aAAa,yEACzD,gBAAgB,cAAc,YAAY,aAAa,gIACvD,gBAAgB,gBAAgB,YAAY,cAAc,uJAC1D,gBAAgB,cAAc,YAAY,cAAc,6GACxD,iHACD;eAEA,IAAI;KACO,EAfP,IAAI,IAeG,CACd;IACO,GACV,CAAC,eACA,oBAAC,sBAAD;IAAsB,WAAW,GAAG,gBAAgB,cAAc,SAAS;cACxE,UAAU,KAAK,QACd,oBAAC,aAAD;KAEE,OAAO,IAAI;KACX,WAAW,GAAG,4HAA4H,gBAAgB,gBAAgB,QAAQ,gBAAgB,cAAc,YAAY;eAE3N,IAAI;KACO,EALP,IAAI,IAKG,CACd;IACmB,EAEhB;;EACP"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { type ReactNode } from 'react'\nimport { TabsBase, TabsContent, TabsContentContainer, TabsList, TabsTrigger, type TabsBaseProps } from './TabsBase'\nimport { getTabKeys, validateTabValues } from './tabsUtils'\n\nexport interface TabValue {\n  children: ReactNode\n  disabled?: boolean | undefined\n  key: string | undefined\n  label: ReactNode\n  'aria-label'?: string | undefined\n  'aria-describedby'?: string | undefined\n}\n\nexport interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValue' | 'onError' | 'disabled' | 'value'> {\n  activationMode?: 'automatic' | 'manual' | undefined\n  ariaLabel?: string | undefined\n  className?: string | undefined\n  /** Hide the content panel, useful when managing content display externally */\n  hideContent?: boolean | undefined\n  onBeforeChange?: (newValue: string, oldValue: string) => boolean | Promise<boolean> | undefined\n  onError?: ((error: Error) => void) | undefined\n  loading?: boolean | undefined\n  openOnLoad?: string | undefined\n  rightSlot?: ReactNode | undefined\n  tabValues: TabValue[] | undefined\n  /**\n   * Controlled value - the currently active tab key.\n   * When provided, the component operates in controlled mode and the parent\n   * must manage the active tab state via `onValueChange`.\n   * Mutually exclusive with `openOnLoad` - use one or the other.\n   */\n  value?: string | undefined\n  variant?: 'enclosed' | 'default'\n}\n\nexport const Tabs = ({\n  activationMode = 'automatic',\n  ariaLabel,\n  className,\n  hideContent = false,\n  loading = false,\n  onBeforeChange,\n  onError,\n  onValueChange,\n  openOnLoad,\n  orientation = 'horizontal',\n  rightSlot,\n  tabValues = [],\n  value: controlledValue,\n  variant = 'default',\n  ...props\n}: TabsProps) => {\n  if (loading) {\n    return (\n      <div className='p-4 relative flex w-full flex-col text-center text-text-secondary' role='status' aria-live='polite'>\n        <p>Loading tabs…</p>\n      </div>\n    )\n  }\n\n  const validTabs = tabValues.filter((tab): tab is TabValue & { key: string } => tab.key !== undefined)\n  const isControlled = controlledValue !== undefined\n\n  if (!validateTabValues(validTabs as { key: string; label: unknown; children: unknown; [K: string]: unknown }[])) {\n    const error = new Error('Invalid tabValues provided to Tabs component')\n    onError?.(error)\n\n    return (\n      <div className='p-4 text-gray-500 relative flex w-full flex-col text-center' role='alert' aria-live='polite'>\n        <p>No valid tabs provided</p>\n      </div>\n    )\n  }\n\n  const validKeys = getTabKeys(validTabs)\n\n  // Compute effective value for controlled mode (fallback if invalid)\n  let effectiveValue: string | undefined\n  if (isControlled) {\n    if (validKeys.includes(controlledValue)) {\n      effectiveValue = controlledValue\n    } else {\n      console.warn(`Tabs: value '${controlledValue}' is not a valid tab key, falling back to first tab`)\n      effectiveValue = validKeys[0]\n    }\n  }\n\n  // For uncontrolled mode, determine the default value\n  let defaultValue: string | undefined\n  if (!isControlled) {\n    defaultValue = openOnLoad ?? validKeys[0]\n\n    if (openOnLoad && !validKeys.includes(openOnLoad)) {\n      console.warn(`Tabs: openOnLoad value '${openOnLoad}' is not a valid tab key`)\n      defaultValue = validKeys[0]\n    }\n\n    if (!defaultValue) {\n      const error = new Error('No valid default tab available')\n      onError?.(error)\n      return (\n        <div className='p-4 relative flex w-full flex-col text-center text-text-secondary' role='alert' aria-live='polite'>\n          <p>Unable to render tabs</p>\n        </div>\n      )\n    }\n  }\n\n  const handleValueChange = async (newValue: string) => {\n    if (onBeforeChange && onValueChange) {\n      const currentValue = isControlled ? (effectiveValue ?? '') : (defaultValue ?? '')\n      try {\n        const canChange = await onBeforeChange(newValue, currentValue)\n        if (canChange === false) return\n      } catch (error) {\n        onError?.(error instanceof Error ? error : new Error('Before change callback failed'))\n        return\n      }\n    }\n\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <div className='relative flex w-full flex-col'>\n      <TabsBase\n        aria-label={ariaLabel}\n        className={cn('relative w-full data-[orientation=vertical]:flex', variant, className)}\n        {...(isControlled ? { value: effectiveValue } : { defaultValue })}\n        orientation={orientation}\n        activationMode={activationMode}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        <TabsList\n          className={cn(\n            'inline-flex w-full items-center justify-between',\n            orientation === 'horizontal' && variant === 'default' && 'border-b border-tabs-border',\n            orientation === 'vertical' && variant === 'default' && 'm-0 py-1 relative h-auto w-auto flex-col items-stretch border-r border-tabs-border',\n            orientation === 'horizontal' && variant === 'enclosed' && 'rounded-lg p-1 relative border-0 bg-tabs-group-bg',\n            orientation === 'vertical' && variant === 'enclosed' && 'rounded-lg p-1 w-auto flex-col border-0 bg-tabs-group-bg',\n          )}\n          rightSlot={rightSlot}\n        >\n          {validTabs.map((tab) => (\n            <TabsTrigger\n              key={tab.key}\n              value={tab.key}\n              disabled={tab.disabled}\n              aria-label={tab['aria-label']}\n              aria-describedby={tab['aria-describedby']}\n              className={cn(\n                'font-semibold relative whitespace-nowrap transition-colors duration-200 ease-out',\n                orientation === 'horizontal' && variant === 'default' && 'py-2 px-4 hover:bg-tabs-bg--hover text-text-primary hover:text-accent',\n                orientation === 'vertical' && variant === 'default' && 'h-10 px-4 py-2 hover:bg-tabs-bg--hover flex items-center text-text-primary hover:text-accent data-[state=active]:text-accent',\n                orientation === 'horizontal' && variant === 'enclosed' && 'px-4 py-2 hover:bg-tabs-bg--hover z-[1] inline-flex items-center justify-center text-text-primary hover:text-accent data-[state=active]:text-accent',\n                orientation === 'vertical' && variant === 'enclosed' && 'px-4 py-2 hover:bg-tabs-bg--hover z-1 text-text-primary hover:text-accent data-[state=active]:text-accent',\n                'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-text-primary',\n              )}\n            >\n              {tab.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n        {!hideContent && (\n          <TabsContentContainer className={cn(orientation === 'vertical' && 'flex-1')}>\n            {validTabs.map((tab) => (\n              <TabsContent key={tab.key} value={tab.key} className={cn('text-text-primary focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', orientation === 'horizontal' && 'pb-4', orientation === 'vertical' && 'py-2 px-4')}>\n                {tab.children}\n              </TabsContent>\n            ))}\n          </TabsContentContainer>\n        )}\n      </TabsBase>\n    </div>\n  )\n}\n\nexport { TabsContent, TabsContentContainer, TabsList, TabsBase as TabsRoot, TabsTrigger }\n\nexport type { TabsBaseProps, TabsContentContainerProps, TabsContentProps, TabsListProps, TabsTriggerProps } from './TabsBase'\n\nexport type TabKeys<T extends TabValue[]> = T[number]['key']\nexport type TabValueWithKey<TKey extends string> = TabValue & { key: TKey }\n"],"mappings":";;;;;;;;AAoCA,MAAa,QAAQ,EACnB,iBAAiB,aACjB,WACA,WACA,cAAc,OACd,UAAU,OACV,gBACA,SACA,eACA,YACA,cAAc,cACd,WACA,YAAY,EAAE,EACd,OAAO,iBACP,UAAU,WACV,GAAG,YACY;AACf,KAAI,QACF,QACE,oBAAC,OAAD;EAAK,WAAU;EAAoE,MAAK;EAAS,aAAU;YACzG,oBAAC,KAAD,YAAG,iBAAiB;EAChB;CAIV,MAAM,YAAY,UAAU,QAAQ,QAA2C,IAAI,QAAQ,OAAU;CACrG,MAAM,eAAe,oBAAoB;AAEzC,KAAI,CAAC,kBAAkB,UAAwF,EAAE;AAE/G,4BAAU,IADQ,MAAM,+CACT,CAAC;AAEhB,SACE,oBAAC,OAAD;GAAK,WAAU;GAA8D,MAAK;GAAQ,aAAU;aAClG,oBAAC,KAAD,YAAG,0BAA0B;GACzB;;CAIV,MAAM,YAAY,WAAW,UAAU;CAGvC,IAAI;AACJ,KAAI,aACF,KAAI,UAAU,SAAS,gBAAgB,CACrC,kBAAiB;MACZ;AACL,UAAQ,KAAK,gBAAgB,gBAAgB,qDAAqD;AAClG,mBAAiB,UAAU;;CAK/B,IAAI;AACJ,KAAI,CAAC,cAAc;AACjB,iBAAe,cAAc,UAAU;AAEvC,MAAI,cAAc,CAAC,UAAU,SAAS,WAAW,EAAE;AACjD,WAAQ,KAAK,2BAA2B,WAAW,0BAA0B;AAC7E,kBAAe,UAAU;;AAG3B,MAAI,CAAC,cAAc;AAEjB,6BAAU,IADQ,MAAM,iCACT,CAAC;AAChB,UACE,oBAAC,OAAD;IAAK,WAAU;IAAoE,MAAK;IAAQ,aAAU;cACxG,oBAAC,KAAD,YAAG,yBAAyB;IACxB;;;CAKZ,MAAM,oBAAoB,OAAO,aAAqB;AACpD,MAAI,kBAAkB,eAAe;GACnC,MAAM,eAAe,eAAgB,kBAAkB,KAAO,gBAAgB;AAC9E,OAAI;AAEF,QAAI,MADoB,eAAe,UAAU,aAAa,KAC5C,MAAO;YAClB,OAAO;AACd,cAAU,iBAAiB,QAAQ,wBAAQ,IAAI,MAAM,gCAAgC,CAAC;AACtF;;;AAIJ,kBAAgB,SAAS;;AAG3B,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,UAAD;GACE,cAAY;GACZ,WAAW,GAAG,oDAAoD,SAAS,UAAU;GACrF,GAAK,eAAe,EAAE,OAAO,gBAAgB,GAAG,EAAE,cAAc;GACnD;GACG;GAChB,eAAe;GACf,GAAI;aAPN,CASE,oBAAC,UAAD;IACE,WAAW,GACT,mDACA,gBAAgB,gBAAgB,YAAY,aAAa,+BACzD,gBAAgB,cAAc,YAAY,aAAa,sFACvD,gBAAgB,gBAAgB,YAAY,cAAc,qDAC1D,gBAAgB,cAAc,YAAY,cAAc,2DACzD;IACU;cAEV,UAAU,KAAK,QACd,oBAAC,aAAD;KAEE,OAAO,IAAI;KACX,UAAU,IAAI;KACd,cAAY,IAAI;KAChB,oBAAkB,IAAI;KACtB,WAAW,GACT,oFACA,gBAAgB,gBAAgB,YAAY,aAAa,yEACzD,gBAAgB,cAAc,YAAY,aAAa,gIACvD,gBAAgB,gBAAgB,YAAY,cAAc,uJAC1D,gBAAgB,cAAc,YAAY,cAAc,6GACxD,iHACD;eAEA,IAAI;KACO,EAfP,IAAI,IAeG,CACd;IACO,GACV,CAAC,eACA,oBAAC,sBAAD;IAAsB,WAAW,GAAG,gBAAgB,cAAc,SAAS;cACxE,UAAU,KAAK,QACd,oBAAC,aAAD;KAA2B,OAAO,IAAI;KAAK,WAAW,GAAG,4HAA4H,gBAAgB,gBAAgB,QAAQ,gBAAgB,cAAc,YAAY;eACpQ,IAAI;KACO,EAFI,IAAI,IAER,CACd;IACmB,EAEhB;;EACP"}

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, getAriaProps, getErrorMessageId, getTextareaClasses, useFormFieldId, useFormFieldState, WarningMessage, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useRef, type ComponentProps, type CSSProperties, type FocusEvent, type Ref } from 'react'\nimport { useTextarea } from './TextareaUtils'\n\nexport type TextareaState = FormFieldState\n\ntype AutoCompleteValue = 'on' | 'off' | 'name' | 'email' | 'username' | 'street-address' | (string & {})\n\nexport type TextareaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {\n  className?: string | undefined\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string | undefined\n  label: string\n  labelClassName?: string\n  maxLength?: number | undefined\n  /** Number of message lines to reserve (default: 1). */\n  messageReserveLines?: number\n  /** Whether to keep message space reserved when hidden (default: false). */\n  messageReserveSpace?: boolean\n  name: string\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  onChange?: (value: string) => void\n  onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  placeholder?: string | undefined\n  required?: boolean\n  state?: TextareaState\n  value?: string | undefined\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nconst LOADING_ICON_CLASSES = 'absolute right-4 top-4'\n\nconst getAutoCompleteValue = (autoComplete?: string): AutoCompleteValue => {\n  if (autoComplete) return autoComplete\n  return 'off'\n}\n\nconst getCounterClasses = (currentLength: number, maxLength: number): string => {\n  const baseClasses = 'absolute bottom-2 right-3 text-xs pointer-events-none z-10 tabular-nums'\n  const colorClass = currentLength >= maxLength ? 'text-danger-400' : 'text-text-secondary'\n  return cn(baseClasses, colorClass)\n}\n\nexport const Textarea = (\n  allProps: TextareaProps & {\n    ref?: Ref<HTMLTextAreaElement>\n  },\n) => {\n  const {\n    ref,\n    autoComplete,\n    className,\n    defaultValue,\n    disabled,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    maxLength = 280,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    required,\n    state = 'default',\n    value: valueProp,\n    warningMessage,\n    ...props\n  } = allProps\n  const textareaId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(textareaId)\n  const warningMessageId = `${textareaId}-warning`\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const internalRef = useRef<HTMLTextAreaElement>(null)\n  const textareaRef = ref ?? internalRef\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const { handleFocus, handleBlur, handleChange, handlePaste } = useTextarea({\n    maxLength,\n    value,\n    onChange: setValue,\n    onFocus,\n    onBlur,\n  })\n\n  const { isDisabled, isLoading } = useFormFieldState(disabled, state)\n  const ariaProps = getAriaProps(state, props['aria-describedby'], required, messageId)\n  const currentLength = value?.length || 0\n  const textareaClasses = getTextareaClasses(state, className)\n\n  const getCSSCustomProperties = () => ({\n    '--textarea-min-height': '6rem',\n    '--textarea-max-height': '12rem',\n    '--textarea-border-radius': '0.5rem',\n  })\n\n  return (\n    <div className='w-full'>\n      {label && (\n        <Label\n          data-testid='spectral-textarea-label'\n          htmlFor={textareaId}\n          className={cn('mb-2 block', isDisabled && 'cursor-not-allowed opacity-50', labelClassName)}\n        >\n          {label}\n        </Label>\n      )}\n      <div className='relative'>\n        <textarea\n          aria-multiline='true'\n          autoComplete={getAutoCompleteValue(autoComplete)}\n          className={textareaClasses}\n          data-state={state}\n          data-testid='spectral-textarea'\n          disabled={isDisabled}\n          id={textareaId}\n          name={name}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          ref={textareaRef}\n          required={required}\n          spellCheck='true'\n          style={getCSSCustomProperties() as CSSProperties}\n          value={value}\n          {...ariaProps}\n          {...props}\n        />\n\n        {isLoading && (\n          <div\n            className={LOADING_ICON_CLASSES}\n            data-testid='spectral-textarea-loading-icon'\n          >\n            <LoaderIcon size={24} />\n          </div>\n        )}\n\n        <div\n          // oxlint will throw an error when passing ternaries in for aria-label\n          aria-label={currentLength + ' of ' + maxLength + ' characters used'}\n          aria-live='polite'\n          className={getCounterClasses(currentLength, maxLength)}\n          data-testid='spectral-textarea-counter'\n          role='status'\n        >\n          {currentLength}/{maxLength}\n        </div>\n      </div>\n\n      <ErrorMessage\n        dataTestId='spectral-textarea-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-textarea-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB,iBAA6C;AACzE,KAAI,aAAc,QAAO;AACzB,QAAO;;AAGT,MAAM,qBAAqB,eAAuB,cAA8B;AAG9E,QAAO,GAAG,2EADS,iBAAiB,YAAY,oBAAoB,sBAClC;;AAGpC,MAAa,YACX,aAGG;CACH,MAAM,EACJ,KACA,cACA,WACA,cACA,UACA,cACA,IACA,OACA,gBACA,YAAY,KACZ,sBAAsB,GACtB,sBAAsB,OACtB,MACA,QACA,UACA,SACA,aACA,UACA,QAAQ,WACR,OAAO,WACP,gBACA,GAAG,UACD;CACJ,MAAM,aAAa,eAAe,IAAI,KAAK;CAC3C,MAAM,iBAAiB,kBAAkB,WAAW;CACpD,MAAM,mBAAmB,GAAG,WAAW;CACvC,MAAM,YAAY,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CAClH,MAAM,cAAc,OAA4B,KAAK;CACrD,MAAM,cAAc,OAAO;CAE3B,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP,cAH6B,OAAO,iBAAiB,WAAW,eAAe,iBAAiB,UAAa,iBAAiB,OAAO,OAAO,aAAa,GAAG;EAI5J;EACD,CAAC;CAEF,MAAM,EAAE,aAAa,YAAY,cAAc,gBAAgB,YAAY;EACzE;EACA;EACA,UAAU;EACV;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,cAAc,kBAAkB,UAAU,MAAM;CACpE,MAAM,YAAY,aAAa,OAAO,MAAM,qBAAqB,UAAU,UAAU;CACrF,MAAM,gBAAgB,OAAO,UAAU;CACvC,MAAM,kBAAkB,mBAAmB,OAAO,UAAU;CAE5D,MAAM,gCAAgC;EACpC,yBAAyB;EACzB,yBAAyB;EACzB,4BAA4B;EAC7B;AAED,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,OAAD;IACE,eAAY;IACZ,SAAS;IACT,WAAW,GAAG,cAAc,cAAc,iCAAiC,eAAe;cAEzF;IACK;GAEV,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,YAAD;MACE,kBAAe;MACf,cAAc,qBAAqB,aAAa;MAChD,WAAW;MACX,cAAY;MACZ,eAAY;MACZ,UAAU;MACV,IAAI;MACE;MACN,QAAQ;MACR,UAAU;MACV,SAAS;MACT,SAAS;MACI;MACb,KAAK;MACK;MACV,YAAW;MACX,OAAO,wBAAwB;MACxB;MACP,GAAI;MACJ,GAAI;MACJ;KAED,aACC,oBAAC,OAAD;MACE,WAAW;MACX,eAAY;gBAEZ,oBAAC,YAAD,EAAY,MAAM,IAAM;MACpB;KAGR,qBAAC,OAAD;MAEE,cAAY,gBAAgB,SAAS,YAAY;MACjD,aAAU;MACV,WAAW,kBAAkB,eAAe,UAAU;MACtD,eAAY;MACZ,MAAK;gBANP;OAQG;OAAc;OAAE;OACb;;KACF;;GAEN,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,UAAU,eAAe;IACvB;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACF,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAY,iBAAiB;IAC3B;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACE;;;AAGV,SAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, getAriaProps, getErrorMessageId, getTextareaClasses, useFormFieldId, useFormFieldState, WarningMessage, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useRef, type ComponentProps, type CSSProperties, type FocusEvent, type Ref } from 'react'\nimport { useTextarea } from './TextareaUtils'\n\nexport type TextareaState = FormFieldState\n\ntype AutoCompleteValue = 'on' | 'off' | 'name' | 'email' | 'username' | 'street-address' | (string & {})\n\nexport type TextareaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {\n  className?: string | undefined\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string | undefined\n  label: string\n  labelClassName?: string\n  maxLength?: number | undefined\n  /** Number of message lines to reserve (default: 1). */\n  messageReserveLines?: number\n  /** Whether to keep message space reserved when hidden (default: false). */\n  messageReserveSpace?: boolean\n  name: string\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  onChange?: (value: string) => void\n  onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  placeholder?: string | undefined\n  required?: boolean\n  state?: TextareaState\n  value?: string | undefined\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nconst LOADING_ICON_CLASSES = 'absolute right-4 top-4'\n\nconst getAutoCompleteValue = (autoComplete?: string): AutoCompleteValue => {\n  if (autoComplete) return autoComplete\n  return 'off'\n}\n\nconst getCounterClasses = (currentLength: number, maxLength: number): string => {\n  const baseClasses = 'absolute bottom-2 right-3 text-xs pointer-events-none z-10 tabular-nums'\n  const colorClass = currentLength >= maxLength ? 'text-danger-400' : 'text-text-secondary'\n  return cn(baseClasses, colorClass)\n}\n\nexport const Textarea = (\n  allProps: TextareaProps & {\n    ref?: Ref<HTMLTextAreaElement>\n  },\n) => {\n  const {\n    ref,\n    autoComplete,\n    className,\n    defaultValue,\n    disabled,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    maxLength = 280,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    required,\n    state = 'default',\n    value: valueProp,\n    warningMessage,\n    ...props\n  } = allProps\n  const textareaId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(textareaId)\n  const warningMessageId = `${textareaId}-warning`\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const internalRef = useRef<HTMLTextAreaElement>(null)\n  const textareaRef = ref ?? internalRef\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const { handleFocus, handleBlur, handleChange, handlePaste } = useTextarea({\n    maxLength,\n    value,\n    onChange: setValue,\n    onFocus,\n    onBlur,\n  })\n\n  const { isDisabled, isLoading } = useFormFieldState(disabled, state)\n  const ariaProps = getAriaProps(state, props['aria-describedby'], required, messageId)\n  const currentLength = value?.length || 0\n  const textareaClasses = getTextareaClasses(state, className)\n\n  const getCSSCustomProperties = () => ({\n    '--textarea-min-height': '6rem',\n    '--textarea-max-height': '12rem',\n    '--textarea-border-radius': '0.5rem',\n  })\n\n  return (\n    <div className='w-full'>\n      {label && (\n        <Label\n          data-testid='spectral-textarea-label'\n          htmlFor={textareaId}\n          className={cn('mb-2 block', isDisabled && 'cursor-not-allowed opacity-50', labelClassName)}\n        >\n          {label}\n        </Label>\n      )}\n      <div className='relative'>\n        <textarea\n          aria-multiline='true'\n          autoComplete={getAutoCompleteValue(autoComplete)}\n          className={textareaClasses}\n          data-state={state}\n          data-testid='spectral-textarea'\n          disabled={isDisabled}\n          id={textareaId}\n          name={name}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          ref={textareaRef}\n          required={required}\n          spellCheck='true'\n          style={getCSSCustomProperties() as CSSProperties}\n          value={value}\n          {...ariaProps}\n          {...props}\n        />\n\n        {isLoading && (\n          <div className={LOADING_ICON_CLASSES} data-testid='spectral-textarea-loading-icon'>\n            <LoaderIcon size={24} />\n          </div>\n        )}\n\n        <div\n          // oxlint will throw an error when passing ternaries in for aria-label\n          aria-label={currentLength + ' of ' + maxLength + ' characters used'}\n          aria-live='polite'\n          className={getCounterClasses(currentLength, maxLength)}\n          data-testid='spectral-textarea-counter'\n          role='status'\n        >\n          {currentLength}/{maxLength}\n        </div>\n      </div>\n\n      <ErrorMessage\n        dataTestId='spectral-textarea-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-textarea-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB,iBAA6C;AACzE,KAAI,aAAc,QAAO;AACzB,QAAO;;AAGT,MAAM,qBAAqB,eAAuB,cAA8B;AAG9E,QAAO,GAAG,2EADS,iBAAiB,YAAY,oBAAoB,sBAClC;;AAGpC,MAAa,YACX,aAGG;CACH,MAAM,EACJ,KACA,cACA,WACA,cACA,UACA,cACA,IACA,OACA,gBACA,YAAY,KACZ,sBAAsB,GACtB,sBAAsB,OACtB,MACA,QACA,UACA,SACA,aACA,UACA,QAAQ,WACR,OAAO,WACP,gBACA,GAAG,UACD;CACJ,MAAM,aAAa,eAAe,IAAI,KAAK;CAC3C,MAAM,iBAAiB,kBAAkB,WAAW;CACpD,MAAM,mBAAmB,GAAG,WAAW;CACvC,MAAM,YAAY,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CAClH,MAAM,cAAc,OAA4B,KAAK;CACrD,MAAM,cAAc,OAAO;CAE3B,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP,cAH6B,OAAO,iBAAiB,WAAW,eAAe,iBAAiB,UAAa,iBAAiB,OAAO,OAAO,aAAa,GAAG;EAI5J;EACD,CAAC;CAEF,MAAM,EAAE,aAAa,YAAY,cAAc,gBAAgB,YAAY;EACzE;EACA;EACA,UAAU;EACV;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,cAAc,kBAAkB,UAAU,MAAM;CACpE,MAAM,YAAY,aAAa,OAAO,MAAM,qBAAqB,UAAU,UAAU;CACrF,MAAM,gBAAgB,OAAO,UAAU;CACvC,MAAM,kBAAkB,mBAAmB,OAAO,UAAU;CAE5D,MAAM,gCAAgC;EACpC,yBAAyB;EACzB,yBAAyB;EACzB,4BAA4B;EAC7B;AAED,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,OAAD;IACE,eAAY;IACZ,SAAS;IACT,WAAW,GAAG,cAAc,cAAc,iCAAiC,eAAe;cAEzF;IACK;GAEV,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,YAAD;MACE,kBAAe;MACf,cAAc,qBAAqB,aAAa;MAChD,WAAW;MACX,cAAY;MACZ,eAAY;MACZ,UAAU;MACV,IAAI;MACE;MACN,QAAQ;MACR,UAAU;MACV,SAAS;MACT,SAAS;MACI;MACb,KAAK;MACK;MACV,YAAW;MACX,OAAO,wBAAwB;MACxB;MACP,GAAI;MACJ,GAAI;MACJ;KAED,aACC,oBAAC,OAAD;MAAK,WAAW;MAAsB,eAAY;gBAChD,oBAAC,YAAD,EAAY,MAAM,IAAM;MACpB;KAGR,qBAAC,OAAD;MAEE,cAAY,gBAAgB,SAAS,YAAY;MACjD,aAAU;MACV,WAAW,kBAAkB,eAAe,UAAU;MACtD,eAAY;MACZ,MAAK;gBANP;OAQG;OAAc;OAAE;OACb;;KACF;;GAEN,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,UAAU,eAAe;IACvB;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACF,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAY,iBAAiB;IAC3B;IACrB,qBAAqB,uBAAuB,UAAU;IACtD;GACE;;;AAGV,SAAS,cAAc"}

package/dist/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","names":[],"sources":["../src/components/Toast/Toast.tsx"],"mappings":";;;;;;;;KAMK,YAAA;AAAA,KACA,aAAA;AAAA,UAEY,UAAA,SAAmB,YAAA,QAAoB,aAAA;EACtD,SAAA;EACA,kBAAA;EACA,UAAA;EACA,OAAA,YAAmB,SAAA;EACnB,QAAA;EACA,IAAA,GAAO,SAAA;EACP,EAAA;EACA,WAAA;EACA,QAAA,GAAW,aAAA;EACX,OAAA,GAAU,YAAA;AAAA;AAAA,UAGK,YAAA,SAAqB,IAAA,CAAK,cAAA;EACzC,GAAA;EACA,MAAA;EACA,QAAA,GAAW,aAAA;EACX,aAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;IAajB,iCAAA,CAAA,SAAA;AAAA,cA8FW,KAAA;EAAA;;;;;;;KAlD+G,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;OAnB5B,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;cAyEzG,KAAA;EAAK,SAAA;EAAA,kBAAA;EAAA,UAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,WAAA;EAAA,QAAA;EAAA;AAAA,GAzB4H,UAAA;qBA0BzH,IAAA,CAAK,UAAA;mBACP,IAAA,CAAK,UAAA;kBACN,IAAA,CAAK,UAAA;qBACF,IAAA,CAAK,UAAA;AAAA"}
+{"version":3,"file":"Toast.d.ts","names":[],"sources":["../src/components/Toast/Toast.tsx"],"mappings":";;;;;;;;KAMK,YAAA;AAAA,KACA,aAAA;AAAA,UAEY,UAAA,SAAmB,YAAA,QAAoB,aAAA;EACtD,SAAA;EACA,kBAAA;EACA,UAAA;EACA,OAAA,YAAmB,SAAA;EACnB,QAAA;EACA,IAAA,GAAO,SAAA;EACP,EAAA;EACA,WAAA;EACA,QAAA,GAAW,aAAA;EACX,OAAA,GAAU,YAAA;AAAA;AAAA,UAGK,YAAA,SAAqB,IAAA,CAAK,cAAA;EACzC,GAAA;EACA,MAAA;EACA,QAAA,GAAW,aAAA;EACX,aAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;IAajB,iCAAA,CAAA,SAAA;AAAA,cAuEW,KAAA;EAAA;;;;;;;KA3B+G,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;OAnB5B,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;cAkDzG,KAAA;EAAK,SAAA;EAAA,kBAAA;EAAA,UAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,WAAA;EAAA,QAAA;EAAA;AAAA,GAZ4H,UAAA;qBAazH,IAAA,CAAK,UAAA;mBACP,IAAA,CAAK,UAAA;kBACN,IAAA,CAAK,UAAA;qBACF,IAAA,CAAK,UAAA;AAAA"}

package/dist/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["SonnerToaster","sonnerToast"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import { CheckSquareIcon, CloseCircleIcon, InfoIcon, WarningIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ReactNode } from 'react'\nimport { toast as sonnerToast, Toaster as SonnerToaster, type ToasterProps as SonnerToasterProps } from 'sonner'\n\ntype ToastVariant = 'default' | 'success' | 'error' | 'info' | 'warning'\ntype ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends VariantProps<typeof toastVariants> {\n  className?: string\n  containerAriaLabel?: string\n  dataTestId?: string\n  message?: string | ReactNode\n  duration?: number\n  icon?: ReactNode\n  id?: string | number\n  onAutoClose?: () => void\n  position?: ToastPosition\n  variant?: ToastVariant\n}\n\nexport interface ToasterProps extends Omit<SonnerToasterProps, 'toastOptions'> {\n  gap?: number\n  offset?: number | string\n  position?: ToastPosition\n  visibleToasts?: number\n}\n\nconst toastVariants = cva('rounded-md px-4 py-3 text-sm gap-3 shadow-lg flex max-w-[420px] min-w-[300px] items-start border', {\n  variants: {\n    variant: {\n      default: 'border-toast-border bg-toast-bg text-toast-text',\n      success: 'border-toast-success-border bg-toast-success-bg text-toast-success-text',\n      error: 'border-toast-danger-border bg-toast-danger-bg text-toast-danger-text',\n      info: 'border-toast-info-border bg-toast-info-bg text-toast-info-text',\n      warning: 'border-toast-warning-border bg-toast-warning-bg text-toast-warning-text',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst messageVariants = cva('mt-1 text-sm opacity-90', {\n  variants: {\n    variant: {\n      default: 'text-toast-text',\n      success: 'text-toast-success-text',\n      error: 'text-toast-danger-text',\n      info: 'text-toast-info-text',\n      warning: 'text-toast-warning-text',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst variantIcons: Record<ToastVariant, ReactNode> = {\n  default: null,\n  success: <CheckSquareIcon className='size-5 shrink-0 text-toast-success-icon' />,\n  info: <InfoIcon className='size-5 shrink-0 text-toast-info-icon' />,\n  warning: <WarningIcon className='size-5 shrink-0 text-toast-warning-icon' />,\n  error: <CloseCircleIcon className='size-5 shrink-0 text-toast-danger-icon' />,\n}\n\nconst ToastProvider = ({ gap = 14, offset = 32, position = 'bottom-right', visibleToasts = 3, ...props }: ToasterProps) => {\n  return (\n    <SonnerToaster\n      position={position}\n      visibleToasts={visibleToasts}\n      offset={offset}\n      gap={gap}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: 'spectral-toast',\n        },\n      }}\n      {...props}\n    />\n  )\n}\nToastProvider.displayName = 'Toast.Provider'\n\nconst ToastComponent = ({ className, containerAriaLabel = 'Notification', dataTestId, icon, message, variant = 'default' }: ToastProps) => {\n  const resolvedVariant = variant ?? 'default'\n  const displayIcon = icon ?? variantIcons[resolvedVariant]\n\n  return (\n    <div\n      aria-label={containerAriaLabel}\n      className={cn(toastVariants({ variant: resolvedVariant }), className)}\n      data-variant={resolvedVariant}\n      data-testid={dataTestId ?? `spectral-toast-${resolvedVariant}`}\n      role='status'\n      aria-live='polite'\n    >\n      {displayIcon && (\n        <div\n          className='mt-0.5'\n          aria-hidden='true'\n        >\n          {displayIcon}\n        </div>\n      )}\n      <div className='flex flex-col'>\n        <p className={messageVariants({ variant: resolvedVariant })}>{message}</p>\n      </div>\n    </div>\n  )\n}\nToastComponent.displayName = 'Toast'\n\nconst showToast = ({ className, containerAriaLabel, dataTestId, duration = 4000, icon, message, onAutoClose, position, variant = 'default' }: ToastProps) => {\n  return sonnerToast.custom(\n    (id) => (\n      <ToastComponent\n        className={className}\n        containerAriaLabel={containerAriaLabel}\n        dataTestId={dataTestId}\n        icon={icon}\n        id={id}\n        message={message}\n        variant={variant}\n      />\n    ),\n    {\n      duration,\n      onAutoClose,\n      position,\n    },\n  )\n}\n\nexport const Toast = Object.assign(ToastComponent, {\n  Provider: ToastProvider,\n})\n\nexport const toast = Object.assign(showToast, {\n  success: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'success' }),\n  error: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'error' }),\n  info: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'info' }),\n  warning: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'warning' }),\n})\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,gBAAgB,IAAI,oGAAoG;CAC5H,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,OAAO;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,kBAAkB,IAAI,2BAA2B;CACrD,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,OAAO;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,eAAgD;CACpD,SAAS;CACT,SAAS,oBAAC,iBAAD,EAAiB,WAAU,2CAA4C;CAChF,MAAM,oBAAC,UAAD,EAAU,WAAU,wCAAyC;CACnE,SAAS,oBAAC,aAAD,EAAa,WAAU,2CAA4C;CAC5E,OAAO,oBAAC,iBAAD,EAAiB,WAAU,0CAA2C;CAC9E;AAED,MAAM,iBAAiB,EAAE,MAAM,IAAI,SAAS,IAAI,WAAW,gBAAgB,gBAAgB,GAAG,GAAG,YAA0B;AACzH,QACE,oBAACA,SAAD;EACY;EACK;EACP;EACH;EACL,cAAc;GACZ,UAAU;GACV,YAAY,EACV,OAAO,kBACR;GACF;EACD,GAAI;EACJ;;AAGN,cAAc,cAAc;AAE5B,MAAM,kBAAkB,EAAE,WAAW,qBAAqB,gBAAgB,YAAY,MAAM,SAAS,UAAU,gBAA4B;CACzI,MAAM,kBAAkB,WAAW;CACnC,MAAM,cAAc,QAAQ,aAAa;AAEzC,QACE,qBAAC,OAAD;EACE,cAAY;EACZ,WAAW,GAAG,cAAc,EAAE,SAAS,iBAAiB,CAAC,EAAE,UAAU;EACrE,gBAAc;EACd,eAAa,cAAc,kBAAkB;EAC7C,MAAK;EACL,aAAU;YANZ,CAQG,eACC,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;aAEX;GACG,GAER,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,KAAD;IAAG,WAAW,gBAAgB,EAAE,SAAS,iBAAiB,CAAC;cAAG;IAAY;GACtE,EACF;;;AAGV,eAAe,cAAc;AAE7B,MAAM,aAAa,EAAE,WAAW,oBAAoB,YAAY,WAAW,KAAM,MAAM,SAAS,aAAa,UAAU,UAAU,gBAA4B;AAC3J,QAAOC,QAAY,QAChB,OACC,oBAAC,gBAAD;EACa;EACS;EACR;EACN;EACF;EACK;EACA;EACT,GAEJ;EACE;EACA;EACA;EACD,CACF;;AAGH,MAAa,QAAQ,OAAO,OAAO,gBAAgB,EACjD,UAAU,eACX,CAAC;AAEF,MAAa,QAAQ,OAAO,OAAO,WAAW;CAC5C,UAAU,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAW,CAAC;CAChG,QAAQ,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAS,CAAC;CAC5F,OAAO,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAQ,CAAC;CAC1F,UAAU,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAW,CAAC;CACjG,CAAC"}
+{"version":3,"file":"Toast.js","names":["SonnerToaster","sonnerToast"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import { CheckSquareIcon, CloseCircleIcon, InfoIcon, WarningIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ReactNode } from 'react'\nimport { toast as sonnerToast, Toaster as SonnerToaster, type ToasterProps as SonnerToasterProps } from 'sonner'\n\ntype ToastVariant = 'default' | 'success' | 'error' | 'info' | 'warning'\ntype ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends VariantProps<typeof toastVariants> {\n  className?: string\n  containerAriaLabel?: string\n  dataTestId?: string\n  message?: string | ReactNode\n  duration?: number\n  icon?: ReactNode\n  id?: string | number\n  onAutoClose?: () => void\n  position?: ToastPosition\n  variant?: ToastVariant\n}\n\nexport interface ToasterProps extends Omit<SonnerToasterProps, 'toastOptions'> {\n  gap?: number\n  offset?: number | string\n  position?: ToastPosition\n  visibleToasts?: number\n}\n\nconst toastVariants = cva('rounded-md px-4 py-3 text-sm gap-3 shadow-lg flex max-w-[420px] min-w-[300px] items-start border', {\n  variants: {\n    variant: {\n      default: 'border-toast-border bg-toast-bg text-toast-text',\n      success: 'border-toast-success-border bg-toast-success-bg text-toast-success-text',\n      error: 'border-toast-danger-border bg-toast-danger-bg text-toast-danger-text',\n      info: 'border-toast-info-border bg-toast-info-bg text-toast-info-text',\n      warning: 'border-toast-warning-border bg-toast-warning-bg text-toast-warning-text',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst messageVariants = cva('mt-1 text-sm opacity-90', {\n  variants: {\n    variant: {\n      default: 'text-toast-text',\n      success: 'text-toast-success-text',\n      error: 'text-toast-danger-text',\n      info: 'text-toast-info-text',\n      warning: 'text-toast-warning-text',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst variantIcons: Record<ToastVariant, ReactNode> = {\n  default: null,\n  success: <CheckSquareIcon className='size-5 shrink-0 text-toast-success-icon' />,\n  info: <InfoIcon className='size-5 shrink-0 text-toast-info-icon' />,\n  warning: <WarningIcon className='size-5 shrink-0 text-toast-warning-icon' />,\n  error: <CloseCircleIcon className='size-5 shrink-0 text-toast-danger-icon' />,\n}\n\nconst ToastProvider = ({ gap = 14, offset = 32, position = 'bottom-right', visibleToasts = 3, ...props }: ToasterProps) => {\n  return (\n    <SonnerToaster\n      position={position}\n      visibleToasts={visibleToasts}\n      offset={offset}\n      gap={gap}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: 'spectral-toast',\n        },\n      }}\n      {...props}\n    />\n  )\n}\nToastProvider.displayName = 'Toast.Provider'\n\nconst ToastComponent = ({ className, containerAriaLabel = 'Notification', dataTestId, icon, message, variant = 'default' }: ToastProps) => {\n  const resolvedVariant = variant ?? 'default'\n  const displayIcon = icon ?? variantIcons[resolvedVariant]\n\n  return (\n    <div aria-label={containerAriaLabel} className={cn(toastVariants({ variant: resolvedVariant }), className)} data-variant={resolvedVariant} data-testid={dataTestId ?? `spectral-toast-${resolvedVariant}`} role='status' aria-live='polite'>\n      {displayIcon && (\n        <div className='mt-0.5' aria-hidden='true'>\n          {displayIcon}\n        </div>\n      )}\n      <div className='flex flex-col'>\n        <p className={messageVariants({ variant: resolvedVariant })}>{message}</p>\n      </div>\n    </div>\n  )\n}\nToastComponent.displayName = 'Toast'\n\nconst showToast = ({ className, containerAriaLabel, dataTestId, duration = 4000, icon, message, onAutoClose, position, variant = 'default' }: ToastProps) => {\n  return sonnerToast.custom((id) => <ToastComponent className={className} containerAriaLabel={containerAriaLabel} dataTestId={dataTestId} icon={icon} id={id} message={message} variant={variant} />, {\n    duration,\n    onAutoClose,\n    position,\n  })\n}\n\nexport const Toast = Object.assign(ToastComponent, {\n  Provider: ToastProvider,\n})\n\nexport const toast = Object.assign(showToast, {\n  success: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'success' }),\n  error: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'error' }),\n  info: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'info' }),\n  warning: (options: Omit<ToastProps, 'variant'>) => showToast({ ...options, variant: 'warning' }),\n})\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,gBAAgB,IAAI,oGAAoG;CAC5H,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,OAAO;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,kBAAkB,IAAI,2BAA2B;CACrD,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,OAAO;EACP,MAAM;EACN,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,eAAgD;CACpD,SAAS;CACT,SAAS,oBAAC,iBAAD,EAAiB,WAAU,2CAA4C;CAChF,MAAM,oBAAC,UAAD,EAAU,WAAU,wCAAyC;CACnE,SAAS,oBAAC,aAAD,EAAa,WAAU,2CAA4C;CAC5E,OAAO,oBAAC,iBAAD,EAAiB,WAAU,0CAA2C;CAC9E;AAED,MAAM,iBAAiB,EAAE,MAAM,IAAI,SAAS,IAAI,WAAW,gBAAgB,gBAAgB,GAAG,GAAG,YAA0B;AACzH,QACE,oBAACA,SAAD;EACY;EACK;EACP;EACH;EACL,cAAc;GACZ,UAAU;GACV,YAAY,EACV,OAAO,kBACR;GACF;EACD,GAAI;EACJ;;AAGN,cAAc,cAAc;AAE5B,MAAM,kBAAkB,EAAE,WAAW,qBAAqB,gBAAgB,YAAY,MAAM,SAAS,UAAU,gBAA4B;CACzI,MAAM,kBAAkB,WAAW;CACnC,MAAM,cAAc,QAAQ,aAAa;AAEzC,QACE,qBAAC,OAAD;EAAK,cAAY;EAAoB,WAAW,GAAG,cAAc,EAAE,SAAS,iBAAiB,CAAC,EAAE,UAAU;EAAE,gBAAc;EAAiB,eAAa,cAAc,kBAAkB;EAAmB,MAAK;EAAS,aAAU;YAAnO,CACG,eACC,oBAAC,OAAD;GAAK,WAAU;GAAS,eAAY;aACjC;GACG,GAER,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,KAAD;IAAG,WAAW,gBAAgB,EAAE,SAAS,iBAAiB,CAAC;cAAG;IAAY;GACtE,EACF;;;AAGV,eAAe,cAAc;AAE7B,MAAM,aAAa,EAAE,WAAW,oBAAoB,YAAY,WAAW,KAAM,MAAM,SAAS,aAAa,UAAU,UAAU,gBAA4B;AAC3J,QAAOC,QAAY,QAAQ,OAAO,oBAAC,gBAAD;EAA2B;EAA+B;EAAgC;EAAkB;EAAU;EAAa;EAAkB;EAAW,GAAE;EAClM;EACA;EACA;EACD,CAAC;;AAGJ,MAAa,QAAQ,OAAO,OAAO,gBAAgB,EACjD,UAAU,eACX,CAAC;AAEF,MAAa,QAAQ,OAAO,OAAO,WAAW;CAC5C,UAAU,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAW,CAAC;CAChG,QAAQ,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAS,CAAC;CAC5F,OAAO,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAQ,CAAC;CAC1F,UAAU,YAAyC,UAAU;EAAE,GAAG;EAAS,SAAS;EAAW,CAAC;CACjG,CAAC"}

package/dist/Toggle/ToggleBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleBase.js","names":[],"sources":["../../src/components/Toggle/ToggleBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { useCallback, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> &\n  Omit<AsChildProp, 'asChild'> & {\n    asChild?: boolean\n    defaultPressed?: boolean\n    disabled?: boolean\n    onPressedChange?: (pressed: boolean) => void\n    pressed?: boolean\n  }\n\nexport const ToggleBase = function Toggle({\n  asChild = false,\n  children,\n  className,\n  defaultPressed = false,\n  disabled,\n  onClick,\n  onKeyDown,\n  onPressedChange,\n  pressed: pressedProp,\n  ref,\n  ...rest\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const [pressed, setPressed] = useUncontrolledState<boolean>({\n    defaultValue: defaultPressed,\n    onChange: onPressedChange,\n    value: pressedProp,\n  })\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    setPressed(!pressed)\n  }, [disabled, pressed, setPressed])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e as KeyboardEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onClick) onClick(e as MouseEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const sharedProps = {\n    className,\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    'aria-disabled': disabled ? true : undefined,\n    'aria-pressed': pressed,\n    'data-state': pressed ? 'on' : 'off',\n    'data-disabled': disabled ? true : undefined,\n  }\n\n  if (asChild) {\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- div wrapper required for Slot primitive to merge props with child\n        role='button'\n        tabIndex={disabled ? -1 : 0}\n        {...(rest as HTMLAttributes<HTMLDivElement>)}\n        {...sharedProps}\n      >\n        <Slot>{children}</Slot>\n      </div>\n    )\n  }\n\n  return (\n    <button\n      {...rest}\n      {...sharedProps}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      type='button'\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,aAAa,SAAS,OAAO,EACxC,UAAU,OACV,UACA,WACA,iBAAiB,OACjB,UACA,SACA,WACA,iBACA,SAAS,aACT,KACA,GAAG,QAGF;CACD,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,cAAc;EACd,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAU;AACd,aAAW,CAAC,QAAQ;IACnB;EAAC;EAAU;EAAS;EAAW,CAAC;CAEnC,MAAM,gBAAgB,aACnB,MAAyD;AACxD,MAAI,UAAW,WAAU,EAAsC;AAC/D,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc;;IAGlB,CAAC,cAAc,UAAU,CAC1B;CAWD,MAAM,cAAc;EAClB;EACA,SAXkB,aACjB,MAAsD;AACrD,OAAI,QAAS,SAAQ,EAAmC;AACxD,OAAI,EAAE,iBAAkB;AACxB,iBAAc;KAEhB,CAAC,cAAc,QAAQ,CAKH;EACpB,WAAW;EACX,iBAAiB,WAAW,OAAO;EACnC,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,iBAAiB,WAAW,OAAO;EACpC;AAED,KAAI,QACF,QACE,oBAAC,OAAD;EACO;EAEL,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,GAAK;EACL,GAAI;YAEJ,oBAAC,MAAD,EAAO,UAAgB;EACnB;AAIV,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,GAAI;EACM;EACL;EACL,MAAK;EAEJ;EACM"}
+{"version":3,"file":"ToggleBase.js","names":[],"sources":["../../src/components/Toggle/ToggleBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { useCallback, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> &\n  Omit<AsChildProp, 'asChild'> & {\n    asChild?: boolean\n    defaultPressed?: boolean\n    disabled?: boolean\n    onPressedChange?: (pressed: boolean) => void\n    pressed?: boolean\n  }\n\nexport const ToggleBase = function Toggle({\n  asChild = false,\n  children,\n  className,\n  defaultPressed = false,\n  disabled,\n  onClick,\n  onKeyDown,\n  onPressedChange,\n  pressed: pressedProp,\n  ref,\n  ...rest\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const [pressed, setPressed] = useUncontrolledState<boolean>({\n    defaultValue: defaultPressed,\n    onChange: onPressedChange,\n    value: pressedProp,\n  })\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    setPressed(!pressed)\n  }, [disabled, pressed, setPressed])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e as KeyboardEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n      if (onClick) onClick(e as MouseEvent<HTMLButtonElement>)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const sharedProps = {\n    className,\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    'aria-disabled': disabled ? true : undefined,\n    'aria-pressed': pressed,\n    'data-state': pressed ? 'on' : 'off',\n    'data-disabled': disabled ? true : undefined,\n  }\n\n  if (asChild) {\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- div wrapper required for Slot primitive to merge props with child\n        role='button'\n        tabIndex={disabled ? -1 : 0}\n        {...(rest as HTMLAttributes<HTMLDivElement>)}\n        {...sharedProps}\n      >\n        <Slot>{children}</Slot>\n      </div>\n    )\n  }\n\n  return (\n    <button {...rest} {...sharedProps} disabled={disabled} ref={ref as Ref<HTMLButtonElement>} type='button'>\n      {children}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,aAAa,SAAS,OAAO,EACxC,UAAU,OACV,UACA,WACA,iBAAiB,OACjB,UACA,SACA,WACA,iBACA,SAAS,aACT,KACA,GAAG,QAGF;CACD,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,cAAc;EACd,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAU;AACd,aAAW,CAAC,QAAQ;IACnB;EAAC;EAAU;EAAS;EAAW,CAAC;CAEnC,MAAM,gBAAgB,aACnB,MAAyD;AACxD,MAAI,UAAW,WAAU,EAAsC;AAC/D,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc;;IAGlB,CAAC,cAAc,UAAU,CAC1B;CAWD,MAAM,cAAc;EAClB;EACA,SAXkB,aACjB,MAAsD;AACrD,OAAI,QAAS,SAAQ,EAAmC;AACxD,OAAI,EAAE,iBAAkB;AACxB,iBAAc;KAEhB,CAAC,cAAc,QAAQ,CAKH;EACpB,WAAW;EACX,iBAAiB,WAAW,OAAO;EACnC,gBAAgB;EAChB,cAAc,UAAU,OAAO;EAC/B,iBAAiB,WAAW,OAAO;EACpC;AAED,KAAI,QACF,QACE,oBAAC,OAAD;EACO;EAEL,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,GAAK;EACL,GAAI;YAEJ,oBAAC,MAAD,EAAO,UAAgB;EACnB;AAIV,QACE,oBAAC,UAAD;EAAQ,GAAI;EAAM,GAAI;EAAuB;EAAe;EAA+B,MAAK;EAC7F;EACM"}

package/dist/Toggle.d.ts

@@ -12,7 +12,7 @@ type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggl
   activeTextColor?: ActiveTextColor;
 };
 declare const toggleVariants: (props?: ({
-  variant?: "default" | "outline" | "separated" | null | undefined;
+  variant?: "default" | "divided" | "outline" | "separated" | null | undefined;
   size?: "default" | "lg" | "sm" | null | undefined;
   layout?: "default" | "expanded" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;

package/dist/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"mappings":";;;;;;;;;KASY,WAAA,GAAc,cAAA,QAAsB,UAAA,IAC9C,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,eAAA;AAAA;AAAA,cAGT,cAAA,GAAc,KAAA;;;;IAyB1B,iCAAA,CAAA,SAAA;AAAA,cAEY,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,eAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAWhB,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Toggle.d.ts","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"mappings":";;;;;;;;;KASY,WAAA,GAAc,cAAA,QAAsB,UAAA,IAC9C,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,eAAA;AAAA;AAAA,cAGT,cAAA,GAAc,KAAA;;;;IA8B1B,iCAAA,CAAA,SAAA;AAAA,cAEY,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,eAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAWhB,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Toggle.js

@@ -7,12 +7,17 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/Toggle/Toggle.tsx
-const toggleVariants = cva(`gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active aria-pressed:text-toggle-text--active data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
+const toggleVariants = cva(`gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer
+  hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent
+  active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active
+  aria-pressed:text-toggle-text--active data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=on]:border-toggle-border--active
+  data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
 			default: "border-toggle-border hover:border-toggle-border--hover",
 			outline: "border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover",
-			separated: "border-toggle-border hover:border-toggle-border--hover aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active"
+			divided: "border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover",
+			separated: "border-toggle-border hover:border-toggle-border--hover aria-pressed:border-toggle-border--active data-[state=on]:border-toggle-border--active aria-pressed:bg-toggle-bg--active data-[state=on]:bg-toggle-bg--active"
 		},
 		size: {
 			default: `h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4`,

package/dist/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type Ref } from 'react'\nimport { ToggleBase } from './ToggleBase'\n\nexport { getActiveColorStyle }\nexport type { ActiveColor, ActiveTextColor }\n\nexport type ToggleProps = ComponentProps<typeof ToggleBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const toggleVariants = cva(\n  `gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active aria-pressed:text-toggle-text--active data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: 'border-toggle-border hover:border-toggle-border--hover',\n        outline: 'border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover',\n        separated: 'border-toggle-border hover:border-toggle-border--hover aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active data-[state=on]:border-toggle-border--active data-[state=on]:bg-toggle-bg--active',\n      },\n      size: {\n        default: `h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4`,\n        sm: `h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3`,\n        lg: `h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5`,\n      },\n      layout: {\n        default: 'w-fit',\n        expanded: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      layout: 'default',\n    },\n  },\n)\n\nexport const Toggle = ({\n  ref,\n  className,\n  variant,\n  size,\n  layout,\n  disabled,\n  activeColor = 'default',\n  activeTextColor,\n  style,\n  ...props\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  return (\n    <ToggleBase\n      ref={ref}\n      disabled={disabled}\n      data-slot='toggle'\n      data-testid='spectral-toggle'\n      className={cn(toggleVariants({ variant, size, layout }), className)}\n      style={{ ...getActiveColorStyle(activeColor, activeTextColor), ...style }}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,iBAAiB,IAC5B,s0BACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,WAAW;GACZ;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,SAAS;GACT,UAAU;GACX;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,QAAQ;EACT;CACF,CACF;AAED,MAAa,UAAU,EACrB,KACA,WACA,SACA,MACA,QACA,UACA,cAAc,WACd,iBACA,OACA,GAAG,YAGC;AACJ,QACE,oBAAC,YAAD;EACO;EACK;EACV,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAQ,CAAC,EAAE,UAAU;EACnE,OAAO;GAAE,GAAG,oBAAoB,aAAa,gBAAgB;GAAE,GAAG;GAAO;EACzE,GAAI;EACJ"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type Ref } from 'react'\nimport { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { ToggleBase } from './ToggleBase'\n\nexport { getActiveColorStyle }\nexport type { ActiveColor, ActiveTextColor }\n\nexport type ToggleProps = ComponentProps<typeof ToggleBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const toggleVariants = cva(\n  `gap-2 rounded-md text-sm shadow-sm font-medium inline-flex w-fit items-center justify-center border bg-toggle-bg whitespace-nowrap text-toggle-text transition-colors hover:cursor-pointer\n  hover:border-toggle-border--hover hover:bg-toggle-bg--hover hover:text-toggle-text--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\n  active:bg-toggle-bg--active aria-invalid:border-danger-200 aria-invalid:outline-danger-200/20 aria-pressed:border-toggle-border--active aria-pressed:bg-toggle-bg--active\n  aria-pressed:text-toggle-text--active data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=on]:border-toggle-border--active\n  data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: 'border-toggle-border hover:border-toggle-border--hover',\n        outline: 'border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover',\n        divided: 'border-toggle-outline-border hover:border-toggle-outline-border--hover hover:bg-toggle-bg--hover',\n        separated: 'border-toggle-border hover:border-toggle-border--hover aria-pressed:border-toggle-border--active data-[state=on]:border-toggle-border--active aria-pressed:bg-toggle-bg--active data-[state=on]:bg-toggle-bg--active',\n      },\n      size: {\n        default: `h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4`,\n        sm: `h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3`,\n        lg: `h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5`,\n      },\n      layout: {\n        default: 'w-fit',\n        expanded: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      layout: 'default',\n    },\n  },\n)\n\nexport const Toggle = ({\n  ref,\n  className,\n  variant,\n  size,\n  layout,\n  disabled,\n  activeColor = 'default',\n  activeTextColor,\n  style,\n  ...props\n}: ToggleProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  return <ToggleBase ref={ref} disabled={disabled} data-slot='toggle' data-testid='spectral-toggle' className={cn(toggleVariants({ variant, size, layout }), className)} style={{ ...getActiveColorStyle(activeColor, activeTextColor), ...style }} {...props} />\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,iBAAiB,IAC5B;;;;+HAKA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,SAAS;GACT,WAAW;GACZ;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,SAAS;GACT,UAAU;GACX;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,QAAQ;EACT;CACF,CACF;AAED,MAAa,UAAU,EACrB,KACA,WACA,SACA,MACA,QACA,UACA,cAAc,WACd,iBACA,OACA,GAAG,YAGC;AACJ,QAAO,oBAAC,YAAD;EAAiB;EAAe;EAAU,aAAU;EAAS,eAAY;EAAkB,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAQ,CAAC,EAAE,UAAU;EAAE,OAAO;GAAE,GAAG,oBAAoB,aAAa,gBAAgB;GAAE,GAAG;GAAO;EAAE,GAAI;EAAS"}

package/dist/ToggleGroup/ToggleGroupBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupBase.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"mappings":";;;;;KAKK,WAAA;AAAA,UAEY,gBAAA;EACf,SAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,WAAA,GAAc,WAAA;AAAA;AAAA,KAGJ,WAAA,GAAc,gBAAA;EACxB,YAAA;EACA,aAAA,IAAiB,CAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,gBAAA;EAC1B,YAAA;EACA,aAAA,IAAiB,CAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,gBAAA,IAAoB,WAAA,GAAc,aAAA,IAAiB,IAAA,CAAK,cAAA,CAAe,cAAA;AAAA,UAElE,eAAA;EACf,QAAA,GAAW,SAAA;EACX,SAAA;EACA,QAAA;EACA,KAAA;AAAA;AAAA,cAiBW,eAAA,GAAe,KAAA,EAAW,gBAAA,GAAmB,MAAA,gCAAiC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAiI/E,oBAAA,GAAuB,IAAA,CAAK,oBAAA,CAAqB,iBAAA,oEAC3D,eAAA;EAnKA,iFAqKE,OAAA,YArKG;EAuKH,cAAA;AAAA;AAAA,cAGS,mBAAA;EAAmB,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAS7B,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"ToggleGroupBase.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"mappings":";;;;;KAKK,WAAA;AAAA,UAEY,gBAAA;EACf,SAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,WAAA,GAAc,WAAA;AAAA;AAAA,KAGJ,WAAA,GAAc,gBAAA;EACxB,YAAA;EACA,aAAA,IAAiB,CAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,gBAAA;EAC1B,YAAA;EACA,aAAA,IAAiB,CAAA;EACjB,IAAA;EACA,KAAA;AAAA;AAAA,KAGU,gBAAA,IAAoB,WAAA,GAAc,aAAA,IAAiB,IAAA,CAAK,cAAA,CAAe,cAAA;AAAA,UAElE,eAAA;EACf,QAAA,GAAW,SAAA;EACX,SAAA;EACA,QAAA;EACA,KAAA;AAAA;AAAA,cAiBW,eAAA,GAAe,KAAA,EAAW,gBAAA,GAAmB,MAAA,gCAAiC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAwG/E,oBAAA,GAAuB,IAAA,CAAK,oBAAA,CAAqB,iBAAA,oEAC3D,eAAA;EA1IA,iFA4IE,OAAA,YA5IG;EA8IH,cAAA;AAAA;AAAA,cAGS,mBAAA;EAAmB,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAS7B,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,MACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ToggleGroup/ToggleGroupBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupBase.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { clamp } from '@utils/sharedUtils'\nimport { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\n\ntype VoidFn = () => void\ntype Orientation = 'horizontal' | 'vertical'\n\nexport interface CommonGroupProps {\n  className?: string\n  disabled?: boolean\n  loop?: boolean\n  name?: string\n  orientation?: Orientation\n}\n\nexport type SingleProps = CommonGroupProps & {\n  defaultValue?: string\n  onValueChange?: (v: string) => void\n  type?: 'single'\n  value?: string\n}\n\nexport type MultipleProps = CommonGroupProps & {\n  defaultValue?: string[]\n  onValueChange?: (v: string[]) => void\n  type: 'multiple'\n  value?: string[]\n}\n\nexport type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nexport interface ItemRenderProps {\n  children?: ReactNode\n  className?: string\n  disabled?: boolean\n  value: string\n}\n\nconst GroupContext = createContext<{\n  focusItemByIndex: (index: number) => void\n  groupDisabled: boolean\n  loop: boolean\n  isItemPressed: (val: string) => boolean\n  itemsSnapshot: () => { val: string; el: HTMLButtonElement | null; disabled: boolean }[]\n  name?: string\n  orientation: Orientation\n  register: (val: string, el: HTMLButtonElement | null) => VoidFn\n  setValue: (next: string | string[]) => void\n  type: 'single' | 'multiple'\n  value: string | string[]\n} | null>(null)\n\nexport const ToggleGroupBase = (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => {\n  const {\n    className,\n    defaultValue,\n    disabled: groupDisabled = false,\n    loop = true,\n    name,\n    onValueChange,\n    orientation = 'horizontal',\n    type = 'single',\n    value: valueProp,\n    'data-variant': dataVariant,\n    'data-size': dataSize,\n    'data-slot': dataSlot,\n    'data-layout': dataLayout,\n    ...rest\n  } = props\n\n  const isMultiple = type === 'multiple'\n\n  const handleValueChange = useCallback(\n    (next: string | string[]) => {\n      if (!onValueChange) return\n      if (isMultiple) {\n        const onValueChangeMultiple = onValueChange as (v: string[]) => void\n        onValueChangeMultiple(next as string[])\n        return\n      }\n      const onValueChangeSingle = onValueChange as (v: string) => void\n      onValueChangeSingle(next as string)\n    },\n    [isMultiple, onValueChange],\n  )\n\n  const [value, setValue] = useUncontrolledState<string | string[]>({\n    defaultValue: typeof defaultValue !== 'undefined' ? defaultValue : isMultiple ? [] : '',\n    onChange: handleValueChange,\n    value: valueProp,\n  })\n\n  const registry = useRef<{ val: string; el: HTMLButtonElement | null; disabled: boolean }[]>([])\n\n  const register = useCallback((val: string, el: HTMLButtonElement | null) => {\n    const entry = { val, el, disabled: !!el?.disabled }\n    registry.current = [...registry.current.filter((i) => i.val !== val), entry]\n    return () => {\n      registry.current = registry.current.filter((i) => i.val !== val)\n    }\n  }, [])\n\n  const itemsSnapshot = useCallback(() => registry.current.slice(), [])\n\n  const isItemPressed = useCallback(\n    (val: string) => {\n      if (isMultiple) return Array.isArray(value) && value.includes(val)\n      return value === val\n    },\n    [isMultiple, value],\n  )\n\n  const setValueSafe = useCallback((next: string | string[]) => setValue(next), [setValue])\n\n  const focusItemByIndex = useCallback(\n    (index: number) => {\n      const items = registry.current\n      if (items.length === 0) return\n      const last = items.length - 1\n      const clamped = loop ? ((index % items.length) + items.length) % items.length : clamp(index, 0, last)\n      const target = items[clamped]\n      target?.el?.focus()\n    },\n    [loop],\n  )\n\n  const ctx = useMemo(\n    () => ({\n      focusItemByIndex,\n      groupDisabled,\n      isItemPressed,\n      itemsSnapshot,\n      loop,\n      name,\n      orientation,\n      register,\n      setValue: setValueSafe,\n      type,\n      value,\n    }),\n    [focusItemByIndex, groupDisabled, isItemPressed, itemsSnapshot, loop, name, orientation, register, setValueSafe, type, value],\n  )\n\n  const hiddenName = name\n\n  return (\n    <div\n      className={className}\n      data-disabled={groupDisabled ? '' : undefined}\n      data-layout={dataLayout}\n      data-orientation={orientation}\n      data-size={dataSize}\n      data-slot={dataSlot}\n      data-variant={dataVariant}\n      role='group'\n      {...rest}\n    >\n      <GroupContext.Provider value={ctx}>{props.children}</GroupContext.Provider>\n\n      {hiddenName && type === 'single' && typeof value === 'string' ? (\n        <input\n          type='hidden'\n          name={hiddenName}\n          value={value}\n        />\n      ) : null}\n\n      {hiddenName && type === 'multiple' && Array.isArray(value)\n        ? value.map((v) => (\n            <input\n              key={v}\n              type='hidden'\n              name={hiddenName + '[]'}\n              value={v}\n            />\n          ))\n        : null}\n    </div>\n  )\n}\n\nexport type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> &\n  ItemRenderProps & {\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    pressed?: boolean\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    defaultPressed?: boolean\n  }\n\nexport const ToggleGroupItemBase = function ToggleGroupItem({\n  ref,\n  value,\n  disabled,\n  className,\n  children,\n  onKeyDown,\n  onClick,\n  ...rest\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const ctx = useContext(GroupContext)\n  if (!ctx) throw new Error('ToggleGroupItem must be used within ToggleGroup')\n\n  const { type, orientation, groupDisabled, setValue, isItemPressed, itemsSnapshot, register } = ctx\n\n  const btnRef = useRef<HTMLButtonElement | null>(null)\n  useImperativeHandle(ref, () => {\n    if (!btnRef.current) {\n      throw new Error('ToggleGroupItem button ref is not set')\n    }\n    return btnRef.current\n  })\n\n  useEffect(() => register(value, btnRef.current), [register, value])\n\n  const pressed = isItemPressed(value)\n\n  const toggleMe = useCallback(() => {\n    if (groupDisabled || disabled) return\n    if (type === 'single') setValue(pressed ? '' : value)\n    else {\n      const current = ctx.value as string[]\n      const next = pressed ? current.filter((v) => v !== value) : [...current, value]\n      setValue(next)\n    }\n  }, [ctx.value, disabled, groupDisabled, pressed, setValue, type, value])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (onKeyDown) onKeyDown(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        toggleMe()\n        return\n      }\n      const items = itemsSnapshot()\n      const index = items.findIndex((i) => i.val === value)\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n      if (e.key === prevKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index - 1)\n      } else if (e.key === nextKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index + 1)\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        ctx.focusItemByIndex(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        ctx.focusItemByIndex(items.length - 1)\n      }\n    },\n    [ctx, itemsSnapshot, onKeyDown, orientation, toggleMe, value],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) onClick(e)\n      if (e.defaultPrevented) return\n      toggleMe()\n    },\n    [onClick, toggleMe],\n  )\n\n  return (\n    <button\n      aria-pressed={pressed}\n      className={className}\n      data-disabled={groupDisabled || disabled ? '' : undefined}\n      data-state={pressed ? 'on' : 'off'}\n      disabled={groupDisabled || disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      ref={btnRef}\n      type='button'\n      {...rest}\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToggleGroupBase.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { clamp } from '@utils/sharedUtils'\nimport { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\n\ntype VoidFn = () => void\ntype Orientation = 'horizontal' | 'vertical'\n\nexport interface CommonGroupProps {\n  className?: string\n  disabled?: boolean\n  loop?: boolean\n  name?: string\n  orientation?: Orientation\n}\n\nexport type SingleProps = CommonGroupProps & {\n  defaultValue?: string\n  onValueChange?: (v: string) => void\n  type?: 'single'\n  value?: string\n}\n\nexport type MultipleProps = CommonGroupProps & {\n  defaultValue?: string[]\n  onValueChange?: (v: string[]) => void\n  type: 'multiple'\n  value?: string[]\n}\n\nexport type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nexport interface ItemRenderProps {\n  children?: ReactNode\n  className?: string\n  disabled?: boolean\n  value: string\n}\n\nconst GroupContext = createContext<{\n  focusItemByIndex: (index: number) => void\n  groupDisabled: boolean\n  loop: boolean\n  isItemPressed: (val: string) => boolean\n  itemsSnapshot: () => { val: string; el: HTMLButtonElement | null; disabled: boolean }[]\n  name?: string\n  orientation: Orientation\n  register: (val: string, el: HTMLButtonElement | null) => VoidFn\n  setValue: (next: string | string[]) => void\n  type: 'single' | 'multiple'\n  value: string | string[]\n} | null>(null)\n\nexport const ToggleGroupBase = (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => {\n  const {\n    className,\n    defaultValue,\n    disabled: groupDisabled = false,\n    loop = true,\n    name,\n    onValueChange,\n    orientation = 'horizontal',\n    type = 'single',\n    value: valueProp,\n    'data-variant': dataVariant,\n    'data-size': dataSize,\n    'data-slot': dataSlot,\n    'data-layout': dataLayout,\n    ...rest\n  } = props\n\n  const isMultiple = type === 'multiple'\n\n  const handleValueChange = useCallback(\n    (next: string | string[]) => {\n      if (!onValueChange) return\n      if (isMultiple) {\n        const onValueChangeMultiple = onValueChange as (v: string[]) => void\n        onValueChangeMultiple(next as string[])\n        return\n      }\n      const onValueChangeSingle = onValueChange as (v: string) => void\n      onValueChangeSingle(next as string)\n    },\n    [isMultiple, onValueChange],\n  )\n\n  const [value, setValue] = useUncontrolledState<string | string[]>({\n    defaultValue: typeof defaultValue !== 'undefined' ? defaultValue : isMultiple ? [] : '',\n    onChange: handleValueChange,\n    value: valueProp,\n  })\n\n  const registry = useRef<{ val: string; el: HTMLButtonElement | null; disabled: boolean }[]>([])\n\n  const register = useCallback((val: string, el: HTMLButtonElement | null) => {\n    const entry = { val, el, disabled: !!el?.disabled }\n    registry.current = [...registry.current.filter((i) => i.val !== val), entry]\n    return () => {\n      registry.current = registry.current.filter((i) => i.val !== val)\n    }\n  }, [])\n\n  const itemsSnapshot = useCallback(() => registry.current.slice(), [])\n\n  const isItemPressed = useCallback(\n    (val: string) => {\n      if (isMultiple) return Array.isArray(value) && value.includes(val)\n      return value === val\n    },\n    [isMultiple, value],\n  )\n\n  const setValueSafe = useCallback((next: string | string[]) => setValue(next), [setValue])\n\n  const focusItemByIndex = useCallback(\n    (index: number) => {\n      const items = registry.current\n      if (items.length === 0) return\n      const last = items.length - 1\n      const clamped = loop ? ((index % items.length) + items.length) % items.length : clamp(index, 0, last)\n      const target = items[clamped]\n      target?.el?.focus()\n    },\n    [loop],\n  )\n\n  const ctx = useMemo(\n    () => ({\n      focusItemByIndex,\n      groupDisabled,\n      isItemPressed,\n      itemsSnapshot,\n      loop,\n      name,\n      orientation,\n      register,\n      setValue: setValueSafe,\n      type,\n      value,\n    }),\n    [focusItemByIndex, groupDisabled, isItemPressed, itemsSnapshot, loop, name, orientation, register, setValueSafe, type, value],\n  )\n\n  const hiddenName = name\n\n  return (\n    <div className={className} data-disabled={groupDisabled ? '' : undefined} data-layout={dataLayout} data-orientation={orientation} data-size={dataSize} data-slot={dataSlot} data-variant={dataVariant} role='group' {...rest}>\n      <GroupContext.Provider value={ctx}>{props.children}</GroupContext.Provider>\n\n      {hiddenName && type === 'single' && typeof value === 'string' ? <input type='hidden' name={hiddenName} value={value} /> : null}\n\n      {hiddenName && type === 'multiple' && Array.isArray(value) ? value.map((v) => <input key={v} type='hidden' name={hiddenName + '[]'} value={v} />) : null}\n    </div>\n  )\n}\n\nexport type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> &\n  ItemRenderProps & {\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    pressed?: boolean\n    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */\n    defaultPressed?: boolean\n  }\n\nexport const ToggleGroupItemBase = function ToggleGroupItem({\n  ref,\n  value,\n  disabled,\n  className,\n  children,\n  onKeyDown,\n  onClick,\n  ...rest\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) {\n  const ctx = useContext(GroupContext)\n  if (!ctx) throw new Error('ToggleGroupItem must be used within ToggleGroup')\n\n  const { type, orientation, groupDisabled, setValue, isItemPressed, itemsSnapshot, register } = ctx\n\n  const btnRef = useRef<HTMLButtonElement | null>(null)\n  useImperativeHandle(ref, () => {\n    if (!btnRef.current) {\n      throw new Error('ToggleGroupItem button ref is not set')\n    }\n    return btnRef.current\n  })\n\n  useEffect(() => register(value, btnRef.current), [register, value])\n\n  const pressed = isItemPressed(value)\n\n  const toggleMe = useCallback(() => {\n    if (groupDisabled || disabled) return\n    if (type === 'single') setValue(pressed ? '' : value)\n    else {\n      const current = ctx.value as string[]\n      const next = pressed ? current.filter((v) => v !== value) : [...current, value]\n      setValue(next)\n    }\n  }, [ctx.value, disabled, groupDisabled, pressed, setValue, type, value])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (onKeyDown) onKeyDown(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault()\n        toggleMe()\n        return\n      }\n      const items = itemsSnapshot()\n      const index = items.findIndex((i) => i.val === value)\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n      if (e.key === prevKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index - 1)\n      } else if (e.key === nextKey) {\n        e.preventDefault()\n        ctx.focusItemByIndex(index + 1)\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        ctx.focusItemByIndex(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        ctx.focusItemByIndex(items.length - 1)\n      }\n    },\n    [ctx, itemsSnapshot, onKeyDown, orientation, toggleMe, value],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) onClick(e)\n      if (e.defaultPrevented) return\n      toggleMe()\n    },\n    [onClick, toggleMe],\n  )\n\n  return (\n    <button aria-pressed={pressed} className={className} data-disabled={groupDisabled || disabled ? '' : undefined} data-state={pressed ? 'on' : 'off'} disabled={groupDisabled || disabled} onClick={handleClick} onKeyDown={handleKeyDown} ref={btnRef} type='button' {...rest}>\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/ToggleGroup/ToggleGroupItem.js

@@ -21,7 +21,7 @@ const ToggleGroupItem = ({ activeColor, activeTextColor, children, className, la
 			variant: resolvedVariant,
 			size: resolvedSize,
 			layout: resolvedLayout
-		}), "group data-[variant=separated]:rounded-md rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border", "data-[variant=outline]:data-[state=on]:border-toggle-border--active data-[variant=outline]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:border-toggle-border", "data-[variant=separated]:hover:border-toggle-border--hover data-[variant=separated]:data-[state=on]:border-toggle-border--active data-[variant=separated]:data-[state=on]:bg-toggle-bg--active", "data-[variant=separated]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:data-[state=on]:hover:bg-toggle-bg--active", className),
+		}), "group data-[variant=separated]:rounded-md rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border", "data-[variant=divided]:border-toggle-border data-[variant=divided]:hover:border-toggle-border data-[variant=outline]:data-[state=on]:border-toggle-border--active", "data-[variant=outline]:data-[state=on]:hover:border-toggle-border--active data-[variant=divided]:data-[state=on]:border-toggle-border--active data-[variant=divided]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:border-toggle-border", "data-[variant=separated]:hover:border-toggle-border--hover data-[variant=separated]:data-[state=on]:border-toggle-border--active data-[variant=separated]:data-[state=on]:bg-toggle-bg--active", "data-[variant=separated]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:data-[state=on]:hover:bg-toggle-bg--active", className),
 		"data-layout": resolvedLayout,
 		"data-size": resolvedSize,
 		"data-slot": "toggle-group-item",

package/dist/ToggleGroup/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import { toggleVariants } from '@components/Toggle/Toggle'\nimport { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { useContext, type ComponentProps, type Ref } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItemBase } from './ToggleGroupBase'\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const ToggleGroupItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  layout,\n  ref,\n  size,\n  style,\n  value,\n  variant,\n  ...props\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const context = useContext(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedLayout = layout ?? context.layout\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n\n  return (\n    <ToggleGroupItemBase\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          layout: resolvedLayout,\n        }),\n        'group data-[variant=separated]:rounded-md rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border',\n        'data-[variant=outline]:data-[state=on]:border-toggle-border--active data-[variant=outline]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:border-toggle-border',\n        'data-[variant=separated]:hover:border-toggle-border--hover data-[variant=separated]:data-[state=on]:border-toggle-border--active data-[variant=separated]:data-[state=on]:bg-toggle-bg--active',\n        'data-[variant=separated]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:data-[state=on]:hover:bg-toggle-bg--active',\n        className,\n      )}\n      data-layout={resolvedLayout}\n      data-size={resolvedSize}\n      data-slot='toggle-group-item'\n      data-testid='spectral-toggle-group-item'\n      data-variant={resolvedVariant}\n      ref={ref}\n      style={{ ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor), ...style }}\n      value={value}\n      {...props}\n    >\n      {children}\n    </ToggleGroupItemBase>\n  )\n}\n\nToggleGroupItem.displayName = 'ToggleGroupItem'\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,mBAAmB,EAC9B,aACA,iBACA,UACA,WACA,QACA,KACA,MACA,OACA,OACA,SACA,GAAG,YAGC;CACJ,MAAM,UAAU,WAAW,mBAAmB;CAC9C,MAAM,kBAAkB,WAAW,QAAQ;CAC3C,MAAM,eAAe,QAAQ,QAAQ;CACrC,MAAM,iBAAiB,UAAU,QAAQ;CACzC,MAAM,sBAAsB,eAAe,QAAQ;CACnD,MAAM,0BAA0B,mBAAmB,QAAQ;AAE3D,QACE,oBAAC,qBAAD;EACE,WAAW,GACT,eAAe;GACb,SAAS;GACT,MAAM;GACN,QAAQ;GACT,CAAC,EACF,kMACA,+LACA,kMACA,mJACA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACT;EACL,OAAO;GAAE,GAAG,oBAAoB,qBAAqB,wBAAwB;GAAE,GAAG;GAAO;EAClF;EACP,GAAI;EAEH;EACmB;;AAI1B,gBAAgB,cAAc"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import { toggleVariants } from '@components/Toggle/Toggle'\nimport { getActiveColorStyle, type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { useContext, type ComponentProps, type Ref } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItemBase } from './ToggleGroupBase'\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const ToggleGroupItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  layout,\n  ref,\n  size,\n  style,\n  value,\n  variant,\n  ...props\n}: ToggleGroupItemProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const context = useContext(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedLayout = layout ?? context.layout\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n\n  return (\n    <ToggleGroupItemBase\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          layout: resolvedLayout,\n        }),\n        'group data-[variant=separated]:rounded-md rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-toggle-border data-[variant=outline]:hover:border-toggle-border',\n        'data-[variant=divided]:border-toggle-border data-[variant=divided]:hover:border-toggle-border data-[variant=outline]:data-[state=on]:border-toggle-border--active',\n        'data-[variant=outline]:data-[state=on]:hover:border-toggle-border--active data-[variant=divided]:data-[state=on]:border-toggle-border--active data-[variant=divided]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:border-toggle-border',\n        'data-[variant=separated]:hover:border-toggle-border--hover data-[variant=separated]:data-[state=on]:border-toggle-border--active data-[variant=separated]:data-[state=on]:bg-toggle-bg--active',\n        'data-[variant=separated]:data-[state=on]:hover:border-toggle-border--active data-[variant=separated]:data-[state=on]:hover:bg-toggle-bg--active',\n        className,\n      )}\n      data-layout={resolvedLayout}\n      data-size={resolvedSize}\n      data-slot='toggle-group-item'\n      data-testid='spectral-toggle-group-item'\n      data-variant={resolvedVariant}\n      ref={ref}\n      style={{ ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor), ...style }}\n      value={value}\n      {...props}\n    >\n      {children}\n    </ToggleGroupItemBase>\n  )\n}\n\nToggleGroupItem.displayName = 'ToggleGroupItem'\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,mBAAmB,EAC9B,aACA,iBACA,UACA,WACA,QACA,KACA,MACA,OACA,OACA,SACA,GAAG,YAGC;CACJ,MAAM,UAAU,WAAW,mBAAmB;CAC9C,MAAM,kBAAkB,WAAW,QAAQ;CAC3C,MAAM,eAAe,QAAQ,QAAQ;CACrC,MAAM,iBAAiB,UAAU,QAAQ;CACzC,MAAM,sBAAsB,eAAe,QAAQ;CACnD,MAAM,0BAA0B,mBAAmB,QAAQ;AAE3D,QACE,oBAAC,qBAAD;EACE,WAAW,GACT,eAAe;GACb,SAAS;GACT,MAAM;GACN,QAAQ;GACT,CAAC,EACF,kMACA,qKACA,yQACA,kMACA,mJACA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACT;EACL,OAAO;GAAE,GAAG,oBAAoB,qBAAqB,wBAAwB;GAAE,GAAG;GAAO;EAClF;EACP,GAAI;EAEH;EACmB;;AAI1B,gBAAgB,cAAc"}

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.js

@@ -120,7 +120,7 @@ const ToggleGroupSplitMenuItem = ({ activeColor, activeTextColor, children, clas
 				layout: resolvedLayout,
 				size: resolvedSize,
 				variant: resolvedVariant
-			}), "px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none", "data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border", "hover:opacity-100! data-[variant=outline]:hover:border-toggle-border", "before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", "peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active", "peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!", "peer-data-[state=on]/spectral-split-menu:text-toggle-text--active", "peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!", dropdownButtonClassName),
+			}), "px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none", "data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border data-[variant=divided]:border-toggle-border", "hover:opacity-100! data-[variant=outline]:hover:border-toggle-border data-[variant=divided]:hover:border-toggle-border", "before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", "peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active", "peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!", "peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!", "peer-data-[state=on]/spectral-split-menu:text-toggle-text--active", "peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!", dropdownButtonClassName),
 			"data-layout": resolvedLayout,
 			"data-size": resolvedSize,
 			"data-variant": resolvedVariant,

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupSplitMenuItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"sourcesContent":["import { DropdownMenu, type DropdownMenuOption, type DropdownMenuProps } from '@components/DropdownMenu/DropdownMenu'\nimport { ChevronDownIcon } from '@components/Icons'\nimport { toggleVariants } from '@components/Toggle/Toggle'\nimport { getActiveColorStyle } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { useContext, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\n\nexport interface ToggleGroupSplitMenuItemProps extends Omit<ToggleGroupItemProps, 'children'> {\n  children: ReactNode\n  dropdownAlign?: DropdownMenuProps['align']\n  dropdownAriaLabel: string\n  dropdownButtonClassName?: string\n  dropdownCollisionPadding?: DropdownMenuProps['collisionPadding']\n  dropdownButtonStyle?: CSSProperties\n  dropdownOptions: DropdownMenuOption[]\n  dropdownSide?: DropdownMenuProps['side']\n  dropdownValue?: string | string[]\n  dropdownValueLabel?: string\n  onDropdownValueChange?: (value: string | string[]) => void\n  triggerIcon?: ReactNode\n}\n\nexport const ToggleGroupSplitMenuItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  dropdownAlign = 'end',\n  dropdownAriaLabel,\n  dropdownButtonClassName,\n  dropdownButtonStyle,\n  dropdownCollisionPadding = 12,\n  dropdownOptions,\n  dropdownSide = 'bottom',\n  dropdownValue,\n  dropdownValueLabel,\n  layout,\n  onDropdownValueChange,\n  onKeyDown,\n  size,\n  style,\n  triggerIcon = <ChevronDownIcon size={16} />,\n  value,\n  variant,\n  ...props\n}: ToggleGroupSplitMenuItemProps) => {\n  const [open, setOpen] = useState(false)\n  const dropdownContentRef = useRef<HTMLDivElement | null>(null)\n  const primaryButtonRef = useRef<HTMLButtonElement | null>(null)\n  const chevronButtonRef = useRef<HTMLButtonElement | null>(null)\n  const openerRef = useRef<'primary' | 'chevron' | null>(null)\n  const isDisabled = props.disabled ?? false\n  const context = useContext(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedLayout = layout ?? context.layout\n  const resolvedOrientation = context.orientation ?? 'horizontal'\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n  const sharedActiveStyle = {\n    ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor),\n    ...style,\n  }\n\n  const focusFirstEnabledDropdownItem = (focusTarget: 'first' | 'last' = 'first'): void => {\n    const content = dropdownContentRef.current\n    if (!content) return\n\n    const menuItemSelector = '[role=\"menuitem\"]:not([data-disabled]), [role=\"menuitemcheckbox\"]:not([data-disabled]), [role=\"menuitemradio\"]:not([data-disabled])'\n    const enabledItems = Array.from(content.querySelectorAll<HTMLElement>(menuItemSelector))\n    if (enabledItems.length === 0) return\n\n    if (focusTarget === 'last') {\n      enabledItems[enabledItems.length - 1]?.focus()\n      return\n    }\n\n    enabledItems[0]?.focus()\n  }\n\n  const openMenu = (opener: 'primary' | 'chevron'): void => {\n    openerRef.current = opener\n    setOpen(true)\n    setTimeout(() => {\n      focusFirstEnabledDropdownItem('first')\n    }, 0)\n  }\n\n  const restoreFocusToOpener = (): void => {\n    const opener = openerRef.current\n    const focusTarget = opener === 'primary' ? primaryButtonRef.current : chevronButtonRef.current\n    openerRef.current = null\n    focusTarget?.focus()\n  }\n\n  const handleDropdownOpenChange = (nextOpen: boolean): void => {\n    if (nextOpen) {\n      openerRef.current ??= 'chevron'\n      setOpen(true)\n      setTimeout(() => {\n        focusFirstEnabledDropdownItem('first')\n      }, 0)\n      return\n    }\n\n    setOpen(false)\n    restoreFocusToOpener()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'ArrowDown' && resolvedOrientation !== 'vertical') {\n      event.preventDefault()\n      openMenu('primary')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const handleDropdownTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n      event.preventDefault()\n      focusFirstEnabledDropdownItem(event.key === 'ArrowUp' ? 'last' : 'first')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    const isOpenMenuKey = event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ' || event.key === 'Space' || event.key === 'Spacebar'\n\n    if (isOpenMenuKey) {\n      event.preventDefault()\n      openMenu('chevron')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const toggleAriaLabel = props['aria-label'] ? `${props['aria-label']}${dropdownValueLabel ? `, ${dropdownValueLabel}` : ''}` : undefined\n\n  return (\n    <>\n      <ToggleGroupItem\n        activeColor={resolvedActiveColor}\n        activeTextColor={resolvedActiveTextColor}\n        aria-label={toggleAriaLabel}\n        className={cn('peer/spectral-split-menu rounded-r-none! border-r-0', className)}\n        layout={resolvedLayout}\n        onKeyDown={handleKeyDown}\n        ref={primaryButtonRef}\n        size={resolvedSize}\n        style={sharedActiveStyle}\n        value={value}\n        variant={resolvedVariant}\n        {...(({ 'aria-label': _, ...rest }) => rest)(props)}\n      >\n        {children}\n      </ToggleGroupItem>\n\n      <DropdownMenu\n        align={dropdownAlign}\n        asChild\n        collisionPadding={dropdownCollisionPadding}\n        disabled={isDisabled}\n        dropdownContentRef={dropdownContentRef}\n        onOpenChange={handleDropdownOpenChange}\n        onValueChange={onDropdownValueChange}\n        open={open}\n        options={dropdownOptions}\n        side={dropdownSide}\n        trigger={\n          <button\n            aria-expanded={open}\n            aria-haspopup='menu'\n            aria-label={dropdownAriaLabel}\n            className={cn(\n              toggleVariants({\n                layout: resolvedLayout,\n                size: resolvedSize,\n                variant: resolvedVariant,\n              }),\n              'px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none',\n              'data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border',\n              'hover:opacity-100! data-[variant=outline]:hover:border-toggle-border',\n              'before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',\n              'peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!',\n              'peer-data-[state=on]/spectral-split-menu:text-toggle-text--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!',\n              dropdownButtonClassName,\n            )}\n            data-layout={resolvedLayout}\n            data-size={resolvedSize}\n            data-variant={resolvedVariant}\n            disabled={isDisabled}\n            onKeyDown={handleDropdownTriggerKeyDown}\n            onPointerDown={() => {\n              openerRef.current = 'chevron'\n            }}\n            ref={chevronButtonRef}\n            style={{ ...sharedActiveStyle, ...dropdownButtonStyle }}\n            type='button'\n          >\n            {triggerIcon}\n          </button>\n        }\n        value={dropdownValue}\n      />\n    </>\n  )\n}\n\nToggleGroupSplitMenuItem.displayName = 'ToggleGroupSplitMenuItem'\n"],"mappings":"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"}
+{"version":3,"file":"ToggleGroupSplitMenuItem.js","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"sourcesContent":["import { DropdownMenu, type DropdownMenuOption, type DropdownMenuProps } from '@components/DropdownMenu/DropdownMenu'\nimport { ChevronDownIcon } from '@components/Icons'\nimport { toggleVariants } from '@components/Toggle/Toggle'\nimport { getActiveColorStyle } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { useContext, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\n\nexport interface ToggleGroupSplitMenuItemProps extends Omit<ToggleGroupItemProps, 'children'> {\n  children: ReactNode\n  dropdownAlign?: DropdownMenuProps['align']\n  dropdownAriaLabel: string\n  dropdownButtonClassName?: string\n  dropdownCollisionPadding?: DropdownMenuProps['collisionPadding']\n  dropdownButtonStyle?: CSSProperties\n  dropdownOptions: DropdownMenuOption[]\n  dropdownSide?: DropdownMenuProps['side']\n  dropdownValue?: string | string[]\n  dropdownValueLabel?: string\n  onDropdownValueChange?: (value: string | string[]) => void\n  triggerIcon?: ReactNode\n}\n\nexport const ToggleGroupSplitMenuItem = ({\n  activeColor,\n  activeTextColor,\n  children,\n  className,\n  dropdownAlign = 'end',\n  dropdownAriaLabel,\n  dropdownButtonClassName,\n  dropdownButtonStyle,\n  dropdownCollisionPadding = 12,\n  dropdownOptions,\n  dropdownSide = 'bottom',\n  dropdownValue,\n  dropdownValueLabel,\n  layout,\n  onDropdownValueChange,\n  onKeyDown,\n  size,\n  style,\n  triggerIcon = <ChevronDownIcon size={16} />,\n  value,\n  variant,\n  ...props\n}: ToggleGroupSplitMenuItemProps) => {\n  const [open, setOpen] = useState(false)\n  const dropdownContentRef = useRef<HTMLDivElement | null>(null)\n  const primaryButtonRef = useRef<HTMLButtonElement | null>(null)\n  const chevronButtonRef = useRef<HTMLButtonElement | null>(null)\n  const openerRef = useRef<'primary' | 'chevron' | null>(null)\n  const isDisabled = props.disabled ?? false\n  const context = useContext(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedLayout = layout ?? context.layout\n  const resolvedOrientation = context.orientation ?? 'horizontal'\n  const resolvedActiveColor = activeColor ?? context.activeColor\n  const resolvedActiveTextColor = activeTextColor ?? context.activeTextColor\n  const sharedActiveStyle = {\n    ...getActiveColorStyle(resolvedActiveColor, resolvedActiveTextColor),\n    ...style,\n  }\n\n  const focusFirstEnabledDropdownItem = (focusTarget: 'first' | 'last' = 'first'): void => {\n    const content = dropdownContentRef.current\n    if (!content) return\n\n    const menuItemSelector = '[role=\"menuitem\"]:not([data-disabled]), [role=\"menuitemcheckbox\"]:not([data-disabled]), [role=\"menuitemradio\"]:not([data-disabled])'\n    const enabledItems = Array.from(content.querySelectorAll<HTMLElement>(menuItemSelector))\n    if (enabledItems.length === 0) return\n\n    if (focusTarget === 'last') {\n      enabledItems[enabledItems.length - 1]?.focus()\n      return\n    }\n\n    enabledItems[0]?.focus()\n  }\n\n  const openMenu = (opener: 'primary' | 'chevron'): void => {\n    openerRef.current = opener\n    setOpen(true)\n    setTimeout(() => {\n      focusFirstEnabledDropdownItem('first')\n    }, 0)\n  }\n\n  const restoreFocusToOpener = (): void => {\n    const opener = openerRef.current\n    const focusTarget = opener === 'primary' ? primaryButtonRef.current : chevronButtonRef.current\n    openerRef.current = null\n    focusTarget?.focus()\n  }\n\n  const handleDropdownOpenChange = (nextOpen: boolean): void => {\n    if (nextOpen) {\n      openerRef.current ??= 'chevron'\n      setOpen(true)\n      setTimeout(() => {\n        focusFirstEnabledDropdownItem('first')\n      }, 0)\n      return\n    }\n\n    setOpen(false)\n    restoreFocusToOpener()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'ArrowDown' && resolvedOrientation !== 'vertical') {\n      event.preventDefault()\n      openMenu('primary')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const handleDropdownTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n      event.preventDefault()\n      focusFirstEnabledDropdownItem(event.key === 'ArrowUp' ? 'last' : 'first')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    const isOpenMenuKey = event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ' || event.key === 'Space' || event.key === 'Spacebar'\n\n    if (isOpenMenuKey) {\n      event.preventDefault()\n      openMenu('chevron')\n      if (onKeyDown) onKeyDown(event)\n      return\n    }\n\n    if (onKeyDown) onKeyDown(event)\n  }\n\n  const toggleAriaLabel = props['aria-label'] ? `${props['aria-label']}${dropdownValueLabel ? `, ${dropdownValueLabel}` : ''}` : undefined\n\n  return (\n    <>\n      <ToggleGroupItem\n        activeColor={resolvedActiveColor}\n        activeTextColor={resolvedActiveTextColor}\n        aria-label={toggleAriaLabel}\n        className={cn('peer/spectral-split-menu rounded-r-none! border-r-0', className)}\n        layout={resolvedLayout}\n        onKeyDown={handleKeyDown}\n        ref={primaryButtonRef}\n        size={resolvedSize}\n        style={sharedActiveStyle}\n        value={value}\n        variant={resolvedVariant}\n        {...(({ 'aria-label': _, ...rest }) => rest)(props)}\n      >\n        {children}\n      </ToggleGroupItem>\n\n      <DropdownMenu\n        align={dropdownAlign}\n        asChild\n        collisionPadding={dropdownCollisionPadding}\n        disabled={isDisabled}\n        dropdownContentRef={dropdownContentRef}\n        onOpenChange={handleDropdownOpenChange}\n        onValueChange={onDropdownValueChange}\n        open={open}\n        options={dropdownOptions}\n        side={dropdownSide}\n        trigger={\n          <button\n            aria-expanded={open}\n            aria-haspopup='menu'\n            aria-label={dropdownAriaLabel}\n            className={cn(\n              toggleVariants({\n                layout: resolvedLayout,\n                size: resolvedSize,\n                variant: resolvedVariant,\n              }),\n              'px-1 min-w-6 data-[size=sm]:min-w-5 data-[size=sm]:px-0.5 relative rounded-none border-l-0 shadow-none',\n              'data-[size=lg]:min-w-7 data-[size=lg]:px-1.5 data-[variant=outline]:border-toggle-border data-[variant=divided]:border-toggle-border',\n              'hover:opacity-100! data-[variant=outline]:hover:border-toggle-border data-[variant=divided]:hover:border-toggle-border',\n              'before:inset-y-2 before:left-0 before:pointer-events-none before:absolute before:w-px before:bg-border-secondary/6',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',\n              'peer-data-[state=on]/spectral-split-menu:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:bg-toggle-bg--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:border-toggle-border--active!',\n              'peer-data-[state=on]/spectral-split-menu:hover:bg-toggle-bg--active!',\n              'peer-data-[state=on]/spectral-split-menu:text-toggle-text--active',\n              'peer-data-[state=on]/spectral-split-menu:hover:text-toggle-text--active!',\n              dropdownButtonClassName,\n            )}\n            data-layout={resolvedLayout}\n            data-size={resolvedSize}\n            data-variant={resolvedVariant}\n            disabled={isDisabled}\n            onKeyDown={handleDropdownTriggerKeyDown}\n            onPointerDown={() => {\n              openerRef.current = 'chevron'\n            }}\n            ref={chevronButtonRef}\n            style={{ ...sharedActiveStyle, ...dropdownButtonStyle }}\n            type='button'\n          >\n            {triggerIcon}\n          </button>\n        }\n        value={dropdownValue}\n      />\n    </>\n  )\n}\n\nToggleGroupSplitMenuItem.displayName = 'ToggleGroupSplitMenuItem'\n"],"mappings":"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"}

package/dist/ToggleGroup.js

@@ -11,7 +11,15 @@ import "class-variance-authority";
 //#region src/components/ToggleGroup/ToggleGroup.tsx
 const ToggleGroup = ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }) => {
 	return /* @__PURE__ */ jsx(ToggleGroupBase, {
-		className: cn(`group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 data-[variant='separated']:gap-1.5 data-[size='sm']:data-[variant='separated']:gap-1 data-[size='lg']:data-[variant='separated']:gap-2 flex h-fit w-fit items-center data-[layout='expanded']:w-full data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0 data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`, className),
+		className: cn(`group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 data-[variant='divided']:gap-0 data-[variant='separated']:gap-1.5
+        data-[size='sm']:data-[variant='separated']:gap-1 data-[size='lg']:data-[variant='separated']:gap-2 flex h-fit w-fit items-center data-[layout='expanded']:w-full
+        data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0
+        data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)]
+        data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]
+        data-[variant='divided']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='divided']:[&_button:not(:first-of-type)]:border-l-0
+        data-[variant='divided']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='divided']:[&_button]:border-y-0
+        data-[variant='divided']:[&_button:first-of-type]:border-l-0 data-[variant='divided']:[&_button:last-of-type]:border-r-0
+        data-[variant='divided']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`, className),
 		"data-layout": layout,
 		"data-size": size,
 		"data-slot": "toggle-group",

package/dist/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { type toggleVariants } from '@components/Toggle/Toggle'\nimport { type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupBase } from './ToggleGroupBase'\nexport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\nexport { ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps } from './ToggleGroupSplitMenuItem'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const ToggleGroup = ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }: ToggleGroupProps) => {\n  return (\n    <ToggleGroupBase\n      className={cn(\n        `group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 data-[variant='separated']:gap-1.5 data-[size='sm']:data-[variant='separated']:gap-1 data-[size='lg']:data-[variant='separated']:gap-2 flex h-fit w-fit items-center data-[layout='expanded']:w-full data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0 data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`,\n        className,\n      )}\n      data-layout={layout}\n      data-size={size}\n      data-slot='toggle-group'\n      data-testid='spectral-toggle-group'\n      data-variant={variant}\n      orientation={orientation}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, layout, activeColor, activeTextColor, orientation }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,eAAe,EAAE,WAAW,SAAS,MAAM,QAAQ,aAAa,iBAAiB,aAAa,UAAU,GAAG,YAA8B;AACpJ,QACE,oBAAC,iBAAD;EACE,WAAW,GACT,utBACA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACD;EACb,GAAI;YAEJ,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;IAAE;IAAS;IAAM;IAAQ;IAAa;IAAiB;IAAa;GAAG;GAAuC;EAClI"}
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { type toggleVariants } from '@components/Toggle/Toggle'\nimport { type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { cn } from '@utils/twUtils'\nimport { type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\nimport { ToggleGroupContext } from './ToggleGroup.context'\nimport { ToggleGroupBase } from './ToggleGroupBase'\nexport { ToggleGroupItem, type ToggleGroupItemProps } from './ToggleGroupItem'\nexport { ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps } from './ToggleGroupSplitMenuItem'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveTextColor\n  }\n\nexport const ToggleGroup = ({ className, variant, size, layout, activeColor, activeTextColor, orientation, children, ...props }: ToggleGroupProps) => {\n  return (\n    <ToggleGroupBase\n      className={cn(\n        `group/toggle-group rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md data-[variant='outline']:gap-0 data-[variant='divided']:gap-0 data-[variant='separated']:gap-1.5\n        data-[size='sm']:data-[variant='separated']:gap-1 data-[size='lg']:data-[variant='separated']:gap-2 flex h-fit w-fit items-center data-[layout='expanded']:w-full\n        data-[variant='outline']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='outline']:[&_button:not(:first-of-type)]:border-l-0\n        data-[variant='outline']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)]\n        data-[variant='outline']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]\n        data-[variant='divided']:[--color-toggle-border:var(--color-toggle-outline-border)] data-[variant='divided']:[&_button:not(:first-of-type)]:border-l-0\n        data-[variant='divided']:[&_button:not(:last-of-type)]:[border-right-color:var(--color-toggle-outline-divider)] data-[variant='divided']:[&_button]:border-y-0\n        data-[variant='divided']:[&_button:first-of-type]:border-l-0 data-[variant='divided']:[&_button:last-of-type]:border-r-0\n        data-[variant='divided']:[&_button[data-state='on']:not(:last-of-type)]:[border-right-color:var(--color-toggle-border--active)]`,\n        className,\n      )}\n      data-layout={layout}\n      data-size={size}\n      data-slot='toggle-group'\n      data-testid='spectral-toggle-group'\n      data-variant={variant}\n      orientation={orientation}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, layout, activeColor, activeTextColor, orientation }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,eAAe,EAAE,WAAW,SAAS,MAAM,QAAQ,aAAa,iBAAiB,aAAa,UAAU,GAAG,YAA8B;AACpJ,QACE,oBAAC,iBAAD;EACE,WAAW,GACT;;;;;;;;0IASA,UACD;EACD,eAAa;EACb,aAAW;EACX,aAAU;EACV,eAAY;EACZ,gBAAc;EACD;EACb,GAAI;YAEJ,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;IAAE;IAAS;IAAM;IAAQ;IAAa;IAAiB;IAAa;GAAG;GAAuC;EAClI"}

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"mappings":";;;;;;;;cAKa,eAAA;EAAe,aAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,QAAA,MAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAUpG,OAAA;EAAA,GAAO;AAAA,GAAkB,cAAA,QAAsB,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAYrE,cAAA;EAAc,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAczG,eAAA,GAAe,KAAA;;IAapB,iCAAA,CAAA,SAAA;AAAA,cAcY,cAAA;EAAc,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAQxB,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IACxC,YAAA,QAAoB,eAAA;EAClB,SAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Tooltip.d.ts","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"mappings":";;;;;;;;cAKa,eAAA;EAAe,aAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,QAAA,MAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIpG,OAAA;EAAA,GAAO;AAAA,GAAkB,cAAA,QAAsB,gBAAA,CAAiB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAQrE,cAAA;EAAc,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAqC,cAAA,QAAsB,gBAAA,CAAiB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAQzG,eAAA,GAAe,KAAA;;IAapB,iCAAA,CAAA,SAAA;AAAA,cAcY,cAAA;EAAc,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAQxB,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IACxC,YAAA,QAAoB,eAAA;EAClB,SAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA"}