@cakejp/design-system 0.15.0 → 0.17.0

package/dist/components/foundations/chip-variants.js

@@ -0,0 +1,41 @@
+import { cva as e } from "class-variance-authority";
+import { FOCUS_RING as a } from "../../lib/focus-ring.js";
+const t = e(
+  `inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none ${a}`,
+  {
+    variants: {
+      variant: {
+        filled: [
+          "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]",
+          "hover:bg-[var(--Surface-Tertiary)]",
+          "disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)]"
+        ].join(" "),
+        accent: [
+          "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+          "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
+          "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]"
+        ].join(" ")
+      },
+      size: {
+        sm: "min-h-8 px-3 py-1 typo-body-sm gap-1.5",
+        md: "min-h-9 px-3.5 py-1.5 typo-body-md gap-1.5",
+        lg: "min-h-11 px-5 py-2.5 typo-label-md gap-1.5",
+        // shrink-0 必須: flex row（サイズ選択の並び等）の直接の子になるため、
+        // 既定の flex-shrink:1 だと 48px タッチターゲットが min-content 幅まで潰れる
+        tile: "size-12 shrink-0 typo-body-md"
+      },
+      shape: {
+        pill: "rounded-full",
+        square: "rounded"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md",
+      shape: "pill"
+    }
+  }
+);
+export {
+  t as chipVariants
+};

package/dist/components/foundations/collapsible.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Collapsible as t } from "radix-ui";
+function a({
+  ...l
+}) {
+  return /* @__PURE__ */ o(t.Root, { "data-slot": "collapsible", ...l });
+}
+function r({
+  ...l
+}) {
+  return /* @__PURE__ */ o(
+    t.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...l
+    }
+  );
+}
+function n({
+  ...l
+}) {
+  return /* @__PURE__ */ o(
+    t.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...l
+    }
+  );
+}
+export {
+  a as Collapsible,
+  n as CollapsibleContent,
+  r as CollapsibleTrigger
+};

package/dist/components/foundations/command.js

@@ -0,0 +1,171 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import "react";
+import { Command as r } from "cmdk";
+import { SearchIcon as i } from "lucide-react";
+import { cn as a } from "../../lib/utils.js";
+import { Dialog as p, DialogHeader as l, DialogTitle as u, DialogDescription as g, DialogContent as h } from "./dialog.js";
+function f({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    r,
+    {
+      "data-slot": "command",
+      className: a(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        e
+      ),
+      ...o
+    }
+  );
+}
+function w({
+  title: e = "Command Palette",
+  description: o = "Search for a command to run...",
+  children: n,
+  className: m,
+  showCloseButton: s = !0,
+  ...c
+}) {
+  return /* @__PURE__ */ d(p, { ...c, children: [
+    /* @__PURE__ */ d(l, { className: "sr-only", children: [
+      /* @__PURE__ */ t(u, { children: e }),
+      /* @__PURE__ */ t(g, { children: o })
+    ] }),
+    /* @__PURE__ */ t(
+      h,
+      {
+        className: a("overflow-hidden p-0", m),
+        showCloseButton: s,
+        children: /* @__PURE__ */ t(f, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:typo-label-sm [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: n })
+      }
+    )
+  ] });
+}
+function C({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b border-[var(--Border-Medium-Emphasis)] px-3 focus-within:border-[var(--Focus-High-Emphasis)]",
+      children: [
+        /* @__PURE__ */ t(i, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ t(
+          r.Input,
+          {
+            "data-slot": "command-input",
+            className: a(
+              "flex h-10 w-full rounded-md bg-transparent py-3 typo-body-md outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              e
+            ),
+            ...o
+          }
+        )
+      ]
+    }
+  );
+}
+function N({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    r.List,
+    {
+      "data-slot": "command-list",
+      className: a(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        e
+      ),
+      ...o
+    }
+  );
+}
+function D({
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    r.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center typo-body-md",
+      ...e
+    }
+  );
+}
+function I({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    r.Group,
+    {
+      "data-slot": "command-group",
+      className: a(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:typo-label-sm [&_[cmdk-group-heading]]:text-muted-foreground",
+        e
+      ),
+      ...o
+    }
+  );
+}
+function S({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    r.Separator,
+    {
+      "data-slot": "command-separator",
+      className: a("-mx-1 h-px bg-border", e),
+      ...o
+    }
+  );
+}
+function E({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    r.Item,
+    {
+      "data-slot": "command-item",
+      className: a(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        e
+      ),
+      ...o
+    }
+  );
+}
+function z({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: a(
+        "ml-auto typo-body-xs text-muted-foreground",
+        e
+      ),
+      ...o
+    }
+  );
+}
+export {
+  f as Command,
+  w as CommandDialog,
+  D as CommandEmpty,
+  I as CommandGroup,
+  C as CommandInput,
+  E as CommandItem,
+  N as CommandList,
+  S as CommandSeparator,
+  z as CommandShortcut
+};

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

