avt-rct-lib 1.0.2 → 1.0.4

package/dist/index.cjs

@@ -1078,8 +1078,8 @@ var useSidebar = () => React3.useContext(SidebarContext);
 function Sidebar({
   collapsed = false,
   glass = true,
-  width = "240px",
-  collapsedWidth = "64px",
+  width = "210px",
+  collapsedWidth = "52px",
   overlay = false,
   onOverlayClose,
   className,
@@ -1142,28 +1142,28 @@ function SidebarBrand({ logo, title, subtitle, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn("flex items-center gap-3 px-4 py-5", collapsed && "justify-center px-0", className),
+      className: cn("flex items-center gap-2.5 px-3 py-3", collapsed && "justify-center px-0", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
         !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[13px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[12px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-[#8E8E93]", children: subtitle })
         ] })
       ]
     }
   );
 }
 function SidebarDivider({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-3 my-1 h-px bg-[#E5E5EA]", className) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-2 my-0.5 h-px bg-[#E5E5EA]", className) });
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 overflow-y-auto px-2 py-2 avt-scroll space-y-0.5", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 overflow-y-auto px-1.5 py-1.5 avt-scroll space-y-px", className), ...props });
 }
 function SidebarGroup({ label, className, children, ...props }) {
   const { collapsed } = useSidebar();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-1", className), ...props, children: [
-    label && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-3 text-[10px] font-semibold uppercase tracking-widest text-[#C7C7CC]", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-0.5", className), ...props, children: [
+    label && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0.5 px-2.5 text-[9px] font-semibold uppercase tracking-widest text-[#C7C7CC]", children: label }),
     children
   ] });
 }
@@ -1185,11 +1185,10 @@ function SidebarItem({
       ...tagProps,
       title: collapsed ? label : void 0,
       className: cn(
-        "flex w-full items-center gap-2.5 rounded-xl transition-all duration-150",
-        "text-[13px] font-medium select-none outline-none",
+        "flex w-full items-center gap-2 rounded-lg transition-all duration-150",
+        "text-[12px] font-medium select-none outline-none",
         "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
-        // Mobile-friendly touch target
-        collapsed ? "justify-center px-0 mx-auto w-10 h-10 min-h-[44px] min-w-[44px]" : "px-3 py-2.5 min-h-[44px]",
+        collapsed ? "justify-center px-0 mx-auto w-8 h-8 min-h-[36px] min-w-[36px]" : "px-2.5 py-1.5 min-h-[30px]",
         active ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
         className
       ),
@@ -1201,8 +1200,8 @@ function SidebarItem({
           "span",
           {
             className: cn(
-              "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5",
-              "text-[10px] font-bold",
+              "ml-auto flex h-4 min-w-4 items-center justify-center rounded-full px-1",
+              "text-[9px] font-bold",
               active ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
             ),
             children: badge
@@ -1212,8 +1211,132 @@ function SidebarItem({
     }
   );
 }
+function SidebarSubMenu({
+  icon,
+  label,
+  badge,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  activeChild = false,
+  children,
+  className
+}) {
+  const { collapsed } = useSidebar();
+  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
+  const isOpen = controlledOpen ?? internalOpen;
+  const toggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        title: label,
+        onClick: toggle,
+        className: cn(
+          "mx-auto flex h-8 w-8 min-h-[36px] min-w-[36px] items-center justify-center rounded-lg",
+          "select-none outline-none transition-all duration-150",
+          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+          activeChild ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
+          className
+        ),
+        children: icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !activeChild && "text-[#8E8E93]"), children: icon })
+      }
+    );
+  }
+  const triggerActive = activeChild && !isOpen;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-px", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: cn(
+          "flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 min-h-[30px]",
+          "text-[12px] font-medium select-none outline-none transition-all duration-150",
+          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+          triggerActive ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !triggerActive && "text-[#8E8E93]"), children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: label }),
+          badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[9px] font-bold",
+                triggerActive ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
+              ),
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn(
+                "h-3 w-3 flex-shrink-0 transition-transform duration-200",
+                triggerActive ? "text-white/60" : "text-[#C7C7CC]",
+                isOpen && "rotate-90"
+              ),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2.5 space-y-px border-l border-[#E5E5EA] py-0.5 pl-1.5", children })
+      }
+    )
+  ] });
+}
+function SidebarSubMenuItem({
+  icon,
+  label,
+  active = false,
+  href,
+  as: Tag = "button",
+  className,
+  ...props
+}) {
+  const tagProps = href ? { href } : { type: "button" };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag,
+    {
+      ...tagProps,
+      className: cn(
+        "flex w-full items-center gap-1.5 rounded-md px-2 py-1 min-h-[26px]",
+        "text-[11px] font-medium select-none outline-none transition-all duration-150",
+        "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+        active ? "bg-[#007AFF] text-white shadow-[0_1px_4px_rgba(0,122,255,0.20)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !active && "text-[#8E8E93]"), children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: label })
+      ]
+    }
+  );
+}
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 p-3", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 p-2", className), ...props });
 }
 function SidebarUser({
   name,
@@ -1230,8 +1353,8 @@ function SidebarUser({
     "div",
     {
       className: cn(
-        "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full",
-        `bg-gradient-to-br ${avatarColor} text-white text-xs font-semibold`
+        "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full",
+        `bg-gradient-to-br ${avatarColor} text-white text-[10px] font-semibold`
       ),
       children: avatarFallback ?? name.charAt(0).toUpperCase()
     }
@@ -1239,11 +1362,11 @@ function SidebarUser({
   if (collapsed) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center", className), ...props, children: avatarNode });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-xl bg-[#F2F2F7] p-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg bg-[#F2F2F7] p-2", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
     avatarNode,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[12px] font-semibold text-[#1C1C1E]", children: name }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] font-semibold text-[#1C1C1E]", children: name }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-[#8E8E93]", children: subtitle })
     ] }),
     actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: actions })
   ] }) });
