@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/responsive-list.d.cts

@@ -1,67 +1,230 @@
+/** Responsive record presentation and touch interaction wrappers; the host owns data loading and actions. */
+import * as React from 'react';
 /**
- * レスポンシブデータリストコンポーネント
- *
- * shadcn/ui パターンに準拠:
- * - テーマトークン使用 (bg-card, text-muted-foreground など)
- * - testId prop 対応
- * - data-slot 属性
+ * One desktop-table/mobile-card column and optional row renderer.
+ * @typeParam T - Complete row shape used by record keys, renderers and callbacks.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see DataList
  */
-import * as React from 'react';
 export interface DataListColumn<T> {
+    /**
+     * Row property or dot-separated lookup path used for default rendering and column keys.
+     */
     key: keyof T | string;
+    /**
+     * Column heading, also used as a mobile card label unless mobileLabel=false.
+     */
     header: string;
+    /**
+     * Custom renderer receiving the complete row; may run for both desktop and mobile markup.
+     * @param item - Complete row supplied by the renderer/click handler.
+     * @returns Content rendered for this row/option.
+     */
     render?: (item: T) => React.ReactNode;
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
-    /** Hide this column on mobile */
+    /**
+     * Hides this column only in mobile cards; omitted/false keeps it visible.
+     */
     mobileHidden?: boolean;
-    /** Show label on mobile card (default: true) */
+    /**
+     * Shows the column header beside the mobile value unless explicitly false.
+     */
     mobileLabel?: boolean;
 }
+/**
+ * Records, stable row keys and responsive rendering behavior for DataList.
+ * @typeParam T - Complete row shape used by record keys, renderers and callbacks.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see DataList
+ */
 export interface DataListProps<T> {
+    /**
+     * Rows in display order; an empty array renders only emptyMessage.
+     */
     data: T[];
+    /**
+     * Column definitions in display order; reused for desktop and mobile markup.
+     */
     columns: DataListColumn<T>[];
+    /**
+     * Row field whose String(value) supplies React keys; provide unique stable values.
+     */
     keyField: keyof T;
+    /**
+     * Called with the row on desktop-row or mobile-card click; adds pointer styling but no keyboard activation.
+     * @param item - Complete row supplied by the renderer/click handler.
+     * @returns No value; complete the host callback action.
+     */
     onRowClick?: (item: T) => void;
+    /**
+     * Text shown when data is empty.
+     * @defaultValue データがありません
+     */
     emptyMessage?: string;
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
+    /**
+     * Additional classes on each mobile card.
+     */
     mobileCardClassName?: string;
+    /**
+     * Root data-testid for nonempty data; the empty state uses `${testId}-empty`.
+     */
     testId?: string;
 }
 /**
- * PCサイズではテーブル形式、モバイルサイズではカード形式でデータを表示するレスポンシブなデータリストコンポーネント。
+ * Renders the same records as a desktop table and mobile cards using responsive visibility classes.
+ * @typeParam T - Record shape used by data, column render callbacks and row-click callbacks; must extend Record<string, unknown>.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: emptyMessage='データがありません'.
+ * @returns The rendered DataList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function DataList<T extends Record<string, unknown>>({ data, columns, keyField, onRowClick, emptyMessage, className, mobileCardClassName, testId, }: DataListProps<T>): React.JSX.Element;
+/**
+ * Native div attributes and dynamically constructed breakpoint column classes.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see ResponsiveGrid
+ */
 export interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Breakpoint column counts; defaults to { default: 1, md: 2, lg: 3 }. A supplied object replaces the default, with no merging. Requested dynamic utility classes must exist in host CSS.
+     */
     cols?: {
+        /**
+         * Column count below the sm breakpoint; if omitted in a supplied cols object, no base column class is added.
+         */
         default?: number;
+        /**
+         * Column count from the sm breakpoint; a requested utility class must exist in the host CSS.
+         */
         sm?: number;
+        /**
+         * Column count from the md breakpoint; a requested utility class must exist in the host CSS.
+         */
         md?: number;
+        /**
+         * Column count from the lg breakpoint; a requested utility class must exist in the host CSS.
+         */
         lg?: number;
+        /**
+         * Column count from the xl breakpoint; a requested utility class must exist in the host CSS.
+         */
         xl?: number;
     };
+    /**
+     * Gap preset: none=gap-0, sm=gap-2, default=gap-4, lg=gap-6; defaults to default.
+     */
     gap?: 'none' | 'sm' | 'default' | 'lg';
 }
 /**
- * デバイスの画面幅に合わせてカラム数を切り替えることができるレスポンシブグリッドレイアウト。
+ * Builds grid-column utility classes for caller-selected breakpoints.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: cols={ default: 1, md: 2, lg: 3 }, gap='default'.
+ * @returns The rendered ResponsiveGrid composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. cols defaults to { default: 1, md: 2, lg: 3 }; supplying cols replaces that object without merging omitted breakpoints.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function ResponsiveGrid({ children, cols, gap, className, ...props }: ResponsiveGridProps): React.JSX.Element;
+/**
+ * Native outer div attributes and touch-swipe action configuration.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see SwipeableItem
+ */
 export interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Called at touch end when left displacement exceeds threshold; the wrapper then resets translation.
+     * @returns No value; complete the host callback action.
+     */
     onSwipeLeft?: () => void;
+    /**
+     * Called at touch end when right displacement exceeds threshold; the wrapper then resets translation.
+     * @returns No value; complete the host callback action.
+     */
     onSwipeRight?: () => void;
+    /**
+     * Background content revealed by a leftward swipe.
+     */
     leftAction?: React.ReactNode;
