@carbonid1/design-system 5.0.3 → 5.2.0

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,6 @@
+import type { BadgeProps } from './Badge.types';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "success" | "attention" | "destructive" | "highlight" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Badge: ({ className, variant, onRemove, removeLabel, children, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/Badge/Badge.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../helpers/cn/cn';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+const badgeVariants = cva('inline-flex max-w-full min-w-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', {
+    variants: {
+        variant: {
+            default: 'bg-muted text-muted-foreground',
+            primary: 'bg-primary-border/30 text-primary',
+            success: 'bg-success/15 text-success-foreground',
+            attention: 'bg-attention-muted text-attention-foreground',
+            destructive: 'bg-destructive/15 text-destructive',
+            highlight: 'bg-highlight-muted text-highlight-foreground',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+const Badge = ({ className, variant, onRemove, removeLabel, children, ...props }) => {
+    const resolvedRemoveLabel = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
+    return (_jsxs("span", { className: cn(badgeVariants({ variant }), className), ...props, children: [onRemove ? _jsx("span", { className: "truncate", children: children }) : children, onRemove && (_jsx("button", { type: "button", "aria-label": resolvedRemoveLabel, onClick: onRemove, className: "-me-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full opacity-70 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1 focus-visible:ring-offset-transparent focus-visible:outline-none", children: _jsx(X, { className: "size-3", "aria-hidden": "true" }) }))] }));
+};
+export { Badge, badgeVariants };

package/{src/Badge/Badge.types.ts → dist/Badge/Badge.types.d.ts}

@@ -1,17 +1,14 @@
-import type { HTMLAttributes } from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import type { badgeVariants } from './Badge'
-
+import type { HTMLAttributes } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { badgeVariants } from './Badge';
 /**
  * `variant` communicates emphasis, not meaning — always pair it with
  * descriptive text content so the badge isn't relying on color alone.
  */
-type BadgeProps = HTMLAttributes<HTMLSpanElement> &
-  VariantProps<typeof badgeVariants> & {
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants> & {
     /** When set, renders an inline dismiss button after the label. */
-    onRemove?: () => void
+    onRemove?: () => void;
     /** A11y label for the dismiss button. Defaults to `Remove ${children}` when children is a string, otherwise `Remove`. */
-    removeLabel?: string
-  }
-
-export type { BadgeProps }
+    removeLabel?: string;
+};
+export type { BadgeProps };

package/dist/Badge/Badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from './Button.types';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "attention" | "destructive" | "link" | "ghost" | "outline" | "subtle" | "danger" | null | undefined;
+    size?: "default" | "small" | "large" | "icon" | "smallIcon" | "largeIcon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Button: ({ className, variant, size, fullWidth, loading, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/Button/Button.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../helpers/cn/cn';
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-hidden select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            ghost: 'hover:bg-accent aria-expanded:bg-accent dark:hover:bg-accent/50',
+            primary: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
+            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+            attention: 'text-attention-foreground hover:bg-attention-muted',
+            subtle: 'text-muted-foreground hover:text-primary',
+            danger: 'text-muted-foreground hover:text-destructive',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            small: 'h-7 gap-1 px-2.5 text-[0.8rem]',
+            default: 'h-8 gap-1.5 px-2.5',
+            large: 'h-9 gap-1.5 px-3',
+            icon: 'size-8 rounded-full',
+            smallIcon: 'size-6 rounded-full',
+            largeIcon: 'size-12 rounded-full',
+        },
+    },
+    defaultVariants: {
+        variant: 'ghost',
+        size: 'default',
+    },
+});
+const Button = ({ className, variant, size, fullWidth, loading, disabled, children, ...props }) => (_jsxs(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), fullWidth && 'w-full justify-start', className), disabled: disabled ?? loading, "aria-busy": loading ?? undefined, ...props, children: [loading && _jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), children] }));
+export { Button, buttonVariants };

package/dist/Button/Button.types.d.ts