@@ -0,0 +1,225 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import "react";
+import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as c } from "lucide-react";
+import { ContextMenu as o } from "radix-ui";
+import { cn as r } from "../../lib/utils.js";
+function g({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "context-menu", ...t });
+}
+function v({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "context-menu-trigger", ...t });
+}
+function b({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Group, { "data-slot": "context-menu-group", ...t });
+}
+function h({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "context-menu-portal", ...t });
+}
+function C({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Sub, { "data-slot": "context-menu-sub", ...t });
+}
+function y({
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    o.RadioGroup,
+    {
+      "data-slot": "context-menu-radio-group",
+      ...t
+    }
+  );
+}
+function M({
+  className: t,
+  inset: n,
+  children: a,
+  ...s
+}) {
+  return /* @__PURE__ */ d(
+    o.SubTrigger,
+    {
+      "data-slot": "context-menu-sub-trigger",
+      "data-inset": n,
+      className: r(
+        "flex cursor-default items-center rounded-sm px-2 py-1.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",
+        t
+      ),
+      ...s,
+      children: [
+        a,
+        /* @__PURE__ */ e(c, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function z({
+  className: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    o.SubContent,
+    {
+      "data-slot": "context-menu-sub-content",
+      className: r(
+        "z-[var(--Z-Popover)] min-w-[8rem] origin-(--radix-context-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",
+        t
+      ),
+      ...n
+    }
+  );
+}
+function N({
+  className: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
+    o.Content,
+    {
+      "data-slot": "context-menu-content",
+      collisionPadding: 8,
+      className: r(
+        "fixed z-[var(--Z-Popover)] max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 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",
+        t
+      ),
+      ...n
+    }
+  ) });
+}
+function _({
+  className: t,
+  inset: n,
+  variant: a = "default",
+  ...s
+}) {
+  return /* @__PURE__ */ e(
+    o.Item,
+    {
+      "data-slot": "context-menu-item",
+      "data-inset": n,
+      "data-variant": a,
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.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!",
+        t
+      ),
+      ...s
+    }
+  );
+}
+function I({
+  className: t,
+  children: n,
+  checked: a,
+  ...s
+}) {
+  return /* @__PURE__ */ d(
+    o.CheckboxItem,
+    {
+      "data-slot": "context-menu-checkbox-item",
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 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",
+        t
+      ),
+      checked: a,
+      ...s,
+      children: [
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(i, { className: "size-4" }) }) }),
+        n
+      ]
+    }
+  );
+}
+function k({
+  className: t,
+  children: n,
+  ...a
+}) {
+  return /* @__PURE__ */ d(
+    o.RadioItem,
+    {
+      "data-slot": "context-menu-radio-item",
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 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",
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(u, { className: "size-2 fill-current" }) }) }),
+        n
+      ]
+    }
+  );
+}
+function S({
+  className: t,
+  inset: n,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Label,
+    {
+      "data-slot": "context-menu-label",
+      "data-inset": n,
+      className: r(
+        "px-2 py-1.5 typo-label-md text-foreground data-[inset]:pl-8",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function w({
+  className: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    o.Separator,
+    {
+      "data-slot": "context-menu-separator",
+      className: r("-mx-1 my-1 h-px bg-border", t),
+      ...n
+    }
+  );
+}
+function P({
+  className: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "data-slot": "context-menu-shortcut",
+      className: r(
+        "ml-auto typo-body-xs text-muted-foreground",
+        t
+      ),
+      ...n
+    }
+  );
+}
+export {
+  g as ContextMenu,
+  I as ContextMenuCheckboxItem,
+  N as ContextMenuContent,
+  b as ContextMenuGroup,
+  _ as ContextMenuItem,
+  S as ContextMenuLabel,
+  h as ContextMenuPortal,
+  y as ContextMenuRadioGroup,
+  k as ContextMenuRadioItem,
+  w as ContextMenuSeparator,
+  P as ContextMenuShortcut,
+  C as ContextMenuSub,
+  z as ContextMenuSubContent,
+  M as ContextMenuSubTrigger,
+  v as ContextMenuTrigger
+};

package/dist/components/foundations/data-table.js

@@ -0,0 +1,59 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { cva as r } from "class-variance-authority";
+import "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
+import "iconsax-reactjs/dist/esm/ArrowUp.js";
+import "iconsax-reactjs/dist/esm/ArrowDown.js";
+import "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import "iconsax-reactjs/dist/esm/More.js";
+import "iconsax-reactjs/dist/esm/Add.js";
+import "iconsax-reactjs/dist/esm/ExportSquare.js";
+import { cn as o } from "../../lib/utils.js";
+function x({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "data-table",
+      className: o("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", t),
+      ...a
+    }
+  );
+}
+r(
+  "group/row border-b border-[var(--Border-Low-Emphasis)] transition-colors",
+  {
+    variants: {
+      state: {
+        default: "hover:bg-[var(--Surface-Tertiary)]",
+        selected: "bg-[var(--Surface-Accent-Primary-Light)] hover:bg-[var(--Surface-Accent-Primary-Light)] border-l-[3px] border-l-[var(--Brand-Cake-Orange)]"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+r(
+  "px-4 py-4 align-middle whitespace-nowrap typo-body-md text-[var(--Text-High-Emphasis)] [&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
+  {
+    variants: {
+      width: {
+        auto: "",
+        max: "min-w-[320px] max-w-[360px]",
+        hug: "min-w-0 w-0"
+      },
+      align: {
+        left: "text-left",
+        right: "text-right",
+        center: "text-center"
+      }
+    },
+    defaultVariants: {
+      width: "auto",
+      align: "left"
+    }
+  }
+);
+export {
+  x as DataTable
+};

package/dist/components/foundations/dialog.js

@@ -0,0 +1,148 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { XIcon as d } from "lucide-react";
+import { Dialog as o } from "radix-ui";
+import { cn as i } from "../../lib/utils.js";
+import { Button as c } from "./button.js";
+function D({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Root, { "data-slot": "dialog", ...a });
+}
+function y({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
+}
+function g({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dialog-portal", ...a });
+}
+function b({
+  ...a
+}) {
+  return /* @__PURE__ */ t(o.Close, { "data-slot": "dialog-close", ...a });
+}
+function u({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    o.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: i(
+        "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
+    }
+  );
+}
+function N({
+  className: a,
+  children: e,
+  showCloseButton: l = !0,
+  ...r
+}) {
+  return /* @__PURE__ */ s(g, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ t(u, {}),
+    /* @__PURE__ */ s(
+      o.Content,
+      {
+        "data-slot": "dialog-content",
+        onOpenAutoFocus: (n) => n.preventDefault(),
+        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-background dark:bg-[var(--Primitive-Gray-800)] 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 sm:max-w-lg",
+          a
+        ),
+        ...r,
+        children: [
+          e,
+          l && /* @__PURE__ */ s(
+            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",
+              children: [
+                /* @__PURE__ */ t(d, { className: "size-5" }),
+                /* @__PURE__ */ t("span", { className: "sr-only", children: "閉じる" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function T({ className: a, ...e }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: i("flex flex-col gap-2 text-center sm:text-left", a),
+      ...e
+    }
+  );
+}
+function C({
+  className: a,
+  showCloseButton: e = !1,
+  children: l,
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: i(
+        "flex flex-col gap-2 sm:flex-row sm:justify-end",
+        a
+      ),
+      ...r,
+      children: [
+        l,
+        e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(c, { variant: "tertiary", children: "Close" }) })
+      ]
+    }
+  );
+}
+function w({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    o.Title,
+    {
+      "data-slot": "dialog-title",
+      className: i("typo-heading-lg text-[var(--Text-High-Emphasis)]", a),
+      ...e
+    }
+  );
+}
+function z({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    o.Description,
+    {
+      "data-slot": "dialog-description",
+      className: i("typo-body-sm text-[var(--Text-Medium-Emphasis)]", a),
+      ...e
+    }
+  );
+}
+export {
+  D as Dialog,
+  b as DialogClose,
+  N as DialogContent,
+  z as DialogDescription,
+  C as DialogFooter,
+  T as DialogHeader,
+  u as DialogOverlay,
+  g as DialogPortal,
+  w as DialogTitle,
+  y as DialogTrigger
+};