@cmdniels/uikit 1.1.5 → 1.1.7

package/out/components/sidebar/SidebarHeader.d.ts

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

package/out/components/sidebar/SidebarHeader.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className) }, props)));
+}

package/out/components/sidebar/SidebarInput.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "react";
+import Input from "../../components/input/Input";
+export default function SidebarInput({ className, ...props }: ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarInput.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+import Input from "../../components/input/Input";
+export default function SidebarInput(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Input, Object.assign({ "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className) }, props)));
+}

package/out/components/sidebar/SidebarInset.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarInset({ className, ...props }: ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarInset.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarInset(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("main", Object.assign({ "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-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className) }, props)));
+}

package/out/components/sidebar/SidebarMenu.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarMenu({ className, ...props }: ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenu.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarMenu(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("ul", Object.assign({ "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className) }, props)));
+}

package/out/components/sidebar/SidebarMenuAction.d.ts

@@ -0,0 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps } from "react";
+export default function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & ComponentProps<"button"> & {
+    showOnHover?: boolean;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/out/components/sidebar/SidebarMenuAction.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import cn from "../../cn";
+export default function SidebarMenuAction(_a) {
+    var { className, render, showOnHover = false } = _a, props = __rest(_a, ["className", "render", "showOnHover"]);
+    return useRender({
+        defaultTagName: "button",
+        props: mergeProps({
+            className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-card-foreground ring-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-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-accent hover:text-accent-foreground focus-visible:ring-2 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/menu-button:text-accent-foreground md:opacity-0 data-open:opacity-100", className),
+        }, props),
+        render,
+        state: {
+            slot: "sidebar-menu-action",
+            sidebar: "menu-action",
+        },
+    });
+}

package/out/components/sidebar/SidebarMenuBadge.d.ts

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

package/out/components/sidebar/SidebarMenuBadge.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarMenuBadge(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", 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-card-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-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 peer-data-active/menu-button:text-accent-foreground", className) }, props)));
+}

package/out/components/sidebar/SidebarMenuButton.d.ts

@@ -0,0 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+import { type ComponentProps } from "react";
+import TooltipContent from "../../components/tooltip/TooltipContent";
+import sidebarMenuButtonVariants from "./sidebarMenuButtonVariants";
+export default function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & ComponentProps<"button"> & {
+    isActive?: boolean;
+    tooltip?: string | ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenuButton.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import cn from "../../cn";
+import Tooltip from "../../components/tooltip/Tooltip";
+import TooltipContent from "../../components/tooltip/TooltipContent";
+import TooltipTrigger from "../../components/tooltip/TooltipTrigger";
+import sidebarMenuButtonVariants from "./sidebarMenuButtonVariants";
+import useSidebar from "./useSidebar";
+export default function SidebarMenuButton(_a) {
+    var { render, isActive = false, variant = "default", size = "default", tooltip, className } = _a, props = __rest(_a, ["render", "isActive", "variant", "size", "tooltip", "className"]);
+    const { isMobile, state } = useSidebar();
+    const comp = useRender({
+        defaultTagName: "button",
+        props: mergeProps({
+            className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        }, props),
+        render: !tooltip ? render : TooltipTrigger,
+        state: {
+            slot: "sidebar-menu-button",
+            sidebar: "menu-button",
+            size,
+            active: isActive,
+        },
+    });
+    if (!tooltip) {
+        return comp;
+    }
+    if (typeof tooltip === "string") {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, Object.assign({ side: "right", align: "center", hidden: state !== "collapsed" || isMobile }, tooltip))] }));
+}

package/out/components/sidebar/SidebarMenuItem.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarMenuItem({ className, ...props }: ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenuItem.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarMenuItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("li", Object.assign({ "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className) }, props)));
+}

package/out/components/sidebar/SidebarMenuSkeleton.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentProps } from "react";
+export default function SidebarMenuSkeleton({ className, showIcon, ...props }: ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenuSkeleton.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import cn from "../../cn";
+import Skeleton from "../../components/skeleton/Skeleton";
+export default function SidebarMenuSkeleton(_a) {
+    var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
+    // Random width between 50 to 90%.
+    const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
+    return (_jsxs("div", Object.assign({ "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className) }, props, { children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    "--skeleton-width": width,
+                } })] })));
+}

package/out/components/sidebar/SidebarMenuSub.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarMenuSub({ className, ...props }: ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenuSub.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarMenuSub(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("ul", Object.assign({ "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className) }, props)));
+}

package/out/components/sidebar/SidebarMenuSubButton.d.ts

@@ -0,0 +1,6 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps } from "react";
+export default function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & ComponentProps<"a"> & {
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/out/components/sidebar/SidebarMenuSubButton.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import cn from "../../cn";
+export default function SidebarMenuSubButton(_a) {
+    var { render, size = "md", isActive = false, className } = _a, props = __rest(_a, ["render", "size", "isActive", "className"]);
+    return useRender({
+        defaultTagName: "a",
+        props: mergeProps({
+            className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-accent data-active:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground", className),
+        }, props),
+        render,
+        state: {
+            slot: "sidebar-menu-sub-button",
+            sidebar: "menu-sub-button",
+            size,
+            active: isActive,
+        },
+    });
+}

package/out/components/sidebar/SidebarMenuSubItem.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarMenuSubItem({ className, ...props }: ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarMenuSubItem.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SidebarMenuSubItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("li", Object.assign({ "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className) }, props)));
+}

package/out/components/sidebar/SidebarProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps } from "react";
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+export declare const SidebarContext: import("react").Context<SidebarContextProps | null>;
+export default function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/out/components/sidebar/SidebarProvider.js

@@ -0,0 +1,69 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useEffect, useMemo, useState, } from "react";
+import cn from "../../cn";
+import useIsMobile from "./useIsMobile";
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export const SidebarContext = createContext(null);
+export default function SidebarProvider(_a) {
+    var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const setOpen = useCallback((value) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(() => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)), [isMobile, setOpen, setOpenMobile]);
+    // Adds a keyboard shortcut to toggle the sidebar.
+    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]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+    const contextValue = useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", Object.assign({ "data-slot": "sidebar-wrapper", style: Object.assign({ "--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width-icon": SIDEBAR_WIDTH_ICON }, style), className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-card", className) }, props, { children: children })) }));
+}

