ksk-design-system 1.35.0

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const cardVariants: (props?: {
+    variant?: "default" | "media";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card — 情報をまとめる汎用カード。
+ *
+ * バリアント:
+ * - `default`: `p-6` + `gap-6`。情報を持つカード（テキスト / ボタン構成）。
+ * - `media`: padding/gap なし。サムネを端まで広げる用途。オーバーレイ配置時に。
+ *
+ * 構成パーツ: `CardHeader` / `CardTitle` / `CardDescription` / `CardAction` /
+ *   `CardContent` / `CardFooter`。`@container` クエリで内部レスポンシブ。
+ *
+ * Note: 商品の表示は `ProductCard`（patterns/commerce）を使う。
+ */
+declare function Card({ className, variant, ...props }: CardProps): 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, CardTitle, CardDescription, CardAction, CardContent, CardFooter, cardVariants };
+export type { CardProps };

package/dist/types/components/ui/checkbox-card.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+/**
+ * CheckboxCardGroup / CheckboxCardItem — カード型チェックボックス
+ *
+ * 複数選択のカード型 UI に使用。単一選択には RadioGroup を使用。
+ *
+ * ### 使用例
+ * ```tsx
+ * <CheckboxCardGroup>
+ *   <CheckboxCardItem description="月500円">ライトプラン</CheckboxCardItem>
+ *   <CheckboxCardItem description="月1,000円" badge={<Badge>人気</Badge>}>
+ *     スタンダードプラン
+ *   </CheckboxCardItem>
+ * </CheckboxCardGroup>
+ * ```
+ */
+declare function CheckboxCardGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxCardItem({ className, children, description, expandedContent, badge, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    /** ラベルテキスト */
+    children?: React.ReactNode;
+    /** 補足説明テキスト */
+    description?: React.ReactNode;
+    /** 選択時に展開表示するコンテンツ */
+    expandedContent?: React.ReactNode;
+    /** タグバッジ（例: "20%OFF"） */
+    badge?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { CheckboxCardGroup, CheckboxCardItem };

package/dist/types/components/ui/checkbox-field.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+export interface CheckboxFieldProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    /** インラインラベル（同意文・確認文など）。リンク等の ReactNode 可。 */
+    label: React.ReactNode;
+    /** ラベル下の補足説明。 */
+    description?: React.ReactNode;
+    /** エラーメッセージ。指定時は aria-invalid + Caution 色で表示。 */
+    error?: string;
+    /** 外側コンテナのクラス（チェックボックス本体の整列スタイルは固定）。 */
+    className?: string;
+}
+/**
+ * CheckboxField — フォーム内の単体チェックボックス（同意 / 確認用）。
+ *
+ * filter・設定行用の `<Checkbox label>`（hover 背景・行 padding・件数バッジ付き）とは
+ * 役割が別。フォームフィールドとして「チェック + インラインラベル + 任意の説明 / エラー」を
+ * DS 正準の縦整列（typo-body-md の行高 24.5px に 20px チェックを mt-0.5 で中央化）で出す。
+ * ラベルが折り返しても items-start で先頭行に整列する。
+ *
+ * 目的: checkbox と label を画面側で手組みして mt / 行高がズレるのを防ぐ正準コンポーネント。
+ */
+declare function CheckboxField({ label, description, error, className, id, ...props }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+export { CheckboxField };

package/dist/types/components/ui/checkbox-group.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+/**
+ * CheckboxGroup / CheckboxGroupItem — チェックボックスグループ
+ *
+ * 複数のチェックボックスをグリッドレイアウト + ラベル + エラー表示付きでまとめるラッパー。
+ *
+ * ### 使用例
+ * ```tsx
+ * <CheckboxGroup label="配送方法" required columns={2}>
+ *   <CheckboxGroupItem value="standard">通常配送</CheckboxGroupItem>
+ *   <CheckboxGroupItem value="express" description="翌日届く">
+ *     速達配送
+ *   </CheckboxGroupItem>
+ * </CheckboxGroup>
+ * ```
+ */
+export interface CheckboxGroupProps {
+    label: string;
+    required?: boolean;
+    helpText?: string;
+    error?: string;
+    /** グリッドカラム数（デフォルト: 2） */
+    columns?: number;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function CheckboxGroup({ label, required, helpText, error, columns, children, className, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxGroupItem({ className, children, description, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    children: React.ReactNode;
+    description?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { CheckboxGroup, CheckboxGroupItem };

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+type CheckboxRootProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
+export interface CheckboxProps extends CheckboxRootProps {
+    /**
+     * 文字列または ReactNode を渡すと、Checkbox を `<label>` でラップして
+     * 行型レイアウトに切り替える。filter sidebar / 設定画面で典型的な
+     * 「行全体クリッカブル」パターン。未指定なら従来通り素のチェックボックス
+     * （外側で Label と組み合わせる使い方も継続可能）。
+     */
+    label?: React.ReactNode;
+    /** サブテキスト（label 指定時のみ有効） */
+    description?: React.ReactNode;
+    /** 右端に表示する件数バッジ（label 指定時のみ有効） */
+    count?: number;
+    /** label モード時の行コンテナに付けるクラス */
+    containerClassName?: string;
+}
+/**
+ * Checkbox — チェックボックス
+ *
+ * 2 つの使い方:
+ *
+ * 1. **素の Checkbox** — `label` を渡さない場合
+ *    ```tsx
+ *    <Checkbox checked={...} onCheckedChange={...} />
+ *    ```
+ *    外側で `<Label>` や `<FormField>` と組み合わせて使う。
+ *
+ * 2. **行型レイアウト** — `label` を渡すと自動で `<label>` ラップ + 行全体 hover
+ *    ```tsx
+ *    <Checkbox
+ *      label="正社員"
+ *      count={1234}
+ *      checked={...}
+ *      onCheckedChange={...}
+ *    />
+ *    ```
+ *    filter sidebar / 設定画面の典型パターン。行全体クリッカブル、hover で背景強調。
+ *
+ * カード型の選択肢には `CheckboxCard` を使用。
+ */
+declare function Checkbox({ label, description, count, containerClassName, className, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/types/components/ui/coach-mark.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+type CoachMarkPlacement = "top" | "bottom" | "left" | "right";
+type CoachMarkVariant = "default" | "brand";
+interface CoachMarkProps {
+    /** バルーンに表示するコンテンツ */
+    content: React.ReactNode;
+    children: React.ReactNode;
+    placement?: CoachMarkPlacement;
+    variant?: CoachMarkVariant;
+    /** 制御モード: open を外から制御 */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** ステップ番号（オンボーディング用） */
+    step?: number;
+    /** 合計ステップ数 */
+    totalSteps?: number;
+    /** 次へボタンクリック */
+    onNext?: () => void;
+    /** 閉じるボタン表示 */
+    showClose?: boolean;
+    onClose?: () => void;
+    delayDuration?: number;
+    className?: string;
+}
+declare function CoachMark({ content, children, placement, variant, open, onOpenChange, step, totalSteps, onNext, showClose, onClose, delayDuration, className, }: CoachMarkProps): import("react/jsx-runtime").JSX.Element;
+export { CoachMark };
+export type { CoachMarkProps, CoachMarkPlacement, CoachMarkVariant };

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+/**
+ * Collapsible — 折りたたみパネル
+ *
+ * トリガーでコンテンツを表示/非表示に切り替える低レベルプリミティブ。
+ * アコーディオンと異なり単独の折りたたみに使用。
+ *
+ * ### 使用例
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost">詳細を表示</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>折りたたまれたコンテンツ</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -0,0 +1,19 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    /** トリガーボタンの aria-label */
+    triggerLabel?: string;
+}
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, triggerLabel, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export { Combobox };

package/dist/types/components/ui/countdown-timer.d.ts

@@ -0,0 +1,39 @@
+type Granularity = "day" | "hour" | "minute" | "second";
+interface CountdownTimerProps {
+    /** カウントダウン先の日時 */
+    targetDate: Date;
+    /**
+     * 表示粒度（既定 "second"）。
+     * - "day"   : 日のみ表示 (結婚式 / 旅行 / 出産予定日まで N 日)。1日1回ペースで再計算。
+     * - "hour"  : 時間まで (1分ごとに再計算)
+     * - "minute": 分まで (秒ごとに再計算)
+     * - "second": 秒まで (旧デフォルト、競技的カウントダウン)
+     */
+    granularity?: Granularity;
+    /** ラベルテキスト（カウント中、既定 "残り"） */
+    label?: string;
+    /** 終了時テキスト（既定 "受付終了"） */
+    endedLabel?: string;
+    /** 当日 (残り 0 日) 時のテキスト。granularity="day" で使用（既定 "本日"） */
+    todayLabel?: string;
+    variant?: "filled" | "ghost";
+    /** [hh:mm:ss モードのみ] 時間を非表示にして 分:秒 のみ表示 */
+    compact?: boolean;
+    className?: string;
+    onEnd?: () => void;
+    /** 日単位ラベル。granularity="day" で使用。@default "日" */
+    dayUnit?: string;
+    /** 時間単位ラベル。@default "時間" */
+    hourUnit?: string;
+    /** 分単位ラベル。@default "分" */
+    minuteUnit?: string;
+    /** 秒単位ラベル。@default "秒" */
+    secondUnit?: string;
+}
+/**
+ * CountdownTimer — granularity に応じて day / time モードを描画。
+ * 各モードを別コンポーネントに分け、hooks を常に同じ順序で呼ぶ（Rules of Hooks 準拠）。
+ */
+declare function CountdownTimer(props: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
+export { CountdownTimer };
+export type { CountdownTimerProps };

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

@@ -0,0 +1,53 @@
+interface DatePickerProps {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    /**
+     * トリガーボタンのプレースホルダーテキスト。
+     * i18n 対応: 英語では "Select date"、日本語では "日付を選択" を渡す。
+     * @default "日付を選択"
+     */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    dateFormat?: string;
+    /**
+     * トリガーボタンのアクセシビリティラベル。
+     * カレンダーポップアップを開くボタンの読み上げテキスト。
+     * @default placeholder と同じ値
+     */
+    triggerLabel?: string;
+}
+declare function DatePicker({ value, onChange, placeholder, disabled, className, dateFormat, triggerLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+interface DateRangePickerProps {
+    value?: {
+        from?: Date;
+        to?: Date;
+    };
+    onChange?: (range: {
+        from?: Date;
+        to?: Date;
+    } | undefined) => void;
+    /**
+     * トリガーボタンのプレースホルダーテキスト。
+     * @default "期間を選択"
+     */
+    placeholder?: string;
+    /**
+     * 開始日フィールドのプレースホルダー（分割レイアウト用）。
+     * @default "開始日"
+     */
+    fromPlaceholder?: string;
+    /**
+     * 終了日フィールドのプレースホルダー（分割レイアウト用）。
+     * @default "終了日"
+     */
+    toPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+    dateFormat?: string;
+    /** アクセシビリティラベル */
+    triggerLabel?: string;
+}
+declare function DateRangePicker({ value, onChange, placeholder, disabled, className, dateFormat, triggerLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export { DatePicker, DateRangePicker };
+export type { DatePickerProps, DateRangePickerProps };

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Content> {
+    /**
+     * デフォルトの内側余白とセクション間レイアウトを制御。
+     * - true（既定）: p-6 + `flex flex-col gap-4` を付与。ヘッダ/本文/フッタが
+     *                 16px 間隔で縦に並ぶ（AlertDialog と同じ挙動）。本文セクションを
+     *                 持たない確認ダイアログでも、ヘッダとフッタが詰まらない。
+     * - false       : 余白・レイアウトを一切付与しない（素の要素）。タブ/スクロール
+     *                 本体/固定フッタの3段構成など、内側を自前でレイアウトする
+     *                 複雑モーダル向け。
+     */
+    padding?: boolean;
+    /**
+     * Optional screen-reader description for the dialog.
+     * - string / ReactNode: 自動で sr-only な <DialogDescription> を
+     *   レンダリングし、`aria-describedby` に紐付ける
+     * - undefined（既定）: `aria-describedby={undefined}` を明示して
+     *   Radix の "Missing Description" 警告を抑制。description が
+     *   概念上不要なダイアログ用。
+     * 可視の description を出したい場合は、この prop を使わず子要素として
+     * `<DialogDescription>` を直接置く。
+     */
+    description?: React.ReactNode;
+    /**
+     * 縦位置。
+     * - "center" (既定): 画面中央
+     * - "top": 上部寄せ (safe-area-inset-top + 2rem 下) — モバイルで縦長
+     *   コンテンツ (チェックリスト等) を出すときに、コンテンツが
+     *   スクロールしやすく操作しやすい
+     */
+    position?: "center" | "top";
+}
+declare function DialogContent({ className, children, padding, description, position, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, orientation, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * アクションボタンの並べ方。
+     * - "split"（既定）: 均等幅で横並び（各ボタン flex-1）。2 ボタンを 50/50 で
+     *   並べる iOS 風レイアウト。モバイルでも横並びのまま。
+     * - "stacked": 旧挙動。モバイルは縦積み、sm 以上で右寄せ横並び（hug 幅）。
+     *   3 つ以上のアクションや、右寄せにしたいフォーム系ダイアログで使う。
+     */
+    orientation?: "split" | "stacked";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+export type { DialogContentProps };

package/dist/types/components/ui/dropdown-filter.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export interface DropdownFilterOption<K extends string = string> {
+    key: K;
+    label: string;
+    /**
+     * label の左に表示する任意アイコン（iconsax 等）。色は currentColor を継承するため
+     * チップ active 時は自動で白抜きになる。サイズは要素側で指定すること（例: `<Element3 size={16} />`）。
+     * チップ（選択中 option）と選択肢リストの両方に表示される。未指定ならテキストのみ＝従来挙動。
+     */
+    icon?: React.ReactNode;
+}
+export interface DropdownFilterProps<K extends string = string> {
+    label: string;
+    value: K | "all";
+    options: DropdownFilterOption<K>[];
+    onSelect: (key: K | "all") => void;
+    /** "すべて" オプションを非表示にする */
+    hideAll?: boolean;
+    allLabel?: string;
+    /**
+     * 選択 key を表示用テキストに変換する (例: enum key → 日本語ラベル)。
+     * 未指定なら options から label を引く。
+     */
+    getDisplayLabel?: (key: K) => string;
+    /** 選択中は値のみ表示 (例: "カテゴリ別")。プレフィックス "ラベル: " を省略。 */
+    valueOnly?: boolean;
+    /**
+     * この値と一致するときは「未絞り込み」扱いとし、active 色を当てずラベルだけ表示する。
+     * 例: "追加順" を pristine とすれば、追加順のときは「並び替え」と表示し pristine 配色に。
+     */
+    pristineValue?: K;
+    className?: string;
+}
+declare function DropdownFilter<K extends string = string>({ label, value, options, onSelect, hideAll, allLabel, getDisplayLabel, valueOnly, pristineValue, className, }: DropdownFilterProps<K>): import("react/jsx-runtime").JSX.Element;
+export { DropdownFilter };

package/dist/types/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+/**
+ * DropdownMenu — ドロップダウンメニュー
+ *
+ * ### 使用例
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="ghost">メニュー</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>編集</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/types/components/ui/error-boundary.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+interface ErrorBoundaryLabels {
+    /** ヒーロー絵文字 / アイコン代わり。既定 "😢" */
+    emoji?: string;
+    /** タイトル。既定 "Something went wrong" */
+    title?: string;
+    /** 説明文。既定 "Your data is safe. Use the buttons below to recover." */
+    description?: string;
+    /** リロードボタン。既定 "Reload" */
+    reloadLabel?: string;
+    /** リセット (再試行) ボタン。onReset 指定時のみ表示。既定 "Try again" */
+    resetLabel?: string;
+}
+export interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    /** fallback 内で使う文言。i18n はアプリ側で解決して string を渡す。 */
+    labels?: ErrorBoundaryLabels;
+    /**
+     * onError コールバック。logger / error tracking 連携用。
+     * dev では console.error が常に呼ばれる (NODE_ENV !== "production")。
+     */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /**
+     * 指定すると fallback に "再試行" ボタンが出る。クリックで catch 状態
+     * (hasError) をリセットし、子をもう一度マウントする。
+     * 未指定なら reload ボタンのみ。
+     */
+    onReset?: () => void;
+    /** 完全カスタム fallback を渡したい場合 (labels より優先) */
+    fallback?: React.ReactNode | ((error: Error | null, reset: () => void) => React.ReactNode);
+    /** fallback 外枠の追加 className */
+    className?: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * ErrorBoundary — React の componentDidCatch をラップした汎用フォールバック。
+ *
+ * - labels prop で i18n 上書き
+ * - onError で logger / Sentry 等への連携
+ * - onReset 指定で「再試行」ボタンを表示 (hasError をリセットして再マウント)
+ * - fallback prop で完全カスタムレンダリングも可
+ *
+ * @example
+ * <ErrorBoundary
+ *   labels={{
+ *     title: t("errors.generic_title"),
+ *     description: t("errors.unexpected_reload"),
+ *     reloadLabel: t("errors.reload"),
+ *   }}
+ *   onError={(e, info) => reportToSentry(e, info)}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleReset: () => void;
+    handleReload: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+}
+export {};

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "@radix-ui/react-slot";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+/**
+ * Form — react-hook-form 統合フォームラッパー
+ *
+ * FormProvider のラッパー。useForm() の戻り値を渡すことで、
+ * ネストされた FormField が自動的にフォーム状態にアクセスできる。
+ *
+ * ### 使用例
+ * ```tsx
+ * const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) })
+ *
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="email"
+ *       render={({ field }) => (
+ *         <FormItem>
+ *           <FormLabel>メールアドレス</FormLabel>
+ *           <FormControl>
+ *             <Input placeholder="example@email.com" {...field} />
+ *           </FormControl>
+ *           <FormMessage />
+ *         </FormItem>
+ *       )}
+ *     />
+ *     <Button type="submit">送信</Button>
+ *   </form>
+ * </Form>
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - react-hook-form + zod での使用を推奨
+ * - FormControl でラップしたコンポーネントに自動的に aria-describedby / aria-invalid が付与される
+ * - FormMessage はエラー時のみ表示される
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, required, children, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & {
+    required?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/types/components/ui/hover-card.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+/**
+ * HoverCard — ホバー情報カード
+ *
+ * トリガー要素にホバーしたとき詳細情報をポップアップ表示する。
+ * ユーザープロフィールのプレビューや補足説明に使用。
+ *
+ * ### 使用例
+ * ```tsx
+ * <HoverCard>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="link">@username</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <p>プロフィール詳細...</p>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ */
+declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/types/components/ui/image-gallery.d.ts

@@ -0,0 +1,28 @@
+interface GalleryImage {
+    src: string;
+    alt?: string;
+}
+interface ImageGalleryProps {
+    images: GalleryImage[];
+    indicatorType?: "thumbnail" | "dot";
+    aspectRatio?: "square" | "4/3" | "16/9" | "3/4";
+    onImageClick?: (index: number) => void;
+    className?: string;
+    /**
+     * 前の画像ボタンの aria-label。i18n 対応: 英語では "Previous image" を渡す。@default "前の画像"
+     */
+    prevLabel?: string;
+    /**
+     * 次の画像ボタンの aria-label。i18n 対応: 英語では "Next image" を渡す。@default "次の画像"
+     */
+    nextLabel?: string;
+    /**
+     * 画像インデックスラベル生成関数。サムネイル / ドットの aria-label と alt テキストに使用。
+     * i18n 対応: 英語では `(i) => \`Image ${i + 1}\`` を渡す。
+     * @default (i) => `画像 ${i + 1}`
+     */
+    imageLabel?: (index: number) => string;
+}
+declare function ImageGallery({ images, indicatorType, aspectRatio, onImageClick, className, prevLabel, nextLabel, imageLabel, }: ImageGalleryProps): import("react/jsx-runtime").JSX.Element;
+export { ImageGallery };
+export type { ImageGalleryProps, GalleryImage };