@cakejp/design-system 0.16.0 → 0.17.1

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

@@ -0,0 +1,171 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cva as u } from "class-variance-authority";
+import { ChevronDownIcon as s } from "lucide-react";
+import { NavigationMenu as n } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+function b({
+  className: t,
+  children: a,
+  viewport: i = !0,
+  ...d
+}) {
+  return /* @__PURE__ */ r(
+    n.Root,
+    {
+      "data-slot": "navigation-menu",
+      "data-viewport": i,
+      className: o(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        t
+      ),
+      ...d,
+      children: [
+        a,
+        i && /* @__PURE__ */ e(g, {})
+      ]
+    }
+  );
+}
+function x({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    n.List,
+    {
+      "data-slot": "navigation-menu-list",
+      className: o(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function h({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    n.Item,
+    {
+      "data-slot": "navigation-menu-item",
+      className: o("relative", t),
+      ...a
+    }
+  );
+}
+const l = u(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 typo-label-md text-foreground transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+);
+function N({
+  className: t,
+  children: a,
+  ...i
+}) {
+  return /* @__PURE__ */ r(
+    n.Trigger,
+    {
+      "data-slot": "navigation-menu-trigger",
+      className: o(l(), "group", t),
+      ...i,
+      children: [
+        a,
+        " ",
+        /* @__PURE__ */ e(
+          s,
+          {
+            className: "relative top-[1px] ml-1 size-3 transition duration-[var(--Motion-Duration-Slow)] group-data-[state=open]:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function M({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    n.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: o(
+        "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-[var(--Border-Medium-Emphasis)] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-[var(--Motion-Duration-Base)] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function g({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: o(
+        "absolute top-full left-0 isolate z-[var(--Z-Popover)] flex justify-center"
+      ),
+      children: /* @__PURE__ */ e(
+        n.Viewport,
+        {
+          "data-slot": "navigation-menu-viewport",
+          className: o(
+            "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+            t
+          ),
+          ...a
+        }
+      )
+    }
+  );
+}
+function y({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    n.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: o(
+        "flex flex-col gap-1 rounded-sm p-2 typo-body-md transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function z({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    n.Indicator,
+    {
+      "data-slot": "navigation-menu-indicator",
+      className: o(
+        "top-full z-[var(--Z-Local-1)] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        t
+      ),
+      ...a,
+      children: /* @__PURE__ */ e("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    }
+  );
+}
+export {
+  b as NavigationMenu,
+  M as NavigationMenuContent,
+  z as NavigationMenuIndicator,
+  h as NavigationMenuItem,
+  y as NavigationMenuLink,
+  x as NavigationMenuList,
+  N as NavigationMenuTrigger,
+  g as NavigationMenuViewport,
+  l as navigationMenuTriggerStyle
+};

package/dist/components/foundations/pagination.js

@@ -0,0 +1,120 @@
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import "react";
+import { MoreHorizontalIcon as l, ChevronRightIcon as c, ChevronLeftIcon as m } from "lucide-react";
+import { cn as t } from "../../lib/utils.js";
+import { buttonVariants as p } from "./button.js";
+function x({ className: a, ...n }) {
+  return /* @__PURE__ */ i(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: t("mx-auto flex w-full justify-center", a),
+      ...n
+    }
+  );
+}
+function N({
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ i(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: t("flex flex-row flex-wrap items-center justify-center gap-0.5 sm:gap-1", a),
+      ...n
+    }
+  );
+}
+function P({ ...a }) {
+  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...a });
+}
+function o({
+  className: a,
+  isActive: n,
+  size: r = "icon",
+  ...s
+}) {
+  return /* @__PURE__ */ i(
+    "a",
+    {
+      "aria-current": n ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": n,
+      className: t(
+        p({
+          variant: n ? "secondary" : "ghost",
+          size: r
+        }),
+        "min-h-9 min-w-9 sm:min-h-10 sm:min-w-10",
+        a
+      ),
+      ...s
+    }
+  );
+}
+function b({
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      "aria-label": "前のページへ",
+      size: "default",
+      className: t("gap-1 px-2.5 sm:pl-2.5", a),
+      ...n,
+      children: [
+        /* @__PURE__ */ i(m, {}),
+        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "前へ" })
+      ]
+    }
+  );
+}
+function v({
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      "aria-label": "次のページへ",
+      size: "default",
+      className: t("gap-1 px-2.5 sm:pr-2.5", a),
+      ...n,
+      children: [
+        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "次へ" }),
+        /* @__PURE__ */ i(c, {})
+      ]
+    }
+  );
+}
+function j({
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-slot": "pagination-ellipsis",
+      className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", a),
+      ...n,
+      children: [
+        /* @__PURE__ */ i(l, { className: "size-4" }),
+        /* @__PURE__ */ i("span", { className: "sr-only", children: "その他のページ" })
+      ]
+    }
+  );
+}
+export {
+  x as Pagination,
+  N as PaginationContent,
+  j as PaginationEllipsis,
+  P as PaginationItem,
+  o as PaginationLink,
+  v as PaginationNext,
+  b as PaginationPrevious
+};

