@cakejp/design-system 0.15.0 → 0.17.0

package/dist/components/foundations/form.js

@@ -0,0 +1,101 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as s from "react";
+import { Slot as f } from "radix-ui";
+import { FormProvider as u, Controller as F, useFormContext as I, useFormState as p } from "react-hook-form";
+import { cn as a } from "../../lib/utils.js";
+import { Label as x } from "./label.js";
+const y = u, c = s.createContext(
+  {}
+), S = ({
+  ...t
+}) => /* @__PURE__ */ m(c.Provider, { value: { name: t.name }, children: /* @__PURE__ */ m(F, { ...t }) }), d = () => {
+  const t = s.useContext(c), e = s.useContext(l), { getFieldState: o } = I(), r = p({ name: t.name }), n = o(t.name, r);
+  if (!t)
+    throw new Error("useFormField should be used within <FormField>");
+  const { id: i } = e;
+  return {
+    id: i,
+    name: t.name,
+    formItemId: `${i}-form-item`,
+    formDescriptionId: `${i}-form-item-description`,
+    formMessageId: `${i}-form-item-message`,
+    ...n
+  };
+}, l = s.createContext(
+  {}
+);
+function $({ className: t, ...e }) {
+  const o = s.useId();
+  return /* @__PURE__ */ m(l.Provider, { value: { id: o }, children: /* @__PURE__ */ m(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: a("grid gap-2", t),
+      ...e
+    }
+  ) });
+}
+function D({
+  className: t,
+  ...e
+}) {
+  const { error: o, formItemId: r } = d();
+  return /* @__PURE__ */ m(
+    x,
+    {
+      "data-slot": "form-label",
+      "data-error": !!o,
+      className: a("data-[error=true]:text-destructive", t),
+      htmlFor: r,
+      ...e
+    }
+  );
+}
+function M({ ...t }) {
+  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
+  return /* @__PURE__ */ m(
+    f.Root,
+    {
+      "data-slot": "form-control",
+      id: o,
+      "aria-describedby": e ? `${r} ${n}` : `${r}`,
+      "aria-invalid": !!e,
+      ...t
+    }
+  );
+}
+function N({ className: t, ...e }) {
+  const { formDescriptionId: o } = d();
+  return /* @__PURE__ */ m(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: o,
+      className: a("typo-body-sm text-muted-foreground", t),
+      ...e
+    }
+  );
+}
+function w({ className: t, ...e }) {
+  const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : e.children;
+  return n ? /* @__PURE__ */ m(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: r,
+      className: a("typo-body-sm text-destructive", t),
+      ...e,
+      children: n
+    }
+  ) : null;
+}
+export {
+  y as Form,
+  M as FormControl,
+  N as FormDescription,
+  S as FormField,
+  $ as FormItem,
+  D as FormLabel,
+  w as FormMessage,
+  d as useFormField
+};

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

@@ -0,0 +1,41 @@
+import { jsx as t } 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
+}) {
+  return /* @__PURE__ */ t(r.Root, { "data-slot": "hover-card", openDelay: o, closeDelay: e, ...a });
+}
+function c({
+  ...o
+}) {
+  return /* @__PURE__ */ t(r.Trigger, { "data-slot": "hover-card-trigger", ...o });
+}
+function f({
+  className: o,
+  align: e = "center",
+  sideOffset: a = 4,
+  ...d
+}) {
+  return /* @__PURE__ */ t(r.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ t(
+    r.Content,
+    {
+      "data-slot": "hover-card-content",
+      align: e,
+      sideOffset: a,
+      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
+      ),
+      ...d
+    }
+  ) });
+}
+export {
+  p as HoverCard,
+  f as HoverCardContent,
+  c as HoverCardTrigger
+};

