@cakejp/design-system 0.16.0 → 0.17.1

package/dist/components/foundations/select.js

@@ -0,0 +1,190 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import "react";
+import { CheckIcon as c, ChevronDownIcon as i, ChevronUpIcon as u } from "lucide-react";
+import { Select as a } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+import { FOCUS_RING as m } from "../../lib/focus-ring.js";
+import { resolveFieldAria as p, useFieldLabelling as f } from "../../lib/field-labelling.js";
+function z({
+  ...e
+}) {
+  return /* @__PURE__ */ t(a.Root, { "data-slot": "select", ...e });
+}
+function B({
+  ...e
+}) {
+  return /* @__PURE__ */ t(a.Group, { "data-slot": "select-group", ...e });
+}
+function I({
+  ...e
+}) {
+  return /* @__PURE__ */ t(a.Value, { "data-slot": "select-value", ...e });
+}
+function C({
+  className: e,
+  size: r = "default",
+  children: s,
+  ...l
+}) {
+  const n = p(l, f());
+  return /* @__PURE__ */ d(
+    a.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": r,
+      className: o(
+        "flex w-full items-center justify-between gap-2 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-md whitespace-nowrap transition-[color,box-shadow,border-color] outline-none hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        // フォーカス意匠は DS 共通（FOCUS_RING）。
+        m,
+        // 高さは「素のクラス」で当てる。data 属性セレクタ（data-[size=default]:h-10）だと
+        // 詳細度が高く、consumer の className="h-14" 等が効かず twMerge でも打ち消せないため。
+        // default=44px は Input / DatePicker trigger / Button(default) と一致させている
+        // （検索 + 絞り込みセレクト + ボタンの並置が定番）。
+        r === "sm" ? "h-9" : "h-11",
+        e
+      ),
+      ...l,
+      ...n,
+      children: [
+        s,
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "size-4 text-[var(--Text-High-Emphasis)]" }) })
+      ]
+    }
+  );
+}
+function _({
+  className: e,
+  children: r,
+  position: s = "item-aligned",
+  align: l = "center",
+  ...n
+}) {
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ d(
+    a.Content,
+    {
+      "data-slot": "select-content",
+      className: o(
+        "relative z-[var(--Z-Popover)] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover 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",
+        s === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        e
+      ),
+      position: s,
+      align: l,
+      ...n,
+      children: [
+        /* @__PURE__ */ t(g, {}),
+        /* @__PURE__ */ t(
+          a.Viewport,
+          {
+            className: o(
+              "p-1",
+              s === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children: r
+          }
+        ),
+        /* @__PURE__ */ t(v, {})
+      ]
+    }
+  ) });
+}
+function j({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    a.Label,
+    {
+      "data-slot": "select-label",
+      className: o("px-2 py-1.5 typo-body-sm text-muted-foreground", e),
+      ...r
+    }
+  );
+}
+function E({
+  className: e,
+  children: r,
+  ...s
+}) {
+  return /* @__PURE__ */ d(
+    a.Item,
+    {
+      "data-slot": "select-item",
+      className: o(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-2.5 pr-8 pl-3 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        e
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            "data-slot": "select-item-indicator",
+            className: "absolute right-2 flex size-3.5 items-center justify-center",
+            children: /* @__PURE__ */ t(a.ItemIndicator, { children: /* @__PURE__ */ t(c, { className: "size-4" }) })
+          }
+        ),
+        /* @__PURE__ */ t(a.ItemText, { children: r })
+      ]
+    }
+  );
+}
+function T({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    a.Separator,
+    {
+      "data-slot": "select-separator",
+      className: o("pointer-events-none -mx-1 my-1 h-px bg-border", e),
+      ...r
+    }
+  );
+}
+function g({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    a.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: o(
+        "flex cursor-default items-center justify-center py-1",
+        e
+      ),
+      ...r,
+      children: /* @__PURE__ */ t(u, { className: "size-4" })
+    }
+  );
+}
+function v({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    a.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: o(
+        "flex cursor-default items-center justify-center py-1",
+        e
+      ),
+      ...r,
+      children: /* @__PURE__ */ t(i, { className: "size-4" })
+    }
+  );
+}
+export {
+  z as Select,
+  _ as SelectContent,
+  B as SelectGroup,
+  E as SelectItem,
+  j as SelectLabel,
+  v as SelectScrollDownButton,
+  g as SelectScrollUpButton,
+  T as SelectSeparator,
+  C as SelectTrigger,
+  I as SelectValue
+};

