@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/foundations/button.js

@@ -0,0 +1,99 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { cva as n } from "class-variance-authority";
+import { Slot as s } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
+import { FOCUS_RING as l } from "../../lib/focus-ring.js";
+const b = n(
+  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${l} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        secondary: "border border-transparent outline outline-2 outline-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)] hover:border-[var(--Hover-Primary-Button)] hover:outline-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:outline-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:outline-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        tertiary: "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
+        destructive: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-Sun-900)] active:bg-[var(--Primitive-Sun-900)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        ghost: "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Text-Button)] active:bg-[var(--Active-Text-Button)] disabled:text-[var(--Text-Disable)]",
+        link: "text-[var(--Brand-Cake-Orange)] underline-offset-4 hover:underline disabled:text-[var(--Text-Disable)]",
+        /**
+         * inverse — 暗背景の上で使う primary CTA。
+         * 白背景 + accent text (Brand Cake Orange)。
+         * hover で薄く陰り、active で更に。
+         */
+        inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Cake-Orange)] hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-800)] disabled:bg-[var(--Primitive-White-alpha-300)] disabled:text-[var(--Text-Disable)]",
+        /**
+         * ghost-inverse — 暗背景の上で使う secondary CTA。
+         * 透過背景 + 白テキスト + 白ボーダー。
+         * hover で白 alpha がうっすら入る。
+         */
+        "ghost-inverse": "border border-[var(--Primitive-White-alpha-300)] bg-transparent text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-White-alpha-200)] hover:border-[var(--Primitive-White-alpha-1000)] active:bg-[var(--Primitive-White-alpha-300)] disabled:border-[var(--Primitive-White-alpha-200)] disabled:text-[var(--Primitive-White-alpha-300)]",
+        /**
+         * overlay — 画像・メディアの上に載せる操作ボタン。
+         * 半透過白の下地（Surface-Overlay-Light）+ 微細ボーダー + shadow-md + backdrop-blur。
+         * ImageCarousel の矢印ボタンと同系の「メディア上に浮く白い円形/角丸ボタン」意匠。
+         * icon 系 size（`size="icon"` + `className="rounded-full"` 等）と組み合わせて使う。
+         */
+        overlay: (
+          // 下地 Surface-Overlay-Light は「メディア上の可読性のため light/dark で切替えない」
+          // 設計（常に白80%）。文字色にセマンティック（dark で白に反転する Text-High-Emphasis）を
+          // 使うとダークモードで白地×白文字になり消えるため、文字も非反転の Primitive 固定にする
+          "border border-[var(--Border-Hairline)] bg-[var(--Surface-Overlay-Light)] text-[var(--Primitive-Gray-900)] shadow-md backdrop-blur-sm hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-1000)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)] disabled:shadow-none"
+        )
+      },
+      size: {
+        /**
+         * default — 44px（h-11）。フォーム入力コントロール（Input / SelectTrigger default /
+         * DatePicker trigger）と同じ共通高さで、入力行にボタンを並置しても揃う。
+         * tokens.json の touchTarget["text-input"].min = 44px を満たす（iOS HIG の 44pt と一致）。
+         */
+        default: "h-11 px-5 py-2 has-[>svg]:px-4",
+        xs: "h-6 gap-1 rounded px-2 typo-label-sm has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-lg px-3 has-[>svg]:px-2.5",
+        /**
+         * lg — 48px（h-12）。default(44px) との差は 4px だが、角丸（rounded-xl）・
+         * タイポ（typo-label-lg）・padding も一段上がるため視覚的な段は保たれる。
+         * 48px は rules.json の touchTarget recommended 値でもあり、主要 CTA の受け皿として据え置く。
+         */
+        lg: "h-12 rounded-xl px-6 typo-label-lg has-[>svg]:px-5",
+        xl: "h-14 rounded-xl px-6 typo-label-lg has-[>svg]:px-5",
+        /**
+         * hero — トップページの hero / final-CTA 専用の特大 CTA。
+         * min-height 3.5rem (56px), padding 0 1.5rem, fully rounded。
+         * xl と異なり pill shape (rounded-full) で印象的に。
+         */
+        hero: "min-h-14 rounded-full px-6 typo-label-lg has-[>svg]:px-5",
+        icon: "size-9 rounded-lg",
+        "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-lg",
+        "icon-lg": "size-10 rounded-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function m({
+  className: a,
+  variant: e = "default",
+  size: r = "default",
+  asChild: t = !1,
+  ...i
+}) {
+  const v = t ? s.Root : "button";
+  return /* @__PURE__ */ o(
+    v,
+    {
+      "data-slot": "button",
+      "data-variant": e,
+      "data-size": r,
+      className: d(b({ variant: e, size: r, className: a })),
+      ...i
+    }
+  );
+}
+export {
+  m as Button,
+  b as buttonVariants
+};