@@ -1254,7 +1377,7 @@ function SidebarToggle({ collapsed, className, ...props }) {
     {
       type: "button",
       className: cn(
-        "flex h-7 w-7 items-center justify-center rounded-lg",
+        "flex h-6 w-6 items-center justify-center rounded-md",
         "text-[#8E8E93] hover:bg-[#F2F2F7] hover:text-[#3C3C43]",
         "transition-colors duration-150",
         className
@@ -1264,7 +1387,7 @@ function SidebarToggle({ collapsed, className, ...props }) {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: cn("h-4 w-4 transition-transform duration-200", collapsed && "rotate-180"),
+          className: cn("h-3.5 w-3.5 transition-transform duration-200", collapsed && "rotate-180"),
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
@@ -1337,6 +1460,8 @@ exports.SidebarFooter = SidebarFooter;
 exports.SidebarGroup = SidebarGroup;
 exports.SidebarHeader = SidebarHeader;
 exports.SidebarItem = SidebarItem;
+exports.SidebarSubMenu = SidebarSubMenu;
+exports.SidebarSubMenuItem = SidebarSubMenuItem;
 exports.SidebarToggle = SidebarToggle;
 exports.SidebarUser = SidebarUser;
 exports.Table = Table;

package/dist/index.d.cts

@@ -279,6 +279,26 @@ interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     as?: React.ElementType;
 }
 declare function SidebarItem({ icon, label, active, badge, href, as: Tag, className, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+interface SidebarSubMenuProps {
+    icon?: React.ReactNode;
+    label: string;
+    badge?: string | number;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    activeChild?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function SidebarSubMenu({ icon, label, badge, defaultOpen, open: controlledOpen, onOpenChange, activeChild, children, className, }: SidebarSubMenuProps): react_jsx_runtime.JSX.Element;
+interface SidebarSubMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+    as?: React.ElementType;
+}
+declare function SidebarSubMenuItem({ icon, label, active, href, as: Tag, className, ...props }: SidebarSubMenuItemProps): react_jsx_runtime.JSX.Element;
 declare function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 interface SidebarUserProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
@@ -320,4 +340,4 @@ declare const colors: {
 };
 declare function generateId(): string;
 
-export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
+export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSubMenu, SidebarSubMenuItem, type SidebarSubMenuItemProps, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };

package/dist/index.d.ts

@@ -279,6 +279,26 @@ interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     as?: React.ElementType;
 }
 declare function SidebarItem({ icon, label, active, badge, href, as: Tag, className, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+interface SidebarSubMenuProps {
+    icon?: React.ReactNode;
+    label: string;
+    badge?: string | number;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    activeChild?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function SidebarSubMenu({ icon, label, badge, defaultOpen, open: controlledOpen, onOpenChange, activeChild, children, className, }: SidebarSubMenuProps): react_jsx_runtime.JSX.Element;
+interface SidebarSubMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+    as?: React.ElementType;
+}
+declare function SidebarSubMenuItem({ icon, label, active, href, as: Tag, className, ...props }: SidebarSubMenuItemProps): react_jsx_runtime.JSX.Element;
 declare function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 interface SidebarUserProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
@@ -320,4 +340,4 @@ declare const colors: {
 };
 declare function generateId(): string;
 
-export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
+export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, type CardProps, CardTitle, DataTable, type DataTableColumn, type DataTablePaginationProps, type DataTableProps, Drawer, Input, type InputProps, MenuRoot as Menu, type MenuAlign, MenuButton, MenuContent, type MenuContentProps, MenuRoot as MenuDropdown, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, type NavbarBrandProps, NavbarCenter, NavbarDivider, NavbarIconButton, type NavbarIconButtonProps, NavbarLeft, type NavbarProps, NavbarRight, NavbarSearch, type NavbarSearchProps, Scrollbar, type ScrollbarProps, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetProps, type SheetSide, SheetTitle, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSubMenu, SidebarSubMenuItem, type SidebarSubMenuItemProps, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, SidebarUser, type SidebarUserProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, type TableProps, TableRow, TableToolbar, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };

package/dist/index.js

@@ -1072,8 +1072,8 @@ var useSidebar = () => useContext(SidebarContext);
 function Sidebar({
   collapsed = false,
   glass = true,
-  width = "240px",
-  collapsedWidth = "64px",
+  width = "210px",
+  collapsedWidth = "52px",
   overlay = false,
   onOverlayClose,
   className,
@@ -1136,28 +1136,28 @@ function SidebarBrand({ logo, title, subtitle, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("flex items-center gap-3 px-4 py-5", collapsed && "justify-center px-0", className),
+      className: cn("flex items-center gap-2.5 px-3 py-3", collapsed && "justify-center px-0", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
         !collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-[12px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-[#8E8E93]", children: subtitle })
         ] })
       ]
     }
   );
 }
 function SidebarDivider({ className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("mx-3 my-1 h-px bg-[#E5E5EA]", className) });
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-2 my-0.5 h-px bg-[#E5E5EA]", className) });
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto px-2 py-2 avt-scroll space-y-0.5", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto px-1.5 py-1.5 avt-scroll space-y-px", className), ...props });
 }
 function SidebarGroup({ label, className, children, ...props }) {
   const { collapsed } = useSidebar();
-  return /* @__PURE__ */ jsxs("div", { className: cn("mb-1", className), ...props, children: [
-    label && !collapsed && /* @__PURE__ */ jsx("p", { className: "mb-1 px-3 text-[10px] font-semibold uppercase tracking-widest text-[#C7C7CC]", children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: cn("mb-0.5", className), ...props, children: [
+    label && !collapsed && /* @__PURE__ */ jsx("p", { className: "mb-0.5 px-2.5 text-[9px] font-semibold uppercase tracking-widest text-[#C7C7CC]", children: label }),
     children
   ] });
 }
@@ -1179,11 +1179,10 @@ function SidebarItem({
       ...tagProps,
       title: collapsed ? label : void 0,
       className: cn(
-        "flex w-full items-center gap-2.5 rounded-xl transition-all duration-150",
-        "text-[13px] font-medium select-none outline-none",
+        "flex w-full items-center gap-2 rounded-lg transition-all duration-150",
+        "text-[12px] font-medium select-none outline-none",
         "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
-        // Mobile-friendly touch target
-        collapsed ? "justify-center px-0 mx-auto w-10 h-10 min-h-[44px] min-w-[44px]" : "px-3 py-2.5 min-h-[44px]",
+        collapsed ? "justify-center px-0 mx-auto w-8 h-8 min-h-[36px] min-w-[36px]" : "px-2.5 py-1.5 min-h-[30px]",
         active ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
         className
       ),
@@ -1195,8 +1194,8 @@ function SidebarItem({
           "span",
           {
             className: cn(
-              "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5",
-              "text-[10px] font-bold",
+              "ml-auto flex h-4 min-w-4 items-center justify-center rounded-full px-1",
+              "text-[9px] font-bold",
               active ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
             ),
             children: badge
@@ -1206,8 +1205,132 @@ function SidebarItem({
     }
   );
 }
+function SidebarSubMenu({
+  icon,
+  label,
+  badge,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  activeChild = false,
+  children,
+  className
+}) {
+  const { collapsed } = useSidebar();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen ?? internalOpen;
+  const toggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: label,
+        onClick: toggle,
+        className: cn(
+          "mx-auto flex h-8 w-8 min-h-[36px] min-w-[36px] items-center justify-center rounded-lg",
+          "select-none outline-none transition-all duration-150",
+          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+          activeChild ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
+          className
+        ),
+        children: icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", !activeChild && "text-[#8E8E93]"), children: icon })
+      }
+    );
+  }
+  const triggerActive = activeChild && !isOpen;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-px", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: cn(
+          "flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 min-h-[30px]",
+          "text-[12px] font-medium select-none outline-none transition-all duration-150",
+          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+          triggerActive ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", !triggerActive && "text-[#8E8E93]"), children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: label }),
+          badge !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[9px] font-bold",
+                triggerActive ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
+              ),
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: cn(
+                "h-3 w-3 flex-shrink-0 transition-transform duration-200",
+                triggerActive ? "text-white/60" : "text-[#C7C7CC]",
+                isOpen && "rotate-90"
+              ),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "ml-2.5 space-y-px border-l border-[#E5E5EA] py-0.5 pl-1.5", children })
+      }
+    )
+  ] });
+}
+function SidebarSubMenuItem({
+  icon,
+  label,
+  active = false,
+  href,
+  as: Tag = "button",
+  className,
+  ...props
+}) {
+  const tagProps = href ? { href } : { type: "button" };
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...tagProps,
+      className: cn(
+        "flex w-full items-center gap-1.5 rounded-md px-2 py-1 min-h-[26px]",
+        "text-[11px] font-medium select-none outline-none transition-all duration-150",
+        "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+        active ? "bg-[#007AFF] text-white shadow-[0_1px_4px_rgba(0,122,255,0.20)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", !active && "text-[#8E8E93]"), children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: label })
+      ]
+    }
+  );
+}
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 p-3", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 p-2", className), ...props });
 }
 function SidebarUser({
   name,
@@ -1224,8 +1347,8 @@ function SidebarUser({
     "div",
     {
       className: cn(
-        "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full",
-        `bg-gradient-to-br ${avatarColor} text-white text-xs font-semibold`
+        "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full",
+        `bg-gradient-to-br ${avatarColor} text-white text-[10px] font-semibold`
       ),
       children: avatarFallback ?? name.charAt(0).toUpperCase()
     }
@@ -1233,11 +1356,11 @@ function SidebarUser({
   if (collapsed) {
     return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), ...props, children: avatarNode });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl bg-[#F2F2F7] p-3", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-lg bg-[#F2F2F7] p-2", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     avatarNode,
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "truncate text-[12px] font-semibold text-[#1C1C1E]", children: name }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+      /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] font-semibold text-[#1C1C1E]", children: name }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-[#8E8E93]", children: subtitle })
     ] }),
     actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: actions })
   ] }) });
