@cakejp/design-system 0.16.0 → 0.17.1

package/dist/lib/field-labelling.js

@@ -0,0 +1,29 @@
+import * as a from "react";
+const n = a.createContext(null);
+function t() {
+  return a.useContext(n);
+}
+function d(r, e) {
+  if (!e) return {};
+  const i = [e.descriptionId, e.errorId].filter(Boolean).join(" ");
+  return {
+    id: r.id ?? e.controlId,
+    // aria-label が明示されていれば labelledby は当てない（二重命名を避ける）
+    "aria-labelledby": r["aria-labelledby"] ?? (r["aria-label"] ? void 0 : e.labelId),
+    "aria-describedby": r["aria-describedby"] ?? (i || void 0)
+  };
+}
+function o(r, e) {
+  if (!e) return {};
+  const i = [e.descriptionId, e.errorId].filter(Boolean).join(" ");
+  return {
+    id: r.id ?? e.controlId,
+    "aria-describedby": r["aria-describedby"] ?? (i || void 0)
+  };
+}
+export {
+  n as FieldLabellingContext,
+  d as resolveFieldAria,
+  o as resolveNativeFieldAria,
+  t as useFieldLabelling
+};

package/dist/lib/focus-ring.js

@@ -0,0 +1,6 @@
+const i = "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", s = "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50", o = "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--Focus-High-Emphasis)]/50";
+export {
+  i as FOCUS_RING,
+  o as FOCUS_RING_INSET,
+  s as FOCUS_RING_WITHIN
+};

package/dist/lib/pagination-range.js

@@ -0,0 +1,42 @@
+function p({
+  currentPage: f,
+  totalPages: g,
+  siblingCount: c = 1
+}) {
+  const t = Math.max(0, Math.floor(g));
+  if (t === 0) return [];
+  const n = Math.max(0, Math.floor(c)), e = Math.min(t, Math.max(1, Math.floor(f))), m = n * 2 + 5;
+  if (t <= m)
+    return Array.from({ length: t }, (r, i) => i + 1);
+  const s = Math.max(e - n, 1), l = Math.min(e + n, t), a = s > 2, h = l < t - 1, o = n * 2 + 3;
+  if (!a && h)
+    return [
+      ...Array.from({ length: o }, (r, i) => i + 1),
+      "ellipsis",
+      t
+    ];
+  if (a && !h) {
+    const r = t - o + 1;
+    return [
+      1,
+      "ellipsis",
+      ...Array.from(
+        { length: o },
+        (i, M) => r + M
+      )
+    ];
+  }
+  return [
+    1,
+    "ellipsis",
+    ...Array.from(
+      { length: l - s + 1 },
+      (r, i) => s + i
+    ),
+    "ellipsis",
+    t
+  ];
+}
+export {
+  p as getPaginationRange
+};

package/dist/lib/use-value-length.js

@@ -0,0 +1,63 @@
+import * as u from "react";
+function a(e, c) {
+  if (typeof e == "function") {
+    const r = e(c);
+    return typeof r == "function" ? r : void 0;
+  }
+  e && typeof e == "object" && (e.current = c);
+}
+function y(e, c) {
+  const r = Object.getOwnPropertyDescriptor(e, "value"), i = Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(e),
+    "value"
+  ), t = r ?? i;
+  if (!t?.get || !t.set || t.configurable === !1)
+    return;
+  const l = function() {
+    return t.get.call(this);
+  }, s = function(n) {
+    t.set.call(this, n), c();
+  };
+  return Object.defineProperty(e, "value", {
+    configurable: !0,
+    enumerable: t.enumerable,
+    get: l,
+    set: s
+  }), () => {
+    const n = Object.getOwnPropertyDescriptor(e, "value");
+    n?.get !== l || n.set !== s || (r ? Object.defineProperty(e, "value", r) : Reflect.deleteProperty(e, "value"));
+  };
+}
+function O({
+  enabled: e,
+  value: c,
+  defaultValue: r,
+  forwardedRef: i
+}) {
+  const t = c !== void 0, l = u.useRef(null), s = u.useRef(void 0), n = u.useRef(void 0), [g, v] = u.useState(
+    () => r != null ? String(r).length : 0
+  ), f = u.useCallback(() => {
+    const o = l.current;
+    o && v(o.value.length);
+  }, []), b = u.useCallback(
+    (o) => {
+      if (s.current?.(), s.current = void 0, l.current = o, !o) {
+        const p = n.current;
+        n.current = void 0, p ? p() : a(i, null);
+        return;
+      }
+      n.current = a(i, o), e && !t && (s.current = y(o, f));
+    },
+    [e, i, t, f]
+  );
+  return u.useLayoutEffect(() => {
+    !e || t || f();
+  }), {
+    ref: b,
+    length: t ? String(c ?? "").length : g,
+    syncFromDom: f
+  };
+}
+export {
+  O as useValueLength
+};

