@ciridae/ui 0.2.0

package/dist/components/ui/sidebar/layout.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@ciridae/ui/utils";
+import { Input } from "@ciridae/ui/input";
+import { Separator } from "@ciridae/ui/separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@ciridae/ui/sheet";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar, } from "@ciridae/ui/sidebar/context";
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", expandOnCollapsedBlankClick = false, className, children, onClick, ...props }) {
+    const { isMobile, state, openMobile, setOpen, setOpenMobile } = useSidebar();
+    if (collapsible === "none") {
+        return (_jsx(SidebarStatic, { className: className, ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(SidebarMobile, { open: openMobile, setOpen: setOpenMobile, side: side, onClick: onClick, ...props, children: children }));
+    }
+    const handleDesktopClick = (event) => {
+        onClick?.(event);
+        if (!expandOnCollapsedBlankClick || event.defaultPrevented)
+            return;
+        if (state !== "collapsed" || collapsible !== "icon")
+            return;
+        if (isInteractiveSidebarTarget(event.target))
+            return;
+        setOpen(true);
+    };
+    return (_jsx(SidebarDesktop, { className: className, collapsible: collapsible, expandOnCollapsedBlankClick: expandOnCollapsedBlankClick, onClick: handleDesktopClick, side: side, state: state, variant: variant, ...props, children: children }));
+}
+function SidebarStatic({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
+}
+function SidebarMobile({ children, open, setOpen, side, ...props }) {
+    const sidebarStyle = React.useMemo(() => ({ "--sidebar-width": SIDEBAR_WIDTH_MOBILE }), []);
+    return (_jsx(Sheet, { open: open, onOpenChange: setOpen, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: sidebarStyle, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+}
+function SidebarDesktop({ className, children, collapsible, expandOnCollapsedBlankClick, side, state, variant, ...props }) {
+    return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx(SidebarGap, { variant: variant }), _jsx("div", { "data-slot": "sidebar-container", className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left"
+                    ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                    : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset"
+                    ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+                    : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", expandOnCollapsedBlankClick &&
+                    side === "left" &&
+                    "group-data-[collapsible=icon]:cursor-e-resize", expandOnCollapsedBlankClick &&
+                    side === "right" &&
+                    "group-data-[collapsible=icon]:cursor-w-resize", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-md group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
+}
+function isInteractiveSidebarTarget(target) {
+    return (target instanceof Element &&
+        Boolean(target.closest("button,a,input,textarea,select,summary,[role='button'],[role='link'],[data-sidebar-no-expand]")));
+}
+function SidebarGap({ variant }) {
+    return (_jsx("div", { "data-slot": "sidebar-gap", 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", variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }));
+}
+function SidebarInset({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full 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-lg md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
+}
+function SidebarInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
+}
+function SidebarHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-(--sidebar-group-gap) p-(--sidebar-padding)", className), ...props }));
+}
+function SidebarFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("flex flex-col gap-(--sidebar-group-gap) p-(--sidebar-padding)", className), ...props }));
+}
+function SidebarSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-(--sidebar-padding) w-auto bg-sidebar-border", className), ...props }));
+}
+function SidebarContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-(--sidebar-content-gap) overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
+}
+export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInput, SidebarInset, SidebarSeparator, };

package/dist/components/ui/sidebar/menu.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { TooltipContent } from "@ciridae/ui/tooltip";
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };

package/dist/components/ui/sidebar/menu.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { Skeleton } from "@ciridae/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { useSidebar } from "@ciridae/ui/sidebar/context";
+const sidebarMenuButtonVariants = cva("peer/menu-button relative flex w-full items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) py-1 text-left text-sm text-sidebar-foreground/72 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow,width,height,padding] before:absolute before:inset-y-1 before:left-0 before:w-(--sidebar-active-indicator-width) before:rounded-r-sm before:bg-transparent before:content-[''] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-(--control-height)! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:before:hidden group-data-[collapsible=icon]:[&>span:not([data-slot=avatar])]:hidden hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground hover:[&>svg]:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] 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/75 data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-none data-[active=true]:before:bg-sidebar-primary data-[active=true]:[&>svg]: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-(--sidebar-icon-size) [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/52", {
+    variants: {
+        variant: {
+            default: "hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
+            outline: "bg-sidebar shadow-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-ring-hover",
+        },
+        size: {
+            default: "h-(--sidebar-item-height)",
+            sm: "h-(--sidebar-item-height-sm) text-xs",
+            lg: "h-[calc(var(--sidebar-item-height)+0.625rem)] group-data-[collapsible=icon]:p-0!",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function SidebarMenu({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-(--sidebar-menu-gap)", className), ...props }));
+}
+function SidebarMenuItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
+}
+function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    const { isMobile, state } = useSidebar();
+    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    if (!tooltip)
+        return button;
+    const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltipProps })] }));
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("absolute top-0.5 right-0.5 flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/60 ring-sidebar-ring outline-hidden transition-colors peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] after:absolute after:-inset-2 md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", 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), ...props }));
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-(--sidebar-item-height-sm) min-w-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--badge-radius)] px-(--badge-padding-x) text-meta text-sidebar-foreground/60 tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+    const width = React.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+    const skeletonStyle = React.useMemo(() => ({ "--skeleton-width": width }), [width]);
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-(--sidebar-item-height) items-center gap-(--control-gap) rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x)", className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-(--sidebar-icon-size) rounded-[var(--sidebar-item-radius)]", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: skeletonStyle })] }));
+}
+function SidebarMenuSub({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("ml-(--sidebar-nested-indent) flex min-w-0 flex-col gap-(--sidebar-menu-gap) border-l border-sidebar-border/80 py-0.5 pl-(--sidebar-item-padding-x)", "group-data-[collapsible=icon]:hidden", className), ...props }));
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
+}
+function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("relative flex h-(--sidebar-sub-item-height) min-w-0 items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/65 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow] hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground hover:[&>svg]:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] 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-transparent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-none data-[active=true]:[&>svg]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/45", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
+}
+export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };

