@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/primitives/sub-nav.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../lib/utils.js";
+function u({
+  className: s,
+  items: n,
+  variant: c = "text",
+  ...l
+}) {
+  return c === "chip" ? /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "sub-nav",
+      className: a(
+        "flex gap-2 overflow-x-auto px-4 py-2 scrollbar-hide",
+        s
+      ),
+      ...l,
+      children: n.map((r) => {
+        const o = r.href ? "a" : "button", t = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+        return /* @__PURE__ */ e(
+          o,
+          {
+            className: a(
+              "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
+              r.isActive ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
+            ),
+            ...t,
+            children: r.label
+          },
+          r.label
+        );
+      })
+    }
+  ) : /* @__PURE__ */ e(
+    "nav",
+    {
+      "data-slot": "sub-nav",
+      className: a(
+        "flex gap-4 overflow-x-auto border-b border-[var(--Border-Low-Emphasis)] px-4 scrollbar-hide",
+        s
+      ),
+      ...l,
+      children: n.map((r) => {
+        const o = r.href ? "a" : "button", t = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+        return /* @__PURE__ */ i(
+          o,
+          {
+            className: a(
+              "relative shrink-0 py-2.5 typo-label-md transition-colors",
+              r.isActive ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+            ),
+            ...t,
+            children: [
+              r.label,
+              r.isActive && /* @__PURE__ */ e("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" })
+            ]
+          },
+          r.label
+        );
+      })
+    }
+  );
+}
+export {
+  u as SubNav
+};

package/dist/components/primitives/tag.js

@@ -0,0 +1,57 @@
+import { jsxs as n } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const x = o(
+  "inline-flex items-center gap-1 rounded text-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] dark:bg-[var(--Surface-Tertiary)] dark:text-[var(--Text-High-Emphasis)] dark:ring-1 dark:ring-[var(--Border-Medium-Emphasis)]",
+        caution: "bg-[var(--Caution-Ultra-Light)] text-[var(--Text-Caution)] dark:bg-[var(--Text-Caution)]/20 dark:text-[var(--Text-Caution)]",
+        sale: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)]",
+        warning: "bg-[var(--Primitive-Wood-100)] text-[var(--Text-Warning)]",
+        info: "bg-[var(--Primitive-Sea-50)] text-[var(--Primitive-Sea-600)] dark:bg-[var(--Primitive-Sea-600)] dark:text-[var(--Primitive-White-alpha-1000)]",
+        "info-fill": "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
+        success: "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+        accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+        timesale: "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
+        berry: "bg-[var(--Primitive-Berry-700)] text-[var(--Text-on-Inverse)]",
+        coupon: "bg-[var(--Primitive-Sea-500)] text-[var(--Text-on-Inverse)]"
+      },
+      size: {
+        sm: "px-1.5 py-0.5 typo-label-xs",
+        md: "px-2 py-1 typo-label-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "sm"
+    }
+  }
+);
+function u({
+  className: a,
+  variant: r,
+  size: t,
+  icon: e,
+  children: i,
+  ...v
+}) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "data-slot": "tag",
+      className: s(x({ variant: r, size: t }), a),
+      ...v,
+      children: [
+        e,
+        i
+      ]
+    }
+  );
+}
+export {
+  u as Tag,
+  x as tagVariants
+};

package/dist/components/primitives/timeline.js

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import "react";
+import { cn as m } from "../../lib/utils.js";
+function h({
+  items: a,
+  ariaLabel: i = "タイムライン",
+  className: s,
+  ...n
+}) {
+  return a.length === 0 ? null : /* @__PURE__ */ e(
+    "ol",
+    {
+      "data-slot": "timeline",
+      "aria-label": i,
+      className: m("flex flex-col gap-4", s),
+      ...n,
+      children: a.map((t, l) => {
+        const c = l === a.length - 1;
+        return /* @__PURE__ */ r(
+          "li",
+          {
+            "data-slot": "timeline-item",
+            className: "relative grid grid-cols-[48px_minmax(0,1fr)] items-start gap-4",
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  "data-slot": "timeline-marker",
+                  className: "relative z-10 flex w-12 justify-center",
+                  children: t.marker ?? /* @__PURE__ */ e("span", { className: "grid size-10 place-items-center rounded-full bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)]", children: l + 1 })
+                }
+              ),
+              !c && /* @__PURE__ */ e(
+                "span",
+                {
+                  "data-slot": "timeline-connector",
+                  "aria-hidden": "true",
+                  className: "absolute -bottom-4 left-6 top-12 w-px bg-[var(--Border-Medium-Emphasis)]"
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-col gap-2", children: [
+                /* @__PURE__ */ e("div", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: t.title }),
+                t.children
+              ] })
+            ]
+          },
+          l
+        );
+      })
+    }
+  );
+}
+export {
+  h as Timeline
+};

package/dist/components/primitives/workspace-shell.js

@@ -0,0 +1,57 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as p } from "../../lib/utils.js";
+import { SkipLink as g } from "../foundations/skip-link.js";
+import { Header as h } from "./header.js";
+import { Container as v } from "./container.js";
+function b({
+  title: o,
+  onBack: s,
+  backLabel: n = "戻る",
+  primaryAction: d,
+  sectionNav: a,
+  asidePanel: e,
+  children: i,
+  className: m,
+  mainId: l = "main-content",
+  skipLink: t,
+  headerLayout: f = "start"
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "workspace-shell",
+      className: p(
+        // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+        // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
+        "@container min-h-screen bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+        m
+      ),
+      children: [
+        t !== !1 && /* @__PURE__ */ r(g, { href: `#${l}` }),
+        /* @__PURE__ */ r(
+          h,
+          {
+            variant: "back",
+            title: o,
+            onBack: s,
+            backLabel: n,
+            rightSlot: d,
+            className: f === "center" ? "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]" : void 0
+          }
+        ),
+        /* @__PURE__ */ r("main", { id: l, children: /* @__PURE__ */ r(v, { size: "page", className: "py-4 @md:py-6", children: a || e ? (
+          // 2カラム化は @lg（960）で行う。aside 320px を食っても本文が窮屈にならない幅に達してから。
+          /* @__PURE__ */ c("div", { className: "flex flex-col gap-4 @lg:flex-row @lg:gap-6", children: [
+            a && /* @__PURE__ */ r("aside", { className: "@container hidden @lg:block @lg:w-64 @lg:shrink-0", children: /* @__PURE__ */ r("div", { className: "@lg:sticky @lg:top-20 overflow-hidden rounded-2xl border border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] [&_[data-slot=side-nav]]:w-full [&_[data-slot=side-nav]]:border-r-0", children: a }) }),
+            /* @__PURE__ */ r("div", { className: "@container min-w-0 flex-1", children: i }),
+            e && /* @__PURE__ */ r("aside", { className: "@container @lg:w-80 @lg:shrink-0", children: /* @__PURE__ */ r("div", { className: "@lg:sticky @lg:top-20 space-y-4", children: e }) })
+          ] })
+        ) : i }) })
+      ]
+    }
+  );
+}
+export {
+  b as WorkspaceShell
+};