@papernote/ui 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 var React = require('react');
+var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
 var reactRouterDom = require('react-router-dom');
 
@@ -31,6 +31,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
  * A versatile button component that supports multiple visual styles, sizes, icons,
  * loading states, and notification badges.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * @example Basic usage
  * ```tsx
  * <Button variant="primary">Click me</Button>
@@ -57,8 +59,14 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
  *   <Bell />
  * </Button>
  * ```
+ *
+ * @example With ref
+ * ```tsx
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * <Button ref={buttonRef}>Focusable</Button>
+ * ```
  */
-function Button({ variant = 'primary', size = 'md', loading = false, icon, iconPosition = 'left', fullWidth = false, iconOnly = false, badge, badgeVariant = 'error', children, disabled, className = '', ...props }) {
+const Button = React.forwardRef(({ variant = 'primary', size = 'md', loading = false, icon, iconPosition = 'left', fullWidth = false, iconOnly = false, badge, badgeVariant = 'error', children, disabled, className = '', ...props }, ref) => {
     const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-40 disabled:cursor-not-allowed';
     const variantStyles = {
         primary: 'bg-accent-500 text-white border-accent-500 hover:bg-accent-600 hover:shadow-sm active:scale-[0.98]',
@@ -89,7 +97,7 @@ function Button({ variant = 'primary', size = 'md', loading = false, icon, iconP
         md: 'min-w-[18px] h-[18px] text-[11px] px-1.5',
         lg: 'min-w-[20px] h-5 text-xs px-1.5',
     };
-    const buttonElement = (jsxRuntime.jsxs("button", { className: `
+    const buttonElement = (jsxRuntime.jsxs("button", { ref: ref, className: `
         ${baseStyles}
         ${variantStyles[variant]}
         ${sizeStyles[size]}
@@ -112,7 +120,8 @@ function Button({ variant = 'primary', size = 'md', loading = false, icon, iconP
           shadow-sm
           pointer-events-none
         `, "aria-label": `${badgeContent} notifications`, children: badgeContent })] }));
-}
+});
+Button.displayName = 'Button';
 
 /**
  * ButtonGroup component - Toggle button group for single or multiple selection.
@@ -259,7 +268,7 @@ function ButtonGroup({ options, value, values = [], onChange, onChangeMultiple,
  * />
  * ```
  */
-const Input = React.forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, className = '', id, type = 'text', value, maxLength, ...props }, ref) => {
+const Input = React.forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, loading = false, className = '', id, type = 'text', value, maxLength, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
     const [showPassword, setShowPassword] = React.useState(false);
     // Handle clear button click
@@ -331,7 +340,7 @@ const Input = React.forwardRef(({ label, helperText, validationState, validation
               ${validationState && !suffix && !suffixIcon && !showPasswordToggle ? 'pr-10' : ''}
               ${(showPasswordToggle && type === 'password') || validationState || suffix || suffixIcon ? 'pr-20' : ''}
               ${className}
-            `, ...props }), suffix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-2", children: [suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": "Clear input", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-5 w-5" }) : jsxRuntime.jsx(lucideReact.Eye, { className: "h-5 w-5" }) })), validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsxRuntime.jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxRuntime.jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
+            `, ...props }), suffix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-2", children: [loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }) })), suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && !loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": "Clear input", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-5 w-5" }) : jsxRuntime.jsx(lucideReact.Eye, { className: "h-5 w-5" }) })), validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsxRuntime.jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxRuntime.jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
 });
 Input.displayName = 'Input';
 
@@ -538,11 +547,18 @@ const Select = React.forwardRef((props, ref) => {
 });
 Select.displayName = 'Select';
 
-function MultiSelect({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, 'aria-label': ariaLabel, }) {
+const MultiSelect = React.forwardRef(({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, loading = false, 'aria-label': ariaLabel, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
     const selectRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // Expose imperative methods
+    React.useImperativeHandle(ref, () => ({
+        focus: () => triggerRef.current?.focus(),
+        open: () => !disabled && setIsOpen(true),
+        close: () => setIsOpen(false),
+    }));
     const selectedOptions = options.filter(opt => value.includes(opt.value));
     const hasReachedMax = maxSelections ? value.length >= maxSelections : false;
     const filteredOptions = searchable && searchQuery
@@ -589,11 +605,11 @@ function MultiSelect({ options, value = [], onChange, placeholder = 'Select opti
         e.stopPropagation();
         onChange?.([]);
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { className: "label", children: label })), jsxRuntime.jsxs("div", { ref: selectRef, className: "relative", children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { className: "label", children: label })), jsxRuntime.jsxs("div", { ref: selectRef, className: "relative", children: [jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", onClick: () => !disabled && !loading && setIsOpen(!isOpen), disabled: disabled || loading, className: `
             input w-full flex items-center justify-between min-h-[42px]
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-            ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-          `, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel || label, children: [jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-2 flex-wrap", children: selectedOptions.length === 0 ? (jsxRuntime.jsx("span", { className: "text-ink-400", children: placeholder })) : (selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-accent-100 text-accent-800 rounded text-sm", children: [option.icon && jsxRuntime.jsx("span", { className: "text-xs", children: option.icon }), option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemove(option.value, e), className: "hover:text-accent-900", "aria-label": `Remove ${option.label}`, children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, option.value)))) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [selectedOptions.length > 0 && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClearAll, className: "text-ink-400 hover:text-ink-600", "aria-label": "Clear all", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 overflow-hidden animate-fade-in", style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400" })] }) })), jsxRuntime.jsx("div", { className: "overflow-y-auto", style: { maxHeight: `${maxHeight - 60}px` }, role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
+            ${disabled || loading ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+          `, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel || label, children: [jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-2 flex-wrap", children: selectedOptions.length === 0 ? (jsxRuntime.jsx("span", { className: "text-ink-400", children: placeholder })) : (selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-accent-100 text-accent-800 rounded text-sm", children: [option.icon && jsxRuntime.jsx("span", { className: "text-xs", children: option.icon }), option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemove(option.value, e), className: "hover:text-accent-900", "aria-label": `Remove ${option.label}`, children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, option.value)))) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [loading && (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })), !loading && selectedOptions.length > 0 && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClearAll, className: "text-ink-400 hover:text-ink-600", "aria-label": "Clear all", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), !loading && (jsxRuntime.jsx(lucideReact.ChevronDown, { className: `h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 overflow-hidden animate-fade-in", style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400" })] }) })), jsxRuntime.jsx("div", { className: "overflow-y-auto", style: { maxHeight: `${maxHeight - 60}px` }, role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
                                     const isSelected = value.includes(option.value);
                                     const isDisabled = option.disabled || (hasReachedMax && !isSelected);
                                     return (jsxRuntime.jsx("button", { type: "button", onClick: () => !isDisabled && handleToggle(option.value), disabled: isDisabled, className: `
@@ -605,7 +621,8 @@ function MultiSelect({ options, value = [], onChange, placeholder = 'Select opti
                           ${isSelected ? 'bg-accent-600 border-accent-600' : 'border-paper-300'}
                         `, children: isSelected && jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 text-white" }) }), option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }) }, option.value));
                                 })) })] }))] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || error) && (jsxRuntime.jsx("p", { className: `text-xs ${error ? 'text-error-600' : 'text-ink-600'}`, children: error || helperText })), maxSelections && (jsxRuntime.jsxs("p", { className: `text-xs ml-auto ${hasReachedMax ? 'text-warning-600 font-medium' : 'text-ink-500'}`, children: [value.length, " / ", maxSelections, " selected"] }))] })] }));
-}
+});
+MultiSelect.displayName = 'MultiSelect';
 
 const Switch = React.forwardRef(({ checked, onChange, label, description, disabled = false, size = 'md', loading = false, }, ref) => {
     // Generate unique IDs for ARIA
@@ -652,7 +669,7 @@ const Switch = React.forwardRef(({ checked, onChange, label, description, disabl
 });
 Switch.displayName = 'Switch';
 
-const Textarea = React.forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', className = '', id, value, rows = 4, ...props }, ref) => {
+const Textarea = React.forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', loading = false, className = '', id, value, rows = 4, ...props }, ref) => {
     const textareaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
     const currentLength = typeof value === 'string' ? value.length : 0;
     const internalRef = React.useRef(null);
@@ -727,14 +744,15 @@ const Textarea = React.forwardRef(({ label, helperText, validationState, validat
                 return 'text-ink-600';
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, className: `
-            block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
-            bg-white bg-subtle-grain transition-all duration-200
-            focus:outline-none focus:ring-2 ${getResizeClass()}
-            disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
-            ${getValidationClasses()}
-            ${className}
-          `, "aria-invalid": validationState === 'error', "aria-describedby": validationMessage || helperText ? `${textareaId}-help` : undefined, "aria-required": props.required, ...props }), ((helperText || validationMessage) || (showCharCount && maxLength)) && (jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [validationState && getValidationIcon(), (helperText || validationMessage) && (jsxRuntime.jsx("p", { id: `${textareaId}-help`, className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText }))] }), showCharCount && maxLength && (jsxRuntime.jsxs("p", { className: `text-xs ${currentLength >= maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] }))] }));
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, className: `
+              block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
+              bg-white bg-subtle-grain transition-all duration-200
+              focus:outline-none focus:ring-2 ${getResizeClass()}
+              disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
+              ${getValidationClasses()}
+              ${loading ? 'pr-10' : ''}
+              ${className}
+            `, "aria-invalid": validationState === 'error', "aria-describedby": validationMessage || helperText ? `${textareaId}-help` : undefined, "aria-required": props.required, ...props }), loading && (jsxRuntime.jsx("div", { className: "absolute top-3 right-3 pointer-events-none", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 text-ink-400 animate-spin" }) }))] }), ((helperText || validationMessage) || (showCharCount && maxLength)) && (jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [validationState && getValidationIcon(), (helperText || validationMessage) && (jsxRuntime.jsx("p", { id: `${textareaId}-help`, className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText }))] }), showCharCount && maxLength && (jsxRuntime.jsxs("p", { className: `text-xs ${currentLength >= maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] }))] }));
 });
 Textarea.displayName = 'Textarea';
 
@@ -1950,6 +1968,8 @@ function SkeletonTable({ rows = 5, columns = 4 }) {
 /**
  * Card - Container component with paper aesthetic and subtle shadow
  *
+ * Supports ref forwarding for DOM access.
+ *
  * A content container with paper texture, border, and shadow effects. Supports
  * different sizes, variants (padding/shadow levels), and loading states.
  *
@@ -1979,8 +1999,14 @@ function SkeletonTable({ rows = 5, columns = 4 }) {
  *   <p>Content</p>
  * </Card>
  * ```
+ *
+ * @example With ref
+ * ```tsx
+ * const cardRef = useRef<HTMLDivElement>(null);
+ * <Card ref={cardRef}>Content</Card>
+ * ```
  */
-function Card({ children, variant = 'default', width = 'auto', className = '', onClick, hoverable = false, loading = false, }) {
+const Card = React.forwardRef(({ children, variant = 'default', width = 'auto', className = '', onClick, hoverable = false, loading = false, ...htmlProps }, ref) => {
     const baseStyles = 'bg-white bg-subtle-grain border-2 border-paper-300 transition-shadow duration-200';
     const variantStyles = {
         default: 'rounded-xl shadow-lg p-8',
@@ -1996,8 +2022,9 @@ function Card({ children, variant = 'default', width = 'auto', className = '', o
         full: 'w-full',
     };
     const interactiveStyles = onClick || hoverable ? 'cursor-pointer hover:shadow-md' : '';
-    return (jsxRuntime.jsx("div", { className: `${baseStyles} ${variantStyles[variant]} ${widthStyles[width]} ${interactiveStyles} ${className}`, onClick: !loading ? onClick : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: loading ? (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(Skeleton, { className: "h-6 w-3/4" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-5/6" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-4/6" })] })) : (children) }));
-}
+    return (jsxRuntime.jsx("div", { ref: ref, ...htmlProps, className: `${baseStyles} ${variantStyles[variant]} ${widthStyles[width]} ${interactiveStyles} ${className}`, onClick: !loading ? onClick : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: loading ? (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(Skeleton, { className: "h-6 w-3/4" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-5/6" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-4/6" })] })) : (children) }));
+});
+Card.displayName = 'Card';
 /**
  * CardHeader - Header section for Card component
  *
@@ -2095,15 +2122,34 @@ function Separator({ orientation = 'horizontal', className = '', spacing = 'md',
 /**
  * Stack component for arranging children vertically or horizontally with consistent spacing.
  *
- * Spacing scale:
+ * Supports ref forwarding for DOM access.
+ *
+ * Spacing scale (use either `spacing` or `gap` prop - they're aliases):
  * - none: 0
  * - xs: 0.5rem (2)
  * - sm: 0.75rem (3)
  * - md: 1.5rem (6)
  * - lg: 2rem (8)
  * - xl: 3rem (12)
+ *
+ * @example
+ * ```tsx
+ * // Using spacing prop
+ * <Stack spacing="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Stack>
+ *
+ * // Using gap prop (alias)
+ * <Stack gap="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Stack>
+ * ```
  */
-const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stretch', justify = 'start', wrap = false, className = '', }) => {
+const Stack = React.forwardRef(({ children, direction = 'vertical', spacing, gap, align = 'stretch', justify = 'start', wrap = false, className = '', ...htmlProps }, ref) => {
+    // Use gap as alias for spacing (spacing takes precedence if both provided)
+    const effectiveSpacing = spacing ?? gap ?? 'md';
     const spacingClasses = {
         vertical: {
             none: '',
@@ -2135,20 +2181,23 @@ const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stre
         between: 'justify-between',
         around: 'justify-around',
     };
-    return (jsxRuntime.jsx("div", { className: `
+    return (jsxRuntime.jsx("div", { ref: ref, ...htmlProps, className: `
         flex
         ${direction === 'vertical' ? 'flex-col' : 'flex-row'}
         ${wrap ? 'flex-wrap' : ''}
-        ${spacingClasses[direction][spacing]}
+        ${spacingClasses[direction][effectiveSpacing]}
         ${alignClasses[align]}
         ${justifyClasses[justify]}
         ${className}
       `, children: children }));
-};
+});
+Stack.displayName = 'Stack';
 
 /**
  * Grid component for arranging children in a CSS grid layout.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * Column options: 1, 2, 3, 4, 6, 12
  *
  * Responsive breakpoints (mobile-first):
@@ -2173,7 +2222,7 @@ const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stre
  *   <Card>Item 2</Card>
  * </Grid>
  */
-const Grid = ({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '', }) => {
+const Grid = React.forwardRef(({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '', ...htmlProps }, ref) => {
     // Base column classes
     const baseColumnClasses = {
         1: 'grid-cols-1',
@@ -2232,18 +2281,20 @@ const Grid = ({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '
         lg ? lgColumnClasses[lg] : '',
         xl ? xlColumnClasses[xl] : '',
     ].filter(Boolean).join(' ');
-    return (jsxRuntime.jsx("div", { className: `
+    return (jsxRuntime.jsx("div", { ref: ref, ...htmlProps, className: `
         grid
         ${columnClassList}
         ${gapClasses[gap]}
         ${className}
       `, children: children }));
-};
+});
+Grid.displayName = 'Grid';
 
 /**
  * Box component for generic containers with design system spacing and borders.
+ * Supports ref forwarding for DOM access.
  */
-const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginTop, marginBottom, marginLeft, marginRight, border = 'none', borderColor = 'default', rounded, width, height, className = '', ...htmlProps }) => {
+const Box = React.forwardRef(({ children, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginTop, marginBottom, marginLeft, marginRight, border = 'none', borderColor = 'default', rounded, width, height, className = '', ...htmlProps }, ref) => {
     const spacingMap = {
         none: '0',
         xs: '2',
@@ -2328,7 +2379,7 @@ const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddin
         };
         return roundedClasses[rounded];
     };
-    return (jsxRuntime.jsx("div", { ...htmlProps, className: `
+    return (jsxRuntime.jsx("div", { ref: ref, ...htmlProps, className: `
         ${getPaddingClass()}
         ${getMarginClass()}
         ${borderClasses[border]}
@@ -2338,7 +2389,8 @@ const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddin
         ${getHeightClass()}
         ${className}
       `, children: children }));
-};
+});
+Box.displayName = 'Box';
 
 /**
  * GridItem component for items within a Grid layout.
@@ -2383,6 +2435,8 @@ const GridItem = ({ colSpan, rowSpan, children, className = '', ...boxProps }) =
 /**
  * Text component for consistent typography across the application.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * Size scale:
  * - xs: 0.75rem (12px)
  * - sm: 0.875rem (14px)
@@ -2390,8 +2444,21 @@ const GridItem = ({ colSpan, rowSpan, children, className = '', ...boxProps }) =
  * - lg: 1.125rem (18px)
  * - xl: 1.25rem (20px)
  * - 2xl: 1.5rem (24px)
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="semibold" color="primary">
+ *   Hello World
+ * </Text>
+ *
+ * <Text color="warning">Warning message</Text>
+ *
+ * // With ref
+ * const textRef = useRef<HTMLParagraphElement>(null);
+ * <Text ref={textRef}>Measurable text</Text>
+ * ```
  */
-const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', }) => {
+const Text = React.forwardRef(({ children, as: Component = 'p', size = 'base', weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', ...htmlProps }, ref) => {
     const sizeClasses = {
         xs: 'text-xs',
         sm: 'text-sm',
@@ -2413,6 +2480,7 @@ const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal',
         accent: 'text-primary-600',
         error: 'text-error-600',
         success: 'text-success-600',
+        warning: 'text-warning-600',
     };
     const alignClasses = {
         left: 'text-left',
@@ -2444,8 +2512,9 @@ const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal',
         lineClamp ? lineClampClasses[lineClamp] : '',
         className,
     ].filter(Boolean).join(' ');
-    return (jsxRuntime.jsx(Component, { className: classes, children: children }));
-};
+    return (jsxRuntime.jsx(Component, { ref: ref, className: classes, ...htmlProps, children: children }));
+});
+Text.displayName = 'Text';
 
 const toastStyles = {
     success: {
@@ -2550,6 +2619,7 @@ const sizeClasses$4 = {
 };
 function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', }) {
     const modalRef = React.useRef(null);
+    const mouseDownOnBackdrop = React.useRef(false);
     const titleId = React.useId();
     // Handle escape key
     React.useEffect(() => {
@@ -2567,11 +2637,22 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
             document.body.style.overflow = 'unset';
         };
     }, [isOpen, onClose]);
-    // Handle click outside
-    const handleBackdropClick = (e) => {
+    // Track if mousedown originated on the backdrop
+    const handleBackdropMouseDown = (e) => {
         if (e.target === e.currentTarget) {
+            mouseDownOnBackdrop.current = true;
+        }
+        else {
+            mouseDownOnBackdrop.current = false;
+        }
+    };
+    // Handle click outside - only close if both mousedown and click happened on backdrop
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget && mouseDownOnBackdrop.current) {
             onClose();
         }
+        // Reset the flag after handling click
+        mouseDownOnBackdrop.current = false;
     };
     const getAnimationClass = () => {
         switch (animation) {
@@ -2591,7 +2672,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
     };
     if (!isOpen)
         return null;
-    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$4[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: "px-6 py-4", children: children })] }) }));
+    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$4[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: "px-6 py-4", children: children })] }) }));
 }
 function ModalFooter({ children }) {
     return (jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50", children: children }));
@@ -5976,19 +6057,19 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
             spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
         },
     };
