@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/foundations/alert-dialog.js

@@ -0,0 +1,165 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { AlertDialog as o } from "radix-ui";
+import { cn as l } from "../../lib/utils.js";
+import { Button as d } from "./button.js";
+function x({
+  ...a
+}) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...a });
+}
+function D({
+  ...a
+}) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...a });
+}
+function n({
+  ...a
+}) {
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "alert-dialog-portal", ...a });
+}
+function g({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    o.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: l(
+        "fixed inset-0 z-[var(--Z-Overlay)] bg-[var(--Overlay-Medium)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function h({
+  className: a,
+  size: t = "default",
+  ...r
+}) {
+  return /* @__PURE__ */ s(n, { children: [
+    /* @__PURE__ */ e(g, {}),
+    /* @__PURE__ */ e(
+      o.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": t,
+        onOpenAutoFocus: (i) => i.preventDefault(),
+        className: l(
+          // 画面端との余白は上下左右 40px（calc(100%-5rem)）。
+          // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
+          // default=480px（テキスト確認が間延びしない幅）・sm=320px
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-background p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
+          a
+        ),
+        ...r
+      }
+    )
+  ] });
+}
+function v({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: l(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function A({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: l(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function z({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    o.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: l(
+        "typo-heading-lg text-[var(--Text-High-Emphasis)] sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function y({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    o.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: l("typo-body-md text-[var(--Text-Medium-Emphasis)]", a),
+      ...t
+    }
+  );
+}
+function w({
+  className: a,
+  variant: t = "default",
+  size: r = "default",
+  ...i
+}) {
+  return /* @__PURE__ */ e(d, { variant: t, size: r, asChild: !0, children: /* @__PURE__ */ e(
+    o.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className: l(a),
+      ...i
+    }
+  ) });
+}
+function N({
+  className: a,
+  variant: t = "tertiary",
+  size: r = "default",
+  ...i
+}) {
+  return /* @__PURE__ */ e(d, { variant: t, size: r, asChild: !0, children: /* @__PURE__ */ e(
+    o.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: l(a),
+      ...i
+    }
+  ) });
+}
+export {
+  x as AlertDialog,
+  w as AlertDialogAction,
+  N as AlertDialogCancel,
+  h as AlertDialogContent,
+  y as AlertDialogDescription,
+  A as AlertDialogFooter,
+  v as AlertDialogHeader,
+  g as AlertDialogOverlay,
+  n as AlertDialogPortal,
+  z as AlertDialogTitle,
+  D as AlertDialogTrigger
+};

package/dist/components/foundations/alert.js

@@ -0,0 +1,218 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as b from "react";
+import { cva as N } from "class-variance-authority";
+import g from "iconsax-reactjs/dist/esm/Warning2.js";
+import _ from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import j from "iconsax-reactjs/dist/esm/TickCircle.js";
+import E from "iconsax-reactjs/dist/esm/CloseCircle.js";
+import { cn as n } from "../../lib/utils.js";
+const p = N(
+  "relative w-full",
+  {
+    variants: {
+      variant: {
+        /** success — green border, green title, white bg */
+        success: [
+          "flex flex-col items-start overflow-clip rounded-lg",
+          "bg-[var(--Surface-Primary)]",
+          "shadow-[0_0_0_5px_rgba(31,204,132,0.2)]"
+        ].join(" "),
+        /** info — gray border, dark title, white bg */
+        info: [
+          "flex flex-col items-start overflow-clip rounded-lg",
+          "bg-[var(--Surface-Primary)]",
+          "shadow-[0_0_0_5px_rgba(216,216,219,0.3)]"
+        ].join(" "),
+        /** error — red border, red title, white bg */
+        error: [
+          "flex flex-col items-start overflow-clip rounded-lg",
+          "bg-[var(--Surface-Primary)]",
+          "shadow-[0_0_0_5px_rgba(236,0,0,0.15)]"
+        ].join(" "),
+        /** warning — orange/wood border, wood title, white bg */
+        warning: [
+          "flex flex-col items-start overflow-clip rounded-lg",
+          "bg-[var(--Surface-Primary)]",
+          "shadow-[0_0_0_5px_rgba(193,104,0,0.2)]"
+        ].join(" "),
+        /** inline-info — gray bg, no border, compact */
+        "inline-info": [
+          "flex gap-1 items-start rounded-sm",
+          "bg-[var(--Surface-Tertiary)]",
+          "px-3 py-2"
+        ].join(" "),
+        /** inline-caution — pink/red bg, no border, compact */
+        "inline-caution": [
+          "flex gap-1 items-start rounded-sm",
+          "bg-[var(--Surface-Caution-Light)]",
+          "px-3 py-2"
+        ].join(" "),
+        /** inline-warning — wood/yellow bg, no border, compact */
+        "inline-warning": [
+          "flex gap-1 items-start rounded-sm",
+          "bg-[var(--Surface-Warning)]",
+          "px-3 py-2"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+), y = N(
+  "flex w-full gap-2 items-start p-4 rounded-lg border",
+  {
+    variants: {
+      variant: {
+        success: "border-[var(--Focus-High-Emphasis)]",
+        info: "border-[var(--Border-Medium-Emphasis)]",
+        error: "border-[var(--Border-Caution)]",
+        warning: "border-[var(--Primitive-Wood-800)]",
+        "inline-info": "",
+        "inline-caution": "",
+        "inline-warning": ""
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+), s = b.createContext("info"), V = (i) => i === "success" || i === "info" || i === "error" || i === "warning", M = (i) => i === "inline-info" || i === "inline-caution" || i === "inline-warning", S = {
+  success: { Icon: j, color: "text-[var(--Text-Success)]" },
+  info: { Icon: _, color: "text-[var(--Text-Medium-Emphasis)]" },
+  error: { Icon: E, color: "text-[var(--Text-Caution)]" },
+  warning: { Icon: g, color: "text-[var(--Text-Warning)]" }
+}, W = {
+  "inline-info": { Icon: _, color: "text-[var(--Text-Medium-Emphasis)]" },
+  "inline-caution": { Icon: g, color: "text-[var(--Text-Caution)]" },
+  "inline-warning": { Icon: g, color: "text-[var(--Text-Warning)]" }
+};
+function L({
+  className: i,
+  variant: e = "info",
+  children: o,
+  title: t,
+  description: a,
+  icon: C,
+  action: l,
+  ...d
+}) {
+  const m = V(e), T = M(e), w = (m || T) && !o && (t || a);
+  if (w && m) {
+    const { Icon: x, color: f } = S[e], u = h[e] ?? "", v = C ?? /* @__PURE__ */ r(x, { size: 24, className: n("shrink-0", f) });
+    return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ r(
+      "div",
+      {
+        "data-slot": "alert",
+        "data-variant": e,
+        role: "alert",
+        className: n(p({ variant: e }), i),
+        ...d,
+        children: /* @__PURE__ */ c("div", { className: y({ variant: e }), children: [
+          v,
+          /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+            t && /* @__PURE__ */ r("div", { className: n("typo-label-md", u), children: t }),
+            a && /* @__PURE__ */ r("div", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-1", children: a })
+          ] }),
+          l && /* @__PURE__ */ r("div", { className: "shrink-0", children: l })
+        ] })
+      }
+    ) });
+  }
+  if (w && T) {
+    const { Icon: x, color: f } = W[e], u = h[e] ?? "", v = I[e] ?? "", P = C ?? /* @__PURE__ */ r(x, { size: 20, className: n("shrink-0", f) });
+    return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ c(
+      "div",
+      {
+        "data-slot": "alert",
+        "data-variant": e,
+        role: "alert",
+        className: n(p({ variant: e }), i),
+        ...d,
+        children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center py-[2.5px] shrink-0", children: P }),
+          /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col", children: [
+            t && /* @__PURE__ */ r("div", { className: n("typo-label-md", u), children: t }),
+            a && /* @__PURE__ */ r(
+              "div",
+              {
+                className: n(
+                  "typo-body-sm",
+                  v || "text-[var(--Text-Medium-Emphasis)]"
+                ),
+                children: a
+              }
+            )
+          ] }),
+          l && /* @__PURE__ */ r("div", { className: "shrink-0", children: l })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": e,
+      role: "alert",
+      className: n(p({ variant: e }), i),
+      ...d,
+      children: m ? /* @__PURE__ */ r("div", { className: y({ variant: e }), children: o }) : o
+    }
+  ) });
+}
+const h = {
+  success: "text-[var(--Primitive-Forest-800)]",
+  info: "text-[var(--Text-High-Emphasis)]",
+  error: "text-[var(--Text-Caution)]",
+  warning: "text-[var(--Text-Warning)]",
+  "inline-info": "text-[var(--Text-High-Emphasis)]",
+  "inline-caution": "text-[var(--Text-Caution)]",
+  "inline-warning": "text-[var(--Text-Warning)]"
+};
+function R({ className: i, ...e }) {
+  const o = b.useContext(s), t = h[o ?? "info"] ?? "";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: n(
+        "typo-label-md",
+        t,
+        i
+      ),
+      ...e
+    }
+  );
+}
+const I = {
+  error: "text-[var(--Text-Caution)]",
+  "inline-caution": "text-[var(--Text-Caution)]",
+  "inline-warning": "text-[var(--Text-Warning)]"
+};
+function q({
+  className: i,
+  ...e
+}) {
+  const o = b.useContext(s), t = I[o ?? ""] ?? "";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: n(
+        "typo-body-sm",
+        t || "text-[var(--Text-Medium-Emphasis)]",
+        i
+      ),
+      ...e
+    }
+  );
+}
+export {
+  L as Alert,
+  q as AlertDescription,
+  R as AlertTitle,
+  I as alertDescriptionVariants,
+  h as alertTitleVariants,
+  p as alertVariants
+};

