ksk-design-system 1.35.0

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface InputProps extends Omit<React.ComponentProps<"input">, "prefix"> {
+    /**
+     * 入力フィールド左側の装飾。テキスト・アイコン・単位記号など。
+     * 例: "¥", "@", <SearchIcon />
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * 入力フィールド右側の装飾。テキスト・アイコン・ボタンなど。
+     * 例: "%", "kg", クリアボタン, パスワード表示ボタン
+     * インタラクティブ要素（ボタン等）を渡す場合はこちら（pointer-events 有効）。
+     */
+    endAdornment?: React.ReactNode;
+}
+declare function Input({ className, type, startAdornment, endAdornment, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export { Input };
+export type { InputProps };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };

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

@@ -0,0 +1,21 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    onChange?: (values: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    /** 選択済みチップの最大表示数（超えると "+N" で省略） @default 3 */
+    maxDisplay?: number;
+    /** 選択済みをクリアするボタンを表示 @default true */
+    clearable?: boolean;
+}
+declare function MultiSelect({ options, value, onChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, maxDisplay, clearable, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };

package/dist/types/components/ui/navigation-bar.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+declare function IconClose({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function IconBack({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** iOS 26 スタイルのシェアアイコン（上向き矢印 + トレイ） */
+declare function IconShareIos({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export interface NavigationBarProps {
+    /** 中央タイトル（絶対配置で常に視覚的中央） */
+    title?: React.ReactNode;
+    /**
+     * 左ボタンのアイコン:
+     * - "back"  : ← 戻る（デフォルト）
+     * - "close" : × 閉じる（iOS 26 モーダル）
+     * - ReactNode : カスタム
+     */
+    leftIcon?: "back" | "close" | React.ReactNode;
+    /** 左ボタンクリックハンドラ */
+    onLeft?: () => void;
+    /** 左ボタンのアクセシビリティラベル（自動補完: "戻る" / "閉じる"） */
+    leftLabel?: string;
+    /**
+     * 右スロット。rightSlot が優先、未指定かつ onShare があればシェアボタンを表示。
+     */
+    rightSlot?: React.ReactNode;
+    /** シェアボタンを右に表示してそのハンドラを登録する簡便 prop */
+    onShare?: () => void;
+    /** シェアボタンのアクセシビリティラベル */
+    shareLabel?: string;
+    /**
+     * true : Liquid Glass ボタン（グラデーション・写真背景の上に重ねるとき）
+     * false: 通常ボタン（secondary variant）
+     */
+    glass?: boolean;
+    /** ヘッダー自体の背景を透明にする（コンテンツに重ねるとき） */
+    transparent?: boolean;
+    className?: string;
+}
+/**
+ * iOS 26 スタイルのナビゲーションバー。
+ *
+ * - leading  : `Button size="icon-xl"` (glass or secondary variant)
+ * - center   : 絶対配置タイトル（常に視覚的中央）
+ * - trailing : `Button size="icon-xl"` (glass or secondary variant)
+ *
+ * @example
+ * // 通常（白背景ページ）
+ * <NavigationBar title="設定" leftIcon="back" onLeft={back} onShare={share} />
+ *
+ * // iOS 26 ガラス（グラデーション上に重ねる）
+ * <NavigationBar title="Aircraft Stats" leftIcon="close" onLeft={close} onShare={share} glass transparent />
+ */
+declare function NavigationBar({ title, leftIcon, onLeft, leftLabel, rightSlot, onShare, shareLabel, glass, transparent, className, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export { NavigationBar, IconClose, IconBack, IconShareIos };

package/dist/types/components/ui/number-input.d.ts

@@ -0,0 +1,20 @@
+interface NumberInputProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** 数値フォーマッタ（例: 通貨表示） */
+    format?: (value: number) => string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+    /** 減算ボタンの aria-label。i18n 対応: 英語では "Decrease" を渡す。@default "減らす" */
+    decrementLabel?: string;
+    /** 加算ボタンの aria-label。i18n 対応: 英語では "Increase" を渡す。@default "増やす" */
+    incrementLabel?: string;
+}
+declare function NumberInput({ value, onChange, min, max, step, format, placeholder, disabled, size, className, decrementLabel, incrementLabel, }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export { NumberInput };
+export type { NumberInputProps };

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { buttonVariants } from "./button";
+import type { VariantProps } from "class-variance-authority";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<VariantProps<typeof buttonVariants>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {
+    /** aria-label とボタンテキスト。i18n 対応: 英語では "Previous" を渡す。@default "前へ" */
+    label?: string;
+};
+declare function PaginationPrevious({ className, label, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
+type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {
+    /** aria-label とボタンテキスト。i18n 対応: 英語では "Next" を渡す。@default "次へ" */
+    label?: string;
+};
+declare function PaginationNext({ className, label, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
+type PaginationEllipsisProps = React.ComponentProps<"span"> & {
+    /** スクリーンリーダー向けラベル。@default "その他のページ" */
+    label?: string;
+};
+declare function PaginationEllipsis({ className, label, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis };

package/dist/types/components/ui/pill-toggle.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface PillToggleOption<T extends string = string> {
+    label: string;
+    value: T;
+    icon?: React.ReactNode;
+}
+interface PillToggleProps<T extends string = string> {
+    options: PillToggleOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "sm" | "md";
+    className?: string;
+}
+declare function PillToggle<T extends string = string>({ options, value, onChange, size, className, }: PillToggleProps<T>): import("react/jsx-runtime").JSX.Element;
+export { PillToggle };
+export type { PillToggleProps, PillToggleOption };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/types/components/ui/progress-ring.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+declare const SIZE_MAP: {
+    sm: {
+        size: number;
+        stroke: number;
+    };
+    md: {
+        size: number;
+        stroke: number;
+    };
+    lg: {
+        size: number;
+        stroke: number;
+    };
+    xl: {
+        size: number;
+        stroke: number;
+    };
+};
+interface ProgressRingProps {
+    /** 0〜100 */
+    value: number;
+    size?: keyof typeof SIZE_MAP;
+    /** 中央テキスト（省略時は % 表示） */
+    label?: React.ReactNode;
+    showLabel?: boolean;
+    className?: string;
+}
+declare function ProgressRing({ value, size, label, showLabel, className, }: ProgressRingProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressRing };
+export type { ProgressRingProps };

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+type ProgressVariant = "default" | "success" | "warning" | "caution";
+type ProgressDuration = "none" | "sm" | "md" | "lg";
+export interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
+    /**
+     * 色バリアント。値の閾値に応じて呼び出し側で切り替える想定 (例: 100% 超で caution)。
+     * @default "default"
+     */
+    variant?: ProgressVariant;
+    /**
+     * indicator のトランジション時間プリセット。
+     * - "none" : アニメーション無効
+     * - "sm" (150ms) : 既定値、Tailwind デフォルトと同等
+     * - "md" (300ms) : 緩やか
+     * - "lg" (500ms) : 大幅変化向け (達成カードなど)
+     * @default "sm"
+     */
+    transitionDuration?: ProgressDuration;
+}
+/**
+ * Progress — 進捗バー。
+ *
+ * - value: 0-100
+ * - variant: 色バリアント (default/success/warning/caution)
+ * - transitionDuration: アニメ速度 (none/sm/md/lg)
+ *
+ * @example
+ * <Progress value={42} />
+ * <Progress value={120} variant="caution" />              // 予算超過
+ * <Progress value={progress} transitionDuration="lg" />   // ホームの達成バー
+ */
+declare function Progress({ className, value, variant, transitionDuration, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export { Progress };

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

@@ -0,0 +1,22 @@
+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;
+/**
+ * RadioGroupItem — ラジオ 1 項目
+ *
+ * 2 つの使い方:
+ * 1. **素のラジオ** — `children` を渡さない場合は円のみ描画。外側で
+ *    `<Label>` と組み合わせる従来の使い方（後方互換）。
+ * 2. **ラベル内包** — `children`（＋任意の `description`）を渡すと、
+ *    CheckboxGroupItem と同じ「ラジオ + ラベル」の行型レイアウトで描画。
+ *    ```tsx
+ *    <RadioGroup defaultValue="s">
+ *      <RadioGroupItem value="s">Small</RadioGroupItem>
+ *      <RadioGroupItem value="m" description="標準サイズ">Medium</RadioGroupItem>
+ *    </RadioGroup>
+ *    ```
+ */
+declare function RadioGroupItem({ className, children, description, id, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    description?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { DialogContent, DialogTitle, DialogDescription, DialogClose, DialogTrigger } from "./dialog";
+declare function useMediaQuery(query: string): boolean;
+interface ResponsiveDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare function ResponsiveDialog({ children, ...props }: ResponsiveDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogTrigger({ children, ...props }: React.ComponentProps<typeof DialogTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogContent({ children, className, swipeToClose, ...props }: React.ComponentProps<typeof DialogContent> & {
+    /**
+     * SP（Sheet）側で下スワイプ閉じ（全面 scroll-aware）を有効化。
+     * PC（Dialog）は中央モーダルなので無視される。絞り込みモーダル等で
+     * 「SP は下スワイプで閉じたい」ときに付ける。
+     */
+    swipeToClose?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogHeader({ children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogTitle({ children, ...props }: React.ComponentProps<typeof DialogTitle>): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogDescription({ children, ...props }: React.ComponentProps<typeof DialogDescription>): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogFooter({ children, className, orientation, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * アクションボタンの並べ方。
+     * - "split"（既定）: 均等幅で横並び（各ボタン flex-1）。iOS のボトムシート風。
+     * - "stacked": 旧挙動。デスクトップは右寄せ横並び、モバイルは縦積み。
+     */
+    orientation?: "split" | "stacked";
+}): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogClose({ children, ...props }: React.ComponentProps<typeof DialogClose>): import("react/jsx-runtime").JSX.Element;
+export { ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogClose, useMediaQuery, };

package/dist/types/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * SelectTrigger のサイズ規格。Button/Input と揃えて 3 段階を用意。
+ * 既定は default (h-12) — 既存挙動と完全互換。
+ */
+declare const selectTriggerVariants: (props?: {
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+}
+declare function SelectTrigger({ className, children, size, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants, };
+export type { SelectTriggerProps };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

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

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+type SnapPoint = number | string;
+interface VisualViewportInset {
+    keyboardInset: number;
+    visibleHeight: number | null;
+}
+declare function computeVisualViewportInset(layoutHeight: number, visualHeight: number, visualOffsetTop: number): VisualViewportInset;
+/**
+ * Pure decision for the full-surface swipe-to-close gesture, shared by the
+ * touch and pointer paths in {@link SwipeToCloseBottomSheet}.
+ *
+ * Given the cumulative offset from the gesture's start (`dy`/`dx`) and whether
+ * the touched scroll region is at its top (`atTop`), classify the gesture:
+ *   - `null`   — below the 6px slop; intent is still ambiguous, keep waiting.
+ *   - `"drag"` — a downward, vertical-dominant gesture starting at the top;
+ *                drives the close-drag.
+ *   - `"scroll"` — anything else (upward, horizontal, or not at the top); the
+ *                content keeps its own scroll gesture.
+ *
+ * Exported for unit testing only — not part of the public package API.
+ */
+declare function decideSwipeGesture(dy: number, dx: number, atTop: boolean): "drag" | "scroll" | null;
+/**
+ * A single drag sample: vertical position (`y`, px) at a moment in time
+ * (`t`, ms — any monotonic clock; `event.timeStamp` in practice).
+ */
+interface DragSample {
+    y: number;
+    t: number;
+}
+/**
+ * Velocity of the drag (px/ms, positive = downward) over the trailing
+ * {@link FLICK_VELOCITY_WINDOW_MS} ending at `releaseT`.
+ *
+ * Only samples within the window *before release* count, so a flick followed
+ * by a pause-then-release reads ~0 (the finger was still at release) and does
+ * not register as a flick. Returns 0 when there are fewer than two qualifying
+ * samples or the time delta is non-positive.
+ *
+ * Exported for unit testing only — not part of the public package API.
+ */
+declare function computeFlickVelocity(samples: DragSample[], releaseT: number, windowMs?: number): number;
+/**
+ * Pure release decision for the swipe-to-close gesture: dismiss the sheet when
+ * either the drag passed the distance threshold (>30% of the sheet height,
+ * falling back to 200px when the height is unknown) OR the release was a fast
+ * downward flick ({@link FLICK_VELOCITY_THRESHOLD}) — mirroring iOS sheets,
+ * which close on a short fast flick even below the distance threshold.
+ *
+ * `velocity` is downward-positive px/ms (see {@link computeFlickVelocity}); the
+ * flick branch also requires a net downward drag so an upward flick never
+ * dismisses.
+ *
+ * Exported for unit testing only — not part of the public package API.
+ */
+declare function decideSwipeDismiss(dragY: number, sheetHeight: number, velocity: number): boolean;
+interface SheetProps extends React.ComponentProps<typeof DialogPrimitive.Root> {
+    snapPoints?: SnapPoint[];
+    activeSnapPoint?: SnapPoint | null;
+    setActiveSnapPoint?: (s: SnapPoint | null) => void;
+    /** index in `snapPoints` from which the backdrop overlay starts to fade in */
+    fadeFromIndex?: number;
+    dismissible?: boolean;
+    /**
+     * When false, the backdrop overlay is not rendered. Use for "push-up"
+     * layouts where the sheet shares the viewport with other UI (e.g. a
+     * video that resizes as the sheet expands).
+     * Default: true.
+     */
+    overlay?: boolean;
+}
+declare function Sheet({ snapPoints, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fadeFromIndex, dismissible, overlay, onOpenChange, open, defaultOpen, ...props }: SheetProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+/** ドラッグインジケーター（Apple HIG: 36×5pt, gray, centered） */
+declare function SheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+declare const sheetVariants: (props?: {
+    side?: "top" | "left" | "right" | "bottom" | "float" | "float-glass" | "bottom-glass";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface SheetContentProps extends React.ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /** オーバーレイをガラス調にする（glass系 side では自動で true） */
+    glassOverlay?: boolean;
+    /**
+     * Portal target element. When provided, the sheet portals into this element
+     * instead of document.body. Useful for inheriting CSS transforms (e.g. forced
+     * landscape rotation in mobile apps). Defaults to document.body if omitted.
+     */
+    container?: HTMLElement | null;
+    /**
+     * シートのデフォルト内側余白（p-6）を制御。
+     * - true（既定）: p-6 を付与（従来通り）
+     * - false       : p-0。スクロール領域＋固定フッタなど自前で内側レイアウトを
+     *                 組むときに使用。これまで padding を強制上書きしていた
+     *                 ケースを正規化する。
+     */
+    padding?: boolean;
+    /**
+     * Bottom-anchored sheets only (`side="bottom"` / `"bottom-glass"`). When true,
+     * <SheetDragIndicator /> is auto-rendered at the top and a downward swipe
+     * dragging past ~30% of the sheet height calls onOpenChange(false).
+     *
+     * The swipe works across the whole sheet surface, not just the indicator:
+     * a downward drag dismisses when it starts on the handle, or while the
+     * touched scroll region is at its top. Mid-scroll and horizontal gestures
+     * stay with the content, so it never hijacks scrolling.
+     *
+     * Ignored when the parent <Sheet> uses `snapPoints` (snap mode handles its
+     * own drag).
+     */
+    swipeToClose?: boolean;
+    /**
+     * Optional screen-reader description.
+     * - string / ReactNode: sr-only な <SheetDescription> を自動レンダリングし
+     *   `aria-describedby` に紐付ける
+     * - undefined（既定）: `aria-describedby={undefined}` を明示して
+     *   Radix の "Missing Description" 警告を抑制。description が概念上
+     *   不要なシート（クイック追加 FAB、設定 sheet 等）用。
+     * 可視の description を出したい場合は、この prop を使わず子要素として
+     * `<SheetDescription>` を直接置く。
+     */
+    description?: React.ReactNode;
+}
+declare function SheetContent({ className, children, side, glassOverlay, container, padding, swipeToClose, description, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetFooter({ className, orientation, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * アクションボタンの並べ方。
+     * - "split"（既定）: 均等幅で横並び（各ボタン flex-1）。2 ボタンを 50/50 で
+     *   並べる iOS のボトムシート風レイアウト。
+     * - "stacked": 旧挙動。縦積み（全幅）。
+     */
+    orientation?: "split" | "stacked";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetDragIndicator, computeVisualViewportInset, decideSwipeGesture, computeFlickVelocity, decideSwipeDismiss, };
+export type { SheetProps, SheetContentProps, SnapPoint, VisualViewportInset };

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+type RoundedShorthand = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export interface SkeletonProps extends Omit<React.ComponentProps<"div">, "width" | "height"> {
+    /** width shorthand。数値は px、文字列はそのまま CSS に渡す */
+    width?: string | number;
+    /** height shorthand。数値は px、文字列はそのまま CSS に渡す */
+    height?: string | number;
+    /** 角丸プリセット（既定 lg）。`className` で上書きすれば任意の rounded-* も指定可。 */
+    rounded?: RoundedShorthand;
+}
+/**
+ * Skeleton — 読み込み中のプレースホルダ。
+ *
+ * - `width` / `height` を数値で渡せば px、文字列ならそのまま CSS に渡る
+ * - `rounded` で角丸プリセットを切り替え（既定 `lg`）
+ * - `animate-pulse` がデフォルトで適用
+ *
+ * 複数まとめて並べる場合は `ListSkeleton` / `GridSkeleton` (patterns) を使うと
+ * 定型レイアウトが組める。
+ *
+ * @example
+ * // shorthand
+ * <Skeleton width={100} height={20} />
+ * <Skeleton width="100%" height={56} rounded="2xl" />
+ *
+ * @example
+ * // 旧形式 (className のみ) も互換維持
+ * <Skeleton className="h-4 w-32" />
+ */
+declare function Skeleton({ className, width, height, rounded, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+/**
+ * Slider — 数値スライダー
+ *
+ * Radix UI Slider ラッパー。範囲スライダー（2ハンドル）にも対応。
+ *
+ * ### 使用例
+ * ```tsx
+ * <Slider defaultValue={[50]} min={0} max={100} step={1} />
+ * ```
+ */
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Slider };

package/dist/types/components/ui/social-icon-data.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface SocialIconEntry {
+    viewBox: string;
+    body: React.ReactNode;
+}
+export type SocialIconTone = "mono" | "brand";
+/** platform slug → 表示用ラベル */
+export declare const SOCIAL_ICON_LABELS: Record<string, string>;
+export declare const SOCIAL_ICON_DATA: Record<string, Partial<Record<SocialIconTone, SocialIconEntry>>>;
+export declare const SOCIAL_ICON_PLATFORMS: readonly ["amazon", "android", "apple", "apple-music", "apple-podcasts", "artstation", "baidu", "behance", "boosty", "devianart", "discord", "dprofile", "dribbble", "dzen", "facebook", "figma", "github", "gmail", "google", "google-meet", "google-play", "google-podcast", "imo", "instagram", "kickstarter", "line", "linkedin", "medium", "messenger", "microsoft-teams", "notion", "ok", "ok-only-sign", "onlyfans", "patreon", "paypal", "pinterest", "product-hunt", "qiita", "quora", "reddit", "signal", "sina-weibo", "skype", "slack", "snapchat", "soundcloud", "spotify", "stack-overflow", "telegram", "telegram-only-sign", "threads", "tiktok", "tinder", "tumblr", "twitch", "viber", "vimeo", "vk", "vk-music", "vk-only-sign", "wantedly", "wechat", "whatsapp", "x-ex-twitter", "xing", "yandex-music", "yelp", "youtube", "youtube-music", "youtube-shorts", "zoom"];

package/dist/types/components/ui/social-icon.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { SOCIAL_ICON_LABELS, SOCIAL_ICON_PLATFORMS, type SocialIconTone } from "./social-icon-data";
+export interface SocialIconProps extends Omit<React.ComponentProps<"svg">, "children"> {
+    /** プラットフォーム slug（小文字）。例: "github" / "spotify" / "apple-music" */
+    platform: string;
+    /**
+     * 配色。
+     * - "brand"（既定）: ブランドカラー（元アセットの固有色。DS テーマには連動しない）
+     * - "mono": 単色（currentColor — テキスト色に追従）
+     */
+    tone?: SocialIconTone;
+    /** 一辺のサイズ(px) @default 24 */
+    size?: number;
+}
+/**
+ * SocialIcon — SNS / 外部サービスのブランドアイコン
+ *
+ * `socialicon/` 配下の `Name=BRAND, Colors=Neutral|Original.svg` を
+ * `scripts/generate-social-icons.mjs` で取り込んだ安定データ
+ * （`social-icon-data.tsx`）を描画する。`platform` はファイル名ではなく
+ * 正規化済み slug で指定するため、元アセットの命名・表示名に依存しない。
+ *
+ * ```tsx
+ * <SocialIcon platform="github" />
+ * <SocialIcon platform="spotify" tone="mono" className="text-[var(--Text-High-Emphasis)]" />
+ * <SocialIcon platform="apple-music" size={32} />
+ * ```
+ *
+ * 配色は元アセット由来のブランド色固定（tone="brand"）か、テキスト色追従の
+ * 単色（tone="mono" → currentColor）。DS のテーマカラーには連動しない
+ * （ブランドロゴは正式色を保つのが正しいため）。
+ *
+ * 利用可能な platform は {@link SOCIAL_ICON_PLATFORMS}、表示名は
+ * {@link SOCIAL_ICON_LABELS}。未収録の指定は何も描画しない（null）。
+ */
+declare function SocialIcon({ platform, tone, size, className, ...props }: SocialIconProps): import("react/jsx-runtime").JSX.Element;
+export { SocialIcon, SOCIAL_ICON_PLATFORMS, SOCIAL_ICON_LABELS };
+export type { SocialIconTone };

package/dist/types/components/ui/social-login-button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type SocialProvider = "line" | "google" | "apple" | "amazon";
+interface SocialLoginButtonProps extends React.ComponentProps<"button"> {
+    provider: SocialProvider;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+declare function SocialLoginButton({ provider, loading, fullWidth, className, disabled, children, ...props }: SocialLoginButtonProps): import("react/jsx-runtime").JSX.Element;
+export { SocialLoginButton };
+export type { SocialLoginButtonProps, SocialProvider };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** スピナーのサイズ。デフォルト "md" */
+    size?: "sm" | "md" | "lg";
+    /**
+     * スクリーンリーダー向けローディングラベル。
+     * i18n 対応: 英語では "Loading" を渡す。
+     * @default "読み込み中"
+     */
+    label?: string;
+}
+/**
+ * Spinner — ローディング表示
+ *
+ * ### 使用例
+ * ```tsx
+ * <Spinner size="md" />
+ * ```
+ */
+declare function Spinner({ className, size, label, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner };
+export type { SpinnerProps };

package/dist/types/components/ui/star-rating.d.ts

@@ -0,0 +1,12 @@
+interface StarRatingProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    size?: "sm" | "md" | "lg" | "xl";
+    /** 右端に "2/5" 形式のテキストを表示 */
+    showLabel?: boolean;
+    className?: string;
+}
+declare function StarRating({ value, onChange, max, size, showLabel, className, }: StarRatingProps): import("react/jsx-runtime").JSX.Element;
+export { StarRating };
+export type { StarRatingProps };