@spear-ai/spectral 1.15.1 → 1.15.3

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\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  const [elementRef, bounds] = useMeasure()\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        <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\n            ref={elementRef}\n            className='px-6 pb-6 pt-2.5 antialiased'\n          >\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\n    className={cn('space-y-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  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\n      ref={ref}\n      data-testid='spectral-tray-body'\n      className={cn(className)}\n      {...props}\n    >\n      <AnimatePresence\n        initial={false}\n        mode='popLayout'\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          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/index.d.ts

@@ -88,6 +88,8 @@ import { SortZtoAIcon } from "./Icons/SortZtoAIcon.js";
 import { SparklesIcon } from "./Icons/SparklesIcon.js";
 import { StackIcon } from "./Icons/StackIcon.js";
 import { StarIcon } from "./Icons/StarIcon.js";
+import { SyncIcon } from "./Icons/SyncIcon.js";
+import { SyncOffIcon } from "./Icons/SyncOffIcon.js";
 import { TrashIcon } from "./Icons/TrashIcon.js";
 import { UndoIcon } from "./Icons/UndoIcon.js";
 import { UploadIcon } from "./Icons/UploadIcon.js";
@@ -126,4 +128,4 @@ import { useControllableState } from "./hooks/useControllableState.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.js";
 import { cn } from "./utils/twUtils.js";
-export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, SyncIcon, SyncOffIcon, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/index.js

@@ -71,6 +71,8 @@ import { SortZtoAIcon } from "./Icons/SortZtoAIcon.js";
 import { SparklesIcon } from "./Icons/SparklesIcon.js";
 import { StackIcon } from "./Icons/StackIcon.js";
 import { StarIcon } from "./Icons/StarIcon.js";
+import { SyncIcon } from "./Icons/SyncIcon.js";
+import { SyncOffIcon } from "./Icons/SyncOffIcon.js";
 import { TrashIcon } from "./Icons/TrashIcon.js";
 import { UndoIcon } from "./Icons/UndoIcon.js";
 import { UploadIcon } from "./Icons/UploadIcon.js";
@@ -127,4 +129,4 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
 import { Tray } from "./Tray.js";
 import { useControllableState } from "./hooks/useControllableState.js";
 
-export { Accordion, AdjustmentsIcon, Alert, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, AdjustmentsIcon, Alert, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, SyncIcon, SyncOffIcon, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

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;
+}

package/dist/styles/horizon/colors.css

@@ -9,7 +9,7 @@
   --color-text-secondary: var(--horizon-color-neutral-300);
   --color-text-disabled: var(--horizon-color-neutral-600);
 
-  --color-border-primary: var(--horizon-color-neutral-900);
+  --color-border-primary: var(--horizon-color-neutral-800);
   --color-border-secondary: var(--horizon-color-neutral-700);
 
   --color-accent: var(--horizon-color-accent);
@@ -227,6 +227,8 @@
   --color-tooltip-arrow: var(--horizon-color-level-one);
   --color-tooltip-outline-border: var(--horizon-color-level-four);
   --color-tooltip-outline-arrow: var(--horizon-color-level-four);
+
+  --color-black-40: oklch(0% 0 0 / 40%);
 }
 
 /* light theme variant */