@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/foundations/toggle-group.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as l } from "class-variance-authority";
 import { ToggleGroup as d } from "radix-ui";
 import { cn as g } from "../../lib/utils.js";
-const c = l(
+import { FORCED_COLORS_FOCUS_INSET as u } from "../../lib/focus-ring.js";
+const p = l(
   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
   {
     variants: {
@@ -18,15 +19,22 @@ const c = l(
       width: "fit"
     }
   }
-), p = l(
+), f = l(
   [
     "inline-flex shrink-0 items-center justify-center",
     "h-9 rounded-full px-3",
     "typo-label-md whitespace-nowrap",
     "outline-none transition-colors",
-    "focus-visible:ring-2 focus-visible:ring-ring/50",
+    // 内側に描く（ring-inset / FORCED_COLORS_FOCUS_INSET）: ToggleGroup 本体の overflow-x-auto が外側のリングを左右で切り取る
+    "focus-visible:ring-2 focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))]",
+    "focus-visible:ring-inset",
+    u,
     "disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    // forced-colors（Windows ハイコントラスト）では押されている項目の薄オレンジ地・濃い枠が
+    // Canvas / CanvasText に置き換わり、押されていない項目と見分けがつかないため、
+    // 押されている項目だけ OS の選択色で示す（default / outline 共通。通常表示は不変）
+    "forced-colors:data-[state=on]:bg-[Highlight] forced-colors:data-[state=on]:text-[HighlightText]"
   ].join(" "),
   {
     variants: {
@@ -39,7 +47,7 @@ const c = l(
           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]"
         ].join(" "),
         outline: [
-          "border border-[var(--Border-Low-Emphasis)] bg-transparent text-[var(--Text-Low-Emphasis)]",
+          "border border-[var(--Border-Control,var(--Border-Low-Emphasis))] bg-transparent text-[var(--Text-Low-Emphasis)]",
           "hover:bg-[var(--Surface-Tertiary)]",
           "data-[state=on]:border-[var(--Text-High-Emphasis)] data-[state=on]:bg-transparent data-[state=on]:text-[var(--Text-High-Emphasis)]"
         ].join(" ")
@@ -55,54 +63,54 @@ const c = l(
       size: "default"
     }
   }
-), u = s.createContext({
+), c = s.createContext({
   variant: "default",
   size: "default"
 });
-function h({
+function T({
   className: a,
   variant: e,
   size: r,
   width: o,
-  children: n,
+  children: i,
   ...t
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     d.Root,
     {
       "data-slot": "toggle-group",
-      className: g(c({ width: o }), a),
+      className: g(p({ width: o }), a),
       ...t,
-      children: /* @__PURE__ */ i(u.Provider, { value: { variant: e, size: r }, children: n })
+      children: /* @__PURE__ */ n(c.Provider, { value: { variant: e, size: r }, children: i })
     }
   );
 }
-function b({
+function y({
   className: a,
   children: e,
   variant: r,
   size: o,
-  ...n
+  ...i
 }) {
-  const t = s.useContext(u);
-  return /* @__PURE__ */ i(
+  const t = s.useContext(c);
+  return /* @__PURE__ */ n(
     d.Item,
     {
       "data-slot": "toggle-group-item",
       className: g(
-        p({
+        f({
           variant: t.variant || r,
           size: t.size || o
         }),
         a
       ),
-      ...n,
+      ...i,
       children: e
     }
   );
 }
 export {
-  h as ToggleGroup,
-  b as ToggleGroupItem,
-  p as toggleGroupItemVariants
+  T as ToggleGroup,
+  y as ToggleGroupItem,
+  f as toggleGroupItemVariants
 };

package/dist/components/foundations/toggle.js

@@ -1,15 +1,19 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import "react";
-import { cva as o } from "class-variance-authority";
-import { Toggle as a } from "radix-ui";
+import { cva as i } from "class-variance-authority";
+import { Toggle as n } from "radix-ui";
 import { cn as s } from "../../lib/utils.js";
-const d = o(
-  "inline-flex items-center justify-center gap-2 rounded-md typo-label-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+import { FORCED_COLORS_FOCUS as d } from "../../lib/focus-ring.js";
+const l = i(
+  // forced-colors:data-[state=on]:…: Windows ハイコントラスト（forced-colors）では押されているときの
+  // 地（bg-accent）が Canvas に置き換わり、押されていないものと見分けがつかないため、
+  // 押されているときだけ OS の選択色で示す（ToggleGroup と同じ方式。通常表示は不変）
+  ["forced-colors:data-[state=on]:bg-[Highlight] forced-colors:data-[state=on]:text-[HighlightText] inline-flex items-center justify-center gap-2 rounded-md typo-label-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", d],
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-[var(--Border-Control,var(--input))] bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-9 min-w-9 px-2",
@@ -23,22 +27,22 @@ const d = o(
     }
   }
 );
-function p({
-  className: e,
-  variant: t,
+function f({
+  className: t,
+  variant: e,
   size: r,
-  ...i
+  ...o
 }) {
-  return /* @__PURE__ */ n(
-    a.Root,
+  return /* @__PURE__ */ a(
+    n.Root,
     {
       "data-slot": "toggle",
-      className: s(d({ variant: t, size: r, className: e })),
-      ...i
+      className: s(l({ variant: e, size: r, className: t })),
+      ...o
     }
   );
 }
 export {
-  p as Toggle,
-  d as toggleVariants
+  f as Toggle,
+  l as toggleVariants
 };

package/dist/components/primitives/admin-side-nav.js

@@ -1,87 +1,88 @@
 "use client";
-import { jsxs as f, Fragment as T, jsx as n } from "react/jsx-runtime";
+import { jsxs as f, Fragment as S, jsx as n } from "react/jsx-runtime";
 import * as t from "react";
-import L from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import { XIcon as j } from "lucide-react";
-import { DropdownMenu as B, DropdownMenuTrigger as G, DropdownMenuContent as q, DropdownMenuItem as Z } from "../foundations/dropdown-menu.js";
-import { FOCUS_RING as U } from "../../lib/focus-ring.js";
-import { cn as A } from "../../lib/utils.js";
-function F(v, M) {
-  return typeof v == "function" ? v(M) : v;
+import B from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { XIcon as G } from "lucide-react";
+import { DropdownMenu as q, DropdownMenuTrigger as Z, DropdownMenuContent as U, DropdownMenuItem as W } from "../foundations/dropdown-menu.js";
+import { FOCUS_RING as X } from "../../lib/focus-ring.js";
+import { cn as F } from "../../lib/utils.js";
+function H(v, w) {
+  return typeof v == "function" ? v(w) : v;
 }
-function Y({
+function K({
   items: v,
-  activeKey: M,
-  drawerTitle: H,
-  open: z = !1,
-  onOpenChange: C,
-  ariaLabel: S = "管理メニュー"
+  activeKey: w,
+  drawerTitle: z,
+  open: L = !1,
+  onOpenChange: R,
+  ariaLabel: E = "管理メニュー",
+  linkComponent: I
 }) {
-  const [P, w] = t.useState(null), c = t.useRef(null), y = t.useRef(/* @__PURE__ */ new Set()), k = t.useRef(null), s = t.useRef(null), b = t.useRef(null), a = t.useRef(null), g = t.useRef(/* @__PURE__ */ new Map()), R = t.useRef(/* @__PURE__ */ new Map()), d = t.useRef(null), p = t.useRef(null), E = t.useRef(null), o = t.useCallback(() => {
+  const N = I ?? "a", [P, M] = t.useState(null), c = t.useRef(null), y = t.useRef(/* @__PURE__ */ new Set()), k = t.useRef(null), s = t.useRef(null), b = t.useRef(null), a = t.useRef(null), g = t.useRef(/* @__PURE__ */ new Map()), T = t.useRef(/* @__PURE__ */ new Map()), d = t.useRef(null), p = t.useRef(null), D = t.useRef(null), o = t.useCallback(() => {
     p.current !== null && (clearTimeout(p.current), p.current = null);
   }, []), i = t.useCallback(() => {
     d.current !== null && (clearTimeout(d.current), d.current = null);
-  }, []), I = t.useCallback(
+  }, []), j = t.useCallback(
     (e, l) => {
       l !== "touch" && (i(), o(), d.current = setTimeout(() => {
-        s.current !== null && s.current !== e && (s.current = null, g.current.get(e)?.focus({ preventScroll: !0 })), c.current = e, y.current.add(e), w(e), d.current = null;
+        s.current !== null && s.current !== e && (s.current = null, g.current.get(e)?.focus({ preventScroll: !0 })), c.current = e, y.current.add(e), M(e), d.current = null;
       }, 80));
     },
     [o, i]
-  ), D = t.useCallback(
+  ), A = t.useCallback(
     (e) => {
       i(), o(), p.current = setTimeout(() => {
-        w((l) => l === e ? null : l), p.current = null;
+        M((l) => l === e ? null : l), p.current = null;
       }, 120);
     },
     [o, i]
   ), O = t.useCallback(() => {
-    i(), o(), c.current = null, y.current.clear(), k.current = null, s.current = null, b.current = null, a.current = null, w(null);
+    i(), o(), c.current = null, y.current.clear(), k.current = null, s.current = null, b.current = null, a.current = null, M(null);
   }, [o, i]);
   return t.useEffect(
     () => () => {
-      d.current !== null && clearTimeout(d.current), p.current !== null && clearTimeout(p.current), k.current = null, s.current = null, b.current = null, a.current = null, g.current.clear(), R.current.clear();
+      d.current !== null && clearTimeout(d.current), p.current !== null && clearTimeout(p.current), k.current = null, s.current = null, b.current = null, a.current = null, g.current.clear(), T.current.clear();
     },
     []
   ), t.useEffect(() => {
-    const e = E.current;
+    const e = D.current;
     if (!e || typeof ResizeObserver > "u") return;
     const l = () => {
       const u = e.getBoundingClientRect();
       (getComputedStyle(e).display === "none" || u.width === 0 || u.height === 0) && O();
     }, h = new ResizeObserver(l);
     return h.observe(e), l(), () => h.disconnect();
-  }, [O]), /* @__PURE__ */ f(T, { children: [
+  }, [O]), /* @__PURE__ */ f(S, { children: [
     /* @__PURE__ */ n(
       "nav",
       {
-        ref: E,
+        ref: D,
         "data-slot": "admin-side-nav",
-        "aria-label": S,
+        "aria-label": E,
         className: "hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Elevated)] border-r border-[var(--Border-Low-Emphasis)]",
         children: v.map((e) => {
-          const l = M === e.key, h = !!e.subMenus && e.subMenus.length > 0;
+          const l = w === e.key, h = !!e.subMenus && e.subMenus.length > 0;
           return /* @__PURE__ */ n("div", { className: "relative", children: (() => {
-            const u = A(
+            const u = F(
               "flex h-16 w-16 flex-col items-center justify-center gap-1 rounded-md transition-colors",
               l ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
-              U
-            ), m = /* @__PURE__ */ f(T, { children: [
-              F(e.icon, { active: l, placement: "rail" }),
+              X
+            ), m = /* @__PURE__ */ f(S, { children: [
+              H(e.icon, { active: l, placement: "rail" }),
               /* @__PURE__ */ n("span", { className: "max-w-12 text-center typo-label-xs", children: e.label })
             ] });
             return h ? /* @__PURE__ */ f(
-              B,
+              q,
               {
                 modal: !1,
                 open: P === e.key,
                 onOpenChange: (r) => {
-                  o(), r ? (a.current === e.key && (a.current = null), c.current = null, y.current.delete(e.key), w(e.key)) : w(
+                  o(), r ? (a.current === e.key && (a.current = null), c.current = null, y.current.delete(e.key), M(e.key)) : M(
                     (x) => x === e.key ? null : x
                   );
                 },
                 children: [
-                  /* @__PURE__ */ n(G, { asChild: !0, children: /* @__PURE__ */ n(
+                  /* @__PURE__ */ n(Z, { asChild: !0, children: /* @__PURE__ */ n(
                     "button",
                     {
                       ref: (r) => {
@@ -96,19 +97,19 @@ function Y({
                         k.current === e.key && (k.current = null);
                       },
                       onPointerEnter: (r) => {
-                        k.current === e.key || b.current === e.key || I(e.key, r.pointerType);
+                        k.current === e.key || b.current === e.key || j(e.key, r.pointerType);
                       },
                       onPointerDownCapture: () => {
                         i(), P !== e.key && (s.current = e.key);
                       },
                       onPointerLeave: () => {
-                        b.current === e.key && (b.current = null), D(e.key);
+                        b.current === e.key && (b.current = null), A(e.key);
                       },
                       children: m
                     }
                   ) }),
                   /* @__PURE__ */ n(
-                    q,
+                    U,
                     {
                       side: "right",
                       align: "start",
@@ -116,7 +117,7 @@ function Y({
                       collisionPadding: 8,
                       className: "w-[240px] rounded-2xl p-2 shadow-menu",
                       onPointerEnter: o,
-                      onPointerLeave: () => D(e.key),
+                      onPointerLeave: () => A(e.key),
                       onPointerMoveCapture: (r) => {
                         c.current === e.key && r.preventDefault();
                       },
@@ -126,7 +127,7 @@ function Y({
                       },
                       onOpenAutoFocus: (r) => {
                         c.current === e.key ? r.preventDefault() : s.current === e.key && (r.preventDefault(), requestAnimationFrame(() => {
-                          R.current.get(e.key)?.focus();
+                          T.current.get(e.key)?.focus();
                         }));
                       },
                       onCloseAutoFocus: (r) => {
@@ -135,21 +136,21 @@ function Y({
                         }))), a.current === e.key && (a.current = null);
                       },
                       children: e.subMenus.map((r, x) => /* @__PURE__ */ n(
-                        Z,
+                        W,
                         {
                           asChild: !0,
                           className: "min-h-11 px-4",
-                          onPointerLeave: (N) => {
-                            c.current === e.key && N.preventDefault();
+                          onPointerLeave: (C) => {
+                            c.current === e.key && C.preventDefault();
                           },
                           children: /* @__PURE__ */ n(
-                            "a",
+                            N,
                             {
-                              ref: x === 0 ? (N) => {
-                                N ? R.current.set(
+                              ref: x === 0 ? (C) => {
+                                C ? T.current.set(
                                   e.key,
-                                  N
-                                ) : R.current.delete(e.key);
+                                  C
+                                ) : T.current.delete(e.key);
                               } : void 0,
                               href: r.href,
                               children: r.label
@@ -163,7 +164,7 @@ function Y({
                 ]
               }
             ) : e.href ? /* @__PURE__ */ n(
-              "a",
+              N,
               {
                 href: e.href,
                 className: u,
@@ -175,58 +176,60 @@ function Y({
         })
       }
     ),
-    z && /* @__PURE__ */ f("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
+    L && /* @__PURE__ */ f("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
       /* @__PURE__ */ n(
         "div",
         {
-          className: "absolute inset-0 bg-[var(--Primitive-Black-alpha-1000)]/40",
-          onClick: () => C?.(!1)
+          className: "absolute inset-0 bg-[var(--Overlay-Medium)]",
+          onClick: () => R?.(!1)
         }
       ),
       /* @__PURE__ */ f(
         "nav",
         {
-          "aria-label": S,
+          "aria-label": E,
           className: "absolute left-0 top-0 h-full w-[280px] bg-[var(--Surface-Primary)] shadow-lg overflow-y-auto dark:bg-[var(--Primitive-Gray-900)]",
           children: [
             /* @__PURE__ */ f("div", { className: "flex items-center justify-between px-4 py-3", children: [
-              /* @__PURE__ */ n("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: H }),
+              /* @__PURE__ */ n("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: z }),
               /* @__PURE__ */ n(
                 "button",
                 {
-                  onClick: () => C?.(!1),
+                  onClick: () => R?.(!1),
                   className: "flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden",
                   "aria-label": "閉じる",
-                  children: /* @__PURE__ */ n(j, { className: "size-5" })
+                  children: /* @__PURE__ */ n(G, { className: "size-5" })
                 }
               )
             ] }),
             v.map((e) => {
-              const l = M === e.key, h = !!e.subMenus && e.subMenus.length > 0;
+              const l = w === e.key, h = !!e.subMenus && e.subMenus.length > 0;
               return /* @__PURE__ */ f("div", { children: [
                 (() => {
-                  const u = A(
+                  const u = F(
                     "flex w-full items-center gap-3 px-4 py-3 transition-colors",
                     l ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]" : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
-                  ), m = /* @__PURE__ */ f(T, { children: [
-                    F(e.icon, { active: l, placement: "drawer" }),
+                  ), m = /* @__PURE__ */ f(S, { children: [
+                    H(e.icon, { active: l, placement: "drawer" }),
                     /* @__PURE__ */ n("span", { className: "typo-label-md", children: e.label }),
-                    h && /* @__PURE__ */ n(L, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
+                    h && /* @__PURE__ */ n(B, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
                   ] });
                   return e.href ? /* @__PURE__ */ n(
-                    "a",
+                    N,
                     {
                       href: e.href,
                       className: u,
                       "aria-current": l ? "page" : void 0,
+                      onClick: () => R?.(!1),
                       children: m
                     }
                   ) : /* @__PURE__ */ n("button", { type: "button", className: u, children: m });
                 })(),
                 h && /* @__PURE__ */ n("div", { className: "bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((u) => /* @__PURE__ */ n(
-                  "a",
+                  N,
                   {
                     href: u.href,
+                    onClick: () => R?.(!1),
                     className: "flex min-h-11 items-center px-12 py-2.5 typo-body-md text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
                     children: u.label
                   },
@@ -241,5 +244,5 @@ function Y({
   ] });
 }
 export {
-  Y as AdminSideNav
+  K as AdminSideNav
 };

package/dist/components/primitives/banner-carousel.js

@@ -1,54 +1,57 @@
-import { jsxs as r, jsx as a, Fragment as x } from "react/jsx-runtime";
+import { jsxs as r, jsx as a, Fragment as w } from "react/jsx-runtime";
 import "react";
 import { cn as e } from "../../lib/utils.js";
-import { SectionHeader as f } from "./section-header.js";
-const c = {
+import { SectionHeader as b } from "./section-header.js";
+const i = {
   sm: "w-[48vw] @md:w-[180px]",
   md: "w-[70vw] @md:w-[260px]",
   lg: "w-[85vw] @md:w-[320px]"
-}, w = {
+}, N = {
   "16/9": "aspect-[16/9]",
   "1/1": "aspect-[1/1]",
   "4/3": "aspect-[4/3]",
   "3/4": "aspect-[3/4]"
 };
-function j({
+function T({
   title: n,
-  subtitle: i,
-  moreHref: d,
-  moreLabel: p,
-  headerSize: m,
-  items: h,
-  aspectRatio: u = "16/9",
+  subtitle: d,
+  moreHref: p,
+  moreLabel: m,
+  headerSize: h,
+  items: u,
+  aspectRatio: v = "16/9",
   bannerSize: l = "md",
-  className: v
+  className: x,
+  linkComponent: c
 }) {
+  const f = c ?? "a";
   return /* @__PURE__ */ r(
     "section",
     {
       "data-slot": "banner-carousel",
-      className: e("py-4", v),
+      className: e("py-4", x),
       children: [
         /* @__PURE__ */ a(
-          f,
+          b,
           {
             title: n,
-            subtitle: i,
-            moreHref: d,
-            moreLabel: p,
-            size: m,
+            subtitle: d,
+            moreHref: p,
+            moreLabel: m,
+            size: h,
+            linkComponent: c,
             className: "px-4"
           }
         ),
         /* @__PURE__ */ r("div", { className: "flex gap-3 overflow-x-auto px-4 pb-2 scrollbar-hide mt-3", children: [
-          h.map((s, o) => {
-            const t = /* @__PURE__ */ r(x, { children: [
+          u.map((s, t) => {
+            const o = /* @__PURE__ */ r(w, { children: [
               /* @__PURE__ */ a(
                 "div",
                 {
                   className: e(
                     "overflow-hidden rounded-lg",
-                    w[u]
+                    N[v]
                   ),
                   children: /* @__PURE__ */ a(
                     "img",
@@ -64,26 +67,26 @@ function j({
               s.sublabel && /* @__PURE__ */ a("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: s.sublabel })
             ] });
             return s.href ? /* @__PURE__ */ a(
-              "a",
+              f,
               {
                 href: s.href,
                 className: e(
                   "group shrink-0",
-                  c[l]
+                  i[l]
                 ),
-                children: /* @__PURE__ */ a("div", { className: "transition-opacity duration-[var(--Motion-Duration-Fast)] group-hover:opacity-80", children: t })
+                children: /* @__PURE__ */ a("div", { className: "transition-opacity duration-[var(--Motion-Duration-Fast)] group-hover:opacity-80", children: o })
               },
-              o
+              t
             ) : /* @__PURE__ */ a(
               "div",
               {
                 className: e(
                   "shrink-0",
-                  c[l]
+                  i[l]
                 ),
-                children: t
+                children: o
               },
-              o
+              t
             );
           }),
           /* @__PURE__ */ a("div", { className: "shrink-0 w-4", "aria-hidden": "true" })
@@ -93,5 +96,5 @@ function j({
   );
 }
 export {
-  j as BannerCarousel
+  T as BannerCarousel
 };

package/dist/components/primitives/bottom-tab-bar.js

@@ -1,14 +1,15 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import "react";
 import { cn as a } from "../../lib/utils.js";
-import { NotificationBadge as d } from "./notification-badge.js";
-function x({
+import { NotificationBadge as b } from "./notification-badge.js";
+function h({
   className: n,
   items: s,
-  banner: t,
-  ...c
+  banner: o,
+  linkComponent: c,
+  ...i
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(
     "nav",
     {
       "data-slot": "bottom-tab-bar",
@@ -17,27 +18,27 @@ function x({
         "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)] pb-[env(safe-area-inset-bottom)] @md:hidden",
         n
       ),
-      ...c,
+      ...i,
       children: [
-        t && /* @__PURE__ */ r(
+        o && /* @__PURE__ */ r(
           "div",
           {
             "data-slot": "bottom-tab-bar-banner",
             className: "border-b border-[var(--Border-Low-Emphasis)]",
-            children: t
+            children: o
           }
         ),
         /* @__PURE__ */ r("div", { className: "flex h-[52px] items-center justify-around px-1 @sm:px-4", children: s.map((e) => {
-          const i = e.href ? "a" : "button", l = e.href ? { href: e.href } : { type: "button", onClick: e.onClick };
-          return /* @__PURE__ */ o(
-            i,
+          const l = e.href ? c ?? "a" : "button", d = e.href ? { href: e.href, onClick: e.onClick } : { type: "button", onClick: e.onClick };
+          return /* @__PURE__ */ t(
+            l,
             {
               className: a(
                 "relative flex flex-1 flex-col items-center gap-0.5 pb-1 pt-0.5 transition-colors min-w-0",
                 e.isActive ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-High-Emphasis)]"
               ),
               "aria-current": e.isActive ? "page" : void 0,
-              ...l,
+              ...d,
               children: [
                 /* @__PURE__ */ r(
                   "span",
@@ -47,7 +48,7 @@ function x({
                       e.isActive && "bg-[var(--Surface-Accent-Primary-Light)]"
                     ),
                     children: /* @__PURE__ */ r(
-                      d,
+                      b,
                       {
                         count: e.badgeCount,
                         size: "md",
@@ -77,5 +78,5 @@ function x({
   );
 }
 export {
-  x as BottomTabBar
+  h as BottomTabBar
 };