package/dist/components/foundations/calendar.js

@@ -0,0 +1,173 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as m from "react";
+import { ChevronLeftIcon as y, ChevronRightIcon as x, ChevronDownIcon as h } from "lucide-react";
+import { getDefaultClassNames as f, DayPicker as w } from "react-day-picker";
+import { cn as e } from "../../lib/utils.js";
+import { buttonVariants as p, Button as _ } from "./button.js";
+function j({
+  className: c,
+  classNames: i,
+  showOutsideDays: r = !0,
+  captionLayout: s = "label",
+  buttonVariant: l = "ghost",
+  formatters: u,
+  components: b,
+  ...g
+}) {
+  const t = f();
+  return /* @__PURE__ */ n(
+    w,
+    {
+      showOutsideDays: r,
+      className: e(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        c
+      ),
+      captionLayout: s,
+      formatters: {
+        formatMonthDropdown: (a) => a.toLocaleString("default", { month: "short" }),
+        ...u
+      },
+      classNames: {
+        root: e("w-fit", t.root),
+        months: e(
+          "relative flex flex-col gap-4 md:flex-row",
+          t.months
+        ),
+        month: e("flex w-full flex-col gap-4", t.month),
+        nav: e(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          t.nav
+        ),
+        button_previous: e(
+          p({ variant: l }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          t.button_previous
+        ),
+        button_next: e(
+          p({ variant: l }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          t.button_next
+        ),
+        month_caption: e(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          t.month_caption
+        ),
+        dropdowns: e(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 typo-label-sm",
+          t.dropdowns
+        ),
+        dropdown_root: e(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          t.dropdown_root
+        ),
+        dropdown: e(
+          "absolute inset-0 bg-popover opacity-0",
+          t.dropdown
+        ),
+        caption_label: e(
+          "typo-label-sm select-none text-[var(--Text-Medium-Emphasis)]",
+          s === "label" ? "" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          t.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: e("flex", t.weekdays),
+        weekday: e(
+          "flex-1 rounded-md typo-body-sm text-muted-foreground select-none",
+          t.weekday
+        ),
+        week: e("mt-2 flex w-full", t.week),
+        week_number_header: e(
+          "w-(--cell-size) select-none",
+          t.week_number_header
+        ),
+        week_number: e(
+          "typo-body-sm text-muted-foreground select-none",
+          t.week_number
+        ),
+        day: e(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          g.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          t.day
+        ),
+        range_start: e(
+          "rounded-l-md bg-accent",
+          t.range_start
+        ),
+        range_middle: e("rounded-none", t.range_middle),
+        range_end: e("rounded-r-md bg-accent", t.range_end),
+        today: e(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          t.today
+        ),
+        outside: e(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          t.outside
+        ),
+        disabled: e(
+          "text-muted-foreground opacity-50",
+          t.disabled
+        ),
+        hidden: e("invisible", t.hidden),
+        ...i
+      },
+      components: {
+        Root: ({ className: a, rootRef: d, ...o }) => /* @__PURE__ */ n(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: d,
+            className: e(a),
+            ...o
+          }
+        ),
+        Chevron: ({ className: a, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n(y, { className: e("size-4", a), ...o }) : d === "right" ? /* @__PURE__ */ n(
+          x,
+          {
+            className: e("size-4", a),
+            ...o
+          }
+        ) : /* @__PURE__ */ n(h, { className: e("size-4", a), ...o }),
+        DayButton: v,
+        WeekNumber: ({ children: a, ...d }) => /* @__PURE__ */ n("td", { ...d, children: /* @__PURE__ */ n("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: a }) }),
+        ...b
+      },
+      ...g
+    }
+  );
+}
+function v({
+  className: c,
+  day: i,
+  modifiers: r,
+  ...s
+}) {
+  const l = f(), u = m.useRef(null);
+  return m.useEffect(() => {
+    r.focused && u.current?.focus();
+  }, [r.focused]), /* @__PURE__ */ n(
+    _,
+    {
+      ref: u,
+      variant: "ghost",
+      size: "icon",
+      "data-day": i.date.toLocaleDateString(),
+      "data-selected-single": r.selected && !r.range_start && !r.range_end && !r.range_middle,
+      "data-range-start": r.range_start,
+      "data-range-end": r.range_end,
+      "data-range-middle": r.range_middle,
+      className: e(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 typo-body-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-[var(--Surface-Accent-Primary-Light)] data-[range-middle=true]:text-[var(--Text-High-Emphasis)] data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:typo-body-xs [&>span]:opacity-70",
+        l.day,
+        c
+      ),
+      ...s
+    }
+  );
+}
+export {
+  j as Calendar,
+  v as CalendarDayButton
+};

package/dist/components/foundations/card.js

@@ -0,0 +1,109 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { cn as d } from "../../lib/utils.js";
+const s = o(
+  "flex flex-col gap-4 rounded-2xl border border-[var(--Border-Medium-Emphasis)] p-4 text-card-foreground",
+  {
+    variants: {
+      surface: {
+        default: "bg-[var(--card-surface,var(--card))]",
+        primary: "bg-[var(--Surface-Primary)]"
+      }
+    },
+    defaultVariants: {
+      surface: "default"
+    }
+  }
+);
+function u({
+  className: r,
+  surface: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card",
+      "data-surface": a ?? "default",
+      className: d(s({ surface: a }), r),
+      ...e
+    }
+  );
+}
+function f({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: d(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
+        r
+      ),
+      ...a
+    }
+  );
+}
+function m({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: d("typo-label-md", r),
+      ...a
+    }
+  );
+}
+function p({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: d("typo-body-sm text-muted-foreground", r),
+      ...a
+    }
+  );
+}
+function v({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: d(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        r
+      ),
+      ...a
+    }
+  );
+}
+function b({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: d(r),
+      ...a
+    }
+  );
+}
+function g({ className: r, ...a }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: d("flex items-center [.border-t]:pt-4", r),
+      ...a
+    }
+  );
+}
+export {
+  u as Card,
+  v as CardAction,
+  b as CardContent,
+  p as CardDescription,
+  g as CardFooter,
+  f as CardHeader,
+  m as CardTitle,
+  s as cardVariants
+};

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

