@papernote/ui 1.10.6 → 1.10.8

package/dist/components/SwipeableListItem.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
 import type { LucideIcon } from 'lucide-react';
 /**
- * Action configuration for swipe gestures
+ * Single action configuration for swipe gestures
  */
 export interface SwipeListAction {
+    /** Unique identifier for the action */
+    id: string;
     /** Background color variant or custom Tailwind class */
-    color: 'destructive' | 'warning' | 'success' | 'primary' | string;
+    color: 'destructive' | 'warning' | 'success' | 'primary' | 'neutral' | string;
     /** Lucide icon to display */
     icon: LucideIcon;
-    /** Label for accessibility */
+    /** Label shown below icon */
     label: string;
+    /** Click handler (can be async) */
+    onClick: () => void | Promise<void>;
 }
 /**
  * SwipeableListItem component props
@@ -17,50 +21,65 @@ export interface SwipeListAction {
 export interface SwipeableListItemProps {
     /** List item content */
     children: React.ReactNode;
-    /** Handler called when swiped right past threshold (can be async) */
-    onSwipeRight?: () => void | Promise<void>;
-    /** Handler called when swiped left past threshold (can be async) */
-    onSwipeLeft?: () => void | Promise<void>;
-    /** Right swipe action configuration (revealed when swiping right) */
-    rightAction?: SwipeListAction;
-    /** Left swipe action configuration (revealed when swiping left) */
-    leftAction?: SwipeListAction;
-    /** Pixels of swipe before action triggers (default: 100) */
-    swipeThreshold?: number;
+    /** Actions shown when swiping left (appear on right side) */
+    leftActions?: SwipeListAction[];
+    /** Actions shown when swiping right (appear on left side) */
+    rightActions?: SwipeListAction[];
+    /** Width per action button in pixels (default: 72) */
+    actionWidth?: number;
+    /** Enable full swipe to trigger first action (default: false) */
+    fullSwipe?: boolean;
+    /** Full swipe threshold as percentage of container width (default: 0.5) */
+    fullSwipeThreshold?: number;
     /** Disable swipe interactions */
     disabled?: boolean;
     /** Additional class name */
     className?: string;
+    /** Callback when swipe state changes */
+    onSwipeChange?: (direction: 'left' | 'right' | null) => void;
 }
 /**
- * SwipeableListItem - List item with swipe-to-action functionality
+ * SwipeableListItem - List item with swipe-to-reveal action buttons
  *
- * Designed for mobile workflows with keyboard accessibility:
- * - Swipe right to approve/confirm
- * - Swipe left to dismiss/delete
- * - Arrow keys for keyboard navigation
+ * Features:
+ * - Multiple actions per side (like email apps)
+ * - Full swipe to trigger primary action
+ * - Keyboard accessibility (Arrow keys + Tab + Enter)
  * - Async callback support with loading state
+ * - Haptic feedback on mobile
+ * - Smooth animations and visual polish
  *
- * @example
+ * @example Single action per side
  * ```tsx
  * <SwipeableListItem
- *   onSwipeRight={() => handleApprove()}
- *   onSwipeLeft={() => handleDismiss()}
- *   rightAction={{
- *     icon: Check,
- *     color: 'success',
- *     label: 'Approve'
- *   }}
- *   leftAction={{
- *     icon: X,
- *     color: 'destructive',
- *     label: 'Dismiss'
- *   }}
+ *   rightActions={[
+ *     { id: 'approve', icon: Check, color: 'success', label: 'Approve', onClick: handleApprove }
+ *   ]}
+ *   leftActions={[
+ *     { id: 'delete', icon: Trash, color: 'destructive', label: 'Delete', onClick: handleDelete }
+ *   ]}
  * >
  *   <div className="p-4">List item content</div>
  * </SwipeableListItem>
  * ```
+ *
+ * @example Multiple actions (email-style)
+ * ```tsx
+ * <SwipeableListItem
+ *   leftActions={[
+ *     { id: 'delete', icon: Trash, color: 'destructive', label: 'Delete', onClick: handleDelete },
+ *     { id: 'archive', icon: Archive, color: 'warning', label: 'Archive', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'read', icon: Mail, color: 'primary', label: 'Read', onClick: handleRead },
+ *     { id: 'star', icon: Star, color: 'warning', label: 'Star', onClick: handleStar },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <EmailListItem />
+ * </SwipeableListItem>
+ * ```
  */
