@cmdniels/uikit 1.1.6 → 1.2.0

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;

package/out/index.d.ts

@@ -33,6 +33,13 @@ export { default as CardDescription } from "./components/card/CardDescription";
 export { default as CardFooter } from "./components/card/CardFooter";
 export { default as CardHeader } from "./components/card/CardHeader";
 export { default as CardTitle } from "./components/card/CardTitle";
+export type { ChartConfig } from "./components/chart/ChartContext";
+export { default as ChartContainer } from "./components/chart/ChartContainer";
+export { default as ChartLegend } from "./components/chart/ChartLegend";
+export { default as ChartLegendContent } from "./components/chart/ChartLegendContent";
+export { default as ChartStyle } from "./components/chart/ChartStyle";
+export { default as ChartTooltip } from "./components/chart/ChartTooltip";
+export { default as ChartTooltipContent } from "./components/chart/ChartTooltipContent";
 export { default as Checkbox } from "./components/checkbox/Checkbox";
 export { default as Combobox } from "./components/combobox/Combobox";
 export { default as ComboboxChip } from "./components/combobox/ComboboxChip";
@@ -134,6 +141,35 @@ export { default as SelectTrigger } from "./components/select/SelectTrigger";
 export { default as SelectValue } from "./components/select/SelectValue";
 export { default as Separator } from "./components/separator/Separator";
 export { default as Skeleton } from "./components/skeleton/Skeleton";
+export { default as Sheet } from "./components/sheet/Sheet";
+export { default as SheetContent } from "./components/sheet/SheetContent";
+export { default as SheetDescription } from "./components/sheet/SheetDescription";
+export { default as SheetHeader } from "./components/sheet/SheetHeader";
+export { default as SheetTitle } from "./components/sheet/SheetTitle";
+export { default as SheetTrigger } from "./components/sheet/SheetTrigger";
+export { default as Sidebar } from "./components/sidebar/Sidebar";
+export { default as SidebarContent } from "./components/sidebar/SidebarContent";
+export { default as SidebarFooter } from "./components/sidebar/SidebarFooter";
+export { default as SidebarGroup } from "./components/sidebar/SidebarGroup";
+export { default as SidebarGroupAction } from "./components/sidebar/SidebarGroupAction";
+export { default as SidebarGroupContent } from "./components/sidebar/SidebarGroupContent";
+export { default as SidebarGroupLabel } from "./components/sidebar/SidebarGroupLabel";
+export { default as SidebarHeader } from "./components/sidebar/SidebarHeader";
+export { default as SidebarInput } from "./components/sidebar/SidebarInput";
+export { default as SidebarInset } from "./components/sidebar/SidebarInset";
+export { default as SidebarMenu } from "./components/sidebar/SidebarMenu";
+export { default as SidebarMenuAction } from "./components/sidebar/SidebarMenuAction";
+export { default as SidebarMenuBadge } from "./components/sidebar/SidebarMenuBadge";
+export { default as SidebarMenuButton } from "./components/sidebar/SidebarMenuButton";
+export { default as SidebarMenuItem } from "./components/sidebar/SidebarMenuItem";
+export { default as SidebarMenuSkeleton } from "./components/sidebar/SidebarMenuSkeleton";
+export { default as SidebarMenuSub } from "./components/sidebar/SidebarMenuSub";
+export { default as SidebarMenuSubButton } from "./components/sidebar/SidebarMenuSubButton";
+export { default as SidebarMenuSubItem } from "./components/sidebar/SidebarMenuSubItem";
+export { default as SidebarProvider } from "./components/sidebar/SidebarProvider";
+export { default as SidebarRail } from "./components/sidebar/SidebarRail";
+export { default as SidebarSeparator } from "./components/sidebar/SidebarSeparator";
+export { default as SidebarTrigger } from "./components/sidebar/SidebarTrigger";
 export { default as Toaster } from "./components/sonner/Toaster";
 export { default as Sortable } from "./components/sortable/Sortable";
 export { default as SortableContent } from "./components/sortable/SortableContent";

