@lovett/ui 0.2.7 → 0.2.9

package/package.json

@@ -1,49 +1,31 @@
 {
   "name": "@lovett/ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./tokens.css": "./src/tokens.css",
-    "./styles.css": "./src/styles.css",
-    "./theme-v2.css": "./src/theme-v2.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css",
+    "./theme-v2.css": "./dist/theme-v2.css"
   },
   "publishConfig": {
-    "access": "public",
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js"
-      },
-      "./tokens.css": "./dist/tokens.css",
-      "./styles.css": "./dist/styles.css",
-      "./theme-v2.css": "./dist/theme-v2.css"
-    }
+    "access": "public"
   },
   "files": [
     "dist",
     "src",
     "README.md"
   ],
-  "scripts": {
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
-    "test": "vitest run",
-    "test:ci": "vitest run --no-file-parallelism",
-    "build": "tsup",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm build"
-  },
   "peerDependencies": {
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
@@ -87,5 +69,14 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
-  }
-}
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
+    "test": "vitest run",
+    "test:ci": "vitest run --no-file-parallelism",
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
+  "module": "./dist/index.js"
+}

package/src/sidebar-nav.tsx

@@ -20,6 +20,10 @@
  * `grid-template-rows` so its content keeps its size while it closes
  * (`.ds-sidebar-group-body` in styles.css; honours reduced motion).
  *
+ * A nested Item keeps its icon and sits inside the group's rail: one
+ * continuous hairline drops from the header's icon column and the child rows
+ * stand to its right, so a child's fill never crosses the line.
+ *
  * Collapsed rail (`collapsed` on the root): Items become icon tiles with a
  * `title`; a Group becomes an icon tile that opens a `Popover` flyout to its
  * right holding the group's items at full width. Inside the flyout the rail
@@ -172,23 +176,14 @@ function SidebarNavItem({
     ROW_BASE,
     active ? ROW_ACTIVE : ROW_REST,
     collapsed && 'justify-center px-0',
-    nested && !collapsed && 'h-8 pl-[2.375rem] text-[13px]',
+    // A nested row is a step shorter and a step smaller; it keeps its icon.
+    nested && !collapsed && 'h-8 gap-2.5 px-2 text-[13px]',
     className,
   )
   const content = (
     <>
       {active && !nested && <ActiveBar />}
-      {(!nested || collapsed) && <RowIcon icon={icon} />}
-      {nested && !collapsed && (
-        // The connector: a dot on the group's rail, filled when active.
-        <span
-          aria-hidden="true"
-          className={cn(
-            'absolute left-[1.0625rem] top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors',
-            active ? 'bg-[rgb(var(--accent))]' : 'bg-[rgb(var(--sidebar-rail))]',
-          )}
-        />
-      )}
+      <RowIcon icon={icon} />
       {!collapsed && <span className="flex-1 truncate">{label}</span>}
       {/* The space is for the accessible name: "New audit Beta", not "New auditBeta".
           A whitespace-only text node is invisible in a flex row. */}
@@ -333,10 +328,12 @@ function SidebarNavGroup({
               id={bodyId}
               role="group"
               aria-labelledby={`${labelId}-text`}
-              // The rail: one hairline under the icon column that the child
-              // connectors sit on. Its geometry derives from the icon centre
-              // (px-2.5 + half of h-4 = 1.0625rem).
-              className="relative flex flex-col gap-0.5 py-0.5 before:absolute before:bottom-1 before:left-[1.0625rem] before:top-1 before:w-px before:-translate-x-1/2 before:bg-[rgb(var(--sidebar-rail))]"
+              // The rail: one continuous hairline dropping from the header's
+              // icon column, with the child rows INSIDE it - a child's hover
+              // or active fill starts to the right of the line, never over it.
+              // Its x derives from the icon centre (px-2.5 + half of h-4 =
+              // 1.0625rem, less half the line).
+              className="ml-[calc(1.0625rem-0.5px)] flex flex-col gap-0.5 border-l border-[rgb(var(--sidebar-rail))] py-1 pl-2"
               // Stays in the DOM while closed so the track has something to
               // shrink over; `inert` keeps its links out of the tab ring and
               // the accessibility tree until it is open again.