package/dist/components/ui/sidebar/provider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export { SidebarProvider };

package/dist/components/ui/sidebar/provider.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useIsMobile } from "@ciridae/ui/use-mobile";
+import { cn } from "@ciridae/ui/utils";
+import { TooltipProvider } from "@ciridae/ui/tooltip";
+import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SidebarContext, } from "@ciridae/ui/sidebar/context";
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    const toggleSidebar = React.useCallback(() => (isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)), [isMobile, setOpen, setOpenMobile]);
+    useSidebarShortcut(toggleSidebar);
+    const state = open ? "expanded" : "collapsed";
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    const sidebarStyle = React.useMemo(() => ({
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style,
+    }), [style]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: sidebarStyle, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
+}
+function useSidebarShortcut(toggleSidebar) {
+    React.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]);
+}
+export { SidebarProvider };

package/dist/components/ui/sidebar/rail.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function SidebarRail({ className, onClick, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+export { SidebarRail };

package/dist/components/ui/sidebar/rail.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSidebar } from "@ciridae/ui/sidebar/context";
+import { cn } from "@ciridae/ui/utils";
+function SidebarRail({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                toggleSidebar();
+        }, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear 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] hover:after:bg-sidebar-border sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
+}
+export { SidebarRail };

package/dist/components/ui/sidebar/trigger.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Button } from "@ciridae/ui/button";
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+export { SidebarTrigger };

package/dist/components/ui/sidebar/trigger.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuIcon, PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { useSidebar } from "@ciridae/ui/sidebar/context";
+import { cn } from "@ciridae/ui/utils";
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { isMobile, openMobile, state, toggleSidebar } = useSidebar();
+    const isExpanded = isMobile ? openMobile : state === "expanded";
+    const label = isExpanded ? "Collapse sidebar" : "Expand sidebar";
+    const Icon = isMobile && !isExpanded ? MenuIcon : isExpanded ? PanelLeftCloseIcon : PanelLeftOpenIcon;
+    return (_jsxs(Button, { "aria-label": label, "data-sidebar": "trigger", "data-slot": "sidebar-trigger", title: label, variant: "ghost", size: "icon", className: cn("size-7", className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(Icon, {}), _jsx("span", { className: "sr-only", children: label })] }));
+}
+export { SidebarTrigger };

package/dist/components/ui/sidebar-account-menu-theme.d.ts