-export declare function SwipeableListItem({ children, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold, disabled, className, }: SwipeableListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwipeableListItem({ children, leftActions, rightActions, actionWidth, fullSwipe, fullSwipeThreshold, disabled, className, onSwipeChange, }: SwipeableListItemProps): import("react/jsx-runtime").JSX.Element;
 export default SwipeableListItem;
 //# sourceMappingURL=SwipeableListItem.d.ts.map

package/dist/components/SwipeableListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableListItem.d.ts","sourceRoot":"","sources":["../../src/components/SwipeableListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAClE,6BAA6B;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,qEAAqE;IACrE,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,mEAAmE;IACnE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,cAAoB,EACpB,QAAgB,EAChB,SAAc,GACf,EAAE,sBAAsB,2CA4UxB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SwipeableListItem.d.ts","sourceRoot":"","sources":["../../src/components/SwipeableListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,6BAA6B;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAgB,EAChB,YAAiB,EACjB,WAAgB,EAChB,SAAiB,EACjB,kBAAwB,EACxB,QAAgB,EAChB,SAAc,EACd,aAAa,GACd,EAAE,sBAAsB,2CAgexB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/index.d.ts

@@ -3006,15 +3006,19 @@ interface SwipeableCardProps {
 declare function SwipeableCard({ children, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold, hapticFeedback, disabled, onSwipeStart, onSwipeEnd, className, }: SwipeableCardProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Action configuration for swipe gestures
+ * Single action configuration for swipe gestures
  */
 interface SwipeListAction {
+    /** Unique identifier for the action */
+    id: string;
     /** Background color variant or custom Tailwind class */
-    color: 'destructive' | 'warning' | 'success' | 'primary' | string;
+    color: 'destructive' | 'warning' | 'success' | 'primary' | 'neutral' | string;
     /** Lucide icon to display */
     icon: LucideIcon;
-    /** Label for accessibility */
+    /** Label shown below icon */
     label: string;
+    /** Click handler (can be async) */
+    onClick: () => void | Promise<void>;
 }
 /**
  * SwipeableListItem component props
@@ -3022,51 +3026,66 @@ interface SwipeListAction {
 interface SwipeableListItemProps {
     /** List item content */
     children: React__default.ReactNode;
-    /** Handler called when swiped right past threshold (can be async) */
-    onSwipeRight?: () => void | Promise<void>;
-    /** Handler called when swiped left past threshold (can be async) */
-    onSwipeLeft?: () => void | Promise<void>;
-    /** Right swipe action configuration (revealed when swiping right) */
-    rightAction?: SwipeListAction;
-    /** Left swipe action configuration (revealed when swiping left) */
-    leftAction?: SwipeListAction;
-    /** Pixels of swipe before action triggers (default: 100) */
-    swipeThreshold?: number;
+    /** Actions shown when swiping left (appear on right side) */
+    leftActions?: SwipeListAction[];
+    /** Actions shown when swiping right (appear on left side) */
+    rightActions?: SwipeListAction[];
+    /** Width per action button in pixels (default: 72) */
+    actionWidth?: number;
+    /** Enable full swipe to trigger first action (default: false) */
+    fullSwipe?: boolean;
+    /** Full swipe threshold as percentage of container width (default: 0.5) */
+    fullSwipeThreshold?: number;
     /** Disable swipe interactions */
     disabled?: boolean;
     /** Additional class name */
     className?: string;
+    /** Callback when swipe state changes */
+    onSwipeChange?: (direction: 'left' | 'right' | null) => void;
 }
 /**
- * SwipeableListItem - List item with swipe-to-action functionality
+ * SwipeableListItem - List item with swipe-to-reveal action buttons
  *
- * Designed for mobile workflows with keyboard accessibility:
- * - Swipe right to approve/confirm
- * - Swipe left to dismiss/delete
- * - Arrow keys for keyboard navigation
+ * Features:
+ * - Multiple actions per side (like email apps)
+ * - Full swipe to trigger primary action
+ * - Keyboard accessibility (Arrow keys + Tab + Enter)
  * - Async callback support with loading state
+ * - Haptic feedback on mobile
+ * - Smooth animations and visual polish
  *
- * @example
+ * @example Single action per side
  * ```tsx
  * <SwipeableListItem
- *   onSwipeRight={() => handleApprove()}
- *   onSwipeLeft={() => handleDismiss()}
- *   rightAction={{
- *     icon: Check,
- *     color: 'success',
- *     label: 'Approve'
- *   }}
- *   leftAction={{
- *     icon: X,
- *     color: 'destructive',
- *     label: 'Dismiss'
- *   }}
+ *   rightActions={[
+ *     { id: 'approve', icon: Check, color: 'success', label: 'Approve', onClick: handleApprove }
+ *   ]}
+ *   leftActions={[
+ *     { id: 'delete', icon: Trash, color: 'destructive', label: 'Delete', onClick: handleDelete }
+ *   ]}
  * >
  *   <div className="p-4">List item content</div>
  * </SwipeableListItem>
  * ```
+ *
+ * @example Multiple actions (email-style)
+ * ```tsx
+ * <SwipeableListItem
+ *   leftActions={[
+ *     { id: 'delete', icon: Trash, color: 'destructive', label: 'Delete', onClick: handleDelete },
+ *     { id: 'archive', icon: Archive, color: 'warning', label: 'Archive', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'read', icon: Mail, color: 'primary', label: 'Read', onClick: handleRead },
+ *     { id: 'star', icon: Star, color: 'warning', label: 'Star', onClick: handleStar },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <EmailListItem />
+ * </SwipeableListItem>
+ * ```
  */
-declare function SwipeableListItem({ children, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold, disabled, className, }: SwipeableListItemProps): react_jsx_runtime.JSX.Element;
+declare function SwipeableListItem({ children, leftActions, rightActions, actionWidth, fullSwipe, fullSwipeThreshold, disabled, className, onSwipeChange, }: SwipeableListItemProps): react_jsx_runtime.JSX.Element;
 
 interface NotificationBannerAction {
     /** Button label */