@papernote/ui 1.10.16 → 1.10.18

package/dist/index.js

@@ -327,7 +327,9 @@ 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, loading = false, className = '', id, type = 'text', value, maxLength, inputMode, enterKeyHint, size = 'md', ...props }, ref) => {
-    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const helperId = `${inputId}-helper`;
     const [showPassword, setShowPassword] = React.useState(false);
     // Handle clear button click
     const handleClear = () => {
@@ -408,7 +410,7 @@ const Input = React.forwardRef(({ label, helperText, validationState, validation
                 return 'text-ink-600';
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-500 text-sm", children: prefix })), prefixIcon && !prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: prefixIcon })), icon && iconPosition === 'left' && !prefix && !prefixIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: icon })), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: actualType, value: value, maxLength: maxLength, inputMode: effectiveInputMode, enterKeyHint: enterKeyHint, className: `
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-500 text-sm", children: prefix })), prefixIcon && !prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: prefixIcon })), icon && iconPosition === 'left' && !prefix && !prefixIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: icon })), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: actualType, value: value, maxLength: maxLength, inputMode: effectiveInputMode, enterKeyHint: enterKeyHint, "aria-invalid": validationState === 'error', "aria-describedby": helperText || validationMessage ? helperId : undefined, "aria-required": props.required, className: `
               input
               ${sizeClasses[size]}
               ${getValidationClasses()}
@@ -421,7 +423,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-1", 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 rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "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 rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "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-1", 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 rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "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 rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "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", { id: helperId, className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, role: validationState === 'error' ? 'alert' : undefined, "aria-live": validationState === 'error' ? 'assertive' : undefined, 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';
 
@@ -804,7 +806,7 @@ const optionSizeClasses = {
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', usePortal = true, } = props;
+    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', usePortal = true, required = false, } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
     const [scrollTop, setScrollTop] = React.useState(0);
@@ -1037,19 +1039,19 @@ const Select = React.forwardRef((props, ref) => {
     };
     // Native select for mobile (optional)
     if (useNativeSelect) {
-        return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
+        return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
               input w-full appearance-none pr-10
               ${sizeClasses$b[effectiveSize]}
               ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
               ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-required": required, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
             ${sizeClasses$b[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, "aria-required": required, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                                         e.stopPropagation();
                                         onChange?.('');
                                         setIsOpen(false);
@@ -1654,7 +1656,7 @@ const DatePicker = React.forwardRef(({ value, onChange, label, placeholder = 'Se
             ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : 'cursor-pointer'}
             focus:outline-none focus:ring-2
             pr-10
-          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Date picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 gap-1", children: [showClearButton && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Date picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 gap-1", children: [showClearButton && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     handleClear();
                                 }, className: "text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear date", children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), jsxRuntime.jsx(lucideReact.Calendar, { className: `${iconSizeClasses[size]} text-ink-400` })] })] }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsxs("div", { id: dialogId, className: "absolute z-50 mt-1 bg-white rounded-lg shadow-lg border border-paper-200 p-3 w-72", role: "dialog", "aria-modal": "true", "aria-label": "Date picker calendar", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxRuntime.jsx("button", { type: "button", onClick: goToPrevMonth, className: "p-1 rounded hover:bg-paper-100 text-ink-600 hover:text-ink-900", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" }) }), jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-ink-900", children: [MONTHS[viewDate.getMonth()], " ", viewDate.getFullYear()] }), jsxRuntime.jsx("button", { type: "button", onClick: goToNextMonth, className: "p-1 rounded hover:bg-paper-100 text-ink-600 hover:text-ink-900", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" }) })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1", children: DAYS.map(day => (jsxRuntime.jsx("div", { className: "text-center text-xs font-medium text-ink-500 py-1", children: day }, day))) }), jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: generateCalendarDays().map(({ date, isCurrentMonth }, index) => {
@@ -1845,7 +1847,7 @@ const TimePicker = React.forwardRef(({ value = null, onChange, label, placeholde
             ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
             focus:outline-none focus:ring-2
             pr-20
-          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Time picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dropdownId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Time picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dropdownId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     handleClear();
                                 }, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), jsxRuntime.jsx(lucideReact.Clock, { className: `${iconSizeClasses[size]} text-ink-400` })] })] }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { id: dropdownId, className: "absolute z-50 mt-1 bg-white rounded-md shadow-lg border border-paper-200", role: "dialog", "aria-modal": "true", "aria-label": "Time selection", children: jsxRuntime.jsxs("div", { className: "p-4 flex items-center gap-4", children: [jsxRuntime.jsx(TimeSpinner, { value: timeValue.hours, min: use12Hour ? 1 : 0, max: use12Hour ? 12 : 23, onChange: (hours) => updateTime({ hours }), label: "Hour" }), jsxRuntime.jsx("span", { className: "text-2xl font-bold text-ink-600", children: ":" }), jsxRuntime.jsx(TimeSpinner, { value: timeValue.minutes, min: 0, max: 59, step: minuteStep, options: minuteOptions, onChange: (minutes) => updateTime({ minutes }), label: "Min" }), showSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-2xl font-bold text-ink-600", children: ":" }), jsxRuntime.jsx(TimeSpinner, { value: timeValue.seconds, min: 0, max: 59, onChange: (seconds) => updateTime({ seconds }), label: "Sec" })] })), use12Hour && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => updateTime({ period: 'AM' }), className: `
@@ -2105,7 +2107,7 @@ const DateRangePicker = React.forwardRef(({ value = { start: null, end: null },
             ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
             focus:outline-none focus:ring-2
             pr-20
-          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Date range picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : (isOpen ? hintId : undefined), role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [(value.start || value.end) && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+          `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Date range picker' : undefined, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : (isOpen ? hintId : undefined), "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [(value.start || value.end) && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     handleClear();
                                 }, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), jsxRuntime.jsx(lucideReact.Calendar, { className: `${iconSizeClasses[size]} text-ink-400` })] })] }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { id: dialogId, className: "absolute z-50 mt-1 bg-white rounded-md shadow-lg border border-paper-200 p-4", role: "dialog", "aria-modal": "true", "aria-label": "Date range selection", children: jsxRuntime.jsxs("div", { className: "flex gap-4", children: [showPresets && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 border-r border-paper-200 pr-4", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('today'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "Today" }), jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('yesterday'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "Yesterday" }), jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('last7days'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "Last 7 days" }), jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('last30days'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "Last 30 days" }), jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('thisMonth'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "This month" }), jsxRuntime.jsx("button", { type: "button", onClick: () => handlePreset('lastMonth'), className: "text-left px-3 py-2 text-sm text-ink-700 hover:bg-primary-50 rounded whitespace-nowrap", children: "Last month" })] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxRuntime.jsx("button", { type: "button", onClick: previousMonth, className: "p-2 text-ink-600 hover:bg-paper-100 rounded", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" }) }), jsxRuntime.jsx("div", { className: "text-sm font-semibold text-ink-900", children: monthYear }), jsxRuntime.jsx("button", { type: "button", onClick: nextMonth, className: "p-2 text-ink-600 hover:bg-paper-100 rounded", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" }) })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (jsxRuntime.jsx("div", { className: "text-center text-xs font-medium text-ink-500 w-8", children: day }, day))) }), jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
@@ -2667,7 +2669,7 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
               ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
               focus:outline-none focus:ring-2
               pr-20
-            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Combobox' : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0 ? `option-${highlightedIndex}` : undefined, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsxRuntime.jsx("div", { className: "animate-spin", children: jsxRuntime.jsx(lucideReact.Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), !loading && (jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }) }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxRuntime.jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
+            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Combobox' : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0 ? `option-${highlightedIndex}` : undefined, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsxRuntime.jsx("div", { className: "animate-spin", children: jsxRuntime.jsx(lucideReact.Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), !loading && (jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }) }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxRuntime.jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
                             const Icon = option.icon;
                             const isSelected = option.value === value;
                             const isHighlighted = index === highlightedIndex;
@@ -4606,6 +4608,8 @@ function BottomSheetActions({ children, className = '' }) {
     return (jsxRuntime.jsx("div", { className: `flex flex-col gap-2 px-4 py-4 border-t border-paper-200 bg-white ${className}`, children: children }));
 }
 
+// Selector for all focusable elements
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const sizeClasses$9 = {
     sm: 'max-w-md',
     md: 'max-w-lg',
@@ -4683,29 +4687,78 @@ const sizeClasses$9 = {
 function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', scrollable = false, maxHeight, mobileMode = 'auto', mobileHeight = 'lg', mobileShowHandle = true, }) {
     const modalRef = React.useRef(null);
     const mouseDownOnBackdrop = React.useRef(false);
+    const previousActiveElement = React.useRef(null);
     const titleId = React.useId();
     const isMobile = useIsMobile();
+    // Get all focusable elements within the modal
+    const getFocusableElements = React.useCallback(() => {
+        if (!modalRef.current)
+            return [];
+        return Array.from(modalRef.current.querySelectorAll(FOCUSABLE_SELECTOR))
+            .filter(el => el.offsetParent !== null); // Filter out hidden elements
+    }, []);
     // Determine if we should use BottomSheet
     const useBottomSheet = mobileMode === 'sheet' ||
         (mobileMode === 'auto' && isMobile);
-    // Handle escape key (only for modal mode, BottomSheet handles its own)
+    // Handle escape key and focus trap (only for modal mode, BottomSheet handles its own)
     React.useEffect(() => {
         if (useBottomSheet)
-            return; // BottomSheet handles escape
-        const handleEscape = (e) => {
+            return; // BottomSheet handles its own focus
+        const handleKeyDown = (e) => {
             if (e.key === 'Escape' && isOpen) {
                 onClose();
+                return;
+            }
+            // Focus trap: keep focus within modal
+            if (e.key === 'Tab' && isOpen) {
+                const focusableElements = getFocusableElements();
+                if (focusableElements.length === 0)
+                    return;
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey) {
+                    // Shift+Tab: if on first element, wrap to last
+                    if (document.activeElement === firstElement) {
+                        e.preventDefault();
+                        lastElement.focus();
+                    }
+                }
+                else {
+                    // Tab: if on last element, wrap to first
+                    if (document.activeElement === lastElement) {
+                        e.preventDefault();
+                        firstElement.focus();
+                    }
+                }
             }
         };
         if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
+            // Store the currently focused element to restore later
+            previousActiveElement.current = document.activeElement;
+            document.addEventListener('keydown', handleKeyDown);
             document.body.style.overflow = 'hidden';
+            // Set initial focus to first focusable element
+            // Use requestAnimationFrame to ensure the modal is rendered
+            requestAnimationFrame(() => {
+                const focusableElements = getFocusableElements();
+                if (focusableElements.length > 0) {
+                    focusableElements[0].focus();
+                }
+                else if (modalRef.current) {
+                    // If no focusable elements, focus the modal container
+                    modalRef.current.focus();
+                }
+            });
         }
         return () => {
-            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleKeyDown);
             document.body.style.overflow = 'unset';
+            // Restore focus to the previously focused element
+            if (previousActiveElement.current && typeof previousActiveElement.current.focus === 'function') {
+                previousActiveElement.current.focus();
+            }
         };
-    }, [isOpen, onClose, useBottomSheet]);
+    }, [isOpen, onClose, useBottomSheet, getFocusableElements]);
     // Track if mousedown originated on the backdrop
     const handleBackdropMouseDown = (e) => {
         if (e.target === e.currentTarget) {
@@ -4746,7 +4799,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return reactDom.createPortal(jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    const modalContent = (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$9[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 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (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$9[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, tabIndex: -1, 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 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
     return reactDom.createPortal(modalContent, document.body);
@@ -6040,6 +6093,68 @@ function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', cl
     return (jsxRuntime.jsx(Tooltip, { content: content, position: position, children: jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsxRuntime.jsx(IconComponent, { className: sizeClasses$7[size] }) }) }));
 }
 
+/**
+ * SkipLink - Accessibility skip link for keyboard navigation
+ *
+ * A skip link allows keyboard users to bypass repetitive navigation
+ * and jump directly to the main content. The link is visually hidden
+ * until focused, making it invisible to mouse users while remaining
+ * accessible to keyboard and screen reader users.
+ *
+ * Place this component at the very beginning of your page layout,
+ * before any navigation elements.
+ *
+ * @example Basic usage
+ * ```tsx
+ * // In your layout component:
+ * <SkipLink targetId="main-content" />
+ * <Navigation />
+ * <main id="main-content">
+ *   {children}
+ * </main>
+ * ```
+ *
+ * @example Custom text
+ * ```tsx
+ * <SkipLink targetId="content">Skip navigation</SkipLink>
+ * ```
+ *
+ * @example Multiple skip links
+ * ```tsx
+ * <div>
+ *   <SkipLink targetId="main-content">Skip to main content</SkipLink>
+ *   <SkipLink targetId="search">Skip to search</SkipLink>
+ * </div>
+ * ```
+ */
+function SkipLink({ targetId, children = 'Skip to main content', className = '', }) {
+    const handleClick = (e) => {
+        e.preventDefault();
+        const target = document.getElementById(targetId);
+        if (target) {
+            // Set tabindex to make the element focusable if it isn't already
+            if (!target.hasAttribute('tabindex')) {
+                target.setAttribute('tabindex', '-1');
+            }
+            target.focus();
+            // Scroll the element into view
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    };
+    return (jsxRuntime.jsx("a", { href: `#${targetId}`, onClick: handleClick, className: `
+        sr-only focus:not-sr-only
+        focus:absolute focus:z-50
+        focus:top-4 focus:left-4
+        focus:px-4 focus:py-2
+        focus:bg-accent-600 focus:text-white
+        focus:rounded-lg focus:shadow-lg
+        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+        font-medium text-sm
+        transition-none
+        ${className}
+      `, children: children }));
+}
+
 function Popover({ trigger: triggerElement, children, placement = 'bottom', triggerMode = 'click', showArrow = true, offset = 8, open: controlledOpen, onOpenChange, closeOnClickOutside = true, closeOnEscape = true, showDelay = 0, hideDelay = 0, className = '', disabled = false, }) {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const [position, setPosition] = React.useState({ top: 0, left: 0 });
@@ -7654,7 +7769,7 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
             ${error
                             ? 'border-error-500 focus:ring-error-400 focus:border-error-400'
                             : 'border-paper-300'}
-          `, role: "combobox", "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Search' : undefined, "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? `autocomplete-option-${highlightedIndex}` : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : undefined, "aria-busy": loading }), clearable && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Clear", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg max-h-60 overflow-y-auto", role: "listbox", "aria-label": "Search results", children: filteredOptions.map((option, index) => (option.isHeader ? (
+          `, role: "combobox", "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Search' : undefined, "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? `autocomplete-option-${highlightedIndex}` : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : undefined, "aria-required": required, "aria-busy": loading }), clearable && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Clear", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg max-h-60 overflow-y-auto", role: "listbox", "aria-label": "Search results", children: filteredOptions.map((option, index) => (option.isHeader ? (
                 // Render section header (non-selectable)
                 jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs font-semibold text-ink-500 uppercase tracking-wide bg-paper-50 border-t border-paper-200 first:border-t-0 first:rounded-t-lg cursor-default", role: "presentation", children: option.label }, `header-${option.value}`)) : (
                 // Render selectable option
@@ -14041,6 +14156,10 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const tableContainerRef = React.useRef(null);
     // Row hover state (for coordinating primary + secondary row highlighting)
     const [hoveredRowKey, setHoveredRowKey] = React.useState(null);
+    // Keyboard navigation state
+    const [focusedCell, setFocusedCell] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState('');
+    const tableBodyRef = React.useRef(null);
     // Temporary row highlight state (for flash animation)
     const [flashingRows, setFlashingRows] = React.useState(new Set());
     const flashTimeoutRef = React.useRef(null);
@@ -14106,6 +14225,11 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const currentDensity = densityClasses[density];
     // Key extractor function - defined early for use in other functions
     const getRowKey = keyExtractor || ((row) => String(row.id));
+    // Calculate if there are any actions (for keyboard navigation column calculation)
+    // This is computed early so it can be used in keyboard handlers
+    const hasAnyActions = !!(onEdit || onDelete || actions.length > 0 ||
+        expandedRowConfig?.edit || expandedRowConfig?.details ||
+        expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length);
     // Get row background class based on striping and highlighting
     const getRowBackgroundClass = (item, index) => {
         const classes = [];
@@ -14407,6 +14531,192 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const handleCollapseExpansion = () => {
         setExpansionState(null);
     };
+    // Keyboard navigation handler
+    const handleKeyboardNavigation = React.useCallback((e) => {
+        if (!data.length)
+            return;
+        const totalRows = data.length;
+        const totalCols = visibleColumns.length;
+        // If no cell is focused, focus first data cell on first arrow key
+        if (!focusedCell) {
+            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+                e.preventDefault();
+                setFocusedCell({ row: 0, col: 0 });
+                const colHeader = visibleColumns[0]?.header || 'first column';
+                setAnnouncement(`Row 1, ${colHeader}`);
+                return;
+            }
+            return;
+        }
+        const { row, col } = focusedCell;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (row < totalRows - 1) {
+                    const newRow = row + 1;
+                    setFocusedCell({ row: newRow, col });
+                    const rowItem = data[newRow];
+                    const colHeader = visibleColumns[col]?.header || '';
+                    const cellValue = rowItem[visibleColumns[col]?.key];
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (row > 0) {
+                    const newRow = row - 1;
+                    setFocusedCell({ row: newRow, col });
+                    const rowItem = data[newRow];
+                    const colHeader = visibleColumns[col]?.header || '';
+                    const cellValue = rowItem[visibleColumns[col]?.key];
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (col < totalCols - 1) {
+                    const newCol = col + 1;
+                    setFocusedCell({ row, col: newCol });
+                    const rowItem = data[row];
+                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const cellValue = rowItem[visibleColumns[newCol]?.key];
+                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (col > 0) {
+                    const newCol = col - 1;
+                    setFocusedCell({ row, col: newCol });
+                    const rowItem = data[row];
+                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const cellValue = rowItem[visibleColumns[newCol]?.key];
+                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                if (e.ctrlKey) {
+                    // Ctrl+Home: Go to first cell
+                    setFocusedCell({ row: 0, col: 0 });
+                    setAnnouncement(`First cell, Row 1, ${visibleColumns[0]?.header || ''}`);
+                }
+                else {
+                    // Home: Go to first cell in current row
+                    setFocusedCell({ row, col: 0 });
+                    const rowItem = data[row];
+                    const cellValue = rowItem[visibleColumns[0]?.key];
+                    setAnnouncement(`${visibleColumns[0]?.header || ''}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'End':
+                e.preventDefault();
+                if (e.ctrlKey) {
+                    // Ctrl+End: Go to last cell
+                    const lastRow = totalRows - 1;
+                    const lastCol = totalCols - 1;
+                    setFocusedCell({ row: lastRow, col: lastCol });
+                    setAnnouncement(`Last cell, Row ${lastRow + 1}, ${visibleColumns[lastCol]?.header || ''}`);
+                }
+                else {
+                    // End: Go to last cell in current row
+                    const lastCol = totalCols - 1;
+                    setFocusedCell({ row, col: lastCol });
+                    const rowItem = data[row];
+                    const cellValue = rowItem[visibleColumns[lastCol]?.key];
+                    setAnnouncement(`${visibleColumns[lastCol]?.header || ''}: ${cellValue || 'empty'}`);
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                {
+                    const rowItem = data[row];
+                    const rowKey = getRowKey(rowItem);
+                    // Priority: Edit mode > Details mode > Row double-click handler
+                    if (onEdit) {
+                        onEdit(rowItem);
+                        setAnnouncement('Opening edit mode');
+                    }
+                    else if (expandedRowConfig?.edit) {
+                        handleExpansionWithMode(rowKey, 'edit');
+                        setAnnouncement('Opening inline edit');
+                    }
+                    else if (expandedRowConfig?.details) {
+                        handleExpansionWithMode(rowKey, 'details');
+                        setAnnouncement('Opening details view');
+                    }
+                    else if (onRowDoubleClick) {
+                        onRowDoubleClick(rowItem);
+                        setAnnouncement('Activating row');
+                    }
+                    else if (onRowClick) {
+                        onRowClick(rowItem);
+                        setAnnouncement('Row selected');
+                    }
+                }
+                break;
+            case ' ':
+                // Space: Toggle selection if selectable
+                if (selectable) {
+                    e.preventDefault();
+                    const rowItem = data[row];
+                    const rowKey = getRowKey(rowItem);
+                    handleRowSelect(rowKey);
+                    const isNowSelected = !selectedRowsSet.has(rowKey);
+                    setAnnouncement(isNowSelected ? 'Row selected' : 'Row deselected');
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setFocusedCell(null);
+                setAnnouncement('Table navigation exited');
+                // Return focus to table container
+                tableBodyRef.current?.closest('table')?.focus();
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                {
+                    const jumpSize = 10;
+                    const newRow = Math.min(row + jumpSize, totalRows - 1);
+                    setFocusedCell({ row: newRow, col });
+                    const colHeader = visibleColumns[col]?.header || '';
+                    setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
+                }
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                {
+                    const jumpSize = 10;
+                    const newRow = Math.max(row - jumpSize, 0);
+                    setFocusedCell({ row: newRow, col });
+                    const colHeader = visibleColumns[col]?.header || '';
+                    setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
+                }
+                break;
+        }
+    }, [data, visibleColumns, focusedCell, selectable, expandedRowConfig, onEdit, onRowDoubleClick, onRowClick, getRowKey, handleExpansionWithMode, handleRowSelect, selectedRowsSet]);
+    // Focus the appropriate cell when focusedCell changes
+    React.useEffect(() => {
+        if (focusedCell && tableBodyRef.current) {
+            const { row, col } = focusedCell;
+            const rows = tableBodyRef.current.querySelectorAll('tr[data-row-index]');
+            const targetRow = rows[row];
+            if (targetRow) {
+                // Calculate actual column index including extra columns
+                const hasSelectionCol = selectable;
+                const hasExpandCol = (expandable || expandedRowConfig) && showExpandChevron;
+                const hasActionsCol = hasAnyActions;
+                const extraColsBefore = (hasSelectionCol ? 1 : 0) + (hasExpandCol ? 1 : 0) + (hasActionsCol ? 1 : 0);
+                const cells = targetRow.querySelectorAll('td');
+                const targetCell = cells[col + extraColsBefore];
+                if (targetCell) {
+                    targetCell.focus();
+                    // Scroll into view if needed
+                    targetCell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+            }
+        }
+    }, [focusedCell, selectable, expandable, expandedRowConfig, showExpandChevron, hasAnyActions]);
     // Handle column header click for sorting
     const handleSort = (column) => {
         if (!column.sortable || !onSortChange)
@@ -14491,7 +14801,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             // 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), onContextMenu: (e) => {
+            // Check if this row is keyboard-focused
+            const isKeyboardFocused = focusedCell?.row === index;
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { "data-row-index": index, 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} ${isKeyboardFocused ? 'ring-2 ring-inset ring-accent-400' : ''}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
                             if (enableContextMenu && allActions.length > 0) {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -14569,7 +14881,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                 // Reduce left padding on first column when there are action buttons
                                 const isFirstColumn = colIdx === 0;
                                 const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
-                                return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`, style: getColumnStyle(column, dynamicWidth), children: jsxRuntime.jsx("div", { className: `${currentDensity.text} leading-tight`, children: primaryContent }) }, `${item.id}-${columnKey}`));
+                                // Check if this cell is keyboard-focused
+                                const isCellFocused = focusedCell?.row === index && focusedCell?.col === colIdx;
+                                return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''} ${isCellFocused ? 'outline outline-2 outline-accent-500 outline-offset-[-2px]' : ''}`, style: getColumnStyle(column, dynamicWidth), tabIndex: isCellFocused ? 0 : -1, role: "gridcell", "aria-colindex": colIdx + 1, children: jsxRuntime.jsx("div", { className: `${currentDensity.text} leading-tight`, children: primaryContent }) }, `${item.id}-${columnKey}`));
                             })] }), hasSecondaryRow && (jsxRuntime.jsx("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), children: visibleColumns.map((column, colIdx) => {
                             const columnKey = String(column.key);
                             const dynamicWidth = columnWidths[columnKey];
@@ -14638,7 +14952,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     })()] }, rowKey));
         });
     };
-    const tableContent = (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxRuntime.jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, children: [jsxRuntime.jsxs("colgroup", { children: [selectable && jsxRuntime.jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsxRuntime.jsx("col", { className: "w-10" }), allActions.length > 0 && jsxRuntime.jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
+    const tableContent = (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxRuntime.jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxRuntime.jsxs("colgroup", { children: [selectable && jsxRuntime.jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsxRuntime.jsx("col", { className: "w-10" }), allActions.length > 0 && jsxRuntime.jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsxRuntime.jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
@@ -14660,7 +14974,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                                     const currentWidth = thRef.current?.offsetWidth || 100;
                                                     handleResizeStart(e, columnKey, currentWidth);
                                                 }, 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()) })] })] }));
