@spear-ai/spectral 1.20.0 → 1.20.2

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 { 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\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        <div>\n          <TrayBase.Title className='sr-only'>{ariaLabel ?? 'Tray'}</TrayBase.Title>\n          <div className='px-6 pb-6 pt-2.5 antialiased'>\n            {children}\n          </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 className={cn('relative flex flex-col gap-1.5 pb-4 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\n  return (\n    <div ref={ref} data-testid='spectral-tray-body' className={cn(className)} {...props}>\n      <AnimatePresence initial={false} mode='wait' 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          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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"}
+{"version":3,"file":"Tray.js","names":[],"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 shadow-elevation-2', {\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\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        <div>\n          <TrayBase.Title className='sr-only'>{ariaLabel ?? 'Tray'}</TrayBase.Title>\n          <div className='px-6 pb-6 pt-2.5 antialiased'>\n            {children}\n          </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 className={cn('relative flex flex-col gap-1.5 pb-4 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\n  return (\n    <div ref={ref} data-testid='spectral-tray-body' className={cn(className)} {...props}>\n      <AnimatePresence initial={false} mode='wait' 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          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

@@ -116,6 +116,7 @@ import { InputOTP, InputOTPBaseProps, InputOTPProps } from "./InputOTP.js";
 import { InputSearch, InputSearchOption, InputSearchProps } from "./InputSearch.js";
 import { Kbd, KbdGroup, KbdGroupProps, KbdProps, KbdSymbol } from "./Kbd.js";
 import { Label, LabelProps } from "./Label.js";
+import { Meter, MeterProps } from "./Meter.js";
 import { MultiSelect, MultiSelectProps } from "./MultiSelect.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.js";
 import { RadialMenu, RadialMenuItem, RadialMenuProps } from "./RadialMenu.js";
@@ -141,4 +142,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, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, 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, DEFAULT_DIRECTIONAL_COLOR_STOPS, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, type DirectionalColorStop, DirectionalColorWheel, DirectionalColorWheelDisclosure, type DirectionalColorWheelDisclosurePosition, type DirectionalColorWheelDisclosureProps, DirectionalColorWheelGlyph, type DirectionalColorWheelGlyphProps, type DirectionalColorWheelProps, type DirectionalSectorCount, 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, InputSearch, type InputSearchOption, type InputSearchProps, IterationArrowIcon, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PdfIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressArrowIcon, ProgressCheckIcon, RadialMenu, type RadialMenuItem, type RadialMenuProps, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, SUPPORTED_SECTOR_COUNTS, 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, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, bearingFromComponents, bearingToPalettePosition, cn, normalizeBearing, sectorBearingRange, sectorId, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, 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, DEFAULT_DIRECTIONAL_COLOR_STOPS, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, type DirectionalColorStop, DirectionalColorWheel, DirectionalColorWheelDisclosure, type DirectionalColorWheelDisclosurePosition, type DirectionalColorWheelDisclosureProps, DirectionalColorWheelGlyph, type DirectionalColorWheelGlyphProps, type DirectionalColorWheelProps, type DirectionalSectorCount, 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, InputSearch, type InputSearchOption, type InputSearchProps, IterationArrowIcon, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, Meter, type MeterProps, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PdfIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressArrowIcon, ProgressCheckIcon, RadialMenu, type RadialMenuItem, type RadialMenuProps, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, SUPPORTED_SECTOR_COUNTS, 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, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, bearingFromComponents, bearingToPalettePosition, cn, normalizeBearing, sectorBearingRange, sectorId, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/index.js

@@ -123,6 +123,7 @@ import { InputNumeric } from "./InputNumeric.js";
 import { InputOTP } from "./InputOTP.js";
 import { InputSearch } from "./InputSearch.js";
 import { Kbd, KbdGroup } from "./Kbd.js";
+import { Meter } from "./Meter.js";
 import { MultiSelect } from "./MultiSelect.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
 import { RadialMenu } from "./RadialMenu.js";
@@ -142,4 +143,4 @@ import { ToggleGroupSplitMenuItem } from "./ToggleGroup/ToggleGroupSplitMenuItem
 import { ToggleGroup } from "./ToggleGroup.js";
 import { Tray } from "./Tray.js";
 
-export { Accordion, AdjustmentsIcon, Alert, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DEFAULT_DIRECTIONAL_COLOR_STOPS, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, DirectionalColorWheel, DirectionalColorWheelDisclosure, DirectionalColorWheelGlyph, 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, InputSearch, IterationArrowIcon, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PdfIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrinterIcon, ProgressArrowIcon, ProgressCheckIcon, RadialMenu, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, SUPPORTED_SECTOR_COUNTS, 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, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, bearingFromComponents, bearingToPalettePosition, cn, normalizeBearing, sectorBearingRange, sectorId, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, AdjustmentsIcon, Alert, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DEFAULT_DIRECTIONAL_COLOR_STOPS, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, DirectionalColorWheel, DirectionalColorWheelDisclosure, DirectionalColorWheelGlyph, 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, InputSearch, IterationArrowIcon, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, Meter, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PdfIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrinterIcon, ProgressArrowIcon, ProgressCheckIcon, RadialMenu, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, SUPPORTED_SECTOR_COUNTS, 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, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, bearingFromComponents, bearingToPalettePosition, cn, normalizeBearing, sectorBearingRange, sectorId, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/styles/horizon/base.css

@@ -23,7 +23,7 @@
     font-family: var(--font-sans);
 
     &::-webkit-scrollbar {
-      width: 14px;
+      width: 0.875rem;
     }
 
     &::-webkit-scrollbar-track {
@@ -33,7 +33,7 @@
 
     &::-webkit-scrollbar-thumb {
       background: var(--color-level-three);
-      border-radius: 6px;
+      border-radius: 0.375rem;
     }
   }
 
@@ -70,32 +70,47 @@ body[data-scroll-locked][data-scroll-locked] .width-before-scroll-bar {
 }
 
 /* these aren't bundled because horizon has their own set of the same classes */
+.card-effects,
+.card-effects-medium,
 .card-effects-small {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0) 100%),
-    rgba(32, 32, 32, 0.6);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(0.75rem);
+  border: 1px solid var(--color-neutral-900);
   border-radius: 1rem;
+}
+
+.card-effects-small {
+  background:
+    linear-gradient(
+      180deg,
+      oklch(from var(--color-white) l c h / 0.015) 0%,
+      oklch(from var(--color-white) l c h / 0) 100%
+    ),
+    rgba(40, 40, 40, 0.65);
   box-shadow: var(--shadow-elevation-1);
 }
 
 .card-effects-medium {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
-    rgba(36, 36, 36, 0.6);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  border-radius: 1rem;
+    linear-gradient(
+      180deg,
+      oklch(from var(--color-white) l c h / 0.02) 0%,
+      oklch(from var(--color-white) l c h / 0) 100%
+    ),
+    rgba(40, 40, 40, 0.65);
   box-shadow: var(--shadow-elevation-2);
 }
 
 .card-effects {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%),
+    linear-gradient(
+      180deg,
+      oklch(from var(--color-white) l c h / 0.025) 0%,
+      oklch(from var(--color-white) l c h / 0) 100%
+    ),
     rgba(40, 40, 40, 0.65);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  border-radius: 1rem;
   box-shadow: var(--shadow-elevation-3);
 }
+
+.tooltip-effects {
+  box-shadow: var(--shadow-tooltip);
+}

package/dist/styles/horizon/colors.css

@@ -2,9 +2,9 @@
 
 /*
  * `static` forces Tailwind v4 to emit every variable below as a CSS custom
- * property, even ones only referenced from JS (e.g. activeColor inline styles
- * resolve to var(--color-toggle-bg--active-accent)). Without it, Tailwind
- * tree-shakes unused theme vars out of the published spectral.css.
+ * property, even ones only referenced from JS (e.g. `activeColor` inline styles
+ * resolve to `var(--color-toggle-bg--active-accent)`). Without it, Tailwind
+ * tree-shakes unused theme vars out of the published `spectral.css`.
 */
 @theme static {
   --color-background: var(--horizon-color-neutral-950);
@@ -50,21 +50,21 @@
   --color-danger-400: var(--horizon-color-danger-400);
   --color-danger-500: var(--horizon-color-danger-500);
 
-  --color-alert-bg: var(--horizon-color-level-two);
-  --color-alert-border: var(--horizon-color-level-three);
+  --color-alert-bg: var(--horizon-color-level-one);
+  --color-alert-border: var(--horizon-color-level-two);
   --color-alert-text: var(--horizon-color-neutral-50);
-  --color-alert-success-bg: var(--horizon-color-success-50);
-  --color-alert-success-border: var(--horizon-color-success-500);
-  --color-alert-success-text: var(--horizon-color-success-500);
-  --color-alert-warning-bg: var(--horizon-color-warning-50);
-  --color-alert-warning-border: var(--horizon-color-warning-500);
-  --color-alert-warning-text: var(--horizon-color-warning-500);
-  --color-alert-danger-bg: var(--horizon-color-danger-50);
-  --color-alert-danger-border: var(--horizon-color-danger-500);
-  --color-alert-danger-text: var(--horizon-color-danger-500);
-  --color-alert-info-bg: var(--horizon-color-primary-50);
-  --color-alert-info-border: var(--horizon-color-primary-700);
-  --color-alert-info-text: var(--horizon-color-primary-700);
+  --color-alert-success-bg: color-mix(in srgb, var(--horizon-color-success-400) 20%, var(--horizon-color-black));
+  --color-alert-success-border: var(--horizon-color-success-400);
+  --color-alert-success-text: var(--horizon-color-success-400);
+  --color-alert-warning-bg: color-mix(in srgb, var(--horizon-color-warning-400) 20%, var(--horizon-color-black));
+  --color-alert-warning-border: var(--horizon-color-warning-400);
+  --color-alert-warning-text: var(--horizon-color-warning-400);
+  --color-alert-danger-bg: color-mix(in srgb, var(--horizon-color-danger-400) 20%, var(--horizon-color-black));
+  --color-alert-danger-border: var(--horizon-color-danger-400);
+  --color-alert-danger-text: var(--horizon-color-danger-400);
+  --color-alert-info-bg: color-mix(in srgb, var(--horizon-color-primary-500) 20%, var(--horizon-color-black));
+  --color-alert-info-border: var(--horizon-color-primary-500);
+  --color-alert-info-text: var(--horizon-color-primary-500);
 
   --color-badge-primary-bg: var(--horizon-color-level-five);
   --color-badge-primary-bg--hover: var(--horizon-color-level-four);
@@ -194,8 +194,8 @@
   --color-tabs-enclosed-indicator: var(--horizon-color-level-two);
   --color-tabs-border: var(--horizon-color-level-four);
 
-  --color-toast-bg: var(--horizon-color-level-one);
-  --color-toast-border: var(--horizon-color-neutral-50);
+  --color-toast-bg: var(--horizon-color-level-two);
+  --color-toast-border: var(--horizon-color-neutral-300);
   --color-toast-text: var(--horizon-color-neutral-50);
   --color-toast-icon: var(--horizon-color-neutral-50);
 
@@ -244,10 +244,26 @@
   --color-tooltip-outline-border: var(--horizon-color-level-four);
   --color-tooltip-outline-arrow: var(--horizon-color-level-four);
 
+  /* black shades */
+  --color-black-10: oklch(0% 0 0 / 10%);
+  --color-black-20: oklch(0% 0 0 / 20%);
+  --color-black-30: oklch(0% 0 0 / 30%);
   --color-black-40: oklch(0% 0 0 / 40%);
+  --color-black-50: oklch(0% 0 0 / 50%);
+  --color-black-60: oklch(0% 0 0 / 60%);
+  --color-black-70: oklch(0% 0 0 / 70%);
+
+  /* white shades */
+  --color-white-10: oklch(100% 0 0 / 10%);
+  --color-white-20: oklch(100% 0 0 / 20%);
+  --color-white-30: oklch(100% 0 0 / 30%);
+  --color-white-40: oklch(100% 0 0 / 40%);
+  --color-white-50: oklch(100% 0 0 / 50%);
+  --color-white-60: oklch(100% 0 0 / 60%);
+  --color-white-70: oklch(100% 0 0 / 70%);
 }
 
 /* light theme variant */
-:root[data-theme='light'] {
+/* :root[data-theme='light'] {
   --color-background: var(--horizon-color-neutral-50);
-}
+} */

package/dist/styles/horizon/theme.css

@@ -4,20 +4,28 @@
   --font-serif: 'Bitter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
 
-  --ring: var(--color-accent);
+  --ring: var(--color-transparent);
   --ring-offset: var(--color-background);
 
   --shadow-elevation-1:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.4),
-    0 8px 16px -4px rgba(0, 0, 0, 0.3);
+    0 0.0625rem 0 0 oklch(from var(--color-white) l c h / 0.04),
+    0 0.0625rem 0.125rem 0 oklch(from var(--color-black) l c h / 0.4),
+    0 0.5rem 1rem -0.25rem oklch(from var(--color-black) l c h / 0.3);
 
   --shadow-elevation-2:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.5),
-    0 12px 24px -6px rgba(0, 0, 0, 0.4);
+    0 0.0625rem 0 0 oklch(from var(--color-white) l c h / 0.05),
+    0 0.125rem 0.25rem 0 oklch(from var(--color-black) l c h / 0.5),
+    0 0.75rem 0.75rem -0.375rem oklch(from var(--color-black) l c h / 0.4);
 
   --shadow-elevation-3:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 4px 8px 0 rgba(0, 0, 0, 0.5),
-    0 20px 40px -8px rgba(0, 0, 0, 0.5);
+    0 0.0625rem 0 0 oklch(from var(--color-white) l c h / 0.07),
+    0 0.25rem 0.5rem 0 oklch(from var(--color-black) l c h / 0.5),
+    0 1rem 1.5rem -0.5rem oklch(from var(--color-black) l c h / 0.5);
+
+  --shadow-tooltip:
+    0 0.0625rem 0 0 oklch(from var(--color-white) l c h / 0.05),
+    0 0.125rem 0.25rem 0 oklch(from var(--color-black) l c h / 0.7),
+    0 0.75rem 1.5rem -0.375rem oklch(from var(--color-black) l c h / 0.6);
 
   /* animations */
   --animate-animate-in: animate-in;

package/dist/styles/horizon/utilities.css

@@ -47,11 +47,11 @@
   }
 
   .shadow-neumorphic-large {
-    box-shadow: 12px 12px 24px var(--color-shadow-neumorphic-large), -12px -12px 24px var(--color-white);
+    box-shadow: 0.75rem 0.75rem 1.5rem var(--color-shadow-neumorphic-large), -0.75rem -0.75rem 1.5rem var(--color-white);
   }
 
   .shadow-neumorphic-small {
-    box-shadow: 4px 4px 8px var(--color-shadow-neumorphic), -4px -4px 8px var(--color-white);
+    box-shadow: 0.25rem 0.25rem 0.5rem var(--color-shadow-neumorphic), -0.25rem -0.25rem 0.5rem var(--color-white);
   }
 
   .dialog-no-animations {
@@ -69,43 +69,17 @@
     transform: translateX(-50%) translateY(-50%) !important;
   }
 
