@silentswap/ui-kit 0.0.42 → 0.0.44

package/dist/components/popover.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Popover: ({ open, onOpenChange, children, ...props }: PopoverPrimitive.PopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    triggerElement?: HTMLElement | null;
+    containerElement?: HTMLElement | null;
+    isOpen?: boolean;
+    showOverlay?: boolean;
+    onClose?: () => void;
+}
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverOverlay };

package/dist/components/popover.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '../utils';
+import { useIsMobile } from '../hooks/use-mobile';
+// Context to handle exit animations
+const PopoverAnimationContext = React.createContext(null);
+const Popover = ({ open, onOpenChange, children, ...props }) => {
+    const [isPresent, setIsPresent] = React.useState(open);
+    React.useEffect(() => {
+        if (open)
+            setIsPresent(true);
+    }, [open]);
+    const handleExitComplete = React.useCallback(() => {
+        setIsPresent(false);
+    }, []);
+    // The Radix root should stay "open" as long as the parent says so OR we are still animating out
+    return (_jsx(PopoverAnimationContext.Provider, { value: { onExitComplete: handleExitComplete }, children: _jsx(PopoverPrimitive.Root, { open: open || isPresent, onOpenChange: onOpenChange, ...props, children: children }) }));
+};
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(motion.div, { ref: ref, className: cn('fixed inset-0 z-40 pointer-events-auto md:pointer-events-none', className), style: {
+        background: 'rgba(0, 0, 0, 0.80)',
+        opacity: 0.7,
+    }, initial: { opacity: 0 }, animate: { opacity: 0.7 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeOut' }, onClick: props.onClick, onKeyDown: props.onKeyDown })));
+PopoverOverlay.displayName = 'PopoverOverlay';
+// Bottom sheet animation for mobile - slides up from bottom
+const contentVariantsBottomSheet = {
+    hidden: {
+        opacity: 0,
+        y: '100%',
+        x: '-50%',
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        x: '-50%',
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 30,
+            opacity: { duration: 0.2 },
+        },
+    },
+    exit: {
+        opacity: 0,
+        y: '100%',
+        x: '-50%',
+        transition: {
+            duration: 0.25,
+            ease: 'easeIn',
+        },
+    },
+};
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, triggerElement, containerElement, isOpen, showOverlay = false, onClose, children, ...props }, ref) => {
+    const isMobile = useIsMobile();
+    const animationContext = React.useContext(PopoverAnimationContext);
+    // Create anchor element ref for positioning (desktop only)
+    const anchorRef = React.useRef(null);
+    // Update anchor position when trigger element changes, on scroll, or on resize (desktop only)
+    React.useEffect(() => {
+        if (isMobile)
+            return; // Don't position anchor on mobile
+        if (!triggerElement || !anchorRef.current || !isOpen)
+            return;
+        const updateAnchorPosition = () => {
+            if (!anchorRef.current || !triggerElement)
+                return;
+            const triggerRect = triggerElement.getBoundingClientRect();
+            // Get the viewport-relative position for the fixed anchor
+            let x;
+            if (containerElement) {
+                const containerRect = containerElement.getBoundingClientRect();
+                x = containerRect.left + containerRect.width / 2;
+            }
+            else {
+                x = triggerRect.left + triggerRect.width / 2;
+            }
+            const y = triggerRect.bottom;
+            anchorRef.current.style.position = 'fixed';
+            anchorRef.current.style.left = `${x}px`;
+            anchorRef.current.style.top = `${y}px`;
+            anchorRef.current.style.width = '0';
+            anchorRef.current.style.height = '0';
+            anchorRef.current.style.pointerEvents = 'none';
+            anchorRef.current.style.zIndex = '50';
+        };
+        // Update immediately
+        updateAnchorPosition();
+        // Update on scroll and resize
+        window.addEventListener('scroll', updateAnchorPosition, true);
+        window.addEventListener('resize', updateAnchorPosition);
+        return () => {
+            window.removeEventListener('scroll', updateAnchorPosition, true);
+            window.removeEventListener('resize', updateAnchorPosition);
+        };
+    }, [triggerElement, containerElement, isOpen, isMobile]);
+    return (_jsxs(_Fragment, { children: [!isMobile && triggerElement && (_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { ref: anchorRef }) })), _jsx(PopoverPrimitive.Portal, { children: _jsx(AnimatePresence, { onExitComplete: animationContext?.onExitComplete, children: isOpen && (_jsxs(_Fragment, { children: [showOverlay && _jsx(PopoverOverlay, { onClick: onClose }), isMobile ? (_jsx(motion.div, { ref: ref, className: cn('!fixed !left-[50%] !bottom-0 !top-auto z-50 w-[95vw] max-w-[580px] rounded-t-[20px] border-t border-l border-r bg-popover text-popover-foreground shadow-md outline-none flex flex-col', className), style: {
+                                    height: '650px',
+                                    maxHeight: '90vh',
+                                }, variants: contentVariantsBottomSheet, initial: "hidden", animate: "visible", exit: "exit", children: children })) : (_jsx(PopoverPrimitive.Content, { ref: ref, side: "bottom", align: align, sideOffset: sideOffset, avoidCollisions: false, className: cn('z-50 min-w-72 rounded-md bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 flex flex-col', className), ...props, children: children }))] })) }) })] }));
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverOverlay };

package/dist/components/popular-tokens-area.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PopularTokensAreaProps {
+    onTokenSelect?: (caip19: string) => void;
+    title?: string;
+    tokens?: string[];
+    className?: string;
+}
+export declare const PopularTokensArea: React.FC<PopularTokensAreaProps>;

package/dist/components/popular-tokens-area.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { S_CAIP19_USDC_AVALANCHE } from '../constants';
+import { asset_get } from '../data';
+import { AssetTile } from './assetTile';
+export const PopularTokensArea = ({ onTokenSelect, title = 'Popular Tokens', tokens, className = '' }) => {
+    const defaultTokens = [
+        'eip155:1/slip44:60', // ETH on Ethereum
+        'eip155:1/erc20:0xdAC17F958D2ee523a2206206994597C13D831ec7', // USDT on Ethereum
+        'eip155:1/erc20:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC on Ethereum
+        'eip155:1/erc20:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', // WETH on Ethereum
+        'eip155:1/erc20:0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599', // WBTC on Ethereum
+        'eip155:56/slip44:714', // BNB on BSC
+        'eip155:56/erc20:0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c', // WBNB on BSC
+        'eip155:8453/slip44:60', // ETH on Base
+        'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // USDC on Base
+        'eip155:43114/slip44:9005', // WAVAX on Avalanche
+        S_CAIP19_USDC_AVALANCHE, // USDC on Avalanche
+        'eip155:137/slip44:966', // WMATIC/WPOL on Polygon
+        'eip155:137/erc20:0xc2132D05D31c914a87C6611C10748AEb04B58e8F', // USDT0 on Polygon
+        'eip155:137/erc20:0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359', // USDC on Polygon
+        'eip155:10/slip44:60', // WETH on Optimism
+        'eip155:10/erc20:0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85', // USDC on Optimism
+        'eip155:42161/slip44:60', // WETH on Arbitrum
+        'eip155:42161/erc20:0xaf88d065e77c8cC2239327C5EDb3A432268e5831', // USDC on Arbitrum
+    ];
+    const popularTokens = tokens || defaultTokens;
+    return (_jsxs("div", { className: `${className}`, children: [_jsx("div", { className: "font-orbitron text-lg font-bold text-white mb-3", children: title }), _jsx("div", { className: "flex gap-2 overflow-x-auto pb-2", children: popularTokens.map((caip19) => {
+                    const asset = asset_get(caip19);
+                    if (!asset)
+                        return null;
+                    return (_jsxs("div", { className: "flex flex-col items-center gap-2 bg-dim-med rounded-lg p-2 cursor-pointer hover:bg-dim-light transition-colors min-w-fit", onClick: () => onTokenSelect?.(caip19), role: "button", tabIndex: 0, "aria-label": `Select ${asset.symbol}`, children: [_jsx(AssetTile, { caip19: caip19, size: "small" }), _jsx("div", { className: "text-text-dim text-xs text-center", children: asset.symbol?.toUpperCase() })] }, caip19));
+                }) })] }));
+};

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Progress value from 0 to 1 (0 = 0%, 1 = 100%) */
+    value: number;
+    /** Height of the progress bar in pixels */
+    height?: number;
+    /** Color of the progress fill */
+    color?: 'green' | 'yellow' | 'purple' | 'orange';
+    /** Whether to show the progress bar (animates height) */
+    show?: boolean;
+}
+/**
+ * Simple progress bar component
+ * Based on SilentSwap Plate.svelte progress styles
+ */
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/components/progress-bar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * Simple progress bar component
+ * Based on SilentSwap Plate.svelte progress styles
+ */
+export const ProgressBar = ({ value, height = 6, color = 'green', show = true, className = '', style, ...props }) => {
+    const colorClasses = {
+        green: 'bg-[var(--color-green)]',
+        yellow: 'bg-[var(--color-yellow)]',
+        purple: 'bg-[var(--color-purple)]',
+        orange: 'bg-[var(--color-orange)]',
+    };
+    // Clamp value between 0 and 1
+    const clampedValue = Math.max(0, Math.min(1, value));
+    const containerStyle = {
+        height: show ? `${height}px` : '0px',
+        width: '100%',
+        backgroundColor: 'var(--color-gray-dark)',
+        transition: 'height 500ms linear',
+        overflow: 'hidden',
+        ...style,
+    };
+    const fillStyle = {
+        width: `${clampedValue * 100}%`,
+        height: '100%',
+        transition: 'width 490ms linear',
+    };
+    return (_jsx("div", { className: className, style: containerStyle, role: "progressbar", "aria-valuenow": clampedValue * 100, "aria-valuemin": 0, "aria-valuemax": 100, ...props, children: _jsx("div", { className: colorClasses[color], style: fillStyle }) }));
+};