package/dist/components/foundations/separator.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import { Separator as n } from "radix-ui";
+import { cn as e } from "../../lib/utils.js";
+function d({
+  className: t,
+  orientation: o = "horizontal",
+  decorative: r = !0,
+  ...a
+}) {
+  return /* @__PURE__ */ i(
+    n.Root,
+    {
+      "data-slot": "separator",
+      decorative: r,
+      orientation: o,
+      className: e(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        t
+      ),
+      ...a
+    }
+  );
+}
+export {
+  d as Separator
+};

package/dist/components/foundations/sheet.js

@@ -0,0 +1,130 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { XIcon as u } from "lucide-react";
+import { Dialog as a } from "radix-ui";
+import { cn as r } from "../../lib/utils.js";
+function x({ ...t }) {
+  return /* @__PURE__ */ e(a.Root, { "data-slot": "sheet", ...t });
+}
+function b({
+  ...t
+}) {
+  return /* @__PURE__ */ e(a.Trigger, { "data-slot": "sheet-trigger", ...t });
+}
+function y({
+  ...t
+}) {
+  return /* @__PURE__ */ e(a.Close, { "data-slot": "sheet-close", ...t });
+}
+function c({
+  ...t
+}) {
+  return /* @__PURE__ */ e(a.Portal, { "data-slot": "sheet-portal", ...t });
+}
+function f({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    a.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: r(
+        "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",
+        t
+      ),
+      ...o
+    }
+  );
+}
+function S({
+  className: t,
+  children: o,
+  side: s = "right",
+  showCloseButton: l = !0,
+  ...d
+}) {
+  return /* @__PURE__ */ i(c, { children: [
+    /* @__PURE__ */ e(f, {}),
+    /* @__PURE__ */ i(
+      a.Content,
+      {
+        "data-slot": "sheet-content",
+        onOpenAutoFocus: (n) => n.preventDefault(),
+        onCloseAutoFocus: (n) => n.preventDefault(),
+        className: r(
+          "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
+          s === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          s === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          s === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          s === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          t
+        ),
+        ...d,
+        children: [
+          o,
+          l && /* @__PURE__ */ i(a.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:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ e(u, { className: "size-5" }),
+            /* @__PURE__ */ e("span", { className: "sr-only", children: "閉じる" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function N({ className: t, ...o }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: r("flex flex-col gap-1.5 p-4", t),
+      ...o
+    }
+  );
+}
+function w({ className: t, ...o }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: r("mt-auto flex flex-col gap-2 p-4", t),
+      ...o
+    }
+  );
+}
+function D({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    a.Title,
+    {
+      "data-slot": "sheet-title",
+      className: r("typo-heading-lg text-foreground", t),
+      ...o
+    }
+  );
+}
+function T({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    a.Description,
+    {
+      "data-slot": "sheet-description",
+      className: r("typo-body-sm text-muted-foreground", t),
+      ...o
+    }
+  );
+}
+export {
+  x as Sheet,
+  y as SheetClose,
+  S as SheetContent,
+  T as SheetDescription,
+  w as SheetFooter,
+  N as SheetHeader,
+  D as SheetTitle,
+  b as SheetTrigger
+};

package/dist/components/foundations/skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+function m({ className: e, ...r }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: o("animate-pulse rounded-md bg-[var(--Surface-Tertiary)]", e),
+      ...r
+    }
+  );
+}
+export {
+  m as Skeleton
+};

package/dist/components/foundations/skip-link.js

@@ -0,0 +1,27 @@
+import { jsx as u } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../lib/utils.js";
+function a({ href: o = "#main-content", label: s = "コンテンツへ移動", className: c, ...r }) {
+  return /* @__PURE__ */ u(
+    "a",
+    {
+      "data-slot": "skip-link",
+      href: o,
+      className: i(
+        // 通常は視覚的に隠す（読み上げ・タブ順には残す）。フォーカス時のみ左上に可視化。
+        "sr-only",
+        "focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[var(--Z-SkipLink)] focus:px-4 focus:py-2",
+        "focus:rounded-md focus:shadow-md focus:outline-none",
+        "focus:bg-[var(--Surface-Primary)] focus:text-[var(--Text-High-Emphasis)]",
+        "focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)]",
+        "typo-label-md",
+        c
+      ),
+      ...r,
+      children: s
+    }
+  );
+}
+export {
+  a as SkipLink
+};

package/dist/components/foundations/slider.js

@@ -0,0 +1,81 @@
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import * as p from "react";
+import { Slider as i } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+import { FOCUS_RING as w } from "../../lib/focus-ring.js";
+import { useFieldLabelling as k } from "../../lib/field-labelling.js";
+function O({
+  className: b,
+  defaultValue: t,
+  value: e,
+  min: l = 0,
+  max: n = 100,
+  thumbLabels: d,
+  "aria-label": c,
+  "aria-labelledby": f,
+  ...u
+}) {
+  const h = k(), m = p.useMemo(
+    () => Array.isArray(e) ? e : Array.isArray(t) ? t : [l, n],
+    [e, t, l, n]
+  ), v = (r, a) => {
+    if (d?.[r]) return { "aria-label": d[r] };
+    if (c) {
+      const g = a === 1 ? "" : r === 0 ? "（下限）" : r === a - 1 ? "（上限）" : `（${r + 1}つ目）`;
+      return { "aria-label": `${c}${g}` };
+    }
+    return f ? { "aria-labelledby": f } : h ? { "aria-labelledby": h.labelId } : {};
+  };
+  return /* @__PURE__ */ y(
+    i.Root,
+    {
+      "data-slot": "slider",
+      defaultValue: t,
+      value: e,
+      min: l,
+      max: n,
+      className: o(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        b
+      ),
+      ...u,
+      children: [
+        /* @__PURE__ */ s(
+          i.Track,
+          {
+            "data-slot": "slider-track",
+            className: o(
+              "relative grow overflow-hidden rounded-full bg-[var(--Surface-Tertiary)] data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ s(
+              i.Range,
+              {
+                "data-slot": "slider-range",
+                className: o(
+                  "absolute bg-[var(--Brand-Cake-Orange)] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: m.length }, (r, a) => /* @__PURE__ */ s(
+          i.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            ...v(a, m.length),
+            className: o(
+              "block size-5 shrink-0 rounded-full border-2 border-[var(--Brand-Cake-Orange)] bg-[var(--Surface-Primary)] shadow-sm ring-[var(--Brand-Cake-Orange)]/20 transition-[color,box-shadow,transform] hover:ring-4 hover:scale-125 focus-visible:outline-hidden active:scale-110 active:ring-6 active:shadow-md disabled:pointer-events-none disabled:opacity-50",
+              // hover もリングを出すため、フォーカスは DS 共通の緑リング（FOCUS_RING）
+              // で区別できるようにする（以前は hover と同じオレンジ ring-4 だった）。
+              w
+            )
+          },
+          a
+        ))
+      ]
+    }
+  );
+}
+export {
+  O as Slider
+};

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

@@ -0,0 +1,36 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as v } from "../../lib/utils.js";
+const s = {
+  line: "var(--Third-Party-LINE)",
+  x: "var(--Third-Party-X)",
+  facebook: "var(--Third-Party-Facebook)",
+  apple: "var(--Third-Party-Apple)"
+}, d = {
+  line: "M12 2C6.48 2 2 5.81 2 10.4c0 4.17 3.74 7.65 8.78 8.3.34.07.8.22.92.5.1.26.07.67.03.93l-.15.86c-.04.25-.2.98.87.54s5.8-3.41 7.91-5.84C22.14 13.65 22 11.14 22 10.4 22 5.81 17.52 2 12 2zm-3.18 11.1H6.57a.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v3.68h1.75a.5.5 0 01.5.5.5.5 0 01-.5.5zm1.67-.5a.5.5 0 01-.5.5.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v4.18zm4.63 0a.5.5 0 01-.4.49.5.5 0 01-.13.01.5.5 0 01-.4-.21l-2.39-3.24v2.95a.5.5 0 01-.5.5.5.5 0 01-.5-.5V8.42a.5.5 0 01.4-.49h.1a.5.5 0 01.4.21l2.39 3.24V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v4.18h-.47zm2.7-2.6a.5.5 0 01.5.5.5.5 0 01-.5.5h-1.75v1.1h1.75a.5.5 0 01.5.5.5.5 0 01-.5.5H16.1a.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5h2.25a.5.5 0 01.5.5.5.5 0 01-.5.5h-1.75v1.08h1.75z",
+  x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+  facebook: "M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12",
+  apple: "M16.5 12.8c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.3-.1-2.6.8-3.3.8s-1.7-.8-2.8-.8c-1.5 0-2.8.8-3.6 2.2-1.5 2.6-.4 6.5 1.1 8.7.7 1 1.6 2.2 2.7 2.2s1.5-.7 2.8-.7 1.7.7 2.8.7c1.2 0 1.9-1.1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.5 0 0-2.2-.9-2.2-3.5M14.3 6.4c.6-.7 1-1.7.9-2.8-.9 0-1.9.6-2.5 1.3-.6.6-1 1.7-.9 2.7 1 .1 1.9-.5 2.5-1.2"
+};
+function p({ platform: a, size: c = 24, tone: h = "brand", className: t, style: e, ...i }) {
+  const l = h === "mono", o = {
+    viewBox: "0 0 24 24",
+    "aria-hidden": !0,
+    className: v("shrink-0", t),
+    style: { width: c, height: c, ...e },
+    ...i
+  };
+  return a === "google" ? /* @__PURE__ */ n("svg", { ...o, fill: "none", children: [
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" }),
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
+  ] }) : a === "amazon" ? /* @__PURE__ */ n("svg", { ...o, fill: "none", children: [
+    /* @__PURE__ */ r("path", { transform: "translate(-2.4 0) scale(1.2 1)", fill: "currentColor", d: "M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705a.66.66 0 0 1-.753.077c-1.06-.878-1.25-1.287-1.829-2.126-1.748 1.783-2.988 2.317-5.253 2.317-2.682 0-4.77-1.656-4.77-4.967 0-2.586 1.402-4.347 3.395-5.206 1.728-.762 4.14-.897 5.983-1.107v-.414c0-.762.058-1.664-.39-2.322-.387-.586-1.13-.83-1.788-.83-1.214 0-2.296.623-2.56 1.914-.054.293-.264.58-.553.595l-3.094-.333a.577.577 0 0 1-.481-.675C5.765 1.677 9.16.578 12.232.578c1.553 0 3.583.414 4.808 1.59 1.553 1.44 1.406 3.362 1.406 5.456v4.94c0 1.484.616 2.136 1.195 2.937.203.284.248.624-.01.835l-2.488 2.14v.32z" }),
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FF9900", d: "M21.397 19.78c-2.768 2.04-6.783 3.13-10.238 3.13-4.84 0-9.198-1.79-12.496-4.764-.259-.234-.029-.553.283-.371 3.558 2.068 7.957 3.316 12.504 3.316 3.067 0 6.44-.636 9.543-1.952.467-.2.862.307.404.641z" }),
+    /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FF9900", d: "M22.338 18.549c-.363-.464-2.397-.22-3.31-.111-.279.033-.321-.207-.071-.381 1.622-1.14 4.282-.811 4.593-.429.312.387-.082 3.07-1.605 4.352-.234.196-.457.091-.354-.169.343-.855 1.11-2.8.747-3.262z" })
+  ] }) : /* @__PURE__ */ r("svg", { ...o, fill: l ? "currentColor" : s[a], children: /* @__PURE__ */ r("path", { d: d[a] }) });
+}
+export {
+  p as SocialIcon
+};

package/dist/components/foundations/sonner.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Loader2Icon as t, OctagonXIcon as i, TriangleAlertIcon as o, InfoIcon as s, CircleCheckIcon as v } from "lucide-react";
+import { useTheme as n } from "next-themes";
+import { Toaster as c } from "sonner";
+const g = ({ ...a }) => {
+  const { theme: e = "system" } = n();
+  return /* @__PURE__ */ r(
+    c,
+    {
+      theme: e,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ r(v, { className: "size-4 text-[var(--Text-Success)]" }),
+        info: /* @__PURE__ */ r(s, { className: "size-4 text-[var(--Primitive-Sea-600)]" }),
+        warning: /* @__PURE__ */ r(o, { className: "size-4 text-[var(--Text-Warning)]" }),
+        error: /* @__PURE__ */ r(i, { className: "size-4 text-[var(--Primitive-Sun-800)]" }),
+        loading: /* @__PURE__ */ r(t, { className: "size-4 animate-spin text-[var(--Text-Medium-Emphasis)]" })
+      },
+      toastOptions: {
+        classNames: {
+          toast: "!mx-auto",
+          description: "!text-[var(--Text-Medium-Emphasis)]",
+          actionButton: "!bg-[var(--Brand-Cake-Orange)] !text-[var(--Text-on-Inverse)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8 hover:!bg-[var(--Hover-Primary-Button)]",
+          cancelButton: "!bg-[var(--Surface-Tertiary)] !text-[var(--Text-High-Emphasis)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8",
+          // 状態トースト（success/error/warning/info）は背景を primitive の明色で固定しているため、
+          // 中の description / cancel もモード反転しない primitive に固定する。
+          // semantic（Text-Medium-Emphasis 等）のままだとダークモードで白系に反転し、
+          // 明色背景の上で文字が不可視になる（デフォルトトーストは背景が反転するので semantic のままで正しい）
+          success: "!bg-[var(--Primitive-Forest-50)] !border-[var(--Primitive-Forest-200)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+          error: "!bg-[var(--Surface-Caution-Light)] !border-[var(--Border-Caution)] !text-[var(--Primitive-Sun-800)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+          warning: "!bg-[var(--Surface-Warning)] !border-[var(--Primitive-Wood-200)] !text-[var(--Text-Warning)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+          info: "!bg-[var(--Primitive-Sea-50)] !border-[var(--Primitive-Sea-200)] !text-[var(--Primitive-Sea-600)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]"
+        }
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)"
+      },
+      position: "bottom-center",
+      containerAriaLabel: "通知",
+      ...a
+    }
+  );
+};
+export {
+  g as Toaster
+};

package/dist/components/foundations/spinner.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../lib/utils.js";
+function m({ className: e, size: s = "md", ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "spinner",
+      role: "status",
+      "aria-label": "読み込み中",
+      className: i(
+        // shrink-0 必須: 「読み込み中…」テキストと横並びにされるため、既定の flex-shrink:1 だと円が楕円に潰れる
+        "shrink-0 animate-spin rounded-full border-[var(--Border-Medium-Emphasis)] border-t-[var(--Brand-Cake-Orange)]",
+        {
+          sm: "size-4 border-2",
+          md: "size-8 border-[3px]",
+          lg: "size-12 border-4"
+        }[s],
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ r("span", { className: "sr-only", children: "読み込み中" })
+    }
+  );
+}
+export {
+  m as Spinner
+};

package/dist/components/foundations/switch.js

@@ -0,0 +1,54 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { Switch as s } from "radix-ui";
+import { Check as n } from "lucide-react";
+import { cn as a } from "../../lib/utils.js";
+import { resolveFieldAria as d, useFieldLabelling as u } from "../../lib/field-labelling.js";
+function k({
+  className: o,
+  size: r = "default",
+  ...i
+}) {
+  const t = r === "default", c = d(i, u());
+  return /* @__PURE__ */ e(
+    s.Root,
+    {
+      "data-slot": "switch",
+      "data-size": r,
+      className: a(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors duration-[var(--Motion-Duration-Base)] outline-none",
+        "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Object-Accent-Primary)]",
+        "data-[state=unchecked]:border-[var(--Object-Low-Emphasis)] data-[state=unchecked]:bg-[var(--Object-Low-Emphasis)]",
+        "dark:data-[state=unchecked]:border-[var(--Object-Medium-Emphasis)] dark:data-[state=unchecked]:bg-[var(--Object-Medium-Emphasis)]",
+        t ? "h-8 w-[52px]" : "h-6 w-10",
+        o
+      ),
+      ...i,
+      ...c,
+      children: /* @__PURE__ */ e(
+        s.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: a(
+            "group/thumb pointer-events-none flex items-center justify-center rounded-full bg-[var(--Surface-Primary)] shadow-sm transition-transform duration-[var(--Motion-Duration-Base)]",
+            t ? "size-6 data-[state=unchecked]:translate-x-[1px] data-[state=checked]:translate-x-[22px]" : "size-[18px] data-[state=unchecked]:translate-x-[1px] data-[state=checked]:translate-x-[18px]"
+          ),
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              className: a(
+                "text-[var(--Object-Accent-Primary)] opacity-0 transition-opacity duration-[var(--Motion-Duration-Fast)] group-data-[state=checked]/thumb:opacity-100",
+                t ? "size-3.5 stroke-[3]" : "size-2.5 stroke-[3]"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  k as Switch
+};