@cakejp/design-system 0.11.0 → 0.12.0

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

@@ -42,5 +42,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, 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,19 @@
 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`: `bg-card`（= Surface-Secondary）。通常の白/明るい地の上で使う既定値。
+ * - `primary`: `Surface-Primary`（白）。グレー Section（Surface-Tertiary）の地の上に
+ *   置く際、既定の `bg-card` ではコントラストが不足するため白背景に切り替える。
+ */
+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,58 @@
+/**
+ * ## Field 群 / フォームレイアウト primitive
+ *
+ * `FormField`（Label + 入力 + エラーのセット）を核に、フォーム全体の
+ * レイアウト（見出し・グループ・説明・エラー・区切り）を組む補助群。
+ * shadcn の field パターンを DS の Label / Separator / トークンに合わせて実装。
+ *
+ * ### インポート
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "../../components/foundations/field"
+ * ```
+ *
+ * ### 構成要素
+ * | 要素 | DOM | 役割 |
+ * |------|-----|------|
+ * | `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 群はその外側の骨格を組む
+ * - 余白は composition.json の縦リズムに従う（FieldSet=gap-6 / FieldGroup=gap-4）。手で mt-/mb- を足さない
+ * - 見出しは `FieldLegend`、グループ横断の区切りは `FieldSeparator` を使う
+ */
+import * as React from "react";
+/**
+ * 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 { FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, };

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,11 @@
 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`）どちらでも追従する。
