@mesob/ui 0.2.0 → 0.2.1

package/dist/components/sidebar.js

@@ -10,18 +10,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,23 +43,31 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
     }
   );
 }
 
 // src/components/input.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type,
@@ -77,14 +85,14 @@ function Input({ className, type, ...props }) {
 
 // src/components/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -102,25 +110,25 @@ function Separator({
 // src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx4(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -133,14 +141,14 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx4(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
+    /* @__PURE__ */ jsx3(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs2(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
@@ -150,9 +158,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsx4(IconX, { className: "size-4" }),
-            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsxs2(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx3(IconX, { className: "size-4" }),
+            /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -160,7 +168,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-slot": "sheet-header",
@@ -173,7 +181,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -186,7 +194,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -197,9 +205,9 @@ function SheetDescription({
 }
 
 // src/components/skeleton.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "skeleton",
@@ -211,12 +219,12 @@ function Skeleton({ className, ...props }) {
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -229,12 +237,12 @@ function Tooltip({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -242,7 +250,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -254,7 +262,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx6(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx5(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -284,7 +292,7 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { IconMenu2 } from "@tabler/icons-react";
 import { cva as cva2 } from "class-variance-authority";
 import * as React2 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_WIDTH_COOKIE = "sidebar_width";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -375,7 +383,7 @@ function SidebarProvider({
     maxWidth: SIDEBAR_WIDTH_MAX
   };
   const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;
-  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -403,7 +411,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         "data-slot": "sidebar",
@@ -417,7 +425,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx6(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -429,16 +437,16 @@ function Sidebar({
         },
         side,
         children: [
-          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx7(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx7(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx6(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx6(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx6("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "group peer text-sidebar-foreground hidden md:block",
@@ -448,7 +456,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -460,7 +468,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -472,7 +480,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -493,7 +501,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Button,
     {
       "data-sidebar": "trigger",
@@ -507,15 +515,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(IconMenu2, {}),
-        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx6(IconMenu2, {}),
+        /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       "data-sidebar": "rail",
@@ -538,7 +546,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -555,7 +563,7 @@ function SidebarInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Input,
     {
       "data-slot": "sidebar-input",
@@ -566,7 +574,7 @@ function SidebarInput({
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -577,7 +585,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -591,7 +599,7 @@ function SidebarSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Separator,
     {
       "data-slot": "sidebar-separator",
@@ -602,7 +610,7 @@ function SidebarSeparator({
   );
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -616,7 +624,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -632,7 +640,7 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -652,7 +660,7 @@ function SidebarGroupAction({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "button";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-group-action",
@@ -672,7 +680,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -683,7 +691,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -694,7 +702,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -735,7 +743,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? Slot2 : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx7(
+  const button = /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -754,9 +762,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx6(
       TooltipContent,
       {
         side: "right",
@@ -774,7 +782,7 @@ function SidebarMenuAction({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "button";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-action",
@@ -798,7 +806,7 @@ function SidebarMenuBadge({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-menu-badge",
@@ -824,7 +832,7 @@ function SidebarMenuSkeleton({
   const [width] = React2.useState(
     () => `${Math.floor(Math.random() * 40) + 50}%`
   );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",
@@ -832,14 +840,14 @@ function SidebarMenuSkeleton({
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx7(
+        showIcon && /* @__PURE__ */ jsx6(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Skeleton,
           {
             className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -854,7 +862,7 @@ function SidebarMenuSkeleton({
   );
 }
 function SidebarMenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "ul",
     {
       "data-slot": "sidebar-menu-sub",
@@ -872,7 +880,7 @@ function SidebarMenuSubItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "li",
     {
       "data-slot": "sidebar-menu-sub-item",
@@ -890,7 +898,7 @@ function SidebarMenuSubButton({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "a";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-sub-button",