@k3-tech/react-kit 0.0.66 → 0.0.67

package/dist/index.js

@@ -49930,13 +49930,12 @@ function AdminLayoutContent({
     const hasChildren = Array.isArray(item.children) && item.children.length > 0;
     const isActive = isMenuItemActive(item.url);
     const isOpen = openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
-    const indentClassMap = ["", "pl-6", "pl-10", "pl-14"];
-    const indent = indentClassMap[Math.min(level, 3)];
+    const indent = "";
     const activeText = isActive ? "text-sidebar-primary-foreground" : "text-sidebar-foreground group-hover:text-sidebar-accent-foreground";
     const content = /* @__PURE__ */ jsxs(
       SidebarMenuItem,
       {
-        className: `mb-1 ${level > 0 ? "ml-1" : ""}`,
+        className: "mb-1",
         children: [
           /* @__PURE__ */ jsx(
             SidebarMenuButton,
@@ -50003,7 +50002,7 @@ function AdminLayoutContent({
           // (rendered as <li>) children don't end up as direct descendants of
           // a <div> inside another <li> — that's invalid HTML and triggers a
           // React hydration warning.
-          /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col list-none p-0 m-0", children: (item.children ?? []).map(
+          /* @__PURE__ */ jsx("ul", { className: "mt-1 ml-[18px] flex flex-col list-none border-l border-sidebar-border pl-2 py-0.5 m-0", children: (item.children ?? []).map(
             (child) => renderItem(child, Math.min(level + 1, 3))
           ) })
         ]
@@ -50020,12 +50019,12 @@ function AdminLayoutContent({
         collapsible: sidebarCollapsible ? "icon" : "none",
         children: [
           /* @__PURE__ */ jsx(SidebarHeader, { className: "bg-sidebar border-b border-sidebar-border", children: sidebarHeader ? sidebarHeader : /* @__PURE__ */ jsx("div", { className: "sidebar-header-content flex items-center justify-center px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(SidebarHeaderIcon, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx(SidebarHeaderIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsx("span", { className: "font-semibold text-sidebar-foreground", children: sidebarTitle })
           ] }) }) }),
           /* @__PURE__ */ jsx(SidebarContent, { className: "bg-sidebar px-2 py-4", children: sidebarGroups.map((group, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsxs(SidebarGroup, { children: [
-              /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden", children: group.label }),
+              /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "text-[10.5px] font-semibold text-[#9CA3AF] uppercase tracking-[0.14em] px-3 pt-2 mb-1.5 group-data-[collapsible=icon]:hidden", children: group.label }),
               /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "group-data-[collapsible=icon]:items-center", children: group.items.map((item) => renderItem(item, 0)) }) })
             ] }),
             idx < sidebarGroups.length - 1 && /* @__PURE__ */ jsx(

package/dist/kit/layouts/admin/components/AdminLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminLayout.d.ts","sourceRoot":"","sources":["../../../../../src/kit/layouts/admin/components/AdminLayout.tsx"],"names":[],"mappings":"AA+BA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEhE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAwOF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,2CAmBlB"}
+{"version":3,"file":"AdminLayout.d.ts","sourceRoot":"","sources":["../../../../../src/kit/layouts/admin/components/AdminLayout.tsx"],"names":[],"mappings":"AA+BA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEhE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAyOF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,2CAmBlB"}

package/dist/kit/themes/clean-slate.css

@@ -146,7 +146,6 @@
     --tracking-tight: -.025em;
     --tracking-normal: 0em;
     --tracking-wide: .025em;
-    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -797,6 +796,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -833,6 +836,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2278,7 +2285,7 @@
     background-color: var(--sidebar-border);
   }
 
-  .bg-sidebar-primary\/10 {
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
     background-color: var(--sidebar-primary);
   }
 
@@ -2518,22 +2525,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2593,6 +2588,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2637,6 +2636,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2647,11 +2651,6 @@
     letter-spacing: var(--tracking-wide);
   }
 
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
-
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2669,6 +2668,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }

package/dist/kit/themes/default.css

@@ -800,6 +800,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -836,6 +840,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2281,7 +2289,7 @@
     background-color: var(--sidebar-border);
   }
 
-  .bg-sidebar-primary\/10 {
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
     background-color: var(--sidebar-primary);
   }
 
@@ -2521,22 +2529,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2596,6 +2592,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2640,6 +2640,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: calc(var(--tracking-normal)  - .025em);
     letter-spacing: calc(var(--tracking-normal)  - .025em);
@@ -2650,11 +2655,6 @@
     letter-spacing: calc(var(--tracking-normal)  + .025em);
   }
 
-  .tracking-wider {
-    --tw-tracking: calc(var(--tracking-normal)  + .05em);
-    letter-spacing: calc(var(--tracking-normal)  + .05em);
-  }
-
   .tracking-widest {
     --tw-tracking: calc(var(--tracking-normal)  + .1em);
     letter-spacing: calc(var(--tracking-normal)  + .1em);
@@ -2672,6 +2672,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }

package/dist/kit/themes/minimal-modern.css

@@ -146,7 +146,6 @@
     --tracking-tight: -.025em;
     --tracking-normal: 0em;
     --tracking-wide: .025em;
-    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -797,6 +796,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -833,6 +836,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2278,7 +2285,7 @@
     background-color: var(--sidebar-border);
   }
 