+    /**
+     * Background content revealed by a rightward swipe.
+     */
     rightAction?: React.ReactNode;
+    /**
+     * Strict activation threshold in CSS pixels; defaults to 50. Translation is capped at ±100, so thresholds >=100 never activate.
+     */
     threshold?: number;
 }
 /**
- * タッチデバイスなどで左右スワイプ操作によるアクション（削除や編集など）を実行できるコンポーネント。
+ * Reveals side actions during a horizontal touch swipe and notifies the host after a threshold.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: threshold=50.
+ * @returns The rendered SwipeableItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. threshold defaults to 50 CSS pixels; displacement is clamped to ±100px and resets after touch end. leftAction appears during a left swipe, rightAction during a right swipe. Callbacks run only when displacement strictly exceeds the threshold.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function SwipeableItem({ children, onSwipeLeft, onSwipeRight, leftAction, rightAction, threshold, className, ...props }: SwipeableItemProps): React.JSX.Element;
+/**
+ * Native outer div attributes and asynchronous downward-pull refresh configuration.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see PullToRefresh
+ */
 export interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Called and awaited after an eligible downward pull; the host performs refresh and handles errors. Rejection leaves the local refreshing state set.
+     * @returns A promise resolving when host refresh work completes; rejection is not caught by the wrapper.
+     */
     onRefresh: () => Promise<void>;
+    /**
+     * Visual pull distance in CSS pixels required for refresh; defaults to 80. Visual distance is half touch displacement capped at 100; values >100 cannot activate.
+     */
     pullThreshold?: number;
 }
 /**
- * モバイル端末などで画面上部を下に引っ張ってデータを更新する（Pull to Refresh）機能を実装するコンポーネント。
+ * Tracks downward touch motion and requests an asynchronous refresh after a threshold.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: pullThreshold=80.
+ * @returns The rendered PullToRefresh composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. A pull starts only when window.scrollY is zero. Visual distance is half the pointer displacement, capped at 100 CSS pixels; pullThreshold defaults to 80. Refresh is awaited, but there is no concurrency guard or finally cleanup: rejection leaves refreshing/pull state set. Handle errors inside onRefresh when recovery is needed. Native touch handlers supplied in props override the wrapper handlers.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function PullToRefresh({ children, onRefresh, pullThreshold, className, ...props }: PullToRefreshProps): React.JSX.Element;
 export { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };

package/dist/ui/components/ui/responsive-list.d.ts

@@ -1,67 +1,230 @@
+/** Responsive record presentation and touch interaction wrappers; the host owns data loading and actions. */
+import * as React from 'react';
 /**
- * レスポンシブデータリストコンポーネント
- *
- * shadcn/ui パターンに準拠:
- * - テーマトークン使用 (bg-card, text-muted-foreground など)
- * - testId prop 対応
- * - data-slot 属性
+ * One desktop-table/mobile-card column and optional row renderer.
+ * @typeParam T - Complete row shape used by record keys, renderers and callbacks.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see DataList
  */
-import * as React from 'react';
 export interface DataListColumn<T> {
+    /**
+     * Row property or dot-separated lookup path used for default rendering and column keys.
+     */
     key: keyof T | string;
+    /**
+     * Column heading, also used as a mobile card label unless mobileLabel=false.
+     */
     header: string;
+    /**
+     * Custom renderer receiving the complete row; may run for both desktop and mobile markup.
+     * @param item - Complete row supplied by the renderer/click handler.
+     * @returns Content rendered for this row/option.
+     */
     render?: (item: T) => React.ReactNode;
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
-    /** Hide this column on mobile */
+    /**
+     * Hides this column only in mobile cards; omitted/false keeps it visible.
+     */
     mobileHidden?: boolean;
-    /** Show label on mobile card (default: true) */
+    /**
+     * Shows the column header beside the mobile value unless explicitly false.
+     */
     mobileLabel?: boolean;
 }
+/**
+ * Records, stable row keys and responsive rendering behavior for DataList.
+ * @typeParam T - Complete row shape used by record keys, renderers and callbacks.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see DataList
+ */
 export interface DataListProps<T> {
+    /**
+     * Rows in display order; an empty array renders only emptyMessage.
+     */
     data: T[];
+    /**
+     * Column definitions in display order; reused for desktop and mobile markup.
+     */
     columns: DataListColumn<T>[];
+    /**
+     * Row field whose String(value) supplies React keys; provide unique stable values.
+     */
     keyField: keyof T;
+    /**
+     * Called with the row on desktop-row or mobile-card click; adds pointer styling but no keyboard activation.
+     * @param item - Complete row supplied by the renderer/click handler.
+     * @returns No value; complete the host callback action.
+     */
     onRowClick?: (item: T) => void;
+    /**
+     * Text shown when data is empty.
+     * @defaultValue データがありません
+     */
     emptyMessage?: string;
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
+    /**
+     * Additional classes on each mobile card.
+     */
     mobileCardClassName?: string;
+    /**
+     * Root data-testid for nonempty data; the empty state uses `${testId}-empty`.
+     */
     testId?: string;
 }
 /**
- * PCサイズではテーブル形式、モバイルサイズではカード形式でデータを表示するレスポンシブなデータリストコンポーネント。
+ * Renders the same records as a desktop table and mobile cards using responsive visibility classes.
+ * @typeParam T - Record shape used by data, column render callbacks and row-click callbacks; must extend Record<string, unknown>.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: emptyMessage='データがありません'.
+ * @returns The rendered DataList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function DataList<T extends Record<string, unknown>>({ data, columns, keyField, onRowClick, emptyMessage, className, mobileCardClassName, testId, }: DataListProps<T>): React.JSX.Element;
+/**
+ * Native div attributes and dynamically constructed breakpoint column classes.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see ResponsiveGrid
+ */
 export interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Breakpoint column counts; defaults to { default: 1, md: 2, lg: 3 }. A supplied object replaces the default, with no merging. Requested dynamic utility classes must exist in host CSS.
