@marcoschwartz/lite-ui 0.25.0 → 0.25.2

package/dist/index.d.mts

@@ -73,15 +73,28 @@ interface SidebarNavProps {
     className?: string;
 }
 interface SidebarNavItemProps {
+    /** Icon element (alias: leftSection) */
     icon?: React.ReactNode;
+    /** Icon element (Mantine-compatible alias for icon) */
+    leftSection?: React.ReactNode;
+    /** Item label text */
     label: string;
+    /** Link URL (renders as anchor) */
     href?: string;
+    /** Click handler (renders as button) */
     onClick?: () => void;
+    /** Active/selected state */
     active?: boolean;
+    /** Disabled state */
     disabled?: boolean;
+    /** Additional CSS classes */
     className?: string;
     /** Custom component to render (e.g., Next.js Link) */
     component?: React.ElementType;
+    /** Nested children (for sub-navigation) */
+    children?: React.ReactNode;
+    /** Whether children are open by default */
+    defaultOpened?: boolean;
 }
 interface SidebarNavGroupProps {
     icon?: React.ReactNode;

package/dist/index.d.ts

@@ -73,15 +73,28 @@ interface SidebarNavProps {
     className?: string;
 }
 interface SidebarNavItemProps {
+    /** Icon element (alias: leftSection) */
     icon?: React.ReactNode;
+    /** Icon element (Mantine-compatible alias for icon) */
+    leftSection?: React.ReactNode;
+    /** Item label text */
     label: string;
+    /** Link URL (renders as anchor) */
     href?: string;
+    /** Click handler (renders as button) */
     onClick?: () => void;
+    /** Active/selected state */
     active?: boolean;
+    /** Disabled state */
     disabled?: boolean;
+    /** Additional CSS classes */
     className?: string;
     /** Custom component to render (e.g., Next.js Link) */
     component?: React.ElementType;
+    /** Nested children (for sub-navigation) */
+    children?: React.ReactNode;
+    /** Whether children are open by default */
+    defaultOpened?: boolean;
 }
 interface SidebarNavGroupProps {
     icon?: React.ReactNode;

package/dist/index.js

@@ -838,16 +838,22 @@ var SidebarNavSection = ({
 };
 var SidebarNavItem = ({
   icon,
+  leftSection,
   label,
   href,
   onClick,
   active = false,
   disabled = false,
   className = "",
-  component
+  component,
+  children,
+  defaultOpened = false
 }) => {
   const context = useSidebarNavOptional();
   const collapsed = context?.collapsed ?? false;
+  const [childrenOpen, setChildrenOpen] = (0, import_react4.useState)(defaultOpened);
+  const iconElement = leftSection || icon;
+  const hasChildren = import_react4.default.Children.count(children) > 0;
   const Component = component || (href ? "a" : "button");
   const baseClasses = `
     flex items-center gap-3 w-full px-3 py-2.5 rounded-lg
@@ -858,15 +864,40 @@ var SidebarNavItem = ({
     ${collapsed ? "justify-center px-0" : ""}
     ${className}
   `;
+  const handleClick = () => {
+    if (disabled) return;
+    if (hasChildren) {
+      setChildrenOpen(!childrenOpen);
+    }
+    onClick?.();
+  };
   const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `flex-shrink-0 ${collapsed ? "" : "w-5 h-5"} flex items-center justify-center`, children: icon }),
-    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: label })
+    iconElement && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `flex-shrink-0 ${collapsed ? "" : "w-5 h-5"} flex items-center justify-center`, children: iconElement }),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex-1 truncate text-left", children: label }),
+      hasChildren && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `flex-shrink-0 transition-transform duration-200 ${childrenOpen ? "rotate-90" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {}) })
+    ] })
   ] });
+  if (hasChildren && !collapsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          onClick: handleClick,
+          className: baseClasses,
+          "aria-disabled": disabled,
+          "aria-expanded": childrenOpen,
+          children: content
+        }
+      ),
+      childrenOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-4 pl-3 border-l border-[hsl(var(--border))] mt-1 space-y-1", children })
+    ] });
+  }
   const element = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Component,
     {
       href,
-      onClick: disabled ? void 0 : onClick,
+      onClick: handleClick,
       className: baseClasses,
       "aria-disabled": disabled,
       "aria-current": active ? "page" : void 0,