@papernote/ui 1.0.0 → 1.2.0

package/src/components/CurrencyInput.tsx

@@ -0,0 +1,193 @@
+import React, { forwardRef, useState, useEffect } from 'react';
+import Input, { InputProps } from './Input';
+
+export interface CurrencyInputProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'prefix'> {
+  /** Numeric value (not formatted) */
+  value?: number | string;
+  /** Callback when value changes (receives numeric value) */
+  onChange?: (value: number | null) => void;
+  /** Currency code (default: 'USD') */
+  currency?: string;
+  /** Locale for formatting (default: 'en-US') */
+  locale?: string;
+  /** Number of decimal places (default: 2) */
+  precision?: number;
+  /** Allow negative values (default: false) */
+  allowNegative?: boolean;
+  /** Minimum allowed value */
+  min?: number;
+  /** Maximum allowed value */
+  max?: number;
+}
+
+/**
+ * CurrencyInput - Specialized input for monetary values
+ *
+ * Automatically formats currency values with proper symbols and thousands separators.
+ * Handles parsing and validation of numeric currency input.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CurrencyInput
+ *   label="Price"
+ *   value={price}
+ *   onChange={setPrice}
+ *   currency="USD"
+ * />
+ * ```
+ *
+ * @example With validation
+ * ```tsx
+ * <CurrencyInput
+ *   label="Budget"
+ *   value={budget}
+ *   onChange={setBudget}
+ *   min={0}
+ *   max={10000}
+ *   validationState={budget > 10000 ? 'error' : null}
+ *   validationMessage={budget > 10000 ? 'Exceeds maximum budget' : ''}
+ * />
+ * ```
+ */
+const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
+  (
+    {
+      value,
+      onChange,
+      currency = 'USD',
+      locale = 'en-US',
+      precision = 2,
+      allowNegative = false,
+      min,
+      max,
+      onBlur,
+      onFocus,
+      ...props
+    },
+    ref
+  ) => {
+    const [displayValue, setDisplayValue] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+
+    // Get currency symbol
+    const getCurrencySymbol = () => {
+      const formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+      });
+      const parts = formatter.formatToParts(0);
+      const symbolPart = parts.find(part => part.type === 'currency');
+      return symbolPart?.value || '$';
+    };
+
+    const currencySymbol = getCurrencySymbol();
+
+    // Format number as currency
+    const formatCurrency = (num: number): string => {
+      const formatter = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: isFocused ? 0 : precision,
+        maximumFractionDigits: precision,
+      });
+      return formatter.format(num);
+    };
+
+    // Parse display value to number
+    const parseValue = (str: string): number | null => {
+      if (!str || str === '') return null;
+
+      // Remove all non-numeric characters except decimal point and minus sign
+      let cleaned = str.replace(/[^\d.-]/g, '');
+
+      // Handle multiple decimal points
+      const parts = cleaned.split('.');
+      if (parts.length > 2) {
+        cleaned = parts[0] + '.' + parts.slice(1).join('');
+      }
+
+      // Handle multiple minus signs (keep only first)
+      const minusCount = (cleaned.match(/-/g) || []).length;
+      if (minusCount > 1) {
+        const hasLeadingMinus = cleaned.startsWith('-');
+        cleaned = cleaned.replace(/-/g, '');
+        if (hasLeadingMinus) cleaned = '-' + cleaned;
+      }
+
+      // Parse to float
+      const num = parseFloat(cleaned);
+
+      if (isNaN(num)) return null;
+
+      // Apply precision
+      return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
+    };
+
+    // Update display value when external value changes
+    useEffect(() => {
+      if (value === undefined || value === null || value === '') {
+        setDisplayValue('');
+      } else {
+        const numValue = typeof value === 'string' ? parseFloat(value) : value;
+        if (!isNaN(numValue)) {
+          setDisplayValue(formatCurrency(numValue));
+        }
+      }
+    }, [value, isFocused]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.target.value;
+      setDisplayValue(inputValue);
+
+      const numValue = parseValue(inputValue);
+
+      // Validate constraints
+      if (numValue !== null) {
+        if (!allowNegative && numValue < 0) return;
+        if (min !== undefined && numValue < min) return;
+        if (max !== undefined && numValue > max) return;
+      }
+
+      onChange?.(numValue);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      // Remove formatting when focused for easier editing
+      if (value !== undefined && value !== null && value !== '') {
+        const numValue = typeof value === 'string' ? parseFloat(value) : value;
+        if (!isNaN(numValue)) {
+          setDisplayValue(numValue.toString());
+        }
+      }
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      // Reformat on blur
+      const numValue = parseValue(displayValue);
+      if (numValue !== null) {
+        setDisplayValue(formatCurrency(numValue));
+      } else if (displayValue === '') {
+        setDisplayValue('');
+      }
+      onBlur?.(e);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        value={displayValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        prefix={currencySymbol}
+        {...props}
+      />
+    );
+  }
+);
+
+CurrencyInput.displayName = 'CurrencyInput';
+
+export default CurrencyInput;