package/dist/lib/utils.js

@@ -0,0 +1,33 @@
+import { clsx as t } from "clsx";
+import { extendTailwindMerge as e } from "tailwind-merge";
+const p = [
+  "typo-heading-5xl",
+  "typo-heading-4xl",
+  "typo-heading-3xl",
+  "typo-heading-2xl",
+  "typo-heading-xl",
+  "typo-heading-lg",
+  "typo-heading-md",
+  "typo-heading-sm",
+  "typo-body-lg",
+  "typo-body-md",
+  "typo-body-sm",
+  "typo-body-xs",
+  "typo-label-lg",
+  "typo-label-md",
+  "typo-label-sm",
+  "typo-label-xs"
+], y = e({
+  extend: {
+    classGroups: {
+      "cake-typography": p
+    }
+  }
+});
+function n(...o) {
+  return y(t(o));
+}
+export {
+  p as TYPO_PRESET_CLASS_NAMES,
+  n as cn
+};

package/dist/types/components/foundations/accordion.d.ts

@@ -2,6 +2,13 @@ import * as React from "react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
 declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+interface AccordionTriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {
+    /**
+     * 見出し要素のレベル（既定: 3 = radix Accordion.Header の既定 <h3>）。
+     * ページの見出し階層に合わせて変更する（例: サイドバーのカテゴリナビで h2）。
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+declare function AccordionTrigger({ className, children, headingLevel, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/types/components/foundations/data-table.d.ts

@@ -91,7 +91,7 @@ declare function DataTableInputCell({ className, value, onChange, placeholder, t
     type?: string;
     name?: string;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DataTableSelectCell({ className, value, onValueChange, options, placeholder, ...props }: Omit<React.ComponentProps<"td">, "children" | "width" | "align"> & {
+declare function DataTableSelectCell({ className, value, onValueChange, options, placeholder, "aria-label": ariaLabel, ...props }: Omit<React.ComponentProps<"td">, "children" | "width" | "align"> & {
     value?: string;
     onValueChange?: (value: string) => void;
     options: Array<{
@@ -99,6 +99,11 @@ declare function DataTableSelectCell({ className, value, onValueChange, options,
         label: string;
     }>;
     placeholder?: string;
+    /**
+     * セレクトのアクセシブルネーム（日本語）。表の見出しに相当する語を渡す。
+     * 未指定時は placeholder を名前に使う（`role="combobox"` は内容から名前が付かないため）。
+     */
+    "aria-label"?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare function DataTableNumberCell({ className, children, ...props }: Omit<React.ComponentProps<"td">, "width" | "align">): import("react/jsx-runtime").JSX.Element;
 export { DataTable, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell, DataTableAvatarCell, DataTableImageCell, DataTableLinkCell, DataTableCheckboxCell, DataTableActionCell, DataTableInputCell, DataTableSelectCell, DataTableNumberCell, DataTableDragHandleCell, DataTableBulkActions, DataTableSectionRow, DataTableAddRow, DataTableEmptyState, };

package/dist/types/components/foundations/slider.d.ts

@@ -1,4 +1,16 @@
 import * as React from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {
+    /**
+     * つまみ（thumb）ごとのアクセシブルネーム（日本語）。
+     *
+     * `role="slider"` を持つのは **つまみ側**なので、名前はつまみに付ける必要がある。
+     * 未指定のときは次の順で決まる（issue #202）:
+     * 1. `aria-label` … つまみが 2 つ以上なら「（下限）」「（上限）」を補って区別する
+     * 2. `FormField` 配下ならそのラベル
+     * 3. `aria-labelledby`
+     */
+    thumbLabels?: string[];
+}
+declare function Slider({ className, defaultValue, value, min, max, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export { Slider };

package/dist/types/components/primitives/admin-header.d.ts

@@ -15,6 +15,16 @@ export interface AdminHeaderProps {
  * のレール（--Z-Sticky = 30）が始まる＝ヘッダーが最前面・全幅で、レールはヘッダー帯に重ならない。
  * 「{shopName}管理」のような文言合成は行わない（利用側が `brand` に組み立てて渡す）。
  *
+ * ### ページタイトルを複製しない
+ *
+ * ページ名の正は本文の h1（`AdminShell` の `title`）。ヘッダーにはブランド・パンくず（現在地の文脈）・
+ * グローバル操作を置き、同じページ名をヘッダーにも出さない。置くものが無ければヘッダーバー自体を省いてよい。
+ *
+ * ### 水平 padding は本文コンテナの gutter と揃える
+ *
+ * `px-4 @md:px-6` は `AdminShell` の `<main>`（`p-4 @md:p-6`）と同値。ヘッダー内要素の左端と
+ * 本文 h1 の左端が同じ面に乗る。片方だけ変えるとズレが視認されるので、変更するときは両方揃えて変える。
+ *
  * ### インポート
  * ```tsx
  * import { AdminHeader } from '../../components/primitives/admin-header'

package/dist/types/components/primitives/admin-side-nav.d.ts

@@ -48,6 +48,24 @@ export interface AdminSideNavProps {
  * SP は制御された左スライドドロワー（サブメニューはアコーディオン）で表示する。
  * メニュー定義・文言・データは全て `items` prop で受け取り、部品側には焼き込まない。
  *
+ * ### サイドバーは 1 枚のパネルとして読ませる
+ *
+ * ヘッダー行（SP ドロワー上部の見出し + 閉じるボタン）に **border-bottom を引かない**。
+ * フッター（ユーザーブロック・ヘルプ導線等）を設ける場合も **上に border-top を引かない**。
+ * サイドバー内部を横線で区切るとパネルが分割されて見え、ナビの一体感が失われる。分離は余白が担う。
+ * 画面全体で見える横罫線は ①サイドバー右端の縦線 ②コンテンツヘッダー下の横線 の 2 本に絞り、
+ * サイドバー内で横線を引くと 2 本が十字に交差して見える（正しくは T 字で突き当たる）。
+ *
+ * ### 折りたたみトリガーはサイドバー自身に置く
+ *
+ * サイドバーに開閉（折りたたみ）を持たせる場合、トリガーは **サイドバー内ヘッダー行の右端** に置く。
+ * コンテンツヘッダーの左端に置くと、動かす対象と操作する場所が離れて所属が読めなくなる。
+ *
+ * ### 項目高は 44px を確保する
+ *
+ * メイン項目・サブメニュー項目とも 44px（WCAG 2.5.5 の最小ターゲット）以上にする。
+ * 行高が小さいテキストで縦 padding だけに頼ると割り込むため、`min-h-11` で下限を固定する。
+ *
  * ### インポート
  * ```tsx
  * import { AdminSideNav } from '../../components/primitives/admin-side-nav'

package/dist/types/components/primitives/combobox.d.ts

@@ -19,6 +19,14 @@ export interface ComboboxProps {
     "aria-invalid"?: boolean;
     /** FieldError / FieldDescription の id */
     "aria-describedby"?: string;
+    /**
+     * トリガーのアクセシブルネーム（日本語）。
+     * `role="combobox"` は内容からは名前が付かないため、FormField の外で単体利用する
+     * ときはこれか `aria-labelledby` を指定する（未指定時は placeholder を名前に使う）。
+     */
+    "aria-label"?: string;
+    /** ラベル要素の id を直接指定する場合 */
+    "aria-labelledby"?: string;
 }
-declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 export { Combobox };

package/dist/types/components/primitives/menu-drawer.d.ts

@@ -55,21 +55,5 @@ export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
     /** ログインリンクのhref（デフォルト: /security/login_link/） */
     loginHref?: string;
 }
-/**
- * メニュードロワー
- *
- * ハンバーガーメニューの中身。本番サイドナビと同じ構造。
- * Figma: Menu - Contents
- *
- * ### AI 向け使用ルール
- *
- * - ログイン時: `<MenuDrawer isLoggedIn userName="田中花子" sections={[...]} />`
- * - 未ログイン: `<MenuDrawer isLoggedIn={false} sections={[...]} />`
- * - Drawer コンポーネントの中に配置して使用
- * - セクションの `border` を true にするとセクション上部に区切り線を表示
- * - アイテムの `hasChildren` を true にすると右矢印（ドリルダウン）を表示
- * - カテゴリ系アイテムは `thumb` にサムネイル画像URLを指定
- * - `itemsExtra` は「すべて表示」で展開されるアイテム群
- */
 declare function MenuDrawer({ userName, isLoggedIn, hideLoginLink, sections, banners, onClose, onLogin, loginHref, className, ...props }: MenuDrawerProps): import("react/jsx-runtime").JSX.Element;
 export { MenuDrawer };

package/dist/types/components/primitives/multi-select.d.ts

@@ -19,6 +19,14 @@ export interface MultiSelectProps {
     "aria-invalid"?: boolean;
     /** FieldError / FieldDescription の id */
     "aria-describedby"?: string;
+    /**
+     * トリガーのアクセシブルネーム（日本語）。
+     * `role="combobox"` は内容からは名前が付かないため、FormField の外で単体利用する
+     * ときはこれか `aria-labelledby` を指定する（未指定時は placeholder を名前に使う）。
+     */
+    "aria-label"?: string;
+    /** ラベル要素の id を直接指定する場合 */
+    "aria-labelledby"?: string;
 }
-declare function MultiSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function MultiSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };

package/dist/types/lib/field-labelling.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ## フィールドのラベル関連付け（DS 全体の方針 / issue #202）
+ *
+ * Radix ベースのコントロール（Select / Switch / Checkbox / Slider 等）は
+ * `<button>` や `<span role="...">` として描画されるため、**隣に `<Label htmlFor>` を
+ * 置いてもアクセシブルネームにならない**（`<label for>` が名前を与えるのは
+ * labelable な要素だけで、`<button>` は対象外）。
+ *
+ * そこで DS は次の方針を採る:
+ *
+ * 1. フィールドのラッパー（`FormField`）がラベル要素に **id を採番**し、
+ *    その id を context で配下のコントロールへ渡す。
+ * 2. コントロール側は `aria-labelledby` を **既定値として** その id にする。
+ *    利用側が `aria-label` / `aria-labelledby` を明示した場合はそちらを優先する。
+ * 3. ラッパー無しで単体利用するときは、利用側が `aria-label`（日本語）を書く。
+ *
+ * `<label for>` が有効なネイティブ入力（Input / Textarea）は従来どおり
+ * `htmlFor` ↔ `id` の関連付けで足りるため、context の `controlId` を使う。
+ */
+import * as React from "react";
+export interface FieldLabellingValue {
+    /** ラベル要素の id。コントロールの aria-labelledby 既定値になる */
+    labelId: string;
+    /** コントロールに割り当てる id（ネイティブ入力の htmlFor 対応用） */
+    controlId: string;
+    /** 説明文の id。存在するときだけ設定される */
+    descriptionId?: string;
+    /** エラーメッセージの id。存在するときだけ設定される */
+    errorId?: string;
+}
+/**
+ * ラッパー（FormField 等）が配下のコントロールへ id を渡す context。
+ * Provider は利用側で `<FieldLabellingContext.Provider value={...}>` として使う
+ * （このファイルはコンポーネントを export しない = fast refresh の制約に合わせる）。
+ */
+declare const FieldLabellingContext: React.Context<FieldLabellingValue>;
+/** ラッパー内かどうかを問わず使える。ラッパー外では null。 */
+declare function useFieldLabelling(): FieldLabellingValue | null;
+/**
+ * Radix トリガー系コントロール向けの aria 属性を解決する。
+ *
+ * 利用側の明示指定（aria-label / aria-labelledby / id / aria-describedby）を必ず優先し、
+ * 何も指定が無いときだけラッパーの id を当てる。
+ */
+declare function resolveFieldAria(props: {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+};
+/**
+ * ネイティブ入力（Input / Textarea）向け。
+ * 名前は `<label for>` ↔ `id` で付くので、ここでは id と説明の関連付けだけ行う。
+ */
+declare function resolveNativeFieldAria(props: {
+    id?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-describedby"?: string;
+};
+export { FieldLabellingContext, useFieldLabelling, resolveFieldAria, resolveNativeFieldAria, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -28,7 +28,7 @@
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
   "bin": {
-    "cakejp-ds": "./bin/init.js"
+    "cakejp-ds": "bin/init.js"
   },
   "files": [
     "CHANGELOG.md",
@@ -80,7 +80,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+    "build:lib": "vite build --config vite.config.lib.ts && node scripts/append-tailwind-source-manifest.mjs && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
     "prepack": "npm run build:lib",
     "prepare": "npm run build:lib",
     "postinstall": "node ./bin/init.js postinstall",
@@ -181,5 +181,9 @@
     "vite": "^7.3.1",
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
-  }
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "author": ""
 }

package/scripts/codemod/README.md

@@ -9,6 +9,15 @@ node scripts/codemod/v1-to-v2.mjs --dry ./src
 node scripts/codemod/v1-to-v2.mjs ./src
 ```
 
+ここに置いたファイル名がそのまま consumer 側の codemod 名になります（dispatch の
+書き換えは不要）。`template.mjs` と `check-migration.mjs` は一覧から除外されます。
+
+```bash
+npx cakejp-ds codemod              # 使える codemod 名の一覧
+npx cakejp-ds codemod v1-to-v2 --dry ./src
+npx cakejp-ds codemod v1-to-v2 ./src
+```
+
 正規表現ベースのため、必ずコミット済みの利用側で `--dry` を先に実行し、
 適用後は `git diff` と ESLint の `@cakejp/design-system/eslint/deprecated`
 で残件を確認してください。