@@ -0,0 +1,111 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import "react";
+import m from "iconsax-reactjs/dist/esm/TickSquare.js";
+import { Checkbox as i } from "radix-ui";
+import { cn as e } from "../../lib/utils.js";
+import { FOCUS_RING as n } from "../../lib/focus-ring.js";
+function f({
+  className: d,
+  ...a
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "checkbox-card-group",
+      className: e("grid gap-3", d),
+      ...a
+    }
+  );
+}
+function g({
+  className: d,
+  children: a,
+  description: c,
+  expandedContent: t,
+  badge: o,
+  ...l
+}) {
+  return /* @__PURE__ */ s(
+    i.Root,
+    {
+      "data-slot": "checkbox-card-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",
+        t ? "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 で選択状態と紛らわしかったため統一した。
+        n,
+        "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)]",
+        d
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ s("span", { className: e("flex items-center gap-2", t && "w-full"), children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "data-slot": "checkbox-card-icon",
+              className: e(
+                // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
+                "flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors",
+                "group-data-[state=checked]:border-transparent group-data-[state=checked]:bg-transparent",
+                "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Secondary)]"
+              ),
+              children: /* @__PURE__ */ r(
+                i.Indicator,
+                {
+                  "data-slot": "checkbox-card-indicator",
+                  className: "flex items-center justify-center",
+                  children: /* @__PURE__ */ r(m, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
+                }
+              )
+            }
+          ),
+          (a || c || o) && /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            (a || o) && /* @__PURE__ */ s("span", { className: "flex items-center gap-1.5", children: [
+              a && /* @__PURE__ */ r(
+                "span",
+                {
+                  "data-slot": "checkbox-card-label",
+                  className: e(
+                    "typo-body-lg text-[var(--Text-High-Emphasis)]",
+                    "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
+                  ),
+                  children: a
+                }
+              ),
+              o && /* @__PURE__ */ r("span", { "data-slot": "checkbox-card-badge", children: o })
+            ] }),
+            c && /* @__PURE__ */ r(
+              "span",
+              {
+                "data-slot": "checkbox-card-description",
+                className: e(
+                  "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
+                  "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
+                ),
+                children: c
+              }
+            )
+          ] })
+        ] }),
+        t && /* @__PURE__ */ r(
+          "span",
+          {
+            "data-slot": "checkbox-card-expanded",
+            className: "hidden border-t border-[var(--Border-Medium-Emphasis)] pt-3 group-data-[state=checked]:block",
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  f as CheckboxCardGroup,
+  g as CheckboxCardItem
+};

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

@@ -0,0 +1,92 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import x from "iconsax-reactjs/dist/esm/TickSquare.js";
+import { Checkbox as l } from "radix-ui";
+import { cn as s } from "../../lib/utils.js";
+import { Label as b } from "./label.js";
+function g({
+  label: o,
+  required: c,
+  helpText: r,
+  error: a,
+  columns: t = 2,
+  children: d,
+  className: n
+}) {
+  const m = t === 1 ? "grid-cols-1" : t === 3 ? "grid-cols-3" : "grid-cols-2";
+  return /* @__PURE__ */ i(
+    "fieldset",
+    {
+      "data-slot": "checkbox-group",
+      className: s("flex flex-col gap-3", n),
+      "aria-invalid": !!a || void 0,
+      children: [
+        /* @__PURE__ */ i("legend", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "typo-label-md", children: o }),
+          c && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Caution)] typo-label-xs text-[var(--Text-on-Inverse)]", children: "必須" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: s("grid gap-2", m), children: d }),
+        r && !a && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: r }),
+        a && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Caution)]", role: "alert", children: a })
+      ]
+    }
+  );
+}
+function N({
+  className: o,
+  children: c,
+  description: r,
+  ...a
+}) {
+  const t = p.useId();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "checkbox-group-item",
+      className: s("flex items-start gap-2", o),
+      children: [
+        /* @__PURE__ */ e(
+          l.Root,
+          {
+            id: t,
+            className: s(
+              // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
+              "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors outline-none mt-0.5",
+              "data-[state=checked]:border-transparent data-[state=checked]:bg-transparent",
+              "focus-visible:border-[var(--Object-Accent-Primary)] focus-visible:ring-2 focus-visible:ring-[var(--Object-Accent-Primary)]/20",
+              "aria-invalid:border-[var(--Border-Caution)]",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            ...a,
+            children: /* @__PURE__ */ e(l.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+              x,
+              {
+                size: 24,
+                variant: "Bold",
+                className: "text-[var(--Object-Accent-Primary)]"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ e(
+            b,
+            {
+              htmlFor: t,
+              className: s(
+                "typo-body-md cursor-pointer",
+                "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
+              ),
+              children: c
+            }
+          ),
+          r && /* @__PURE__ */ e("span", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: r })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  g as CheckboxGroup,
+  N as CheckboxGroupItem
+};

package/dist/components/foundations/checkbox.js

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import * as p from "react";
+import y from "iconsax-reactjs/dist/esm/TickSquare.js";
+import k from "iconsax-reactjs/dist/esm/MinusSquare.js";
+import { Checkbox as l } from "radix-ui";
+import { cn as b } from "../../lib/utils.js";
+import { FOCUS_RING as g } from "../../lib/focus-ring.js";
+import { useFieldLabelling as N, resolveFieldAria as T } from "../../lib/field-labelling.js";
+function m({
+  className: i,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Root,
+    {
+      "data-slot": "checkbox",
+      className: b(
+        // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
+        "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors outline-none",
+        "data-[state=checked]:border-transparent data-[state=checked]:bg-transparent",
+        "data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-transparent",
+        // hover はフォーカス中に抑制する（checked 時の border-transparent が
+        // フォーカスリングの枠を消してしまうため）。
+        "hover:border-[var(--Focus-High-Emphasis)] data-[state=checked]:hover:not-focus-visible:border-transparent data-[state=indeterminate]:hover:not-focus-visible:border-transparent",
+        g,
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-[var(--Border-Medium-Emphasis)]",
+        i
+      ),
+      ...a,
+      children: /* @__PURE__ */ e(
+        l.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center",
+          children: a.checked === "indeterminate" ? /* @__PURE__ */ e(k, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" }) : /* @__PURE__ */ e(y, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
+        }
+      )
+    }
+  );
+}
+function w({
+  label: i,
+  description: a,
+  count: o,
+  containerClassName: h,
+  className: s,
+  id: u,
+  ...r
+}) {
+  const v = N(), x = p.useId(), t = u ?? x, d = `${t}-label`, n = a ? `${t}-description` : void 0;
+  if (i === void 0) {
+    const f = T({ ...r, id: t }, v);
+    return /* @__PURE__ */ e(m, { id: t, className: s, ...r, ...f });
+  }
+  return /* @__PURE__ */ c(
+    "label",
+    {
+      htmlFor: t,
+      "data-slot": "checkbox-row",
+      "data-disabled": r.disabled || void 0,
+      className: b(
+        "flex items-center gap-3 rounded-md px-3 py-2 transition-colors cursor-pointer",
+        "hover:bg-[var(--Surface-Tertiary)]",
+        "has-[:focus-visible]:bg-[var(--Surface-Tertiary)]",
+        r.disabled && "cursor-not-allowed opacity-60 hover:bg-transparent has-[:focus-visible]:bg-transparent",
+        h
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            id: t,
+            className: s,
+            "aria-labelledby": r["aria-label"] ? void 0 : d,
+            "aria-describedby": n,
+            ...r
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ e("span", { id: d, className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: i }),
+          a && /* @__PURE__ */ e("span", { id: n, className: "block typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-0.5", children: a })
+        ] }),
+        o !== void 0 && /* @__PURE__ */ e("span", { className: "shrink-0 typo-label-sm text-[var(--Text-Medium-Emphasis)] tabular-nums", children: o.toLocaleString() })
+      ]
+    }
+  );
+}
+export {
+  w as Checkbox
+};