package/src/components/DataTable.stories.tsx

@@ -334,3 +334,90 @@ export const FullFeatured: Story = {
     ),
   },
 };
+
+export const WithSecondaryRows: Story = {
+  args: {
+    data: sampleUsers,
+    columns: [
+      {
+        key: 'name',
+        header: 'Name',
+        sortable: true,
+        renderSecondary: (user: User) => (
+          <span className="text-xs text-ink-500">Member since {user.joinedAt}</span>
+        ),
+      },
+      {
+        key: 'email',
+        header: 'Email',
+        sortable: true,
+        renderSecondary: (user: User) => (
+          <span className="text-xs text-ink-500">{user.role}</span>
+        ),
+      },
+      {
+        key: 'status',
+        header: 'Status',
+        render: (user: User) => (
+          <Badge variant={user.status === 'active' ? 'success' : user.status === 'inactive' ? 'error' : 'warning'}>
+            {user.status}
+          </Badge>
+        ),
+      },
+    ],
+    selectable: true,
+    actions: [
+      {
+        label: 'Edit',
+        icon: <Edit className="h-4 w-4" />,
+        onClick: (user: User) => alert(`Edit ${user.name}`),
+      },
+      {
+        label: 'View',
+        icon: <Eye className="h-4 w-4" />,
+        onClick: (user: User) => alert(`View ${user.name}`),
+      },
+    ],
+  },
+};
+
+export const FullWidthWrappingText: Story = {
+  args: {
+    data: [
+      { id: '1', name: 'ADOBE Adobe Systems SAN JOSE CA - Expense - Monthly subscription for creative cloud services' },
+      { id: '2', name: 'AMAZON PRIME Amazon.com SEATTLE WA - Entertainment - Annual membership fee' },
+      { id: '3', name: 'SPOTIFY Spotify USA NEW YORK NY - Music streaming service monthly payment' },
+      { id: '4', name: 'NETFLIX Netflix.com LOS GATOS CA - Video streaming monthly subscription' },
+      { id: '5', name: 'MICROSOFT Microsoft Corporation REDMOND WA - Office 365 business subscription annual fee' },
+    ],
+    columns: [
+      {
+        key: 'name',
+        header: 'Transaction Name',
+        flex: 1,
+      },
+    ],
+  },
+};
+
+export const FullWidthWithSecondaryRow: Story = {
+  args: {
+    data: [
+      { id: '1', name: 'ADOBE Adobe Systems SAN JOSE CA - Expense', frequency: 'Monthly', amount: '$16.52' },
+      { id: '2', name: 'AMAZON PRIME Amazon.com SEATTLE WA - Entertainment', frequency: 'Monthly', amount: '$25.00' },
+      { id: '3', name: 'SPOTIFY Spotify USA NEW YORK NY - Music streaming service', frequency: 'Monthly', amount: '$9.99' },
+      { id: '4', name: 'NETFLIX Netflix.com LOS GATOS CA - Video streaming', frequency: 'Monthly', amount: '$15.49' },
+      { id: '5', name: 'MICROSOFT Microsoft Corporation REDMOND WA - Office 365 business subscription', frequency: 'Annual', amount: '$132.14' },
+    ],
+    columns: [
+      {
+        key: 'name',
+        header: 'Name',
+        flex: 1,
+        renderSecondary: (item: any) => (
+          <span className="text-xs text-ink-500">{item.frequency} • {item.amount}</span>
+        ),
+      },
+    ],
+  },
+};

package/src/components/DataTable.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDown, ChevronRight, MoreVertical, Edit, Trash } from 'lucide-react';
+import Menu, { MenuItem } from './Menu';
 
 /**
  * Base data item interface - all data items must have an id
@@ -164,6 +165,8 @@ interface DataTableProps<T extends BaseDataItem = BaseDataItem> {
   onDelete?: (item: T) => void | Promise<void>;
   /** Optional custom row actions (in addition to edit/delete) */
   actions?: DataTableAction<T>[];
