@cakejp/design-system 0.11.0 → 0.13.0

package/dist/types/components/ec/admin-shell.d.ts

@@ -4,6 +4,22 @@
  * 本番の shop_layout.ctp を参考に、Header + SideNav + Main Content の構造を再現。
  * 汎用の枠は primitives（AdminSideNav / AdminHeader）に切り出し、
  * Cake.jp 管理メニュー等のドメイン既定値はこの ec レイヤーで束ねる。
+ *
+ * ## サイドナビの構造（採用前に確認すること）
+ *
+ * - **PC**: 左端固定の **72px アイコンレール**（アイコン + 短いラベル、サブメニューは hover ポップアップ）。
+ *   幅が無いため、バッジ・見出し・説明文からなる**ブランドブロックをレール上部に置くことはできない**。
+ *   他ブランドの管理画面でブランドを出したい場合は `brand`（ヘッダー左側）を使う。
+ * - **SP**: ドロワー。上部見出しは `sidebarHeader`（未指定なら `shopName`）で差し替えられる。
+ *
+ * 「幅の広いブランド付きサイドバー」を前提にした画面は、この骨格とは別パターンなので
+ * そのまま置き換えられない（DS に issue を立てること）。
+ *
+ * ## 配下 Card のサーフェス
+ *
+ * 地が Surface-Secondary なので、シェルが配下 `Card` の既定サーフェスを白にする文脈
+ * （`--card-surface`）を宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
+ *
  * 参照元:
  * - admin-test-htdocs/app/views/layouts/shop_layout.ctp
  * - admin-test-htdocs/app/views/elements/shop_layout/header.ctp
@@ -28,8 +44,20 @@ export interface AdminShellProps {
         label: string;
         href?: string;
     }[];
-    /** ショップ名 */
+    /** ショップ名。ヘッダーの `{shopName}管理` と SP ドロワー見出しの既定値になる */
     shopName?: string;
+    /**
+     * ヘッダー左側のブランド表示を差し替える（既定=`{shopName}管理` の文字列）。
+     * ロゴ画像・バッジ付きブランドブロック等、文字列で表せない表現に使う。
+     * ※ PC の左サイドナビは 72px のアイコンレールでブランドブロックを置く領域が無いため、
+     *   他ブランドの管理画面はここ（ヘッダー）でブランドを表現する。
+     */
+    brand?: React.ReactNode;
+    /**
+     * SP ドロワー上部の見出しを差し替える（既定=`shopName` の文字列）。
+     * バッジ＋見出し＋説明のようなブランドブロックを置ける。
+     */
+    sidebarHeader?: React.ReactNode;
     /** サイドナビ項目（既定=Cake.jp 管理メニュー。利用側で差し替え可） */
     navItems?: AdminNavItem[];
     /** ヘッダー右側のアクション slot（既定=通知ベル＋プロフィール） */
@@ -42,5 +70,14 @@ export interface AdminShellProps {
     onBack?: () => void;
     /** 戻るボタンのラベル（既定="戻る"） */
     backLabel?: string;
+    /**
+     * `<main>` の id（既定 "main-content"）。内蔵の SkipLink の飛び先（`#${mainId}`）と対になる。
+     */
+    mainId?: string;
+    /**
+     * DOM 先頭に SkipLink（キーボードで本文へ飛ぶ a11y リンク）を標準内蔵する。
+     * `sr-only` なので視覚には影響しない。`false` で無効化。
+     */
+    skipLink?: false;
 }
-export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, navItems, headerActions, onBack, backLabel, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, brand, sidebarHeader, navItems, headerActions, onBack, backLabel, mainId, skipLink, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ec/mypage-shell.d.ts

@@ -81,6 +81,15 @@ export interface MypageShellProps {
     navItems?: HeaderNavItem[];
     /** SP の戻るボタン押下時のハンドラ（Header variant="back" に委譲） */
     onBack?: () => void;
+    /**
+     * メインコンテンツ `<main>` の id（既定 "main-content"）。内蔵の SkipLink の飛び先（`#${mainId}`）と対になる。
+     */
+    mainId?: string;
+    /**
+     * DOM 先頭に SkipLink（キーボードで本文へ飛ぶ a11y リンク）を標準内蔵する。
+     * `sr-only` なので視覚には影響しない。`false` で無効化。
+     */
+    skipLink?: false;
 }