@@ -0,0 +1,7 @@
+type SidebarAccountThemeMode = "light" | "dark" | "system";
+declare function AccountThemeSection({ mode, onModeChange, }: {
+    mode?: SidebarAccountThemeMode;
+    onModeChange?: (mode: SidebarAccountThemeMode) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { AccountThemeSection };
+export type { SidebarAccountThemeMode };

package/dist/components/ui/sidebar-account-menu-theme.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { DropdownMenuSeparator } from "@ciridae/ui/dropdown-menu";
+import { cn } from "@ciridae/ui/utils";
+const sidebarAccountThemeModes = ["light", "dark", "system"];
+function AccountThemeSection({ mode, onModeChange, }) {
+    if (!mode || !onModeChange)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(AccountThemeControls, { mode: mode, onModeChange: onModeChange })] }));
+}
+function AccountThemeControls({ mode, onModeChange, }) {
+    return (_jsxs("div", { className: "px-(--menu-item-padding-x) py-1", children: [_jsx("div", { className: "mb-1 text-xs font-control text-muted-foreground", children: "Theme" }), _jsx("div", { className: "grid grid-cols-3 gap-0.5 rounded-[var(--sidebar-item-radius)] border border-border/70 bg-transparent p-0.5", children: sidebarAccountThemeModes.map((themeMode) => (_jsx(ThemeModeButton, { active: mode === themeMode, mode: themeMode, onModeChange: onModeChange }, themeMode))) })] }));
+}
+function ThemeModeButton({ active, mode, onModeChange, }) {
+    const label = getThemeModeLabel(mode);
+    return (_jsxs("button", { "aria-pressed": active, className: cn("flex h-(--sidebar-item-height-sm) items-center justify-center gap-1 rounded-sm px-2 text-xs font-control text-muted-foreground outline-hidden transition-[color,background-color,box-shadow]", "hover:bg-background hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring", active && "bg-muted text-foreground shadow-none"), onClick: () => onModeChange(mode), type: "button", children: [_jsx(ThemeModeIcon, { mode: mode }), _jsx("span", { children: label })] }));
+}
+function ThemeModeIcon({ mode }) {
+    if (mode === "light")
+        return _jsx(SunIcon, { className: "size-3.5" });
+    if (mode === "system")
+        return _jsx(MonitorIcon, { className: "size-3.5" });
+    return _jsx(MoonIcon, { className: "size-3.5" });
+}
+function getThemeModeLabel(mode) {
+    if (mode === "light")
+        return "Light";
+    if (mode === "system")
+        return "System";
+    return "Dark";
+}
+export { AccountThemeSection };

package/dist/components/ui/sidebar-account-menu.d.ts

@@ -0,0 +1,14 @@
+import { type SidebarAccountThemeMode } from "@ciridae/ui/sidebar-account-menu-theme";
+type SidebarAccountMenuProps = {
+    username?: string | null;
+    email?: string | null;
+    imageUrl?: string | null;
+    onSignOut?: () => void;
+    isSigningOut?: boolean;
+    themeMode?: SidebarAccountThemeMode;
+    onThemeModeChange?: (mode: SidebarAccountThemeMode) => void;
+    className?: string;
+};
+declare function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut, themeMode, onThemeModeChange, className, }: SidebarAccountMenuProps): import("react/jsx-runtime").JSX.Element;
+export { SidebarAccountMenu };
+export type { SidebarAccountMenuProps, SidebarAccountThemeMode };

