@cakejp/design-system 0.22.0 → 0.23.0

package/dist/components/foundations/dialog.js

@@ -1,34 +1,50 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
+"use client";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import "react";
-import { XIcon as c } from "lucide-react";
+import { XIcon as p } from "lucide-react";
 import { Dialog as o } from "radix-ui";
 import { cn as i } from "../../lib/utils.js";
-import { Button as g } from "./button.js";
-function w({
-  ...a
+import { useOverlayFocusRoot as f, OverlayFocusRootContext as v, useRestoreFocusToOpener as x } from "../../lib/focus-restore.js";
+import { composeEscapeKeyDownWithImeGuard as h } from "../../lib/ime.js";
+import { Button as D } from "./button.js";
+function j({
+  open: a,
+  defaultOpen: t,
+  onOpenChange: l,
+  ...s
 }) {
-  return /* @__PURE__ */ t(o.Root, { "data-slot": "dialog", ...a });
+  const { root: n, handleOpenChange: d } = f(a, t, l);
+  return /* @__PURE__ */ e(v.Provider, { value: n, children: /* @__PURE__ */ e(
+    o.Root,
+    {
+      "data-slot": "dialog",
+      open: a,
+      defaultOpen: t,
+      onOpenChange: d,
+      ...s
+    }
+  ) });
 }
-function C({
+function M({
   ...a
 }) {
-  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "dialog-trigger", ...a });
 }
-function u({
+function y({
   ...a
 }) {
-  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dialog-portal", ...a });
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "dialog-portal", ...a });
 }
-function N({
+function R({
   ...a
 }) {
-  return /* @__PURE__ */ t(o.Close, { "data-slot": "dialog-close", ...a });
+  return /* @__PURE__ */ e(o.Close, { "data-slot": "dialog-close", ...a });
 }
-function m({
+function C({
   className: a,
-  ...e
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     o.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -36,47 +52,55 @@ function m({
         "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
       ),
-      ...e
+      ...t
     }
   );
 }
-const f = {
+const w = {
   sm: "sm:max-w-[400px]",
   md: "sm:max-w-[512px]",
   lg: "sm:max-w-[640px]",
   xl: "sm:max-w-[800px]"
-}, p = "sm:max-w-lg";
-function T({
+}, b = "sm:max-w-lg";
+function P({
   className: a,
-  children: e,
-  showCloseButton: r = !0,
+  children: t,
+  showCloseButton: l = !0,
   size: s,
-  ...n
+  onOpenAutoFocus: n,
+  onCloseAutoFocus: d,
+  onEscapeKeyDown: c,
+  ...u
 }) {
-  return /* @__PURE__ */ l(u, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ t(m, {}),
-    /* @__PURE__ */ l(
+  const m = x({
+    onOpenAutoFocus: n ?? ((g) => g.preventDefault()),
+    onCloseAutoFocus: d
+  });
+  return /* @__PURE__ */ r(y, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ e(C, {}),
+    /* @__PURE__ */ r(
       o.Content,
       {
         "data-slot": "dialog-content",
-        onOpenAutoFocus: (d) => d.preventDefault(),
+        ...m,
+        onEscapeKeyDown: h(c),
         className: i(
           "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] 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",
           // 型に無い size（AlertDialog の "default" と取り違えた JSX など）でも幅の上限を消さず、未指定と同じにする
-          s && f[s] || p,
+          s && w[s] || b,
           a
         ),
-        ...n,
+        ...u,
         children: [
-          e,
-          r && /* @__PURE__ */ l(
+          t,
+          l && /* @__PURE__ */ r(
             o.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+              className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
               children: [
-                /* @__PURE__ */ t(c, { className: "size-5" }),
-                /* @__PURE__ */ t("span", { className: "sr-only", children: "閉じる" })
+                /* @__PURE__ */ e(p, { className: "size-5" }),
+                /* @__PURE__ */ e("span", { className: "sr-only", children: "閉じる" })
               ]
             }
           )
@@ -85,23 +109,23 @@ function T({
     )
   ] });
 }
-function E({ className: a, ...e }) {
-  return /* @__PURE__ */ t(
+function S({ className: a, ...t }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "dialog-header",
       className: i("flex flex-col gap-2 text-center sm:text-left", a),
-      ...e
+      ...t
     }
   );
 }
-function z({
+function B({
   className: a,
-  showCloseButton: e = !1,
-  children: r,
+  showCloseButton: t = !1,
+  children: l,
   ...s
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -111,47 +135,47 @@ function z({
       ),
       ...s,
       children: [
-        r,
-        e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(g, { variant: "tertiary", children: "Close" }) })
+        l,
+        t && /* @__PURE__ */ e(o.Close, { asChild: !0, children: /* @__PURE__ */ e(D, { variant: "tertiary", children: "Close" }) })
       ]
     }
   );
 }
-function _({
+function I({
   className: a,
-  ...e
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     o.Title,
     {
       "data-slot": "dialog-title",
       className: i("typo-heading-lg text-[var(--Text-High-Emphasis)]", a),
-      ...e
+      ...t
     }
   );
 }
-function H({
+function K({
   className: a,
-  ...e
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     o.Description,
     {
       "data-slot": "dialog-description",
       className: i("typo-body-sm text-[var(--Text-Medium-Emphasis)]", a),
-      ...e
+      ...t
     }
   );
 }
 export {
-  w as Dialog,
-  N as DialogClose,
-  T as DialogContent,
-  H as DialogDescription,
-  z as DialogFooter,
-  E as DialogHeader,
-  m as DialogOverlay,
-  u as DialogPortal,
-  _ as DialogTitle,
-  C as DialogTrigger
+  j as Dialog,
+  R as DialogClose,
+  P as DialogContent,
+  K as DialogDescription,
+  B as DialogFooter,
+  S as DialogHeader,
+  C as DialogOverlay,
+  y as DialogPortal,
+  I as DialogTitle,
+  M as DialogTrigger
 };

package/dist/components/foundations/drawer.js

@@ -1,56 +1,64 @@
 "use client";
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import "react";
 import { Drawer as e } from "vaul";
-import { cn as d } from "../../lib/utils.js";
-function m({
+import { cn as o } from "../../lib/utils.js";
+import { OverlayFocusRootContext as s, useRestoreFocusToOpener as w } from "../../lib/focus-restore.js";
+import { composeEscapeKeyDownWithImeGuard as m } from "../../lib/ime.js";
+function y({
   ...r
 }) {
-  return /* @__PURE__ */ t(e.Root, { "data-slot": "drawer", ...r });
+  return /* @__PURE__ */ a(s.Provider, { value: null, children: /* @__PURE__ */ a(e.Root, { "data-slot": "drawer", ...r }) });
 }
-function v({
+function E({
   ...r
 }) {
-  return /* @__PURE__ */ t(e.Trigger, { "data-slot": "drawer-trigger", ...r });
+  return /* @__PURE__ */ a(e.Trigger, { "data-slot": "drawer-trigger", ...r });
 }
-function n({
+function v({
   ...r
 }) {
-  return /* @__PURE__ */ t(e.Portal, { "data-slot": "drawer-portal", ...r });
+  return /* @__PURE__ */ a(e.Portal, { "data-slot": "drawer-portal", ...r });
 }
-function p({
+function N({
   ...r
 }) {
-  return /* @__PURE__ */ t(e.Close, { "data-slot": "drawer-close", ...r });
+  return /* @__PURE__ */ a(e.Close, { "data-slot": "drawer-close", ...r });
 }
-function l({
+function p({
   className: r,
-  ...a
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(
     e.Overlay,
     {
       "data-slot": "drawer-overlay",
-      className: d(
+      className: o(
         "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",
         r
       ),
-      ...a
+      ...t
     }
   );
 }
-function f({
+function T({
   className: r,
-  children: a,
-  ...i
+  children: t,
+  onOpenAutoFocus: i,
+  onCloseAutoFocus: n,
+  onEscapeKeyDown: l,
+  ...c
 }) {
-  return /* @__PURE__ */ o(n, { "data-slot": "drawer-portal", children: [
-    /* @__PURE__ */ t(l, {}),
-    /* @__PURE__ */ o(
+  const u = w({ onOpenAutoFocus: i, onCloseAutoFocus: n });
+  return /* @__PURE__ */ d(v, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ a(p, {}),
+    /* @__PURE__ */ d(
       e.Content,
       {
         "data-slot": "drawer-content",
-        className: d(
+        ...u,
+        onEscapeKeyDown: m(l),
+        className: o(
           "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
@@ -58,73 +66,73 @@ function f({
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
           r
         ),
-        ...i,
+        ...c,
         children: [
-          /* @__PURE__ */ t("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-[var(--Border-Medium-Emphasis)] group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
-          a
+          /* @__PURE__ */ a("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-[var(--Border-Medium-Emphasis)] group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          t
         ]
       }
     )
   ] });
 }
-function g({ className: r, ...a }) {
-  return /* @__PURE__ */ t(
+function O({ className: r, ...t }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "drawer-header",
-      className: d(
+      className: o(
         "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
         r
       ),
-      ...a
+      ...t
     }
   );
 }
-function x({ className: r, ...a }) {
-  return /* @__PURE__ */ t(
+function C({ className: r, ...t }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "drawer-footer",
-      className: d("mt-auto flex flex-col gap-2 p-4", r),
-      ...a
+      className: o("mt-auto flex flex-col gap-2 p-4", r),
+      ...t
     }
   );
 }
-function h({
+function M({
   className: r,
-  ...a
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(
     e.Title,
     {
       "data-slot": "drawer-title",
-      className: d("typo-heading-lg text-[var(--Text-High-Emphasis)]", r),
-      ...a
+      className: o("typo-heading-lg text-[var(--Text-High-Emphasis)]", r),
+      ...t
     }
   );
 }
-function b({
+function F({
   className: r,
-  ...a
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(
     e.Description,
     {
       "data-slot": "drawer-description",
-      className: d("typo-body-sm text-[var(--Text-Medium-Emphasis)]", r),
-      ...a
+      className: o("typo-body-sm text-[var(--Text-Medium-Emphasis)]", r),
+      ...t
     }
   );
 }
 export {
-  m as Drawer,
-  p as DrawerClose,
-  f as DrawerContent,
-  b as DrawerDescription,
-  x as DrawerFooter,
-  g as DrawerHeader,
-  l as DrawerOverlay,
-  n as DrawerPortal,
-  h as DrawerTitle,
-  v as DrawerTrigger
+  y as Drawer,
+  N as DrawerClose,
+  T as DrawerContent,
+  F as DrawerDescription,
+  C as DrawerFooter,
+  O as DrawerHeader,
+  p as DrawerOverlay,
+  v as DrawerPortal,
+  M as DrawerTitle,
+  E as DrawerTrigger
 };

package/dist/components/foundations/field.js

@@ -1,10 +1,10 @@
 import { jsx as a, jsxs as i } from "react/jsx-runtime";
 import "react";
 import { cva as s } from "class-variance-authority";
-import { cn as l } from "../../lib/utils.js";
-import { Label as n } from "./label.js";
+import { cn as r } from "../../lib/utils.js";
+import { Label as d } from "./label.js";
 import { Separator as o } from "./separator.js";
-const d = s("group/field flex", {
+const n = s("group/field flex", {
   variants: {
     orientation: {
       /** 既定。ラベルの下に入力を積む */
@@ -17,10 +17,10 @@ const d = s("group/field flex", {
   },
   defaultVariants: { orientation: "vertical" }
 });
-function g({
+function v({
   className: t,
   orientation: e,
-  ...r
+  ...l
 }) {
   return /* @__PURE__ */ a(
     "div",
@@ -28,20 +28,20 @@ function g({
       role: "group",
       "data-slot": "field",
       "data-orientation": e ?? "vertical",
-      className: l(d({ orientation: e }), t),
-      ...r
+      className: r(n({ orientation: e }), t),
+      ...l
     }
   );
 }
-function v({
+function b({
   className: t,
   ...e
 }) {
   return /* @__PURE__ */ a(
-    n,
+    d,
     {
       "data-slot": "field-label",
-      className: l(
+      className: r(
         "text-[var(--Text-High-Emphasis)] group-data-[disabled=true]/field:text-[var(--Text-Disable)]",
         t
       ),
@@ -49,39 +49,55 @@ function v({
     }
   );
 }
-function N({ className: t, ...e }) {
+const f = {
+  sm: "gap-2 [&>[data-slot=field-legend]]:mb-2",
+  md: "gap-4 [&>[data-slot=field-legend]]:mb-4",
+  lg: "gap-6 [&>[data-slot=field-legend]]:mb-6"
+};
+function N({
+  className: t,
+  gap: e,
+  ...l
+}) {
   return /* @__PURE__ */ a(
     "fieldset",
     {
       "data-slot": "field-set",
-      className: l(
+      "data-gap": e,
+      className: r(
         "flex min-w-0 flex-col gap-6 border-0 p-0",
+        e && f[e],
         t
       ),
-      ...e
+      ...l
     }
   );
 }
-function b({ className: t, ...e }) {
+function y({
+  className: t,
+  size: e,
+  ...l
+}) {
   return /* @__PURE__ */ a(
     "legend",
     {
       "data-slot": "field-legend",
-      className: l(
-        "typo-label-lg text-[var(--Text-High-Emphasis)]",
+      "data-size": e,
+      className: r(
+        e === "sm" ? "typo-label-md text-[var(--Text-Medium-Emphasis)]" : "typo-label-lg text-[var(--Text-High-Emphasis)]",
         t
       ),
-      ...e
+      ...l
     }
   );
 }
-function y({ className: t, ...e }) {
+function E({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "field-group",
       role: "group",
-      className: l("@container/field-group flex min-w-0 flex-col gap-4", t),
+      className: r("@container/field-group flex min-w-0 flex-col gap-4", t),
       ...e
     }
   );
@@ -91,7 +107,7 @@ function F({ className: t, ...e }) {
     "p",
     {
       "data-slot": "field-description",
-      className: l(
+      className: r(
         "typo-body-xs text-[var(--Text-Low-Emphasis)]",
         t
       ),
@@ -99,36 +115,36 @@ function F({ className: t, ...e }) {
     }
   );
 }
-function h({
+function T({
   className: t,
   children: e,
-  ...r
+  ...l
 }) {
   return e ? /* @__PURE__ */ a(
     "p",
     {
       "data-slot": "field-error",
       role: "alert",
-      className: l(
+      className: r(
         "typo-body-xs text-[var(--Text-Caution)]",
         t
       ),
-      ...r,
+      ...l,
       children: e
     }
   ) : null;
 }
-function w({
+function h({
   className: t,
   children: e,
-  ...r
+  ...l
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "field-separator",
-      className: l("relative flex items-center py-2", t),
-      ...r,
+      className: r("relative flex items-center py-2", t),
+      ...l,
       children: [
         /* @__PURE__ */ a(o, { className: "flex-1" }),
         e != null && /* @__PURE__ */ a("span", { className: "mx-3 shrink-0 typo-body-xs text-[var(--Text-Low-Emphasis)]", children: e }),
@@ -138,13 +154,13 @@ function w({
   );
 }
 export {
-  g as Field,
+  v as Field,
   F as FieldDescription,
-  h as FieldError,
-  y as FieldGroup,
-  v as FieldLabel,
-  b as FieldLegend,
-  w as FieldSeparator,
+  T as FieldError,
+  E as FieldGroup,
+  b as FieldLabel,
+  y as FieldLegend,
+  h as FieldSeparator,
   N as FieldSet,
-  d as fieldVariants
+  n as fieldVariants
 };

package/dist/components/foundations/file-input.js

@@ -88,7 +88,7 @@ function B({
               // focus-within 中は打ち消す（focus-within は variant 順で hover より先＝負ける）。
               // :hover:focus-within は詳細度が :hover より高いので確実に上書きできる。
               "[&:hover:focus-within]:border-[var(--Focus-High-Emphasis)] [&:hover:focus-within]:outline-transparent",
-              y && "pointer-events-none border-transparent bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]"
+              y && "pointer-events-none border-transparent bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Disable)]"
             ),
             children: [
               /* @__PURE__ */ f(S, { className: "size-4", "aria-hidden": "true" }),