@@ -0,0 +1,8 @@
+import type { Button as ButtonPrimitive } from '@base-ui/react/button';
+import type { VariantProps } from 'class-variance-authority';
+import type { buttonVariants } from './Button';
+type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
+    fullWidth?: boolean;
+    loading?: boolean;
+};
+export type { ButtonProps };

package/dist/Button/Button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,56 @@
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import type { ComponentPropsWithoutRef, Ref } from 'react';
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;
+type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;
+type BaseCheckboxItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>;
+type BaseRadioItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>;
+type ItemVariant = 'default' | 'destructive';
+type PositionerProps = BasePositionerProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type PopupProps = BasePopupProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type SeparatorProps = BaseSeparatorProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type GroupLabelProps = BaseGroupLabelProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type ItemProps = BaseItemProps & {
+    ref?: Ref<HTMLDivElement>;
+    variant?: ItemVariant;
+};
+type CheckboxItemProps = BaseCheckboxItemProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type RadioItemProps = BaseRadioItemProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+type SubmenuTriggerProps = BaseSubmenuTriggerProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const ContextMenu: {
+    Root: typeof BaseContextMenu.Root;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: ({ className, sideOffset, ...props }: PositionerProps) => import("react/jsx-runtime").JSX.Element;
+    Popup: ({ className, ...props }: PopupProps) => import("react/jsx-runtime").JSX.Element;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: ({ className, ...props }: GroupLabelProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, variant, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    LinkItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & import("react").RefAttributes<Element>>;
+    CheckboxItem: ({ className, children, ...props }: CheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
+    RadioGroup: import("react").NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: ({ className, children, ...props }: RadioItemProps) => import("react/jsx-runtime").JSX.Element;
+    SubmenuRoot: typeof BaseContextMenu.SubmenuRoot;
+    SubmenuTrigger: ({ className, children, ...props }: SubmenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/ContextMenu/ContextMenu.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../helpers/cn/cn';
+const popupClasses = 'bg-popover text-popover-foreground border-border z-50 min-w-45 origin-[var(--transform-origin)] rounded-lg border py-1 shadow-lg outline-hidden transition-[transform,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0';
+const itemBaseClasses = 'relative flex h-7 cursor-default items-center gap-1.5 px-2.5 text-[0.8rem] outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-[disabled]:pointer-events-none data-[disabled]:opacity-50';
+const itemVariantClasses = {
+    default: 'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+    destructive: 'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive',
+};
+const Positioner = ({ className, sideOffset = 4, ...props }) => (_jsx(BaseContextMenu.Positioner, { sideOffset: sideOffset, className: cn('z-50 outline-hidden', className), ...props }));
+const Popup = ({ className, ...props }) => (_jsx(BaseContextMenu.Popup, { className: cn(popupClasses, className), ...props }));
+const Item = ({ className, variant = 'default', ...props }) => (_jsx(BaseContextMenu.Item, { className: cn(itemBaseClasses, itemVariantClasses[variant], className), ...props }));
+const Separator = ({ className, ...props }) => (_jsx(BaseContextMenu.Separator, { className: cn('bg-border my-1 h-px', className), ...props }));
+const GroupLabel = ({ className, ...props }) => (_jsx(BaseContextMenu.GroupLabel, { className: cn('text-muted-foreground px-2.5 py-1 text-xs', className), ...props }));
+const CheckboxItem = ({ className, children, ...props }) => (_jsxs(BaseContextMenu.CheckboxItem, { className: cn(itemBaseClasses, itemVariantClasses.default, 'pl-7', className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(BaseContextMenu.CheckboxItemIndicator, { className: "size-3.5", children: _jsx(CheckIcon, {}) }) }), children] }));
+const RadioItem = ({ className, children, ...props }) => (_jsxs(BaseContextMenu.RadioItem, { className: cn(itemBaseClasses, itemVariantClasses.default, 'pl-7', className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(BaseContextMenu.RadioItemIndicator, { className: "size-3.5", children: _jsx(DotIcon, {}) }) }), children] }));
+const SubmenuTrigger = ({ className, children, ...props }) => (_jsxs(BaseContextMenu.SubmenuTrigger, { className: cn(itemBaseClasses, itemVariantClasses.default, 'data-popup-open:bg-accent data-popup-open:text-accent-foreground pr-2', className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto size-4 opacity-60", "aria-hidden": true })] }));
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", className: "size-3.5", children: _jsx("path", { d: "M3 7.5 6 10.5 11 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const DotIcon = () => (_jsx("svg", { viewBox: "0 0 14 14", className: "size-3.5", children: _jsx("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" }) }));
+export const ContextMenu = {
+    Root: BaseContextMenu.Root,
+    Trigger: BaseContextMenu.Trigger,
+    Portal: BaseContextMenu.Portal,
+    Backdrop: BaseContextMenu.Backdrop,
+    Positioner,
+    Popup,
+    Arrow: BaseContextMenu.Arrow,
+    Group: BaseContextMenu.Group,
+    GroupLabel,
+    Separator,
+    Item,
+    LinkItem: BaseContextMenu.LinkItem,
+    CheckboxItem,
+    RadioGroup: BaseContextMenu.RadioGroup,
+    RadioItem,
+    SubmenuRoot: BaseContextMenu.SubmenuRoot,
+    SubmenuTrigger,
+};

package/dist/Kbd/Kbd.d.ts

@@ -0,0 +1,6 @@
+import type { KbdProps } from './Kbd.types';
+declare const kbdVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Kbd: ({ keys, size, className }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export { Kbd, kbdVariants };

package/dist/Kbd/Kbd.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getModKey } from '../helpers/getModKey/getModKey';
+import { cn } from '../helpers/cn/cn';
+import { cva } from 'class-variance-authority';
+const MOD_SYMBOLS = { Cmd: '⌘', Ctrl: 'Ctrl' };
+const KEY_SYMBOLS = {
+    shift: '⇧',
+    alt: '⌥',
+    enter: '↵',
+    backspace: '⌫',
+    escape: 'Esc',
+    space: '␣',
+    left: '←',
+    right: '→',
+    up: '↑',
+    down: '↓',
+};
+const resolveKey = (key) => {
+    const lower = key.toLowerCase();
+    if (lower === 'mod')
+        return MOD_SYMBOLS[getModKey()] ?? 'Ctrl';
+    return KEY_SYMBOLS[lower] ?? key;
+};
+const kbdVariants = cva('inline-flex items-center justify-center rounded-sm border font-mono leading-none select-none', {
+    variants: {
+        size: {
+            sm: 'min-w-4 px-1 py-0.5 text-[10px] border-foreground/10 bg-foreground/10',
+            default: 'min-w-5 px-1.5 py-1 text-[11px] border-border bg-muted',
+        },
+    },
+    defaultVariants: { size: 'default' },
+});
+const Kbd = ({ keys, size, className }) => {
+    const keyList = Array.isArray(keys) ? keys : [keys];
+    return (_jsx("span", { className: "inline-flex items-center gap-0.5", role: "presentation", children: keyList.map((key, i) => (_jsx("kbd", { className: cn(kbdVariants({ size }), className), children: resolveKey(key) }, i))) }));
+};
+export { Kbd, kbdVariants };

package/dist/Kbd/Kbd.types.d.ts

@@ -0,0 +1,8 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { kbdVariants } from './Kbd';
+type KbdProps = {
+    /** Single key or array of keys for combos. 'mod' auto-resolves to Cmd/Ctrl. */
+    keys: string | string[];
+    className?: string;
+} & VariantProps<typeof kbdVariants>;
+export type { KbdProps };

package/dist/Kbd/Kbd.types.js

@@ -0,0 +1 @@
+export {};

package/dist/ProgressRing/ProgressRing.consts.d.ts

@@ -0,0 +1,4 @@
+export declare const RING_SIZE = 16;
+export declare const STROKE_WIDTH = 2;
+export declare const RADIUS: number;
+export declare const CIRCUMFERENCE: number;

package/dist/ProgressRing/ProgressRing.consts.js

@@ -0,0 +1,4 @@
+export const RING_SIZE = 16;
+export const STROKE_WIDTH = 2;
+export const RADIUS = (RING_SIZE - STROKE_WIDTH) / 2;
+export const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

package/dist/ProgressRing/ProgressRing.d.ts

@@ -0,0 +1,10 @@
+type ProgressRingProps = {
+    progress: number;
+    colorClass: string;
+    label: string;
+    animate?: boolean;
+    pendingStyle?: 'none' | 'dashed';
+    testId?: string;
+};
+export declare const ProgressRing: ({ progress, colorClass, label, animate, pendingStyle, testId, }: ProgressRingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ProgressRing/ProgressRing.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CIRCUMFERENCE, RADIUS, RING_SIZE, STROKE_WIDTH } from './ProgressRing.consts';
+const DASH_SEGMENT = CIRCUMFERENCE / 8;
+export const ProgressRing = ({ progress, colorClass, label, animate = false, pendingStyle = 'none', testId, }) => {
+    const MIN_VISIBLE = 0.08;
+    const visibleProgress = animate ? Math.max(progress, MIN_VISIBLE) : progress;
+    const dashoffset = CIRCUMFERENCE * (1 - visibleProgress);
+    const shouldSpin = animate && progress < 0.15;
+    const isDashed = !animate && pendingStyle === 'dashed';
+    const center = RING_SIZE / 2;
+    return (_jsxs("svg", { width: RING_SIZE, height: RING_SIZE, viewBox: `0 0 ${RING_SIZE} ${RING_SIZE}`, role: "img", "aria-label": label, className: animate && !shouldSpin ? 'animate-buffer-pulse motion-reduce:animate-none' : '', children: [_jsx("circle", { cx: center, cy: center, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE_WIDTH, className: `text-border ${isDashed ? 'animate-ring-drift motion-reduce:animate-none' : ''}`, strokeDasharray: isDashed ? `${DASH_SEGMENT * 0.6} ${DASH_SEGMENT * 0.4}` : undefined, style: isDashed ? { transformOrigin: `${center}px ${center}px` } : undefined }), _jsx("circle", { "data-testid": testId, cx: center, cy: center, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE_WIDTH, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: dashoffset, strokeLinecap: "round", className: `${colorClass} transition-[stroke-dashoffset,color] duration-500 ${shouldSpin ? 'animate-ring-spin motion-reduce:animate-none' : ''}`, style: { transformOrigin: `${center}px ${center}px` } })] }));
+};

package/dist/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import type { SelectProps } from './Select.types';
+export declare const Select: ({ value, onChange, options, groups, placeholder, id, className, menuClassName, renderOption, onOpenChange, "aria-label": ariaLabel, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Select/Select.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export const Select = ({ value, onChange, options, groups, placeholder, id, className, menuClassName, renderOption, onOpenChange, 'aria-label': ariaLabel, }) => {
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const changeOpen = useCallback((next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+    }, [onOpenChange]);
+    // Build flat items list with group metadata
+    const { items, groupStartIndices } = useMemo(() => {
+        const flat = [...(options ?? [])];
+        const starts = [];
+        for (const group of groups ?? []) {
+            starts.push({ index: flat.length, label: group.label });
+            flat.push(...group.options);
+        }
+        return { items: flat, groupStartIndices: starts };
+    }, [options, groups]);
+    const selectedOption = items.find(o => o.value === value);
+    const displayText = selectedOption?.label ?? placeholder ?? value;
+    // Click outside to close
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                changeOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [changeOpen]);
+    const selectItem = (itemValue) => {
+        onChange(itemValue);
+        changeOpen(false);
+        setHighlightedIndex(-1);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            changeOpen(false);
+            setHighlightedIndex(-1);
+            return;
+        }
+        if (!open) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                changeOpen(true);
+                setHighlightedIndex(0);
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setHighlightedIndex(prev => (prev + 1) % items.length);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setHighlightedIndex(prev => (prev - 1 + items.length) % items.length);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const highlighted = items[highlightedIndex];
+            if (highlighted) {
+                selectItem(highlighted.value);
+            }
+        }
+    };
+    const itemClassName = (index, itemValue) => {
+        const base = 'px-3 py-2.5 cursor-pointer';
+        const highlight = index === highlightedIndex ? 'bg-primary-muted' : 'hover:bg-primary-muted';
+        const selected = itemValue === value ? 'font-medium' : '';
+        return `${base} ${highlight} ${selected}`;
+    };
+    return (_jsxs("div", { className: "relative", ref: containerRef, onKeyDown: handleKeyDown, children: [_jsxs("button", { type: "button", id: id, className: `flex items-center justify-between gap-2 ${className ?? ''}`, "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": ariaLabel, onClick: () => changeOpen(!open), children: [_jsx("span", { className: "truncate", children: displayText }), _jsx(ChevronDown, { className: `size-4 shrink-0 transition-transform ${open ? 'rotate-180' : ''}` })] }), open && (_jsx("ul", { role: "listbox", className: `border-border bg-background absolute z-50 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-lg border shadow-lg ${menuClassName ?? ''}`, children: items.map((item, index) => {
+                    const groupHeader = groupStartIndices.find(g => g.index === index);
+                    return (_jsxs("li", { role: "presentation", children: [groupHeader && (_jsx("div", { className: "text-muted-foreground px-3 pt-2 pb-1 text-xs font-medium uppercase", children: groupHeader.label })), _jsx("div", { role: "option", "aria-selected": value === item.value, className: itemClassName(index, item.value), onClick: () => selectItem(item.value), onMouseEnter: () => setHighlightedIndex(index), children: renderOption
+                                    ? renderOption(item, {
+                                        highlighted: index === highlightedIndex,
+                                        selected: value === item.value,
+                                    })
+                                    : item.label })] }, item.value));
+                }) }))] }));
+};

package/dist/Select/Select.types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export type SelectGroup = {
+    label: string;
+    options: SelectOption[];
+};
+export type SelectOptionState = {
+    highlighted: boolean;
+    selected: boolean;
+};
+export type SelectProps = {
+    value: string;
+    onChange: (value: string) => void;
+    options?: SelectOption[];
+    groups?: SelectGroup[];
+    placeholder?: string;
+    id?: string;
+    className?: string;
+    menuClassName?: string;
+    renderOption?: (option: SelectOption, state: SelectOptionState) => ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    'aria-label'?: string;
+};

package/dist/Select/Select.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,13 @@
+type SliderProps = {
+    value: number;
+    onChange: (value: number) => void;
+    onCommit?: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+    className?: string;
+};
+export declare const Slider: ({ value, onChange, onCommit, min, max, step, disabled, "aria-label": ariaLabel, className, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Slider/Slider.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../helpers/cn/cn';
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+export const Slider = ({ value, onChange, onCommit, min, max, step = 1, disabled, 'aria-label': ariaLabel, className, }) => (_jsx(SliderPrimitive.Root, { value: value, onValueChange: v => onChange(v), onValueCommitted: v => onCommit?.(v), min: min, max: max, step: step, disabled: disabled, "aria-label": ariaLabel, className: cn('relative flex w-full touch-none items-center py-2', className), children: _jsxs(SliderPrimitive.Control, { className: "relative flex h-1.5 w-full items-center", children: [_jsx(SliderPrimitive.Track, { className: "bg-input h-full w-full overflow-hidden rounded-full", children: _jsx(SliderPrimitive.Indicator, { className: "bg-primary h-full rounded-full" }) }), _jsx(SliderPrimitive.Thumb, { className: cn('bg-primary border-background block size-4 rounded-full border-2 shadow-sm', 'focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-hidden', disabled && 'pointer-events-none opacity-50') })] }) }));

package/dist/ThemeCycler/ThemeCycler.d.ts

@@ -0,0 +1 @@
+export declare const ThemeCycler: () => null;

package/dist/ThemeCycler/ThemeCycler.js

@@ -0,0 +1,30 @@
+'use client';
+import { useTheme } from 'next-themes';
+import { useCallback, useSyncExternalStore } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { toast } from 'sonner';
+const THEME_CYCLE = ['system', 'light', 'dark'];
+const THEME_LABELS = {
+    system: 'System',
+    light: 'Light',
+    dark: 'Dark',
+};
+const emptySubscribe = () => () => { };
+const getSnapshot = () => true;
+const getServerSnapshot = () => false;
+export const ThemeCycler = () => {
+    const { theme, setTheme } = useTheme();
+    const mounted = useSyncExternalStore(emptySubscribe, getSnapshot, getServerSnapshot);
+    const cycleTheme = useCallback(() => {
+        if (!mounted)
+            return;
+        const current = theme ?? 'system';
+        const currentIndex = THEME_CYCLE.indexOf(current);
+        const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
+        const next = THEME_CYCLE[nextIndex] ?? 'system';
+        setTheme(next);
+        toast(`Theme: ${THEME_LABELS[next]}`, { duration: 2000 });
+    }, [theme, setTheme, mounted]);
+    useHotkeys('shift+t', cycleTheme, { preventDefault: true });
+    return null;
+};

package/dist/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    children: React.ReactNode;
+};
+export declare const ThemeProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,4 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+export const ThemeProvider = ({ children }) => (_jsx(NextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true, children: children }));

package/dist/Toaster/Toaster.d.ts

@@ -0,0 +1,2 @@
+import { type ToasterProps } from 'sonner';
+export declare const Toaster: (props: ToasterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Toaster/Toaster.js

@@ -0,0 +1,4 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from 'sonner';
+export const Toaster = (props) => (_jsx(Sonner, { theme: "system", position: "bottom-right", ...props }));

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react';
+type TooltipProps = {
+    label: string;
+    shortcut?: string | string[];
+    position?: 'top' | 'bottom';
+    delay?: number;
+    maxWidth?: number;
+    disabled?: boolean;
+    className?: string;
+    children: ReactElement<{
+        'aria-label'?: string;
+    }>;
+};
+export declare const Tooltip: ({ label, shortcut, position, delay, maxWidth, disabled, className, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd } from '../Kbd/Kbd';
+import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+const DEFAULT_DELAY = 200;
+export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DELAY, maxWidth, disabled, className, children, }) => {
+    const [visible, setVisible] = useState(false);
+    const timeoutRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const show = useCallback(() => {
+        if (disabled)
+            return;
+        timeoutRef.current = setTimeout(() => setVisible(true), delay);
+    }, [disabled, delay]);
+    const hide = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setVisible(false);
+    }, []);
+    useEffect(() => {
+        if (disabled && timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, [disabled]);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        if (!visible)
+            return;
+        let lastCheck = 0;
+        const handlePointerMove = (e) => {
+            if (e.timeStamp - lastCheck < 100)
+                return;
+            lastCheck = e.timeStamp;
+            const rect = wrapperRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const inside = e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom;
+            if (!inside)
+                hide();
+        };
+        document.addEventListener('pointermove', handlePointerMove, { passive: true });
+        return () => document.removeEventListener('pointermove', handlePointerMove);
+    }, [visible, hide]);
+    const positionClasses = position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
+    return (_jsxs("div", { ref: wrapperRef, className: `relative inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
+                'aria-label': children.props['aria-label'] ?? label,
+            }), visible && !disabled && (_jsxs("div", { role: "tooltip", style: maxWidth ? { maxWidth } : undefined, className: `absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
+};

package/dist/helpers/cn/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/helpers/cn/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/helpers/getModKey/getModKey.d.ts

@@ -0,0 +1 @@
+export declare const getModKey: () => string;

package/dist/helpers/getModKey/getModKey.js

@@ -0,0 +1 @@
+export const getModKey = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? 'Cmd' : 'Ctrl';