@spear-ai/spectral 1.15.0 → 1.15.2

package/dist/Toggle.js

@@ -1,33 +1,18 @@
 'use client';
 import { cn } from "./utils/twUtils.js";
+import { getActiveColorStyle } from "./utils/activeColorStyle.js";
 import { ToggleBase } from "./Toggle/ToggleBase.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
 //#region src/components/Toggle/Toggle.tsx
-const RAW_COLOR_PATTERN = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i;
-const BASE_COLOR_PATTERN = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
-const resolveColor = (color) => {
-	if (RAW_COLOR_PATTERN.test(color)) return color;
-	if (BASE_COLOR_PATTERN.test(color)) return `var(--horizon-color-${color})`;
-	return `var(--color-${color})`;
-};
-const getActiveColorStyle = (activeColor, activeTextColor) => {
-	if (!activeColor && !activeTextColor) return void 0;
-	return {
-		...activeColor && {
-			"--color-toggle-bg--active": resolveColor(activeColor),
-			"--color-toggle-border--active": resolveColor(activeColor)
-		},
-		...activeTextColor && { "--color-toggle-text--active": resolveColor(activeTextColor) }
-	};
-};
 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"
+			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"
 		},
 		size: {
 			default: `h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4`,
@@ -45,7 +30,7 @@ const toggleVariants = cva(`gap-2 rounded-md text-sm shadow-sm font-medium inlin
 		layout: "default"
 	}
 });
-const Toggle = ({ ref, className, variant, size, layout, disabled, activeColor, activeTextColor, style, ...props }) => {
+const Toggle = ({ ref, className, variant, size, layout, disabled, activeColor = "default", activeTextColor, style, ...props }) => {
 	return /* @__PURE__ */ jsx(ToggleBase, {
 		ref,
 		disabled,

package/dist/Toggle.js.map

@@ -1 +1 @@
-{"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 CSSProperties, type Ref } from 'react'\nimport { ToggleBase } from './ToggleBase'\n\nexport type ActiveColor = string\n\nconst RAW_COLOR_PATTERN = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\\(|transparent|currentcolor)/i\nconst BASE_COLOR_PATTERN = /^(success|warning|danger|primary|neutral|secondary)-\\d+$/\n\nconst resolveColor = (color: string): string => {\n  if (RAW_COLOR_PATTERN.test(color)) return color\n  // Base palette colors use --horizon-color-* (always available, not tree-shaken)\n  if (BASE_COLOR_PATTERN.test(color)) return `var(--horizon-color-${color})`\n  // Semantic tokens use --color-*\n  return `var(--color-${color})`\n}\n\nexport const getActiveColorStyle = (activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor): CSSProperties | undefined => {\n  if (!activeColor && !activeTextColor) return undefined\n\n  return {\n    ...(activeColor && {\n      '--color-toggle-bg--active': resolveColor(activeColor),\n      '--color-toggle-border--active': resolveColor(activeColor),\n    }),\n    ...(activeTextColor && {\n      '--color-toggle-text--active': resolveColor(activeTextColor),\n    }),\n  } as CSSProperties\n}\n\nexport type ToggleProps = ComponentProps<typeof ToggleBase> &\n  VariantProps<typeof toggleVariants> & {\n    activeColor?: ActiveColor\n    activeTextColor?: ActiveColor\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      },\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,\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":";;;;;;;;AAOA,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB,UAA0B;AAC9C,KAAI,kBAAkB,KAAK,MAAM,CAAE,QAAO;AAE1C,KAAI,mBAAmB,KAAK,MAAM,CAAE,QAAO,uBAAuB,MAAM;AAExE,QAAO,eAAe,MAAM;;AAG9B,MAAa,uBAAuB,aAAsC,oBAA6D;AACrI,KAAI,CAAC,eAAe,CAAC,gBAAiB,QAAO;AAE7C,QAAO;EACL,GAAI,eAAe;GACjB,6BAA6B,aAAa,YAAY;GACtD,iCAAiC,aAAa,YAAY;GAC3D;EACD,GAAI,mBAAmB,EACrB,+BAA+B,aAAa,gBAAgB,EAC7D;EACF;;AASH,MAAa,iBAAiB,IAC5B,s0BACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACV;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,aACA,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"}
+{"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"}

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,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"}
+{"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"}

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 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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"}
+{"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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"}

package/dist/ToggleGroup/ToggleGroupItem.d.ts

@@ -1,5 +1,6 @@
 'use client';
-import { ActiveColor, toggleVariants } from "../Toggle.js";
+import { ActiveColor, ActiveTextColor } from "../utils/activeColorStyle.js";
+import { toggleVariants } from "../Toggle.js";
 import { ToggleGroupItemBase } from "./ToggleGroupBase.js";
 import { ComponentProps, Ref } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -8,7 +9,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/ToggleGroup/ToggleGroupItem.d.ts
 type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
   activeColor?: ActiveColor;
-  activeTextColor?: ActiveColor;
+  activeTextColor?: ActiveTextColor;
 };
 declare function ToggleGroupItem({
   activeColor,

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"mappings":";;;;;;;;KAOY,oBAAA,GAAuB,cAAA,QAAsB,mBAAA,IACvD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,WAAA;AAAA;AAAA;EAIpB,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,MAAA;EACA,GAAA;EACA,IAAA;EACA,KAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"ToggleGroupItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"mappings":";;;;;;;;;KAQY,oBAAA,GAAuB,cAAA,QAAsB,mBAAA,IACvD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,eAAA;AAAA;AAAA;EAIpB,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,MAAA;EACA,GAAA;EACA,IAAA;EACA,KAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,oBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/ToggleGroup/ToggleGroupItem.js

@@ -1,6 +1,7 @@
 'use client';
 import { cn } from "../utils/twUtils.js";
-import { getActiveColorStyle, toggleVariants } from "../Toggle.js";
+import { getActiveColorStyle } from "../utils/activeColorStyle.js";
+import { toggleVariants } from "../Toggle.js";
 import { ToggleGroupContext } from "../components/ToggleGroup/ToggleGroup.context.js";
 import { ToggleGroupItemBase } from "./ToggleGroupBase.js";
 import { useContext } from "react";
@@ -20,7 +21,7 @@ const ToggleGroupItem = ({ activeColor, activeTextColor, children, className, la
 			variant: resolvedVariant,
 			size: resolvedSize,
 			layout: resolvedLayout
-		}), "group 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-selected-primary data-[variant=outline]:data-[state=on]:hover:border-selected-primary", 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=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),
 		"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 { getActiveColorStyle, toggleVariants, type ActiveColor } from '@components/Toggle/Toggle'\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?: ActiveColor\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 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-selected-primary data-[variant=outline]:data-[state=on]:hover:border-selected-primary',\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":";;;;;;;;;;AAaA,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,kSACA,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=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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupSplitMenuItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"mappings":";;;;;;;UAQiB,6BAAA,SAAsC,IAAA,CAAK,oBAAA;EAC1D,QAAA,EAAU,SAAA;EACV,aAAA,GAAgB,iBAAA;EAChB,iBAAA;EACA,uBAAA;EACA,wBAAA,GAA2B,iBAAA;EAC3B,mBAAA,GAAsB,aAAA;EACtB,eAAA,EAAiB,kBAAA;EACjB,YAAA,GAAe,iBAAA;EACf,aAAA;EACA,kBAAA;EACA,qBAAA,IAAyB,KAAA;EACzB,WAAA,GAAc,SAAA;AAAA;AAAA;EAId,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,MAAA;EACA,qBAAA;EACA,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,6BAAA,GAA6B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"ToggleGroupSplitMenuItem.d.ts","names":[],"sources":["../../src/components/ToggleGroup/ToggleGroupSplitMenuItem.tsx"],"mappings":";;;;;;;UASiB,6BAAA,SAAsC,IAAA,CAAK,oBAAA;EAC1D,QAAA,EAAU,SAAA;EACV,aAAA,GAAgB,iBAAA;EAChB,iBAAA;EACA,uBAAA;EACA,wBAAA,GAA2B,iBAAA;EAC3B,mBAAA,GAAsB,aAAA;EACtB,eAAA,EAAiB,kBAAA;EACjB,YAAA,GAAe,iBAAA;EACf,aAAA;EACA,kBAAA;EACA,qBAAA,IAAyB,KAAA;EACzB,WAAA,GAAc,SAAA;AAAA;AAAA;EAId,WAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,mBAAA;EACA,wBAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,MAAA;EACA,qBAAA;EACA,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,6BAAA,GAA6B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/ToggleGroup/ToggleGroupSplitMenuItem.js

@@ -1,7 +1,8 @@
 'use client';
 import { ChevronDownIcon } from "../Icons/ChevronDownIcon.js";
 import { cn } from "../utils/twUtils.js";
-import { getActiveColorStyle, toggleVariants } from "../Toggle.js";
+import { getActiveColorStyle } from "../utils/activeColorStyle.js";
+import { toggleVariants } from "../Toggle.js";
 import { ToggleGroupContext } from "../components/ToggleGroup/ToggleGroup.context.js";
 import { ToggleGroupItem } from "./ToggleGroupItem.js";
 import { DropdownMenu } from "../DropdownMenu.js";
@@ -52,7 +53,7 @@ const ToggleGroupSplitMenuItem = ({ activeColor, activeTextColor, children, clas
 	};
 	const handleDropdownOpenChange = (nextOpen) => {
 		if (nextOpen) {
-			if (!openerRef.current) openerRef.current = "chevron";
+			openerRef.current ??= "chevron";
 			setOpen(true);
 			setTimeout(() => {
 				focusFirstEnabledDropdownItem("first");

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 { getActiveColorStyle, toggleVariants } from '@components/Toggle/Toggle'\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      if (!openerRef.current) {\n        openerRef.current = 'chevron'\n      }\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',\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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"}

package/dist/ToggleGroup.d.ts

@@ -1,5 +1,6 @@
 'use client';
-import { ActiveColor, toggleVariants } from "./Toggle.js";
+import { ActiveColor, ActiveTextColor } from "./utils/activeColorStyle.js";
+import { toggleVariants } from "./Toggle.js";
 import { ToggleGroupBase } from "./ToggleGroup/ToggleGroupBase.js";
 import { ToggleGroupItem, ToggleGroupItemProps } from "./ToggleGroup/ToggleGroupItem.js";
 import { ToggleGroupSplitMenuItem, ToggleGroupSplitMenuItemProps } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
@@ -10,7 +11,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/ToggleGroup/ToggleGroup.d.ts
 type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants> & {
   activeColor?: ActiveColor;
-  activeTextColor?: ActiveColor;
+  activeTextColor?: ActiveTextColor;
 };
 declare const ToggleGroup: ({
   className,

package/dist/ToggleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.d.ts","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"mappings":";;;;;;;;;;KASY,gBAAA,GAAmB,cAAA,QAAsB,eAAA,IACnD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,WAAA;AAAA;AAAA,cAGT,WAAA;EAAW,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,WAAA;EAAA,eAAA;EAAA,WAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAyG,gBAAA,KAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"ToggleGroup.d.ts","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"mappings":";;;;;;;;;;;KAUY,gBAAA,GAAmB,cAAA,QAAsB,eAAA,IACnD,YAAA,QAAoB,cAAA;EAClB,WAAA,GAAc,WAAA;EACd,eAAA,GAAkB,eAAA;AAAA;AAAA,cAGT,WAAA;EAAW,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,WAAA;EAAA,eAAA;EAAA,WAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAAyG,gBAAA,KAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ToggleGroup.js

@@ -11,7 +11,7 @@ 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 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='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),
 		"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 ActiveColor, type toggleVariants } from '@components/Toggle/Toggle'\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?: ActiveColor\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 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":";;;;;;;;;;;AAeA,MAAa,eAAe,EAAE,WAAW,SAAS,MAAM,QAAQ,aAAa,iBAAiB,aAAa,UAAU,GAAG,YAA8B;AACpJ,QACE,oBAAC,iBAAD;EACE,WAAW,GACT,glBACA,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='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"}

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,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"}
+{"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"}

package/dist/Tooltip.js

@@ -30,7 +30,7 @@ const TooltipTrigger = ({ asChild, children, ...props }) => {
 		children
 	});
 };
-const tooltipVariants = cva(`tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary will-change-transform outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`, {
+const tooltipVariants = cva(`tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`, {
 	variants: { variant: {
 		default: "",
 		outline: "border-2 border-tooltip-outline-border"

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport const TooltipProvider = ({ delayDuration = 0, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider data-slot='tooltip-provider' delayDuration={delayDuration} {...props} />\n}\n\nexport const Tooltip = ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot='tooltip' data-testid='spectral-tooltip' {...props} />\n    </TooltipProvider>\n  )\n}\n\nexport const TooltipTrigger = ({ asChild, children, ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return (\n    <TooltipPrimitive.Trigger asChild={asChild} className='w-fit' data-slot='tooltip-trigger' data-testid='spectral-tooltip-trigger' {...props}>\n      {children}\n    </TooltipPrimitive.Trigger>\n  )\n}\n\nconst tooltipVariants = cva(\n  `tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary will-change-transform outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`,\n  {\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border-2 border-tooltip-outline-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst tooltipArrowVariants = cva('size-2.5 z-[-1] rotate-45 rounded-[2px] bg-tooltip-arrow fill-tooltip-arrow', {\n  variants: {\n    variant: {\n      default: '-translate-y-[calc(50%+1px)]',\n      outline: '-translate-y-[calc(50%-1.5px)] border-2 border-t-0 border-l-0 border-tooltip-outline-arrow',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const TooltipContent = ({\n  children,\n  className,\n  showArrow = false,\n  side,\n  sideOffset = 0,\n  variant = 'default',\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content> &\n  VariantProps<typeof tooltipVariants> & {\n    showArrow?: boolean\n  }) => {\n  return (\n    <TooltipPrimitive.Portal data-testid='spectral-tooltip-portal' data-slot='tooltip-portal'>\n      <TooltipPrimitive.Content className={cn(tooltipVariants({ variant }), className)} data-slot='tooltip-content' data-testid='spectral-tooltip-content' side={side} sideOffset={sideOffset} {...props}>\n        {children}\n        {showArrow && <TooltipPrimitive.Arrow className={cn(tooltipArrowVariants({ variant }))} height={8} />}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAKA,MAAa,mBAAmB,EAAE,gBAAgB,GAAG,GAAG,YAA8D;AACpH,QAAO,oBAAC,iBAAiB,UAAlB;EAA2B,aAAU;EAAkC;EAAe,GAAI;EAAS;;AAG5G,MAAa,WAAW,EAAE,GAAG,YAA0D;AACrF,QACE,oBAAC,iBAAD,YACE,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,eAAY;EAAmB,GAAI;EAAS,GACvE;;AAItB,MAAa,kBAAkB,EAAE,SAAS,UAAU,GAAG,YAA6D;AAClH,QACE,oBAAC,iBAAiB,SAAlB;EAAmC;EAAS,WAAU;EAAQ,aAAU;EAAkB,eAAY;EAA2B,GAAI;EAClI;EACwB;;AAI/B,MAAM,kBAAkB,IACtB,ymBACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAM,uBAAuB,IAAI,+EAA+E;CAC9G,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,UACA,WACA,YAAY,OACZ,MACA,aAAa,GACb,UAAU,WACV,GAAG,YAIG;AACN,QACE,oBAAC,iBAAiB,QAAlB;EAAyB,eAAY;EAA0B,aAAU;YACvE,qBAAC,iBAAiB,SAAlB;GAA0B,WAAW,GAAG,gBAAgB,EAAE,SAAS,CAAC,EAAE,UAAU;GAAE,aAAU;GAAkB,eAAY;GAAiC;GAAkB;GAAY,GAAI;aAA7L,CACG,UACA,aAAa,oBAAC,iBAAiB,OAAlB;IAAwB,WAAW,GAAG,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAAE,QAAQ;IAAK,EAC5E;;EACH"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport const TooltipProvider = ({ delayDuration = 0, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot='tooltip-provider'\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nexport const Tooltip = ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root\n        data-slot='tooltip'\n        data-testid='spectral-tooltip'\n        {...props}\n      />\n    </TooltipProvider>\n  )\n}\n\nexport const TooltipTrigger = ({ asChild, children, ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return (\n    <TooltipPrimitive.Trigger\n      asChild={asChild}\n      className='w-fit'\n      data-slot='tooltip-trigger'\n      data-testid='spectral-tooltip-trigger'\n      {...props}\n    >\n      {children}\n    </TooltipPrimitive.Trigger>\n  )\n}\n\nconst tooltipVariants = cva(\n  `tooltip-effects rounded-md px-3 py-1.5 text-xs pointer-events-auto z-50 w-fit bg-tooltip-bg text-text-primary outline-none select-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95`,\n  {\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border-2 border-tooltip-outline-border',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nconst tooltipArrowVariants = cva('size-2.5 z-[-1] rotate-45 rounded-[2px] bg-tooltip-arrow fill-tooltip-arrow', {\n  variants: {\n    variant: {\n      default: '-translate-y-[calc(50%+1px)]',\n      outline: '-translate-y-[calc(50%-1.5px)] border-2 border-t-0 border-l-0 border-tooltip-outline-arrow',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const TooltipContent = ({\n  children,\n  className,\n  showArrow = false,\n  side,\n  sideOffset = 0,\n  variant = 'default',\n  ...props\n}: ComponentProps<typeof TooltipPrimitive.Content> &\n  VariantProps<typeof tooltipVariants> & {\n    showArrow?: boolean\n  }) => {\n  return (\n    <TooltipPrimitive.Portal\n      data-testid='spectral-tooltip-portal'\n      data-slot='tooltip-portal'\n    >\n      <TooltipPrimitive.Content\n        className={cn(tooltipVariants({ variant }), className)}\n        data-slot='tooltip-content'\n        data-testid='spectral-tooltip-content'\n        side={side}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow\n            className={cn(tooltipArrowVariants({ variant }))}\n            height={8}\n          />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAKA,MAAa,mBAAmB,EAAE,gBAAgB,GAAG,GAAG,YAA8D;AACpH,QACE,oBAAC,iBAAiB,UAAlB;EACE,aAAU;EACK;EACf,GAAI;EACJ;;AAIN,MAAa,WAAW,EAAE,GAAG,YAA0D;AACrF,QACE,oBAAC,iBAAD,YACE,oBAAC,iBAAiB,MAAlB;EACE,aAAU;EACV,eAAY;EACZ,GAAI;EACJ,GACc;;AAItB,MAAa,kBAAkB,EAAE,SAAS,UAAU,GAAG,YAA6D;AAClH,QACE,oBAAC,iBAAiB,SAAlB;EACW;EACT,WAAU;EACV,aAAU;EACV,eAAY;EACZ,GAAI;EAEH;EACwB;;AAI/B,MAAM,kBAAkB,IACtB,mlBACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAM,uBAAuB,IAAI,+EAA+E;CAC9G,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,UACA,WACA,YAAY,OACZ,MACA,aAAa,GACb,UAAU,WACV,GAAG,YAIG;AACN,QACE,oBAAC,iBAAiB,QAAlB;EACE,eAAY;EACZ,aAAU;YAEV,qBAAC,iBAAiB,SAAlB;GACE,WAAW,GAAG,gBAAgB,EAAE,SAAS,CAAC,EAAE,UAAU;GACtD,aAAU;GACV,eAAY;GACN;GACM;GACZ,GAAI;aANN,CAQG,UACA,aACC,oBAAC,iBAAiB,OAAlB;IACE,WAAW,GAAG,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAChD,QAAQ;IACR,EAEqB;;EACH"}

package/dist/Tray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tray.d.ts","names":[],"sources":["../src/components/Tray/Tray.tsx"],"mappings":";;;;;;;;cASM,mBAAA,GAAmB,KAAA;;IAYvB,iCAAA,CAAA,SAAA;AAAA,KAkBU,aAAA,GAAgB,wBAAA,QAAgC,MAAA,CAAS,IAAA;EACnE,QAAA,GAAW,SAAA;EACX,IAAA;AAAA;AAAA;EAGqB,QAAA;EAAU,IAAA;EAAA,GAAgB;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAyBrE,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,OAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAIC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,KAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAgBW,gBAAA,GAAmB,wBAAA,QAAgC,MAAA,CAAS,OAAA,IACtE,YAAA,QAAoB,mBAAA;sFAElB,YAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA;gBAIC,SAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EACA,IAAA,EAAM,QAAA;EAAA,GACH;AAAA,GACF,gBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA8BC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAWC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,kBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAQC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,oBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAGW,aAAA,GAAgB,wBAAA;EAC1B,YAAA;AAAA;AAAA;EAIA,YAAA,EAAc,OAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,aAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"Tray.d.ts","names":[],"sources":["../src/components/Tray/Tray.tsx"],"mappings":";;;;;;;;cAQM,mBAAA,GAAmB,KAAA;;IAYvB,iCAAA,CAAA,SAAA;AAAA,KAkBU,aAAA,GAAgB,wBAAA,QAAgC,MAAA,CAAS,IAAA;EACnE,QAAA,GAAW,SAAA;EACX,IAAA;AAAA;AAAA;EAGqB,QAAA;EAAU,IAAA;EAAA,GAAgB;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA4BrE,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,OAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAYC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA,QAAgC,MAAA,CAAS,KAAA;EAC1C,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KA6BW,gBAAA,GAAmB,wBAAA,QAAgC,MAAA,CAAS,OAAA,IACtE,YAAA,QAAoB,mBAAA;sFAElB,YAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA;gBAIC,SAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EACA,IAAA,EAAM,QAAA;EAAA,GACH;AAAA,GACF,gBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EA0BC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAoBC,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,kBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAaC,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,wBAAA;EACD,GAAA,GAAM,GAAA,CAAI,oBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAUW,aAAA,GAAgB,wBAAA;EAC1B,YAAA;AAAA;AAAA;EAIA,YAAA,EAAc,OAAA;EACd,QAAA;EACA,SAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,aAAA;EACD,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Tray.js

@@ -7,7 +7,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Drawer } from "vaul";
 import { AnimatePresence, motion } from "motion/react";
-import useMeasure from "react-use-measure";
 
 //#region src/components/Tray/Tray.tsx
 const TrayContentVariants = cva("bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none", {
@@ -71,7 +70,6 @@ TrayOverlay.displayName = "TrayOverlay";
 const TrayContent = ({ "aria-label": ariaLabel, children, className, ref, size: sizeProp, ...props }) => {
 	const { size: contextSize } = useTrayContext();
 	const size = sizeProp ?? contextSize;
-	const [elementRef, bounds] = useMeasure();
 	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(TrayOverlay, {}), /* @__PURE__ */ jsx(Drawer.Content, {
 		"aria-describedby": void 0,
 		asChild: true,
@@ -79,33 +77,18 @@ const TrayContent = ({ "aria-label": ariaLabel, children, className, ref, size:
 		"data-testid": "spectral-tray-content",
 		ref,
 		...props,
-		children: /* @__PURE__ */ jsxs(motion.div, {
-			animate: {
-				height: bounds.height,
-				transition: {
-					duration: .27,
-					ease: [
-						.25,
-						1,
-						.5,
-						1
-					]
-				}
-			},
-			children: [/* @__PURE__ */ jsx(Drawer.Title, {
-				className: "sr-only",
-				children: ariaLabel ?? "Tray"
-			}), /* @__PURE__ */ jsx("div", {
-				ref: elementRef,
-				className: "px-6 pb-6 pt-2.5 antialiased",
-				children
-			})]
-		})
+		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Drawer.Title, {
+			className: "sr-only",
+			children: ariaLabel ?? "Tray"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-6 pb-6 pt-2.5 antialiased",
+			children
+		})] })
 	})] });
 };
 TrayContent.displayName = "TrayContent";
 const TrayHeader = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("space-y-1.5 pb-4 relative flex flex-col text-start", className),
+	className: cn("gap-1.5 pb-4 relative flex flex-col text-start", className),
 	"data-testid": "spectral-tray-header",
 	ref,
 	...props,
@@ -137,21 +120,6 @@ TraySubtitle.displayName = "TraySubtitle";
 const TrayBody = ({ animationKey: keyProp, children, className, ref, ...props }) => {
 	const { animationKey: contextKey } = useTrayContext();
 	const key = keyProp ?? contextKey;
-	const previousHeightRef = useRef(null);
-	const [elementRef, bounds] = useMeasure();
-	const opacityDuration = useMemo(() => {
-		const currentHeight = bounds.height;
-		const previousHeight = previousHeightRef.current;
-		const MAX_DURATION = .27;
-		const MIN_DURATION = .15;
-		if (!previousHeightRef.current) {
-			previousHeightRef.current = currentHeight;
-			return MIN_DURATION;
-		}
-		const heightDifference = Math.abs(currentHeight - (previousHeight ?? 0));
-		previousHeightRef.current = currentHeight;
-		return Math.min(Math.max(heightDifference / 500, MIN_DURATION), MAX_DURATION);
-	}, [bounds.height]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-testid": "spectral-tray-body",
@@ -159,7 +127,7 @@ const TrayBody = ({ animationKey: keyProp, children, className, ref, ...props })
 		...props,
 		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			initial: false,
-			mode: "popLayout",
+			mode: "wait",
 			custom: key,
 			children: /* @__PURE__ */ jsx(motion.div, {
 				animate: {
@@ -175,15 +143,9 @@ const TrayBody = ({ animationKey: keyProp, children, className, ref, ...props })
 					opacity: 0,
 					scale: .96
 				},
-				ref: elementRef,
 				transition: {
-					duration: opacityDuration,
-					ease: [
-						.26,
-						.08,
-						.25,
-						1
-					]
+					duration: .2,
+					ease: "easeOut"
 				},
 				children
 			}, key)

package/dist/Tray.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tray.js","names":["TrayBase"],"sources":["../src/components/Tray/Tray.tsx"],"sourcesContent":["import { ButtonIcon } from '@components/ButtonIcon/ButtonIcon'\nimport { CloseIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useContext, useMemo, useRef, type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react'\nimport useMeasure from 'react-use-measure'\nimport { Drawer as TrayBase } from 'vaul'\n\nconst TrayContentVariants = cva('bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none', {\n  variants: {\n    size: {\n      sm: 'max-w-[400px]',\n      md: 'max-w-[600px]',\n      lg: 'max-w-[800px]',\n      full: 'max-w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\ninterface TrayContextValue {\n  animationKey: string | number\n  setAnimationKey: (key: string | number) => void\n  size: 'sm' | 'md' | 'lg' | 'full'\n}\n\nconst TrayContext = createContext<TrayContextValue | undefined>(undefined)\n\nconst useTrayContext = () => {\n  const context = useContext(TrayContext)\n  if (!context) {\n    throw new Error('Tray components must be used within Tray root')\n  }\n  return context\n}\n\nexport type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {\n  children?: ReactNode\n  size?: 'sm' | 'md' | 'lg' | 'full'\n}\n\nexport const Tray = ({ children, size = 'sm', ...props }: TrayBaseProps) => {\n  const animationKeyRef = useRef<string | number>('default')\n\n  const contextValue = useMemo(\n    () => ({\n      animationKey: animationKeyRef.current,\n      setAnimationKey: (key: string | number) => {\n        animationKeyRef.current = key\n      },\n      size,\n    }),\n    [size],\n  )\n\n  return (\n    <TrayContext.Provider value={contextValue}>\n      <TrayBase.Root data-testid='spectral-tray' {...props}>\n        {children}\n      </TrayBase.Root>\n    </TrayContext.Provider>\n  )\n}\nTray.displayName = 'Tray'\n\nexport const TrayTrigger = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {\n  ref?: Ref<HTMLButtonElement>\n}) => <TrayBase.Trigger className={cn(className)} data-testid='spectral-tray-trigger' data-vaul-no-drag='' ref={ref} {...props} />\nTrayTrigger.displayName = 'TrayTrigger'\n\nexport const TrayClose = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Close> & {\n  ref?: Ref<HTMLButtonElement>\n}) => (\n  <TrayBase.Close asChild className={cn(className)} data-testid='spectral-tray-close' data-vaul-no-drag='' ref={ref} {...props}>\n    <CloseIcon />\n  </TrayBase.Close>\n)\nTrayClose.displayName = 'TrayClose'\n\nconst TrayOverlay = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Overlay> & {\n  ref?: Ref<HTMLDivElement>\n}) => <TrayBase.Overlay className={cn('inset-0 fixed z-10 bg-overlay', className)} ref={ref} {...props} />\nTrayOverlay.displayName = 'TrayOverlay'\n\nexport type TrayContentProps = ComponentPropsWithoutRef<typeof TrayBase.Content> &\n  VariantProps<typeof TrayContentVariants> & {\n    /** Accessible label for the tray (used when no visible `TrayTitle` is provided). */\n    'aria-label'?: string\n    children?: ReactNode\n  }\n\nexport const TrayContent = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref,\n  size: sizeProp,\n  ...props\n}: TrayContentProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { size: contextSize } = useTrayContext()\n  const size = sizeProp ?? contextSize\n  const [elementRef, bounds] = useMeasure()\n\n  return (\n    <TrayBase.Portal>\n      <TrayOverlay />\n      <TrayBase.Content aria-describedby={undefined} asChild className={cn(TrayContentVariants({ size }), className)} data-testid='spectral-tray-content' ref={ref} {...props}>\n        <motion.div\n          animate={{\n            height: bounds.height,\n            transition: {\n              duration: 0.27,\n              ease: [0.25, 1, 0.5, 1],\n            },\n          }}\n        >\n          <TrayBase.Title className='sr-only'>{ariaLabel ?? 'Tray'}</TrayBase.Title>\n          <div ref={elementRef} className='px-6 pb-6 pt-2.5 antialiased'>\n            {children}\n          </div>\n        </motion.div>\n      </TrayBase.Content>\n    </TrayBase.Portal>\n  )\n}\nTrayContent.displayName = 'TrayContent'\n\nexport const TrayHeader = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLDivElement>\n}) => (\n  <div className={cn('space-y-1.5 pb-4 relative flex flex-col text-start', className)} data-testid='spectral-tray-header' ref={ref} {...props}>\n    {children}\n    <TrayClose className='text-neutral-400 hover:text-neutral-100 p-1 top-0 absolute right-[-14px] z-10 cursor-pointer rounded-full transition-colors hover:scale-110 hover:bg-level-four'>\n      <ButtonIcon icon={<CloseIcon />} label='Close tray' shape='circle' />\n    </TrayClose>\n  </div>\n)\nTrayHeader.displayName = 'TrayHeader'\n\nexport const TrayTitle = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'h2'> & {\n  ref?: Ref<HTMLHeadingElement>\n}) => (\n  <h2 className={cn('text-xl font-semibold text-text-primary', className)} data-testid='spectral-tray-title' ref={ref} {...props}>\n    {children}\n  </h2>\n)\nTrayTitle.displayName = 'TrayTitle'\n\nexport const TraySubtitle = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'p'> & {\n  ref?: Ref<HTMLParagraphElement>\n}) => <p className={cn('text-sm text-text-secondary', className)} data-testid='spectral-tray-subtitle' ref={ref} {...props} />\nTraySubtitle.displayName = 'TraySubtitle'\n\nexport type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {\n  animationKey?: string | number\n}\n\nexport const TrayBody = ({\n  animationKey: keyProp,\n  children,\n  className,\n  ref,\n  ...props\n}: TrayBodyProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { animationKey: contextKey } = useTrayContext()\n  const key = keyProp ?? contextKey\n  const previousHeightRef = useRef<number | null>(null)\n  const [elementRef, bounds] = useMeasure()\n\n  const opacityDuration = useMemo(() => {\n    const currentHeight = bounds.height\n    const previousHeight = previousHeightRef.current\n\n    const MAX_DURATION = 0.27\n    const MIN_DURATION = 0.15\n\n    if (!previousHeightRef.current) {\n      previousHeightRef.current = currentHeight\n      return MIN_DURATION\n    }\n\n    const heightDifference = Math.abs(currentHeight - (previousHeight ?? 0))\n    previousHeightRef.current = currentHeight\n\n    const duration = Math.min(Math.max(heightDifference / 500, MIN_DURATION), MAX_DURATION)\n\n    return duration\n  }, [bounds.height])\n\n  return (\n    <div ref={ref} data-testid='spectral-tray-body' className={cn(className)} {...props}>\n      <AnimatePresence initial={false} mode='popLayout' custom={key}>\n        <motion.div\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          exit={{ opacity: 0, scale: 0.96 }}\n          initial={{ opacity: 0, scale: 0.96 }}\n          key={key}\n          ref={elementRef}\n          transition={{\n            duration: opacityDuration,\n            ease: [0.26, 0.08, 0.25, 1],\n          }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\nTrayBody.displayName = 'TrayBody'\n"],"mappings":"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"}
+{"version":3,"file":"Tray.js","names":["TrayBase"],"sources":["../src/components/Tray/Tray.tsx"],"sourcesContent":["import { ButtonIcon } from '@components/ButtonIcon/ButtonIcon'\nimport { CloseIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useContext, useMemo, useRef, type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react'\nimport { Drawer as TrayBase } from 'vaul'\n\nconst TrayContentVariants = cva('bottom-4 rounded-2xl sm:max-md:max-w-full fixed left-1/2 z-10 w-full -translate-x-1/2 overflow-hidden bg-drawer-bg outline-none', {\n  variants: {\n    size: {\n      sm: 'max-w-[400px]',\n      md: 'max-w-[600px]',\n      lg: 'max-w-[800px]',\n      full: 'max-w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\ninterface TrayContextValue {\n  animationKey: string | number\n  setAnimationKey: (key: string | number) => void\n  size: 'sm' | 'md' | 'lg' | 'full'\n}\n\nconst TrayContext = createContext<TrayContextValue | undefined>(undefined)\n\nconst useTrayContext = () => {\n  const context = useContext(TrayContext)\n  if (!context) {\n    throw new Error('Tray components must be used within Tray root')\n  }\n  return context\n}\n\nexport type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {\n  children?: ReactNode\n  size?: 'sm' | 'md' | 'lg' | 'full'\n}\n\nexport const Tray = ({ children, size = 'sm', ...props }: TrayBaseProps) => {\n  const animationKeyRef = useRef<string | number>('default')\n\n  const contextValue = useMemo(\n    () => ({\n      animationKey: animationKeyRef.current,\n      setAnimationKey: (key: string | number) => {\n        animationKeyRef.current = key\n      },\n      size,\n    }),\n    [size],\n  )\n\n  return (\n    <TrayContext.Provider value={contextValue}>\n      <TrayBase.Root\n        data-testid='spectral-tray'\n        {...props}\n      >\n        {children}\n      </TrayBase.Root>\n    </TrayContext.Provider>\n  )\n}\nTray.displayName = 'Tray'\n\nexport const TrayTrigger = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Trigger> & {\n  ref?: Ref<HTMLButtonElement>\n}) => (\n  <TrayBase.Trigger\n    className={cn(className)}\n    data-testid='spectral-tray-trigger'\n    data-vaul-no-drag=''\n    ref={ref}\n    {...props}\n  />\n)\nTrayTrigger.displayName = 'TrayTrigger'\n\nexport const TrayClose = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Close> & {\n  ref?: Ref<HTMLButtonElement>\n}) => (\n  <TrayBase.Close\n    asChild\n    className={cn(className)}\n    data-testid='spectral-tray-close'\n    data-vaul-no-drag=''\n    ref={ref}\n    {...props}\n  >\n    <CloseIcon />\n  </TrayBase.Close>\n)\nTrayClose.displayName = 'TrayClose'\n\nconst TrayOverlay = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<typeof TrayBase.Overlay> & {\n  ref?: Ref<HTMLDivElement>\n}) => (\n  <TrayBase.Overlay\n    className={cn('inset-0 fixed z-10 bg-overlay', className)}\n    ref={ref}\n    {...props}\n  />\n)\nTrayOverlay.displayName = 'TrayOverlay'\n\nexport type TrayContentProps = ComponentPropsWithoutRef<typeof TrayBase.Content> &\n  VariantProps<typeof TrayContentVariants> & {\n    /** Accessible label for the tray (used when no visible `TrayTitle` is provided). */\n    'aria-label'?: string\n    children?: ReactNode\n  }\n\nexport const TrayContent = ({\n  'aria-label': ariaLabel,\n  children,\n  className,\n  ref,\n  size: sizeProp,\n  ...props\n}: TrayContentProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { size: contextSize } = useTrayContext()\n  const size = sizeProp ?? contextSize\n\n  return (\n    <TrayBase.Portal>\n      <TrayOverlay />\n      <TrayBase.Content\n        aria-describedby={undefined}\n        asChild\n        className={cn(TrayContentVariants({ size }), className)}\n        data-testid='spectral-tray-content'\n        ref={ref}\n        {...props}\n      >\n        <div>\n          <TrayBase.Title className='sr-only'>{ariaLabel ?? 'Tray'}</TrayBase.Title>\n          <div className='px-6 pb-6 pt-2.5 antialiased'>{children}</div>\n        </div>\n      </TrayBase.Content>\n    </TrayBase.Portal>\n  )\n}\nTrayContent.displayName = 'TrayContent'\n\nexport const TrayHeader = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLDivElement>\n}) => (\n  <div\n    className={cn('gap-1.5 pb-4 relative flex flex-col text-start', className)}\n    data-testid='spectral-tray-header'\n    ref={ref}\n    {...props}\n  >\n    {children}\n    <TrayClose className='text-neutral-400 hover:text-neutral-100 p-1 top-0 absolute right-[-14px] z-10 cursor-pointer rounded-full transition-colors hover:scale-110 hover:bg-level-four'>\n      <ButtonIcon\n        icon={<CloseIcon />}\n        label='Close tray'\n        shape='circle'\n      />\n    </TrayClose>\n  </div>\n)\nTrayHeader.displayName = 'TrayHeader'\n\nexport const TrayTitle = ({\n  children,\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'h2'> & {\n  ref?: Ref<HTMLHeadingElement>\n}) => (\n  <h2\n    className={cn('text-xl font-semibold text-text-primary', className)}\n    data-testid='spectral-tray-title'\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h2>\n)\nTrayTitle.displayName = 'TrayTitle'\n\nexport const TraySubtitle = ({\n  className,\n  ref,\n  ...props\n}: ComponentPropsWithoutRef<'p'> & {\n  ref?: Ref<HTMLParagraphElement>\n}) => (\n  <p\n    className={cn('text-sm text-text-secondary', className)}\n    data-testid='spectral-tray-subtitle'\n    ref={ref}\n    {...props}\n  />\n)\nTraySubtitle.displayName = 'TraySubtitle'\n\nexport type TrayBodyProps = ComponentPropsWithoutRef<'div'> & {\n  animationKey?: string | number\n}\n\nexport const TrayBody = ({\n  animationKey: keyProp,\n  children,\n  className,\n  ref,\n  ...props\n}: TrayBodyProps & {\n  ref?: Ref<HTMLDivElement>\n}) => {\n  const { animationKey: contextKey } = useTrayContext()\n  const key = keyProp ?? contextKey\n\n  return (\n    <div\n      ref={ref}\n      data-testid='spectral-tray-body'\n      className={cn(className)}\n      {...props}\n    >\n      <AnimatePresence\n        initial={false}\n        mode='wait'\n        custom={key}\n      >\n        <motion.div\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          exit={{ opacity: 0, scale: 0.96 }}\n          initial={{ opacity: 0, scale: 0.96 }}\n          key={key}\n          transition={{\n            duration: 0.2,\n            ease: 'easeOut',\n          }}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\nTrayBody.displayName = 'TrayBody'\n"],"mappings":"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"}

package/dist/components/ToggleGroup/ToggleGroup.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.context.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { type ActiveColor, type toggleVariants } from '@components/Toggle/Toggle'\nimport { type VariantProps } from 'class-variance-authority'\nimport { createContext } from 'react'\n\nexport type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {\n  activeColor?: ActiveColor\n  activeTextColor?: ActiveColor\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  layout: 'default',\n  size: 'default',\n  variant: 'default',\n})\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB,cAAuC;CACvE,QAAQ;CACR,MAAM;CACN,SAAS;CACV,CAAC"}
+{"version":3,"file":"ToggleGroup.context.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { type toggleVariants } from '@components/Toggle/Toggle'\nimport { type ActiveColor, type ActiveTextColor } from '@utils/activeColorStyle'\nimport { type VariantProps } from 'class-variance-authority'\nimport { createContext } from 'react'\n\nexport type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {\n  activeColor?: ActiveColor\n  activeTextColor?: ActiveTextColor\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  layout: 'default',\n  size: 'default',\n  variant: 'default',\n})\n"],"mappings":";;;;;AAWA,MAAa,qBAAqB,cAAuC;CACvE,QAAQ;CACR,MAAM;CACN,SAAS;CACV,CAAC"}

package/dist/styles/horizon/base.css

@@ -22,13 +22,6 @@
     color: var(--color-text-primary);
     font-family: var(--font-sans);
 
-    &[data-scroll-locked] {
-      margin-right: 0 !important;
-      overflow-y: scroll !important;
-      overscroll-behavior: contain;
-      padding-right: 0 !important;
-    }
-
     &::-webkit-scrollbar {
       width: 14px;
     }
@@ -57,3 +50,21 @@
     margin: 0;
   }
 }
+
+/* Keep this unlayered so it beats runtime-injected scroll lock styles */
+
+body[data-scroll-locked][data-scroll-locked] {
+  --removed-body-scroll-bar-size: 0 !important;
+  margin-right: 0 !important;
+  overflow: hidden !important;
+  overscroll-behavior: contain !important;
+  padding-right: 0 !important;
+}
+
+body[data-scroll-locked][data-scroll-locked] .right-scroll-bar-position {
+  right: 0 !important;
+}
+
+body[data-scroll-locked][data-scroll-locked] .width-before-scroll-bar {
+  margin-right: 0 !important;
+}