-    return (jsxRuntime.jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsxRuntime.jsx("div", { className: `
-          flex ${orientation === 'vertical' ? 'flex-col' : ''}
+    return (jsxRuntime.jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsxRuntime.jsx("div", { className: `
+          flex ${orientation === 'vertical' ? 'flex-col' : ''}
           ${variant === 'underline'
                     ? orientation === 'vertical'
                         ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
                         : `border-b border-paper-200 ${sizeClasses[size].gap}`
-                    : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
-          ${sizeClasses[size].minWidth}
+                    : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
+          ${sizeClasses[size].minWidth}
         `, role: "tablist", children: tabs.map((tab) => {
                     const isActive = activeTab === tab.id;
-                    return (jsxRuntime.jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), className: `
-                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
-                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
+                    return (jsxRuntime.jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), className: `
+                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
+                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
                 ${variant === 'underline'
                             ? isActive
                                 ? orientation === 'vertical'
@@ -5999,8 +6080,8 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
                                     : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
                             : isActive
                                 ? 'bg-white text-accent-900 rounded-md shadow-xs'
-                                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
-                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+                                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
+                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
               `, children: [tab.icon && jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
                 }) }), jsxRuntime.jsx("div", { className: `${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`, children: tabs.map((tab) => (jsxRuntime.jsx("div", { id: `panel-${tab.id}`, role: "tabpanel", "aria-labelledby": tab.id, hidden: activeTab !== tab.id, className: activeTab === tab.id ? 'animate-fade-in' : '', children: activeTab === tab.id && tab.content }, tab.id))) })] }));
 }