package/dist/components/ui/sidebar-account-menu.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronUpIcon, LogOutIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@ciridae/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@ciridae/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@ciridae/ui/sidebar/menu";
+import { useSidebar } from "@ciridae/ui/sidebar/context";
+import { AccountThemeSection, } from "@ciridae/ui/sidebar-account-menu-theme";
+import { Spinner } from "@ciridae/ui/spinner";
+import { cn } from "@ciridae/ui/utils";
+function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut = false, themeMode, onThemeModeChange, className, }) {
+    const { isMobile, state } = useSidebar();
+    const label = getAccountLabel(username, email);
+    const detail = email ?? "Signed in";
+    const accountMark = getAccountMark(label);
+    const isCollapsed = state === "collapsed" && !isMobile;
+    return (_jsx(SidebarMenu, { className: cn("group-data-[collapsible=icon]:-mx-0.5", className), children: _jsx(SidebarMenuItem, { children: _jsx(AccountDropdown, { detail: detail, imageUrl: imageUrl, accountMark: accountMark, isCollapsed: isCollapsed, isSigningOut: isSigningOut, label: label, onSignOut: onSignOut, onThemeModeChange: onThemeModeChange, themeMode: themeMode }) }) }));
+}
+function AccountDropdown({ accountMark, detail, imageUrl, isCollapsed, isSigningOut, label, onSignOut, onThemeModeChange, themeMode, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(AccountMenuTrigger, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsxs(DropdownMenuContent, { align: isCollapsed ? "end" : "start", className: cn("shadow-sm", isCollapsed ? "w-44" : "w-52"), side: isCollapsed ? "right" : "top", sideOffset: 4, children: [_jsx(AccountMenuLabel, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsx(AccountThemeSection, { mode: themeMode, onModeChange: onThemeModeChange }), _jsx(DropdownMenuSeparator, {}), _jsx(AccountSignOutItem, { isSigningOut: isSigningOut, onSignOut: onSignOut })] })] }));
+}
+function AccountMenuTrigger({ accountMark, detail, imageUrl, label, }) {
+    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { "aria-label": `Open account menu for ${label}`, className: cn("h-auto min-h-(--control-height) py-1", "text-sidebar-foreground/78 hover:text-sidebar-accent-foreground", "data-[state=open]:bg-sidebar-accent/45 data-[state=open]:text-sidebar-accent-foreground", "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0!"), tooltip: label, children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountTriggerText, { detail: detail, label: label }), _jsx(ChevronUpIcon, { className: "ml-auto size-3.5 text-sidebar-foreground/42 group-data-[collapsible=icon]:hidden" })] }) }));
+}
+function AccountTriggerText({ detail, label }) {
+    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left group-data-[collapsible=icon]:hidden", children: [_jsx("span", { className: "truncate text-sm leading-4 font-control", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-sidebar-foreground/46", children: detail })] }));
+}
+function AccountMenuLabel({ accountMark, detail, imageUrl, label, }) {
+    return (_jsx(DropdownMenuLabel, { className: "p-0 normal-case tracking-normal text-popover-foreground", children: _jsxs("div", { className: "flex min-w-0 items-center gap-(--control-gap) px-(--menu-item-padding-x) py-0.5", children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountMenuLabelText, { detail: detail, label: label })] }) }));
+}
+function AccountMenuLabelText({ detail, label }) {
+    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "truncate text-sm leading-4 font-control", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-muted-foreground", children: detail })] }));
+}
+function AccountSignOutItem({ isSigningOut, onSignOut, }) {
+    return (_jsxs(DropdownMenuItem, { className: "min-h-(--sidebar-item-height)", disabled: !onSignOut || isSigningOut, onSelect: () => onSignOut?.(), children: [isSigningOut ? _jsx(Spinner, { "aria-hidden": "true" }) : _jsx(LogOutIcon, {}), _jsx("span", { children: "Sign out" })] }));
+}
+function AccountAvatar({ accountMark, imageUrl, }) {
+    return (_jsxs(Avatar, { className: "size-5 rounded-[var(--sidebar-item-radius)]", size: "sm", children: [imageUrl ? _jsx(AvatarImage, { alt: "", src: imageUrl }) : null, _jsx(AvatarFallback, { className: "rounded-[var(--sidebar-item-radius)] bg-sidebar-accent text-xs text-sidebar-accent-foreground", children: accountMark })] }));
+}
+function getAccountLabel(username, email) {
+    const trimmedUsername = username?.trim();
+    if (trimmedUsername)
+        return trimmedUsername;
+    const emailPrefix = email?.split("@")[0]?.trim();
+    if (emailPrefix)
+        return emailPrefix;
+    return "Account";
+}
+function getAccountMark(label) {
+    return label.match(/[A-Za-z0-9]/)?.[0]?.toUpperCase() ?? "U";
+}
+export { SidebarAccountMenu };

package/dist/components/ui/sidebar.d.ts

@@ -0,0 +1,7 @@
+export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInput, SidebarInset, SidebarSeparator, } from "@ciridae/ui/sidebar/layout";
+export { SidebarRail } from "@ciridae/ui/sidebar/rail";
+export { SidebarTrigger } from "@ciridae/ui/sidebar/trigger";
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, } from "@ciridae/ui/sidebar/group";
+export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@ciridae/ui/sidebar/menu";
+export { SidebarProvider } from "@ciridae/ui/sidebar/provider";
+export { useSidebar } from "@ciridae/ui/sidebar/context";