package/dist/components/foundations/icon-badge.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const c = t(
+  "grid shrink-0 place-items-center rounded-full bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Object-Accent-Primary)]",
+  {
+    variants: {
+      size: {
+        md: "size-11 [&>svg]:size-5",
+        // 44px / アイコン 20px
+        ml: "size-12 [&>svg]:size-6",
+        // 48px / アイコン 24px
+        lg: "size-18 [&>svg]:size-[38px]"
+        // 72px / アイコン 38px（実測仕様。4の倍数外のため任意値）
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function g({
+  className: i,
+  size: e,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "icon-badge",
+      "data-size": e ?? "md",
+      className: s(c({ size: e }), i),
+      ...r
+    }
+  );
+}
+export {
+  g as IconBadge,
+  c as iconBadgeVariants
+};

package/dist/components/foundations/input.js

@@ -0,0 +1,74 @@
+import { jsx as d, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+import { useValueLength as g } from "../../lib/use-value-length.js";
+import { FOCUS_RING as y } from "../../lib/focus-ring.js";
+import { resolveNativeFieldAria as w, useFieldLabelling as N } from "../../lib/field-labelling.js";
+function R({
+  className: p,
+  type: u,
+  showCount: r,
+  maxLength: e,
+  value: o,
+  defaultValue: t,
+  onChange: i,
+  ref: f,
+  ...a
+}) {
+  const b = w(a, N()), { ref: m, length: l, syncFromDom: h } = g({
+    enabled: r === !0,
+    value: o,
+    defaultValue: t,
+    forwardedRef: f
+  }), n = /* @__PURE__ */ d(
+    "input",
+    {
+      type: u,
+      "data-slot": "input",
+      ref: m,
+      value: o,
+      defaultValue: t,
+      maxLength: e,
+      onChange: r ? (x) => {
+        h(), i?.(x);
+      } : i,
+      className: c(
+        // h-11（44px）= 入力コントロールの共通高さ。
+        // SelectTrigger(default) / DatePicker trigger / Button(default) と同値。
+        // tokens.json の touchTarget["text-input"].min = 44px を満たす最小サイズで、
+        // 管理画面の情報密度とタッチターゲットのバランスが取れる（iOS HIG の 44pt とも一致）。
+        // より大きくしたい場合は consumer が className="h-12" 等で上書きする。
+        "h-11 w-full min-w-0 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-1 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typo-label-sm file:text-foreground placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)]",
+        // フォーカス意匠は DS 共通（FOCUS_RING）。Tailwind の variant 順で
+        // focus-visible は hover より後に出力されるため、hover の枠線に必ず勝つ。
+        y,
+        "aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
+        p
+      ),
+      ...a,
+      ...b
+    }
+  );
+  if (!r) return n;
+  const v = e != null && l >= e;
+  return /* @__PURE__ */ s("div", { "data-slot": "input-with-count", className: "w-full", children: [
+    n,
+    /* @__PURE__ */ d("div", { className: "mt-1 flex justify-end", children: /* @__PURE__ */ s(
+      "span",
+      {
+        "data-slot": "input-count",
+        className: c(
+          "typo-body-xs",
+          v ? "text-[var(--Text-Caution)]" : "text-[var(--Text-Low-Emphasis)]"
+        ),
+        children: [
+          l,
+          e != null ? `/${e}` : ""
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  R as Input
+};

package/dist/components/foundations/label.js

@@ -0,0 +1,29 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import "react";
+import { Label as s } from "radix-ui";
+import { cn as i } from "../../lib/utils.js";
+function c({
+  className: e,
+  required: a,
+  children: t,
+  ...o
+}) {
+  return /* @__PURE__ */ r(
+    s.Root,
+    {
+      "data-slot": "label",
+      className: i(
+        "flex items-center gap-1.5 typo-label-md select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        e
+      ),
+      ...o,
+      children: [
+        t,
+        a && /* @__PURE__ */ l("span", { className: "typo-label-sm text-[var(--Text-Caution)]", children: "必須" })
+      ]
+    }
+  );
+}
+export {
+  c as Label
+};

package/dist/components/foundations/menubar.js

@@ -0,0 +1,252 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import "react";
+import { CheckIcon as u, CircleIcon as c, ChevronRightIcon as l } from "lucide-react";
+import { Menubar as n } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+function x({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    n.Root,
+    {
+      "data-slot": "menubar",
+      className: o(
+        "flex h-9 items-center gap-1 rounded-md border border-[var(--Border-Medium-Emphasis)] bg-background p-1 shadow-xs",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function h({
+  ...e
+}) {
+  return /* @__PURE__ */ a(n.Menu, { "data-slot": "menubar-menu", ...e });
+}
+function y({
+  ...e
+}) {
+  return /* @__PURE__ */ a(n.Group, { "data-slot": "menubar-group", ...e });
+}
+function m({
+  ...e
+}) {
+  return /* @__PURE__ */ a(n.Portal, { "data-slot": "menubar-portal", ...e });
+}
+function M({
+  ...e
+}) {
+  return /* @__PURE__ */ a(n.RadioGroup, { "data-slot": "menubar-radio-group", ...e });
+}
+function z({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    n.Trigger,
+    {
+      "data-slot": "menubar-trigger",
+      className: o(
+        "flex items-center rounded-sm px-2 py-1 typo-label-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function N({
+  className: e,
+  align: t = "start",
+  alignOffset: r = -4,
+  sideOffset: s = 8,
+  ...i
+}) {
+  return /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(
+    n.Content,
+    {
+      "data-slot": "menubar-content",
+      align: t,
+      alignOffset: r,
+      sideOffset: s,
+      className: o(
+        "z-[var(--Z-Popover)] min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden 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]: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
+      ),
+      ...i
+    }
+  ) });
+}
+function I({
+  className: e,
+  inset: t,
+  variant: r = "default",
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    n.Item,
+    {
+      "data-slot": "menubar-item",
+      "data-inset": t,
+      "data-variant": r,
+      className: o(
+        "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!",
+        e
+      ),
+      ...s
+    }
+  );
+}
+function _({
+  className: e,
+  children: t,
+  checked: r,
+  ...s
+}) {
+  return /* @__PURE__ */ d(
+    n.CheckboxItem,
+    {
+      "data-slot": "menubar-checkbox-item",
+      className: o(
+        "relative flex cursor-default items-center gap-2 rounded-xs 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",
+        e
+      ),
+      checked: r,
+      ...s,
+      children: [
+        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(u, { className: "size-4" }) }) }),
+        t
+      ]
+    }
+  );
+}
+function k({
+  className: e,
+  children: t,
+  ...r
+}) {
+  return /* @__PURE__ */ d(
+    n.RadioItem,
+    {
+      "data-slot": "menubar-radio-item",
+      className: o(
+        "relative flex cursor-default items-center gap-2 rounded-xs 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",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(c, { className: "size-2 fill-current" }) }) }),
+        t
+      ]
+    }
+  );
+}
+function C({
+  className: e,
+  inset: t,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    n.Label,
+    {
+      "data-slot": "menubar-label",
+      "data-inset": t,
+      className: o(
+        "px-2 py-1.5 typo-label-md data-[inset]:pl-8",
+        e
+      ),
+      ...r
+    }
+  );
+}
+function S({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    n.Separator,
+    {
+      "data-slot": "menubar-separator",
+      className: o("-mx-1 my-1 h-px bg-border", e),
+      ...t
+    }
+  );
+}
+function w({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "data-slot": "menubar-shortcut",
+      className: o(
+        "ml-auto typo-body-xs text-muted-foreground",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function R({
+  ...e
+}) {
+  return /* @__PURE__ */ a(n.Sub, { "data-slot": "menubar-sub", ...e });
+}
+function j({
+  className: e,
+  inset: t,
+  children: r,
+  ...s
+}) {
+  return /* @__PURE__ */ d(
+    n.SubTrigger,
+    {
+      "data-slot": "menubar-sub-trigger",
+      "data-inset": t,
+      className: o(
+        "flex cursor-default items-center rounded-sm px-2 py-1.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",
+        e
+      ),
+      ...s,
+      children: [
+        r,
+        /* @__PURE__ */ a(l, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+}
+function G({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    n.SubContent,
+    {
+      "data-slot": "menubar-sub-content",
+      className: o(
+        "z-[var(--Z-Popover)] min-w-[8rem] origin-(--radix-menubar-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
+      ),
+      ...t
+    }
+  );
+}
+export {
+  x as Menubar,
+  _ as MenubarCheckboxItem,
+  N as MenubarContent,
+  y as MenubarGroup,
+  I as MenubarItem,
+  C as MenubarLabel,
+  h as MenubarMenu,
+  m as MenubarPortal,
+  M as MenubarRadioGroup,
+  k as MenubarRadioItem,
+  S as MenubarSeparator,
+  w as MenubarShortcut,
+  R as MenubarSub,
+  G as MenubarSubContent,
+  j as MenubarSubTrigger,
+  z as MenubarTrigger
+};