+  /** Enable context menu (right-click) for row actions (default: true when actions exist) */
+  enableContextMenu?: boolean;
   /** Optional click handler for rows */
   onRowClick?: (item: T) => void;
   /** Optional double-click handler for rows */
@@ -455,6 +458,7 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   onEdit,
   onDelete,
   actions = [],
+  enableContextMenu = true,
   onRowClick,
   onRowDoubleClick,
   selectable = false,
@@ -502,6 +506,20 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   const [scrollTop, setScrollTop] = useState(0);
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
+  // Row hover state (for coordinating primary + secondary row highlighting)
+  const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);
+
+  // Context menu state
+  const [contextMenuState, setContextMenuState] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+    item: T | null;
+  }>({
+    isOpen: false,
+    position: { x: 0, y: 0 },
+    item: null,
+  });
+
   // Filter columns based on hiddenColumns
   const baseVisibleColumns = columns.filter(
     col => !hiddenColumns.includes(String(col.key))
@@ -754,7 +772,31 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   }
   
   const allActions = [...builtInActions, ...actions];
-  
+
+  // Convert actions to menu items for context menu
+  const convertActionsToMenuItems = (item: T): MenuItem[] => {
+    const visibleActions = allActions.filter(action => !action.show || action.show(item));
+
+    return visibleActions.map((action, idx) => {
+      let iconElement: React.ReactNode = null;
+      if (action.icon) {
+        if (React.isValidElement(action.icon)) {
+          iconElement = action.icon;
+        } else {
+          iconElement = React.createElement(action.icon as any, { className: 'h-4 w-4' });
+        }
+      }
+
+      return {
+        id: `action-${idx}`,
+        label: action.label,
+        icon: iconElement,
+        onClick: () => action.onClick(item),
+        danger: action.variant === 'danger',
+      };
+    });
+  };
+
   // Selection state management
   const [internalSelectedRows, setInternalSelectedRows] = useState<Set<string>>(new Set());
   
@@ -980,50 +1022,98 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
       const isSelected = selectedRowsSet.has(rowKey);
       const isExpanded = expandedRowsSet.has(rowKey);
       const rowBgClass = getRowBackgroundClass(item, index);
-      const hoverClass = disableHover ? '' : 'hover:bg-paper-100';
       const borderClass = bordered ? `border-b ${borderColor}` : (!visibleColumns.some(col => !!col.renderSecondary) ? `border-b ${borderColor}` : '');