-  .bg-sidebar-primary\/10 {
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
     background-color: var(--sidebar-primary);
   }
 
@@ -2518,22 +2525,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2593,6 +2588,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2637,6 +2636,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2647,11 +2651,6 @@
     letter-spacing: var(--tracking-wide);
   }
 
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
-
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2669,6 +2668,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }

package/dist/kit/themes/spotify.css

@@ -146,7 +146,6 @@
     --tracking-tight: -.025em;
     --tracking-normal: 0em;
     --tracking-wide: .025em;
-    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -797,6 +796,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -833,6 +836,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2278,7 +2285,7 @@
     background-color: var(--sidebar-border);
   }
 
-  .bg-sidebar-primary\/10 {
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
     background-color: var(--sidebar-primary);
   }
 
@@ -2518,22 +2525,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2593,6 +2588,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2637,6 +2636,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2647,11 +2651,6 @@
     letter-spacing: var(--tracking-wide);
   }
 
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
-
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2669,6 +2668,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-tech/react-kit",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/kit/layouts/admin/components/AdminLayout.tsx

@@ -89,8 +89,9 @@ function AdminLayoutContent({
     const isOpen =
       openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
 
-    const indentClassMap = ['', 'pl-6', 'pl-10', 'pl-14'] as const;
-    const indent = indentClassMap[Math.min(level, 3)];
+    // Nesting indentation is provided by the bordered <ul> wrapper around each
+    // child group (see below), so individual rows need no extra left padding.
+    const indent = '';
 
     // When a row is active its background is the (teal) sidebar-primary, so
     // icon + label must flip to the contrasting foreground to stay readable.
@@ -101,7 +102,7 @@ function AdminLayoutContent({
     const content = (
       <SidebarMenuItem
         key={item.id}
-        className={`mb-1 ${level > 0 ? 'ml-1' : ''}`}
+        className="mb-1"
       >
         <SidebarMenuButton
           asChild={!!item.url && !hasChildren}
@@ -178,7 +179,7 @@ function AdminLayoutContent({
           // (rendered as <li>) children don't end up as direct descendants of
           // a <div> inside another <li> — that's invalid HTML and triggers a
           // React hydration warning.
-          <ul className="mt-1 flex flex-col list-none p-0 m-0">
+          <ul className="mt-1 ml-[18px] flex flex-col list-none border-l border-sidebar-border pl-2 py-0.5 m-0">
             {(item.children ?? []).map((child: AdminMenuItem) =>
               renderItem(child, Math.min(level + 1, 3)),
             )}
@@ -202,7 +203,7 @@ function AdminLayoutContent({
           ) : (
             <div className="sidebar-header-content flex items-center justify-center px-4 py-3">
               <div className="flex items-center gap-2">
-                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <SidebarHeaderIcon className="h-4 w-4" />
                 </div>
                 <span className="font-semibold text-sidebar-foreground">
@@ -216,7 +217,7 @@ function AdminLayoutContent({
           {sidebarGroups.map((group, idx) => (
             <Fragment key={group.id}>
               <SidebarGroup>
-                <SidebarGroupLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden">
+                <SidebarGroupLabel className="text-[10.5px] font-semibold text-[#9CA3AF] uppercase tracking-[0.14em] px-3 pt-2 mb-1.5 group-data-[collapsible=icon]:hidden">
                   {group.label}
                 </SidebarGroupLabel>
                 <SidebarGroupContent>