+     */
     cols?: {
+        /**
+         * Column count below the sm breakpoint; if omitted in a supplied cols object, no base column class is added.
+         */
         default?: number;
+        /**
+         * Column count from the sm breakpoint; a requested utility class must exist in the host CSS.
+         */
         sm?: number;
+        /**
+         * Column count from the md breakpoint; a requested utility class must exist in the host CSS.
+         */
         md?: number;
+        /**
+         * Column count from the lg breakpoint; a requested utility class must exist in the host CSS.
+         */
         lg?: number;
+        /**
+         * Column count from the xl breakpoint; a requested utility class must exist in the host CSS.
+         */
         xl?: number;
     };
+    /**
+     * Gap preset: none=gap-0, sm=gap-2, default=gap-4, lg=gap-6; defaults to default.
+     */
     gap?: 'none' | 'sm' | 'default' | 'lg';
 }
 /**
- * デバイスの画面幅に合わせてカラム数を切り替えることができるレスポンシブグリッドレイアウト。
+ * Builds grid-column utility classes for caller-selected breakpoints.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: cols={ default: 1, md: 2, lg: 3 }, gap='default'.
+ * @returns The rendered ResponsiveGrid composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. cols defaults to { default: 1, md: 2, lg: 3 }; supplying cols replaces that object without merging omitted breakpoints.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function ResponsiveGrid({ children, cols, gap, className, ...props }: ResponsiveGridProps): React.JSX.Element;
+/**
+ * Native outer div attributes and touch-swipe action configuration.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see SwipeableItem
+ */
 export interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Called at touch end when left displacement exceeds threshold; the wrapper then resets translation.
+     * @returns No value; complete the host callback action.
+     */
     onSwipeLeft?: () => void;
+    /**
+     * Called at touch end when right displacement exceeds threshold; the wrapper then resets translation.
+     * @returns No value; complete the host callback action.
+     */
     onSwipeRight?: () => void;
+    /**
+     * Background content revealed by a leftward swipe.
+     */
     leftAction?: React.ReactNode;
+    /**
+     * Background content revealed by a rightward swipe.
+     */
     rightAction?: React.ReactNode;
+    /**
+     * Strict activation threshold in CSS pixels; defaults to 50. Translation is capped at ±100, so thresholds >=100 never activate.
+     */
     threshold?: number;
 }
 /**
- * タッチデバイスなどで左右スワイプ操作によるアクション（削除や編集など）を実行できるコンポーネント。
+ * Reveals side actions during a horizontal touch swipe and notifies the host after a threshold.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: threshold=50.
+ * @returns The rendered SwipeableItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. threshold defaults to 50 CSS pixels; displacement is clamped to ±100px and resets after touch end. leftAction appears during a left swipe, rightAction during a right swipe. Callbacks run only when displacement strictly exceeds the threshold.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function SwipeableItem({ children, onSwipeLeft, onSwipeRight, leftAction, rightAction, threshold, className, ...props }: SwipeableItemProps): React.JSX.Element;
+/**
+ * Native outer div attributes and asynchronous downward-pull refresh configuration.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see PullToRefresh
+ */
 export interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Called and awaited after an eligible downward pull; the host performs refresh and handles errors. Rejection leaves the local refreshing state set.
+     * @returns A promise resolving when host refresh work completes; rejection is not caught by the wrapper.
+     */
     onRefresh: () => Promise<void>;
+    /**
+     * Visual pull distance in CSS pixels required for refresh; defaults to 80. Visual distance is half touch displacement capped at 100; values >100 cannot activate.
+     */
     pullThreshold?: number;
 }
 /**
- * モバイル端末などで画面上部を下に引っ張ってデータを更新する（Pull to Refresh）機能を実装するコンポーネント。
+ * Tracks downward touch motion and requests an asynchronous refresh after a threshold.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: pullThreshold=80.
+ * @returns The rendered PullToRefresh composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. A pull starts only when window.scrollY is zero. Visual distance is half the pointer displacement, capped at 100 CSS pixels; pullThreshold defaults to 80. Refresh is awaited, but there is no concurrency guard or finally cleanup: rejection leaves refreshing/pull state set. Handle errors inside onRefresh when recovery is needed. Native touch handlers supplied in props override the wrapper handlers.
+ * @example
+ * ```tsx
+ * import type { ComponentProps } from 'react';
+ * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example({ refresh }: { refresh: () => Promise<void> }) {
+ *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log("Left swipe")}><DataList data={[{ id: "one", title: "Draft" }]} keyField="id" columns={[{ key: "title", header: "Title" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);
+ * }
+ * ```
  */
 declare function PullToRefresh({ children, onRefresh, pullThreshold, className, ...props }: PullToRefreshProps): React.JSX.Element;
 export { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };

