@codefast/ui 0.3.9 → 0.3.11-canary.0

package/dist/components/sidebar.js

@@ -1,2 +1,401 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{PanelLeftIcon as t}from"lucide-react";import{useCallback as r,useEffect as i,useState as d}from"react";import{Button as n}from"./button.js";import{Input as s}from"./input.js";import{Separator as o}from"./separator.js";import{Sheet as l,SheetContent as u,SheetDescription as c,SheetHeader as b,SheetTitle as p}from"./sheet.js";import{Skeleton as f}from"./skeleton.js";import{Tooltip as m,TooltipContent as g,TooltipProvider as h,TooltipTrigger as v}from"./tooltip.js";import{useIsMobile as x}from"../hooks/use-is-mobile.js";import{cn as w,tv as S}from"@codefast/tailwind-variants";import{createContext as N}from"@radix-ui/react-context";import{Slot as y}from"@radix-ui/react-slot";let k=S({base:"peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-3 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",defaultVariants:{size:"md",variant:"default"},variants:{size:{sm:"h-7 text-xs",md:"h-8 text-sm",lg:"group-data-[collapsible=icon]:p-0! h-12 text-sm"},variant:{default:"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",outline:"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"}}}),[z,M]=N("SidebarProvider");function _({children:a,className:t,defaultOpen:n=!0,onOpenChange:s,open:o,style:l,...u}){let c=x(),[b,p]=d(!1),[f,m]=d(n),g=o??f,v=r(e=>{let a="function"==typeof e?e(g):e;s?s(a):m(a),document.cookie=`sidebar_state=${a.toString()}; path=/; max-age=604800`},[s,g]),S=r(()=>{c?p(e=>!e):v(e=>!e)},[c,v]);i(()=>{let e=e=>{"b"===e.key&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),S())};return globalThis.addEventListener("keydown",e),()=>{globalThis.removeEventListener("keydown",e)}},[S]);let N=g?"expanded":"collapsed";return e(z,{isMobile:c,open:g,openMobile:b,setOpen:v,setOpenMobile:p,state:N,toggleSidebar:S,children:e(h,{delayDuration:0,children:e("div",{className:w("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",t),"data-slot":"sidebar-wrapper",style:{"--sidebar-width":"16rem","--sidebar-width-icon":"3.0625rem",...l},...u,children:a})})})}function j({children:t,className:r,collapsible:i="offcanvas",side:d="left",variant:n="sidebar",...s}){let{isMobile:o,openMobile:f,setOpenMobile:m,state:g}=M("Sidebar");return"none"===i?e("div",{className:w("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",r),"data-slot":"sidebar",...s,children:t}):o?e(l,{open:f,onOpenChange:m,...s,children:a(u,{className:"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden","data-mobile":"true","data-sidebar":"sidebar","data-slot":"sidebar",side:d,style:{"--sidebar-width":"18rem"},children:[a(b,{className:"sr-only",children:[e(p,{children:"Sidebar"}),e(c,{children:"Displays the mobile sidebar."})]}),e("div",{className:"flex h-full w-full flex-col",children:t})]})}):a("div",{className:w("text-sidebar-foreground group peer hidden md:block",r),"data-collapsible":"collapsed"===g?i:"","data-side":d,"data-slot":"sidebar","data-state":g,"data-variant":n,children:[e("div",{className:w("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180","floating"===n||"inset"===n?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),"data-slot":"sidebar-gap"}),e("div",{className:w("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex","left"===d?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]","floating"===n||"inset"===n?"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",r),"data-slot":"sidebar-container",...s,children:e("div",{className:"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm","data-sidebar":"sidebar","data-slot":"sidebar-inner",children:t})})]})}function C({className:r,onClick:i,...d}){let{toggleSidebar:s}=M("SidebarTrigger");return a(n,{className:w("size-7",r),"data-sidebar":"trigger","data-slot":"sidebar-trigger",size:"icon",variant:"ghost",onClick:e=>{i?.(e),s()},...d,children:[e(t,{}),e("span",{className:"sr-only",children:"Toggle Sidebar"})]})}function T({className:a,...t}){let{toggleSidebar:r}=M("SidebarRail");return e("button",{className:w("hover:after:bg-sidebar-border hover:group-data-[collapsible=offcanvas]:bg-sidebar absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[collapsible=offcanvas]:translate-x-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[collapsible=offcanvas]:after:left-full in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize sm:flex [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",a),"data-sidebar":"rail","data-slot":"sidebar-rail",title:"Toggle Sidebar",type:"button",onClick:r,...t})}function B({className:a,...t}){return e("main",{className:w("bg-background relative flex w-full min-w-0 flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",a),"data-slot":"sidebar-inset",...t})}function G({className:a,...t}){return e(s,{className:w("bg-background h-8 w-full shadow-none",a),"data-sidebar":"input","data-slot":"sidebar-input",...t})}function I({className:a,...t}){return e("div",{className:w("flex flex-col gap-2 p-2",a),"data-sidebar":"header","data-slot":"sidebar-header",...t})}function O({className:a,...t}){return e("div",{className:w("flex flex-col gap-2 p-2",a),"data-sidebar":"footer","data-slot":"sidebar-footer",...t})}function D({className:a,...t}){return e(o,{className:w("bg-sidebar-border mx-2 w-auto",a),"data-sidebar":"separator","data-slot":"sidebar-separator",...t})}function L({className:a,...t}){return e("div",{className:w("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",a),"data-sidebar":"content","data-slot":"sidebar-content",...t})}function q({className:a,...t}){return e("div",{className:w("relative flex w-full min-w-0 flex-col p-2",a),"data-sidebar":"group","data-slot":"sidebar-group",...t})}function A({asChild:a=!1,className:t,...r}){return e(a?y:"div",{className:w("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center truncate rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-3 [&>svg]:size-4 [&>svg]:shrink-0",t),"data-sidebar":"group-label","data-slot":"sidebar-group-label",...r})}function E({asChild:a=!1,className:t,...r}){return e(a?y:"button",{className:w("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",t),"data-sidebar":"group-action","data-slot":"sidebar-group-action",...r})}function K({className:a,...t}){return e("div",{className:w("w-full text-sm",a),"data-sidebar":"group-content","data-slot":"sidebar-group-content",...t})}function P({className:a,...t}){return e("ul",{className:w("flex w-full min-w-0 flex-col gap-1",a),"data-sidebar":"menu","data-slot":"sidebar-menu",...t})}function R({className:a,...t}){return e("li",{className:w("group/menu-item relative",a),"data-sidebar":"menu-item","data-slot":"sidebar-menu-item",...t})}function V({asChild:t=!1,className:r,isActive:i=!1,size:d="md",tooltip:n,variant:s="default",...o}){let{isMobile:l,state:u}=M("SidebarMenuButton"),c=e(t?y:"button",{className:w(k({size:d,variant:s}),r),"data-active":i,"data-sidebar":"menu-button","data-size":d,"data-slot":"sidebar-menu-button",...o});return n?("string"==typeof n&&(n={children:n}),a(m,{children:[e(v,{asChild:!0,children:c}),e(g,{align:"center",hidden:"collapsed"!==u||l,side:"right",...n})]})):c}function $({asChild:a=!1,className:t,showOnHover:r=!1,...i}){return e(a?y:"button",{className:w("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",r&&"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",t),"data-sidebar":"menu-action","data-slot":"sidebar-menu-action",...i})}function F({className:a,...t}){return e("div",{className:w("text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",a),"data-sidebar":"menu-badge","data-slot":"sidebar-menu-badge",...t})}function H({className:t,showIcon:r=!1,...i}){let[n]=d(()=>`${String(Math.floor(40*Math.random())+50)}%`);return a("div",{className:w("flex h-8 items-center gap-2 rounded-md px-2",t),"data-sidebar":"menu-skeleton","data-slot":"sidebar-menu-skeleton",...i,children:[r?e(f,{className:"size-4 rounded-md","data-sidebar":"menu-skeleton-icon"}):null,e(f,{className:"h-4 max-w-(--skeleton-width) flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":n}})]})}function J({className:a,...t}){return e("ul",{className:w("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",a),"data-sidebar":"menu-sub","data-slot":"sidebar-menu-sub",...t})}function Q({className:a,...t}){return e("li",{className:w("group/menu-sub-item relative",a),"data-sidebar":"menu-sub-item","data-slot":"sidebar-menu-sub-item",...t})}function U({asChild:a=!1,className:t,isActive:r=!1,size:i="md",...d}){return e(a?y:"a",{className:w("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0","sm"===i&&"text-xs","md"===i&&"text-sm","group-data-[collapsible=icon]:hidden",t),"data-active":r,"data-sidebar":"menu-sub-button","data-size":i,"data-slot":"sidebar-menu-sub-button",...d})}export{j as Sidebar,L as SidebarContent,O as SidebarFooter,q as SidebarGroup,E as SidebarGroupAction,K as SidebarGroupContent,A as SidebarGroupLabel,I as SidebarHeader,G as SidebarInput,B as SidebarInset,P as SidebarMenu,$ as SidebarMenuAction,F as SidebarMenuBadge,V as SidebarMenuButton,R as SidebarMenuItem,H as SidebarMenuSkeleton,J as SidebarMenuSub,U as SidebarMenuSubButton,Q as SidebarMenuSubItem,_ as SidebarProvider,T as SidebarRail,D as SidebarSeparator,C as SidebarTrigger,k as sidebarMenuButtonVariants,M as useSidebar};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@codefast/tailwind-variants";
+import { createContext } from "@radix-ui/react-context";
+import { Slot } from "@radix-ui/react-slot";
+import { PanelLeftIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { Skeleton } from "./skeleton.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { useIsMobile } from "../hooks/use-is-mobile.js";
+const sidebarMenuButtonVariants = tv({
+    base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    defaultVariants: {
+        size: "md",
+        variant: "default"
+    },
+    variants: {
+        size: {
+            sm: "h-7 text-xs",
+            md: "h-8 text-sm",
+            lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        },
+        variant: {
+            default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+        }
+    }
+});
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 604800;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3.0625rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_PROVIDER_NAME = "SidebarProvider";
+const [SidebarContextProvider, useSidebar] = createContext(SIDEBAR_PROVIDER_NAME);
+function SidebarProvider({ children, className, defaultOpen = true, onOpenChange: setOpenProperty, open: openProperty, style, ...props }) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const open = openProperty ?? isOpen;
+    const setOpen = useCallback((value)=>{
+        const openState = "function" == typeof value ? value(open) : value;
+        if (setOpenProperty) setOpenProperty(openState);
+        else setIsOpen(openState);
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState.toString()}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE.toString()}`;
+    }, [
+        setOpenProperty,
+        open
+    ]);
+    const toggleSidebar = useCallback(()=>{
+        if (isMobile) setOpenMobile((currentValue)=>!currentValue);
+        else setOpen((currentValue)=>!currentValue);
+    }, [
+        isMobile,
+        setOpen
+    ]);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        toggleSidebar
+    ]);
+    const state = open ? "expanded" : "collapsed";
+    return /*#__PURE__*/ jsx(SidebarContextProvider, {
+        isMobile: isMobile,
+        open: open,
+        openMobile: openMobile,
+        setOpen: setOpen,
+        setOpenMobile: setOpenMobile,
+        state: state,
+        toggleSidebar: toggleSidebar,
+        children: /*#__PURE__*/ jsx(TooltipProvider, {
+            delayDuration: 0,
+            children: /*#__PURE__*/ jsx("div", {
+                className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
+                "data-slot": "sidebar-wrapper",
+                style: {
+                    "--sidebar-width": SIDEBAR_WIDTH,
+                    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                    ...style
+                },
+                ...props,
+                children: children
+            })
+        })
+    });
+}
+const SIDEBAR_NAME = "Sidebar";
+function Sidebar({ children, className, collapsible = "offcanvas", side = "left", variant = "sidebar", ...props }) {
+    const { isMobile, openMobile, setOpenMobile, state } = useSidebar(SIDEBAR_NAME);
+    if ("none" === collapsible) return /*#__PURE__*/ jsx("div", {
+        className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
+        "data-slot": "sidebar",
+        ...props,
+        children: children
+    });
+    if (isMobile) return /*#__PURE__*/ jsx(Sheet, {
+        open: openMobile,
+        onOpenChange: setOpenMobile,
+        ...props,
+        children: /*#__PURE__*/ jsxs(SheetContent, {
+            className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+            "data-mobile": "true",
+            "data-sidebar": "sidebar",
+            "data-slot": "sidebar",
+            side: side,
+            style: {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+            },
+            children: [
+                /*#__PURE__*/ jsxs(SheetHeader, {
+                    className: "sr-only",
+                    children: [
+                        /*#__PURE__*/ jsx(SheetTitle, {
+                            children: "Sidebar"
+                        }),
+                        /*#__PURE__*/ jsx(SheetDescription, {
+                            children: "Displays the mobile sidebar."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex h-full w-full flex-col",
+                    children: children
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("group peer hidden text-sidebar-foreground md:block", className),
+        "data-collapsible": "collapsed" === state ? collapsible : "",
+        "data-side": side,
+        "data-slot": "sidebar",
+        "data-state": state,
+        "data-variant": variant,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180", "floating" === variant || "inset" === variant ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+                "data-slot": "sidebar-gap"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", "left" === side ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", "floating" === variant || "inset" === variant ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+                "data-slot": "sidebar-container",
+                ...props,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
+                    "data-sidebar": "sidebar",
+                    "data-slot": "sidebar-inner",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+const SIDEBAR_TRIGGER_NAME = "SidebarTrigger";
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar(SIDEBAR_TRIGGER_NAME);
+    return /*#__PURE__*/ jsxs(Button, {
+        className: cn("size-7", className),
+        "data-sidebar": "trigger",
+        "data-slot": "sidebar-trigger",
+        size: "icon",
+        variant: "ghost",
+        onClick: (event)=>{
+            onClick?.(event);
+            toggleSidebar();
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(PanelLeftIcon, {}),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: "Toggle Sidebar"
+            })
+        ]
+    });
+}
+const SIDEBAR_RAIL_NAME = "SidebarRail";
+function SidebarRail({ className, ...props }) {
+    const { toggleSidebar } = useSidebar(SIDEBAR_RAIL_NAME);
+    return /*#__PURE__*/ jsx("button", {
+        className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[collapsible=offcanvas]:translate-x-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize sm:flex [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", className),
+        "data-sidebar": "rail",
+        "data-slot": "sidebar-rail",
+        title: "Toggle Sidebar",
+        type: "button",
+        onClick: toggleSidebar,
+        ...props
+    });
+}
+function SidebarInset({ className, ...props }) {
+    return /*#__PURE__*/ jsx("main", {
+        className: cn("relative flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+        "data-slot": "sidebar-inset",
+        ...props
+    });
+}
+function SidebarInput({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Input, {
+        className: cn("h-8 w-full bg-background shadow-none", className),
+        "data-sidebar": "input",
+        "data-slot": "sidebar-input",
+        ...props
+    });
+}
+function SidebarHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex flex-col gap-2 p-2", className),
+        "data-sidebar": "header",
+        "data-slot": "sidebar-header",
+        ...props
+    });
+}
+function SidebarFooter({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex flex-col gap-2 p-2", className),
+        "data-sidebar": "footer",
+        "data-slot": "sidebar-footer",
+        ...props
+    });
+}
+function SidebarSeparator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Separator, {
+        className: cn("mx-2 w-auto bg-sidebar-border", className),
+        "data-sidebar": "separator",
+        "data-slot": "sidebar-separator",
+        ...props
+    });
+}
+function SidebarContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+        "data-sidebar": "content",
+        "data-slot": "sidebar-content",
+        ...props
+    });
+}
+function SidebarGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+        "data-sidebar": "group",
+        "data-slot": "sidebar-group",
+        ...props
+    });
+}
+function SidebarGroupLabel({ asChild = false, className, ...props }) {
+    const Component = asChild ? Slot : "div";
+    return /*#__PURE__*/ jsx(Component, {
+        className: cn("flex h-8 shrink-0 items-center truncate rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-3 [&>svg]:size-4 [&>svg]:shrink-0", className),
+        "data-sidebar": "group-label",
+        "data-slot": "sidebar-group-label",
+        ...props
+    });
+}
+function SidebarGroupAction({ asChild = false, className, ...props }) {
+    const Component = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Component, {
+        className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
+        "data-sidebar": "group-action",
+        "data-slot": "sidebar-group-action",
+        ...props
+    });
+}
+function SidebarGroupContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("w-full text-sm", className),
+        "data-sidebar": "group-content",
+        "data-slot": "sidebar-group-content",
+        ...props
+    });
+}
+function SidebarMenu({ className, ...props }) {
+    return /*#__PURE__*/ jsx("ul", {
+        className: cn("flex w-full min-w-0 flex-col gap-1", className),
+        "data-sidebar": "menu",
+        "data-slot": "sidebar-menu",
+        ...props
+    });
+}
+function SidebarMenuItem({ className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        className: cn("group/menu-item relative", className),
+        "data-sidebar": "menu-item",
+        "data-slot": "sidebar-menu-item",
+        ...props
+    });
+}
+const SIDEBAR_MENU_BUTTON_NAME = "SidebarMenuButton";
+function SidebarMenuButton({ asChild = false, className, isActive = false, size = "md", tooltip, variant = "default", ...props }) {
+    const Component = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
+    const button = /*#__PURE__*/ jsx(Component, {
+        className: cn(sidebarMenuButtonVariants({
+            size,
+            variant
+        }), className),
+        "data-active": isActive,
+        "data-sidebar": "menu-button",
+        "data-size": size,
+        "data-slot": "sidebar-menu-button",
+        ...props
+    });
+    if (!tooltip) return button;
+    if ("string" == typeof tooltip) tooltip = {
+        children: tooltip
+    };
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: button
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                align: "center",
+                hidden: "collapsed" !== state || isMobile,
+                side: "right",
+                ...tooltip
+            })
+        ]
+    });
+}
+function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
+    const Component = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Component, {
+        className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className),
+        "data-sidebar": "menu-action",
+        "data-slot": "sidebar-menu-action",
+        ...props
+    });
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1", className),
+        "data-sidebar": "menu-badge",
+        "data-slot": "sidebar-menu-badge",
+        ...props
+    });
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+    const [width] = useState(()=>`${String(Math.floor(40 * Math.random()) + 50)}%`);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+        "data-sidebar": "menu-skeleton",
+        "data-slot": "sidebar-menu-skeleton",
+        ...props,
+        children: [
+            showIcon ? /*#__PURE__*/ jsx(Skeleton, {
+                className: "size-4 rounded-md",
+                "data-sidebar": "menu-skeleton-icon"
+            }) : null,
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 max-w-(--skeleton-width) flex-1",
+                "data-sidebar": "menu-skeleton-text",
+                style: {
+                    "--skeleton-width": width
+                }
+            })
+        ]
+    });
+}
+function SidebarMenuSub({ className, ...props }) {
+    return /*#__PURE__*/ jsx("ul", {
+        className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
+        "data-sidebar": "menu-sub",
+        "data-slot": "sidebar-menu-sub",
+        ...props
+    });
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        className: cn("group/menu-sub-item relative", className),
+        "data-sidebar": "menu-sub-item",
+        "data-slot": "sidebar-menu-sub-item",
+        ...props
+    });
+}
+function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
+    const Component = asChild ? Slot : "a";
+    return /*#__PURE__*/ jsx(Component, {
+        className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "sm" === size && "text-xs", "md" === size && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+        "data-active": isActive,
+        "data-sidebar": "menu-sub-button",
+        "data-size": size,
+        "data-slot": "sidebar-menu-sub-button",
+        ...props
+    });
+}
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };

package/dist/components/skeleton.cjs

@@ -1 +1,44 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Skeleton:()=>Skeleton});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),tailwind_variants_namespaceObject=require("@codefast/tailwind-variants");function Skeleton({className:e,..._}){return(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("bg-muted animate-pulse rounded-lg",e),"data-slot":"skeleton",..._})}for(var __webpack_i__ in exports.Skeleton=__webpack_exports__.Skeleton,__webpack_exports__)-1===["Skeleton"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Skeleton: ()=>Skeleton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
+function Skeleton({ className, ...props }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, tailwind_variants_namespaceObject.cn)("animate-pulse rounded-lg bg-muted", className),
+        "data-slot": "skeleton",
+        ...props
+    });
+}
+exports.Skeleton = __webpack_exports__.Skeleton;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Skeleton"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/skeleton.js

@@ -1 +1,10 @@
-import{jsx as t}from"react/jsx-runtime";import{cn as e}from"@codefast/tailwind-variants";function a({className:a,...o}){return t("div",{className:e("bg-muted animate-pulse rounded-lg",a),"data-slot":"skeleton",...o})}export{a as Skeleton};
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@codefast/tailwind-variants";
+function Skeleton({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("animate-pulse rounded-lg bg-muted", className),
+        "data-slot": "skeleton",
+        ...props
+    });
+}
+export { Skeleton };

package/dist/components/slider.cjs

@@ -1,2 +1,80 @@
+"use strict";
 "use client";
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,a)=>{for(var r in a)__webpack_require__.o(a,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},__webpack_require__.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Slider:()=>Slider});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_react_namespaceObject=require("react"),tailwind_variants_namespaceObject=require("@codefast/tailwind-variants"),react_slider_namespaceObject=require("@radix-ui/react-slider");function Slider({className:e,defaultValue:a,max:r=100,min:t=0,value:i,..._}){let n=(0,external_react_namespaceObject.useMemo)(()=>Array.isArray(i)?i:Array.isArray(a)?a:[t,r],[i,a,t,r]);return(0,jsx_runtime_namespaceObject.jsxs)(react_slider_namespaceObject.Root,{className:(0,tailwind_variants_namespaceObject.cn)("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",e),"data-slot":"slider",defaultValue:a,max:r,min:t,value:i,..._,children:[(0,jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Track,{className:"bg-input relative w-full grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1","data-slot":"slider-track",children:(0,jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Range,{className:"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full","data-slot":"slider-range"})}),Array.from({length:n.length},(e,a)=>(0,jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Thumb,{"aria-label":"Volume",className:(0,tailwind_variants_namespaceObject.cn)("border-primary bg-primary after:bg-background focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40 flex size-4 items-center justify-center rounded-full border-2 shadow-sm outline-hidden after:size-full after:rounded-full after:transition-[width,height] focus-visible:ring-4 active:not-data-disabled:after:size-1"),"data-slot":"slider-thumb"},a))]})}for(var __webpack_i__ in exports.Slider=__webpack_exports__.Slider,__webpack_exports__)-1===["Slider"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Slider: ()=>Slider
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
+const react_slider_namespaceObject = require("@radix-ui/react-slider");
+const external_react_namespaceObject = require("react");
+function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }) {
+    const _values = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (Array.isArray(value)) return value;
+        return Array.isArray(defaultValue) ? defaultValue : [
+            min,
+            max
+        ];
+    }, [
+        value,
+        defaultValue,
+        min,
+        max
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_slider_namespaceObject.Root, {
+        className: (0, tailwind_variants_namespaceObject.cn)("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+        "data-slot": "slider",
+        defaultValue: defaultValue,
+        max: max,
+        min: min,
+        value: value,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Track, {
+                className: "relative w-full grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+                "data-slot": "slider-track",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Range, {
+                    className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                    "data-slot": "slider-range"
+                })
+            }),
+            Array.from({
+                length: _values.length
+            }, (_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Thumb, {
+                    "aria-label": "Volume",
+                    className: (0, tailwind_variants_namespaceObject.cn)("flex size-4 items-center justify-center rounded-full border-2 border-primary bg-primary shadow-sm outline-hidden after:size-full after:rounded-full after:bg-background after:transition-[width,height] focus-visible:ring-4 focus-visible:ring-primary/20 active:not-data-disabled:after:size-1 dark:focus-visible:ring-primary/40"),
+                    "data-slot": "slider-thumb"
+                }, index))
+        ]
+    });
+}
+exports.Slider = __webpack_exports__.Slider;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Slider"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/slider.js

@@ -1,2 +1,46 @@
 "use client";
-import{jsx as a,jsxs as t}from"react/jsx-runtime";import{useMemo as r}from"react";import{cn as e}from"@codefast/tailwind-variants";import{Range as i,Root as l,Thumb as o,Track as n}from"@radix-ui/react-slider";function d({className:d,defaultValue:s,max:u=100,min:f=0,value:c,...m}){let h=r(()=>Array.isArray(c)?c:Array.isArray(s)?s:[f,u],[c,s,f,u]);return t(l,{className:e("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",d),"data-slot":"slider",defaultValue:s,max:u,min:f,value:c,...m,children:[a(n,{className:"bg-input relative w-full grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1","data-slot":"slider-track",children:a(i,{className:"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full","data-slot":"slider-range"})}),Array.from({length:h.length},(t,r)=>a(o,{"aria-label":"Volume",className:e("border-primary bg-primary after:bg-background focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40 flex size-4 items-center justify-center rounded-full border-2 shadow-sm outline-hidden after:size-full after:rounded-full after:transition-[width,height] focus-visible:ring-4 active:not-data-disabled:after:size-1"),"data-slot":"slider-thumb"},r))]})}export{d as Slider};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@codefast/tailwind-variants";
+import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
+import { useMemo } from "react";
+function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }) {
+    const _values = useMemo(()=>{
+        if (Array.isArray(value)) return value;
+        return Array.isArray(defaultValue) ? defaultValue : [
+            min,
+            max
+        ];
+    }, [
+        value,
+        defaultValue,
+        min,
+        max
+    ]);
+    return /*#__PURE__*/ jsxs(Root, {
+        className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+        "data-slot": "slider",
+        defaultValue: defaultValue,
+        max: max,
+        min: min,
+        value: value,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Track, {
+                className: "relative w-full grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+                "data-slot": "slider-track",
+                children: /*#__PURE__*/ jsx(Range, {
+                    className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                    "data-slot": "slider-range"
+                })
+            }),
+            Array.from({
+                length: _values.length
+            }, (_, index)=>/*#__PURE__*/ jsx(Thumb, {
+                    "aria-label": "Volume",
+                    className: cn("flex size-4 items-center justify-center rounded-full border-2 border-primary bg-primary shadow-sm outline-hidden after:size-full after:rounded-full after:bg-background after:transition-[width,height] focus-visible:ring-4 focus-visible:ring-primary/20 active:not-data-disabled:after:size-1 dark:focus-visible:ring-primary/40"),
+                    "data-slot": "slider-thumb"
+                }, index))
+        ]
+    });
+}
+export { Slider };