@devalok/shilp-sutra 0.17.2 → 0.18.1

package/dist/shell/app-command-palette.js

@@ -1,198 +1,220 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { useCallback as u, useMemo as l } from "react";
-import { IconFileText as S, IconLayoutDashboard as L, IconCalendarCheck as E, IconUmbrella as y, IconLayoutKanban as A, IconListCheck as T, IconBook as M, IconAdjustmentsHorizontal as P, IconUserCircle as $, IconShieldCheck as D, IconClipboardList as O, IconUserPlus as U, IconSettings as B, IconPackage as K, IconLink as N, IconVideo as w, IconMessage as G, IconUsers as V } from "@tabler/icons-react";
-import { CommandPalette as v } from "../composed/command-palette.js";
-const x = {
-  TASK: /* @__PURE__ */ e(T, {}),
-  PROJECT: /* @__PURE__ */ e(A, {}),
-  USER: /* @__PURE__ */ e(V, {}),
-  COMMENT: /* @__PURE__ */ e(G, {}),
-  MEETING: /* @__PURE__ */ e(w, {}),
-  LINK: /* @__PURE__ */ e(N, {}),
-  DELIVERABLE: /* @__PURE__ */ e(K, {})
+import { jsx as a } from "react/jsx-runtime";
+import * as w from "react";
+import { useCallback as g, useMemo as r } from "react";
+import { IconFileText as D, IconLayoutDashboard as N, IconCalendarCheck as A, IconUmbrella as C, IconLayoutKanban as E, IconListCheck as h, IconBook as O, IconAdjustmentsHorizontal as U, IconUserCircle as B, IconShieldCheck as K, IconClipboardList as G, IconUserPlus as R, IconSettings as V, IconPackage as v, IconLink as x, IconVideo as J, IconMessage as Y, IconUsers as _ } from "@tabler/icons-react";
+import { CommandPalette as z } from "../composed/command-palette.js";
+import { cn as F } from "../ui/lib/utils.js";
+import { useCommandRegistry as H } from "./command-registry.js";
+const q = {
+  TASK: /* @__PURE__ */ a(h, {}),
+  PROJECT: /* @__PURE__ */ a(E, {}),
+  USER: /* @__PURE__ */ a(_, {}),
+  COMMENT: /* @__PURE__ */ a(Y, {}),
+  MEETING: /* @__PURE__ */ a(J, {}),
+  LINK: /* @__PURE__ */ a(x, {}),
+  DELIVERABLE: /* @__PURE__ */ a(v, {})
 };
-function J(a) {
+function Q(o) {
   return [
     {
       id: "nav-dashboard",
       label: "Dashboard",
-      icon: /* @__PURE__ */ e(L, {}),
-      onSelect: () => a("/")
+      icon: /* @__PURE__ */ a(N, {}),
+      onSelect: () => o("/")
     },
     {
       id: "nav-attendance",
       label: "Attendance",
-      icon: /* @__PURE__ */ e(E, {}),
-      onSelect: () => a("/attendance")
+      icon: /* @__PURE__ */ a(A, {}),
+      onSelect: () => o("/attendance")
     },
     {
       id: "nav-breaks",
       label: "Breaks",
-      icon: /* @__PURE__ */ e(y, {}),
-      onSelect: () => a("/breaks")
+      icon: /* @__PURE__ */ a(C, {}),
+      onSelect: () => o("/breaks")
     },
     {
       id: "nav-projects",
       label: "Projects",
-      icon: /* @__PURE__ */ e(A, {}),
-      onSelect: () => a("/projects")
+      icon: /* @__PURE__ */ a(E, {}),
+      onSelect: () => o("/projects")
     },
     {
       id: "nav-my-tasks",
       label: "My Tasks",
-      icon: /* @__PURE__ */ e(T, {}),
-      onSelect: () => a("/my-tasks")
+      icon: /* @__PURE__ */ a(h, {}),
+      onSelect: () => o("/my-tasks")
     },
     {
       id: "nav-devsabha",
       label: "Devsabha",
-      icon: /* @__PURE__ */ e(M, {}),
-      onSelect: () => a("/devsabha")
+      icon: /* @__PURE__ */ a(O, {}),
+      onSelect: () => o("/devsabha")
     },
     {
       id: "nav-adjustments",
       label: "Adjustments",
-      icon: /* @__PURE__ */ e(P, {}),
-      onSelect: () => a("/adjustments")
+      icon: /* @__PURE__ */ a(U, {}),
+      onSelect: () => o("/adjustments")
     },
     {
       id: "nav-profile",
       label: "Profile",
-      icon: /* @__PURE__ */ e($, {}),
-      onSelect: () => a("/profile")
+      icon: /* @__PURE__ */ a(B, {}),
+      onSelect: () => o("/profile")
     }
   ];
 }
-function Y(a) {
+function W(o) {
   return [
     {
       id: "nav-admin-dashboard",
       label: "Admin Dashboard",
-      icon: /* @__PURE__ */ e(D, {}),
-      onSelect: () => a("/admin")
+      icon: /* @__PURE__ */ a(K, {}),
+      onSelect: () => o("/admin")
     },
     {
       id: "nav-admin-breaks",
       label: "Manage Breaks",
-      icon: /* @__PURE__ */ e(y, {}),
-      onSelect: () => a("/admin/breaks")
+      icon: /* @__PURE__ */ a(C, {}),
+      onSelect: () => o("/admin/breaks")
     },
     {
       id: "nav-admin-attendance",
       label: "Manage Attendance",
-      icon: /* @__PURE__ */ e(E, {}),
-      onSelect: () => a("/admin/attendance")
+      icon: /* @__PURE__ */ a(A, {}),
+      onSelect: () => o("/admin/attendance")
     },
     {
       id: "nav-admin-lokwasi",
       label: "Lokwasi",
-      icon: /* @__PURE__ */ e(O, {}),
-      onSelect: () => a("/admin/lokwasi")
+      icon: /* @__PURE__ */ a(G, {}),
+      onSelect: () => o("/admin/lokwasi")
     },
     {
       id: "nav-admin-onboarding",
       label: "Onboarding",
-      icon: /* @__PURE__ */ e(U, {}),
-      onSelect: () => a("/admin/onboarding")
+      icon: /* @__PURE__ */ a(R, {}),
+      onSelect: () => o("/admin/onboarding")
     },
     {
       id: "nav-admin-config",
       label: "System Config",
-      icon: /* @__PURE__ */ e(B, {}),
-      onSelect: () => a("/admin/system-config")
+      icon: /* @__PURE__ */ a(V, {}),
+      onSelect: () => o("/admin/system-config")
     }
   ];
 }
-function _({
-  user: a,
-  isAdmin: C,
-  extraGroups: b = [],
-  onNavigate: c,
-  onSearch: d,
-  searchResults: m = [],
-  isSearching: p = !1,
-  onSearchResultSelect: s
-}) {
-  const I = C ?? ((a == null ? void 0 : a.role) === "Admin" || (a == null ? void 0 : a.role) === "SuperAdmin"), i = u(
-    (t) => {
-      c == null || c(t);
-    },
-    [c]
-  ), k = l(
-    () => ({
-      label: "Pages",
-      items: J(i)
-    }),
-    [i]
-  ), j = l(
-    () => ({
-      label: "Admin",
-      items: Y(i)
-    }),
-    [i]
-  ), r = l(() => {
-    if (m.length === 0) return null;
-    const t = m.map((n) => {
-      var f;
-      let o = "/";
-      switch (n.entityType) {
-        case "TASK":
-          o = n.projectId ? `/projects/${n.projectId}?taskId=${n.id}` : "/";
-          break;
-        case "PROJECT":
-          o = `/projects/${n.id}`;
-          break;
-        case "USER":
-          o = "/teammates";
-          break;
-        case "COMMENT":
-          o = n.projectId && ((f = n.metadata) != null && f.taskId) ? `/projects/${n.projectId}?taskId=${n.metadata.taskId}` : "/";
-          break;
-        case "MEETING":
-          o = n.projectId ? `/projects/${n.projectId}?tab=meetings` : "/";
-          break;
-        case "LINK":
-          o = n.projectId ? `/projects/${n.projectId}?tab=karyakram` : "/";
-          break;
-        case "DELIVERABLE":
-          o = n.projectId ? `/projects/${n.projectId}?tab=deliverables` : "/";
-          break;
-      }
-      return {
-        id: `search-${n.entityType}-${n.id}`,
-        label: n.title,
-        description: n.snippet,
-        icon: x[n.entityType] ?? /* @__PURE__ */ e(S, {}),
-        onSelect: () => {
-          s == null || s(n), i(o);
+const X = w.forwardRef(
+  function({
+    user: c,
+    isAdmin: T,
+    extraGroups: I = [],
+    onNavigate: s,
+    onSearch: l,
+    searchResults: b = [],
+    isSearching: k = !1,
+    onSearchResultSelect: m,
+    className: S,
+    ...P
+  }, L) {
+    const f = T ?? ((c == null ? void 0 : c.role) === "Admin" || (c == null ? void 0 : c.role) === "SuperAdmin"), d = H(), t = g(
+      (e) => {
+        s == null || s(e);
+      },
+      [s]
+    ), j = r(
+      () => ({
+        label: "Pages",
+        items: d ? d.pages.map((e) => ({
+          id: e.id,
+          label: e.label,
+          icon: e.icon,
+          keywords: e.keywords,
+          onSelect: () => t(e.path)
+        })) : Q(t)
+      }),
+      [t, d]
+    ), y = r(
+      () => ({
+        label: "Admin",
+        items: d ? d.adminPages.map((e) => ({
+          id: e.id,
+          label: e.label,
+          icon: e.icon,
+          keywords: e.keywords,
+          onSelect: () => t(e.path)
+        })) : W(t)
+      }),
+      [t, d]
+    ), p = r(() => {
+      if (b.length === 0) return null;
+      const e = b.map((n) => {
+        var u;
+        let i = "/";
+        switch (n.entityType) {
+          case "TASK":
+            i = n.projectId ? `/projects/${n.projectId}?taskId=${n.id}` : "/";
+            break;
+          case "PROJECT":
+            i = `/projects/${n.id}`;
+            break;
+          case "USER":
+            i = "/teammates";
+            break;
+          case "COMMENT":
+            i = n.projectId && ((u = n.metadata) != null && u.taskId) ? `/projects/${n.projectId}?taskId=${n.metadata.taskId}` : "/";
+            break;
+          case "MEETING":
+            i = n.projectId ? `/projects/${n.projectId}?tab=meetings` : "/";
+            break;
+          case "LINK":
+            i = n.projectId ? `/projects/${n.projectId}?tab=karyakram` : "/";
+            break;
+          case "DELIVERABLE":
+            i = n.projectId ? `/projects/${n.projectId}?tab=deliverables` : "/";
+            break;
         }
+        return {
+          id: `search-${n.entityType}-${n.id}`,
+          label: n.title,
+          description: n.snippet,
+          icon: q[n.entityType] ?? /* @__PURE__ */ a(D, {}),
+          onSelect: () => {
+            m == null || m(n), t(i);
+          }
+        };
+      });
+      return {
+        label: k ? "Searching..." : "Search Results",
+        items: e
       };
-    });
-    return {
-      label: p ? "Searching..." : "Search Results",
-      items: t
-    };
-  }, [m, p, i, s]), h = l(() => {
-    const t = [];
-    return r && t.push(r), t.push(k), I && t.push(j), t.push(...b), t;
-  }, [r, k, I, j, b]), g = u(
-    (t) => {
-      d == null || d(t);
-    },
-    [d]
-  );
-  return /* @__PURE__ */ e(
-    v,
-    {
-      groups: h,
-      placeholder: "Search or jump to...",
-      onSearch: g,
-      emptyMessage: "No results found. Try a different search term."
-    }
-  );
-}
-_.displayName = "AppCommandPalette";
+    }, [b, k, t, m]), M = r(() => {
+      const e = [];
+      return p && e.push(p), e.push(j), f && e.push(y), e.push(...I), e;
+    }, [p, j, f, y, I]), $ = g(
+      (e) => {
+        l == null || l(e);
+      },
+      [l]
+    );
+    return /* @__PURE__ */ a(
+      z,
+      {
+        ref: L,
+        groups: M,
+        placeholder: "Search or jump to...",
+        onSearch: $,
+        emptyMessage: "No results found. Try a different search term.",
+        className: F(S),
+        ...P
+      }
+    );
+  }
+);
+X.displayName = "AppCommandPalette";
 export {
-  _ as AppCommandPalette
+  X as AppCommandPalette
 };

package/dist/shell/bottom-navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwED,QAAA,MAAM,YAAY,uFAyIjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"bottom-navbar.d.ts","sourceRoot":"","sources":["../../src/shell/bottom-navbar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2ED,QAAA,MAAM,YAAY,uFAqIjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/shell/bottom-navbar.js

@@ -1,118 +1,115 @@
 "use client";
-import { jsxs as r, Fragment as v, jsx as t } from "react/jsx-runtime";
-import * as g from "react";
-import { useState as N } from "react";
-import { useLink as f } from "./link-context.js";
-import { IconX as y, IconDots as w } from "@tabler/icons-react";
-import { c as s } from "../_chunks/utils.js";
-function k({ count: a }) {
+import { jsxs as t, Fragment as N, jsx as s } from "react/jsx-runtime";
+import * as w from "react";
+import { useState as y } from "react";
+import { u } from "../_chunks/link-context.js";
+import { IconX as k, IconDots as M } from "@tabler/icons-react";
+import { cn as o } from "../ui/lib/utils.js";
+import { springs as d } from "../ui/lib/motion.js";
+import { m as f } from "../_chunks/framer.js";
+function j({ count: a }) {
   if (!a || a <= 0) return null;
-  const i = a > 99 ? "99+" : String(a), l = a >= 10;
-  return /* @__PURE__ */ t(
+  const r = a > 99 ? "99+" : String(a), i = a >= 10;
+  return /* @__PURE__ */ s(
     "span",
     {
       "aria-label": `${a} notifications`,
-      className: s(
-        "absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error text-[10px] font-semibold leading-none text-text-on-color animate-in zoom-in-75",
-        l ? "px-0.5" : ""
+      className: o(
+        "absolute -right-1 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-9 text-[10px] font-semibold leading-none text-accent-fg animate-in zoom-in-75",
+        i ? "px-0.5" : ""
       ),
-      children: i
+      children: r
     }
   );
 }
-function M({
+function C({
   item: a,
-  isActive: i,
-  onClick: l
+  isActive: r,
+  onClick: i
 }) {
-  const n = f();
-  return /* @__PURE__ */ t(
+  const n = u();
+  return /* @__PURE__ */ s(f.div, { whileTap: { y: -2 }, transition: d.snappy, className: "flex max-w-[70px] flex-1", children: /* @__PURE__ */ s(
     n,
     {
       href: a.href,
-      onClick: l,
+      onClick: i,
       "aria-label": a.title,
-      "aria-current": i ? "page" : void 0,
-      className: s(
-        "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm active:animate-subtle-bounce",
-        i ? "font-semibold text-interactive" : "text-text-helper"
+      "aria-current": r ? "page" : void 0,
+      className: o(
+        "flex h-16 w-full cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm",
+        r ? "font-semibold text-accent-11" : "text-surface-fg-subtle"
       ),
-      children: /* @__PURE__ */ r("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
-        /* @__PURE__ */ t(
-          "div",
+      children: /* @__PURE__ */ t("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
+        r && /* @__PURE__ */ s(
+          f.div,
           {
-            className: s(
-              "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-[opacity,transform] duration-moderate-01",
-              i ? "opacity-100 animate-tab-indicator" : "opacity-0 scale-x-0"
-            ),
-            "aria-hidden": "true"
+            layoutId: "bottom-nav-indicator",
+            className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+            "aria-hidden": "true",
+            transition: d.snappy
           }
         ),
-        /* @__PURE__ */ r("div", { className: "relative p-ds-03", children: [
-          /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", "aria-hidden": "true", children: a.icon }),
-          a.badge != null && /* @__PURE__ */ t(k, { count: a.badge })
+        /* @__PURE__ */ t("div", { className: "relative p-ds-03", children: [
+          /* @__PURE__ */ s("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", "aria-hidden": "true", children: a.icon }),
+          a.badge != null && /* @__PURE__ */ s(j, { count: a.badge })
         ] }),
-        /* @__PURE__ */ t("span", { className: "text-center", children: a.title })
+        /* @__PURE__ */ s("span", { className: "text-center", children: a.title })
       ] })
     }
-  );
+  ) });
 }
-const j = g.forwardRef(
+const B = w.forwardRef(
   ({
     currentPath: a = "/",
-    user: i,
-    primaryItems: l = [],
+    user: r,
+    primaryItems: i = [],
     moreItems: n = [],
-    className: p,
+    className: h,
     ...x
   }, b) => {
-    const h = f(), [o, d] = N(!1), c = (e, u = !1) => u || e === "/" ? a === e : a.startsWith(e), m = n.some(
-      (e) => c(e.href, e.exact)
+    const g = u(), [l, c] = y(!1), m = (e, v = !1) => v || e === "/" ? a === e : a.startsWith(e), p = n.some(
+      (e) => m(e.href, e.exact)
     );
-    return /* @__PURE__ */ r(v, { children: [
-      o && /* @__PURE__ */ r(
+    return /* @__PURE__ */ t(N, { children: [
+      l && // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- backdrop overlay, dismiss via mouse only; keyboard users close via Escape
+      /* @__PURE__ */ t(
         "div",
         {
-          role: "button",
-          tabIndex: 0,
           className: "fixed inset-0 z-overlay md:hidden",
-          onClick: () => d(!1),
-          onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d(!1));
-          },
+          onClick: () => c(!1),
           children: [
-            /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-overlay" }),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ s("div", { className: "absolute inset-0 bg-overlay" }),
+            /* @__PURE__ */ t(
               "div",
               {
-                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-border bg-layer-01 p-ds-05 pb-ds-03",
+                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-1 p-ds-05 pb-ds-03",
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ r("div", { className: "mb-ds-04 flex items-center justify-between", children: [
-                    /* @__PURE__ */ t("span", { className: "text-ds-md font-semibold text-text-primary", children: "More" }),
-                    /* @__PURE__ */ t(
+                  /* @__PURE__ */ t("div", { className: "mb-ds-04 flex items-center justify-between", children: [
+                    /* @__PURE__ */ s("span", { className: "text-ds-md font-semibold text-surface-fg", children: "More" }),
+                    /* @__PURE__ */ s(
                       "button",
                       {
-                        onClick: () => d(!1),
+                        onClick: () => c(!1),
                         "aria-label": "Close more menu",
-                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-layer-02",
-                        children: /* @__PURE__ */ t(y, { className: "h-ico-sm w-ico-sm text-text-secondary", "aria-hidden": "true" })
+                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-2",
+                        children: /* @__PURE__ */ s(k, { className: "h-ico-sm w-ico-sm text-surface-fg-muted", "aria-hidden": "true" })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-ds-03", children: n.map((e) => /* @__PURE__ */ r(
-                    h,
+                  /* @__PURE__ */ s("div", { className: "grid grid-cols-4 gap-ds-03", children: n.map((e) => /* @__PURE__ */ t(
+                    g,
                     {
                       href: e.href,
-                      onClick: () => d(!1),
-                      className: s(
+                      onClick: () => c(!1),
+                      className: o(
                         "flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors",
-                        c(e.href, e.exact) ? "bg-layer-02 text-interactive" : "text-text-helper hover:bg-layer-02"
+                        m(e.href, e.exact) ? "bg-surface-2 text-accent-11" : "text-surface-fg-subtle hover:bg-surface-2"
                       ),
                       children: [
-                        /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", children: e.icon }),
-                        /* @__PURE__ */ t("span", { className: "text-center", children: e.title })
+                        /* @__PURE__ */ s("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", children: e.icon }),
+                        /* @__PURE__ */ s("span", { className: "text-center", children: e.title })
                       ]
                     },
                     e.href
@@ -123,49 +120,50 @@ const j = g.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "nav",
         {
           ...x,
           ref: b,
           "aria-label": "Mobile navigation",
-          className: s(
-            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-border bg-layer-01 px-ds-05 pb-ds-05b pt-0 md:hidden",
-            p
+          className: o(
+            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-1 px-ds-05 pb-ds-05b pt-0 md:hidden",
+            h
           ),
           children: [
-            l.map((e) => /* @__PURE__ */ t(
-              M,
+            i.map((e) => /* @__PURE__ */ s(
+              C,
               {
                 item: e,
-                isActive: c(e.href, e.exact)
+                isActive: m(e.href, e.exact)
               },
               e.href
             )),
-            n.length > 0 && /* @__PURE__ */ t(
-              "button",
+            n.length > 0 && /* @__PURE__ */ s(
+              f.button,
               {
                 type: "button",
-                onClick: () => d(!o),
+                onClick: () => c(!l),
                 "aria-label": "More navigation options",
-                "aria-expanded": o,
-                className: s(
-                  "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm active:animate-subtle-bounce",
-                  o || m ? "font-semibold text-interactive" : "text-text-helper"
+                "aria-expanded": l,
+                whileTap: { y: -2 },
+                transition: d.snappy,
+                className: o(
+                  "flex h-16 max-w-[70px] flex-1 cursor-pointer flex-col items-center gap-ds-02 p-ds-02 pt-0 text-ds-sm",
+                  l || p ? "font-semibold text-accent-11" : "text-surface-fg-subtle"
                 ),
-                children: /* @__PURE__ */ r("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
-                  /* @__PURE__ */ t(
-                    "div",
+                children: /* @__PURE__ */ t("div", { className: "relative flex w-full flex-col items-center gap-ds-02", children: [
+                  (l || p) && /* @__PURE__ */ s(
+                    f.div,
                     {
-                      className: s(
-                        "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-interactive p-0 transition-[opacity,transform] duration-moderate-01",
-                        o || m ? "opacity-100 animate-tab-indicator" : "opacity-0 scale-x-0"
-                      ),
-                      "aria-hidden": "true"
+                      layoutId: "bottom-nav-indicator",
+                      className: "absolute top-0 h-[3px] w-full rounded-b-ds-sm bg-accent-9 p-0",
+                      "aria-hidden": "true",
+                      transition: d.snappy
                     }
                   ),
-                  /* @__PURE__ */ t("div", { className: "p-ds-03", children: /* @__PURE__ */ t(w, { className: "h-ico-md w-ico-md", "aria-hidden": "true" }) }),
-                  /* @__PURE__ */ t("span", { className: "text-center", children: "More" })
+                  /* @__PURE__ */ s("div", { className: "p-ds-03", children: /* @__PURE__ */ s(M, { className: "h-ico-md w-ico-md", "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ s("span", { className: "text-center", children: "More" })
                 ] })
               }
             )
@@ -175,7 +173,7 @@ const j = g.forwardRef(
     ] });
   }
 );
-j.displayName = "BottomNavbar";
+B.displayName = "BottomNavbar";
 export {
-  j as BottomNavbar
+  B as BottomNavbar
 };