package/dist/components/responsive-container.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ResponsiveContainerProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const ResponsiveContainer: React.FC<ResponsiveContainerProps>;
+export default ResponsiveContainer;

package/dist/components/responsive-container.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../utils';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+const ResponsiveContainer = ({ className = '', children }) => {
+    const containerRef = useRef(null);
+    const [containerHeight, setContainerHeight] = useState('60vh');
+    const [showTopShadow, setShowTopShadow] = useState(false);
+    const [showBottomShadow, setShowBottomShadow] = useState(false);
+    // Calculate container height based on viewport and position
+    const calculateHeight = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const viewportHeight = window.innerHeight;
+        const rect = containerRef.current.getBoundingClientRect();
+        const topPosition = rect.top;
+        // Increased buffer to account for bottom padding and safe areas
+        const bottomBuffer = 40; // Adjust based on your layout
+        const maxHeight = viewportHeight - topPosition - bottomBuffer;
+        // Ensure minimum height and max height constraints
+        const calculatedHeight = Math.max(200, Math.min(maxHeight, 800));
+        setContainerHeight(`${calculatedHeight}px`);
+    }, []);
+    // Handle scroll to determine shadow visibility
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+        setShowTopShadow(scrollTop > 10); // Small threshold to avoid flickering
+        setShowBottomShadow(scrollTop + clientHeight < scrollHeight - 10);
+    }, []);
+    // Set up resize listener
+    useEffect(() => {
+        calculateHeight();
+        window.addEventListener('resize', calculateHeight);
+        return () => window.removeEventListener('resize', calculateHeight);
+    }, [calculateHeight]);
+    // Set up scroll listener
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container) {
+            handleScroll();
+            container.addEventListener('scroll', handleScroll);
+            return () => container.removeEventListener('scroll', handleScroll);
+        }
+    }, [handleScroll]);
+    // Recalculate on mount and when children change
+    useEffect(() => {
+        const timer = setTimeout(calculateHeight, 100); // Longer delay for animations
+        return () => clearTimeout(timer);
+    }, [calculateHeight, children]);
+    // Use ResizeObserver to watch for parent container size changes
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            calculateHeight();
+        });
+        // Observe the parent element
+        const parent = containerRef.current.parentElement;
+        if (parent) {
+            resizeObserver.observe(parent);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [calculateHeight]);
+    return (_jsx("div", { className: "relative w-full h-full", children: _jsx("div", { ref: containerRef, className: cn(`w-full overflow-y-auto no-scrollbar pb-safe-offset-14 md:pb-safe-offset-10`, className), style: { height: containerHeight }, onScroll: handleScroll, children: children }) }));
+};
+export default ResponsiveContainer;

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../utils';
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = 'vertical', ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn('flex touch-none select-none transition-colors', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/components/select.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/select.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../utils';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/components/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../utils';
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/components/sheet.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/sheet.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../utils';
+import { CloseIcon } from './icons';
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-[400px]',
+            right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-[400px]',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = React.forwardRef(({ side = 'right', className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [_jsxs(SheetPrimitive.Close, { className: "cursor-pointer absolute right-5 top-8 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(CloseIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }), children] })] })));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold text-foreground', className), ...props })));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/sidebar.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { TooltipContent } from './tooltip';
+type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare const SidebarContext: React.Context<SidebarContext | null>;
+declare function useSidebar(): SidebarContext;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("./button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };