avt-rct-lib 1.0.1 → 1.0.3

package/README.md

@@ -6,7 +6,7 @@
 
 React component library dengan desain **macOS/iOS**. Hanya butuh **Tailwind CSS** — tanpa Radix UI, tanpa library komponen lain.
 
-📦 [npmjs.com/package/avt-rct-lib](https://www.npmjs.com/package/avt-rct-lib)
+📦 [npmjs.com/package/avt-rct-lib](https://www.npmjs.com/package/avt-rct-lib) · 🌐 [avt-rct-dashboard.vercel.app](https://avt-rct-dashboard.vercel.app)
 
 ## Install
 

package/dist/index.cjs

@@ -382,6 +382,30 @@ function TablePagination({
     }
   );
 }
+function DataTable({
+  columns,
+  data,
+  onChange,
+  card = true,
+  emptyText = "Tidak ada data untuk ditampilkan",
+  className,
+  toolbar,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Table, { card, className, children: [
+    toolbar && /* @__PURE__ */ jsxRuntime.jsx(TableToolbar, { children: toolbar }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: col.header }, String(col.accessor))) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: data.length ? data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: col.cell ? col.cell(row, onChange) : String(row[col.accessor] ?? "") }, String(col.accessor))) }, rowIndex)) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "py-10 text-center text-[#8E8E93]",
+        children: emptyText
+      }
+    ) }) }),
+    pagination && /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
+  ] });
+}
 var TabsContext = React3.createContext({
   active: "",
   setActive: () => {
@@ -1188,6 +1212,130 @@ 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-10 w-10 min-h-[44px] min-w-[44px] items-center justify-center rounded-xl",
+          "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-0.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: cn(
+          "flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 min-h-[44px]",
+          "text-[13px] 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-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-bold",
+                triggerActive ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
+              ),
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn(
+                "h-3.5 w-3.5 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-3 space-y-0.5 border-l border-[#E5E5EA] py-0.5 pl-2", 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-2 rounded-lg px-2.5 py-2 min-h-[36px]",
+        "text-[12px] 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_2px_8px_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 });
 }
@@ -1278,6 +1426,7 @@ exports.CardDivider = CardDivider;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.DataTable = DataTable;
 exports.Drawer = Drawer;
 exports.Input = Input;
 exports.Menu = MenuRoot;
@@ -1312,6 +1461,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

@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface DataTableColumn<T = any> {
+    header: string;
+    accessor: keyof T | (string & {});
+    cell?: (row: T, onChange?: () => void) => React.ReactNode;
+}
+interface DataTablePaginationProps {
+    page: number;
+    pageCount: number;
+    canPrev: boolean;
+    canNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+}
+interface DataTableProps<T = any> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    onChange?: () => void;
+    card?: boolean;
+    emptyText?: string;
+    className?: string;
+    toolbar?: React.ReactNode;
+    pagination?: DataTablePaginationProps;
+}
+declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
 interface TabsProps {
     defaultValue?: string;
     value?: string;
@@ -254,6 +279,29 @@ 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;
+    /** Initial open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** True when one of the children is the currently active route */
+    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;
@@ -295,4 +343,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, 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

@@ -74,6 +74,31 @@ declare function TablePagination({ page, pageCount, canPrev, canNext, onPrev, on
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface DataTableColumn<T = any> {
+    header: string;
+    accessor: keyof T | (string & {});
+    cell?: (row: T, onChange?: () => void) => React.ReactNode;
+}
+interface DataTablePaginationProps {
+    page: number;
+    pageCount: number;
+    canPrev: boolean;
+    canNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+}
+interface DataTableProps<T = any> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    onChange?: () => void;
+    card?: boolean;
+    emptyText?: string;
+    className?: string;
+    toolbar?: React.ReactNode;
+    pagination?: DataTablePaginationProps;
+}
+declare function DataTable<T = any>({ columns, data, onChange, card, emptyText, className, toolbar, pagination, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
 interface TabsProps {
     defaultValue?: string;
     value?: string;
@@ -254,6 +279,29 @@ 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;
+    /** Initial open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** True when one of the children is the currently active route */
+    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;
@@ -295,4 +343,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, 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

@@ -376,6 +376,30 @@ function TablePagination({
     }
   );
 }
+function DataTable({
+  columns,
+  data,
+  onChange,
+  card = true,
+  emptyText = "Tidak ada data untuk ditampilkan",
+  className,
+  toolbar,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxs(Table, { card, className, children: [
+    toolbar && /* @__PURE__ */ jsx(TableToolbar, { children: toolbar }),
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { children: col.header }, String(col.accessor))) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.length ? data.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { children: col.cell ? col.cell(row, onChange) : String(row[col.accessor] ?? "") }, String(col.accessor))) }, rowIndex)) : /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "py-10 text-center text-[#8E8E93]",
+        children: emptyText
+      }
+    ) }) }),
+    pagination && /* @__PURE__ */ jsx(TablePagination, { ...pagination })
+  ] });
+}
 var TabsContext = createContext({
   active: "",
   setActive: () => {
@@ -1182,6 +1206,130 @@ 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-10 w-10 min-h-[44px] min-w-[44px] items-center justify-center rounded-xl",
+          "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-0.5", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: cn(
+          "flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 min-h-[44px]",
+          "text-[13px] 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-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-bold",
+                triggerActive ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
+              ),
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: cn(
+                "h-3.5 w-3.5 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-3 space-y-0.5 border-l border-[#E5E5EA] py-0.5 pl-2", 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-2 rounded-lg px-2.5 py-2 min-h-[36px]",
+        "text-[12px] 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_2px_8px_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 });
 }
@@ -1263,4 +1411,4 @@ function useClickOutside(ref, handler, enabled = true) {
   }, [ref, handler, enabled]);
 }
 
-export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, 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.1",
+  "version": "1.0.3",
   "description": "AVT React Component Library — Tailwind only, zero other deps",
   "type": "module",
   "main": "./dist/index.cjs",