@cakejp/design-system 0.20.0 → 0.21.0

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

@@ -1,157 +1,177 @@
 "use client";
-import { jsxs as y, jsx as t, Fragment as T } from "react/jsx-runtime";
-import * as l from "react";
-import k from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import C from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as o } from "../../lib/utils.js";
-function B({
-  images: c,
-  aspectRatio: i = "banner",
-  showDots: N = !0,
-  showArrows: w = !0,
-  autoPlay: u = 0,
-  peek: x = !1,
-  pcSlidesPerView: d = 1,
-  centeredSlides: h = !1,
+import { jsxs as C, jsx as t, Fragment as M } from "react/jsx-runtime";
+import * as n from "react";
+import q from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import B from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as l } from "../../lib/utils.js";
+import { FOCUS_RING_ONLY as G } from "../../lib/focus-ring.js";
+import { usePrefersReducedMotion as _ } from "../../lib/use-prefers-reduced-motion.js";
+function J({
+  images: x,
+  aspectRatio: v = "banner",
+  showDots: E = !0,
+  showArrows: z = !0,
+  autoPlay: h = 0,
+  peek: c = !1,
+  pcSlidesPerView: u = 1,
+  centeredSlides: d = !1,
+  linkComponent: L,
   className: j,
-  ...z
+  ...A
 }) {
-  const p = l.useRef(null), [s, E] = l.useState(0), a = c.length, b = i === "square" ? "aspect-square" : i === "video" ? "aspect-video" : i === "ogp" ? "aspect-[1.91/1]" : "aspect-[311/162.5]";
-  l.useEffect(() => {
-    const r = p.current;
-    if (!r) return;
-    const e = new IntersectionObserver(
-      (m) => {
-        for (const v of m)
-          if (v.isIntersecting) {
-            const g = Number(
-              v.target.dataset.index
-            );
-            Number.isNaN(g) || E(g);
-          }
-      },
-      { root: r, threshold: 0.6 }
-    );
-    return r.querySelectorAll("[data-slide]").forEach((m) => e.observe(m)), () => e.disconnect();
-  }, [a]);
-  function n(r) {
+  const O = L ?? "a", p = n.useRef(null), [s, T] = n.useState(0), f = _(), a = x.length, g = v === "square" ? "aspect-square" : v === "video" ? "aspect-video" : v === "ogp" ? "aspect-[1.91/1]" : "aspect-[311/162.5]";
+  n.useEffect(() => {
     const e = p.current;
     if (!e) return;
-    const f = e.children[r];
-    f && e.scrollTo({ left: f.offsetLeft, behavior: "smooth" });
-  }
-  l.useEffect(() => {
-    if (u <= 0 || a <= 1) return;
-    const r = setInterval(() => {
-      n((s + 1) % a);
-    }, u);
-    return () => clearInterval(r);
-  }, [u, s, a]);
-  function I() {
-    n(s <= 0 ? a - 1 : s - 1);
-  }
-  function S() {
-    n(s >= a - 1 ? 0 : s + 1);
+    let r = 0;
+    const o = () => {
+      cancelAnimationFrame(r), r = requestAnimationFrame(() => {
+        const y = Array.from(e.querySelectorAll("[data-slide]")), S = y[0]?.offsetLeft ?? 0;
+        let N = 0, w = Number.POSITIVE_INFINITY;
+        y.forEach((R, k) => {
+          const I = Math.abs(R.offsetLeft - S - e.scrollLeft);
+          I < w && (w = I, N = k);
+        }), T(N);
+      });
+    };
+    o(), e.addEventListener("scroll", o, { passive: !0 });
+    const i = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(o);
+    return i?.observe(e), () => {
+      cancelAnimationFrame(r), e.removeEventListener("scroll", o), i?.disconnect();
+    };
+  }, [a]);
+  const m = n.useCallback(
+    (e) => {
+      const r = p.current;
+      if (!r) return;
+      const o = r.children[e], i = r.children[0];
+      o && i && r.scrollTo({
+        left: o.offsetLeft - i.offsetLeft,
+        behavior: f ? "auto" : "smooth"
+      });
+    },
+    [f]
+  ), b = n.useCallback(() => {
+    const e = p.current, r = e ? e.scrollLeft >= e.scrollWidth - e.clientWidth - 1 : !1;
+    m(s >= a - 1 || r ? 0 : s + 1);
+  }, [s, a, m]);
+  n.useEffect(() => {
+    if (f || h <= 0 || a <= 1) return;
+    const e = setInterval(b, h);
+    return () => clearInterval(e);
+  }, [h, a, f, b]);
+  function F() {
+    m(s <= 0 ? a - 1 : s - 1);
   }
-  return a === 0 ? null : /* @__PURE__ */ y(
+  return a === 0 ? null : /* @__PURE__ */ C(
     "div",
     {
       "data-slot": "image-carousel",
-      className: o("@container group/carousel relative", j),
-      ...z,
+      className: l("@container group/carousel relative", j),
+      ...A,
       children: [
         /* @__PURE__ */ t(
           "div",
           {
             ref: p,
             tabIndex: 0,
-            className: o(
-              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
-              "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
-              x && "pl-4 @[960px]:pl-0",
+            className: l(
+              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
+              `focus-visible:outline-none ${G}`,
+              // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
+              // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
+              // スナップ後も端の余白が消えないようにする。PC (@[960px]:) では peek しないので外す
+              c && "-mx-[var(--Container-Gutter,0px)] gap-3 px-[var(--Container-Gutter,16px)] scroll-px-[var(--Container-Gutter,16px)] @[960px]:mx-0 @[960px]:px-0 @[960px]:scroll-px-0",
+              c && u === 1 && "@[960px]:gap-0",
+              // peek + centeredSlides: タブレットでは centeredSlides の左右の余白に任せ、はみ出しを外す
+              c && d && "@[768px]:mx-0 @[768px]:scroll-px-0",
               // タブレット centeredSlides: コンテナに px-[22.25%] を付与し
               // flex item の w-full が自動で ~426px になる（768px の 55.5%）
               // @[768px]: と @[960px]: は数値指定で CSS 出力順が保証されるため
               // 960px+ では @[960px]:px-0 が必ず上書きする
-              h && "@[768px]:px-[22.25%] @[960px]:px-0 @[768px]:gap-4",
+              d && "@[768px]:px-[22.25%] @[960px]:px-0 @[768px]:gap-4",
               // PC 複数枚表示時のスライド間ギャップ（本番 spaceBetween:24 準拠）
               // cascade: @[960px]:gap-6 > @[768px]:gap-4 at 960px+
-              d > 1 && "@[960px]:gap-6"
+              u > 1 && "@[960px]:gap-6"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-            children: c.map((r, e) => /* @__PURE__ */ t(
+            children: x.map((e, r) => /* @__PURE__ */ t(
               "div",
               {
                 "data-slide": !0,
-                "data-index": e,
-                className: o(
+                "data-index": r,
+                className: l(
                   "shrink-0 snap-start",
                   // centeredSlides: タブレットで snap-center、PC で snap-start に戻す
-                  h && "@[768px]:snap-center @[960px]:snap-start",
-                  x ? d > 1 ? "w-[calc(100%-48px)] pr-3 @[960px]:w-[calc((100%-48px)/3)] @[960px]:pr-0" : "w-[calc(100%-48px)] pr-3 @[960px]:w-full @[960px]:pr-0" : d > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
+                  d && "@[768px]:snap-center @[960px]:snap-start",
+                  // peek + centeredSlides: タブレットは centeredSlides と同じく左右の余白の内側いっぱい
+                  c && d && "@[768px]:w-full",
+                  // peek: 端の余白 16px のとき、カード幅は導入前（全幅に置いた場合）と同じ「全幅 - 76px」。
+                  // スライドの間隔は scroller の gap-3
+                  c ? u > 1 ? "w-[calc(100%-44px)] @[960px]:w-[calc((100%-48px)/3)]" : "w-[calc(100%-44px)] @[960px]:w-full" : u > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
                 ),
-                children: r.href ? /* @__PURE__ */ t("a", { href: r.href, className: "block", children: /* @__PURE__ */ t(
+                children: e.href ? /* @__PURE__ */ t(O, { href: e.href, className: "block", children: /* @__PURE__ */ t(
                   "img",
                   {
-                    src: r.src,
-                    alt: r.alt,
-                    loading: e === 0 ? "eager" : "lazy",
-                    className: o("w-full rounded-md object-cover @[960px]:rounded-lg", b)
+                    src: e.src,
+                    alt: e.alt,
+                    loading: r === 0 ? "eager" : "lazy",
+                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", g)
                   }
                 ) }) : /* @__PURE__ */ t(
                   "img",
                   {
-                    src: r.src,
-                    alt: r.alt,
-                    loading: e === 0 ? "eager" : "lazy",
-                    className: o("w-full rounded-md object-cover @[960px]:rounded-lg", b)
+                    src: e.src,
+                    alt: e.alt,
+                    loading: r === 0 ? "eager" : "lazy",
+                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", g)
                   }
                 )
               },
-              e
+              r
             ))
           }
         ),
-        w && a > 1 && /* @__PURE__ */ y(T, { children: [
+        z && a > 1 && /* @__PURE__ */ C(M, { children: [
           /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: I,
+              onClick: F,
               "aria-label": "前へ",
-              className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ t(k, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ t(q, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           ),
           /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: S,
+              onClick: b,
               "aria-label": "次へ",
-              className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ t(C, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ t(B, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           )
         ] }),
-        N && a > 1 && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: c.map((r, e) => /* @__PURE__ */ t(
+        E && a > 1 && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: x.map((e, r) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: () => n(e),
-            "aria-label": `スライド ${e + 1}`,
-            className: o(
+            onClick: () => m(r),
+            "aria-label": `スライド ${r + 1}`,
+            className: l(
               // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
               "size-2 shrink-0 rounded-full transition-colors",
-              e === s ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+              r === s ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
             )
           },
-          e
+          r
         )) })
       ]
     }
   );
 }
 export {
-  B as ImageCarousel
+  J as ImageCarousel
 };

package/dist/components/primitives/image-gallery.js

@@ -1,38 +1,43 @@
 "use client";
-import { jsxs as n, jsx as t, Fragment as b } from "react/jsx-runtime";
-import * as x from "react";
-import y from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import g from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { jsxs as n, jsx as t, Fragment as g } from "react/jsx-runtime";
+import * as i from "react";
+import w from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import N from "iconsax-reactjs/dist/esm/ArrowRight2.js";
 import { cn as o } from "../../lib/utils.js";
-function P({
+import { reconcileImageIndex as k } from "../../lib/image-index.js";
+function z({
   images: r,
   alts: c,
-  aspectRatio: h = "square",
-  showThumbnails: f = !1,
-  showDots: m = !0,
-  layout: v = "default",
-  className: i,
+  aspectRatio: p = "square",
+  showThumbnails: v = !1,
+  showDots: b = !0,
+  layout: x = "default",
+  className: u,
   ...d
 }) {
-  const [a, p] = x.useState(0);
-  if (r.length === 0) return null;
-  const s = (l) => {
+  const [y, h] = i.useState(0), f = i.useRef(r);
+  if (i.useEffect(() => {
+    h(
+      (l) => k(f.current, r, l)
+    ), f.current = r;
+  }, [r]), r.length === 0) return null;
+  const a = Math.min(y, r.length - 1), s = (l) => {
     const e = (l % r.length + r.length) % r.length;
-    e !== a && p(e);
-  }, u = {
+    e !== a && h(e);
+  }, m = {
     square: "aspect-square",
     "4:3": "aspect-[4/3]",
     "16:9": "aspect-video",
     auto: ""
-  }[h];
-  return v === "pc-detail" ? /* @__PURE__ */ n(
+  }[p];
+  return x === "pc-detail" ? /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "image-gallery",
-      className: o("flex flex-row-reverse gap-6", i),
+      className: o("flex flex-row-reverse gap-6", u),
       ...d,
       children: [
-        /* @__PURE__ */ n("div", { className: o("relative min-w-0 grow overflow-hidden rounded-lg", u), children: [
+        /* @__PURE__ */ n("div", { className: o("relative min-w-0 grow overflow-hidden rounded-lg", m), children: [
           /* @__PURE__ */ t(
             "div",
             {
@@ -82,10 +87,10 @@ function P({
     "div",
     {
       "data-slot": "image-gallery",
-      className: o("space-y-2", i),
+      className: o("space-y-2", u),
       ...d,
       children: [
-        /* @__PURE__ */ n("div", { className: o("relative w-full overflow-hidden", u), children: [
+        /* @__PURE__ */ n("div", { className: o("relative w-full overflow-hidden", m), children: [
           /* @__PURE__ */ t(
             "div",
             {
@@ -102,7 +107,7 @@ function P({
               ))
             }
           ),
-          r.length > 1 && /* @__PURE__ */ n(b, { children: [
+          r.length > 1 && /* @__PURE__ */ n(g, { children: [
             /* @__PURE__ */ t(
               "button",
               {
@@ -110,7 +115,7 @@ function P({
                 className: "absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
                 onClick: () => s(a - 1),
                 "aria-label": "前の画像",
-                children: /* @__PURE__ */ t(y, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+                children: /* @__PURE__ */ t(w, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
               }
             ),
             /* @__PURE__ */ t(
@@ -120,7 +125,7 @@ function P({
                 className: "absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
                 onClick: () => s(a + 1),
                 "aria-label": "次の画像",
-                children: /* @__PURE__ */ t(g, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+                children: /* @__PURE__ */ t(N, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
               }
             )
           ] }),
@@ -130,7 +135,7 @@ function P({
             r.length
           ] })
         ] }),
-        m && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-center gap-0.5", children: r.map((l, e) => /* @__PURE__ */ t(
+        b && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-center gap-0.5", children: r.map((l, e) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -149,7 +154,7 @@ function P({
           },
           e
         )) }),
-        f && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
+        v && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -174,5 +179,5 @@ function P({
   );
 }
 export {
-  P as ImageGallery
+  z as ImageGallery
 };

package/dist/components/primitives/image-uploader.js

@@ -1,23 +1,25 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import "react";
-import { cn as m } from "../../lib/utils.js";
-import p from "iconsax-reactjs/dist/esm/Add.js";
-import u from "iconsax-reactjs/dist/esm/Trash.js";
-function g({
+import { cn as o } from "../../lib/utils.js";
+import { FOCUS_RING_INSET as p } from "../../lib/focus-ring.js";
+import { Button as v } from "../foundations/button.js";
+import u from "iconsax-reactjs/dist/esm/Add.js";
+import h from "iconsax-reactjs/dist/esm/Trash.js";
+function z({
   images: i = [],
   onAdd: s,
   onRemove: l,
-  maxImages: o = 10,
-  columns: c = 4,
-  className: n
+  maxImages: n = 10,
+  columns: d = 4,
+  className: c
 }) {
-  const d = i.length < o;
+  const m = i.length < n;
   return /* @__PURE__ */ t(
     "div",
     {
-      className: m("grid gap-3", n),
+      className: o("grid gap-3", c),
       style: {
-        gridTemplateColumns: `repeat(${Math.min(c, 4)}, minmax(0, 1fr))`
+        gridTemplateColumns: `repeat(${Math.min(d, 4)}, minmax(0, 1fr))`
       },
       "data-slot": "image-uploader",
       children: [
@@ -34,28 +36,47 @@ function g({
                   className: "absolute inset-0 size-full object-cover"
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-[var(--Primitive-Black-alpha-1000)]/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
-                "button",
+              /* @__PURE__ */ e(
+                "div",
                 {
-                  className: "size-8 rounded-full bg-[var(--Primitive-White-alpha-1000)]/80 flex items-center justify-center",
-                  "aria-label": `${r.alt}を削除`,
-                  onClick: () => l?.(a),
-                  children: /* @__PURE__ */ e(u, { size: 16, className: "text-[var(--Text-Caution)]" })
+                  "data-slot": "image-uploader-remove-overlay",
+                  className: o(
+                    "absolute inset-0 flex items-center justify-center bg-[var(--Surface-Overlay-Dark)] opacity-0 transition-opacity",
+                    "group-hover:opacity-100 group-focus-within:opacity-100",
+                    // タッチでは hover を待たず、写真を覆わない右上の操作として表示する。
+                    "[@media(hover:none)]:items-start [@media(hover:none)]:justify-end [@media(hover:none)]:bg-transparent [@media(hover:none)]:p-1 [@media(hover:none)]:opacity-100"
+                  ),
+                  children: /* @__PURE__ */ e(
+                    v,
+                    {
+                      type: "button",
+                      variant: "overlay",
+                      size: "icon-sm",
+                      className: "rounded-full [@media(hover:none)]:size-11",
+                      "aria-label": `${r.alt}を削除`,
+                      onClick: () => l?.(a),
+                      children: /* @__PURE__ */ e(h, { size: 16 })
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ e("div", { className: "absolute top-1 left-1 size-5 rounded bg-[var(--Primitive-Black-alpha-1000)]/60 text-[var(--Primitive-White-alpha-1000)] flex items-center justify-center typo-label-xs", children: a + 1 })
+              ),
+              /* @__PURE__ */ e("div", { className: "absolute top-1 left-1 size-5 rounded bg-[var(--Primitive-Gray-alpha-600)] text-[var(--Primitive-White-alpha-1000)] flex items-center justify-center typo-label-xs", children: a + 1 })
             ]
           },
           a
         )),
-        d && /* @__PURE__ */ t(
+        m && /* @__PURE__ */ t(
           "button",
           {
-            className: "aspect-square rounded-xl border-2 border-dashed border-[var(--Border-Medium-Emphasis)] flex flex-col items-center justify-center gap-1 hover:border-[var(--Border-Accent-Primary)] hover:bg-[var(--Surface-Accent-Primary-Light)] transition-colors",
+            type: "button",
+            className: o(
+              "aspect-square rounded-xl border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] flex flex-col items-center justify-center gap-1 hover:border-[var(--Border-Accent-Primary)] hover:bg-[var(--Surface-Accent-Primary-Light)] transition-colors",
+              p
+            ),
             onClick: s,
             "aria-label": "画像を追加",
             children: [
-              /* @__PURE__ */ e(p, { size: 24, className: "text-[var(--Text-Low-Emphasis)]" }),
+              /* @__PURE__ */ e(u, { size: 24, className: "text-[var(--Text-Low-Emphasis)]" }),
               /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Low-Emphasis)]", children: "追加" })
             ]
           }
@@ -65,5 +86,5 @@ function g({
   );
 }
 export {
-  g as ImageUploader
+  z as ImageUploader
 };

package/dist/components/primitives/list-item.js

@@ -1,78 +1,86 @@
 "use client";
-import { jsxs as x, Fragment as D, jsx as e } from "react/jsx-runtime";
-import * as L from "react";
-import K from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import F from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import { Switch as O } from "../foundations/switch.js";
-import { cn as g } from "../../lib/utils.js";
+import { jsxs as b, Fragment as H, jsx as e } from "react/jsx-runtime";
+import * as I from "react";
+import T from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import D from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { Switch as F } from "../foundations/switch.js";
+import { cn as p } from "../../lib/utils.js";
+import { FOCUS_RING_ONLY as K } from "../../lib/focus-ring.js";
+const R = "focus-visible:ring-inset forced-colors:focus-visible:-outline-offset-2", M = [
+  "group-focus-visible/list-item:ring-[3px] group-focus-visible/list-item:ring-inset group-focus-visible/list-item:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
+  "forced-colors:group-focus-visible/list-item:outline-solid forced-colors:group-focus-visible/list-item:outline-2 forced-colors:group-focus-visible/list-item:-outline-offset-2 forced-colors:group-focus-visible/list-item:outline-[Highlight]"
+].join(" ");
 function q({
-  title: p,
-  caption: o,
-  rightType: a = "arrow-right",
+  title: x,
+  caption: n,
+  rightType: o = "arrow-right",
   rightText: d,
-  badgeCount: m,
+  badgeCount: u,
   toggleChecked: y = !1,
-  onToggleChange: w,
+  onToggleChange: N,
   leftIcon: l,
-  leftImageUrl: n,
-  size: N = "sm",
+  leftImageUrl: a,
+  size: w = "sm",
   selected: k = !1,
-  showBorder: h = !0,
-  showBadgeDot: E = !1,
+  showBorder: f = !0,
+  showBadgeDot: S = !1,
   href: c,
-  className: S,
-  ...s
+  linkComponent: E,
+  className: C,
+  ...i
 }) {
-  const u = L.useId(), t = o ? "md" : !!(l || n) ? "lg" : N, v = !!c, r = !v && typeof s.onClick == "function", j = v || r, C = r ? (i) => {
-    s.onKeyDown?.(i), !i.defaultPrevented && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click());
-  } : s.onKeyDown, z = t === "lg" ? "min-h-16 py-4" : t === "md" ? "min-h-14 py-2" : "min-h-11 py-2", H = t === "lg" ? "typo-body-lg text-[var(--Text-High-Emphasis)]" : "typo-body-md text-[var(--Text-High-Emphasis)]", f = g(
+  const L = E ?? "a", h = I.useId(), r = n ? "md" : !!(l || a) ? "lg" : w, m = !!c, s = !m && typeof i.onClick == "function", _ = m || s, j = s ? (t) => {
+    i.onKeyDown?.(t), !t.defaultPrevented && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
+  } : i.onKeyDown, O = r === "lg" ? "min-h-16 py-4" : r === "md" ? "min-h-14 py-2" : "min-h-11 py-2", z = r === "lg" ? "typo-body-lg text-[var(--Text-High-Emphasis)]" : "typo-body-md text-[var(--Text-High-Emphasis)]", v = p(
     "relative flex w-full items-center gap-2 bg-[var(--Surface-Primary)] px-4 rounded-lg",
-    z,
+    O,
     k && "bg-[var(--Surface-Secondary)]",
-    j && "transition-colors hover:bg-[var(--Surface-Tertiary)]",
-    r && "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
-    S
-  ), b = /* @__PURE__ */ x(D, { children: [
-    n && /* @__PURE__ */ e("div", { className: "relative shrink-0 size-8 overflow-hidden rounded-[var(--radius-sm,4px)]", children: /* @__PURE__ */ e("img", { src: n, alt: "", className: "size-full object-cover" }) }),
-    l && !n && /* @__PURE__ */ e("div", { className: "shrink-0 size-5 flex items-center justify-center text-[var(--Object-High-Emphasis)]", children: l }),
-    /* @__PURE__ */ x("div", { className: "flex flex-1 min-w-0 flex-col gap-0", children: [
-      /* @__PURE__ */ e("span", { id: u, className: g("truncate", H), children: p }),
-      o && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: o })
+    _ && "transition-colors hover:bg-[var(--Surface-Tertiary)]",
+    s && `cursor-pointer focus-visible:outline-none ${K}`,
+    s && R,
+    m && M,
+    C
+  ), g = /* @__PURE__ */ b(H, { children: [
+    a && /* @__PURE__ */ e("div", { className: "relative shrink-0 size-8 overflow-hidden rounded-[var(--radius-sm,4px)]", children: /* @__PURE__ */ e("img", { src: a, alt: "", className: "size-full object-cover" }) }),
+    l && !a && /* @__PURE__ */ e("div", { className: "shrink-0 size-5 flex items-center justify-center text-[var(--Object-High-Emphasis)]", children: l }),
+    /* @__PURE__ */ b("div", { className: "flex flex-1 min-w-0 flex-col gap-0", children: [
+      /* @__PURE__ */ e("span", { id: h, className: p("truncate", z), children: x }),
+      n && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: n })
     ] }),
-    a === "arrow-right" && /* @__PURE__ */ e(K, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
-    a === "arrow-down" && /* @__PURE__ */ e(F, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
-    a === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
-    a === "badge" && m !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: m }),
-    a === "toggle" && /* @__PURE__ */ e(
-      O,
+    o === "arrow-right" && /* @__PURE__ */ e(T, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    o === "arrow-down" && /* @__PURE__ */ e(D, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
+    o === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
+    o === "badge" && u !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: u }),
+    o === "toggle" && /* @__PURE__ */ e(
+      F,
       {
         checked: y,
-        onCheckedChange: w,
-        "aria-labelledby": u,
+        onCheckedChange: N,
+        "aria-labelledby": h,
         className: "shrink-0"
       }
     ),
-    E && /* @__PURE__ */ e("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-[var(--Surface-Caution,#ec0000)]", "aria-hidden": !0 }),
-    h && t !== "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Secondary)]", "aria-hidden": !0 }),
-    h && t === "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Border-Medium-Emphasis)]", "aria-hidden": !0 })
+    S && /* @__PURE__ */ e("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-[var(--Surface-Caution,#ec0000)]", "aria-hidden": !0 }),
+    f && r !== "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Secondary)]", "aria-hidden": !0 }),
+    f && r === "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Border-Medium-Emphasis)]", "aria-hidden": !0 })
   ] });
   return c ? /* @__PURE__ */ e(
-    "a",
+    L,
     {
       href: c,
-      ...s,
-      className: "block rounded-lg focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
-      children: /* @__PURE__ */ e("div", { className: f, children: b })
+      ...i,
+      className: "group/list-item block rounded-lg outline-none",
+      children: /* @__PURE__ */ e("div", { className: v, children: g })
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: f,
-      ...s,
-      role: r ? "button" : s.role,
-      tabIndex: r ? 0 : s.tabIndex,
-      onKeyDown: C,
-      children: b
+      className: v,
+      ...i,
+      role: s ? "button" : i.role,
+      tabIndex: s ? 0 : i.tabIndex,
+      onKeyDown: j,
+      children: g
     }
   );
 }