+     */
+    showCount?: boolean;
+}
+declare function Input({ className, type, showCount, maxLength, value, defaultValue, onChange, ...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,11 @@
 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`）どちらでも追従する。
+     */
+    showCount?: boolean;
+}
+declare function Textarea({ className, showCount, maxLength, value, defaultValue, onChange, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export { Textarea };

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;
     /** 選択状態 */

package/dist/types/components/primitives/content-carousel.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+export interface ContentCarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * スライド内容（ReactNode）のリスト。
+     * 画像URLではなく任意の JSX を受けるため、eyebrow / タイトル / 本文 / 価格 /
+     * バッジで構成したテキスト主体のヒーローバナー等を組める。
+     * 各スライドは DS コンポーネント（Badge, Button 等）と typo-* / セマンティック
+     * トークンで組むこと（スクラッチ禁止ルール準拠）。
+     */
+    slides: React.ReactNode[];
+    /** ドットインジケーター表示 */
+    showDots?: boolean;
+    /** 矢印ナビゲーション表示 */
+    showArrows?: boolean;
+    /** 自動再生（ミリ秒、0で無効） */
+    autoPlay?: number;
+    /**
+     * SP: 隣スライドをのぞかせる（peek）表示。
+     * true にすると各スライドが `calc(100% - 48px)` 幅になり、
+     * 右端に次スライドが見える。PC (@[960px]:) は常に全幅。
+     */
+    peek?: boolean;
+    /** カルーセル全体の aria-label（スクリーンリーダー向け説明） */
+    ariaLabel?: string;
+}
+/**
+ * コンテンツカルーセル — ReactNode スライド対応
+ *
+ * `ImageCarousel` と同じ CSS scroll-snap ベースの実装だが、`images: string[]` ではなく
+ * `slides: ReactNode[]` を受け取る。テキスト主体のプロモスライド（eyebrow / タイトル /
+ * 本文 / 価格 / バッジ、画像は任意）を DS が autoplay / 矢印 / ドット / スワイプ付きで
+ * 提供し、consumer 側の手組みカルーセル（→意匠ドリフト）を不要にする。
+ *
+ * 矢印・ドットの意匠は `ImageCarousel` と同一（同じ markup を流用）。
+ *
+ * - SP（狭幅）: スワイプ操作 + ドットインジケーター、矢印は非表示
+ * - PC（@md: 以上）: 左右矢印ボタン（ホバーで出現）、ドット非表示
+ *
+ * ### インポート
+ * ```tsx
+ * import { ContentCarousel } from '../../components/primitives/content-carousel'
+ * ```
+ *
+ * ### AI 向け使用ルール
+ *
+ * - スライド内容は DS コンポーネント（Badge, Button, PriceDisplay 等）と
+ *   typo-* / セマンティックトークンで組む（生の色・影・角丸は禁止）
+ * - 画像だけのバナーは `ImageCarousel` を使う（こちらはテキスト主体向け）
+ * - 自動再生: `<ContentCarousel autoPlay={5000} />`
+ */
+declare function ContentCarousel({ slides, showDots, showArrows, autoPlay, peek, ariaLabel, className, ...props }: ContentCarouselProps): import("react/jsx-runtime").JSX.Element;
+export { ContentCarousel };

package/dist/types/components/primitives/date-picker.d.ts

@@ -0,0 +1,32 @@
+import type { Matcher } from "react-day-picker";
+export interface DatePickerProps {
+    /** 選択中の日付 */
+    value?: Date;
+    /** 日付が変わったときに呼ばれる。クリアされると `undefined` */
+    onChange?: (date?: Date) => void;
+    /** 未選択時の trigger 表示 */
+    placeholder?: string;
+    /** 選択可能な最小日（これより前を無効化） */
+    min?: Date;
+    /** 選択可能な最大日（これより後を無効化） */
+    max?: Date;
+    /** 個別に無効化する日（Calendar の disabled マッチャーをそのまま透過） */
+    disabledDates?: Matcher | Matcher[];
+    /** trigger を無効化する */
+    disabled?: boolean;
+    /** trigger の id（FormField の htmlFor と接続） */
+    id?: string;
+    /** 追加クラス（trigger に付与） */
+    className?: string;
+}
+declare function DatePicker({ value, onChange, placeholder, min, max, disabledDates, disabled, id, className, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DateTimePickerProps extends DatePickerProps {
+    /** 分の刻み（分 Select の選択肢間隔）。既定 5 分 */
+    minuteStep?: number;
+    /** 時 Select の aria-label。既定「時」 */
+    hourLabel?: string;
+    /** 分 Select の aria-label。既定「分」 */
+    minuteLabel?: string;
+}
+declare function DateTimePicker({ value, onChange, minuteStep, hourLabel, minuteLabel, disabled, className, ...dateProps }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export { DatePicker, DateTimePicker };

package/dist/types/components/primitives/error-state.d.ts

@@ -1,41 +1,68 @@
 import * as React from "react";
+export type NotFoundIllustrationProps = React.SVGProps<SVGSVGElement>;
+/**
+ * NotFound（404）向けの抽象イラスト（ケーキモチーフ / スライスが欠けた図）。
+ *
+ * 色は CSS 変数と currentColor のみで構成（HEX 直書きなし）。輪郭は
+ * currentColor を継承するため、親の text-color で線色を調整できる。
+ * 既定は装飾（`aria-hidden`）。単体で意味を持たせる場合は `aria-label` を渡す。
+ *
+ * ```tsx
+ * <NotFoundIllustration className="w-40 text-[var(--Border-Medium-Emphasis)]" />
+ * ```
+ */
+declare function NotFoundIllustration({ className, "aria-label": ariaLabel, ...props }: NotFoundIllustrationProps): import("react/jsx-runtime").JSX.Element;
+/** ErrorState の種別。既定は汎用エラー、notFound は 404 向けの定番構成 */
+export type ErrorStateKind = "error" | "notFound";
 export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** エラーアイコン */
+    /**
+     * 状態の種別。
+     * - `"error"`（既定）: 汎用エラー。`icon` を Object-Caution 色で表示（現行不変）
+     * - `"notFound"`: 404 向け。既定でケーキイラスト + 見つからない旨の文言
+     */
+    kind?: ErrorStateKind;
+    /** アイコン / イラスト。省略時、notFound は既定イラスト、error は非表示 */
     icon?: React.ReactNode;
-    /** エラータイトル */
-    title: string;
-    /** エラーの説明テキスト */
+    /** タイトル。省略時は kind に応じた既定文言 */
+    title?: string;
+    /** 説明テキスト。省略時、notFound は既定文言、error は非表示 */
     description?: React.ReactNode;
     /** 再試行ボタンのクリックハンドラ。指定すると再試行ボタンを表示 */
     onRetry?: () => void;
     /** 再試行ボタンのラベル */
     retryLabel?: string;
-    /** 追加アクション（例: 「ホームに戻る」ボタン） */
+    /** 追加アクション（例: 「トップへ戻る」ボタン） */
     action?: React.ReactNode;
 }
 /**
- * エラー状態コンポーネント
+ * エラー状態 / 404 状態コンポーネント
  *
- * APIエラー、ネットワークエラー、タイムアウト等のエラー状態を表示するUI。
- * EmptyState と同様のレイアウトだが、再試行アクションに特化。
+ * APIエラー・ネットワークエラー・タイムアウト等（`kind="error"`）と、
+ * 404 Not Found（`kind="notFound"`）の定番構成を1つのコンポーネントで扱う。
+ * EmptyState と同様の中央寄せレイアウト。
  *
  * ### AI 向け使用ルール
  *
- * - `icon` にエラー種別に合ったアイコン（size-16）を渡す
- * - `title` でエラー内容を簡潔に伝える
- * - `description` で対処方法を案内
- * - `onRetry` を渡すと再試行ボタンが表示される
- * - `action` に追加のナビゲーションボタンを渡せる
- * - ページコンテンツの中央に配置
+ * - システムエラーは `kind="error"`（既定）。`icon`（size-16）+ `onRetry` を渡す
+ * - 404 ページは `kind="notFound"`。イラスト・見出し・説明は既定で入るため
+ *   基本は `action`（「トップへ戻る」等の導線）だけ渡せばよい
+ * - データが無いだけ（カート空・検索0件）は EmptyState を使う
  *
  * ```tsx
+ * // 汎用エラー
  * <ErrorState
  *   icon={<WifiOff className="size-16" />}
  *   title="接続エラー"
  *   description="ネットワークに接続できませんでした。"
  *   onRetry={() => location.reload()}
  * />
+ *
+ * // 404
+ * <ErrorState
+ *   kind="notFound"
+ *   action={<Button size="lg">トップへ戻る</Button>}
+ * />
  * ```
  */
-declare function ErrorState({ className, icon, title, description, onRetry, retryLabel, action, ...props }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
-export { ErrorState };
+declare function ErrorState({ className, kind, icon, title, description, onRetry, retryLabel, action, ...props }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export { ErrorState, NotFoundIllustration };

package/dist/types/components/primitives/funnel-shell.d.ts

@@ -44,6 +44,15 @@ export interface FunnelShellProps {
     bottomAction?: React.ReactNode;
     /** ルート要素の追加クラス */
     className?: string;
+    /**
+     * `<main>` の id（既定 "main-content"）。内蔵の SkipLink の飛び先（`#${mainId}`）と対になる。
+     */
+    mainId?: string;
+    /**
+     * DOM 先頭に SkipLink（キーボードで本文へ飛ぶ a11y リンク）を標準内蔵する。
+     * `sr-only` なので視覚には影響しない。`false` で無効化。
+     */
+    skipLink?: false;
 }
 /**
  * FunnelShell — EC 購入導線等のファネル用集中モード（Full Page）のシェル。
@@ -81,5 +90,5 @@ export interface FunnelShellProps {
  * 管理画面の集中編集は `WorkspaceShell`（EC 購入導線＝本コンポーネント）。
  * 判断基準は contracts/screen-patterns.json（focused-workspace）を参照。
  */
-declare function FunnelShell({ logo, title, onBack, backLabel, steps, activeStep, children, bottomAction, className, }: FunnelShellProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelShell({ logo, title, onBack, backLabel, steps, activeStep, children, bottomAction, className, mainId, skipLink, }: FunnelShellProps): import("react/jsx-runtime").JSX.Element;
 export { FunnelShell };