ksk-design-system 1.35.0

package/dist/types/components/patterns/list-item.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * ListItem の意味づけ。
+ * - "default"     : 通常のリスト項目（既定）。
+ * - "destructive" : 削除・ログアウトなど取り返しのつかない操作。
+ *                   title を Caution 色にし、interactive=true の場合は
+ *                   hover を薄い caution 背景に切り替える。
+ *                   leftSlot のアイコンは呼び出し側で色付けする想定
+ *                   （currentColor を継承させたい場合は className で調整）。
+ */
+type ListItemVariant = "default" | "destructive";
+interface ListItemProps extends React.ComponentProps<"div"> {
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    bottomSlot?: React.ReactNode;
+    title?: string;
+    description?: string;
+    interactive?: boolean;
+    variant?: ListItemVariant;
+}
+declare function ListItem({ className, leftSlot, rightSlot, bottomSlot, title, description, interactive, variant, children, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export { ListItem };
+export type { ListItemProps, ListItemVariant };

package/dist/types/components/patterns/list-skeletons.d.ts

@@ -0,0 +1,43 @@
+/**
+ * ListSkeleton — リスト型サブタブ用の汎用 Skeleton。
+ *
+ * 上部にフィルタチップ風プレースホルダ 3 枚、その下にカード行 N 枚を並べる。
+ * 「データ取得中だが画面構造は読める」状態を返したいときに使う。
+ *
+ * @example
+ * <ListSkeleton rows={5} hasFilter loadingLabel="読み込み中..." />
+ */
+export interface ListSkeletonProps {
+    /** 並べるリスト行数。既定 5 */
+    rows?: number;
+    /** 上部のフィルタチップ列を出すか。既定 true */
+    hasFilter?: boolean;
+    /** aria-label 用テキスト。既定 "Loading..." */
+    loadingLabel?: string;
+    /** 外枠の追加 className（既定 `px-4 pt-3`） */
+    className?: string;
+    /** リスト行の高さ (px、既定 56) */
+    rowHeight?: number;
+}
+export declare function ListSkeleton({ rows, hasFilter, loadingLabel, className, rowHeight, }: ListSkeletonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * GridSkeleton — グリッド型サブタブ用の汎用 Skeleton。
+ *
+ * デフォルトは 2 カラム × N 行。サムネカード並びに使用。
+ *
+ * @example
+ * <GridSkeleton rows={3} columns={2} loadingLabel="読み込み中..." />
+ */
+export interface GridSkeletonProps {
+    /** グリッドの行数。既定 3 */
+    rows?: number;
+    /** グリッドの列数。既定 2 */
+    columns?: number;
+    /** カード 1 枚の高さ (px、既定 140) */
+    cardHeight?: number;
+    /** aria-label 用テキスト */
+    loadingLabel?: string;
+    /** 外枠の追加 className */
+    className?: string;
+}
+export declare function GridSkeleton({ rows, columns, cardHeight, loadingLabel, className, }: GridSkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+interface MenuDrawerItem {
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    badge?: number;
+}
+interface MenuDrawerSection {
+    title?: string;
+    items: MenuDrawerItem[];
+}
+interface MenuDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    /** ドロワー上部バナー（プロモーション等） */
+    banner?: React.ReactNode;
+    sections: MenuDrawerSection[];
+    /** フッターリンク群 */
+    footerLinks?: MenuDrawerItem[];
+    /** ドロワー幅（px） */
+    width?: number;
+    className?: string;
+}
+declare function MenuDrawer({ open, onClose, banner, sections, footerLinks, width, className, }: MenuDrawerProps): import("react/jsx-runtime").JSX.Element;
+export { MenuDrawer };
+export type { MenuDrawerProps, MenuDrawerSection, MenuDrawerItem };

package/dist/types/components/patterns/notification-badge.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface NotificationBadgeProps extends React.ComponentProps<"span"> {
+    count: number;
+    max?: number;
+    /**
+     * バッジのサイズ。
+     * - "xs"      : 最小（数字なし・ドット表示 6px）
+     * - "sm"      : 小（16px、1〜2桁向け）
+     * - "default" : 標準（20px）
+     * @default "default"
+     */
+    size?: "xs" | "sm" | "default";
+}
+declare function NotificationBadge({ className, count, max, size, ...props }: NotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationBadge };

package/dist/types/components/patterns/progress-steps.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface ProgressStepsProps extends React.ComponentProps<"div"> {
+    steps: string[];
+    currentStep: number;
+}
+declare function ProgressSteps({ className, steps, currentStep, ...props }: ProgressStepsProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressSteps };

package/dist/types/components/patterns/review-overlay.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface ReviewPin {
+    id: string;
+    x: number;
+    y: number;
+    comment?: string;
+}
+export interface ReviewOverlayProps {
+    /** オーバーレイを表示するか */
+    active: boolean;
+    /** ピン作成時のコールバック（ページ相対座標 0–1） */
+    onPinCreate?: (pin: Omit<ReviewPin, "id">) => void;
+    /** 既存ピン一覧 */
+    pins?: ReviewPin[];
+    /** ピンクリック時のコールバック */
+    onPinClick?: (pin: ReviewPin) => void;
+    /** 長押し認識時間 (ms) */
+    holdDuration?: number;
+    /** ハプティックフィードバック（Capacitor Haptics 等のコールバックを渡す） */
+    onHaptic?: () => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function ReviewOverlay({ active, onPinCreate, pins, onPinClick, holdDuration, onHaptic, className, children, }: ReviewOverlayProps): import("react/jsx-runtime").JSX.Element;
+export { ReviewOverlay };

package/dist/types/components/patterns/search-bar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface SearchBarProps extends Omit<React.ComponentProps<"input">, "type"> {
+    onSearch?: (value: string) => void;
+}
+declare function SearchBar({ className, onSearch, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export { SearchBar };

package/dist/types/components/patterns/section-header.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface SectionHeaderProps extends React.ComponentProps<"div"> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare function SectionHeader({ className, title, description, action, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { SectionHeader };

package/dist/types/components/patterns/share-buttons.d.ts

@@ -0,0 +1,13 @@
+type ShareProvider = "line" | "x" | "facebook" | "copy";
+type ShareLayout = "circle" | "inline";
+interface ShareButtonsProps {
+    url: string;
+    title?: string;
+    providers?: ShareProvider[];
+    layout?: ShareLayout;
+    className?: string;
+    onCopy?: () => void;
+}
+declare function ShareButtons({ url, title, providers, layout, className, onCopy, }: ShareButtonsProps): import("react/jsx-runtime").JSX.Element;
+export { ShareButtons };
+export type { ShareButtonsProps, ShareProvider, ShareLayout };

package/dist/types/components/patterns/shells/admin-shell.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface AdminShellProps extends React.ComponentProps<"div"> {
+    sidebar: React.ReactNode;
+    header?: React.ReactNode;
+    sidebarWidth?: string;
+}
+declare function AdminShell({ className, sidebar, header, children, sidebarWidth, ...props }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
+export { AdminShell };

package/dist/types/components/patterns/shells/app-shell.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface AppShellProps extends React.ComponentProps<"div"> {
+    topBar?: React.ReactNode;
+    bottomNav?: React.ReactNode;
+}
+declare function AppShell({ className, topBar, bottomNav, children, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export { AppShell };

package/dist/types/components/patterns/shells/marketing-shell.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface MarketingShellProps extends React.ComponentProps<"div"> {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare function MarketingShell({ className, header, footer, children, ...props }: MarketingShellProps): import("react/jsx-runtime").JSX.Element;
+export { MarketingShell };

package/dist/types/components/patterns/simple-pagination.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+/**
+ * SimplePagination のラベル形式。
+ * - `items`: 「N - M / 全 T 件」(アイテム数ベース)
+ * - `pages`: 「N / M ページ」(ページ数ベース)
+ */
+type SimplePaginationFormat = "items" | "pages";
+interface SimplePaginationBaseProps extends Omit<React.ComponentProps<"nav">, "onChange"> {
+    /** 現在のページ (1-indexed) */
+    page: number;
+    /** ページ変更時のコールバック (1-indexed) */
+    onPageChange?: (page: number) => void;
+    /**
+     * 表示形式の指定。明示しない場合は props から推測:
+     * - `total` + `pageSize` あり → "items"
+     * - `totalPages` あり → "pages"
+     */
+    format?: SimplePaginationFormat;
+    /** モバイル時にラベルを省略表示（"3 / 10" のような簡略表示） */
+    compact?: boolean;
+    /** 「前へ」ボタンのラベル / aria-label */
+    previousLabel?: string;
+    /** 「次へ」ボタンのラベル / aria-label */
+    nextLabel?: string;
+    /**
+     * 中央ラベルのカスタムレンダラ。
+     * 指定された場合、format によらず常にこの関数の結果が表示される。
+     */
+    renderLabel?: (info: {
+        page: number;
+        totalPages: number;
+        pageSize?: number;
+        total?: number;
+        from?: number;
+        to?: number;
+    }) => React.ReactNode;
+}
+type SimplePaginationItemsProps = SimplePaginationBaseProps & {
+    /** 全アイテム数 */
+    total: number;
+    /** 1ページあたりのアイテム数 */
+    pageSize: number;
+    totalPages?: never;
+};
+type SimplePaginationPagesProps = SimplePaginationBaseProps & {
+    /** 全ページ数 */
+    totalPages: number;
+    total?: never;
+    pageSize?: never;
+};
+type SimplePaginationProps = SimplePaginationItemsProps | SimplePaginationPagesProps;
+/**
+ * 最小ページネーション。「前へ / N - M / 全 T 件 / 次へ」または
+ * 「前へ / N / M ページ / 次へ」の最小限の構成。
+ *
+ * 大量のページ番号を一覧表示する `Pagination` とは別物で、
+ * モバイル / リスト下部 / 軽量な管理画面向けの簡素な UI。
+ *
+ * @example
+ * // アイテム数指定
+ * <SimplePagination page={1} pageSize={20} total={items.length} onPageChange={setPage} />
+ *
+ * @example
+ * // ページ数指定
+ * <SimplePagination page={1} totalPages={10} onPageChange={setPage} />
+ */
+declare function SimplePagination({ page, onPageChange, format, compact, previousLabel, nextLabel, renderLabel, className, total, pageSize, totalPages, ...props }: SimplePaginationProps): import("react/jsx-runtime").JSX.Element;
+export { SimplePagination };
+export type { SimplePaginationProps, SimplePaginationFormat };

package/dist/types/components/patterns/stat-card.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+type StatCardVariant = "default" | "success" | "caution" | "info" | "accent";
+interface StatCardProps extends Omit<React.ComponentProps<"div">, "onClick"> {
+    label: string;
+    value: string | number;
+    unit?: string;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+    icon?: React.ReactNode;
+    /**
+     * カードのカラーバリアント。
+     * - "default"  : 標準（白背景・低強調ボーダー）
+     * - "success"  : 緑系（成功・達成指標）
+     * - "caution"  : 赤系（注意・危険指標）
+     * - "info"     : 青系（情報・参考指標）
+     * - "accent"   : ブランド色（主要KPI）
+     * @default "default"
+     */
+    variant?: StatCardVariant;
+    /**
+     * Interactive モード: true にすると card が button のように振る舞う。
+     * - `role=button` / `tabIndex=0` / focus-visible ring / active:scale を自動付与
+     * - onClick / onKeyDown (Enter/Space) を有効化
+     * - hover で軽い陰り、cursor-pointer
+     *
+     * onClick だけ渡しても interactive=true 扱いする。
+     */
+    interactive?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+/**
+ * StatCard — KPI / メトリクス表示用の小さなカード。
+ *
+ * - `label` + `value` (+ optional `unit`, `trend`, `icon`) でデータ部を表現
+ * - `variant` で色 (default / success / caution / info / accent)
+ * - `interactive` (または `onClick`) でボタン化 — タップでナビゲートする
+ *   ホーム画面のメトリクスタイル等に最適
+ */
+declare function StatCard({ className, label, value, unit, trend, icon, variant, interactive, onClick, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export { StatCard };
+export type { StatCardProps, StatCardVariant };

package/dist/types/components/patterns/sticky-action-bar.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 上部ボーダーを表示する（デフォルト: true）
+     */
+    bordered?: boolean;
+}
+/**
+ * BottomAction — モバイル下部操作バー
+ *
+ * 画面下部に sticky で固定される CTA エリア。iOS の safe-area-inset-bottom に対応。
+ * カートに追加・購入するなどの主要アクションボタンを配置する。
+ *
+ * ### 使用例
+ * ```tsx
+ * <BottomAction>
+ *   <Button className="w-full" size="xl">カートに追加</Button>
+ * </BottomAction>
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - 商品詳細・確認画面など、画面内の最重要CTAに使用
+ * - SheetContent 内では sticky ではなく absolute 配置になるため注意
+ * - 子要素には Button w-full を推奨
+ */
+declare function StickyActionBar({ className, bordered, children, ...props }: StickyActionBarProps): import("react/jsx-runtime").JSX.Element;
+export { StickyActionBar };

package/dist/types/components/patterns/swipe-row.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface SwipeAction {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    variant?: "default" | "destructive";
+}
+interface SwipeRowProps {
+    children: React.ReactNode;
+    actions?: SwipeAction[];
+    /** スワイプで開く方向 */
+    side?: "left" | "right";
+    className?: string;
+}
+declare function SwipeRow({ children, actions, side, className }: SwipeRowProps): import("react/jsx-runtime").JSX.Element;
+export { SwipeRow };
+export type { SwipeRowProps };

package/dist/types/components/patterns/tag-input.d.ts

@@ -0,0 +1,20 @@
+interface TagInputProps {
+    value?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 最大タグ数 */
+    max?: number;
+    /** 重複タグを許可するか */
+    allowDuplicates?: boolean;
+    className?: string;
+    /**
+     * タグ入力フィールドの aria-label。
+     * i18n 対応: 英語では "Add tag" を渡す。
+     * @default "タグ入力"
+     */
+    inputLabel?: string;
+}
+declare function TagInput({ value, onChange, placeholder, disabled, max, allowDuplicates, className, inputLabel, }: TagInputProps): import("react/jsx-runtime").JSX.Element;
+export { TagInput };
+export type { TagInputProps };

package/dist/types/components/patterns/tag.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const tagVariants: (props?: {
+    variant?: "default" | "success" | "info" | "warning" | "caution" | "brand";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Tag({ className, variant, ...props }: React.ComponentProps<"span"> & VariantProps<typeof tagVariants>): import("react/jsx-runtime").JSX.Element;
+export { Tag, tagVariants };

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

@@ -0,0 +1,7 @@
+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;
+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/ui/alert-dialog.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type { ButtonProps } from "@/components/ui/button";
+/**
+ * AlertDialog — 確認ダイアログ（破壊的アクションの二段階確認に使用）
+ *
+ * ### 使用例
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="destructive">削除</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>本当に削除しますか？</AlertDialogTitle>
+ *       <AlertDialogDescription>この操作は取り消せません。</AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>キャンセル</AlertDialogCancel>
+ *       <AlertDialogAction>削除する</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, orientation, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * アクションボタンの並べ方。
+     * - "split"（既定）: 均等幅で横並び（各ボタン flex-1）。
+     * - "stacked": 旧挙動。モバイルは縦積み、sm 以上で右寄せ横並び
+     *   （size="sm" のときは 2 カラム grid）。
+     */
+    orientation?: "split" | "stacked";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<ButtonProps, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & Pick<ButtonProps, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Alert
+ *
+ * - bordered (success / info / error / warning): 白背景 + カラー枠線 + 外側リング
+ * - inline (inline-info / inline-caution / inline-warning): 色付き背景、コンパクト
+ *
+ * ### 2 つの使い方
+ *
+ * 1. **prop ベース**（推奨・bordered variant のみ）— アイコンは variant から自動
+ *    ```tsx
+ *    <Alert variant="success" title="送信しました" description="内容を確認してください。" />
+ *    ```
+ *
+ * 2. **composable**（旧来 / 自由度高い）
+ *    ```tsx
+ *    <Alert variant="success">
+ *      <AlertTitle>送信しました</AlertTitle>
+ *      <AlertDescription>内容を確認してください。</AlertDescription>
+ *    </Alert>
+ *    ```
+ */
+declare const alertVariants: (props?: {
+    variant?: "success" | "info" | "error" | "warning" | "inline-info" | "inline-caution" | "inline-warning";
+} & import("class-variance-authority/types").ClassProp) => string;
+type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    /**
+     * prop-based API のタイトル。children と排他（children 優先）。
+     * bordered variant でのみ有効。
+     */
+    title?: React.ReactNode;
+    /** prop-based API の説明テキスト */
+    description?: React.ReactNode;
+    /** カスタムアイコン（未指定時は variant に応じて自動選択） */
+    icon?: React.ReactNode;
+    /** 右側アクション（Button など） */
+    action?: React.ReactNode;
+};
+declare function Alert({ className, variant, children, title, description, icon, action, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };
+export type { AlertVariant };

package/dist/types/components/ui/auto-grow-textarea.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { Textarea } from "./textarea";
+/**
+ * AutoGrowTextarea — Textarea ラッパー。入力に合わせて自動高さ調整。
+ *
+ * - 入力ごとに `scrollHeight` を計算して `style.height` を更新
+ * - `minRows` で最小行数を確保（カーソル下に常に 1 行分の余白を残す）
+ * - `maxLength` 指定で右下に「現在 / 上限」カウンタを表示
+ *   - 70% 超で warning 色、上限到達で caution 色
+ * - 内部 ref で `<textarea>` を握り、外部からの value 同期にも追従
+ *
+ * もとは belle-todo + ninshin-todo の共通実装（プロダクションで TaskDetailSheet /
+ * FeedbackSheet / Notes / Venues 等で使用）。DS に昇格。
+ *
+ * ### 使用例
+ * ```tsx
+ * <AutoGrowTextarea
+ *   value={memo}
+ *   onChange={setMemo}
+ *   placeholder="メモを入力..."
+ *   minRows={3}
+ *   maxLength={500}
+ * />
+ * ```
+ *
+ * @example
+ * // 最小用途（カウンタなし）
+ * <AutoGrowTextarea value={v} onChange={setV} placeholder="..." />
+ */
+export interface AutoGrowTextareaProps extends Omit<React.ComponentProps<typeof Textarea>, "ref" | "value" | "onChange" | "placeholder" | "rows" | "maxLength" | "className"> {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** 最小行数。これより小さい高さにはならない（既定 3） */
+    minRows?: number;
+    /** 指定すると右下に「現在 / 上限」カウンタを表示。70% 超で warning 色、上限到達で caution 色。 */
+    maxLength?: number;
+    className?: string;
+}
+export declare function AutoGrowTextarea({ value, onChange, placeholder, minRows, maxLength, className, ...textareaProps }: AutoGrowTextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ui/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/types/components/ui/badge.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "success" | "info" | "warning" | "secondary" | "ghost" | "destructive" | "outline" | "subtle";
+} & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * Badge — ステータス / 件数表示。
+ *
+ * 使い分け:
+ * - **Badge**: 数値・ステータス（クリック不可）— `<Badge>NEW</Badge>`
+ * - **Tag**: 表示専用ラベル — `<Tag variant="brand">特集</Tag>`
+ * - **Chip**: フィルタ・キーワード（クリック可） — `<Chip selected>適用中</Chip>`
+ *
+ * variant: default(brand) / secondary / outline / destructive / success /
+ *   warning / info / subtle(brand-light) / ghost
+ */
+declare function Badge({ className, variant, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/types/components/ui/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface BreadcrumbProps extends React.ComponentProps<"nav"> {
+    /**
+     * nav 要素の aria-label。i18n 対応: 英語では "Breadcrumb" を渡す。
+     * @default "パンくずリスト"
+     */
+    label?: string;
+}
+declare function Breadcrumb({ label, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<"a">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { buttonVariants } from "@/lib/server-variants/button-variants";
+/** navigator.vibrate のパターン (ms) */
+declare const HAPTIC_PATTERNS: Record<string, number | number[]>;
+type HapticType = keyof typeof HAPTIC_PATTERNS;
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    /** モバイルでの触覚フィードバック。navigator.vibrate() を使用。未対応環境では無視される。 */
+    haptic?: HapticType;
+}
+/**
+ * Button — 汎用ボタン
+ *
+ * バリアントの使い分け:
+ * - `default`: 主たる CTA（1 画面に 1〜2 個まで）。
+ * - `secondary` / `tertiary`: 並列の選択肢・キャンセル。
+ * - `ghost` / `link`: 文字寄りの controls。
+ * - `destructive`: 削除・取り消しなど不可逆操作。
+ * - `glass` / `accent`: モバイル / ヒーローセクション向け装飾系。
+ * - `inverse` / `ghost-inverse`: 暗背景・ヒーローセクション上で使う反転バリアント。
+ *
+ * サイズ:
+ * - `xs` / `sm` / `default` / `lg` / `xl`: 一般用途。
+ * - `hero`: トップ hero / final-CTA 向けのピル型特大 CTA。
+ * - `icon` / `icon-sm` / `icon-lg` / `icon-xl`: アイコンのみのボタン（aria-label 必須）。
+ */
+declare function Button({ className, variant, size, layout, haptic, onClick, type, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+export type { ButtonProps, HapticType };

package/dist/types/components/ui/calendar.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export { Calendar };