package/out/index.js

@@ -42,6 +42,12 @@ export { default as CardDescription } from "./components/card/CardDescription";
 export { default as CardFooter } from "./components/card/CardFooter";
 export { default as CardHeader } from "./components/card/CardHeader";
 export { default as CardTitle } from "./components/card/CardTitle";
+export { default as ChartContainer } from "./components/chart/ChartContainer";
+export { default as ChartLegend } from "./components/chart/ChartLegend";
+export { default as ChartLegendContent } from "./components/chart/ChartLegendContent";
+export { default as ChartStyle } from "./components/chart/ChartStyle";
+export { default as ChartTooltip } from "./components/chart/ChartTooltip";
+export { default as ChartTooltipContent } from "./components/chart/ChartTooltipContent";
 // Checkbox
 export { default as Checkbox } from "./components/checkbox/Checkbox";
 // Combobox
@@ -162,6 +168,37 @@ export { default as SelectValue } from "./components/select/SelectValue";
 export { default as Separator } from "./components/separator/Separator";
 // Skeleton
 export { default as Skeleton } from "./components/skeleton/Skeleton";
+// Sheet
+export { default as Sheet } from "./components/sheet/Sheet";
+export { default as SheetContent } from "./components/sheet/SheetContent";
+export { default as SheetDescription } from "./components/sheet/SheetDescription";
+export { default as SheetHeader } from "./components/sheet/SheetHeader";
+export { default as SheetTitle } from "./components/sheet/SheetTitle";
+export { default as SheetTrigger } from "./components/sheet/SheetTrigger";
+// Sidebar
+export { default as Sidebar } from "./components/sidebar/Sidebar";
+export { default as SidebarContent } from "./components/sidebar/SidebarContent";
+export { default as SidebarFooter } from "./components/sidebar/SidebarFooter";
+export { default as SidebarGroup } from "./components/sidebar/SidebarGroup";
+export { default as SidebarGroupAction } from "./components/sidebar/SidebarGroupAction";
+export { default as SidebarGroupContent } from "./components/sidebar/SidebarGroupContent";
+export { default as SidebarGroupLabel } from "./components/sidebar/SidebarGroupLabel";
+export { default as SidebarHeader } from "./components/sidebar/SidebarHeader";
+export { default as SidebarInput } from "./components/sidebar/SidebarInput";
+export { default as SidebarInset } from "./components/sidebar/SidebarInset";
+export { default as SidebarMenu } from "./components/sidebar/SidebarMenu";
+export { default as SidebarMenuAction } from "./components/sidebar/SidebarMenuAction";
+export { default as SidebarMenuBadge } from "./components/sidebar/SidebarMenuBadge";
+export { default as SidebarMenuButton } from "./components/sidebar/SidebarMenuButton";
+export { default as SidebarMenuItem } from "./components/sidebar/SidebarMenuItem";
+export { default as SidebarMenuSkeleton } from "./components/sidebar/SidebarMenuSkeleton";
+export { default as SidebarMenuSub } from "./components/sidebar/SidebarMenuSub";
+export { default as SidebarMenuSubButton } from "./components/sidebar/SidebarMenuSubButton";
+export { default as SidebarMenuSubItem } from "./components/sidebar/SidebarMenuSubItem";
+export { default as SidebarProvider } from "./components/sidebar/SidebarProvider";
+export { default as SidebarRail } from "./components/sidebar/SidebarRail";
+export { default as SidebarSeparator } from "./components/sidebar/SidebarSeparator";
+export { default as SidebarTrigger } from "./components/sidebar/SidebarTrigger";
 // Sonner
 export { default as Toaster } from "./components/sonner/Toaster";
 // Sortable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdniels/uikit",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@clerk/themes": "^2.4.46",
+    "recharts": "^3.6.0",
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"