@@ -1248,7 +1371,7 @@ function SidebarToggle({ collapsed, className, ...props }) {
     {
       type: "button",
       className: cn(
-        "flex h-7 w-7 items-center justify-center rounded-lg",
+        "flex h-6 w-6 items-center justify-center rounded-md",
         "text-[#8E8E93] hover:bg-[#F2F2F7] hover:text-[#3C3C43]",
         "transition-colors duration-150",
         className
@@ -1258,7 +1381,7 @@ function SidebarToggle({ collapsed, className, ...props }) {
       children: /* @__PURE__ */ jsx(
         "svg",
         {
-          className: cn("h-4 w-4 transition-transform duration-200", collapsed && "rotate-180"),
+          className: cn("h-3.5 w-3.5 transition-transform duration-200", collapsed && "rotate-180"),
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
@@ -1287,4 +1410,4 @@ function useClickOutside(ref, handler, enabled = true) {
   }, [ref, handler, enabled]);
 }
 
-export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, DataTable, Drawer, Input, MenuRoot as Menu, MenuButton, MenuContent, MenuRoot as MenuDropdown, MenuItem, MenuLabel, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, NavbarCenter, NavbarDivider, NavbarIconButton, NavbarLeft, NavbarRight, NavbarSearch, Scrollbar, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarBrand, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarToggle, SidebarUser, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };
+export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, DataTable, Drawer, Input, MenuRoot as Menu, MenuButton, MenuContent, MenuRoot as MenuDropdown, MenuItem, MenuLabel, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, NavbarCenter, NavbarDivider, NavbarIconButton, NavbarLeft, NavbarRight, NavbarSearch, Scrollbar, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarBrand, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarSubMenu, SidebarSubMenuItem, SidebarToggle, SidebarUser, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avt-rct-lib",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "AVT React Component Library — Tailwind only, zero other deps",
   "type": "module",
   "main": "./dist/index.cjs",