+      const hasSecondaryRow = visibleColumns.some(col => !!col.renderSecondary);
+
+      // Hover state for row pair (primary + secondary)
+      const isHovered = hoveredRowKey === rowKey;
+      const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
 
       return (
       <React.Fragment key={rowKey}>
         <tr
-          className={`${hoverClass} table-row-stable ${onRowDoubleClick || onRowClick || (expandedRowConfig?.edit?.triggerOnDoubleClick !== false) || (expandedRowConfig?.details?.triggerOnDoubleClick === true) ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : rowBgClass} ${borderClass}`}
+          className={`table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass}`}
+          onMouseEnter={() => !disableHover && setHoveredRowKey(rowKey)}
+          onMouseLeave={() => !disableHover && setHoveredRowKey(null)}
           onClick={() => onRowClick?.(item)}
+          onContextMenu={(e) => {
+            if (enableContextMenu && allActions.length > 0) {
+              e.preventDefault();
+              e.stopPropagation();
+
+              const x = e.clientX;
+              const y = e.clientY;
+
+              setContextMenuState({
+                isOpen: true,
+                position: { x, y },
+                item,
+              });
+            }
+          }}
           onDoubleClick={() => {
-            // Check for edit mode with triggerOnDoubleClick
-            if (expandedRowConfig?.edit && expandedRowConfig.edit.triggerOnDoubleClick !== false) {
+            // Priority 1: If there's an onEdit handler (legacy), trigger it
+            if (onEdit) {
+              onEdit(item);
+            }
+            // Priority 2: If there's an expandable edit mode, trigger it
+            else if (expandedRowConfig?.edit) {
               handleExpansionWithMode(rowKey, 'edit');
             }
-            // Check for details mode with triggerOnDoubleClick
-            else if (expandedRowConfig?.details && expandedRowConfig.details.triggerOnDoubleClick === true) {
+            // Priority 3: If there's an expandable details mode, trigger it
+            else if (expandedRowConfig?.details) {
               handleExpansionWithMode(rowKey, 'details');
             }
-            // Legacy: use onRowDoubleClick handler
+            // Priority 4: If there's any addRelated mode, trigger the first one
+            else if (expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0) {
+              handleExpansionWithMode(rowKey, `addRelated-${expandedRowConfig.addRelated[0].key}`);
+            }
+            // Priority 5: If there's any manageRelated mode, trigger the first one
+            else if (expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0) {
+              handleExpansionWithMode(rowKey, `manageRelated-${expandedRowConfig.manageRelated[0].key}`);
+            }
+            // Priority 6: Legacy onRowDoubleClick handler
             else {
               onRowDoubleClick?.(item);
             }
           }}
           title={
-            expandedRowConfig?.edit && expandedRowConfig.edit.triggerOnDoubleClick !== false ? 'Double-click to edit inline' :
-            expandedRowConfig?.details && expandedRowConfig.details.triggerOnDoubleClick === true ? 'Double-click to view details' :
-            onRowDoubleClick ? 'Double-click to open details' : 
-            onRowClick ? 'Click to select' : 
+            onEdit ? 'Double-click to edit' :
+            expandedRowConfig?.edit ? 'Double-click to edit inline' :
+            expandedRowConfig?.details ? 'Double-click to view details' :
+            expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0 ? `Double-click to ${expandedRowConfig.addRelated[0].label}` :
+            expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0 ? `Double-click to ${expandedRowConfig.manageRelated[0].label}` :
+            onRowDoubleClick ? 'Double-click for details' :
+            onRowClick ? 'Click to select' :
             undefined
           }
         >
           {selectable && (
-          <td className={`sticky left-0 bg-white ${currentDensity.cell} z-10 align-middle ${bordered ? `border ${borderColor}` : ''}`}>
+          <td
+            className={`sticky left-0 z-10 ${bordered ? `border ${borderColor}` : ''}`}
+            style={{
+              backgroundColor: 'inherit',
+              verticalAlign: 'middle',
+              padding: '0.375rem 0.75rem',
+              textAlign: 'center'
+            }}
+            rowSpan={hasSecondaryRow ? 2 : 1}
+          >
             <input
               type="checkbox"
               checked={isSelected}
               onChange={() => handleRowSelect(rowKey)}
               className="w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400"
-              style={{ verticalAlign: 'middle' }}
               aria-label={`Select row ${rowKey}`}
             />
           </td>
           )}
             {((expandable || expandedRowConfig) && showExpandChevron) && (
-            <td className={`sticky left-0 bg-white px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ''}`}>
+            <td
+              className={`sticky left-0 px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ''}`}
+              style={{ backgroundColor: 'inherit', verticalAlign: 'middle' }}
+              rowSpan={hasSecondaryRow ? 2 : 1}
+            >
               <button
                 onClick={() => {
                   // NEW: Enhanced logic for expandedRowConfig
@@ -1059,14 +1149,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
               verticalAlign: 'middle'
             }}
             onClick={(e) => e.stopPropagation()}
-            rowSpan={visibleColumns.some(col => !!col.renderSecondary) ? 2 : 1}
+            rowSpan={hasSecondaryRow ? 2 : 1}
           >
             <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '28px' }}>
               <ActionMenu actions={allActions} item={item} />
             </div>
           </td>
         )}
-        {visibleColumns.map((column) => {
+        {visibleColumns.map((column, colIdx) => {
           const columnKey = String(column.key);
           const dynamicWidth = columnWidths[columnKey];
           const value = typeof column.key === 'string'
@@ -1075,10 +1165,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
 
           const primaryContent = column.render ? column.render(item, value) : String(value || '');
 
+          // Reduce left padding on first column when there are action buttons
+          const isFirstColumn = colIdx === 0;
+          const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+
           return (
             <td
               key={`${item.id}-${columnKey}`}
-              className={`${currentDensity.cell} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
+              className={`${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
               style={getColumnStyle(column, dynamicWidth)}
             >
               <div className={`${currentDensity.text} leading-tight`}>{primaryContent}</div>
@@ -1088,12 +1182,16 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
             </tr>
             
             {/* Secondary row - only render if any column has renderSecondary */}
-            {visibleColumns.some(col => !!col.renderSecondary) && (
-              <tr className={`secondary-row ${hoverClass} border-b ${borderColor}`}>
-                {selectable && <td className={`sticky left-0 bg-white ${currentDensity.cell} py-0.5 z-10 ${bordered ? `border ${borderColor}` : ''}`}></td>}
-                {((expandable || expandedRowConfig) && showExpandChevron) && <td className={`sticky left-0 bg-white px-2 py-0.5 z-10 ${bordered ? `border ${borderColor}` : ''}`}></td>}
+            {hasSecondaryRow && (
+              <tr
+                className={`secondary-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} border-b ${borderColor}`}
+                onMouseEnter={() => !disableHover && setHoveredRowKey(rowKey)}
+                onMouseLeave={() => !disableHover && setHoveredRowKey(null)}
+              >
+                {/* Selectable checkbox uses rowspan from primary row, no cell needed here */}
+                {/* Expand chevron uses rowspan from primary row, no cell needed here */}
                 {/* Actions column uses rowspan from primary row, no cell needed here */}
-                {visibleColumns.map((column) => {
+                {visibleColumns.map((column, colIdx) => {
                   const columnKey = String(column.key);
                   const dynamicWidth = columnWidths[columnKey];
                   const value = typeof column.key === 'string'
@@ -1101,10 +1199,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
                     : item[column.key];
                   const secondaryContent = column.renderSecondary ? column.renderSecondary(item, value) : null;
 
+                  // Reduce left padding on first column when there are action buttons
+                  const isFirstColumn = colIdx === 0;
+                  const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+
                   return (
                     <td
                       key={`${item.id}-${columnKey}-secondary`}
-                      className={`${currentDensity.cell} py-0.5 ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
+                      className={`${currentDensity.cell} py-0.5 ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
                       style={getColumnStyle(column, dynamicWidth)}
                     >
                       <div className="text-xs text-ink-500 leading-tight">
@@ -1334,18 +1436,28 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   );
 
   // Wrap in scrollable container if virtualized
-  if (virtualized) {
-    return (
-      <div
-        ref={tableContainerRef}
-        onScroll={handleScroll}
-        style={{ height: virtualHeight, overflow: 'auto' }}
-        className="rounded-lg"
-      >
-        {tableContent}
-      </div>
-    );
-  }
+  const finalContent = virtualized ? (
+    <div
+      ref={tableContainerRef}
+      onScroll={handleScroll}
+      style={{ height: virtualHeight, overflow: 'auto' }}
+      className="rounded-lg"
+    >
+      {tableContent}
+    </div>
+  ) : tableContent;
 
-  return tableContent;
+  // Render with context menu
+  return (
+    <>
+      {finalContent}
+      {contextMenuState.isOpen && contextMenuState.item && (
+        <Menu
+          items={convertActionsToMenuItems(contextMenuState.item)}
+          position={contextMenuState.position}
+          onClose={() => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null })}
+        />
+      )}
+    </>
+  );
 }

package/src/components/Modal.stories.tsx

@@ -284,3 +284,67 @@ export const NoCloseButton: Story = {
     );
   },
 };
+
+export const TextSelectionTest: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Test Text Selection</Button>
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Text Selection Test">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <div style={{
+              padding: '1rem',
+              backgroundColor: '#dbeafe',
+              border: '1px solid #3b82f6',
+              borderRadius: '0.375rem'
+            }}>
+              <h4 style={{ fontWeight: 600, marginBottom: '0.5rem', fontSize: '0.875rem', color: '#1e40af' }}>
+                ✅ Bug Fix Test: Text Selection
+              </h4>
+              <p style={{ fontSize: '0.875rem' }}>
+                Try selecting text in the input fields below by clicking and dragging <strong>outside</strong> the modal boundaries.
+                The modal should <strong>NOT</strong> close when you release the mouse button outside.
+              </p>
+            </div>
+            <Input
+              label="Full Name"
+              placeholder="Try selecting this text and dragging outside the modal"
+              defaultValue="John Smith - Drag to select and move mouse outside modal bounds"
+            />
+            <Input
+              label="Email Address"
+              type="email"
+              placeholder="user@example.com"
+              defaultValue="test.user@example.com - Select text here too"
+            />
+            <Input
+              label="Company"
+              placeholder="Company name"
+              defaultValue="This is a long company name that you can select by dragging"
+            />
+            <div style={{
+              padding: '0.75rem',
+              backgroundColor: '#fef3c7',
+              border: '1px solid #f59e0b',
+              borderRadius: '0.375rem',
+              fontSize: '0.875rem'
+            }}>
+              <strong>Test Instructions:</strong>
+              <ol style={{ marginLeft: '1.5rem', marginTop: '0.5rem' }}>
+                <li>Click and hold inside any input field</li>
+                <li>While holding, drag your mouse outside the modal</li>
+                <li>Release the mouse button while outside</li>
+                <li>Modal should remain open! ✅</li>
+              </ol>
+            </div>
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};