package/dist/components/foundations/popover.js

@@ -0,0 +1,45 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Popover as e } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
+function f({
+  ...o
+}) {
+  return /* @__PURE__ */ t(e.Root, { "data-slot": "popover", ...o });
+}
+function l({
+  ...o
+}) {
+  return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
+}
+function c({
+  className: o,
+  align: r = "center",
+  sideOffset: a = 4,
+  ...n
+}) {
+  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
+    e.Content,
+    {
+      "data-slot": "popover-content",
+      align: r,
+      sideOffset: a,
+      className: d(
+        "z-[var(--Z-Popover)] w-72 origin-(--radix-popover-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
+      ),
+      ...n
+    }
+  ) });
+}
+function v({
+  ...o
+}) {
+  return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
+}
+export {
+  f as Popover,
+  v as PopoverAnchor,
+  c as PopoverContent,
+  l as PopoverTrigger
+};

package/dist/components/foundations/progress.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { Progress as l } from "radix-ui";
+import { cn as t } from "../../lib/utils.js";
+function f({
+  className: o,
+  value: e,
+  ...r
+}) {
+  const s = r["aria-label"] !== void 0 || r["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ a(
+    l.Root,
+    {
+      "data-slot": "progress",
+      "aria-label": s ? void 0 : "進捗",
+      className: t(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        o
+      ),
+      ...r,
+      children: /* @__PURE__ */ a(
+        l.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "h-full w-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - (e || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  f as Progress
+};

package/dist/components/foundations/radio-group.js

@@ -0,0 +1,134 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import * as l from "react";
+import { RadioGroup as i } from "radix-ui";
+import { cn as e } from "../../lib/utils.js";
+import { FOCUS_RING as m } from "../../lib/focus-ring.js";
+import { chipVariants as p } from "./chip-variants.js";
+const n = l.createContext("tile");
+function x({
+  className: o,
+  variant: a = "tile",
+  ...t
+}) {
+  return /* @__PURE__ */ r(n.Provider, { value: a, children: /* @__PURE__ */ r(
+    i.Root,
+    {
+      "data-slot": "radio-group",
+      "data-variant": a,
+      className: e(
+        a === "chip" ? "flex flex-wrap gap-2" : "grid gap-3",
+        o
+      ),
+      ...t
+    }
+  ) });
+}
+function y({
+  className: o,
+  children: a,
+  description: t,
+  expandedContent: d,
+  ...c
+}) {
+  return l.useContext(n) === "chip" ? /* @__PURE__ */ r(
+    i.Item,
+    {
+      "data-slot": "radio-group-item",
+      "data-variant": "chip",
+      className: e(
+        // Chip 本体と同一の chipVariants（CVA）を再利用。unselected=filled 意匠。
+        // レイアウト・サイズ・角丸・typo・focus リングはここから供給され、Chip 意匠変更に自動追従する。
+        p({ variant: "filled", size: "md", shape: "pill" }),
+        "cursor-pointer outline-none",
+        // checked = Chip の accent（selected）意匠。Chip accent と同一トークンを参照し、
+        // 静止=薄オレンジ / hover=ベタ塗りオレンジ（Text-on-Inverse）まで一致させる。
+        "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Brand-Cake-Orange)]",
+        "data-[state=checked]:hover:bg-[var(--Surface-Accent-Primary)] data-[state=checked]:hover:text-[var(--Text-on-Inverse)]",
+        // form 固有の状態（chipVariants に無い分のみ compose）。disabled の配色は chipVariants filled が担う。
+        "aria-invalid:border aria-invalid:border-[var(--Border-Caution)]",
+        "disabled:cursor-not-allowed",
+        o
+      ),
+      ...c,
+      children: a
+    }
+  ) : /* @__PURE__ */ s(
+    i.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: e(
+        // lint-scratch-allow: p-[15px] は border-2 を含めた見た目余白を Figma に合わせる補正値
+        "group flex cursor-pointer gap-2 rounded-lg border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-[15px] text-left outline-none transition-colors",
+        d ? "flex-col items-stretch" : "items-center",
+        "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
+        "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",
+        // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
+        // ring-2 で checked 状態（同じくオレンジ枠）と紛らわしかったため統一した。
+        m,
+        "aria-invalid:border-[var(--Border-Caution)]",
+        "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",
+        o
+      ),
+      ...c,
+      children: [
+        /* @__PURE__ */ s("span", { className: e("flex items-center gap-2", d && "w-full"), children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "data-slot": "radio-group-icon",
+              className: e(
+                "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] transition-colors",
+                "group-data-[state=checked]:border-[var(--Object-Accent-Primary)]",
+                "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Secondary)]"
+              ),
+              children: /* @__PURE__ */ r(
+                i.Indicator,
+                {
+                  "data-slot": "radio-group-indicator",
+                  className: "flex items-center justify-center",
+                  children: /* @__PURE__ */ r("span", { className: "size-2.5 rounded-full bg-[var(--Object-Accent-Primary)]" })
+                }
+              )
+            }
+          ),
+          (a || t) && /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            a && /* @__PURE__ */ r(
+              "span",
+              {
+                "data-slot": "radio-group-label",
+                className: e(
+                  "typo-body-lg text-[var(--Text-High-Emphasis)]",
+                  "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
+                ),
+                children: a
+              }
+            ),
+            t && /* @__PURE__ */ r(
+              "span",
+              {
+                "data-slot": "radio-group-description",
+                className: e(
+                  "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
+                  "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
+                ),
+                children: t
+              }
+            )
+          ] })
+        ] }),
+        d && /* @__PURE__ */ r(
+          "span",
+          {
+            "data-slot": "radio-group-expanded",
+            className: "hidden border-t border-[var(--Border-Medium-Emphasis)] pt-3 group-data-[state=checked]:block",
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  x as RadioGroup,
+  y as RadioGroupItem
+};

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

@@ -0,0 +1,76 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as c } from "../../lib/utils.js";
+import { Dialog as D, DialogClose as g, DialogContent as u, DialogDescription as m, DialogFooter as p, DialogHeader as M, DialogTitle as b, DialogTrigger as f } from "./dialog.js";
+import { Drawer as C, DrawerClose as v, DrawerContent as w, DrawerDescription as R, DrawerFooter as d, DrawerHeader as T, DrawerTitle as x, DrawerTrigger as h } from "./drawer.js";
+function s(o = 768) {
+  const [e, n] = l.useState(!1);
+  return l.useEffect(() => {
+    const i = window.matchMedia(`(max-width: ${o - 1}px)`), r = (a) => {
+      n(a.matches);
+    };
+    return r(i), i.addEventListener("change", r), () => i.removeEventListener("change", r);
+  }, [o]), e;
+}
+function L({ children: o, ...e }) {
+  return s() ? /* @__PURE__ */ t(C, { ...e, children: o }) : /* @__PURE__ */ t(D, { ...e, children: o });
+}
+function j({
+  className: o,
+  ...e
+}) {
+  const i = s() ? h : f;
+  return /* @__PURE__ */ t(i, { className: o, ...e });
+}
+function q({
+  className: o,
+  children: e,
+  ...n
+}) {
+  return s() ? /* @__PURE__ */ t(w, { className: c("px-4 pb-6", o), ...n, children: e }) : /* @__PURE__ */ t(u, { className: o, ...n, children: e });
+}
+function S({
+  className: o,
+  ...e
+}) {
+  const i = s() ? T : M;
+  return /* @__PURE__ */ t(i, { className: o, ...e });
+}
+function $({
+  className: o,
+  ...e
+}) {
+  const i = s() ? d : p;
+  return /* @__PURE__ */ t(i, { className: o, ...e });
+}
+function y({
+  className: o,
+  ...e
+}) {
+  const i = s() ? x : b;
+  return /* @__PURE__ */ t(i, { className: o, ...e });
+}
+function z({
+  className: o,
+  ...e
+}) {
+  const i = s() ? R : m;
+  return /* @__PURE__ */ t(i, { className: o, ...e });
+}
+function A({
+  ...o
+}) {
+  const n = s() ? v : g;
+  return /* @__PURE__ */ t(n, { ...o });
+}
+export {
+  L as ResponsiveDialog,
+  A as ResponsiveDialogClose,
+  q as ResponsiveDialogContent,
+  z as ResponsiveDialogDescription,
+  $ as ResponsiveDialogFooter,
+  S as ResponsiveDialogHeader,
+  y as ResponsiveDialogTitle,
+  j as ResponsiveDialogTrigger,
+  s as useIsMobile
+};

package/dist/components/foundations/scroll-area.js

@@ -0,0 +1,62 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import "react";
+import { ScrollArea as o } from "radix-ui";
+import { cn as t } from "../../lib/utils.js";
+function b({
+  className: e,
+  children: r,
+  ...a
+}) {
+  return /* @__PURE__ */ s(
+    o.Root,
+    {
+      "data-slot": "scroll-area",
+      className: t("relative", e),
+      ...a,
+      children: [
+        /* @__PURE__ */ l(
+          o.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            tabIndex: 0,
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children: r
+          }
+        ),
+        /* @__PURE__ */ l(c, {}),
+        /* @__PURE__ */ l(o.Corner, {})
+      ]
+    }
+  );
+}
+function c({
+  className: e,
+  orientation: r = "vertical",
+  ...a
+}) {
+  return /* @__PURE__ */ l(
+    o.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation: r,
+      className: t(
+        "flex touch-none p-px transition-colors select-none",
+        r === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        r === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ l(
+        o.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+export {
+  b as ScrollArea,
+  c as ScrollBar
+};