-  svg:focus-visible,
   svg:focus {
     outline: none;
   }
 
-  .card-effects {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(38, 38, 38, 0.50);
-    backdrop-filter: blur(12px);
-    border: 0.5px solid rgba(255, 255, 255, 0.05);
-    border-radius: 1rem;
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.10) inset, 0 20px 40px 0 rgba(0, 0, 0, 0.25), 0 15px 30px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  .tooltip-effects {
-    box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
-  }
-
-  @supports not (backdrop-filter: blur(0)) {
-
-    .card-effects {
-      /* Fallback: slightly opaque fill to hint depth without blur */
-      background-color: hsla(240, 4%, 14%, 0.6);
-    }
-
-    .card-effects-dark {
-      /* Fallback tuned for level-zero dark surfaces */
-      background-color: hsla(240, 4%, 16%, 0.72);
-    }
-  }
-
   /* DatePicker styles */
   .rdp {
     margin: 0;
   }
 
   .rdp-root {
-    padding-right: 24px;
+    padding-right: 1.5rem;
 
     .rdp-nav {
       position: absolute;
@@ -130,11 +104,11 @@
       align-items: center;
       display: flex;
       justify-content: center;
-      padding-block-end: 8px;
+      padding-block-end: 0.5rem;
       position: relative;
 
       .month-title {
-        font-size: 18px;
+        font-size: 1.125rem;
         font-weight: 600;
       }
     }
@@ -142,8 +116,8 @@
     .rdp-day_button {
       border-color: transparent;
       border-radius: 100%;
-      height: 40px;
-      width: 40px;
+      height: 2.5rem;
+      width: 2.5rem;
     }
 
     .day {
@@ -204,7 +178,7 @@
     .minutes {
 
       input {
-        max-width: 22px;
+        max-width: 1.375rem;
         width: max-content;
 
         &.hours-input {
@@ -223,7 +197,7 @@
 
       input {
         border: 0;
-        font-size: 16px;
+        font-size: 1rem;
 
         &:hover,
         &:focus,
@@ -244,18 +218,18 @@
       }
 
       span {
-        margin-inline: 1px 2px;
+        margin-inline: 0.0625rem 0.125rem;
       }
     }
 
     .am-pm {
-      margin-inline-start: 8px;
+      margin-inline-start: 0.5rem;
       width: auto;
 
       button {
         background-color: transparent;
         border: 0;
-        font-size: 14px;
+        font-size: 0.875rem;
         padding-inline: 0;
 
         &:hover {
@@ -282,12 +256,12 @@
     }
 
     .am-pm-dropdown {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      font-size: 14px;
-      margin-top: -5px;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+      font-size: 0.875rem;
+      margin-top: -0.3125rem;
       position: relative;
-      width: 58px;
+      width: 3.625rem;
       z-index: 999;
 
       &:hover {
@@ -297,9 +271,9 @@
       .am-pm-option {
         align-items: center;
         display: flex;
-        height: 24px;
+        height: 1.5rem;
         justify-content: center;
-        padding-inline: 8px;
+        padding-inline: 0.5rem;
         text-align: center;
         z-index: 999;