-declare function MypageShell({ title, activeMenu, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
+declare function MypageShell({ title, activeMenu, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, onBack, mainId, skipLink, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
 export { MypageShell };

package/dist/types/components/ec/product-card.d.ts

@@ -11,6 +11,8 @@ export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     price: number;
     /** 元の金額（割引表示用） */
     originalPrice?: number;
+    /** 規格・仕様の短い自由記述（例: "1kg / 冷蔵"）。価格表示の直下に表示。tags（配送方法等のenum）とは別物 */
+    caption?: string;
     /** 評価値 (0〜5) */
     rating?: number;
     /** レビュー件数 */
@@ -73,5 +75,5 @@ export declare function BookmarkRibbonIcon({ size, filled }: {
  * - `showCartButton` で「カートに追加」ボタン表示（verticalのみ）
  * - ランキングバッジ、お気に入り、割引バッジなどEC必須要素を統合提供
  */
-declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, rating, reviewCount, shopName, shopHref, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCard };

package/dist/types/components/ec/product-list-item.d.ts

@@ -10,6 +10,8 @@ export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElemen
     imageUrl?: string;
     /** 価格 */
     price?: number;
+    /** 規格・仕様の短い自由記述（例: "1kg / 冷蔵"）。価格表示の直下に表示。tags（配送方法等のenum）とは別物 */
+    caption?: string;
     /** ショップ名 */
     shopName?: string;
     /** ショップリンクURL */
@@ -64,6 +66,10 @@ export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElemen
     onSaveForLater?: () => void;
     /** 画像サイズクラス（cart variant、デフォルト: "size-20"） */
     imageSize?: string;
+    /** 商品ごとの小計（cart variantのみ）。数量セレクタ行の右側（収まらなければ下）に表示 */
+    subtotal?: number;
+    /** 小計のラベル（cart variantのみ、既定: "小計"） */
+    subtotalLabel?: string;
     /** 左側スロット（画像の代わりに任意コンテンツ） */
     leftSlot?: React.ReactNode;
     /** 右側スロット（ブックマークの代わりに任意コンテンツ） */
@@ -82,9 +88,10 @@ export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElemen
  * - 注文履歴: `<ListItem variant="order-history" />`
  * - カート内: `<ListItem variant="cart" quantity={1} price={4980} onQuantityChange={...} />`
  *   - cart variant は `CartItem` ラッパーコンポーネント経由でも使用可能
+ *   - ロット購入等で商品ごとの小計を出す場合: `subtotal={4980 * quantity}`（既定ラベル「小計」、`subtotalLabel` で変更可）
  * - レビュー画面: `<ListItem variant="review" showDetailButton showCartButton />`
  * - 小さい: `<ListItem variant="small" />`
  * - 極小: `<ListItem variant="xsm" />`
  */
-declare function ProductListItem({ name, imageUrl, price, shopName, shopHref, brandName, tags, hashTags, statusLabel, variant, showCartButton, onAddToCart, showDetailButton, onViewDetail, showBookmark, href, orderDate, deliveryInfo, totalPrice, showReviewButton, optionInfo, quantity, onQuantityChange, quantitySize, originalPrice, priceLabel, deliveryText, onDelete, onSaveForLater, imageSize, leftSlot, rightSlot, bottomSlot, className, ...props }: ProductListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductListItem({ name, imageUrl, price, caption, shopName, shopHref, brandName, tags, hashTags, statusLabel, variant, showCartButton, onAddToCart, showDetailButton, onViewDetail, showBookmark, href, orderDate, deliveryInfo, totalPrice, showReviewButton, optionInfo, quantity, onQuantityChange, quantitySize, originalPrice, priceLabel, deliveryText, onDelete, onSaveForLater, imageSize, subtotal, subtotalLabel, leftSlot, rightSlot, bottomSlot, className, ...props }: ProductListItemProps): import("react/jsx-runtime").JSX.Element;
 export { ProductListItem };

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

@@ -14,9 +14,13 @@ import { type VariantProps } from "class-variance-authority";
  *   - Tinted background, no border
  *   - Compact: padding 8px 12px, rounded-sm (3px), gap 4px
  *   - Icon (20px) + content column layout
+ *   - **prop-based API 対応**（#109）: title / description / icon / action を直接渡せる
  *
  * 旧 `<Banner>` の用途は bordered variant + prop-based API で完全カバー:
  *   <Alert variant="warning" title="..." description="..." action={<Button />} />
+ *
+ * フォーム内・セクション内の軽量な補足情報は inline variant + prop-based API で組める:
+ *   <Alert variant="inline-info" title="..." description="..." />
  */
 declare const alertVariants: (props?: {
     variant?: "success" | "info" | "error" | "warning" | "inline-info" | "inline-caution" | "inline-warning";
@@ -24,7 +28,7 @@ declare const alertVariants: (props?: {
 type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
     /**
      * prop-based API のタイトル（旧 Banner.title 相当）。
-     * children と排他（children 優先）。bordered variant でのみ有効。
+     * children と排他（children 優先）。bordered / inline 両 variant で有効。
      */
     title?: React.ReactNode;
     /** prop-based API の説明テキスト（旧 Banner.description 相当） */

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: {
-    variant?: "link" | "default" | "secondary" | "tertiary" | "destructive" | "ghost" | "inverse" | "ghost-inverse";
+    variant?: "link" | "default" | "secondary" | "tertiary" | "destructive" | "ghost" | "inverse" | "ghost-inverse" | "overlay";
     size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "hero" | "icon-xs" | "icon-sm" | "icon-lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

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

@@ -1,9 +1,43 @@
 import * as React from "react";
-declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Card の背景サーフェス。
+ * - `default`: `--card-surface`（親から伝播したサーフェス文脈）→ 無ければ `--card`
+ *   （= Surface-Secondary）。通常の白/明るい地の上ではこれまで通り `bg-card` と同値。
+ * - `primary`: `Surface-Primary`（白）。文脈に関係なく白で固定したいときに明示指定する。
+ *
+ * ## サーフェス文脈の伝播（#150）
+ *
+ * `Section background="subtle" | "accent-subtle"` は配下に `--card-surface: var(--Surface-Primary)`
+ * を流す。そのため**グレー地の Section に置いた Card は `surface` 未指定でも自動で白**になり、
+ * 「あとからカードを1枚足したら prop を付け忘れてグレー地に沈む」事故が構造的に起きない。
+ *
+ * 伝播は CSS カスタムプロパティのカスケードだけで成立する（React context 不使用）。
+ * したがって Card / Section は Server Component のまま使え、DS の `Section` を使わない
+ * 自前のグレー地でも同じ効果を得られる:
+ *
+ * ```tsx
+ * // 任意の要素にサーフェス文脈を宣言する（consumer 側の escape hatch）
+ * <div className="bg-[var(--Surface-Tertiary)] [--card-surface:var(--Surface-Primary)]">
+ *   <Card />  // 白になる
+ * </div>
+ * ```
+ *
+ * dark では `Section` は伝播値を `Surface-Secondary` に据え置く（dark のカードは半透明白で
+ * 地に重なり一段明るく浮くため、白の強制は elevation の反転になる）。自前で文脈を宣言する
+ * ときも dark に配慮するなら `dark:[--card-surface:var(--Surface-Secondary)]` を併記する。
+ *
+ * 逆に文脈を無視して Surface-Secondary に固定したい 1 枚だけは
+ * `<Card className="bg-card">` で上書きする（className が最後に勝つ）。
+ */
+declare const cardVariants: (props?: {
+    surface?: "default" | "primary";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Card({ className, surface, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, cardVariants, };

package/dist/types/components/foundations/chip-variants.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Chip / choice-chip の共有バリアント（CVA）。
+ *
+ * foundations 層に置くことで、Chip（primitives）と RadioGroup の
+ * `variant="chip"`（foundations）の双方が同じ意匠を import して再利用できる
+ * （primitives→foundations / foundations→foundations はいずれも正方向の依存）。
+ *
+ * ここが chip 意匠の単一の正典。size / shape / typo / focus リング等を変更すると
+ * Chip と RadioGroup の chip variant の両方へ自動追従する。
+ */
+export declare const chipVariants: (props?: {
+    variant?: "filled" | "accent";
+    size?: "sm" | "lg" | "md" | "tile";
+    shape?: "pill" | "square";
+} & import("class-variance-authority/types").ClassProp) => string;
+export type ChipVariantProps = VariantProps<typeof chipVariants>;

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

@@ -0,0 +1,81 @@
+/**
+ * ## Field 群 / フォームレイアウト primitive
+ *
+ * `FormField`（Label + 入力 + エラーのセット）を核に、フォーム全体の
+ * レイアウト（見出し・グループ・説明・エラー・区切り）を組む補助群。
+ * shadcn の field パターンを DS の Label / Separator / トークンに合わせて実装。
+ *
+ * ### インポート
+ * ```tsx
+ * import { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "../../components/foundations/field"
+ * ```
+ *
+ * ### 構成要素
+ * | 要素 | DOM | 役割 |
+ * |------|-----|------|
+ * | `Field` | `<div role="group">` | **1 フィールド分の箱**（縦リズムの最小単位）。`orientation` で vertical / horizontal / responsive |
+ * | `FieldLabel` | `<Label>` ラップ | Field 内のラベル（`htmlFor` で入力と関連付け） |
+ * | `FieldSet` | `<fieldset>` | フォーム全体 or 大セクション。legend + 複数グループを縦リズム gap-6 で並べる |
+ * | `FieldLegend` | `<legend>` | FieldSet の見出し |
+ * | `FieldGroup` | `<div role="group">` | 関連する複数フィールドを section-content リズム gap-4 で束ねる |
+ * | `FieldDescription` | `<p>` | 補足テキスト（FormField の description と同意匠） |
+ * | `FieldError` | `<p role="alert">` | エラーメッセージ（children が空なら描画しない） |
+ * | `FieldSeparator` | `<Separator>` ラップ | フィールド群の区切り。children を渡すと中央ラベル付き |
+ *
+ * ### AI 向け使用ルール
+ * - ラベル + 入力 + エラーが一体で済むなら `FormField`（primitives）が最短。
+ *   ラベル・入力・説明・エラーを個別に組み立てたいときは `Field` + `FieldLabel` を使う
+ * - `Field` は `FieldGroup` の中に置く（`orientation="responsive"` は `FieldGroup` の
+ *   `@container/field-group` を基準に、狭いと縦・広いと横へ切り替わる）
+ * - 余白は composition.json の縦リズムに従う（FieldSet=gap-6 / FieldGroup=gap-4）。手で mt-/mb- を足さない
+ * - 見出しは `FieldLegend`、グループ横断の区切りは `FieldSeparator` を使う
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "../../components/foundations/label";
+/**
+ * Field — 1 フィールド分の箱（ラベル + 入力 + 説明/エラー）。
+ * `FieldGroup`（gap-4）の中に並べる**縦リズムの最小単位**。
+ * これが無いと「1 フィールドの内側の並べ方」が consumer 実装依存になる。
+ */
+declare const fieldVariants: (props?: {
+    orientation?: "horizontal" | "vertical" | "responsive";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldLabel — Field 内のラベル。DS の `Label` に DS のタイポ（typo-label-md）と
+ * 無効時の色を当てたもの。`htmlFor` で入力と関連付ける。
+ */
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldSet — フォーム全体 or 大きなセクションの枠。
+ * `<fieldset>` の既定スタイル（ブラウザ枠線・padding）をリセットし、
+ * legend + 複数 `FieldGroup` を gap-6 の縦リズムで並べる。
+ */
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldLegend — FieldSet の見出し。`<legend>` として描画。
+ */
+declare function FieldLegend({ className, ...props }: React.ComponentProps<"legend">): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldGroup — 関連する複数フィールドを束ねるコンテナ。
+ * section-content リズム（gap-4）で縦に並べる。
+ */
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldDescription — 補足テキスト。FormField の description と同じ意匠。
+ */
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldError — エラーメッセージ。children が空なら何も描画しない。
+ * `role="alert"` でスクリーンリーダーに即時通知する。
+ */
+declare function FieldError({ className, children, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldSeparator — フィールド群の区切り。DS の Separator をラップし
+ * 上下に余白を持たせる。children を渡すと中央にラベル（「または」等）を表示。
+ */
+declare function FieldSeparator({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, };
+export { fieldVariants };
+export type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>;

package/dist/types/components/foundations/file-input.d.ts

@@ -0,0 +1,75 @@
+/** maxSize 超過などの理由でファイルが受理されなかったときのコールバック引数。 */
+export interface FileInputError {
+    /** エラー種別。現状は maxSize 超過のみ。 */
+    code: "max-size";
+    /** 対象ファイル */
+    file: File;
+    /** 上限バイト数 */
+    maxSize: number;
+}
+export interface FileInputProps {
+    /** `<input>` の id。外側 Label の htmlFor と揃えて紐付ける。 */
+    id?: string;
+    /** input name（フォーム送信用） */
+    name?: string;
+    /** 受け付ける MIME/拡張子（例: "image/*,.pdf"） */
+    accept?: string;
+    /** 複数選択を許可。true のとき選択済みは「n件選択」で集約表示する。 */
+    multiple?: boolean;
+    /** 1ファイルあたりの上限バイト数。超過ファイルは受理せず onError を呼ぶ。 */
+    maxSize?: number;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 未選択時のプレースホルダ文言 */
+    placeholder?: string;
+    /** 「ファイルを選択」ボタンの文言 */
+    buttonLabel?: string;
+    /**
+     * 制御用の選択ファイル。指定すると表示はこの値に従う（controlled）。
+     * 未指定なら内部 state で保持する（uncontrolled）。
+     */
+    value?: File[];
+    /** 選択ファイルが変わったときのコールバック（受理されたファイルのみ）。 */
+    onFilesChange?: (files: File[]) => void;
+    /** maxSize 超過など、ファイルが受理されなかったときのコールバック。 */
+    onError?: (error: FileInputError) => void;
+    /** Field 群のエラー表示等と紐付ける（`<input>` に付与） */
+    "aria-describedby"?: string;
+    /** エラー状態（`<input>` に付与） */
+    "aria-invalid"?: boolean | "true" | "false";
+    /** 追加クラス（ルート要素） */
+    className?: string;
+}
+/**
+ * 選択ファイルの表示名を組み立てる。0件=空文字、1件=ファイル名、複数=「n件選択」。
+ */
+export declare function formatFileNames(files: File[]): string;
+/**
+ * maxSize でファイルを受理/非受理に振り分ける。maxSize 未指定なら全件受理。
+ */
+export declare function validateFileSize(files: File[], maxSize?: number): {
+    accepted: File[];
+    rejected: File[];
+};
+/**
+ * ## FileInput / ファイル入力
+ *
+ * 汎用ファイル添付の1行フォーム部品。「ファイルを選択」ボタン + 選択済みファイル名 + クリアボタン。
+ * ネイティブ `<input type="file">` を visually-hidden で内包し、キーボード・スクリーンリーダーで操作可能。
+ *
+ * ### ImageUploader との使い分け
+ * - プレビュー付きの画像管理（並び替え・複数サムネイル）→ `ImageUploader`
+ * - 画像以外も含む汎用の添付（PDF・CSV 等）→ `FileInput`
+ *
+ * ### インポート
+ * ```tsx
+ * import { FileInput } from '../../components/foundations/file-input'
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - `<input type="file">` を直接書かず FileInput を使う
+ * - `id` を外側の Label / FormField の htmlFor と揃えて紐付ける
+ * - エラー表示は `aria-describedby` で FieldError と接続する
+ */
+declare function FileInput({ id, name, accept, multiple, maxSize, disabled, placeholder, buttonLabel, value, onFilesChange, onError, className, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+export { FileInput };

package/dist/types/components/foundations/icon-badge.d.ts

@@ -9,10 +9,10 @@ import { type VariantProps } from "class-variance-authority";
  *   バッジ側に `mt-/mb-` を内蔵すると Card の gap と二重がけになり間延びするため。
  * - アイコン色は `currentColor`（= `--Object-Accent-Primary`）を継承する。
  *   中の Lucide / iconsax アイコンに `color` を渡す必要はない。
- * - 内部 SVG のサイズはバッジが固定する（md=20px / lg=38px）。アイコン側の `size` は不要。
+ * - 内部 SVG のサイズはバッジが固定する（md=20px / ml=24px / lg=38px）。アイコン側の `size` は不要。
  */
 declare const iconBadgeVariants: (props?: {
-    size?: "lg" | "md";
+    size?: "lg" | "md" | "ml";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function IconBadge({ className, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof iconBadgeVariants>): import("react/jsx-runtime").JSX.Element;
 export { IconBadge, iconBadgeVariants };

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

@@ -1,3 +1,13 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export interface InputProps extends React.ComponentProps<"input"> {
+    /**
+     * 文字数カウンタを表示する。`maxLength` とセットで使い、入力欄の
+     * 右下に `{現在}/{max}` を表示する。上限に達すると Text-Caution 色になる。
+     * 制御（`value`）/ 非制御（`defaultValue`）どちらでも追従する。
+     * 非制御時は実際の DOM の値を数えるため、react-hook-form の `register()` の
+     * ように `ref` 経由で外部から値が入るケースでも初期表示から正しく数える。
+     */
+    showCount?: boolean;
+}
+declare function Input({ className, type, showCount, maxLength, value, defaultValue, onChange, ref, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/types/components/foundations/radio-group.d.ts

@@ -1,9 +1,19 @@
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** RadioGroup の描画スタイル。tile=タイル型（既定）/ chip=チップ型（choice chip）。 */
+export type RadioGroupVariant = "tile" | "chip";
+declare function RadioGroup({ className, variant, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {
+    /**
+     * 描画スタイル。
+     * - `"tile"`（既定）: タイル型。ラジオ丸 + ラベル + 補足説明 + 展開コンテンツ。
+     * - `"chip"`: choice chip 型。ラベルを内包した Chip 意匠で排他選択を組む（タグ選択・絞り込み等）。
+     *   Radix RadioGroup のキーボード操作・a11y はそのまま維持される。
+     */
+    variant?: RadioGroupVariant;
+}): import("react/jsx-runtime").JSX.Element;
 declare function RadioGroupItem({ className, children, description, expandedContent, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
     description?: React.ReactNode;
-    /** 選択時に展開表示するコンテンツ */
+    /** 選択時に展開表示するコンテンツ（tile variant のみ） */
     expandedContent?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/types/components/foundations/skip-link.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** スキップ先アンカー（既定 `#main-content`。シェルの `mainId` と対応させる） */
+    href?: string;
+    /** リンクの文言（既定「コンテンツへ移動」） */
+    label?: string;
+}
+/**
+ * SkipLink — キーボード操作でグローバルナビを飛ばして本文へ移動する a11y リンク。
+ *
+ * 通常は視覚的に隠れており（`sr-only`）、Tab フォーカスが当たった瞬間だけ
+ * 左上に可視化される。スクリーンリーダー／キーボードユーザーがヘッダーの
+ * 反復リンクをスキップして `#main-content`（= シェルの `<main id>`）へ直接
+ * 到達できるようにする。WCAG 2.4.1（Bypass Blocks）対応の定番部品。
+ *
+ * 各シェル（StandardPageShell / FunnelShell / WorkspaceShell / AdminShell /
+ * MypageShell）は本コンポーネントを DOM 先頭に標準内蔵するため、シェルを使う限り
+ * 個別ページで手組みする必要はない（`skipLink={false}` で無効化可能）。
+ *
+ * ### インポート
+ * ```tsx
+ * import { SkipLink } from '../../components/foundations/skip-link'
+ * ```
+ *
+ * ### 使い方（シェルを使わず素の DOM に置く場合）
+ * ```tsx
+ * <SkipLink />
+ * <main id="main-content">…</main>
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | href | string | "#main-content" | スキップ先アンカー |
+ * | label | string | "コンテンツへ移動" | リンク文言 |
+ * | className | string | — | 追加CSSクラス |
+ */
+declare function SkipLink({ href, label, className, ...props }: SkipLinkProps): import("react/jsx-runtime").JSX.Element;
+export { SkipLink };

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

@@ -1,3 +1,13 @@
 import * as React from "react";
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export interface TextareaProps extends React.ComponentProps<"textarea"> {
+    /**
+     * 文字数カウンタを表示する。`maxLength` とセットで使い、入力欄の
+     * 右下に `{現在}/{max}` を表示する。上限に達すると Text-Caution 色になる。
+     * 制御（`value`）/ 非制御（`defaultValue`）どちらでも追従する。
+     * 非制御時は実際の DOM の値を数えるため、react-hook-form の `register()` の
+     * ように `ref` 経由で外部から値が入るケースでも初期表示から正しく数える。
+     */
+    showCount?: boolean;
+}
+declare function Textarea({ className, showCount, maxLength, value, defaultValue, onChange, ref, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export { Textarea };

package/dist/types/components/primitives/chat-composer.d.ts

@@ -0,0 +1,87 @@
+/** 添付が受理されなかったときのコールバック引数。 */
+export interface ChatComposerAttachmentError {
+    /** `max-files`: 件数上限超過 / `max-size`: サイズ上限超過 */
+    code: "max-files" | "max-size";
+    /** 受理されなかったファイル */
+    file: File;
+    /** 超過した上限値（max-files は件数、max-size は MB） */
+    limit: number;
+}
+export interface ChatComposerProps {
+    /** 入力値（制御） */
+    value: string;
+    /** 入力変更（制御） */
+    onChange: (value: string) => void;
+    /**
+     * 送信。本文と添付ファイルを受け取る。
+     * 本文と添付がどちらも空のときは呼ばれない。
+     */
+    onSubmit: (value: string, files: File[]) => void;
+    /**
+     * 送信キー。
+     * - `enter`（既定）: Enter で送信 / Shift+Enter で改行
+     * - `mod-enter`: ⌘/Ctrl+Enter で送信 / Enter は改行
+     *
+     * どちらでも IME 変換確定の Enter では送信しない。
+     */
+    submitKey?: "enter" | "mod-enter";
+    /**
+     * 添付ファイル（制御）。指定すると表示はこの値に従う。
+     * 未指定なら内部 state で保持する。
+     */
+    attachments?: File[];
+    /** 添付が変わったときのコールバック */
+    onAttachmentsChange?: (files: File[]) => void;
+    /** 受け付ける MIME/拡張子（例: "image/*,.pdf"） */
+    accept?: string;
+    /** 添付できる最大件数。超過分は受理せず onAttachmentError を呼ぶ。 */
+    maxFiles?: number;
+    /** 1ファイルあたりの上限サイズ（MB）。超過ファイルは受理せず onAttachmentError を呼ぶ。 */
+    maxSizeMb?: number;
+    /** 添付が受理されなかったときのコールバック */
+    onAttachmentError?: (error: ChatComposerAttachmentError) => void;
+    /** 無効化（入力・添付・送信すべて） */
+    disabled?: boolean;
+    /** 送信中。送信ボタンを無効化し二重送信を防ぐ。 */
+    isSubmitting?: boolean;
+    /** 入力欄のプレースホルダ */
+    placeholder?: string;
+    /** 入力欄の最大文字数。指定すると文字数カウンタを表示する。 */
+    maxLength?: number;
+    /** 入力欄の visually-hidden ラベル（スクリーンリーダー向け） */
+    label?: string;
+    /** 入力欄の初期表示行数 */
+    rows?: number;
+    /** 入力欄の id。未指定なら自動採番。 */
+    id?: string;
+    /** マウント時に入力欄へフォーカスする */
+    autoFocus?: boolean;
+    /** 追加クラス（ルート要素） */
+    className?: string;
+}
+/**
+ * ## ChatComposer / メッセージコンポーザ
+ *
+ * テキスト入力 + 添付 + 送信を1つの枠にまとめた汎用コンポーザ。
+ * チャット・問い合わせ・レビュー返信など「短文を繰り返し送る」UI に使う。
+ *
+ * 中身は DS の既存部品の組み合わせ（Textarea / FileInput / Chip / Button）で、
+ * 送信キーの挙動・添付の見せ方・送信ボタンの意匠を DS 側で標準化する。
+ *
+ * ### インポート
+ * ```tsx
+ * import { ChatComposer } from "../../components/primitives/chat-composer"
+ * ```
+ *
+ * ### 送信キー
+ * 既定は Enter 送信 / Shift+Enter 改行。長文入力が主なら `submitKey="mod-enter"`。
+ * どちらでも **IME 変換中の Enter では送信しない**（日本語入力での誤送信防止）。
+ *
+ * ### AI 向け使用ルール
+ * - チャット入力欄を Textarea + Button で手組みしない。ChatComposer を使う
+ * - 添付は `attachments` / `onAttachmentsChange` で制御し、Chip の removable で表示される
+ * - 送信中は `isSubmitting` を立てる（送信ボタンが無効化され二重送信を防げる）
+ * - `<form>` は内包しない。フォーム内に置いても入れ子にならない
+ */
+declare function ChatComposer({ value, onChange, onSubmit, submitKey, attachments, onAttachmentsChange, accept, maxFiles, maxSizeMb, onAttachmentError, disabled, isSubmitting, placeholder, maxLength, label, rows, id, autoFocus, className, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export { ChatComposer };

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

@@ -1,11 +1,6 @@
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const chipVariants: (props?: {
-    variant?: "filled" | "accent";
-    size?: "sm" | "lg" | "md" | "tile";
-    shape?: "square" | "pill";
-} & import("class-variance-authority/types").ClassProp) => string;
-export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+import { chipVariants, type ChipVariantProps } from "../../components/foundations/chip-variants";
+export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ChipVariantProps {
     /** リンクとして使う場合のURL */
     href?: string;
     /** 選択状態 */