@cakejp/design-system 0.17.1 → 0.19.0

package/dist/components/foundations/tabs.js

@@ -1,13 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "react";
-import { cva as o } from "class-variance-authority";
+import { cva as n } from "class-variance-authority";
 import { Tabs as e } from "radix-ui";
 import { cn as i } from "../../lib/utils.js";
-function c({
+function v({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Root,
     {
       "data-slot": "tabs",
@@ -16,7 +16,7 @@ function c({
     }
   );
 }
-const n = o(
+const b = n(
   "group/tabs-list inline-flex items-center",
   {
     variants: {
@@ -26,37 +26,51 @@ const n = o(
       },
       scrollable: {
         true: "gap-4"
+      },
+      /**
+       * 狭い置き場所（サイドバー等）向けの詰め設定。
+       * segment の 1 項目あたりの最小幅（100px）を外し、左右の padding を詰める（issue #235）。
+       */
+      size: {
+        md: "",
+        sm: ""
       }
     },
+    compoundVariants: [
+      { variant: "segment", size: "sm", class: "p-1" }
+    ],
     defaultVariants: {
       variant: "underbar",
-      scrollable: !1
+      scrollable: !1,
+      size: "md"
     }
   }
 );
-function v({
+function m({
   className: t,
   variant: a = "underbar",
-  scrollable: s = !1,
-  ...l
+  scrollable: r = !1,
+  size: l = "md",
+  ...o
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.List,
     {
       "data-slot": "tabs-list",
       "data-variant": a,
-      "data-scrollable": s || void 0,
-      className: i(n({ variant: a, scrollable: s }), t),
-      ...l
+      "data-scrollable": r || void 0,
+      "data-size": l,
+      className: i(b({ variant: a, scrollable: r, size: l }), t),
+      ...o
     }
   );
 }
-function m({
+function x({
   className: t,
   children: a,
-  ...s
+  ...r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Trigger,
     {
       "data-slot": "tabs-trigger",
@@ -64,19 +78,25 @@ function m({
         // Base
         "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         // Underbar variant (default: equal-width tabs with full-width underline)
-        "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
+        // px-2: 均等割りで幅が詰まったとき、隣のラベルと文字が接触しないための最小余白（issue #235）
+        "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:px-2 group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
         // Underbar active
         "group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[var(--Text-High-Emphasis)] group-data-[variant=underbar]/tabs-list:data-[state=active]:text-[var(--Text-High-Emphasis)]",
         // Scrollable underbar: shrink to text width, bold text, remove trigger border (underline moves to inner span)
-        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
+        // gap-4 で間隔を取っているので左右 padding は戻す（従来の間隔を保つ）
+        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:!px-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
         // Segment variant
         "group-data-[variant=segment]/tabs-list:h-[37px] group-data-[variant=segment]/tabs-list:min-w-[100px] group-data-[variant=segment]/tabs-list:rounded-full group-data-[variant=segment]/tabs-list:px-3 group-data-[variant=segment]/tabs-list:typo-body-md group-data-[variant=segment]/tabs-list:text-[var(--Text-High-Emphasis)]",
+        // size="sm": 狭い置き場所（サイドバー等）向け。1 項目あたりの最小幅を外し、
+        // 左右の padding を詰める。min-w を持つのは segment だけ、underbar の px-2 は同値なので
+        // 実際に効くのは segment。variant 側の group-data と具体度が並ぶため ! で順序依存を断つ（issue #235）
+        "group-data-[size=sm]/tabs-list:!min-w-0 group-data-[size=sm]/tabs-list:!px-2",
         // Segment active
         "group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[var(--Surface-Primary)] group-data-[variant=segment]/tabs-list:data-[state=active]:shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
         t
       ),
-      ...s,
-      children: /* @__PURE__ */ r("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
+      ...r,
+      children: /* @__PURE__ */ s("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
     }
   );
 }
@@ -84,7 +104,7 @@ function f({
   className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     e.Content,
     {
       "data-slot": "tabs-content",
@@ -94,9 +114,9 @@ function f({
   );
 }
 export {
-  c as Tabs,
+  v as Tabs,
   f as TabsContent,
-  v as TabsList,
-  m as TabsTrigger,
-  n as tabsListVariants
+  m as TabsList,
+  x as TabsTrigger,
+  b as tabsListVariants
 };

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

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as i } 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 p = l(
+const c = l(
   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
   {
     variants: {
@@ -17,7 +18,7 @@ const p = l(
       width: "fit"
     }
   }
-), c = l(
+), p = l(
   [
     "inline-flex shrink-0 items-center justify-center",
     "h-9 rounded-full px-3",
@@ -70,7 +71,7 @@ function h({
     d.Root,
     {
       "data-slot": "toggle-group",
-      className: g(p({ width: o }), a),
+      className: g(c({ width: o }), a),
       ...t,
       children: /* @__PURE__ */ i(u.Provider, { value: { variant: e, size: r }, children: n })
     }
@@ -89,7 +90,7 @@ function b({
     {
       "data-slot": "toggle-group-item",
       className: g(
-        c({
+        p({
           variant: t.variant || r,
           size: t.size || o
         }),
@@ -103,5 +104,5 @@ function b({
 export {
   h as ToggleGroup,
   b as ToggleGroupItem,
-  c as toggleGroupItemVariants
+  p as toggleGroupItemVariants
 };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as s, Fragment as c, jsx as r } from "react/jsx-runtime";
 import * as b from "react";
 import y from "iconsax-reactjs/dist/esm/ArrowDown2.js";

package/dist/components/primitives/chat-composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as w, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import { SendHorizontal as q } from "lucide-react";

package/dist/components/primitives/combobox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import * as w from "react";
 import { ChevronsUpDown as N, Check as j } from "lucide-react";

package/dist/components/primitives/content-card.js

@@ -0,0 +1,111 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import "react";
+import { cn as s } from "../../lib/utils.js";
+import { FOCUS_RING as v } from "../../lib/focus-ring.js";
+import { resolveLinkComponent as h } from "../../lib/link-component.js";
+import { Tag as u } from "./tag.js";
+const x = {
+  "16/10": "aspect-[16/10]",
+  "16/9": "aspect-[16/9]",
+  "1/1": "aspect-[1/1]"
+}, w = {
+  vertical: "flex-col gap-2",
+  horizontal: "flex-row items-start gap-3",
+  list: "flex-row-reverse items-start gap-3"
+}, g = {
+  vertical: "w-full",
+  horizontal: "w-28 shrink-0",
+  list: "w-24 shrink-0"
+};
+function k({
+  className: a,
+  title: e,
+  href: c,
+  imageSlot: i,
+  tag: r,
+  meta: n,
+  orientation: o = "vertical",
+  aspect: d = "16/10",
+  linkComponent: m,
+  ...p
+}) {
+  const f = h(m);
+  return /* @__PURE__ */ l(
+    f,
+    {
+      "data-slot": "content-card",
+      "data-orientation": o,
+      href: c,
+      className: s(
+        "group flex rounded-lg bg-[var(--card-surface,var(--Surface-Primary))]",
+        w[o],
+        v,
+        a
+      ),
+      ...p,
+      children: [
+        i && /* @__PURE__ */ l(
+          "div",
+          {
+            "data-slot": "content-card-media",
+            className: s(
+              "relative overflow-hidden rounded-lg",
+              x[d],
+              g[o]
+            ),
+            children: [
+              /* @__PURE__ */ t("div", { className: "h-full w-full transition-transform duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] group-hover:scale-[1.02]", children: i }),
+              r && /* @__PURE__ */ t(
+                u,
+                {
+                  variant: r.variant,
+                  className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] overflow-hidden text-ellipsis",
+                  children: r.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "content-card-title",
+              className: "line-clamp-2 min-h-[2lh] typo-body-md font-medium text-[var(--Text-High-Emphasis)]",
+              children: e
+            }
+          ),
+          n && /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "content-card-meta",
+              className: "mt-auto truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]",
+              children: n
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function M({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "content-list",
+      className: s(
+        "flex flex-col divide-y divide-[var(--Border-Low-Emphasis)]",
+        "[&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0",
+        a
+      ),
+      ...e
+    }
+  );
+}
+export {
+  k as ContentCard,
+  M as ContentList
+};

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as v, jsx as a, Fragment as z } from "react/jsx-runtime";
 import * as s from "react";
 import F from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
@@ -13,16 +14,16 @@ function M({
   slides: c,
   showDots: b = !0,
   showArrows: y = !0,
-  autoPlay: d = 0,
+  autoPlay: u = 0,
   peek: p = !1,
   itemsPerView: f = 1,
   ariaLabel: g = "コンテンツカルーセル",
   className: w,
   ...E
 }) {
-  const u = s.useRef(null), [o, I] = s.useState(0), t = c.length;
+  const d = s.useRef(null), [o, I] = s.useState(0), t = c.length;
   s.useEffect(() => {
-    const r = u.current;
+    const r = d.current;
     if (!r) return;
     let e = 0;
     const n = () => {
@@ -42,18 +43,18 @@ function M({
     };
   }, [t]);
   function l(r) {
-    const e = u.current;
+    const e = d.current;
     if (!e) return;
     const n = e.children[r];
     n && e.scrollTo({ left: n.offsetLeft, behavior: "smooth" });
   }
   s.useEffect(() => {
-    if (d <= 0 || t <= 1) return;
+    if (u <= 0 || t <= 1) return;
     const r = setInterval(() => {
       l((o + 1) % t);
-    }, d);
+    }, u);
     return () => clearInterval(r);
-  }, [d, o, t]);
+  }, [u, o, t]);
   function N() {
     l(o <= 0 ? t - 1 : o - 1);
   }
@@ -73,7 +74,7 @@ function M({
         /* @__PURE__ */ a(
           "div",
           {
-            ref: u,
+            ref: d,
             className: i(
               "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
               p && "pl-4 @[960px]:pl-0",

package/dist/components/primitives/date-picker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import * as y from "react";
 import v from "iconsax-reactjs/dist/esm/Calendar.js";
@@ -24,12 +25,12 @@ function _({
   max: l,
   disabledDates: p,
   disabled: c,
-  clearable: f = !1,
-  clearLabel: u = "日付をクリア",
+  clearable: u = !1,
+  clearLabel: f = "日付をクリア",
   id: g,
   className: b
 }) {
-  const [m, h] = y.useState(!1), d = V(a, l, p), t = f && !!e && !c;
+  const [m, h] = y.useState(!1), d = V(a, l, p), t = u && !!e && !c;
   return (
     // クリアボタンは trigger の「兄弟」として絶対配置する。trigger の内側に置くと
     // button の入れ子になり a11y 上不正（Chip removable と同じ解決）。
@@ -76,7 +77,7 @@ function _({
           type: "button",
           variant: "ghost",
           size: "icon-sm",
-          "aria-label": u,
+          "aria-label": f,
           onClick: () => o?.(void 0),
           className: "absolute top-1/2 right-1 -translate-y-1/2 text-[var(--Text-Medium-Emphasis)]",
           children: /* @__PURE__ */ r(H, { className: "size-4" })
@@ -93,8 +94,8 @@ function Y({
   minuteLabel: l = "分",
   clearLabel: p = "日時をクリア",
   disabled: c,
-  className: f,
-  ...u
+  className: u,
+  ...f
 }) {
   const g = y.useMemo(
     () => Array.from({ length: 24 }, (t, i) => i),
@@ -122,11 +123,11 @@ function Y({
       e.getMilliseconds()
     ), o?.(i);
   }, d = c || !e;
-  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", f), children: [
+  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", u), children: [
     /* @__PURE__ */ r(
       _,
       {
-        ...u,
+        ...f,
         value: e,
         onChange: h,
         disabled: c,