zudoku 0.7.2-dev.11 → 0.7.2-dev.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.7.2-dev.11",
+  "version": "0.7.2-dev.13",
   "type": "module",
   "files": [
     "dist",
@@ -68,6 +68,10 @@
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
     },
+    "./icons": {
+      "import": "./lib/zudoku.icons.js",
+      "types": "./dist/lib/icons.d.ts"
+    },
     "./vite": {
       "require": "./dist/vite/plugin.js",
       "import": "./dist/vite/plugin.js"
@@ -115,6 +119,7 @@
     "gray-matter": "^4.0.3",
     "loglevel": "^1.9.1",
     "lru-cache": "11.0.0",
+    "lucide-react": "0.438.0",
     "mdx": "0.3.1",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
@@ -144,6 +149,7 @@
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.5.2",
     "tailwindcss": "3.4.4",
+    "tsx": "4.19.0",
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
@@ -173,14 +179,12 @@
     "@types/yargs": "^17.0.32",
     "@zudoku/httpsnippet": "10.0.9",
     "clsx": "2.1.1",
-    "lucide-react": "0.378.0",
     "oauth4webapi": "2.11.1",
     "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
     "react-markdown": "9.0.1",
     "react-router-dom": "6.25.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tsx": "4.18.0",
     "typescript": "5.5.3"
   },
   "peerDependencies": {

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -61,37 +61,49 @@ export const SidebarCategory = ({
       open={open}
       onOpenChange={() => setOpen(true)}
     >
-      <Collapsible.Trigger
-        className={cn(
-          "group text-start",
-          navigationListItem({ isActive: false, isTopLevel: level === 0 }),
-          isCollapsible
-            ? "cursor-pointer"
-            : "cursor-default hover:bg-transparent",
-        )}
-        asChild
-        disabled={!isCollapsible}
-      >
-        {category.link?.type === "doc" ? (
-          <NavLink to={joinPath(topNavItem?.id, category.link.id)}>
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "flex items-center gap-2 justify-between w-full",
-                  isActive ? "text-primary font-medium" : "text-foreground/80",
-                )}
-              >
-                <div className="truncate">{category.label}</div>
-                {ToggleButton}
-              </div>
-            )}
-          </NavLink>
-        ) : (
-          <div className="flex items-center justify-between w-full">
-            <div className="flex gap-2 truncate w-full">{category.label}</div>
-            {ToggleButton}
-          </div>
-        )}
+      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
+        <div
+          className={cn(
+            "text-start",
+            navigationListItem({ isActive: false, isTopLevel: level === 0 }),
+            isCollapsible
+              ? "cursor-pointer"
+              : "cursor-default hover:bg-transparent",
+          )}
+        >
+          {category.icon && (
+            <category.icon
+              size={16}
+              className="align-[-0.125em] -translate-x-1"
+            />
+          )}
+          {category.link?.type === "doc" ? (
+            <NavLink
+              to={joinPath(topNavItem?.id, category.link.id)}
+              className="flex-1"
+              onClick={() => setHasInteracted(true)}
+            >
+              {({ isActive }) => (
+                <div
+                  className={cn(
+                    "flex items-center gap-2 justify-between w-full",
+                    isActive
+                      ? "text-primary font-medium"
+                      : "text-foreground/80",
+                  )}
+                >
+                  <div className="truncate">{category.label}</div>
+                  {ToggleButton}
+                </div>
+              )}
+            </NavLink>
+          ) : (
+            <div className="flex items-center justify-between w-full">
+              <div className="flex gap-2 truncate w-full">{category.label}</div>
+              {ToggleButton}
+            </div>
+          )}
+        </div>
       </Collapsible.Trigger>
       <Collapsible.Content
         className={cn(

package/src/lib/components/navigation/SidebarItem.tsx

@@ -12,7 +12,7 @@ import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
+  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
       isTopLevel: {
@@ -55,6 +55,7 @@ export const SidebarItem = ({
           }
           to={joinPath(topNavItem?.id, item.id)}
         >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
               <span className="truncate" title={item.label}>

package/src/lib/icons.ts

@@ -0,0 +1 @@
+export * from "lucide-react";