@carbonid1/design-system 5.2.2 → 5.2.3

package/dist/Badge/Badge.types.js

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

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.js

@@ -0,0 +1 @@
+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.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.js

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

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.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.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.js

@@ -0,0 +1 @@
+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.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.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.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.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.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.js

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

package/dist/index.js

@@ -0,0 +1,16 @@
+export { Badge, badgeVariants } from './Badge/Badge';
+export { Button, buttonVariants } from './Button/Button';
+export { Kbd, kbdVariants } from './Kbd/Kbd';
+export { ProgressRing } from './ProgressRing/ProgressRing';
+export { Slider } from './Slider/Slider';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { Select } from './Select/Select';
+export { Tooltip } from './Tooltip/Tooltip';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { ThemeCycler } from './ThemeCycler/ThemeCycler';
+export { Toaster } from './Toaster/Toaster';
+export { toast } from 'sonner';
+export { useTheme } from 'next-themes';
+export { cn } from './helpers/cn/cn';
+export { getModKey } from './helpers/getModKey/getModKey';
+export { cva } from 'class-variance-authority';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",