@cakejp/design-system 0.20.0 → 0.21.0

package/dist/components/foundations/dropdown-menu.js

@@ -1,19 +1,20 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as c } from "lucide-react";
+import { CheckIcon as u, CircleIcon as c, ChevronRightIcon as l } from "lucide-react";
 import { DropdownMenu as n } from "radix-ui";
 import { cn as r } from "../../lib/utils.js";
-function v({
+import { FORCED_COLORS_MENU_ITEM as s } from "../../lib/focus-ring.js";
+function w({
   ...e
 }) {
   return /* @__PURE__ */ t(n.Root, { "data-slot": "dropdown-menu", ...e });
 }
-function b({
+function x({
   ...e
 }) {
   return /* @__PURE__ */ t(n.Portal, { "data-slot": "dropdown-menu-portal", ...e });
 }
-function w({
+function h({
   ...e
 }) {
   return /* @__PURE__ */ t(
@@ -24,7 +25,7 @@ function w({
     }
   );
 }
-function h({
+function y({
   className: e,
   sideOffset: o = 4,
   ...a
@@ -35,19 +36,19 @@ function h({
       "data-slot": "dropdown-menu-content",
       sideOffset: o,
       className: r(
-        "z-[var(--Z-Popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 typo-body-md text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+        "z-[var(--Z-Popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 typo-body-md text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
         e
       ),
       ...a
     }
   ) });
 }
-function x({
+function M({
   ...e
 }) {
   return /* @__PURE__ */ t(n.Group, { "data-slot": "dropdown-menu-group", ...e });
 }
-function y({
+function z({
   className: e,
   inset: o,
   variant: a = "default",
@@ -60,37 +61,39 @@ function y({
       "data-inset": o,
       "data-variant": a,
       className: r(
-        "relative flex cursor-default items-center gap-2 rounded-md px-3 py-2.5 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-md px-3 py-2.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        s,
         e
       ),
       ...d
     }
   );
 }
-function z({
+function D({
   className: e,
   children: o,
   checked: a,
   ...d
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     n.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: r(
-        "relative flex cursor-default items-center gap-2 rounded-md py-2.5 pr-3 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-2.5 pr-3 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        s,
         e
       ),
       checked: a,
       ...d,
       children: [
-        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.ItemIndicator, { children: /* @__PURE__ */ t(i, { className: "size-4" }) }) }),
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-4" }) }) }),
         o
       ]
     }
   );
 }
-function M({
+function _({
   ...e
 }) {
   return /* @__PURE__ */ t(
@@ -101,28 +104,29 @@ function M({
     }
   );
 }
-function D({
+function N({
   className: e,
   children: o,
   ...a
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     n.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
       className: r(
-        "relative flex cursor-default items-center gap-2 rounded-md py-2.5 pr-3 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-2.5 pr-3 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        s,
         e
       ),
       ...a,
       children: [
-        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.ItemIndicator, { children: /* @__PURE__ */ t(c, { className: "size-2 fill-current" }) }) }),
         o
       ]
     }
   );
 }
-function N({
+function I({
   className: e,
   inset: o,
   ...a
@@ -140,7 +144,7 @@ function N({
     }
   );
 }
-function _({
+function C({
   className: e,
   ...o
 }) {
@@ -153,7 +157,7 @@ function _({
     }
   );
 }
-function I({
+function S({
   className: e,
   ...o
 }) {
@@ -174,30 +178,31 @@ function k({
 }) {
   return /* @__PURE__ */ t(n.Sub, { "data-slot": "dropdown-menu-sub", ...e });
 }
-function C({
+function R({
   className: e,
   inset: o,
   children: a,
   ...d
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     n.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": o,
       className: r(
-        "flex cursor-default items-center gap-2 rounded-md px-3 py-2.5 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex cursor-default items-center gap-2 rounded-md px-3 py-2.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        s,
         e
       ),
       ...d,
       children: [
         a,
-        /* @__PURE__ */ t(c, { className: "ml-auto size-4" })
+        /* @__PURE__ */ t(l, { className: "ml-auto size-4" })
       ]
     }
   );
 }
-function S({
+function E({
   className: e,
   ...o
 }) {
@@ -206,7 +211,7 @@ function S({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: r(
-        "z-[var(--Z-Popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+        "z-[var(--Z-Popover)] min-w-[8rem] max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
         e
       ),
       ...o
@@ -214,19 +219,19 @@ function S({
   );
 }
 export {
-  v as DropdownMenu,
-  z as DropdownMenuCheckboxItem,
-  h as DropdownMenuContent,
-  x as DropdownMenuGroup,
-  y as DropdownMenuItem,
-  N as DropdownMenuLabel,
-  b as DropdownMenuPortal,
-  M as DropdownMenuRadioGroup,
-  D as DropdownMenuRadioItem,
-  _ as DropdownMenuSeparator,
-  I as DropdownMenuShortcut,
+  w as DropdownMenu,
+  D as DropdownMenuCheckboxItem,
+  y as DropdownMenuContent,
+  M as DropdownMenuGroup,
+  z as DropdownMenuItem,
+  I as DropdownMenuLabel,
+  x as DropdownMenuPortal,
+  _ as DropdownMenuRadioGroup,
+  N as DropdownMenuRadioItem,
+  C as DropdownMenuSeparator,
+  S as DropdownMenuShortcut,
   k as DropdownMenuSub,
-  S as DropdownMenuSubContent,
-  C as DropdownMenuSubTrigger,
-  w as DropdownMenuTrigger
+  E as DropdownMenuSubContent,
+  R as DropdownMenuSubTrigger,
+  h as DropdownMenuTrigger
 };

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

@@ -1,109 +1,139 @@
 "use client";
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import * as g from "react";
-import { Paperclip as H, X as _ } from "lucide-react";
-import { cn as o } from "../../lib/utils.js";
-import { FOCUS_RING_WITHIN as k, FOCUS_RING as G } from "../../lib/focus-ring.js";
-import { buttonVariants as L } from "./button.js";
-function S(e) {
-  return e.length === 0 ? "" : e.length === 1 ? e[0].name : `${e.length}件選択`;
+import { jsxs as R, jsx as f } from "react/jsx-runtime";
+import * as r from "react";
+import { Paperclip as S, X as _ } from "lucide-react";
+import { cn as b } from "../../lib/utils.js";
+import { FOCUS_RING_WITHIN as G, FOCUS_RING as U } from "../../lib/focus-ring.js";
+import { buttonVariants as A } from "./button.js";
+function M(t) {
+  return t.length === 0 ? "" : t.length === 1 ? t[0].name : `${t.length}件選択`;
 }
-function U(e, i) {
-  if (i == null) return { accepted: e, rejected: [] };
-  const a = [], s = [];
-  for (const t of e)
-    t.size > i ? s.push(t) : a.push(t);
-  return { accepted: a, rejected: s };
+function P(t, i) {
+  if (i == null) return { accepted: t, rejected: [] };
+  const s = [], o = [];
+  for (const a of t)
+    a.size > i ? o.push(a) : s.push(a);
+  return { accepted: s, rejected: o };
 }
-function W({
-  id: e,
+function m(t, i) {
+  if (i.length === 0) {
+    t.value = "";
+    return;
+  }
+  if (typeof DataTransfer > "u") return;
+  const s = new DataTransfer();
+  i.forEach((o) => s.items.add(o)), t.files = s.files;
+}
+function B({
+  id: t,
   name: i,
-  accept: a,
-  multiple: s = !1,
-  maxSize: t,
-  disabled: l = !1,
-  placeholder: y = "ファイルが選択されていません",
-  buttonLabel: N = "ファイルを選択",
-  value: d,
-  onFilesChange: m,
-  onError: x,
-  className: F,
-  "aria-describedby": j,
-  "aria-invalid": I
+  accept: s,
+  multiple: o = !1,
+  maxSize: a,
+  disabled: y = !1,
+  placeholder: F = "ファイルが選択されていません",
+  buttonLabel: j = "ファイルを選択",
+  value: x,
+  onFilesChange: d,
+  onError: w,
+  className: I,
+  "aria-describedby": z,
+  "aria-invalid": C
 }) {
-  const r = g.useRef(null), c = d !== void 0, [w, p] = g.useState([]), h = c ? d : w, C = (z) => {
-    const E = Array.from(z.target.files ?? []), { accepted: f, rejected: v } = U(E, t);
-    if (v.length > 0 && t != null)
-      for (const O of v)
-        x?.({ code: "max-size", file: O, maxSize: t });
-    c || p(f), m?.(f), f.length === 0 && r.current && (r.current.value = "");
-  }, R = () => {
-    r.current && (r.current.value = ""), c || p([]), m?.([]);
-  }, T = S(h), u = h.length > 0;
-  return /* @__PURE__ */ b(
+  const e = r.useRef(null), n = x !== void 0, [L, N] = r.useState([]), c = n ? x : L, E = r.useRef(c), l = r.useRef(null);
+  r.useEffect(() => {
+    E.current = c;
+  }, [c]);
+  const p = r.useCallback(() => {
+    l.current !== null && clearTimeout(l.current), l.current = setTimeout(() => {
+      l.current = null, e.current && m(e.current, E.current);
+    }, 0);
+  }, []);
+  r.useEffect(() => () => {
+    l.current !== null && clearTimeout(l.current);
+  }, []), r.useEffect(() => {
+    e.current && m(e.current, c);
+  }, [c]), r.useEffect(() => {
+    const u = e.current?.form;
+    if (!u) return;
+    const h = () => {
+      e.current && (m(e.current, []), n || N([]), d?.([]), p());
+    };
+    return u.addEventListener("reset", h), () => u.removeEventListener("reset", h);
+  }, [n, d, p]);
+  const O = (u) => {
+    const h = Array.from(u.target.files ?? []), { accepted: v, rejected: T } = P(h, a);
+    if (T.length > 0 && a != null)
+      for (const H of T)
+        w?.({ code: "max-size", file: H, maxSize: a });
+    n || N(v), e.current && m(e.current, v), d?.(v), n && p(), !n && v.length === 0 && e.current && (e.current.value = "");
+  }, k = () => {
+    e.current && m(e.current, []), n || N([]), d?.([]), n && p();
+  }, D = M(c), g = c.length > 0;
+  return /* @__PURE__ */ R(
     "div",
     {
       "data-slot": "file-input",
-      className: o("flex min-w-0 items-center gap-2", F),
+      className: b("flex min-w-0 items-center gap-2", I),
       children: [
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ R(
           "label",
           {
-            className: o(
-              L({ variant: "secondary", size: "default" }),
+            className: b(
+              A({ variant: "secondary", size: "default" }),
               "relative cursor-pointer",
               // フォーカス意匠は DS 共通（outline ではなく FOCUS_RING と同じリング）。
-              k,
+              G,
               // buttonVariants(secondary) の hover は border/outline をオレンジにするため、
               // focus-within 中は打ち消す（focus-within は variant 順で hover より先＝負ける）。
               // :hover:focus-within は詳細度が :hover より高いので確実に上書きできる。
               "[&:hover:focus-within]:border-[var(--Focus-High-Emphasis)] [&:hover:focus-within]:outline-transparent",
-              l && "pointer-events-none border-transparent bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]"
+              y && "pointer-events-none border-transparent bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]"
             ),
             children: [
-              /* @__PURE__ */ n(H, { className: "size-4", "aria-hidden": "true" }),
-              N,
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ f(S, { className: "size-4", "aria-hidden": "true" }),
+              j,
+              /* @__PURE__ */ f(
                 "input",
                 {
-                  ref: r,
-                  id: e,
+                  ref: e,
+                  id: t,
                   name: i,
                   type: "file",
-                  accept: a,
-                  multiple: s,
-                  disabled: l,
-                  onChange: C,
-                  "aria-describedby": j,
-                  "aria-invalid": I,
+                  accept: s,
+                  multiple: o,
+                  disabled: y,
+                  onChange: O,
+                  "aria-describedby": z,
+                  "aria-invalid": C,
                   className: "sr-only"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ f(
           "span",
           {
             "data-slot": "file-input-filename",
-            className: o(
+            className: b(
               "min-w-0 flex-1 truncate typo-body-md",
-              u ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]"
+              g ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]"
             ),
-            children: u ? T : y
+            children: g ? D : F
           }
         ),
-        u && !l && /* @__PURE__ */ n(
+        g && !y && /* @__PURE__ */ f(
           "button",
           {
             type: "button",
             "aria-label": "選択を解除",
-            onClick: R,
-            className: o(
+            onClick: k,
+            className: b(
               "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-[var(--Object-Medium-Emphasis)] transition-colors hover:bg-[var(--Overlay-Light)] focus-visible:outline-none",
-              G
+              U
             ),
-            children: /* @__PURE__ */ n(_, { className: "size-3.5" })
+            children: /* @__PURE__ */ f(_, { className: "size-3.5" })
           }
         )
       ]
@@ -111,7 +141,7 @@ function W({
   );
 }
 export {
-  W as FileInput,
-  S as formatFileNames,
-  U as validateFileSize
+  B as FileInput,
+  M as formatFileNames,
+  P as validateFileSize
 };

package/dist/components/foundations/hover-card.js

@@ -1,41 +1,41 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "react";
 import { HoverCard as r } from "radix-ui";
 import { cn as i } from "../../lib/utils.js";
-function p({
-  openDelay: o = 200,
-  closeDelay: e = 100,
-  ...a
+function c({
+  openDelay: t = 200,
+  closeDelay: a = 100,
+  ...e
 }) {
-  return /* @__PURE__ */ t(r.Root, { "data-slot": "hover-card", openDelay: o, closeDelay: e, ...a });
+  return /* @__PURE__ */ o(r.Root, { "data-slot": "hover-card", openDelay: t, closeDelay: a, ...e });
 }
-function c({
-  ...o
+function p({
+  ...t
 }) {
-  return /* @__PURE__ */ t(r.Trigger, { "data-slot": "hover-card-trigger", ...o });
+  return /* @__PURE__ */ o(r.Trigger, { "data-slot": "hover-card-trigger", ...t });
 }
-function f({
-  className: o,
-  align: e = "center",
-  sideOffset: a = 4,
+function v({
+  className: t,
+  align: a = "center",
+  sideOffset: e = 4,
   ...d
 }) {
-  return /* @__PURE__ */ t(r.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(r.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ o(
     r.Content,
     {
       "data-slot": "hover-card-content",
-      align: e,
-      sideOffset: a,
+      align: a,
+      sideOffset: e,
       className: i(
-        "z-[var(--Z-Popover)] w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
-        o
+        "z-[var(--Z-Popover)] w-64 max-w-(--radix-hover-card-content-available-width) origin-(--radix-hover-card-content-transform-origin) rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+        t
       ),
       ...d
     }
   ) });
 }
 export {
-  p as HoverCard,
-  f as HoverCardContent,
-  c as HoverCardTrigger
+  c as HoverCard,
+  v as HoverCardContent,
+  p as HoverCardTrigger
 };