@papernote/ui 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FilterBar.d.ts +1 -1
- package/dist/components/FilterBar.d.ts.map +1 -1
- package/dist/components/FilterPills.d.ts +14 -0
- package/dist/components/FilterPills.d.ts.map +1 -0
- package/dist/components/LetterNav.d.ts +8 -0
- package/dist/components/LetterNav.d.ts.map +1 -0
- package/dist/components/Pagination.d.ts +11 -1
- package/dist/components/Pagination.d.ts.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.d.ts +36 -4
- package/dist/index.esm.js +334 -268
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +334 -266
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
- package/src/components/FilterBar.tsx +116 -3
- package/src/components/FilterPills.tsx +58 -0
- package/src/components/LetterNav.tsx +67 -0
- package/src/components/Pagination.tsx +49 -1
- package/src/components/index.ts +6 -0
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { forwardRef, useState, useRef, useEffect, useId, useCallback, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useContext, useLayoutEffect, createElement, useReducer } from 'react';
|
|
4
|
-
import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, HelpCircle, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, ExternalLink, MoreHorizontal, Home, ArrowUp, ArrowDown, RotateCcw, ArrowRight, FileText, Image, File as File$1, Menu as Menu$1, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown,
|
|
4
|
+
import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, Filter, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, HelpCircle, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, ExternalLink, MoreHorizontal, Home, ArrowUp, ArrowDown, RotateCcw, ArrowRight, FileText, Image, File as File$1, Menu as Menu$1, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, XCircle, BarChart3, MessageSquare, Bot, RefreshCw, BrainCircuit, Target } from 'lucide-react';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
6
6
|
import { Link as Link$1, useInRouterContext, useNavigate, useLocation } from 'react-router-dom';
|
|
7
7
|
|
|
@@ -2699,7 +2699,18 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
|
|
|
2699
2699
|
// Default clear: set all values to null/empty
|
|
2700
2700
|
const clearedValues = {};
|
|
2701
2701
|
filters.forEach(filter => {
|
|
2702
|
-
|
|
2702
|
+
if (filter.type === 'text' || filter.type === 'search') {
|
|
2703
|
+
clearedValues[filter.key] = '';
|
|
2704
|
+
}
|
|
2705
|
+
else if (filter.type === 'dateRange') {
|
|
2706
|
+
clearedValues[filter.key] = { from: undefined, to: undefined };
|
|
2707
|
+
}
|
|
2708
|
+
else if (filter.type === 'multiSelect') {
|
|
2709
|
+
clearedValues[filter.key] = [];
|
|
2710
|
+
}
|
|
2711
|
+
else {
|
|
2712
|
+
clearedValues[filter.key] = null;
|
|
2713
|
+
}
|
|
2703
2714
|
});
|
|
2704
2715
|
onChange(clearedValues);
|
|
2705
2716
|
}
|
|
@@ -2731,6 +2742,38 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
|
|
|
2731
2742
|
];
|
|
2732
2743
|
return (jsx(Select, { options: boolOptions, value: value === null || value === undefined ? '' : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === '' ? null : newValue === 'true') }));
|
|
2733
2744
|
}
|
|
2745
|
+
case 'search':
|
|
2746
|
+
return (jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsx(Search, { className: "h-4 w-4 text-ink-400" }) }), jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
|
|
2747
|
+
case 'dateRange': {
|
|
2748
|
+
const rangeValue = value || {};
|
|
2749
|
+
return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "date", value: rangeValue.from || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsx("input", { type: "date", value: rangeValue.to || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
|
|
2750
|
+
}
|
|
2751
|
+
case 'toggle': {
|
|
2752
|
+
const toggleOptions = [
|
|
2753
|
+
{ value: '', label: 'All' },
|
|
2754
|
+
{ value: 'true', label: 'Yes' },
|
|
2755
|
+
{ value: 'false', label: 'No' },
|
|
2756
|
+
];
|
|
2757
|
+
const currentVal = value === null || value === undefined ? '' : String(value);
|
|
2758
|
+
return (jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === '' ? null : opt.value === 'true'), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
|
|
2759
|
+
? 'bg-accent-500 text-white'
|
|
2760
|
+
: 'bg-white text-ink-600 hover:bg-paper-50'} ${opt.value !== '' ? 'border-l border-paper-300' : ''}`, children: opt.label }, opt.value))) }));
|
|
2761
|
+
}
|
|
2762
|
+
case 'multiSelect': {
|
|
2763
|
+
const selectedValues = Array.isArray(value) ? value : [];
|
|
2764
|
+
const msOptions = filter.options || [];
|
|
2765
|
+
return (jsxs("div", { className: "relative", children: [jsx(Select, { options: [{ value: '', label: `All ${filter.label}` }, ...msOptions.map(o => ({ value: String(o.value), label: o.label }))], value: "", onChange: (newValue) => {
|
|
2766
|
+
if (!newValue) {
|
|
2767
|
+
handleFilterChange(filter.key, []);
|
|
2768
|
+
}
|
|
2769
|
+
else if (!selectedValues.includes(newValue)) {
|
|
2770
|
+
handleFilterChange(filter.key, [...selectedValues, newValue]);
|
|
2771
|
+
}
|
|
2772
|
+
} }), selectedValues.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedValues.map((sv) => {
|
|
2773
|
+
const opt = msOptions.find(o => String(o.value) === sv);
|
|
2774
|
+
return (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter(v => v !== sv)), className: "hover:text-accent-900", children: jsx(X, { className: "h-3 w-3" }) })] }, sv));
|
|
2775
|
+
}) }))] }));
|
|
2776
|
+
}
|
|
2734
2777
|
default:
|
|
2735
2778
|
return null;
|
|
2736
2779
|
}
|
|
@@ -2740,6 +2783,237 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
|
|
|
2740
2783
|
return (jsx("div", { className: `bg-white bg-subtle-grain border border-paper-200 rounded-lg shadow-sm p-4 ${className}`, children: jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [jsx("div", { className: "flex-1 flex flex-wrap gap-4", children: filters.map((filter) => (jsxs("div", { className: "flex flex-col space-y-1 min-w-[200px]", children: [jsx("label", { className: "label", children: filter.label }), renderFilter(filter)] }, filter.key))) }), showClearButton && (jsx("div", { className: "flex items-end", children: jsx(Button, { variant: "ghost", size: "md", onClick: handleClear, icon: jsx(X, { className: "h-4 w-4" }), iconPosition: "left", children: "Clear" }) }))] }) }));
|
|
2741
2784
|
}
|
|
2742
2785
|
|
|
2786
|
+
const variantClasses$4 = {
|
|
2787
|
+
primary: {
|
|
2788
|
+
default: 'bg-primary-100 text-primary-700 border-primary-200',
|
|
2789
|
+
hover: 'hover:bg-primary-200',
|
|
2790
|
+
close: 'hover:bg-primary-300 text-primary-600',
|
|
2791
|
+
selected: 'bg-primary-200 border-primary-400 ring-2 ring-primary-300',
|
|
2792
|
+
},
|
|
2793
|
+
secondary: {
|
|
2794
|
+
default: 'bg-ink-100 text-ink-700 border-ink-200',
|
|
2795
|
+
hover: 'hover:bg-ink-200',
|
|
2796
|
+
close: 'hover:bg-ink-300 text-ink-600',
|
|
2797
|
+
selected: 'bg-ink-200 border-ink-400 ring-2 ring-ink-300',
|
|
2798
|
+
},
|
|
2799
|
+
success: {
|
|
2800
|
+
default: 'bg-success-100 text-success-700 border-success-200',
|
|
2801
|
+
hover: 'hover:bg-success-200',
|
|
2802
|
+
close: 'hover:bg-success-300 text-success-600',
|
|
2803
|
+
selected: 'bg-success-200 border-success-400 ring-2 ring-success-300',
|
|
2804
|
+
},
|
|
2805
|
+
warning: {
|
|
2806
|
+
default: 'bg-warning-100 text-warning-700 border-warning-200',
|
|
2807
|
+
hover: 'hover:bg-warning-200',
|
|
2808
|
+
close: 'hover:bg-warning-300 text-warning-600',
|
|
2809
|
+
selected: 'bg-warning-200 border-warning-400 ring-2 ring-warning-300',
|
|
2810
|
+
},
|
|
2811
|
+
error: {
|
|
2812
|
+
default: 'bg-error-100 text-error-700 border-error-200',
|
|
2813
|
+
hover: 'hover:bg-error-200',
|
|
2814
|
+
close: 'hover:bg-error-300 text-error-600',
|
|
2815
|
+
selected: 'bg-error-200 border-error-400 ring-2 ring-error-300',
|
|
2816
|
+
},
|
|
2817
|
+
info: {
|
|
2818
|
+
default: 'bg-accent-100 text-accent-700 border-accent-200',
|
|
2819
|
+
hover: 'hover:bg-accent-200',
|
|
2820
|
+
close: 'hover:bg-accent-300 text-accent-600',
|
|
2821
|
+
selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
|
|
2822
|
+
},
|
|
2823
|
+
};
|
|
2824
|
+
const sizeClasses$b = {
|
|
2825
|
+
sm: {
|
|
2826
|
+
container: 'h-6 px-2 text-xs gap-1',
|
|
2827
|
+
icon: 'h-3 w-3',
|
|
2828
|
+
close: 'h-3 w-3 ml-1',
|
|
2829
|
+
},
|
|
2830
|
+
md: {
|
|
2831
|
+
container: 'h-7 px-2.5 text-sm gap-1.5',
|
|
2832
|
+
icon: 'h-3.5 w-3.5',
|
|
2833
|
+
close: 'h-3.5 w-3.5 ml-1.5',
|
|
2834
|
+
},
|
|
2835
|
+
lg: {
|
|
2836
|
+
container: 'h-8 px-3 text-base gap-2',
|
|
2837
|
+
icon: 'h-4 w-4',
|
|
2838
|
+
close: 'h-4 w-4 ml-2',
|
|
2839
|
+
},
|
|
2840
|
+
};
|
|
2841
|
+
const gapClasses = {
|
|
2842
|
+
xs: 'gap-1',
|
|
2843
|
+
sm: 'gap-1.5',
|
|
2844
|
+
md: 'gap-2',
|
|
2845
|
+
lg: 'gap-3',
|
|
2846
|
+
};
|
|
2847
|
+
/**
|
|
2848
|
+
* Chip - Compact element for displaying values with optional remove functionality
|
|
2849
|
+
*
|
|
2850
|
+
* @example Basic chip
|
|
2851
|
+
* ```tsx
|
|
2852
|
+
* <Chip>Tag Name</Chip>
|
|
2853
|
+
* ```
|
|
2854
|
+
*
|
|
2855
|
+
* @example Removable chip
|
|
2856
|
+
* ```tsx
|
|
2857
|
+
* <Chip onClose={() => removeTag(tag)}>
|
|
2858
|
+
* {tag.name}
|
|
2859
|
+
* </Chip>
|
|
2860
|
+
* ```
|
|
2861
|
+
*
|
|
2862
|
+
* @example With icon and selected state
|
|
2863
|
+
* ```tsx
|
|
2864
|
+
* <Chip
|
|
2865
|
+
* icon={<Star className="h-3 w-3" />}
|
|
2866
|
+
* selected={isSelected}
|
|
2867
|
+
* onClick={() => toggleSelection()}
|
|
2868
|
+
* >
|
|
2869
|
+
* Favorite
|
|
2870
|
+
* </Chip>
|
|
2871
|
+
* ```
|
|
2872
|
+
*/
|
|
2873
|
+
function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
|
|
2874
|
+
const variantStyle = variantClasses$4[variant];
|
|
2875
|
+
const sizeStyle = sizeClasses$b[size];
|
|
2876
|
+
const isClickable = !disabled && (onClick || onClose);
|
|
2877
|
+
return (jsxs("div", { className: `
|
|
2878
|
+
inline-flex items-center rounded-full border font-medium
|
|
2879
|
+
transition-colors
|
|
2880
|
+
${selected ? variantStyle.selected : variantStyle.default}
|
|
2881
|
+
${isClickable && !disabled && !selected ? variantStyle.hover : ''}
|
|
2882
|
+
${sizeStyle.container}
|
|
2883
|
+
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
|
2884
|
+
${onClick && !disabled ? 'cursor-pointer' : ''}
|
|
2885
|
+
${className}
|
|
2886
|
+
`, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, "aria-pressed": onClick ? selected : undefined, "data-chip-key": chipKey, style: { maxWidth: maxWidth || undefined }, children: [icon && (jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsx("span", { className: "truncate", children: children }), onClose && (jsx("button", { type: "button", onClick: (e) => {
|
|
2887
|
+
e.stopPropagation();
|
|
2888
|
+
if (!disabled)
|
|
2889
|
+
onClose();
|
|
2890
|
+
}, disabled: disabled, className: `
|
|
2891
|
+
flex-shrink-0 rounded-full transition-colors
|
|
2892
|
+
${variantStyle.close}
|
|
2893
|
+
${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
|
|
2894
|
+
${sizeStyle.close}
|
|
2895
|
+
`, "aria-label": "Remove", children: jsx(X, { className: "w-full h-full" }) }))] }));
|
|
2896
|
+
}
|
|
2897
|
+
/**
|
|
2898
|
+
* ChipGroup - Container for multiple chips with layout and selection support
|
|
2899
|
+
*
|
|
2900
|
+
* @example Basic group
|
|
2901
|
+
* ```tsx
|
|
2902
|
+
* <ChipGroup wrap gap="sm">
|
|
2903
|
+
* {tags.map(tag => (
|
|
2904
|
+
* <Chip key={tag.id} onClose={() => removeTag(tag)}>
|
|
2905
|
+
* {tag.name}
|
|
2906
|
+
* </Chip>
|
|
2907
|
+
* ))}
|
|
2908
|
+
* </ChipGroup>
|
|
2909
|
+
* ```
|
|
2910
|
+
*
|
|
2911
|
+
* @example Selectable group (single)
|
|
2912
|
+
* ```tsx
|
|
2913
|
+
* <ChipGroup
|
|
2914
|
+
* selectionMode="single"
|
|
2915
|
+
* selectedKeys={[selectedCategory]}
|
|
2916
|
+
* onSelectionChange={(keys) => setSelectedCategory(keys[0])}
|
|
2917
|
+
* >
|
|
2918
|
+
* <Chip chipKey="all">All</Chip>
|
|
2919
|
+
* <Chip chipKey="active">Active</Chip>
|
|
2920
|
+
* <Chip chipKey="archived">Archived</Chip>
|
|
2921
|
+
* </ChipGroup>
|
|
2922
|
+
* ```
|
|
2923
|
+
*
|
|
2924
|
+
* @example Multi-select group
|
|
2925
|
+
* ```tsx
|
|
2926
|
+
* <ChipGroup
|
|
2927
|
+
* selectionMode="multiple"
|
|
2928
|
+
* selectedKeys={selectedTags}
|
|
2929
|
+
* onSelectionChange={setSelectedTags}
|
|
2930
|
+
* wrap
|
|
2931
|
+
* >
|
|
2932
|
+
* {availableTags.map(tag => (
|
|
2933
|
+
* <Chip key={tag} chipKey={tag}>{tag}</Chip>
|
|
2934
|
+
* ))}
|
|
2935
|
+
* </ChipGroup>
|
|
2936
|
+
* ```
|
|
2937
|
+
*/
|
|
2938
|
+
function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm', selectionMode = 'none', selectedKeys = [], onSelectionChange, className = '', }) {
|
|
2939
|
+
const handleChipClick = (chipKey) => {
|
|
2940
|
+
if (selectionMode === 'none' || !onSelectionChange)
|
|
2941
|
+
return;
|
|
2942
|
+
if (selectionMode === 'single') {
|
|
2943
|
+
// Toggle single selection
|
|
2944
|
+
if (selectedKeys.includes(chipKey)) {
|
|
2945
|
+
onSelectionChange([]);
|
|
2946
|
+
}
|
|
2947
|
+
else {
|
|
2948
|
+
onSelectionChange([chipKey]);
|
|
2949
|
+
}
|
|
2950
|
+
}
|
|
2951
|
+
else if (selectionMode === 'multiple') {
|
|
2952
|
+
// Toggle in array
|
|
2953
|
+
if (selectedKeys.includes(chipKey)) {
|
|
2954
|
+
onSelectionChange(selectedKeys.filter(k => k !== chipKey));
|
|
2955
|
+
}
|
|
2956
|
+
else {
|
|
2957
|
+
onSelectionChange([...selectedKeys, chipKey]);
|
|
2958
|
+
}
|
|
2959
|
+
}
|
|
2960
|
+
};
|
|
2961
|
+
// Clone children to inject selection props
|
|
2962
|
+
const enhancedChildren = Children.map(children, (child) => {
|
|
2963
|
+
if (!isValidElement(child))
|
|
2964
|
+
return child;
|
|
2965
|
+
const chipKey = child.props.chipKey;
|
|
2966
|
+
if (!chipKey || selectionMode === 'none')
|
|
2967
|
+
return child;
|
|
2968
|
+
const isSelected = selectedKeys.includes(chipKey);
|
|
2969
|
+
return cloneElement(child, {
|
|
2970
|
+
...child.props,
|
|
2971
|
+
selected: isSelected,
|
|
2972
|
+
onClick: () => {
|
|
2973
|
+
// Call original onClick if exists
|
|
2974
|
+
if (child.props.onClick) {
|
|
2975
|
+
child.props.onClick();
|
|
2976
|
+
}
|
|
2977
|
+
handleChipClick(chipKey);
|
|
2978
|
+
},
|
|
2979
|
+
});
|
|
2980
|
+
});
|
|
2981
|
+
return (jsx("div", { className: `
|
|
2982
|
+
flex
|
|
2983
|
+
${direction === 'vertical' ? 'flex-col' : 'flex-row'}
|
|
2984
|
+
${wrap ? 'flex-wrap' : ''}
|
|
2985
|
+
${gapClasses[gap]}
|
|
2986
|
+
${className}
|
|
2987
|
+
`, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
|
|
2988
|
+
}
|
|
2989
|
+
|
|
2990
|
+
function FilterPills({ pills, onRemove, onClearAll, totalCount, className = '', }) {
|
|
2991
|
+
if (pills.length === 0)
|
|
2992
|
+
return null;
|
|
2993
|
+
return (jsxs("div", { className: `flex items-center gap-2 px-4 py-2 border-b border-paper-200 bg-paper-50 ${className}`, children: [jsx(Filter, { className: "h-3.5 w-3.5 text-ink-400 shrink-0" }), jsxs("div", { className: "flex items-center gap-1.5 flex-wrap flex-1", children: [pills.map((pill) => (jsxs(Chip, { size: "sm", variant: "primary", onClose: () => onRemove(pill.key), children: [pill.label, ": ", pill.displayValue] }, pill.key))), pills.length >= 2 && (jsx("button", { type: "button", onClick: onClearAll, className: "text-xs text-ink-500 hover:text-ink-700 underline underline-offset-2 ml-1", children: "Clear all" }))] }), totalCount !== undefined && (jsxs("span", { className: "text-xs text-ink-500 shrink-0 tabular-nums", children: [totalCount.toLocaleString(), " ", totalCount === 1 ? 'record' : 'records'] }))] }));
|
|
2994
|
+
}
|
|
2995
|
+
|
|
2996
|
+
const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
|
|
2997
|
+
function LetterNav({ activeLetter, onChange, availableLetters, className = '', }) {
|
|
2998
|
+
const hasAvailability = availableLetters && availableLetters.length > 0;
|
|
2999
|
+
const availableSet = hasAvailability
|
|
3000
|
+
? new Set(availableLetters.map((l) => l.toUpperCase()))
|
|
3001
|
+
: null;
|
|
3002
|
+
return (jsxs("div", { className: `flex items-center gap-0.5 px-4 py-1.5 border-b border-paper-200 bg-white overflow-x-auto ${className}`, children: [jsx("button", { type: "button", onClick: () => onChange(null), className: `px-2 py-1 text-xs font-medium rounded transition-colors ${activeLetter === null
|
|
3003
|
+
? 'bg-accent-500 text-white'
|
|
3004
|
+
: 'text-ink-600 hover:bg-paper-100'}`, children: "All" }), LETTERS.map((letter) => {
|
|
3005
|
+
const isActive = activeLetter === letter;
|
|
3006
|
+
const isAvailable = !availableSet || availableSet.has(letter);
|
|
3007
|
+
return (jsx("button", { type: "button", onClick: () => onChange(isActive ? null : letter), className: `w-7 h-7 text-xs font-medium rounded transition-colors ${isActive
|
|
3008
|
+
? 'bg-accent-500 text-white'
|
|
3009
|
+
: isAvailable
|
|
3010
|
+
? 'text-ink-600 hover:bg-paper-100'
|
|
3011
|
+
: 'text-ink-300'}`, children: letter }, letter));
|
|
3012
|
+
}), jsx("button", { type: "button", onClick: () => onChange(activeLetter === '#' ? null : '#'), className: `px-2 py-1 text-xs font-medium rounded transition-colors ${activeLetter === '#'
|
|
3013
|
+
? 'bg-accent-500 text-white'
|
|
3014
|
+
: 'text-ink-600 hover:bg-paper-100'}`, children: "#" })] }));
|
|
3015
|
+
}
|
|
3016
|
+
|
|
2743
3017
|
function Loading({ variant = 'spinner', size = 'md', text }) {
|
|
2744
3018
|
const sizeClasses = {
|
|
2745
3019
|
sm: 'h-4 w-4',
|
|
@@ -4590,7 +4864,7 @@ function BottomSheetActions({ children, className = '' }) {
|
|
|
4590
4864
|
|
|
4591
4865
|
// Selector for all focusable elements
|
|
4592
4866
|
const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
4593
|
-
const sizeClasses$
|
|
4867
|
+
const sizeClasses$a = {
|
|
4594
4868
|
sm: 'max-w-md',
|
|
4595
4869
|
md: 'max-w-lg',
|
|
4596
4870
|
lg: 'max-w-2xl',
|
|
@@ -4779,7 +5053,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
|
|
|
4779
5053
|
return createPortal(jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
|
|
4780
5054
|
}
|
|
4781
5055
|
// Render as standard modal on desktop
|
|
4782
|
-
const modalContent = (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: jsxs("div", { ref: modalRef, className: `${sizeClasses$
|
|
5056
|
+
const modalContent = (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: jsxs("div", { ref: modalRef, className: `${sizeClasses$a[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: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
|
|
4783
5057
|
maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
|
|
4784
5058
|
}, children: children })] }) }));
|
|
4785
5059
|
return createPortal(modalContent, document.body);
|
|
@@ -5850,7 +6124,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
|
|
|
5850
6124
|
return (jsx("div", { className: `rounded-lg border p-4 ${styles.container} ${className}`, role: "alert", children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "flex-shrink-0 mt-0.5", children: styles.icon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("h4", { className: "text-sm font-medium mb-1", children: title }), jsx("div", { className: "text-sm", children: children }), actions.length > 0 && (jsx("div", { className: "flex gap-2 mt-3", children: actions.map((action, index) => (jsx("button", { onClick: action.onClick, className: getButtonStyles(action.variant), children: action.label }, index))) }))] }), onClose && (jsx("button", { onClick: onClose, className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity", "aria-label": "Close alert", children: jsx(X, { className: "h-4 w-4" }) }))] }) }));
|
|
5851
6125
|
}
|
|
5852
6126
|
|
|
5853
|
-
const sizeClasses$
|
|
6127
|
+
const sizeClasses$9 = {
|
|
5854
6128
|
left: {
|
|
5855
6129
|
sm: 'w-64',
|
|
5856
6130
|
md: 'w-96',
|
|
@@ -5929,7 +6203,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
|
|
|
5929
6203
|
const isHorizontal = placement === 'left' || placement === 'right';
|
|
5930
6204
|
return (jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxs("div", { className: `
|
|
5931
6205
|
fixed ${placementClasses[placement]}
|
|
5932
|
-
${sizeClasses$
|
|
6206
|
+
${sizeClasses$9[placement][size]}
|
|
5933
6207
|
bg-white border-paper-200 shadow-2xl
|
|
5934
6208
|
${isHorizontal ? 'border-r' : 'border-b'}
|
|
5935
6209
|
${animationClasses[placement].enter}
|
|
@@ -6071,14 +6345,14 @@ function useConfirmDialog() {
|
|
|
6071
6345
|
};
|
|
6072
6346
|
}
|
|
6073
6347
|
|
|
6074
|
-
const sizeClasses$
|
|
6348
|
+
const sizeClasses$8 = {
|
|
6075
6349
|
sm: 'h-3.5 w-3.5',
|
|
6076
6350
|
md: 'h-4 w-4',
|
|
6077
6351
|
lg: 'h-5 w-5',
|
|
6078
6352
|
};
|
|
6079
6353
|
function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', className = '', }) {
|
|
6080
6354
|
const IconComponent = icon === 'info' ? Info : HelpCircle;
|
|
6081
|
-
return (jsx(Tooltip, { content: content, position: position, children: 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: jsx(IconComponent, { className: sizeClasses$
|
|
6355
|
+
return (jsx(Tooltip, { content: content, position: position, children: 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: jsx(IconComponent, { className: sizeClasses$8[size] }) }) }));
|
|
6082
6356
|
}
|
|
6083
6357
|
|
|
6084
6358
|
/**
|
|
@@ -8456,210 +8730,6 @@ function MenuDivider() {
|
|
|
8456
8730
|
return { divider: true, id: `divider-${Date.now()}`, label: '' };
|
|
8457
8731
|
}
|
|
8458
8732
|
|
|
8459
|
-
const variantClasses$4 = {
|
|
8460
|
-
primary: {
|
|
8461
|
-
default: 'bg-primary-100 text-primary-700 border-primary-200',
|
|
8462
|
-
hover: 'hover:bg-primary-200',
|
|
8463
|
-
close: 'hover:bg-primary-300 text-primary-600',
|
|
8464
|
-
selected: 'bg-primary-200 border-primary-400 ring-2 ring-primary-300',
|
|
8465
|
-
},
|
|
8466
|
-
secondary: {
|
|
8467
|
-
default: 'bg-ink-100 text-ink-700 border-ink-200',
|
|
8468
|
-
hover: 'hover:bg-ink-200',
|
|
8469
|
-
close: 'hover:bg-ink-300 text-ink-600',
|
|
8470
|
-
selected: 'bg-ink-200 border-ink-400 ring-2 ring-ink-300',
|
|
8471
|
-
},
|
|
8472
|
-
success: {
|
|
8473
|
-
default: 'bg-success-100 text-success-700 border-success-200',
|
|
8474
|
-
hover: 'hover:bg-success-200',
|
|
8475
|
-
close: 'hover:bg-success-300 text-success-600',
|
|
8476
|
-
selected: 'bg-success-200 border-success-400 ring-2 ring-success-300',
|
|
8477
|
-
},
|
|
8478
|
-
warning: {
|
|
8479
|
-
default: 'bg-warning-100 text-warning-700 border-warning-200',
|
|
8480
|
-
hover: 'hover:bg-warning-200',
|
|
8481
|
-
close: 'hover:bg-warning-300 text-warning-600',
|
|
8482
|
-
selected: 'bg-warning-200 border-warning-400 ring-2 ring-warning-300',
|
|
8483
|
-
},
|
|
8484
|
-
error: {
|
|
8485
|
-
default: 'bg-error-100 text-error-700 border-error-200',
|
|
8486
|
-
hover: 'hover:bg-error-200',
|
|
8487
|
-
close: 'hover:bg-error-300 text-error-600',
|
|
8488
|
-
selected: 'bg-error-200 border-error-400 ring-2 ring-error-300',
|
|
8489
|
-
},
|
|
8490
|
-
info: {
|
|
8491
|
-
default: 'bg-accent-100 text-accent-700 border-accent-200',
|
|
8492
|
-
hover: 'hover:bg-accent-200',
|
|
8493
|
-
close: 'hover:bg-accent-300 text-accent-600',
|
|
8494
|
-
selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
|
|
8495
|
-
},
|
|
8496
|
-
};
|
|
8497
|
-
const sizeClasses$8 = {
|
|
8498
|
-
sm: {
|
|
8499
|
-
container: 'h-6 px-2 text-xs gap-1',
|
|
8500
|
-
icon: 'h-3 w-3',
|
|
8501
|
-
close: 'h-3 w-3 ml-1',
|
|
8502
|
-
},
|
|
8503
|
-
md: {
|
|
8504
|
-
container: 'h-7 px-2.5 text-sm gap-1.5',
|
|
8505
|
-
icon: 'h-3.5 w-3.5',
|
|
8506
|
-
close: 'h-3.5 w-3.5 ml-1.5',
|
|
8507
|
-
},
|
|
8508
|
-
lg: {
|
|
8509
|
-
container: 'h-8 px-3 text-base gap-2',
|
|
8510
|
-
icon: 'h-4 w-4',
|
|
8511
|
-
close: 'h-4 w-4 ml-2',
|
|
8512
|
-
},
|
|
8513
|
-
};
|
|
8514
|
-
const gapClasses = {
|
|
8515
|
-
xs: 'gap-1',
|
|
8516
|
-
sm: 'gap-1.5',
|
|
8517
|
-
md: 'gap-2',
|
|
8518
|
-
lg: 'gap-3',
|
|
8519
|
-
};
|
|
8520
|
-
/**
|
|
8521
|
-
* Chip - Compact element for displaying values with optional remove functionality
|
|
8522
|
-
*
|
|
8523
|
-
* @example Basic chip
|
|
8524
|
-
* ```tsx
|
|
8525
|
-
* <Chip>Tag Name</Chip>
|
|
8526
|
-
* ```
|
|
8527
|
-
*
|
|
8528
|
-
* @example Removable chip
|
|
8529
|
-
* ```tsx
|
|
8530
|
-
* <Chip onClose={() => removeTag(tag)}>
|
|
8531
|
-
* {tag.name}
|
|
8532
|
-
* </Chip>
|
|
8533
|
-
* ```
|
|
8534
|
-
*
|
|
8535
|
-
* @example With icon and selected state
|
|
8536
|
-
* ```tsx
|
|
8537
|
-
* <Chip
|
|
8538
|
-
* icon={<Star className="h-3 w-3" />}
|
|
8539
|
-
* selected={isSelected}
|
|
8540
|
-
* onClick={() => toggleSelection()}
|
|
8541
|
-
* >
|
|
8542
|
-
* Favorite
|
|
8543
|
-
* </Chip>
|
|
8544
|
-
* ```
|
|
8545
|
-
*/
|
|
8546
|
-
function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
|
|
8547
|
-
const variantStyle = variantClasses$4[variant];
|
|
8548
|
-
const sizeStyle = sizeClasses$8[size];
|
|
8549
|
-
const isClickable = !disabled && (onClick || onClose);
|
|
8550
|
-
return (jsxs("div", { className: `
|
|
8551
|
-
inline-flex items-center rounded-full border font-medium
|
|
8552
|
-
transition-colors
|
|
8553
|
-
${selected ? variantStyle.selected : variantStyle.default}
|
|
8554
|
-
${isClickable && !disabled && !selected ? variantStyle.hover : ''}
|
|
8555
|
-
${sizeStyle.container}
|
|
8556
|
-
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
|
8557
|
-
${onClick && !disabled ? 'cursor-pointer' : ''}
|
|
8558
|
-
${className}
|
|
8559
|
-
`, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, "aria-pressed": onClick ? selected : undefined, "data-chip-key": chipKey, style: { maxWidth: maxWidth || undefined }, children: [icon && (jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsx("span", { className: "truncate", children: children }), onClose && (jsx("button", { type: "button", onClick: (e) => {
|
|
8560
|
-
e.stopPropagation();
|
|
8561
|
-
if (!disabled)
|
|
8562
|
-
onClose();
|
|
8563
|
-
}, disabled: disabled, className: `
|
|
8564
|
-
flex-shrink-0 rounded-full transition-colors
|
|
8565
|
-
${variantStyle.close}
|
|
8566
|
-
${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
|
|
8567
|
-
${sizeStyle.close}
|
|
8568
|
-
`, "aria-label": "Remove", children: jsx(X, { className: "w-full h-full" }) }))] }));
|
|
8569
|
-
}
|
|
8570
|
-
/**
|
|
8571
|
-
* ChipGroup - Container for multiple chips with layout and selection support
|
|
8572
|
-
*
|
|
8573
|
-
* @example Basic group
|
|
8574
|
-
* ```tsx
|
|
8575
|
-
* <ChipGroup wrap gap="sm">
|
|
8576
|
-
* {tags.map(tag => (
|
|
8577
|
-
* <Chip key={tag.id} onClose={() => removeTag(tag)}>
|
|
8578
|
-
* {tag.name}
|
|
8579
|
-
* </Chip>
|
|
8580
|
-
* ))}
|
|
8581
|
-
* </ChipGroup>
|
|
8582
|
-
* ```
|
|
8583
|
-
*
|
|
8584
|
-
* @example Selectable group (single)
|
|
8585
|
-
* ```tsx
|
|
8586
|
-
* <ChipGroup
|
|
8587
|
-
* selectionMode="single"
|
|
8588
|
-
* selectedKeys={[selectedCategory]}
|
|
8589
|
-
* onSelectionChange={(keys) => setSelectedCategory(keys[0])}
|
|
8590
|
-
* >
|
|
8591
|
-
* <Chip chipKey="all">All</Chip>
|
|
8592
|
-
* <Chip chipKey="active">Active</Chip>
|
|
8593
|
-
* <Chip chipKey="archived">Archived</Chip>
|
|
8594
|
-
* </ChipGroup>
|
|
8595
|
-
* ```
|
|
8596
|
-
*
|
|
8597
|
-
* @example Multi-select group
|
|
8598
|
-
* ```tsx
|
|
8599
|
-
* <ChipGroup
|
|
8600
|
-
* selectionMode="multiple"
|
|
8601
|
-
* selectedKeys={selectedTags}
|
|
8602
|
-
* onSelectionChange={setSelectedTags}
|
|
8603
|
-
* wrap
|
|
8604
|
-
* >
|
|
8605
|
-
* {availableTags.map(tag => (
|
|
8606
|
-
* <Chip key={tag} chipKey={tag}>{tag}</Chip>
|
|
8607
|
-
* ))}
|
|
8608
|
-
* </ChipGroup>
|
|
8609
|
-
* ```
|
|
8610
|
-
*/
|
|
8611
|
-
function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm', selectionMode = 'none', selectedKeys = [], onSelectionChange, className = '', }) {
|
|
8612
|
-
const handleChipClick = (chipKey) => {
|
|
8613
|
-
if (selectionMode === 'none' || !onSelectionChange)
|
|
8614
|
-
return;
|
|
8615
|
-
if (selectionMode === 'single') {
|
|
8616
|
-
// Toggle single selection
|
|
8617
|
-
if (selectedKeys.includes(chipKey)) {
|
|
8618
|
-
onSelectionChange([]);
|
|
8619
|
-
}
|
|
8620
|
-
else {
|
|
8621
|
-
onSelectionChange([chipKey]);
|
|
8622
|
-
}
|
|
8623
|
-
}
|
|
8624
|
-
else if (selectionMode === 'multiple') {
|
|
8625
|
-
// Toggle in array
|
|
8626
|
-
if (selectedKeys.includes(chipKey)) {
|
|
8627
|
-
onSelectionChange(selectedKeys.filter(k => k !== chipKey));
|
|
8628
|
-
}
|
|
8629
|
-
else {
|
|
8630
|
-
onSelectionChange([...selectedKeys, chipKey]);
|
|
8631
|
-
}
|
|
8632
|
-
}
|
|
8633
|
-
};
|
|
8634
|
-
// Clone children to inject selection props
|
|
8635
|
-
const enhancedChildren = Children.map(children, (child) => {
|
|
8636
|
-
if (!isValidElement(child))
|
|
8637
|
-
return child;
|
|
8638
|
-
const chipKey = child.props.chipKey;
|
|
8639
|
-
if (!chipKey || selectionMode === 'none')
|
|
8640
|
-
return child;
|
|
8641
|
-
const isSelected = selectedKeys.includes(chipKey);
|
|
8642
|
-
return cloneElement(child, {
|
|
8643
|
-
...child.props,
|
|
8644
|
-
selected: isSelected,
|
|
8645
|
-
onClick: () => {
|
|
8646
|
-
// Call original onClick if exists
|
|
8647
|
-
if (child.props.onClick) {
|
|
8648
|
-
child.props.onClick();
|
|
8649
|
-
}
|
|
8650
|
-
handleChipClick(chipKey);
|
|
8651
|
-
},
|
|
8652
|
-
});
|
|
8653
|
-
});
|
|
8654
|
-
return (jsx("div", { className: `
|
|
8655
|
-
flex
|
|
8656
|
-
${direction === 'vertical' ? 'flex-col' : 'flex-row'}
|
|
8657
|
-
${wrap ? 'flex-wrap' : ''}
|
|
8658
|
-
${gapClasses[gap]}
|
|
8659
|
-
${className}
|
|
8660
|
-
`, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
|
|
8661
|
-
}
|
|
8662
|
-
|
|
8663
8733
|
const sizeClasses$7 = {
|
|
8664
8734
|
sm: {
|
|
8665
8735
|
item: 'py-1.5 px-2',
|
|
@@ -11779,7 +11849,7 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
|
|
|
11779
11849
|
}) })] }));
|
|
11780
11850
|
}
|
|
11781
11851
|
|
|
11782
|
-
function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = true, maxPageNumbers = 5, showPageJump = false, }) {
|
|
11852
|
+
function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = true, maxPageNumbers = 5, showPageJump = false, totalItems, pageSize, pageSizeOptions, onPageSizeChange, showRecordCount = false, }) {
|
|
11783
11853
|
const [jumpValue, setJumpValue] = useState('');
|
|
11784
11854
|
const getPageNumbers = () => {
|
|
11785
11855
|
const pages = [];
|
|
@@ -11820,16 +11890,20 @@ function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = t
|
|
|
11820
11890
|
setJumpValue('');
|
|
11821
11891
|
}
|
|
11822
11892
|
};
|
|
11823
|
-
|
|
11824
|
-
|
|
11825
|
-
|
|
11826
|
-
|
|
11827
|
-
|
|
11828
|
-
|
|
11829
|
-
|
|
11830
|
-
|
|
11831
|
-
|
|
11832
|
-
|
|
11893
|
+
const showLeftSection = showRecordCount && totalItems !== undefined && pageSize;
|
|
11894
|
+
const showRightSection = onPageSizeChange && pageSizeOptions && pageSizeOptions.length > 0;
|
|
11895
|
+
const rangeStart = totalItems ? (currentPage - 1) * (pageSize || 0) + 1 : 0;
|
|
11896
|
+
const rangeEnd = totalItems ? Math.min(currentPage * (pageSize || 0), totalItems) : 0;
|
|
11897
|
+
return (jsxs("nav", { className: `flex items-center gap-2 ${showLeftSection || showRightSection ? 'justify-between' : 'justify-center'}`, "aria-label": "Pagination", children: [showLeftSection ? (jsxs("span", { className: "text-sm text-ink-500 tabular-nums shrink-0", children: ["Showing ", rangeStart.toLocaleString(), "\u2013", rangeEnd.toLocaleString(), " of ", totalItems.toLocaleString()] })) : showRightSection ? jsx("div", {}) : null, jsxs("div", { className: "flex items-center gap-2", children: [jsxs("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Previous page", children: [jsx(ChevronLeft, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: "Previous" })] }), showPageNumbers && (jsx("div", { className: "flex items-center gap-1", children: pageNumbers.map((page, index) => {
|
|
11898
|
+
if (page === '...') {
|
|
11899
|
+
return (jsx("span", { className: "px-3 py-2 text-ink-500", children: "..." }, `ellipsis-${index}`));
|
|
11900
|
+
}
|
|
11901
|
+
const pageNum = page;
|
|
11902
|
+
const isActive = pageNum === currentPage;
|
|
11903
|
+
return (jsx("button", { onClick: () => onPageChange(pageNum), className: `px-3 py-2 text-sm font-medium rounded-lg transition-all ${isActive
|
|
11904
|
+
? 'bg-accent-500 text-white shadow-sm'
|
|
11905
|
+
: 'text-ink-700 bg-white border border-paper-300 hover:bg-paper-50 hover:border-paper-400'}`, "aria-label": `Page ${pageNum}`, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
|
|
11906
|
+
}) })), jsxs("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Next page", children: [jsx("span", { className: "hidden sm:inline", children: "Next" }), jsx(ChevronRight, { className: "h-4 w-4" })] }), showPageJump && (jsxs("form", { onSubmit: handlePageJump, className: "flex items-center gap-2 ml-2", children: [jsx("span", { className: "text-sm text-ink-600 hidden sm:inline", children: "Go to:" }), jsx("input", { type: "number", min: "1", max: totalPages, value: jumpValue, onChange: (e) => setJumpValue(e.target.value), placeholder: "#", className: "w-16 px-2 py-1.5 text-sm text-center border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", "aria-label": "Jump to page" }), jsx("button", { type: "submit", disabled: !jumpValue, className: "px-3 py-1.5 text-sm font-medium text-white bg-accent-500 rounded-lg hover:bg-accent-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: "Go" })] }))] }), showRightSection ? (jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [jsx("span", { className: "text-sm text-ink-500 hidden sm:inline", children: "Per page:" }), jsx("select", { value: pageSize || pageSizeOptions[0], onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "px-2 py-1.5 text-sm border border-paper-300 rounded-lg bg-white text-ink-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 cursor-pointer", "aria-label": "Items per page", children: pageSizeOptions.map((size) => (jsx("option", { value: size, children: size }, size))) })] })) : showLeftSection ? jsx("div", {}) : null] }));
|
|
11833
11907
|
}
|
|
11834
11908
|
|
|
11835
11909
|
function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick, }) {
|
|
@@ -15686,52 +15760,44 @@ function getAugmentedNamespace(n) {
|
|
|
15686
15760
|
* (A1, A1:C5, ...)
|
|
15687
15761
|
*/
|
|
15688
15762
|
|
|
15689
|
-
|
|
15690
|
-
var hasRequiredCollection;
|
|
15691
|
-
|
|
15692
|
-
function requireCollection () {
|
|
15693
|
-
if (hasRequiredCollection) return collection;
|
|
15694
|
-
hasRequiredCollection = 1;
|
|
15695
|
-
class Collection {
|
|
15763
|
+
let Collection$3 = class Collection {
|
|
15696
15764
|
|
|
15697
|
-
|
|
15698
|
-
|
|
15699
|
-
|
|
15700
|
-
|
|
15701
|
-
|
|
15702
|
-
|
|
15703
|
-
|
|
15704
|
-
|
|
15705
|
-
|
|
15706
|
-
|
|
15707
|
-
|
|
15765
|
+
constructor(data, refs) {
|
|
15766
|
+
if (data == null && refs == null) {
|
|
15767
|
+
this._data = [];
|
|
15768
|
+
this._refs = [];
|
|
15769
|
+
} else {
|
|
15770
|
+
if (data.length !== refs.length)
|
|
15771
|
+
throw Error('Collection: data length should match references length.');
|
|
15772
|
+
this._data = data;
|
|
15773
|
+
this._refs = refs;
|
|
15774
|
+
}
|
|
15775
|
+
}
|
|
15708
15776
|
|
|
15709
|
-
|
|
15710
|
-
|
|
15711
|
-
|
|
15777
|
+
get data() {
|
|
15778
|
+
return this._data;
|
|
15779
|
+
}
|
|
15712
15780
|
|
|
15713
|
-
|
|
15714
|
-
|
|
15715
|
-
|
|
15781
|
+
get refs() {
|
|
15782
|
+
return this._refs;
|
|
15783
|
+
}
|
|
15716
15784
|
|
|
15717
|
-
|
|
15718
|
-
|
|
15719
|
-
|
|
15785
|
+
get length() {
|
|
15786
|
+
return this._data.length;
|
|
15787
|
+
}
|
|
15720
15788
|
|
|
15721
|
-
|
|
15722
|
-
|
|
15723
|
-
|
|
15724
|
-
|
|
15725
|
-
|
|
15726
|
-
|
|
15727
|
-
|
|
15728
|
-
|
|
15729
|
-
|
|
15730
|
-
|
|
15789
|
+
/**
|
|
15790
|
+
* Add data and references to this collection.
|
|
15791
|
+
* @param {{}} obj - data
|
|
15792
|
+
* @param {{}} ref - reference
|
|
15793
|
+
*/
|
|
15794
|
+
add(obj, ref) {
|
|
15795
|
+
this._data.push(obj);
|
|
15796
|
+
this._refs.push(ref);
|
|
15797
|
+
}
|
|
15798
|
+
};
|
|
15731
15799
|
|
|
15732
|
-
|
|
15733
|
-
return collection;
|
|
15734
|
-
}
|
|
15800
|
+
var collection = Collection$3;
|
|
15735
15801
|
|
|
15736
15802
|
var helpers;
|
|
15737
15803
|
var hasRequiredHelpers;
|
|
@@ -15740,7 +15806,7 @@ function requireHelpers () {
|
|
|
15740
15806
|
if (hasRequiredHelpers) return helpers;
|
|
15741
15807
|
hasRequiredHelpers = 1;
|
|
15742
15808
|
const FormulaError = requireError();
|
|
15743
|
-
const Collection =
|
|
15809
|
+
const Collection = collection;
|
|
15744
15810
|
|
|
15745
15811
|
const Types = {
|
|
15746
15812
|
NUMBER: 0,
|
|
@@ -25394,7 +25460,7 @@ var engineering = EngineeringFunctions;
|
|
|
25394
25460
|
|
|
25395
25461
|
const FormulaError$b = requireError();
|
|
25396
25462
|
const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
|
|
25397
|
-
const Collection$2 =
|
|
25463
|
+
const Collection$2 = collection;
|
|
25398
25464
|
const H$5 = FormulaHelpers$8;
|
|
25399
25465
|
|
|
25400
25466
|
const ReferenceFunctions$1 = {
|
|
@@ -37022,7 +37088,7 @@ var parsing = {
|
|
|
37022
37088
|
const FormulaError$4 = requireError();
|
|
37023
37089
|
const {Address: Address$1} = requireHelpers();
|
|
37024
37090
|
const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
|
|
37025
|
-
const Collection$1 =
|
|
37091
|
+
const Collection$1 = collection;
|
|
37026
37092
|
const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
|
|
37027
37093
|
const {NotAllInputParsedException} = require$$4;
|
|
37028
37094
|
|
|
@@ -37784,7 +37850,7 @@ var hooks$1 = {
|
|
|
37784
37850
|
const FormulaError$2 = requireError();
|
|
37785
37851
|
const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
|
|
37786
37852
|
const {Prefix, Postfix, Infix, Operators} = operators;
|
|
37787
|
-
const Collection =
|
|
37853
|
+
const Collection = collection;
|
|
37788
37854
|
const MAX_ROW = 1048576, MAX_COLUMN = 16384;
|
|
37789
37855
|
|
|
37790
37856
|
let Utils$1 = class Utils {
|
|
@@ -62742,5 +62808,5 @@ const InsightsPanelUI = forwardRef(({ insights, isLoading = false, filter = 'all
|
|
|
62742
62808
|
});
|
|
62743
62809
|
InsightsPanelUI.displayName = 'InsightsPanelUI';
|
|
62744
62810
|
|
|
62745
|
-
export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActionCard, ActivityFeed, AdminModal, Alert, AlertDialog, AnomalyBanner, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, CaseQueueItem, Celebration, ChatUI, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfidenceBadge, ConfidenceIndicator, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, EntityCard, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, FunnelChart, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InsightsPanelUI, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, MatchIndicator, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, PersonaDashboard, PivotTable, Popover, PriorityAlertBanner, ProcessHealthBar, ProcessIndicator, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, ReviewDecisionCard, RichTextEditor, SLAIndicator, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, SkipLink, Slider, SplitPane, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, SystemActionEntry, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, VarianceDisplay, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
|
|
62811
|
+
export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActionCard, ActivityFeed, AdminModal, Alert, AlertDialog, AnomalyBanner, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, CaseQueueItem, Celebration, ChatUI, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfidenceBadge, ConfidenceIndicator, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, EntityCard, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterPills, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, FunnelChart, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InsightsPanelUI, InviteCard, KanbanBoard, Layout, LetterNav, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, MatchIndicator, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, PersonaDashboard, PivotTable, Popover, PriorityAlertBanner, ProcessHealthBar, ProcessIndicator, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, ReviewDecisionCard, RichTextEditor, SLAIndicator, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, SkipLink, Slider, SplitPane, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, SystemActionEntry, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, VarianceDisplay, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
|
|
62746
62812
|
//# sourceMappingURL=index.esm.js.map
|