@@ -6076,99 +6157,6 @@ function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick
             }) }) }));
 }
 
-function Table$1({ data, columns, keyExtractor, selectable = false, expandable = false, onRowSelect, renderExpandedRow, emptyState, className = '', onSort, sortColumn: externalSortColumn, sortDirection: externalSortDirection, }) {
-    const [internalSortColumn, setInternalSortColumn] = React.useState(null);
-    const [internalSortDirection, setInternalSortDirection] = React.useState(null);
-    // Use external sort state if provided, otherwise use internal state
-    const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
-    const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
-    const [selectedRows, setSelectedRows] = React.useState(new Set());
-    const [expandedRows, setExpandedRows] = React.useState(new Set());
-    // Handle sorting
-    const handleSort = (columnKey) => {
-        let newDirection;
-        if (sortColumn === columnKey) {
-            if (sortDirection === 'asc') {
-                newDirection = 'desc';
-            }
-            else if (sortDirection === 'desc') {
-                newDirection = null;
-            }
-            else {
-                newDirection = 'asc';
-            }
-        }
-        else {
-            newDirection = 'asc';
-        }
-        // If using external sort control, call the callback
-        if (onSort) {
-            onSort(columnKey, newDirection);
-        }
-        else {
-            // Otherwise update internal state
-            setInternalSortColumn(newDirection === null ? null : columnKey);
-            setInternalSortDirection(newDirection);
-        }
-    };
-    // Handle row selection
-    const handleRowSelect = (rowKey) => {
-        const newSelected = new Set(selectedRows);
-        if (newSelected.has(rowKey)) {
-            newSelected.delete(rowKey);
-        }
-        else {
-            newSelected.add(rowKey);
-        }
-        setSelectedRows(newSelected);
-        onRowSelect?.(Array.from(newSelected));
-    };
-    // Handle select all
-    const handleSelectAll = () => {
-        if (selectedRows.size === data.length) {
-            setSelectedRows(new Set());
-            onRowSelect?.([]);
-        }
-        else {
-            const allKeys = new Set(data.map(keyExtractor));
-            setSelectedRows(allKeys);
-            onRowSelect?.(Array.from(allKeys));
-        }
-    };
-    // Handle row expansion
-    const handleRowExpand = (rowKey) => {
-        const newExpanded = new Set(expandedRows);
-        if (newExpanded.has(rowKey)) {
-            newExpanded.delete(rowKey);
-        }
-        else {
-            newExpanded.add(rowKey);
-        }
-        setExpandedRows(newExpanded);
-    };
-    const getSortIcon = (columnKey) => {
-        if (sortColumn !== columnKey) {
-            return jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-4 w-4 text-ink-400" });
-        }
-        if (sortDirection === 'asc') {
-            return jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4 text-accent-600" });
-        }
-        if (sortDirection === 'desc') {
-            return jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-4 w-4 text-accent-600" });
-        }
-        return jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-4 w-4 text-ink-400" });
-    };
-    if (data.length === 0 && emptyState) {
-        return jsxRuntime.jsx("div", { children: emptyState });
-    }
-    return (jsxRuntime.jsx("div", { className: `overflow-x-auto ${className}`, children: jsxRuntime.jsxs("table", { className: "table", children: [jsxRuntime.jsx("thead", { className: "table-header", children: jsxRuntime.jsxs("tr", { children: [selectable && (jsxRuntime.jsx("th", { className: "table-header-cell w-12", children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), expandable && jsxRuntime.jsx("th", { className: "table-header-cell w-12" }), columns.map((column) => (jsxRuntime.jsx("th", { className: "table-header-cell", style: { width: column.width }, children: column.sortable ? (jsxRuntime.jsxs("button", { onClick: () => handleSort(column.key), className: "group inline-flex items-center gap-2 hover:text-ink-900 transition-colors", children: [jsxRuntime.jsx("span", { children: column.header }), getSortIcon(column.key)] })) : (column.header) }, column.key)))] }) }), jsxRuntime.jsx("tbody", { children: data.map((row) => {
-                        const rowKey = keyExtractor(row);
-                        const isSelected = selectedRows.has(rowKey);
-                        const isExpanded = expandedRows.has(rowKey);
-                        return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `table-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : ''}`, children: [selectable && (jsxRuntime.jsx("td", { className: "table-cell", children: jsxRuntime.jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleRowSelect(rowKey), className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": `Select row ${rowKey}` }) })), expandable && (jsxRuntime.jsx("td", { className: "table-cell", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(rowKey), className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": isExpanded ? 'Collapse row' : 'Expand row', children: isExpanded ? (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })) }) })), columns.map((column) => (jsxRuntime.jsx("td", { className: "table-cell", children: column.accessor ? column.accessor(row) : row[column.key] }, column.key)))] }), expandable && isExpanded && renderExpandedRow && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0), className: "px-6 py-4 bg-paper-50", children: renderExpandedRow(row) }) }))] }, rowKey));
-                    }) })] }) }));
-}
-
 function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, }) {
     const variantStyles = {
         success: 'bg-success-50 text-success-700 border-success-200',
@@ -6276,8 +6264,8 @@ const Avatar = ({ firstName, lastName, fallbackText = 'U', imageUrl, size = 'md'
         `, style: { textShadow: '0 1px 2px rgba(0,0,0,0.3)' }, children: getInitials() }) }));
 };
 
-function EmptyState({ icon, title, description, action, secondaryAction, }) {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [icon && (jsxRuntime.jsx("div", { className: "mb-6 text-ink-400", children: icon })), jsxRuntime.jsx("h3", { className: "text-lg font-medium text-ink-900 mb-2", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-ink-600 max-w-md mb-8", children: description }), (action || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [action && (jsxRuntime.jsx(Button, { variant: "primary", onClick: action.onClick, children: action.label })), secondaryAction && (jsxRuntime.jsx(Button, { variant: "secondary", onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
+function EmptyState({ icon, title, description, action, secondaryAction, children, }) {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [icon && (jsxRuntime.jsx("div", { className: "mb-6 text-ink-400", children: icon })), jsxRuntime.jsx("h3", { className: "text-lg font-medium text-ink-900 mb-2", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-ink-600 max-w-md mb-8", children: description }), children && (jsxRuntime.jsx("div", { className: "mb-8 w-full max-w-md", children: children })), (action || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [action && (jsxRuntime.jsx(Button, { variant: "primary", onClick: action.onClick, children: action.label })), secondaryAction && (jsxRuntime.jsx(Button, { variant: "secondary", onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
 }
 
 /**
@@ -6928,8 +6916,35 @@ const TwoColumnContent = ({ sidebar, children, className = '', }) => {
  * </PageLayout>
  * ```
  */
-const Page = ({ children, maxWidth: _maxWidth = '7xl', className = '', padding: _padding = 'normal' }) => {
-    return (jsxRuntime.jsx("div", { className: "min-h-screen bg-paper-100", children: jsxRuntime.jsx("div", { className: `notebook-page notebook-margin notebook-ruled ${className}`, children: children }) }));
+const Page = ({ children, maxWidth = '7xl', className = '', padding = 'normal', fixed = false }) => {
+    // Max width classes
+    const maxWidthClasses = {
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        '6xl': 'max-w-6xl',
+        '7xl': 'max-w-7xl',
+        'full': 'max-w-full',
+    };
+    // Padding classes - responsive (fixed left/top, responsive right/bottom) vs all fixed
+    const paddingClasses = {
+        none: fixed ? 'p-0' : 'pt-0 pl-0 pr-0 pb-0',
+        sm: fixed ? 'p-4' : 'pt-4 pl-4 pr-4 pb-4 sm:pr-6 md:pr-8 sm:pb-6 md:pb-8',
+        normal: fixed ? 'pt-12 pl-20 pr-16 pb-12' : 'pt-12 pl-20 pr-4 pb-4 sm:pr-8 md:pr-12 lg:pr-16 sm:pb-8 md:pb-12 lg:pb-16',
+        lg: fixed ? 'pt-16 pl-24 pr-20 pb-16' : 'pt-16 pl-24 pr-6 pb-6 sm:pr-12 md:pr-16 lg:pr-20 sm:pb-12 md:pb-16 lg:pb-20',
+    };
+    // Margin classes - responsive (fixed left/top, responsive right/bottom) vs all fixed
+    const marginClasses = fixed
+        ? 'mt-4 ml-4 mr-4 mb-4'
+        : 'mt-4 ml-4 mr-4 mb-4 sm:mr-6 md:mr-8 lg:mr-auto sm:mb-6 md:mb-8';
+    return (jsxRuntime.jsx("div", { className: "min-h-screen bg-paper-100", children: jsxRuntime.jsx("div", { className: `
+        bg-white bg-subtle-grain rounded-sm shadow-lg border-l-4 border-paper-300
+        min-h-[calc(100vh-2rem)] relative
+        notebook-margin notebook-ruled
+        ${maxWidthClasses[maxWidth]}
+        ${paddingClasses[padding]}
+        ${marginClasses}
+        ${className}
+      `.trim().replace(/\s+/g, ' '), children: children }) }));
 };
 
 /**
@@ -7264,9 +7279,11 @@ function getColumnStyle(column, dynamicWidth) {
  * />
  * ```
  */
-function DataTable({ data, columns, loading = false, error = null, emptyMessage = 'No data available', loadingRows = 5, className = '', onSortChange, currentSort = null, onEdit, onDelete, actions = [], onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
+function DataTable({ data, columns, loading = false, error = null, emptyMessage = 'No data available', loadingRows = 5, className = '', onSortChange, currentSort = null, onEdit, onDelete, actions = [], enableContextMenu = true, onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
 // Visual customization props
-striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, }) {
+striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, 
+// Pagination props
+paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pageSizeOptions = [10, 25, 50, 100], onPageSizeChange, showPageSizeSelector = true, }) {
     // Column resizing state
     const [columnWidths, setColumnWidths] = React.useState({});
     const [resizingColumn, setResizingColumn] = React.useState(null);
@@ -7281,6 +7298,12 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
     const tableContainerRef = React.useRef(null);
     // Row hover state (for coordinating primary + secondary row highlighting)
     const [hoveredRowKey, setHoveredRowKey] = React.useState(null);
+    // Context menu state
+    const [contextMenuState, setContextMenuState] = React.useState({
+        isOpen: false,
+        position: { x: 0, y: 0 },
+        item: null,
+    });
     // Filter columns based on hiddenColumns
     const baseVisibleColumns = columns.filter(col => !hiddenColumns.includes(String(col.key)));
     // Initialize column order on mount or when columns change
@@ -7493,16 +7516,52 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
             }
         });
     }
+    // Combine all actions: built-in first, then custom actions, then delete last
+    // Delete is stored separately to ensure it's always last
+    let deleteAction = null;
     if (onDelete) {
-        builtInActions.push({
+        deleteAction = {
             label: 'Delete',
             icon: lucideReact.Trash,
             onClick: onDelete,
             variant: 'danger',
             tooltip: 'Delete item'
-        });
+        };
     }
-    const allActions = [...builtInActions, ...actions];
+    // Build final actions array with consistent ordering:
+    // 1. Edit (first - most common action)
+    // 2. View Details
+    // 3. Add Related actions
+    // 4. Manage Related actions
+    // 5. Custom actions (from actions prop)
+    // 6. Delete (always last - destructive action)
+    const allActions = [
+        ...builtInActions,
+        ...actions,
+        ...(deleteAction ? [deleteAction] : [])
+    ];
+    // Convert actions to menu items for context menu
+    const convertActionsToMenuItems = (item) => {
+        const visibleActions = allActions.filter(action => !action.show || action.show(item));
+        return visibleActions.map((action, idx) => {
+            let iconElement = null;
+            if (action.icon) {
+                if (React.isValidElement(action.icon)) {
+                    iconElement = action.icon;
+                }
+                else {
+                    iconElement = React.createElement(action.icon, { 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] = React.useState(new Set());
     // Expansion state management
@@ -7660,7 +7719,19 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
             // Hover state for row pair (primary + secondary)
             const isHovered = hoveredRowKey === rowKey;
             const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
-            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { 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), onDoubleClick: () => {
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { 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: () => {
                             // Priority 1: If there's an onEdit handler (legacy), trigger it
                             if (onEdit) {
                                 onEdit(item);
@@ -7816,10 +7887,23 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
                                                 }, children: jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-paper-300 group-hover:bg-accent-400 transition-colors" }) }))] }, columnKey));
                                 })] }) }), jsxRuntime.jsx("tbody", { className: "bg-white table-loading transition-opacity duration-200", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
     // Wrap in scrollable container if virtualized
-    if (virtualized) {
-        return (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent }));
-    }
-    return tableContent;
+    const finalContent = virtualized ? (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
+    // Calculate pagination values
+    const effectiveTotalItems = totalItems ?? data.length;
+    const totalPages = Math.ceil(effectiveTotalItems / pageSize);
+    // Page size selector options
+    const pageSizeSelectOptions = pageSizeOptions.map(size => ({
+        value: String(size),
+        label: `${size} per page`,
+    }));
+    // Render pagination controls
+    const renderPaginationControls = () => {
+        if (!paginated)
+            return null;
+        return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && onPageSizeChange && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: "Show:" }), jsxRuntime.jsx(Select, { options: pageSizeSelectOptions, value: String(pageSize), onChange: (value) => onPageSizeChange?.(Number(value)) })] })), jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: effectiveTotalItems > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Showing ", ((currentPage - 1) * pageSize) + 1, " - ", Math.min(currentPage * pageSize, effectiveTotalItems), " of ", effectiveTotalItems] })) : ('No items') })] }), totalPages > 1 && onPageChange && (jsxRuntime.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }))] }));
+    };
+    // Render with context menu
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderPaginationControls(), finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -11631,12 +11715,12 @@ var bessel$1 = {};
 
 /* bessel.js (C) 2013-present SheetJS -- http://sheetjs.com */
 
