@zccz14/ux 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,23 +1,23 @@
-import { jsxs as s, jsx as e, Fragment as _ } from "react/jsx-runtime";
-import { useState as f, useCallback as g, useEffect as y, useSyncExternalStore as w } from "react";
-import { Dialog as h } from "@base-ui/react/dialog";
-import { Tooltip as p } from "@base-ui/react/tooltip";
-import { useLinkit as v, LinkitMyInfo as M } from "linkit-react-components";
-import { useLocation as L, NavLink as S } from "react-router-dom";
-const C = {
+import { jsxs as l, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useState as g, useCallback as x, useEffect as M, useSyncExternalStore as L } from "react";
+import { Dialog as m } from "@base-ui/react/dialog";
+import { Tooltip as h } from "@base-ui/react/tooltip";
+import { useLinkit as N, LinkitMyInfo as S } from "linkit-react-components";
+import { useLocation as k, NavLink as C } from "react-router-dom";
+const O = {
   closeNavigation: "Close navigation",
   navigation: "Navigation",
   toggleSidebar: "Toggle sidebar"
-}, O = {
+}, P = {
   closeNavigation: "关闭导航",
   navigation: "导航",
   toggleSidebar: "切换侧边栏"
 };
-function P(n) {
-  return n.toLowerCase().startsWith("zh") ? O : C;
+function I(a) {
+  return a.toLowerCase().startsWith("zh") ? P : O;
 }
 function T() {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     "svg",
     {
       "aria-hidden": "true",
@@ -35,7 +35,7 @@ function T() {
   );
 }
 function E() {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     "svg",
     {
       "aria-hidden": "true",
@@ -52,164 +52,171 @@ function E() {
     }
   );
 }
-const m = "sidebar_state", I = 3600 * 24 * 7, N = "(max-width: 767px)";
-function W() {
-  const n = document.cookie.split("; ").find((a) => a.startsWith(`${m}=`));
-  return n ? n.slice(m.length + 1) !== "false" : !0;
+const b = "sidebar_state", W = 3600 * 24 * 7, _ = "(max-width: 767px)";
+function $() {
+  const a = document.cookie.split("; ").find((n) => n.startsWith(`${b}=`));
+  return a ? a.slice(b.length + 1) !== "false" : !0;
 }
-function $(n) {
-  document.cookie = `${m}=${n}; path=/; max-age=${I}`;
+function j(a) {
+  document.cookie = `${b}=${a}; path=/; max-age=${W}`;
 }
-function j(n) {
-  const a = window.matchMedia(N);
-  return a.addEventListener("change", n), () => a.removeEventListener("change", n);
+function B(a) {
+  const n = window.matchMedia(_);
+  return n.addEventListener("change", a), () => n.removeEventListener("change", a);
 }
-function B() {
-  return w(
-    j,
-    () => window.matchMedia(N).matches,
+function A() {
+  return L(
+    B,
+    () => window.matchMedia(_).matches,
     () => !1
   );
 }
-function A() {
-  const n = B(), [a, t] = f(W), [c, r] = f(!1), d = g((i) => {
-    t(i), $(i);
-  }, []), u = g(() => {
-    if (n) {
-      r((i) => !i);
+function D() {
+  const a = A(), [n, t] = g($), [c, i] = g(!1), d = x((r) => {
+    t(r), j(r);
+  }, []), u = x(() => {
+    if (a) {
+      i((r) => !r);
       return;
     }
-    d(!a);
-  }, [n, a, d]);
-  return y(() => {
-    function i(o) {
-      (o.metaKey || o.ctrlKey) && o.key === "b" && (o.preventDefault(), u());
+    d(!n);
+  }, [a, n, d]);
+  return M(() => {
+    function r(s) {
+      (s.metaKey || s.ctrlKey) && s.key === "b" && (s.preventDefault(), u());
     }
-    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
-  }, [u]), { isMobile: n, open: a, openMobile: c, setOpenMobile: r, toggleSidebar: u };
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
+  }, [u]), { isMobile: a, open: n, openMobile: c, setOpenMobile: i, toggleSidebar: u };
 }
-function D(n, a) {
+function y(a, n) {
   let t;
-  for (const c of n)
-    for (const r of c.items)
-      (r.to === "/" ? a === "/" : a === r.to || a.startsWith(`${r.to}/`)) && (!t || r.to.length > t.to.length) && (t = r);
+  for (const c of a)
+    for (const i of c.items)
+      (i.to === "/" ? n === "/" : n === i.to || n.startsWith(`${i.to}/`)) && (!t || i.to.length > t.to.length) && (t = i);
   return t;
 }
 function K({
-  collapsed: n,
-  item: a,
-  onNavigate: t
+  collapsed: a,
+  end: n,
+  item: t,
+  onNavigate: c
 }) {
-  return /* @__PURE__ */ s(p.Root, { children: [
-    /* @__PURE__ */ s(
-      p.Trigger,
+  return /* @__PURE__ */ l(h.Root, { children: [
+    /* @__PURE__ */ l(
+      h.Trigger,
       {
         render: /* @__PURE__ */ e(
-          S,
+          C,
           {
             className: "ux-nav-item",
-            end: a.to === "/",
-            onClick: t,
-            to: a.to
+            end: n,
+            onClick: c,
+            to: t.to
           }
         ),
         children: [
-          /* @__PURE__ */ e("span", { className: "ux-nav-item__icon", children: a.icon }),
-          /* @__PURE__ */ e("span", { className: "ux-nav-item__text", children: a.label })
+          /* @__PURE__ */ e("span", { className: "ux-nav-item__icon", children: t.icon }),
+          /* @__PURE__ */ e("span", { className: "ux-nav-item__text", children: t.label })
         ]
       }
     ),
-    /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ e(
-      p.Positioner,
+    /* @__PURE__ */ e(h.Portal, { children: /* @__PURE__ */ e(
+      h.Positioner,
       {
         className: "ux-tooltip-positioner",
         side: "right",
         sideOffset: 6,
-        children: /* @__PURE__ */ e(p.Popup, { className: "ux-tooltip", hidden: !n, children: a.label })
+        children: /* @__PURE__ */ e(h.Popup, { className: "ux-tooltip", hidden: !a, children: t.label })
       }
     ) })
   ] });
 }
-function x({
-  copy: n,
-  logo: a,
+function v({
+  copy: a,
+  logo: n,
   nav: t,
   onNavigate: c,
-  state: r,
+  state: i,
   title: d
 }) {
-  const { resolvedTheme: u } = v();
-  return /* @__PURE__ */ s(_, { children: [
-    /* @__PURE__ */ s("div", { className: "ux-sidebar__header", children: [
-      /* @__PURE__ */ e("span", { className: "ux-sidebar__logo", children: u === "dark" ? a.dark : a.light }),
+  const { resolvedTheme: u } = N(), { pathname: r } = k(), s = y(t, r);
+  return /* @__PURE__ */ l(w, { children: [
+    /* @__PURE__ */ l("div", { className: "ux-sidebar__header", children: [
+      /* @__PURE__ */ e("span", { className: "ux-sidebar__logo", children: u === "dark" ? n.dark : n.light }),
       /* @__PURE__ */ e("span", { className: "ux-sidebar__title", children: d })
     ] }),
-    /* @__PURE__ */ e("nav", { "aria-label": n.navigation, className: "ux-sidebar__nav", children: t.map((i) => /* @__PURE__ */ s("div", { className: "ux-nav-group", children: [
-      /* @__PURE__ */ e("div", { className: "ux-nav-group__label", children: i.label }),
-      i.items.map((o) => /* @__PURE__ */ e(
-        K,
-        {
-          collapsed: r === "collapsed",
-          item: o,
-          onNavigate: c
-        },
-        o.to
+    /* @__PURE__ */ e("nav", { "aria-label": a.navigation, className: "ux-sidebar__nav", children: t.map((o) => /* @__PURE__ */ l("div", { className: "ux-nav-group", children: [
+      /* @__PURE__ */ e("div", { className: "ux-nav-group__label", children: o.label }),
+      o.items.map((p) => (
+        // NavLink would mark a parent section current on its children's
+        // routes; follow matchActiveItem instead so only the deepest
+        // match (or the exact path) stays marked.
+        /* @__PURE__ */ e(
+          K,
+          {
+            collapsed: i === "collapsed",
+            end: p !== s || p.to === r,
+            item: p,
+            onNavigate: c
+          },
+          p.to
+        )
       ))
-    ] }, i.label)) })
+    ] }, o.label)) })
   ] });
 }
 function H({
-  children: n,
-  headerSlot: a,
+  children: a,
+  headerSlot: n,
   logo: t,
   nav: c,
-  pageTitle: r,
+  pageTitle: i,
   title: d
 }) {
-  var b;
-  const { pathname: u } = L(), { lang: i } = v(), o = P(i), l = A(), k = r ?? ((b = D(c, u)) == null ? void 0 : b.label);
-  return /* @__PURE__ */ e(p.Provider, { delay: 0, children: /* @__PURE__ */ s(
+  var f;
+  const { pathname: u } = k(), { lang: r } = N(), s = I(r), o = D(), p = i ?? ((f = y(c, u)) == null ? void 0 : f.label);
+  return /* @__PURE__ */ e(h.Provider, { delay: 0, children: /* @__PURE__ */ l(
     "div",
     {
       className: "ux-app-layout",
-      "data-state": l.open ? "expanded" : "collapsed",
+      "data-state": o.open ? "expanded" : "collapsed",
       children: [
         /* @__PURE__ */ e("aside", { className: "ux-sidebar", children: /* @__PURE__ */ e(
-          x,
+          v,
           {
-            copy: o,
+            copy: s,
             logo: t,
             nav: c,
-            state: l.open ? "expanded" : "collapsed",
+            state: o.open ? "expanded" : "collapsed",
             title: d
           }
         ) }),
-        l.isMobile ? /* @__PURE__ */ e(
-          h.Root,
+        o.isMobile ? /* @__PURE__ */ e(
+          m.Root,
           {
-            open: l.openMobile,
-            onOpenChange: l.setOpenMobile,
-            children: /* @__PURE__ */ s(h.Portal, { children: [
-              /* @__PURE__ */ e(h.Backdrop, { className: "ux-drawer-backdrop" }),
-              /* @__PURE__ */ s(h.Popup, { className: "ux-drawer", children: [
-                /* @__PURE__ */ e(h.Title, { className: "ux-visually-hidden", children: o.navigation }),
+            open: o.openMobile,
+            onOpenChange: o.setOpenMobile,
+            children: /* @__PURE__ */ l(m.Portal, { children: [
+              /* @__PURE__ */ e(m.Backdrop, { className: "ux-drawer-backdrop" }),
+              /* @__PURE__ */ l(m.Popup, { className: "ux-drawer", children: [
+                /* @__PURE__ */ e(m.Title, { className: "ux-visually-hidden", children: s.navigation }),
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    "aria-label": o.closeNavigation,
+                    "aria-label": s.closeNavigation,
                     className: "ux-drawer__close",
                     type: "button",
-                    onClick: () => l.setOpenMobile(!1),
+                    onClick: () => o.setOpenMobile(!1),
                     children: /* @__PURE__ */ e(T, {})
                   }
                 ),
                 /* @__PURE__ */ e(
-                  x,
+                  v,
                   {
-                    copy: o,
+                    copy: s,
                     logo: t,
                     nav: c,
-                    onNavigate: () => l.setOpenMobile(!1),
+                    onNavigate: () => o.setOpenMobile(!1),
                     state: "expanded",
                     title: d
                   }
@@ -218,25 +225,25 @@ function H({
             ] })
           }
         ) : null,
-        /* @__PURE__ */ s("div", { className: "ux-shell", children: [
-          /* @__PURE__ */ s("header", { className: "ux-app-header", children: [
+        /* @__PURE__ */ l("div", { className: "ux-shell", children: [
+          /* @__PURE__ */ l("header", { className: "ux-app-header", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                "aria-expanded": l.isMobile ? l.openMobile : l.open,
-                "aria-label": o.toggleSidebar,
+                "aria-expanded": o.isMobile ? o.openMobile : o.open,
+                "aria-label": s.toggleSidebar,
                 className: "ux-app-header__trigger",
                 type: "button",
-                onClick: l.toggleSidebar,
+                onClick: o.toggleSidebar,
                 children: /* @__PURE__ */ e(E, {})
               }
             ),
             /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "ux-app-header__separator" }),
-            /* @__PURE__ */ e("p", { className: "ux-app-header__title", children: k }),
-            /* @__PURE__ */ e("div", { className: "ux-app-header__slot", children: a }),
-            /* @__PURE__ */ e(M, {})
+            /* @__PURE__ */ e("p", { className: "ux-app-header__title", children: p }),
+            /* @__PURE__ */ e("div", { className: "ux-app-header__slot", children: n }),
+            /* @__PURE__ */ e(S, {})
           ] }),
-          /* @__PURE__ */ e("main", { className: "ux-main", children: n })
+          /* @__PURE__ */ e("main", { className: "ux-main", children: a })
         ] })
       ]
     }

package/dist/styles.css

@@ -178,6 +178,7 @@
 }
 
 .ux-app-layout[data-state="collapsed"] .ux-nav-item__text {
+  width: 0;
   opacity: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zccz14/ux",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Unified AppLayout shell for the NTNL app family: one animated icon sidebar, a fixed-size dark/light logo, and the Linkit-integrated AppHeader.",
   "license": "MIT",
   "repository": {