package/dist/components/foundations/aspect-ratio.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AspectRatio as a } from "radix-ui";
+function p({
+  ...t
+}) {
+  return /* @__PURE__ */ o(a.Root, { "data-slot": "aspect-ratio", ...t });
+}
+export {
+  p as AspectRatio
+};

package/dist/components/foundations/avatar.js

@@ -0,0 +1,58 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { Avatar as r } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+function n({
+  className: a,
+  size: t = "default",
+  ...l
+}) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": t,
+      className: o(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        a
+      ),
+      ...l
+    }
+  );
+}
+function m({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Image,
+    {
+      "data-slot": "avatar-image",
+      className: o("aspect-square size-full overflow-hidden rounded-full", a),
+      ...t
+    }
+  );
+}
+function f({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: o(
+        // イニシャルは円径の 44% 前後を目安にする（小さすぎると字が円の中で泳ぐ）。
+        // sm=24px→10px(42%) / default=32px→14px(44%) / lg=40px→16px(40%)
+        "flex size-full items-center justify-center rounded-full bg-muted typo-body-md text-muted-foreground group-data-[size=sm]/avatar:typo-body-xs group-data-[size=lg]/avatar:typo-body-lg",
+        a
+      ),
+      ...t
+    }
+  );
+}
+export {
+  n as Avatar,
+  f as AvatarFallback,
+  m as AvatarImage
+};