package/out/components/sidebar/SidebarRail.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "react";
+export default function SidebarRail({ className, ...props }: ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarRail.js

@@ -0,0 +1,20 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+import useSidebar from "./useSidebar";
+export default function SidebarRail(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("button", Object.assign({ "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: 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-0.5 hover:after:bg-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=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full hover:group-data-[collapsible=offExamples]:bg-card", "[[data-side=left][data-collapsible=offExamples]_&]:-right-2", "[[data-side=right][data-collapsible=offExamples]_&]:-left-2", className) }, props)));
+}

package/out/components/sidebar/SidebarSeparator.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "react";
+import Separator from "../../components/separator/Separator";
+export default function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarSeparator.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+import Separator from "../../components/separator/Separator";
+export default function SidebarSeparator(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Separator, Object.assign({ "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-border", className) }, props)));
+}

package/out/components/sidebar/SidebarTrigger.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "react";
+import Button from "../../components/button/Button";
+export default function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;

package/out/components/sidebar/SidebarTrigger.js

@@ -0,0 +1,25 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLayoutSidebar } from "@tabler/icons-react";
+import cn from "../../cn";
+import Button from "../../components/button/Button";
+import useSidebar from "./useSidebar";
+export default function SidebarTrigger(_a) {
+    var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, Object.assign({ "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            toggleSidebar();
+        } }, props, { children: [_jsx(IconLayoutSidebar, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] })));
+}

package/out/components/sidebar/sidebarMenuButtonVariants.d.ts

@@ -0,0 +1,5 @@
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export default sidebarMenuButtonVariants;

package/out/components/sidebar/sidebarMenuButtonVariants.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-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-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-accent data-open:hover:text-accent-foreground data-active:bg-accent data-active:font-medium data-active:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
+    variants: {
+        variant: {
+            default: "hover:bg-accent hover:text-accent-foreground",
+            outline: "bg-background shadow-[0_0_0_1px_hsl(var(--border))] hover:bg-accent hover:text-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--accent))]",
+        },
+        size: {
+            default: "h-8 text-sm",
+            sm: "h-7 text-xs",
+            lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+export default sidebarMenuButtonVariants;

package/out/components/sidebar/useIsMobile.d.ts

@@ -0,0 +1 @@
+export default function useIsMobile(): boolean;

package/out/components/sidebar/useIsMobile.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+export default function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const mql = window.matchMedia("(max-width: 768px)");
+        const onChange = () => {
+            setIsMobile(mql.matches);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(mql.matches);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return isMobile;
+}

package/out/components/sidebar/useSidebar.d.ts

@@ -0,0 +1,9 @@
+export default function useSidebar(): {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};

package/out/components/sidebar/useSidebar.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { SidebarContext } from "./SidebarProvider";
+export default function useSidebar() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a SidebarProvider.");
+    }
+    return context;
+}

package/out/components/spinner/Spinner.d.ts

@@ -1,2 +1,3 @@
 import { IconLoader } from "@tabler/icons-react";
-export default function Spinner({ className, ...props }: React.ComponentProps<typeof IconLoader>): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+export default function Spinner({ className, ...props }: ComponentProps<typeof IconLoader>): import("react/jsx-runtime").JSX.Element;