@cakejp/design-system 0.22.1 → 0.23.0

package/dist/components/ec/product-option.js

@@ -10,10 +10,10 @@ import { FOCUS_RING_ONLY as C, FORCED_COLORS_FOCUS as O } from "../../lib/focus-
 import { Button as h } from "../foundations/button.js";
 import { Input as B } from "../foundations/input.js";
 import { Label as T } from "../foundations/label.js";
-function j({
+function R({
   type: r,
-  label: i,
-  required: t = !1,
+  label: t,
+  required: i = !1,
   price: a,
   helpText: o,
   error: s,
@@ -37,10 +37,10 @@ function j({
       children: [
         /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ l(T, { id: `${c}-label`, className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
-            i,
-            t && /* @__PURE__ */ e("span", { className: "ml-1 text-[var(--Text-Caution)]", "aria-hidden": "true", children: "*" })
+            t,
+            i && /* @__PURE__ */ e("span", { className: "ml-1 text-[var(--Text-Caution)]", "aria-hidden": "true", children: "*" })
           ] }),
-          t && /* @__PURE__ */ e("span", { className: "sr-only", children: "（必須）" }),
+          i && /* @__PURE__ */ e("span", { className: "sr-only", children: "（必須）" }),
           a && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: a })
         ] }),
         d.Children.map(n, (m) => d.isValidElement(m) ? d.cloneElement(m, {
@@ -53,10 +53,10 @@ function j({
     }
   );
 }
-function R({
+function $({
   value: r,
-  min: i = 0,
-  max: t = 99,
+  min: t = 0,
+  max: i = 99,
   onChange: a,
   ...o
 }) {
@@ -66,8 +66,8 @@ function R({
       {
         variant: "tertiary",
         size: "icon-sm",
-        onClick: () => a?.(Math.max(i, r - 1)),
-        disabled: r <= i,
+        onClick: () => a?.(Math.max(t, r - 1)),
+        disabled: r <= t,
         "aria-label": "減らす",
         children: /* @__PURE__ */ e(N, { size: 16 })
       }
@@ -78,18 +78,18 @@ function R({
       {
         variant: "tertiary",
         size: "icon-sm",
-        onClick: () => a?.(Math.min(t, r + 1)),
-        disabled: r >= t,
+        onClick: () => a?.(Math.min(i, r + 1)),
+        disabled: r >= i,
         "aria-label": "増やす",
         children: /* @__PURE__ */ e(g, { size: 16 })
       }
     )
   ] });
 }
-function _({
+function j({
   value: r,
-  options: i,
-  onChange: t,
+  options: t,
+  onChange: i,
   placeholder: a = "テキスト",
   ...o
 }) {
@@ -100,15 +100,15 @@ function _({
       {
         id: s,
         value: r,
-        onChange: (n) => t?.(n.target.value),
+        onChange: (n) => i?.(n.target.value),
         "aria-label": a,
         className: b(
-          "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[var(--Focus-High-Emphasis)]/50",
+          "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
           O
         ),
         children: [
           /* @__PURE__ */ e("option", { value: "", disabled: !0, children: a }),
-          i.map((n) => /* @__PURE__ */ e("option", { value: n.value, children: n.label }, n.value))
+          t.map((n) => /* @__PURE__ */ e("option", { value: n.value, children: n.label }, n.value))
         ]
       }
     ),
@@ -117,8 +117,8 @@ function _({
 }
 function P({
   value: r,
-  onChange: i,
-  placeholder: t = "プレイスホルダー",
+  onChange: t,
+  placeholder: i = "プレイスホルダー",
   maxLength: a,
   ...o
 }) {
@@ -129,10 +129,10 @@ function P({
       {
         id: s,
         value: r,
-        onChange: (n) => i?.(n.target.value),
-        placeholder: t,
+        onChange: (n) => t?.(n.target.value),
+        placeholder: i,
         maxLength: a,
-        "aria-label": t
+        "aria-label": i
       }
     ),
     a && /* @__PURE__ */ l("p", { className: "text-right typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-live": "polite", children: [
@@ -144,7 +144,7 @@ function P({
 }
 function U({
   onUpload: r,
-  ...i
+  ...t
 }) {
   return /* @__PURE__ */ l(
     "button",
@@ -152,8 +152,8 @@ function U({
       type: "button",
       onClick: r,
       "aria-label": "画像をアップロード",
-      className: `flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] ${C} focus-visible:outline-none`,
-      ...i,
+      className: `flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] ${C} focus-visible:outline-none`,
+      ...t,
       children: [
         /* @__PURE__ */ e(E, { size: 24 }),
         /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "画像を選択" })
@@ -163,8 +163,8 @@ function U({
 }
 export {
   U as OptionImageUpload,
-  R as OptionQuantity,
-  _ as OptionSelect,
+  $ as OptionQuantity,
+  j as OptionSelect,
   P as OptionText,
-  j as ProductOption
+  R as ProductOption
 };

package/dist/components/ec/review-summary.js

@@ -29,7 +29,7 @@ function g({
         ] }),
         t && t.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-1", children: t.map((s) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e("span", { className: "w-3 shrink-0 text-right typo-label-sm tabular-nums text-[var(--Text-Medium-Emphasis)]", children: s.stars }),
-          /* @__PURE__ */ e("div", { className: "h-2.5 flex-1 overflow-hidden rounded-full bg-[var(--Surface-Secondary)]", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "h-2.5 flex-1 overflow-hidden rounded-full bg-[var(--Surface-Neutral-Secondary)]", children: /* @__PURE__ */ e(
             "div",
             {
               className: "h-full rounded-full bg-[var(--Brand-Cake-Orange)] transition-all duration-[var(--Motion-Duration-Base)]",

package/dist/components/ec/shop-card.js

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
 import "react";
 import y from "iconsax-reactjs/dist/esm/Location.js";
-import b from "iconsax-reactjs/dist/esm/Star1.js";
+import u from "iconsax-reactjs/dist/esm/Star1.js";
 import { StarHalf as w } from "lucide-react";
 import { cn as m } from "../../lib/utils.js";
 import { Button as E } from "../foundations/button.js";
@@ -11,7 +11,7 @@ function z({ rating: r }) {
   for (let s = 1; s <= 5; s++)
     s <= t ? i.push(
       /* @__PURE__ */ a(
-        b,
+        u,
         {
           size: 12,
           className: "fill-[var(--Brand-Cake-Orange)] text-[var(--Brand-Cake-Orange)]",
@@ -29,7 +29,7 @@ function z({ rating: r }) {
       )
     ) : i.push(
       /* @__PURE__ */ a(
-        b,
+        u,
         {
           size: 12,
           className: "text-[var(--Border-Medium-Emphasis)]"
@@ -51,19 +51,19 @@ function M({
   isBookmarked: d = !1,
   onBookmarkToggle: v,
   href: c,
-  variant: u = "default",
+  variant: b = "default",
   linkComponent: g,
   className: x,
   ...f
 }) {
   const N = g ?? "a";
-  return u === "compact" ? /* @__PURE__ */ e(
+  return b === "compact" ? /* @__PURE__ */ e(
     c ? N : "div",
     {
       ...c ? { href: c } : {},
       "data-slot": "shop-card",
       className: m(
-        "flex items-center gap-3 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)] max-w-[400px]",
+        "flex items-center gap-3 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)] max-w-[400px]",
         x
       ),
       ...f,
@@ -90,7 +90,7 @@ function M({
     {
       "data-slot": "shop-card",
       className: m(
-        "relative min-w-[200px] grid grid-rows-[auto_1fr] gap-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)]",
+        "relative min-w-[200px] grid grid-rows-[auto_1fr] gap-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]",
         x
       ),
       ...f,

package/dist/components/foundations/accordion.js

@@ -35,7 +35,7 @@ function x({
     {
       "data-slot": "accordion-trigger",
       className: i(
-        "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Tertiary)]/60 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 [&[data-state=open]>svg]:rotate-180",
+        "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Neutral-Tertiary)]/60 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 [&[data-state=open]>svg]:rotate-180",
         l,
         o
       ),

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

@@ -1,24 +1,40 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+"use client";
+import { jsx as e, jsxs as u } 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
+import { cn as r } from "../../lib/utils.js";
+import { useOverlayFocusRoot as c, OverlayFocusRootContext as m, useRestoreFocusToOpener as f } from "../../lib/focus-restore.js";
+import { composeEscapeKeyDownWithImeGuard as p } from "../../lib/ime.js";
+import { Button as n } from "./button.js";
+function N({
+  open: a,
+  defaultOpen: t,
+  onOpenChange: l,
+  ...i
 }) {
-  return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...a });
+  const { root: d, handleOpenChange: s } = c(a, t, l);
+  return /* @__PURE__ */ e(m.Provider, { value: d, children: /* @__PURE__ */ e(
+    o.Root,
+    {
+      "data-slot": "alert-dialog",
+      open: a,
+      defaultOpen: t,
+      onOpenChange: s,
+      ...i
+    }
+  ) });
 }
-function v({
+function O({
   ...a
 }) {
   return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...a });
 }
-function n({
+function x({
   ...a
 }) {
   return /* @__PURE__ */ e(o.Portal, { "data-slot": "alert-dialog-portal", ...a });
 }
-function g({
+function h({
   className: a,
   ...t
 }) {
@@ -26,7 +42,7 @@ function g({
     o.Overlay,
     {
       "data-slot": "alert-dialog-overlay",
-      className: l(
+      className: r(
         "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
       ),
@@ -34,31 +50,37 @@ function g({
     }
   );
 }
-function h({
+function T({
   className: a,
   size: t = "default",
-  ...r
+  onOpenAutoFocus: l,
+  onCloseAutoFocus: i,
+  onEscapeKeyDown: d,
+  ...s
 }) {
-  return /* @__PURE__ */ s(n, { children: [
-    /* @__PURE__ */ e(g, {}),
+  const g = f({ onOpenAutoFocus: l, onCloseAutoFocus: i });
+  return /* @__PURE__ */ u(x, { children: [
+    /* @__PURE__ */ e(h, {}),
     /* @__PURE__ */ e(
       o.Content,
       {
         "data-slot": "alert-dialog-content",
         "data-size": t,
-        className: l(
+        ...g,
+        onEscapeKeyDown: p(d),
+        className: r(
           // 画面端との余白は上下左右 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-[var(--Surface-Elevated)] 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
+        ...s
       }
     )
   ] });
 }
-function D({
+function E({
   className: a,
   ...t
 }) {
@@ -66,7 +88,7 @@ function D({
     "div",
     {
       "data-slot": "alert-dialog-header",
-      className: l(
+      className: r(
         "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
       ),
@@ -74,7 +96,7 @@ function D({
     }
   );
 }
-function A({
+function b({
   className: a,
   ...t
 }) {
@@ -82,7 +104,7 @@ function A({
     "div",
     {
       "data-slot": "alert-dialog-footer",
-      className: l(
+      className: r(
         "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
       ),
@@ -90,7 +112,7 @@ function A({
     }
   );
 }
-function z({
+function F({
   className: a,
   ...t
 }) {
@@ -98,7 +120,7 @@ function z({
     o.Title,
     {
       "data-slot": "alert-dialog-title",
-      className: l(
+      className: r(
         "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
       ),
@@ -106,7 +128,7 @@ function z({
     }
   );
 }
-function y({
+function M({
   className: a,
   ...t
 }) {
@@ -114,51 +136,51 @@ function y({
     o.Description,
     {
       "data-slot": "alert-dialog-description",
-      className: l("typo-body-md text-[var(--Text-Medium-Emphasis)]", a),
+      className: r("typo-body-md text-[var(--Text-Medium-Emphasis)]", a),
       ...t
     }
   );
 }
-function w({
+function R({
   className: a,
   variant: t = "default",
-  size: r = "default",
+  size: l = "default",
   ...i
 }) {
-  return /* @__PURE__ */ e(d, { variant: t, size: r, asChild: !0, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(n, { variant: t, size: l, asChild: !0, children: /* @__PURE__ */ e(
     o.Action,
     {
       "data-slot": "alert-dialog-action",
-      className: l(a),
+      className: r(a),
       ...i
     }
   ) });
 }
-function N({
+function _({
   className: a,
   variant: t = "tertiary",
-  size: r = "default",
+  size: l = "default",
   ...i
 }) {
-  return /* @__PURE__ */ e(d, { variant: t, size: r, asChild: !0, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(n, { variant: t, size: l, asChild: !0, children: /* @__PURE__ */ e(
     o.Cancel,
     {
       "data-slot": "alert-dialog-cancel",
-      className: l(a),
+      className: r(a),
       ...i
     }
   ) });
 }
 export {
-  x as AlertDialog,
-  w as AlertDialogAction,
-  N as AlertDialogCancel,
-  h as AlertDialogContent,
-  y as AlertDialogDescription,
-  A as AlertDialogFooter,
-  D as AlertDialogHeader,
-  g as AlertDialogOverlay,
-  n as AlertDialogPortal,
-  z as AlertDialogTitle,
-  v as AlertDialogTrigger
+  N as AlertDialog,
+  R as AlertDialogAction,
+  _ as AlertDialogCancel,
+  T as AlertDialogContent,
+  M as AlertDialogDescription,
+  b as AlertDialogFooter,
+  E as AlertDialogHeader,
+  h as AlertDialogOverlay,
+  x as AlertDialogPortal,
+  F as AlertDialogTitle,
+  O as AlertDialogTrigger
 };