package/dist/components/foundations/badge.js

@@ -0,0 +1,54 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { Slot as s } from "radix-ui";
+import { cn as v } from "../../lib/utils.js";
+const u = o(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 typo-label-sm whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        // ── 塗りつぶし（濃い背景 + 白文字） ──
+        default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Hover-Primary-Button)]",
+        destructive: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] focus-visible:ring-destructive/20 [a&]:hover:bg-destructive/90",
+        success: "bg-[var(--Primitive-Forest-600)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Primitive-Forest-700)]",
+        // ── サブトル（薄い背景 + 色文字）— ステータス表示用 ──
+        "info-subtle": "bg-[var(--Primitive-Sea-100)] text-[var(--Primitive-Sea-700)]",
+        "success-subtle": "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+        "accent-subtle": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
+        "caution-subtle": "bg-[var(--Surface-Caution-Light)] text-[var(--Text-Caution)]",
+        "warning-subtle": "bg-[var(--Surface-Warning)] text-[var(--Text-Warning)] border-[var(--Primitive-Wood-200)]",
+        "muted-subtle": "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
+        // ── 構造系 ──
+        secondary: "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Tertiary)]",
+        outline: "border-[var(--Border-Medium-Emphasis)] text-[var(--Text-High-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
+        ghost: "text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
+        link: "text-[var(--Brand-Cake-Orange)] underline-offset-4 [a&]:hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function m({
+  className: r,
+  variant: e = "default",
+  asChild: a = !1,
+  ...t
+}) {
+  const i = a ? s.Root : "span";
+  return /* @__PURE__ */ n(
+    i,
+    {
+      "data-slot": "badge",
+      "data-variant": e,
+      className: v(u({ variant: e }), r),
+      ...t
+    }
+  );
+}
+export {
+  m as Badge,
+  u as badgeVariants
+};

package/dist/components/foundations/breadcrumb.js

@@ -0,0 +1,104 @@
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { MoreHorizontal as i, ChevronRight as l } from "lucide-react";
+import { Slot as m } from "radix-ui";
+import { cn as t } from "../../lib/utils.js";
+function f({ ...r }) {
+  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
+}
+function g({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: t(
+        "flex flex-wrap items-center gap-1.5 typo-body-sm break-words text-muted-foreground sm:gap-2.5",
+        r
+      ),
+      ...e
+    }
+  );
+}
+function x({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: t("inline-flex items-center gap-1.5", r),
+      ...e
+    }
+  );
+}
+function h({
+  asChild: r,
+  className: e,
+  ...o
+}) {
+  const s = r ? m.Root : "a";
+  return /* @__PURE__ */ a(
+    s,
+    {
+      "data-slot": "breadcrumb-link",
+      className: t("transition-colors hover:text-foreground", e),
+      ...o
+    }
+  );
+}
+function N({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: t("typo-body-sm text-foreground", r),
+      ...e
+    }
+  );
+}
+function B({
+  children: r,
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("[&>svg]:size-3.5", e),
+      ...o,
+      children: r ?? /* @__PURE__ */ a(l, {})
+    }
+  );
+}
+function y({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("flex size-9 shrink-0 items-center justify-center", r),
+      ...e,
+      children: [
+        /* @__PURE__ */ a(i, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  f as Breadcrumb,
+  y as BreadcrumbEllipsis,
+  x as BreadcrumbItem,
+  h as BreadcrumbLink,
+  g as BreadcrumbList,
+  N as BreadcrumbPage,
+  B as BreadcrumbSeparator
+};