package/dist/ui/components/ui/responsive-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-list.js","names":["React","React$1","DataList","getValue","keys","key","value","item","k","data","testId","emptyMessage","cn","className","columns","col","onRowClick","keyField","mobileCardClassName","idx","gapClasses","ResponsiveGrid","props","colClasses","cols","gap","SwipeableItem","translateX","setTranslateX","startX","setStartX","isDragging","setIsDragging","handleTouchStart","handleTouchMove","diff","handleTouchEnd","threshold","onSwipeRight","onSwipeLeft","rightAction","leftAction","PullToRefresh","isPulling","setIsPulling","isRefreshing","setIsRefreshing","pullDistance","setPullDistance","startY","distance","pullThreshold","onRefresh"],"sources":["../../../../src/ui/components/ui/responsive-list.tsx"],"sourcesContent":["/**\n * レスポンシブデータリストコンポーネント\n *\n * shadcn/ui パターンに準拠:\n * - テーマトークン使用 (bg-card, text-muted-foreground など)\n * - testId prop 対応\n * - data-slot 属性\n */\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n// ============================================================================\n// DataList - Table on desktop, Cards on mobile\n// ============================================================================\n\nexport interface DataListColumn<T> {\n  key: keyof T | string;\n  header: string;\n  render?: (item: T) => React.ReactNode;\n  className?: string;\n  /** Hide this column on mobile */\n  mobileHidden?: boolean;\n  /** Show label on mobile card (default: true) */\n  mobileLabel?: boolean;\n}\n\nexport interface DataListProps<T> {\n  data: T[];\n  columns: DataListColumn<T>[];\n  keyField: keyof T;\n  onRowClick?: (item: T) => void;\n  emptyMessage?: string;\n  className?: string;\n  mobileCardClassName?: string;\n  testId?: string;\n}\n\n/**\n * PCサイズではテーブル形式、モバイルサイズではカード形式でデータを表示するレスポンシブなデータリストコンポーネント。\n */\nfunction DataList<T extends Record<string, unknown>>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  emptyMessage = 'データがありません',\n  className,\n  mobileCardClassName,\n  testId,\n}: DataListProps<T>) {\n  const getValue = (item: T, key: string): unknown => {\n    const keys = key.split('.');\n    let value: unknown = item;\n    for (const k of keys) {\n      value = (value as Record<string, unknown>)?.[k];\n    }\n    return value;\n  };\n\n  if (data.length === 0) {\n    return (\n      <div\n        data-slot='data-list-empty'\n        data-testid={testId ? `${testId}-empty` : undefined}\n        className='flex items-center justify-center py-12 text-muted-foreground'\n      >\n        {emptyMessage}\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot='data-list' data-testid={testId} className={cn('w-full', className)}>\n      {/* Desktop Table */}\n      <div className='hidden md:block overflow-x-auto'>\n        <table className='w-full text-sm'>\n          <thead>\n            <tr className='border-b bg-muted/50'>\n              {columns.map((col) => (\n                <th\n                  key={String(col.key)}\n                  className={cn('py-3 px-4 text-left font-medium text-foreground', col.className)}\n                >\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((item) => (\n              <tr\n                key={String(item[keyField])}\n                data-slot='data-list-row'\n                className={cn(\n                  'border-b transition-colors hover:bg-muted/50',\n                  onRowClick && 'cursor-pointer',\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((col) => (\n                  <td key={String(col.key)} className={cn('py-3 px-4', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Mobile Cards */}\n      <div className='md:hidden space-y-3'>\n        {data.map((item) => (\n          <div\n            key={String(item[keyField])}\n            data-slot='data-list-card'\n            className={cn(\n              'p-4 border rounded-lg bg-card text-card-foreground shadow-sm',\n              onRowClick && 'cursor-pointer active:bg-muted/50',\n              mobileCardClassName,\n            )}\n            onClick={() => onRowClick?.(item)}\n          >\n            {columns\n              .filter((col) => !col.mobileHidden)\n              .map((col, idx) => (\n                <div\n                  key={String(col.key)}\n                  className={cn(\n                    'flex justify-between items-center',\n                    idx > 0 && 'mt-2 pt-2 border-t border-dashed border-border',\n                  )}\n                >\n                  {col.mobileLabel !== false && (\n                    <span className='text-sm text-muted-foreground'>{col.header}</span>\n                  )}\n                  <span className={cn('font-medium', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </span>\n                </div>\n              ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// ResponsiveGrid\n// ============================================================================\n\nexport interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: {\n    default?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n  };\n  gap?: 'none' | 'sm' | 'default' | 'lg';\n}\n\nconst gapClasses = {\n  none: 'gap-0',\n  sm: 'gap-2',\n  default: 'gap-4',\n  lg: 'gap-6',\n};\n\n/**\n * デバイスの画面幅に合わせてカラム数を切り替えることができるレスポンシブグリッドレイアウト。\n */\nfunction ResponsiveGrid({\n  children,\n  cols = { default: 1, md: 2, lg: 3 },\n  gap = 'default',\n  className,\n  ...props\n}: ResponsiveGridProps) {\n  // Build grid classes dynamically\n  const colClasses = [\n    cols.default && `grid-cols-${cols.default}`,\n    cols.sm && `sm:grid-cols-${cols.sm}`,\n    cols.md && `md:grid-cols-${cols.md}`,\n    cols.lg && `lg:grid-cols-${cols.lg}`,\n    cols.xl && `xl:grid-cols-${cols.xl}`,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      data-slot='responsive-grid'\n      className={cn('grid', gapClasses[gap], colClasses, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// SwipeableItem\n// ============================================================================\n\nexport interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  onSwipeLeft?: () => void;\n  onSwipeRight?: () => void;\n  leftAction?: React.ReactNode;\n  rightAction?: React.ReactNode;\n  threshold?: number;\n}\n\n/**\n * タッチデバイスなどで左右スワイプ操作によるアクション（削除や編集など）を実行できるコンポーネント。\n */\nfunction SwipeableItem({\n  children,\n  onSwipeLeft,\n  onSwipeRight,\n  leftAction,\n  rightAction,\n  threshold = 50,\n  className,\n  ...props\n}: SwipeableItemProps) {\n  const [translateX, setTranslateX] = React.useState(0);\n  const [startX, setStartX] = React.useState(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartX(e.touches[0].clientX);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n    const diff = e.touches[0].clientX - startX;\n    const maxSwipe = 100;\n    setTranslateX(Math.max(-maxSwipe, Math.min(maxSwipe, diff)));\n  };\n\n  const handleTouchEnd = () => {\n    setIsDragging(false);\n    if (translateX > threshold && onSwipeRight) {\n      onSwipeRight();\n    } else if (translateX < -threshold && onSwipeLeft) {\n      onSwipeLeft();\n    }\n    setTranslateX(0);\n  };\n\n  return (\n    <div\n      data-slot='swipeable-item'\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      {/* Background actions */}\n      <div className='absolute inset-0 flex'>\n        <div className='flex-1 flex items-center justify-start px-4 bg-green-500 text-white'>\n          {rightAction}\n        </div>\n        <div className='flex-1 flex items-center justify-end px-4 bg-destructive text-destructive-foreground'>\n          {leftAction}\n        </div>\n      </div>\n\n      {/* Swipeable content */}\n      <div\n        className='relative bg-background transition-transform'\n        style={{\n          transform: `translateX(${translateX}px)`,\n          transition: isDragging ? 'none' : 'transform 0.2s',\n        }}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// PullToRefresh\n// ============================================================================\n\nexport interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {\n  onRefresh: () => Promise<void>;\n  pullThreshold?: number;\n}\n\n/**\n * モバイル端末などで画面上部を下に引っ張ってデータを更新する（Pull to Refresh）機能を実装するコンポーネント。\n */\nfunction PullToRefresh({\n  children,\n  onRefresh,\n  pullThreshold = 80,\n  className,\n  ...props\n}: PullToRefreshProps) {\n  const [isPulling, setIsPulling] = React.useState(false);\n  const [isRefreshing, setIsRefreshing] = React.useState(false);\n  const [pullDistance, setPullDistance] = React.useState(0);\n  const startY = React.useRef(0);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (window.scrollY === 0) {\n      startY.current = e.touches[0].clientY;\n      setIsPulling(true);\n    }\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isPulling) return;\n    const distance = e.touches[0].clientY - startY.current;\n    if (distance > 0) {\n      setPullDistance(Math.min(distance * 0.5, 100));\n    }\n  };\n\n  const handleTouchEnd = async () => {\n    if (pullDistance >= pullThreshold) {\n      setIsRefreshing(true);\n      await onRefresh();\n      setIsRefreshing(false);\n    }\n    setIsPulling(false);\n    setPullDistance(0);\n  };\n\n  return (\n    <div\n      data-slot='pull-to-refresh'\n      className={cn('relative', className)}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      {...props}\n    >\n      {/* Pull indicator */}\n      <div\n        className='absolute left-1/2 -translate-x-1/2 flex items-center justify-center transition-all'\n        style={{\n          top: pullDistance - 40,\n          opacity: pullDistance / pullThreshold,\n        }}\n      >\n        <div\n          className={cn(\n            'w-6 h-6 border-2 border-primary border-t-transparent rounded-full',\n            isRefreshing && 'animate-spin',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div\n        style={{\n          transform: `translateY(${pullDistance}px)`,\n          transition: isPulling ? 'none' : 'transform 0.2s',\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };\n"],"mappings":"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"}
+{"version":3,"file":"responsive-list.js","names":["React","React$1","DataList","getValue","keys","key","value","item","k","data","testId","emptyMessage","cn","className","columns","col","onRowClick","keyField","mobileCardClassName","idx","gapClasses","ResponsiveGrid","props","colClasses","cols","gap","SwipeableItem","translateX","setTranslateX","startX","setStartX","isDragging","setIsDragging","handleTouchStart","handleTouchMove","diff","handleTouchEnd","threshold","onSwipeRight","onSwipeLeft","rightAction","leftAction","PullToRefresh","isPulling","setIsPulling","isRefreshing","setIsRefreshing","pullDistance","setPullDistance","startY","distance","pullThreshold","onRefresh"],"sources":["../../../../src/ui/components/ui/responsive-list.tsx"],"sourcesContent":["/** Responsive record presentation and touch interaction wrappers; the host owns data loading and actions. */\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n// ============================================================================\n// DataList - Table on desktop, Cards on mobile\n// ============================================================================\n\n/**\n * One desktop-table/mobile-card column and optional row renderer.\n * @typeParam T - Complete row shape used by record keys, renderers and callbacks.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see DataList\n */\nexport interface DataListColumn<T> {\n  /**\n   * Row property or dot-separated lookup path used for default rendering and column keys.\n   */\n  key: keyof T | string;\n  /**\n   * Column heading, also used as a mobile card label unless mobileLabel=false.\n   */\n  header: string;\n  /**\n   * Custom renderer receiving the complete row; may run for both desktop and mobile markup.\n   * @param item - Complete row supplied by the renderer/click handler.\n   * @returns Content rendered for this row/option.\n   */\n  render?: (item: T) => React.ReactNode;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Hides this column only in mobile cards; omitted/false keeps it visible.\n   */\n  mobileHidden?: boolean;\n  /**\n   * Shows the column header beside the mobile value unless explicitly false.\n   */\n  mobileLabel?: boolean;\n}\n\n/**\n * Records, stable row keys and responsive rendering behavior for DataList.\n * @typeParam T - Complete row shape used by record keys, renderers and callbacks.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see DataList\n */\nexport interface DataListProps<T> {\n  /**\n   * Rows in display order; an empty array renders only emptyMessage.\n   */\n  data: T[];\n  /**\n   * Column definitions in display order; reused for desktop and mobile markup.\n   */\n  columns: DataListColumn<T>[];\n  /**\n   * Row field whose String(value) supplies React keys; provide unique stable values.\n   */\n  keyField: keyof T;\n  /**\n   * Called with the row on desktop-row or mobile-card click; adds pointer styling but no keyboard activation.\n   * @param item - Complete row supplied by the renderer/click handler.\n   * @returns No value; complete the host callback action.\n   */\n  onRowClick?: (item: T) => void;\n  /**\n   * Text shown when data is empty.\n   * @defaultValue データがありません\n   */\n  emptyMessage?: string;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Additional classes on each mobile card.\n   */\n  mobileCardClassName?: string;\n  /**\n   * Root data-testid for nonempty data; the empty state uses `${testId}-empty`.\n   */\n  testId?: string;\n}\n\n/**\n * Renders the same records as a desktop table and mobile cards using responsive visibility classes.\n * @typeParam T - Record shape used by data, column render callbacks and row-click callbacks; must extend Record<string, unknown>.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: emptyMessage='データがありません'.\n * @returns The rendered DataList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction DataList<T extends Record<string, unknown>>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  emptyMessage = 'データがありません',\n  className,\n  mobileCardClassName,\n  testId,\n}: DataListProps<T>) {\n  const getValue = (item: T, key: string): unknown => {\n    const keys = key.split('.');\n    let value: unknown = item;\n    for (const k of keys) {\n      value = (value as Record<string, unknown>)?.[k];\n    }\n    return value;\n  };\n\n  if (data.length === 0) {\n    return (\n      <div\n        data-slot='data-list-empty'\n        data-testid={testId ? `${testId}-empty` : undefined}\n        className='flex items-center justify-center py-12 text-muted-foreground'\n      >\n        {emptyMessage}\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot='data-list' data-testid={testId} className={cn('w-full', className)}>\n      {/* Desktop Table */}\n      <div className='hidden md:block overflow-x-auto'>\n        <table className='w-full text-sm'>\n          <thead>\n            <tr className='border-b bg-muted/50'>\n              {columns.map((col) => (\n                <th\n                  key={String(col.key)}\n                  className={cn('py-3 px-4 text-left font-medium text-foreground', col.className)}\n                >\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((item) => (\n              <tr\n                key={String(item[keyField])}\n                data-slot='data-list-row'\n                className={cn(\n                  'border-b transition-colors hover:bg-muted/50',\n                  onRowClick && 'cursor-pointer',\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((col) => (\n                  <td key={String(col.key)} className={cn('py-3 px-4', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Mobile Cards */}\n      <div className='md:hidden space-y-3'>\n        {data.map((item) => (\n          <div\n            key={String(item[keyField])}\n            data-slot='data-list-card'\n            className={cn(\n              'p-4 border rounded-lg bg-card text-card-foreground shadow-sm',\n              onRowClick && 'cursor-pointer active:bg-muted/50',\n              mobileCardClassName,\n            )}\n            onClick={() => onRowClick?.(item)}\n          >\n            {columns\n              .filter((col) => !col.mobileHidden)\n              .map((col, idx) => (\n                <div\n                  key={String(col.key)}\n                  className={cn(\n                    'flex justify-between items-center',\n                    idx > 0 && 'mt-2 pt-2 border-t border-dashed border-border',\n                  )}\n                >\n                  {col.mobileLabel !== false && (\n                    <span className='text-sm text-muted-foreground'>{col.header}</span>\n                  )}\n                  <span className={cn('font-medium', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </span>\n                </div>\n              ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// ResponsiveGrid\n// ============================================================================\n\n/**\n * Native div attributes and dynamically constructed breakpoint column classes.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see ResponsiveGrid\n */\nexport interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint column counts; defaults to { default: 1, md: 2, lg: 3 }. A supplied object replaces the default, with no merging. Requested dynamic utility classes must exist in host CSS.\n   */\n  cols?: {\n    /**\n     * Column count below the sm breakpoint; if omitted in a supplied cols object, no base column class is added.\n     */\n    default?: number;\n    /**\n     * Column count from the sm breakpoint; a requested utility class must exist in the host CSS.\n     */\n    sm?: number;\n    /**\n     * Column count from the md breakpoint; a requested utility class must exist in the host CSS.\n     */\n    md?: number;\n    /**\n     * Column count from the lg breakpoint; a requested utility class must exist in the host CSS.\n     */\n    lg?: number;\n    /**\n     * Column count from the xl breakpoint; a requested utility class must exist in the host CSS.\n     */\n    xl?: number;\n  };\n  /**\n   * Gap preset: none=gap-0, sm=gap-2, default=gap-4, lg=gap-6; defaults to default.\n   */\n  gap?: 'none' | 'sm' | 'default' | 'lg';\n}\n\nconst gapClasses = {\n  none: 'gap-0',\n  sm: 'gap-2',\n  default: 'gap-4',\n  lg: 'gap-6',\n};\n\n/**\n * Builds grid-column utility classes for caller-selected breakpoints.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: cols={ default: 1, md: 2, lg: 3 }, gap='default'.\n * @returns The rendered ResponsiveGrid composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. cols defaults to { default: 1, md: 2, lg: 3 }; supplying cols replaces that object without merging omitted breakpoints.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction ResponsiveGrid({\n  children,\n  cols = { default: 1, md: 2, lg: 3 },\n  gap = 'default',\n  className,\n  ...props\n}: ResponsiveGridProps) {\n  // Build grid classes dynamically\n  const colClasses = [\n    cols.default && `grid-cols-${cols.default}`,\n    cols.sm && `sm:grid-cols-${cols.sm}`,\n    cols.md && `md:grid-cols-${cols.md}`,\n    cols.lg && `lg:grid-cols-${cols.lg}`,\n    cols.xl && `xl:grid-cols-${cols.xl}`,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      data-slot='responsive-grid'\n      className={cn('grid', gapClasses[gap], colClasses, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// SwipeableItem\n// ============================================================================\n\n/**\n * Native outer div attributes and touch-swipe action configuration.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see SwipeableItem\n */\nexport interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Called at touch end when left displacement exceeds threshold; the wrapper then resets translation.\n   * @returns No value; complete the host callback action.\n   */\n  onSwipeLeft?: () => void;\n  /**\n   * Called at touch end when right displacement exceeds threshold; the wrapper then resets translation.\n   * @returns No value; complete the host callback action.\n   */\n  onSwipeRight?: () => void;\n  /**\n   * Background content revealed by a leftward swipe.\n   */\n  leftAction?: React.ReactNode;\n  /**\n   * Background content revealed by a rightward swipe.\n   */\n  rightAction?: React.ReactNode;\n  /**\n   * Strict activation threshold in CSS pixels; defaults to 50. Translation is capped at ±100, so thresholds >=100 never activate.\n   */\n  threshold?: number;\n}\n\n/**\n * Reveals side actions during a horizontal touch swipe and notifies the host after a threshold.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: threshold=50.\n * @returns The rendered SwipeableItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. threshold defaults to 50 CSS pixels; displacement is clamped to ±100px and resets after touch end. leftAction appears during a left swipe, rightAction during a right swipe. Callbacks run only when displacement strictly exceeds the threshold.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction SwipeableItem({\n  children,\n  onSwipeLeft,\n  onSwipeRight,\n  leftAction,\n  rightAction,\n  threshold = 50,\n  className,\n  ...props\n}: SwipeableItemProps) {\n  const [translateX, setTranslateX] = React.useState(0);\n  const [startX, setStartX] = React.useState(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartX(e.touches[0].clientX);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n    const diff = e.touches[0].clientX - startX;\n    const maxSwipe = 100;\n    setTranslateX(Math.max(-maxSwipe, Math.min(maxSwipe, diff)));\n  };\n\n  const handleTouchEnd = () => {\n    setIsDragging(false);\n    if (translateX > threshold && onSwipeRight) {\n      onSwipeRight();\n    } else if (translateX < -threshold && onSwipeLeft) {\n      onSwipeLeft();\n    }\n    setTranslateX(0);\n  };\n\n  return (\n    <div\n      data-slot='swipeable-item'\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      {/* Background actions */}\n      <div className='absolute inset-0 flex'>\n        <div className='flex-1 flex items-center justify-start px-4 bg-green-500 text-white'>\n          {rightAction}\n        </div>\n        <div className='flex-1 flex items-center justify-end px-4 bg-destructive text-destructive-foreground'>\n          {leftAction}\n        </div>\n      </div>\n\n      {/* Swipeable content */}\n      <div\n        className='relative bg-background transition-transform'\n        style={{\n          transform: `translateX(${translateX}px)`,\n          transition: isDragging ? 'none' : 'transform 0.2s',\n        }}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// PullToRefresh\n// ============================================================================\n\n/**\n * Native outer div attributes and asynchronous downward-pull refresh configuration.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see PullToRefresh\n */\nexport interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Called and awaited after an eligible downward pull; the host performs refresh and handles errors. Rejection leaves the local refreshing state set.\n   * @returns A promise resolving when host refresh work completes; rejection is not caught by the wrapper.\n   */\n  onRefresh: () => Promise<void>;\n  /**\n   * Visual pull distance in CSS pixels required for refresh; defaults to 80. Visual distance is half touch displacement capped at 100; values >100 cannot activate.\n   */\n  pullThreshold?: number;\n}\n\n/**\n * Tracks downward touch motion and requests an asynchronous refresh after a threshold.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: pullThreshold=80.\n * @returns The rendered PullToRefresh composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. A pull starts only when window.scrollY is zero. Visual distance is half the pointer displacement, capped at 100 CSS pixels; pullThreshold defaults to 80. Refresh is awaited, but there is no concurrency guard or finally cleanup: rejection leaves refreshing/pull state set. Handle errors inside onRefresh when recovery is needed. Native touch handlers supplied in props override the wrapper handlers.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction PullToRefresh({\n  children,\n  onRefresh,\n  pullThreshold = 80,\n  className,\n  ...props\n}: PullToRefreshProps) {\n  const [isPulling, setIsPulling] = React.useState(false);\n  const [isRefreshing, setIsRefreshing] = React.useState(false);\n  const [pullDistance, setPullDistance] = React.useState(0);\n  const startY = React.useRef(0);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (window.scrollY === 0) {\n      startY.current = e.touches[0].clientY;\n      setIsPulling(true);\n    }\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isPulling) return;\n    const distance = e.touches[0].clientY - startY.current;\n    if (distance > 0) {\n      setPullDistance(Math.min(distance * 0.5, 100));\n    }\n  };\n\n  const handleTouchEnd = async () => {\n    if (pullDistance >= pullThreshold) {\n      setIsRefreshing(true);\n      await onRefresh();\n      setIsRefreshing(false);\n    }\n    setIsPulling(false);\n    setPullDistance(0);\n  };\n\n  return (\n    <div\n      data-slot='pull-to-refresh'\n      className={cn('relative', className)}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      {...props}\n    >\n      {/* Pull indicator */}\n      <div\n        className='absolute left-1/2 -translate-x-1/2 flex items-center justify-center transition-all'\n        style={{\n          top: pullDistance - 40,\n          opacity: pullDistance / pullThreshold,\n        }}\n      >\n        <div\n          className={cn(\n            'w-6 h-6 border-2 border-primary border-t-transparent rounded-full',\n            isRefreshing && 'animate-spin',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div\n        style={{\n          transform: `translateY(${pullDistance}px)`,\n          transition: isPulling ? 'none' : 'transform 0.2s',\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };\n"],"mappings":"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"}