-(function (exports) {
+(function (exports$1) {
 	(function (factory) {
 	  /*jshint ignore:start */
 	  if(typeof DO_NOT_EXPORT_BESSEL === 'undefined') {
 	    {
-	      factory(exports);
+	      factory(exports$1);
 	    }
 	  } else {
 	    factory({});
@@ -11870,7 +11954,7 @@ var bessel$1 = {};
 
 var jstat = {exports: {}};
 
-(function (module, exports) {
+(function (module, exports$1) {
 	(function (window, factory) {
 	    {
 	        module.exports = factory();
@@ -30527,7 +30611,7 @@ var hasRequiredScheduler_production;
 function requireScheduler_production () {
 	if (hasRequiredScheduler_production) return scheduler_production;
 	hasRequiredScheduler_production = 1;
-	(function (exports) {
+	(function (exports$1) {
 		function push(heap, node) {
 		  var index = heap.length;
 		  heap.push(node);
@@ -30576,16 +30660,16 @@ function requireScheduler_production () {
 		  var diff = a.sortIndex - b.sortIndex;
 		  return 0 !== diff ? diff : a.id - b.id;
 		}
-		exports.unstable_now = void 0;
+		exports$1.unstable_now = void 0;
 		if ("object" === typeof performance && "function" === typeof performance.now) {
 		  var localPerformance = performance;
-		  exports.unstable_now = function () {
+		  exports$1.unstable_now = function () {
 		    return localPerformance.now();
 		  };
 		} else {
 		  var localDate = Date,
 		    initialTime = localDate.now();
-		  exports.unstable_now = function () {
+		  exports$1.unstable_now = function () {
 		    return localDate.now() - initialTime;
 		  };
 		}
@@ -30633,14 +30717,14 @@ function requireScheduler_production () {
 		function shouldYieldToHost() {
 		  return needsPaint
 		    ? true
-		    : exports.unstable_now() - startTime < frameInterval
+		    : exports$1.unstable_now() - startTime < frameInterval
 		      ? false
 		      : true;
 		}
 		function performWorkUntilDeadline() {
 		  needsPaint = false;
 		  if (isMessageLoopRunning) {
-		    var currentTime = exports.unstable_now();
+		    var currentTime = exports$1.unstable_now();
 		    startTime = currentTime;
 		    var hasMoreWork = true;
 		    try {
@@ -30670,7 +30754,7 @@ function requireScheduler_production () {
 		                var continuationCallback = callback(
 		                  currentTask.expirationTime <= currentTime
 		                );
-		                currentTime = exports.unstable_now();
+		                currentTime = exports$1.unstable_now();
 		                if ("function" === typeof continuationCallback) {
 		                  currentTask.callback = continuationCallback;
 		                  advanceTimers(currentTime);
@@ -30726,29 +30810,29 @@ function requireScheduler_production () {
 		  };
 		function requestHostTimeout(callback, ms) {
 		  taskTimeoutID = localSetTimeout(function () {
-		    callback(exports.unstable_now());
+		    callback(exports$1.unstable_now());
 		  }, ms);
 		}
-		exports.unstable_IdlePriority = 5;
-		exports.unstable_ImmediatePriority = 1;
-		exports.unstable_LowPriority = 4;
-		exports.unstable_NormalPriority = 3;
-		exports.unstable_Profiling = null;
-		exports.unstable_UserBlockingPriority = 2;
-		exports.unstable_cancelCallback = function (task) {
+		exports$1.unstable_IdlePriority = 5;
+		exports$1.unstable_ImmediatePriority = 1;
+		exports$1.unstable_LowPriority = 4;
+		exports$1.unstable_NormalPriority = 3;
+		exports$1.unstable_Profiling = null;
+		exports$1.unstable_UserBlockingPriority = 2;
+		exports$1.unstable_cancelCallback = function (task) {
 		  task.callback = null;
 		};
-		exports.unstable_forceFrameRate = function (fps) {
+		exports$1.unstable_forceFrameRate = function (fps) {
 		  0 > fps || 125 < fps
 		    ? console.error(
 		        "forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"
 		      )
 		    : (frameInterval = 0 < fps ? Math.floor(1e3 / fps) : 5);
 		};
-		exports.unstable_getCurrentPriorityLevel = function () {
+		exports$1.unstable_getCurrentPriorityLevel = function () {
 		  return currentPriorityLevel;
 		};
-		exports.unstable_next = function (eventHandler) {
+		exports$1.unstable_next = function (eventHandler) {
 		  switch (currentPriorityLevel) {
 		    case 1:
 		    case 2:
@@ -30766,10 +30850,10 @@ function requireScheduler_production () {
 		    currentPriorityLevel = previousPriorityLevel;
 		  }
 		};
-		exports.unstable_requestPaint = function () {
+		exports$1.unstable_requestPaint = function () {
 		  needsPaint = true;
 		};
-		exports.unstable_runWithPriority = function (priorityLevel, eventHandler) {
+		exports$1.unstable_runWithPriority = function (priorityLevel, eventHandler) {
 		  switch (priorityLevel) {
 		    case 1:
 		    case 2:
@@ -30788,12 +30872,12 @@ function requireScheduler_production () {
 		    currentPriorityLevel = previousPriorityLevel;
 		  }
 		};
-		exports.unstable_scheduleCallback = function (
+		exports$1.unstable_scheduleCallback = function (
 		  priorityLevel,
 		  callback,
 		  options
 		) {
-		  var currentTime = exports.unstable_now();
+		  var currentTime = exports$1.unstable_now();
 		  "object" === typeof options && null !== options
 		    ? ((options = options.delay),
 		      (options =
@@ -30844,8 +30928,8 @@ function requireScheduler_production () {
 		          ((isMessageLoopRunning = true), schedulePerformWorkUntilDeadline())));
 		  return priorityLevel;
 		};
-		exports.unstable_shouldYield = shouldYieldToHost;
-		exports.unstable_wrapCallback = function (callback) {
+		exports$1.unstable_shouldYield = shouldYieldToHost;
+		exports$1.unstable_wrapCallback = function (callback) {
 		  var parentPriorityLevel = currentPriorityLevel;
 		  return function () {
 		    var previousPriorityLevel = currentPriorityLevel;
@@ -30878,13 +30962,13 @@ var hasRequiredScheduler_development;
 function requireScheduler_development () {
 	if (hasRequiredScheduler_development) return scheduler_development;
 	hasRequiredScheduler_development = 1;
-	(function (exports) {
+	(function (exports$1) {
 		"production" !== process.env.NODE_ENV &&
 		  (function () {
 		    function performWorkUntilDeadline() {
 		      needsPaint = false;
 		      if (isMessageLoopRunning) {
-		        var currentTime = exports.unstable_now();
+		        var currentTime = exports$1.unstable_now();
 		        startTime = currentTime;
 		        var hasMoreWork = true;
 		        try {
@@ -30915,7 +30999,7 @@ function requireScheduler_development () {
 		                    var continuationCallback = callback(
 		                      currentTask.expirationTime <= currentTime
 		                    );
-		                    currentTime = exports.unstable_now();
+		                    currentTime = exports$1.unstable_now();
 		                    if ("function" === typeof continuationCallback) {
 		                      currentTask.callback = continuationCallback;
 		                      advanceTimers(currentTime);
@@ -31036,32 +31120,32 @@ function requireScheduler_development () {
 		    function shouldYieldToHost() {
 		      return needsPaint
 		        ? true
-		        : exports.unstable_now() - startTime < frameInterval
+		        : exports$1.unstable_now() - startTime < frameInterval
 		          ? false
 		          : true;
 		    }
 		    function requestHostTimeout(callback, ms) {
 		      taskTimeoutID = localSetTimeout(function () {
-		        callback(exports.unstable_now());
+		        callback(exports$1.unstable_now());
 		      }, ms);
 		    }
 		    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
 		      "function" ===
 		        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
 		      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-		    exports.unstable_now = void 0;
+		    exports$1.unstable_now = void 0;
 		    if (
 		      "object" === typeof performance &&
 		      "function" === typeof performance.now
 		    ) {
 		      var localPerformance = performance;
-		      exports.unstable_now = function () {
+		      exports$1.unstable_now = function () {
 		        return localPerformance.now();
 		      };
 		    } else {
 		      var localDate = Date,
 		        initialTime = localDate.now();
-		      exports.unstable_now = function () {
+		      exports$1.unstable_now = function () {
 		        return localDate.now() - initialTime;
 		      };
 		    }
@@ -31098,26 +31182,26 @@ function requireScheduler_development () {
 		      schedulePerformWorkUntilDeadline = function () {
 		        localSetTimeout(performWorkUntilDeadline, 0);
 		      };
-		    exports.unstable_IdlePriority = 5;
-		    exports.unstable_ImmediatePriority = 1;
-		    exports.unstable_LowPriority = 4;
-		    exports.unstable_NormalPriority = 3;
-		    exports.unstable_Profiling = null;
-		    exports.unstable_UserBlockingPriority = 2;
-		    exports.unstable_cancelCallback = function (task) {
+		    exports$1.unstable_IdlePriority = 5;
+		    exports$1.unstable_ImmediatePriority = 1;
+		    exports$1.unstable_LowPriority = 4;
+		    exports$1.unstable_NormalPriority = 3;
+		    exports$1.unstable_Profiling = null;
+		    exports$1.unstable_UserBlockingPriority = 2;
+		    exports$1.unstable_cancelCallback = function (task) {
 		      task.callback = null;
 		    };
-		    exports.unstable_forceFrameRate = function (fps) {
+		    exports$1.unstable_forceFrameRate = function (fps) {
 		      0 > fps || 125 < fps
 		        ? console.error(
 		            "forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"
 		          )
 		        : (frameInterval = 0 < fps ? Math.floor(1e3 / fps) : 5);
 		    };
-		    exports.unstable_getCurrentPriorityLevel = function () {
+		    exports$1.unstable_getCurrentPriorityLevel = function () {
 		      return currentPriorityLevel;
 		    };
-		    exports.unstable_next = function (eventHandler) {
+		    exports$1.unstable_next = function (eventHandler) {
 		      switch (currentPriorityLevel) {
 		        case 1:
 		        case 2:
@@ -31135,10 +31219,10 @@ function requireScheduler_development () {
 		        currentPriorityLevel = previousPriorityLevel;
 		      }
 		    };
-		    exports.unstable_requestPaint = function () {
+		    exports$1.unstable_requestPaint = function () {
 		      needsPaint = true;
 		    };
-		    exports.unstable_runWithPriority = function (priorityLevel, eventHandler) {
+		    exports$1.unstable_runWithPriority = function (priorityLevel, eventHandler) {
 		      switch (priorityLevel) {
 		        case 1:
 		        case 2:
@@ -31157,12 +31241,12 @@ function requireScheduler_development () {
 		        currentPriorityLevel = previousPriorityLevel;
 		      }
 		    };
-		    exports.unstable_scheduleCallback = function (
+		    exports$1.unstable_scheduleCallback = function (
 		      priorityLevel,
 		      callback,
 		      options
 		    ) {
-		      var currentTime = exports.unstable_now();
+		      var currentTime = exports$1.unstable_now();
 		      "object" === typeof options && null !== options
 		        ? ((options = options.delay),
 		          (options =
@@ -31214,8 +31298,8 @@ function requireScheduler_development () {
 		              schedulePerformWorkUntilDeadline())));
 		      return priorityLevel;
 		    };
-		    exports.unstable_shouldYield = shouldYieldToHost;
-		    exports.unstable_wrapCallback = function (callback) {
+		    exports$1.unstable_shouldYield = shouldYieldToHost;
+		    exports$1.unstable_wrapCallback = function (callback) {
 		      var parentPriorityLevel = currentPriorityLevel;
 		      return function () {
 		        var previousPriorityLevel = currentPriorityLevel;
@@ -35476,8 +35560,8 @@ return CRC32;
 })();
 /* [MS-CFB] v20171201 */
 var CFB = /*#__PURE__*/(function _CFB(){
-var exports = {};
-exports.version = '1.2.1';
+var exports$1 = {};
+exports$1.version = '1.2.1';
 /* [MS-CFB] 2.6.4 */
 function namecmp(l/*:string*/, r/*:string*/)/*:number*/ {
 	var L = l.split("/"), R = r.split("/");
@@ -37149,12 +37233,12 @@ function cfb_mov(cfb/*:CFBContainer*/, old_name/*:string*/, new_name/*:string*/)
 
 function cfb_gc(cfb/*:CFBContainer*/)/*:void*/ { rebuild_cfb(cfb, true); }
 
-exports.find = find;
-exports.read = read;
-exports.parse = parse;
-exports.write = write;
-exports.writeFile = write_file;
-exports.utils = {
+exports$1.find = find;
+exports$1.read = read;
+exports$1.parse = parse;
+exports$1.write = write;
+exports$1.writeFile = write_file;
+exports$1.utils = {
 	cfb_new: cfb_new,
 	cfb_add: cfb_add,
 	cfb_del: cfb_del,
@@ -37170,7 +37254,7 @@ exports.utils = {
 	consts: consts
 };
 
-return exports;
+return exports$1;
 })();
 
 /* normalize data for blob ctor */
@@ -58633,6 +58717,137 @@ function CurrencyDisplay({ amount, currency = 'USD', locale = 'en-US', className
     return (jsxRuntime.jsx("span", { className: combinedClasses, title: `${currency} ${safeAmount.toFixed(precision)}`, children: displayValue }));
 }
 
+/**
+ * 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 = React.forwardRef(({ value, onChange, currency = 'USD', locale = 'en-US', precision = 2, allowNegative = false, min, max, onBlur, onFocus, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = React.useState('');
+    const [isFocused, setIsFocused] = React.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) => {
+        const formatter = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: isFocused ? 0 : precision,
+            maximumFractionDigits: precision,
+        });
+        return formatter.format(num);
+    };
+    // Parse display value to number
+    const parseValue = (str) => {
+        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
+    React.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) => {
+        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) => {
+        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) => {
+        setIsFocused(false);
+        // Reformat on blur
+        const numValue = parseValue(displayValue);
+        if (numValue !== null) {
+            setDisplayValue(formatCurrency(numValue));
+        }
+        else if (displayValue === '') {
+            setDisplayValue('');
+        }
+        onBlur?.(e);
+    };
+    return (jsxRuntime.jsx(Input, { ref: ref, type: "text", value: displayValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, prefix: currencySymbol, ...props }));
+});
+CurrencyInput.displayName = 'CurrencyInput';
+
 const formatOptions = {
     short: {
         year: 'numeric',
@@ -59543,8 +59758,19 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </Layout>
  * ```
  */
-function PageLayout({ title, description, children, className = '', headerContent }) {
-    return (jsxRuntime.jsxs(Page, { children: [headerContent, jsxRuntime.jsxs("div", { className: `p-6 max-w-7xl mx-auto pb-20 ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
+function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false }) {
+    // Responsive padding classes - fixed left/top, responsive right/bottom
+    const paddingClasses = fixed
+        ? 'p-6 pb-20'
+        : 'pt-6 pl-6 pr-2 pb-8 sm:pr-4 md:pr-6 sm:pb-12 md:pb-16 lg:pb-20';
+    const maxWidthClasses = {
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        '6xl': 'max-w-6xl',
+        '7xl': 'max-w-7xl',
+        'full': 'max-w-full',
+    };
+    return (jsxRuntime.jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxRuntime.jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
 }
 
 const sizeClasses = {
@@ -59916,6 +60142,113 @@ function loadColumnOrder(tableId) {
     }
 }
 
+/**
+ * Export data to Excel file
+ *
+ * A standalone utility for exporting any data array to Excel format.
+ * Works independently of the Spreadsheet component.
+ *
+ * **Features:**
+ * - Export arrays of objects to Excel
+ * - Custom column headers and ordering
+ * - Value formatting with custom functions
+ * - Multi-sheet support
+ * - Automatic type handling
+ *
+ * @example
+ * ```typescript
+ * // Simple export - uses object keys as headers
+ * const data = [
+ *   { id: 1, name: 'Product A', price: 29.99 },
+ *   { id: 2, name: 'Product B', price: 49.99 },
+ * ];
+ * exportToExcel({ data, filename: 'products.xlsx' });
+ *
+ * // Custom columns with formatting
+ * exportToExcel({
+ *   data: users,
+ *   filename: 'users.xlsx',
+ *   columns: [
+ *     { key: 'id', label: 'ID' },
+ *     { key: 'name', label: 'Full Name' },
+ *     { key: 'email', label: 'Email Address' },
+ *     { key: 'createdAt', label: 'Joined', format: (date) => new Date(date).toLocaleDateString() },
+ *     { key: 'isActive', label: 'Status', format: (active) => active ? 'Active' : 'Inactive' },
+ *   ],
+ * });
+ *
+ * // Multi-sheet export
+ * const wb = utils.book_new();
+ * exportToExcel({ data: products, sheetName: 'Products', workbook: wb });
+ * exportToExcel({ data: orders, sheetName: 'Orders', workbook: wb });
+ * writeFile(wb, 'multi-sheet.xlsx');
+ * ```
+ *
+ * @param options - Export configuration options
+ * @returns WorkBook if workbook option provided, otherwise void (auto-downloads)
+ */
+function exportToExcel({ data, filename = 'export.xlsx', sheetName = 'Sheet1', columns, includeHeaders = true, workbook, }) {
+    if (!data || data.length === 0) {
+        throw new Error('No data provided for export');
+    }
+    let worksheetData;
+    if (columns) {
+        // Use custom columns with specific ordering and formatting
+        const headers = columns.map((col) => col.label);
+        const rows = data.map((row) => columns.map((col) => {
+            const value = row[col.key];
+            return col.format ? col.format(value) : value ?? '';
+        }));
+        worksheetData = includeHeaders ? [headers, ...rows] : rows;
+    }
+    else {
+        // Auto-generate from object keys
+        if (includeHeaders) {
+            const headers = Object.keys(data[0]);
+            const rows = data.map((row) => headers.map((key) => row[key] ?? ''));
+            worksheetData = [headers, ...rows];
+        }
+        else {
+            const headers = Object.keys(data[0]);
+            worksheetData = data.map((row) => headers.map((key) => row[key] ?? ''));
+        }
+    }
+    const worksheet = utils.aoa_to_sheet(worksheetData);
+    // If workbook provided, add sheet and return (for multi-sheet exports)
+    if (workbook) {
+        utils.book_append_sheet(workbook, worksheet, sheetName);
+        return workbook;
+    }
+    // Otherwise, create workbook and download
+    const newWorkbook = utils.book_new();
+    utils.book_append_sheet(newWorkbook, worksheet, sheetName);
+    writeFileSync(newWorkbook, filename);
+}
+function exportDataTableToExcel({ data, columns, filename = 'export.xlsx', sheetName = 'Sheet1', }) {
+    const excelColumns = columns.map((col) => ({
+        key: col.key,
+        label: col.header,
+    }));
+    exportToExcel({
+        data,
+        columns: excelColumns,
+        filename,
+        sheetName,
+    });
+}
+function createMultiSheetExcel({ filename, sheets }) {
+    const workbook = utils.book_new();
+    sheets.forEach((sheet) => {
+        exportToExcel({
+            data: sheet.data,
+            sheetName: sheet.name,
+            columns: sheet.columns,
+            workbook,
+        });
+    });
+    writeFileSync(workbook, filename);
+}
+
 function useColumnResize(options = {}) {
     const { tableId, persist = false } = options;
     const [columnWidths, setColumnWidths] = React.useState({});
@@ -60066,6 +60399,7 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.ContextMenu = ContextMenu;
 exports.ControlBar = ControlBar;
 exports.CurrencyDisplay = CurrencyDisplay;
+exports.CurrencyInput = CurrencyInput;
 exports.Dashboard = Dashboard;
 exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
@@ -60148,7 +60482,6 @@ exports.StatusBar = StatusBar;
 exports.StepIndicator = StepIndicator;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
-exports.Table = Table$1;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.Textarea = Textarea;
@@ -60169,8 +60502,11 @@ exports.addWarningMessage = addWarningMessage;
 exports.calculateColumnWidth = calculateColumnWidth;
 exports.createActionsSection = createActionsSection;
 exports.createFiltersSection = createFiltersSection;
+exports.createMultiSheetExcel = createMultiSheetExcel;
 exports.createPageControlsSection = createPageControlsSection;
 exports.createQueryDetailsSection = createQueryDetailsSection;
+exports.exportDataTableToExcel = exportDataTableToExcel;
+exports.exportToExcel = exportToExcel;
 exports.formatStatisticValue = formatStatisticValue;
 exports.formatStatistics = formatStatistics;
 exports.loadColumnOrder = loadColumnOrder;