+                                })] }) }), jsxRuntime.jsx("tbody", { ref: tableBodyRef, className: "bg-white table-loading transition-opacity duration-200", onKeyDown: handleKeyboardNavigation, tabIndex: 0, role: "rowgroup", "aria-label": "Table data", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
     // Wrap in scrollable container if virtualized
     const finalContent = virtualized ? (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
     // Calculate pagination values
@@ -14694,7 +15008,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             }
         }, selectable: selectable, selectedRows: selectedRowsSet, onSelectionChange: onRowSelect ? (rows) => onRowSelect(rows) : undefined, keyExtractor: getRowKey, actions: allActions, onEdit: onEdit, onDelete: onDelete, className: className, cardClassName: cardClassName, gap: cardGap })) : null;
     // Render with context menu
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderPaginationControls(), shouldShowCardView ? cardViewContent : 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 }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement }), renderPaginationControls(), shouldShowCardView ? cardViewContent : 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 : {};
@@ -61480,6 +61794,7 @@ exports.SidebarGroup = SidebarGroup;
 exports.Skeleton = Skeleton;
 exports.SkeletonCard = SkeletonCard$1;
 exports.SkeletonTable = SkeletonTable;
+exports.SkipLink = SkipLink;
 exports.Slider = Slider;
 exports.Spreadsheet = Spreadsheet;
 exports.SpreadsheetReport = SpreadsheetReport;