package/dist/ui/components/ui/scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.cjs","names":["React","ScrollAreaPrimitive","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_scroll_area","ScrollArea","props","className","ScrollBar","orientation"],"sources":["../../../../src/ui/components/ui/scroll-area.tsx"],"sourcesContent":["'use client';\nimport * as React from 'react';\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '../../lib/utils';\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaPrimitive.Root.Props>(\n  ({ className, children, ...props }, ref) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot='scroll-area'\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot='scroll-area-viewport'\n        className='focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1'\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollArea.displayName = 'ScrollArea';\n\n/**\n * スクロール領域で表示されるスクロールバーコンポーネント。\n */\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot='scroll-area-scrollbar'\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot='scroll-area-thumb'\n        className='rounded-full bg-border relative flex-1'\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"A,4SAOA,IAAMQ,EAAaR,EAAM,YACtB,CAAE,YAAW,WAAU,GAAGS,GAAS,KAClC,EAAAJ,EAAA,KAAA,CAACJ,EAAAA,WAAoB,KAArB,CACO,MACL,YAAU,cACV,UAAWC,EAAAA,GAAG,WAAYQ,CAAS,EACnC,GAAID,EAJN,SAAA,EAME,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,SAArB,CACE,YAAU,uBACV,UAAU,qJAET,UAC2B,CAAA,GAC9B,EAAAI,EAAA,IAAA,CAACM,EAAD,CAAY,CAAA,GACZ,EAAAN,EAAA,IAAA,CAACJ,EAAAA,WAAoB,OAArB,CAA6B,CAAA,CACL,CAE9B,CAAA,CAAA,EACA,EAAW,YAAc,aAKzB,SAASU,EAAU,CACjB,YACA,cAAc,WACd,GAAGF,GACmC,CACtC,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,UAArB,CACE,YAAU,wBACV,mBAAkBW,EACL,cACb,UAAWV,EAAAA,GACT,qQACAQ,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,MAArB,CACE,YAAU,oBACV,UAAU,wCACX,CAAA,CAC4B,CAAA,CAEnC,C"}
+{"version":3,"file":"scroll-area.cjs","names":["React","ScrollAreaPrimitive","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_scroll_area","ScrollArea","props","className","ScrollBar","orientation"],"sources":["../../../../src/ui/components/ui/scroll-area.tsx"],"sourcesContent":["'use client';\nimport * as React from 'react';\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a scroll viewport with a vertical scrollbar and corner.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ScrollArea composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Constrain the root size so content can overflow. ScrollArea already inserts the vertical scrollbar and corner; it passes children into its viewport. ScrollBar requires Base UI scroll-area root context and defaults to vertical; an extra ScrollBar passed as ScrollArea children is placed inside the viewport, not as a root sibling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { ScrollArea } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ScrollArea className=\"h-32 w-64\"><div className=\"h-96\">Scrollable content</div></ScrollArea>);\n * }\n * ```\n */\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaPrimitive.Root.Props>(\n  ({ className, children, ...props }, ref) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot='scroll-area'\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot='scroll-area-viewport'\n        className='focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1'\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollArea.displayName = 'ScrollArea';\n\n/**\n * Renders a scrollbar track and thumb for the surrounding scroll-area root.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered ScrollBar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Constrain the root size so content can overflow. ScrollArea already inserts the vertical scrollbar and corner; it passes children into its viewport. ScrollBar requires Base UI scroll-area root context and defaults to vertical; an extra ScrollBar passed as ScrollArea children is placed inside the viewport, not as a root sibling.\n * @example\n * ```tsx\n * import { ScrollArea } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ScrollArea className=\"h-32 w-64\"><div className=\"h-96\">Scrollable content</div></ScrollArea>);\n * }\n * ```\n */\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot='scroll-area-scrollbar'\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot='scroll-area-thumb'\n        className='rounded-full bg-border relative flex-1'\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"A,4SAsBA,IAAMQ,EAAaR,EAAM,YACtB,CAAE,YAAW,WAAU,GAAGS,GAAS,KAClC,EAAAJ,EAAA,KAAA,CAACJ,EAAAA,WAAoB,KAArB,CACO,MACL,YAAU,cACV,UAAWC,EAAAA,GAAG,WAAYQ,CAAS,EACnC,GAAID,EAJN,SAAA,EAME,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,SAArB,CACE,YAAU,uBACV,UAAU,qJAET,UAC2B,CAAA,GAC9B,EAAAI,EAAA,IAAA,CAACM,EAAD,CAAY,CAAA,GACZ,EAAAN,EAAA,IAAA,CAACJ,EAAAA,WAAoB,OAArB,CAA6B,CAAA,CACL,CAE9B,CAAA,CAAA,EACA,EAAW,YAAc,aAiBzB,SAASU,EAAU,CACjB,YACA,cAAc,WACd,GAAGF,GACmC,CACtC,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,UAArB,CACE,YAAU,wBACV,mBAAkBW,EACL,cACb,UAAWV,EAAAA,GACT,qQACAQ,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,WAAoB,MAArB,CACE,YAAU,oBACV,UAAU,wCACX,CAAA,CAC4B,CAAA,CAEnC,C"}