package/dist/components/ui/sidebar.js

@@ -0,0 +1,7 @@
+export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInput, SidebarInset, SidebarSeparator, } from "@ciridae/ui/sidebar/layout";
+export { SidebarRail } from "@ciridae/ui/sidebar/rail";
+export { SidebarTrigger } from "@ciridae/ui/sidebar/trigger";
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, } from "@ciridae/ui/sidebar/group";
+export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@ciridae/ui/sidebar/menu";
+export { SidebarProvider } from "@ciridae/ui/sidebar/provider";
+export { useSidebar } from "@ciridae/ui/sidebar/context";

package/dist/components/ui/skeleton.d.ts

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+import { css } from "@ciridae/ui/styled-system/css";
+const skeletonClassName = css({
+    animation: "pulse",
+    backgroundColor: "accent",
+    borderRadius: "md",
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+    },
+});
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", className: cn(skeletonClassName, className), ...props }));
+}
+export { Skeleton };

package/dist/components/ui/slider.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Slider };

package/dist/components/ui/slider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, 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), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "block size-4 shrink-0 rounded-full border border-primary bg-surface shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-[var(--focus-ring-width)] focus-visible:ring-[var(--focus-ring-width)] focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
+}
+export { Slider };

package/dist/components/ui/sonner.d.ts

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

package/dist/components/ui/sonner.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { Toaster as Sonner } from "sonner";
+import { Spinner } from "@ciridae/ui/spinner";
+const toasterStyle = {
+    "--normal-bg": "var(--popover)",
+    "--normal-text": "var(--popover-foreground)",
+    "--normal-border": "var(--border)",
+    "--border-radius": "var(--radius)",
+    "--success-bg": "var(--success-muted)",
+    "--success-border": "var(--success)",
+    "--success-text": "var(--success)",
+    "--info-bg": "var(--info-muted)",
+    "--info-border": "var(--info)",
+    "--info-text": "var(--info)",
+    "--warning-bg": "var(--warning-muted)",
+    "--warning-border": "var(--warning)",
+    "--warning-text": "var(--warning-foreground)",
+    "--error-bg": "var(--destructive)",
+    "--error-border": "var(--destructive)",
+    "--error-text": "var(--destructive-foreground)",
+};
+const Toaster = ({ theme = "system", ...props }) => {
+    return (_jsx(Sonner, { theme: theme, icons: {
+            success: _jsx(CircleCheckIcon, { className: "size-4" }),
+            info: _jsx(InfoIcon, { className: "size-4" }),
+            warning: _jsx(TriangleAlertIcon, { className: "size-4" }),
+            error: _jsx(OctagonXIcon, { className: "size-4" }),
+            loading: _jsx(Spinner, { className: "size-4" }),
+        }, style: toasterStyle, ...props }));
+};
+export { Toaster };

package/dist/components/ui/spinner.d.ts

@@ -0,0 +1,2 @@
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
+export { Spinner };

package/dist/components/ui/spinner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { css } from "@ciridae/ui/styled-system/css";
+const spinnerClassName = css({
+    animation: "spin",
+    height: "icon.sm",
+    width: "icon.sm",
+    "@media (prefers-reduced-motion: reduce)": {
+        animationDuration: "1.8s",
+    },
+});
+function Spinner({ className, ...props }) {
+    return (_jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn(spinnerClassName, className), ...props }));
+}
+export { Spinner };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/components/ui/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Switch({ className, size = "default", ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground") }) }));
+}
+export { Switch };

package/dist/components/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/components/ui/table.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("h-(--table-row-height) border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-xs font-medium tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-(--table-cell-padding-x) py-(--table-cell-padding-y) align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/components/ui/tabs-variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from "class-variance-authority";
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsListVariantProps = VariantProps<typeof tabsListVariants>;
+export { tabsListVariants, type TabsListVariantProps };

package/dist/components/ui/tabs-variants.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.5 text-muted-foreground group-data-[orientation=horizontal]/tabs:h-(--control-height) group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+    variants: {
+        variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export { tabsListVariants };