@orianatech/pire 0.2.1 → 0.4.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/README.md +43 -5
- package/dist/components/core/Icon.d.cts +22 -7
- package/dist/components/core/Icon.d.ts +22 -7
- package/dist/components/core/Icon.d.ts.map +1 -1
- package/dist/components/core/icon-data.generated.d.cts +1 -0
- package/dist/components/core/icon-data.generated.d.ts +2 -0
- package/dist/components/core/icon-data.generated.d.ts.map +1 -0
- package/dist/components/core/icon-map.d.cts +13 -0
- package/dist/components/core/icon-map.d.ts +14 -0
- package/dist/components/core/icon-map.d.ts.map +1 -0
- package/dist/components/feedback/Skeleton.d.cts +43 -0
- package/dist/components/feedback/Skeleton.d.ts +44 -0
- package/dist/components/feedback/Skeleton.d.ts.map +1 -0
- package/dist/components/forms/MultiComboBox.d.cts +58 -0
- package/dist/components/forms/MultiComboBox.d.ts +59 -0
- package/dist/components/forms/MultiComboBox.d.ts.map +1 -0
- package/dist/components/forms/TextArea.d.cts +42 -0
- package/dist/components/forms/TextArea.d.ts +43 -0
- package/dist/components/forms/TextArea.d.ts.map +1 -0
- package/dist/components/navigation/ShellBar.d.cts +8 -1
- package/dist/components/navigation/ShellBar.d.ts +8 -1
- package/dist/components/navigation/ShellBar.d.ts.map +1 -1
- package/dist/components/navigation/SideNav.d.cts +56 -4
- package/dist/components/navigation/SideNav.d.ts +56 -4
- package/dist/components/navigation/SideNav.d.ts.map +1 -1
- package/dist/components.css +73 -1
- package/dist/index.cjs +806 -353
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +809 -347
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
package/dist/index.cjs
CHANGED
|
@@ -42,26 +42,27 @@ __export(src_exports, {
|
|
|
42
42
|
DatePicker: () => DatePicker,
|
|
43
43
|
DescriptionList: () => DescriptionList,
|
|
44
44
|
Dialog: () => Dialog,
|
|
45
|
-
DialogTrigger: () =>
|
|
45
|
+
DialogTrigger: () => import_react_aria_components25.DialogTrigger,
|
|
46
46
|
EmptyState: () => EmptyState,
|
|
47
47
|
FilterBar: () => FilterBar,
|
|
48
48
|
FooterBar: () => FooterBar,
|
|
49
49
|
FormField: () => FormField,
|
|
50
|
-
I18nProvider: () =>
|
|
50
|
+
I18nProvider: () => import_react_aria_components25.I18nProvider,
|
|
51
51
|
Icon: () => Icon,
|
|
52
52
|
IconButton: () => IconButton,
|
|
53
53
|
InlineMessage: () => InlineMessage,
|
|
54
54
|
Input: () => Input,
|
|
55
55
|
KpiTile: () => KpiTile,
|
|
56
56
|
LinkList: () => LinkList,
|
|
57
|
-
Menu: () =>
|
|
58
|
-
MenuItem: () =>
|
|
59
|
-
MenuTrigger: () =>
|
|
57
|
+
Menu: () => import_react_aria_components25.Menu,
|
|
58
|
+
MenuItem: () => import_react_aria_components25.MenuItem,
|
|
59
|
+
MenuTrigger: () => import_react_aria_components25.MenuTrigger,
|
|
60
|
+
MultiComboBox: () => MultiComboBox,
|
|
60
61
|
NumberField: () => NumberField,
|
|
61
62
|
ObjectHeader: () => ObjectHeader,
|
|
62
63
|
PageHeader: () => PageHeader,
|
|
63
64
|
Pagination: () => Pagination,
|
|
64
|
-
Popover: () =>
|
|
65
|
+
Popover: () => import_react_aria_components25.Popover,
|
|
65
66
|
ProgressBar: () => ProgressBar,
|
|
66
67
|
Radio: () => Radio,
|
|
67
68
|
RadioGroup: () => RadioGroup,
|
|
@@ -69,13 +70,16 @@ __export(src_exports, {
|
|
|
69
70
|
SegmentedControl: () => SegmentedControl,
|
|
70
71
|
Select: () => Select,
|
|
71
72
|
SelectionBar: () => SelectionBar,
|
|
72
|
-
Separator: () =>
|
|
73
|
+
Separator: () => import_react_aria_components25.Separator,
|
|
73
74
|
ShellBar: () => ShellBar,
|
|
74
75
|
SideNav: () => SideNav,
|
|
75
76
|
SidePanel: () => SidePanel,
|
|
77
|
+
Skeleton: () => Skeleton,
|
|
78
|
+
SkeletonTableRow: () => SkeletonTableRow,
|
|
76
79
|
Switch: () => Switch,
|
|
77
80
|
Tabs: () => Tabs,
|
|
78
81
|
Tag: () => Tag,
|
|
82
|
+
TextArea: () => TextArea,
|
|
79
83
|
Timeline: () => Timeline,
|
|
80
84
|
Toast: () => Toast,
|
|
81
85
|
ToastProvider: () => ToastProvider,
|
|
@@ -87,9 +91,74 @@ __export(src_exports, {
|
|
|
87
91
|
});
|
|
88
92
|
module.exports = __toCommonJS(src_exports);
|
|
89
93
|
|
|
90
|
-
// src/components/core/
|
|
91
|
-
var
|
|
92
|
-
|
|
94
|
+
// src/components/core/icon-data.generated.ts
|
|
95
|
+
var ICON_MARKUP = {
|
|
96
|
+
"add": '<path d="M17 15 17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"/>',
|
|
97
|
+
"apps": '<path d="M8,4V8H4V4Zm2-2H2v8h8Zm8,2V8H14V4Zm2-2H12v8h8Zm8,2V8H24V4Zm2-2H22v8h8ZM8,14v4H4V14Zm2-2H2v8h8Zm8,2v4H14V14Zm2-2H12v8h8Zm8,2v4H24V14Zm2-2H22v8h8ZM8,24v4H4V24Zm2-2H2v8h8Zm8,2v4H14V24Zm2-2H12v8h8Zm8,2v4H24V24Zm2-2H22v8h8Z"/>',
|
|
98
|
+
"arrow--down": '<path d="M24.59 16.59 17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z"/>',
|
|
99
|
+
"arrow--right": '<path d="M18 6 16.57 7.393 24.15 15 4 15 4 17 24.15 17 16.57 24.573 18 26 28 16 18 6z"/>',
|
|
100
|
+
"arrow--up": '<path d="M16 4 6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"/>',
|
|
101
|
+
"arrows--vertical": '<path d="M27.6 20.6 24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22z"/><path d="M9 4 3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"/>',
|
|
102
|
+
"attachment": '<path d="M28.1,18.9L13.1,3.9c-2.5-2.6-6.6-2.6-9.2-0.1S1.3,10.5,3.9,13c0,0,0.1,0.1,0.1,0.1L6.8,16l1.4-1.4l-2.9-2.9 C3.6,10,3.6,7.1,5.3,5.4s4.6-1.8,6.3-0.1c0,0,0,0,0.1,0.1l14.9,14.9c1.8,1.7,1.8,4.6,0.1,6.3c-1.7,1.8-4.6,1.8-6.3,0.1 c0,0,0,0-0.1-0.1l-7.4-7.4c-1-1-0.9-2.6,0-3.5c1-0.9,2.5-0.9,3.5,0l4.1,4.1l1.4-1.4c0,0-4.2-4.2-4.2-4.2c-1.8-1.7-4.6-1.6-6.3,0.2 c-1.6,1.7-1.6,4.4,0,6.2l7.5,7.5c2.5,2.6,6.6,2.6,9.2,0.1S30.7,21.5,28.1,18.9C28.1,19,28.1,18.9,28.1,18.9L28.1,18.9z"/>',
|
|
103
|
+
"box": '<path d="M20,21H12a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h8a2,2,0,0,1,2,2v2A2,2,0,0,1,20,21Zm-8-4v2h8V17Z"/><path d="M28,4H4A2,2,0,0,0,2,6v4a2,2,0,0,0,2,2V28a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V12a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4ZM26,28H6V12H26Zm2-18H4V6H28v4Z"/>',
|
|
104
|
+
"building": '<path d="M28,2H16a2.002,2.002,0,0,0-2,2V14H4a2.002,2.002,0,0,0-2,2V30H30V4A2.0023,2.0023,0,0,0,28,2ZM9,28V21h4v7Zm19,0H15V20a1,1,0,0,0-1-1H8a1,1,0,0,0-1,1v8H4V16H16V4H28Z"/><path d="M18 8H20V10H18z"/><path d="M24 8H26V10H24z"/><path d="M18 14H20V16H18z"/><path d="M24 14H26V16H24z"/><path d="M18 20H20V22H18z"/><path d="M24 20H26V22H24z"/>',
|
|
105
|
+
"building--insights-1": '<path d="M28,2H16a2.002,2.002,0,0,0-2,2V14H4a2.002,2.002,0,0,0-2,2V30H30V4A2.0023,2.0023,0,0,0,28,2ZM9,28V21h4v7Zm19,0H15V20a1,1,0,0,0-1-1H8a1,1,0,0,0-1,1v8H4V16H16V4H28Z"/><path d="M18 8H20V10H18z"/><path d="M24 8H26V10H24z"/><path d="M18 14H20V16H18z"/><path d="M24 14H26V16H24z"/><path d="M18 20H20V22H18z"/><path d="M24 20H26V22H24z"/><path d="M9,12H7a5.0059,5.0059,0,0,1,5-5V9A3.0033,3.0033,0,0,0,9,12Z"/><path d="M4,12H2A10.0114,10.0114,0,0,1,12,2V4A8.0092,8.0092,0,0,0,4,12Z"/>',
|
|
106
|
+
"calculator": '<path d="M26,4V28H6V4H26m0-2H6A2,2,0,0,0,4,4V28a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V4A2,2,0,0,0,26,2Z"/><path d="M9 23H11V25H9z"/><path d="M21 23H23V25H21z"/><path d="M9 18H11V20H9z"/><path d="M21 18H23V20H21z"/><path d="M9 13H11V15H9z"/><path d="M15 23H17V25H15z"/><path d="M15 18H17V20H15z"/><path d="M15 13H17V15H15z"/><path d="M21 13H23V15H21z"/><path d="M9 7H23V10H9z"/>',
|
|
107
|
+
"calendar": '<path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"/>',
|
|
108
|
+
"checkmark": '<path d="M13 24 4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"/>',
|
|
109
|
+
"checkmark--filled": '<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"/><path fill="none" d="M14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591z" data-icon-path="inner-path"/>',
|
|
110
|
+
"checkmark--outline": '<path d="M14 21.414 9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"/><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/>',
|
|
111
|
+
"chevron--down": '<path d="M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"/>',
|
|
112
|
+
"chevron--left": '<path d="M10 16 20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"/>',
|
|
113
|
+
"chevron--right": '<path d="M22 16 12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"/>',
|
|
114
|
+
"chevron--sort": '<path d="M16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28z"/><path d="M16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4z"/>',
|
|
115
|
+
"circle-dash": '<path d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"/><path d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"/><path d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"/><path d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"/><path d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"/><path d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"/><path d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"/><path d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"/><path d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"/><path d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"/>',
|
|
116
|
+
"close": '<path d="M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"/>',
|
|
117
|
+
"color-palette": '<circle cx="10" cy="12" r="2"/><circle cx="16" cy="9" r="2"/><circle cx="22" cy="12" r="2"/><circle cx="23" cy="18" r="2"/><circle cx="19" cy="23" r="2"/><path d="M16.54,2A14,14,0,0,0,2,16a4.82,4.82,0,0,0,6.09,4.65l1.12-.31A3,3,0,0,1,13,23.24V27a3,3,0,0,0,3,3A14,14,0,0,0,30,15.46,14.05,14.05,0,0,0,16.54,2Zm8.11,22.31A11.93,11.93,0,0,1,16,28a1,1,0,0,1-1-1V23.24a5,5,0,0,0-5-5,5.07,5.07,0,0,0-1.33.18l-1.12.31A2.82,2.82,0,0,1,4,16,12,12,0,0,1,16.47,4,12.18,12.18,0,0,1,28,15.53,11.89,11.89,0,0,1,24.65,24.32Z"/>',
|
|
118
|
+
"copy": '<path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"/><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"/>',
|
|
119
|
+
"delivery-truck": '<path d="M29.92,16.61l-3-7A1,1,0,0,0,26,9H23V7a1,1,0,0,0-1-1H3A1,1,0,0,0,2,7V24a1,1,0,0,0,1,1H5.14a4,4,0,0,0,7.72,0h6.28a4,4,0,0,0,7.72,0H29a1,1,0,0,0,1-1V17A1,1,0,0,0,29.92,16.61ZM23,11h2.34l2.14,5H23ZM9,26a2,2,0,1,1,2-2A2,2,0,0,1,9,26Zm10.14-3H12.86a4,4,0,0,0-7.72,0H4V8H21V20.56A4,4,0,0,0,19.14,23ZM23,26a2,2,0,1,1,2-2A2,2,0,0,1,23,26Zm5-3H26.86A4,4,0,0,0,23,20V18h5Z"/>',
|
|
120
|
+
"document": '<path d="M25.7,9.3l-7-7C18.5,2.1,18.3,2,18,2H8C6.9,2,6,2.9,6,4v24c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V10C26,9.7,25.9,9.5,25.7,9.3 z M18,4.4l5.6,5.6H18V4.4z M24,28H8V4h8v6c0,1.1,0.9,2,2,2h6V28z"/><path d="M10 22H22V24H10z"/><path d="M10 16H22V18H10z"/>',
|
|
121
|
+
"download": '<path d="M26,24v4H6V24H4v4H4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2h0V24Z"/><path d="M26 14 24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"/>',
|
|
122
|
+
"edit": '<path d="M2 26H30V28H2z"/><path d="M25.4,9c0.8-0.8,0.8-2,0-2.8c0,0,0,0,0,0l-3.6-3.6c-0.8-0.8-2-0.8-2.8,0c0,0,0,0,0,0l-15,15V24h6.4L25.4,9z M20.4,4L24,7.6 l-3,3L17.4,7L20.4,4z M6,22v-3.6l10-10l3.6,3.6l-10,10H6z"/>',
|
|
123
|
+
"error--filled": '<path fill="none" d="M14.9 7.2H17.1V24.799H14.9z" data-icon-path="inner-path" transform="rotate(-45 16 16)"/><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/>',
|
|
124
|
+
"filter": '<path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"/>',
|
|
125
|
+
"flash": '<path d="M11.61,29.92a1,1,0,0,1-.6-1.07L12.83,17H8a1,1,0,0,1-1-1.23l3-13A1,1,0,0,1,11,2H21a1,1,0,0,1,.78.37,1,1,0,0,1,.2.85L20.25,11H25a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1l-13,17A1,1,0,0,1,12,30,1.09,1.09,0,0,1,11.61,29.92ZM17.75,13l2-9H11.8L9.26,15h5.91L13.58,25.28,23,13Z"/>',
|
|
126
|
+
"grid": '<path d="M12,4H6A2,2,0,0,0,4,6v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V6A2,2,0,0,0,12,4Zm0,8H6V6h6Z"/><path d="M26,4H20a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Zm0,8H20V6h6Z"/><path d="M12,18H6a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V20A2,2,0,0,0,12,18Zm0,8H6V20h6Z"/><path d="M26,18H20a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V20A2,2,0,0,0,26,18Zm0,8H20V20h6Z"/>',
|
|
127
|
+
"hashtag": '<path d="M28,12V10H22V4H20v6H12V4H10v6H4v2h6v8H4v2h6v6h2V22h8v6h2V22h6V20H22V12Zm-8,8H12V12h8Z"/>',
|
|
128
|
+
"help": '<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><circle cx="16" cy="23.5" r="1.5"/><path d="M17,8H15.5A4.49,4.49,0,0,0,11,12.5V13h2v-.5A2.5,2.5,0,0,1,15.5,10H17a2.5,2.5,0,0,1,0,5H15v4.5h2V17a4.5,4.5,0,0,0,0-9Z"/>',
|
|
129
|
+
"home": '<path d="M16.6123,2.2138a1.01,1.01,0,0,0-1.2427,0L1,13.4194l1.2427,1.5717L4,13.6209V26a2.0041,2.0041,0,0,0,2,2H26a2.0037,2.0037,0,0,0,2-2V13.63L29.7573,15,31,13.4282ZM18,26H14V18h4Zm2,0V18a2.0023,2.0023,0,0,0-2-2H14a2.002,2.002,0,0,0-2,2v8H6V12.0615l10-7.79,10,7.8005V26Z"/>',
|
|
130
|
+
"information": '<path d="M17 22 17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22z"/><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"/><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/>',
|
|
131
|
+
"launch": '<path d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"/><path d="M20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"/>',
|
|
132
|
+
"layers": '<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z"/><path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z"/><path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z"/>',
|
|
133
|
+
"list": '<path d="M10 6H28V8H10z"/><path d="M10 24H28V26H10z"/><path d="M10 15H28V17H10z"/><path d="M4 15H6V17H4z"/><path d="M4 6H6V8H4z"/><path d="M4 24H6V26H4z"/>',
|
|
134
|
+
"list--boxes": '<path d="M16 8H30V10H16z"/><path d="M16 22H30V24H16z"/><path d="M10,14H4a2.0023,2.0023,0,0,1-2-2V6A2.0023,2.0023,0,0,1,4,4h6a2.0023,2.0023,0,0,1,2,2v6A2.0023,2.0023,0,0,1,10,14ZM4,6v6h6.0012L10,6Z"/><path d="M10,28H4a2.0023,2.0023,0,0,1-2-2V20a2.0023,2.0023,0,0,1,2-2h6a2.0023,2.0023,0,0,1,2,2v6A2.0023,2.0023,0,0,1,10,28ZM4,20v6h6.0012L10,20Z"/>',
|
|
135
|
+
"list--checked": '<path d="M16 22H30V24H16z"/><path d="M14 19.4 12.6 18 6 24.6 3.4 22 2 23.4 6 27.4z"/><path d="M16 8H30V10H16z"/><path d="M14 5.4 12.6 4 6 10.6 3.4 8 2 9.4 6 13.4z"/>',
|
|
136
|
+
"location": '<path d="M16,18a5,5,0,1,1,5-5A5.0057,5.0057,0,0,1,16,18Zm0-8a3,3,0,1,0,3,3A3.0033,3.0033,0,0,0,16,10Z"/><path d="M16,30,7.5645,20.0513c-.0479-.0571-.3482-.4515-.3482-.4515A10.8888,10.8888,0,0,1,5,13a11,11,0,0,1,22,0,10.8844,10.8844,0,0,1-2.2148,6.5973l-.0015.0025s-.3.3944-.3447.4474ZM8.8125,18.395c.001.0007.2334.3082.2866.3744L16,26.9079l6.91-8.15c.0439-.0552.2783-.3649.2788-.3657A8.901,8.901,0,0,0,25,13,9,9,0,1,0,7,13a8.9054,8.9054,0,0,0,1.8125,5.395Z"/>',
|
|
137
|
+
"locked": '<path d="M24,14H22V8A6,6,0,0,0,10,8v6H8a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V16A2,2,0,0,0,24,14ZM12,8a4,4,0,0,1,8,0v6H12ZM24,28H8V16H24Z"/>',
|
|
138
|
+
"menu": '<path d="M4 6H28V8H4z"/><path d="M4 24H28V26H4z"/><path d="M4 12H28V14H4z"/><path d="M4 18H28V20H4z"/>',
|
|
139
|
+
"minimize": '<path d="M4 18 4 20 10.586 20 2 28.582 3.414 30 12 21.414 12 28 14 28 14 18 4 18z"/><path d="M30 3.416 28.592 2 20 10.586 20 4 18 4 18 14 28 14 28 12 21.414 12 30 3.416z"/>',
|
|
140
|
+
"misuse": '<path d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z M21.4,23L16,17.6L10.6,23L9,21.4l5.4-5.4L9,10.6L10.6,9 l5.4,5.4L21.4,9l1.6,1.6L17.6,16l5.4,5.4L21.4,23z"/><path fill="none" d="M21.4,23L16,17.6L10.6,23L9,21.4l5.4-5.4L9,10.6L10.6,9l5.4,5.4L21.4,9l1.6,1.6L17.6,16 l5.4,5.4L21.4,23z" data-icon-path="inner-path" opacity="0"/>',
|
|
141
|
+
"notification": '<path d="M28.7071,19.293,26,16.5859V13a10.0136,10.0136,0,0,0-9-9.9492V1H15V3.0508A10.0136,10.0136,0,0,0,6,13v3.5859L3.2929,19.293A1,1,0,0,0,3,20v3a1,1,0,0,0,1,1h7v.7768a5.152,5.152,0,0,0,4.5,5.1987A5.0057,5.0057,0,0,0,21,25V24h7a1,1,0,0,0,1-1V20A1,1,0,0,0,28.7071,19.293ZM19,25a3,3,0,0,1-6,0V24h6Zm8-3H5V20.4141L7.707,17.707A1,1,0,0,0,8,17V13a8,8,0,0,1,16,0v4a1,1,0,0,0,.293.707L27,20.4141Z"/>',
|
|
142
|
+
"overflow-menu--vertical": '<circle cx="16" cy="8" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="16" cy="24" r="2"/>',
|
|
143
|
+
"printer": '<path d="M28,9H25V3H7V9H4a2,2,0,0,0-2,2V21a2,2,0,0,0,2,2H7v6H25V23h3a2,2,0,0,0,2-2V11A2,2,0,0,0,28,9ZM9,5H23V9H9ZM23,27H9V17H23Zm5-6H25V15H7v6H4V11H28Z"/>',
|
|
144
|
+
"qr-code": '<path d="M24 26H26V28H24z" transform="rotate(-90 25 27)"/><path d="M18 22H20V24H18z" transform="rotate(-90 19 23)"/><path d="M18 30 22 30 22 28 20 28 20 26 18 26 18 30z"/><path d="M25 23H29V25H25z" transform="rotate(-90 27 24)"/><path d="M28 26 30 26 30 30 26 30 26 28 28 28 28 26z"/><path d="M26 20 26 18 30 18 30 22 28 22 28 20 26 20z"/><path d="M24 20 22 20 22 24 20 24 20 26 24 26 24 20z"/><path d="M19 17H21V21H19z" transform="rotate(-90 20 19)"/><path d="M6 22H10V26H6z"/><path d="M14,30H2V18H14ZM4,28h8V20H4Z"/><path d="M22 6H26V10H22z"/><path d="M30,14H18V2H30ZM20,12h8V4H20Z"/><path d="M6 6H10V10H6z"/><path d="M14,14H2V2H14ZM4,12h8V4H4Z"/>',
|
|
145
|
+
"recently-viewed": '<path d="M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z"/><path d="M16,2A13.94,13.94,0,0,0,6,6.23V2H4v8h8V8H7.08A12,12,0,1,1,4,16H2A14,14,0,1,0,16,2Z"/>',
|
|
146
|
+
"renew": '<path d="M12,10H6.78A11,11,0,0,1,27,16h2A13,13,0,0,0,6,7.68V4H4v8h8Z"/><path d="M20,22h5.22A11,11,0,0,1,5,16H3a13,13,0,0,0,23,8.32V28h2V20H20Z"/>',
|
|
147
|
+
"search": '<path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/>',
|
|
148
|
+
"settings": '<path d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"/><path d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"/>',
|
|
149
|
+
"settings--adjust": '<path d="M30,8h-4.1c-0.5-2.3-2.5-4-4.9-4s-4.4,1.7-4.9,4H2v2h14.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H30V8z M21,12c-1.7,0-3-1.3-3-3 s1.3-3,3-3s3,1.3,3,3S22.7,12,21,12z"/><path d="M2,24h4.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H30v-2H15.9c-0.5-2.3-2.5-4-4.9-4s-4.4,1.7-4.9,4H2V24z M11,20c1.7,0,3,1.3,3,3 s-1.3,3-3,3s-3-1.3-3-3S9.3,20,11,20z"/>',
|
|
150
|
+
"shopping--cart": '<circle cx="10" cy="28" r="2"/><circle cx="24" cy="28" r="2"/><path d="M28,7H5.82L5,2.8A1,1,0,0,0,4,2H0V4H3.18L7,23.2A1,1,0,0,0,8,24H26V22H8.82L8,18H26a1,1,0,0,0,1-.78l2-9A1,1,0,0,0,28,7Zm-2.8,9H7.62L6.22,9H26.75Z"/>',
|
|
151
|
+
"subtract": '<path d="M8 15H24V17H8z"/>',
|
|
152
|
+
"text--font": '<path d="M25,12H20v2h5a1.0008,1.0008,0,0,1,1,1v2H22a3.0033,3.0033,0,0,0-3,3v1a3.0033,3.0033,0,0,0,3,3h6V15A3.0033,3.0033,0,0,0,25,12ZM22,22a1.0008,1.0008,0,0,1-1-1V20a1.0008,1.0008,0,0,1,1-1h4v3Z"/><path d="M16,24h2L12,7H10L4,24H6l1.6936-5h6.6135ZM8.3711,17l2.4966-7.3711.2668.0005L13.63,17Z"/>',
|
|
153
|
+
"time": '<path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/><path d="M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z"/>',
|
|
154
|
+
"trash-can": '<path d="M12 12H14V24H12z"/><path d="M18 12H20V24H18z"/><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"/><path d="M12 2H20V4H12z"/>',
|
|
155
|
+
"user": '<path d="M16,4a5,5,0,1,1-5,5,5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,16,2Z"/><path d="M26,30H24V25a5,5,0,0,0-5-5H13a5,5,0,0,0-5,5v5H6V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z"/>',
|
|
156
|
+
"view": '<path d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z"/><path d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z"/>',
|
|
157
|
+
"warning--alt": '<path d="M16,23a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,23Z"/><path d="M15 12H17V21H15z"/><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"/>',
|
|
158
|
+
"warning--filled": '<path d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25 c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"/><path fill="none" d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22 C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z" data-icon-path="inner-path" opacity="0"/>'
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
// src/components/core/icon-map.ts
|
|
93
162
|
var CARBON_MAP = {
|
|
94
163
|
"menu": "menu",
|
|
95
164
|
"search": "search",
|
|
@@ -159,21 +228,49 @@ var CARBON_MAP = {
|
|
|
159
228
|
"eye": "view",
|
|
160
229
|
"minimize-2": "minimize"
|
|
161
230
|
};
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
231
|
+
|
|
232
|
+
// src/components/core/Icon.tsx
|
|
233
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
234
|
+
var IS_DEV = process.env.NODE_ENV !== "production";
|
|
235
|
+
var warned = /* @__PURE__ */ new Set();
|
|
236
|
+
function warnOnce(key, message) {
|
|
237
|
+
if (warned.has(key)) return;
|
|
238
|
+
warned.add(key);
|
|
239
|
+
console.warn(`[pire] ${message}`);
|
|
240
|
+
}
|
|
166
241
|
var config = {};
|
|
167
242
|
function configureIcons(next) {
|
|
168
243
|
config = { ...config, ...next };
|
|
244
|
+
if (!IS_DEV) return;
|
|
245
|
+
if (next.base !== void 0) {
|
|
246
|
+
warnOnce(
|
|
247
|
+
"config:base",
|
|
248
|
+
"configureIcons({ base }) is ignored: glyphs are inlined in the bundle and no longer fetched over the network. Remove the call, and the self-hosted SVGs it pointed at."
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
if (next.pack !== void 0) {
|
|
252
|
+
warnOnce(
|
|
253
|
+
"config:pack",
|
|
254
|
+
"configureIcons({ pack }) is ignored: the bundled Carbon pack is the only pack. Use configureIcons({ resolve }) to supply a glyph Pire does not ship."
|
|
255
|
+
);
|
|
256
|
+
}
|
|
169
257
|
}
|
|
170
258
|
function Icon({ name, size = 16, label, pack, style, ...rest }) {
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
259
|
+
const markup = config.resolve?.(name) ?? ICON_MARKUP[CARBON_MAP[name] ?? name];
|
|
260
|
+
if (IS_DEV) {
|
|
261
|
+
if (pack !== void 0) {
|
|
262
|
+
warnOnce(
|
|
263
|
+
"prop:pack",
|
|
264
|
+
"The Icon `pack` prop is ignored: the bundled Carbon pack is the only pack. Drop the prop."
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
if (markup === void 0) {
|
|
268
|
+
warnOnce(
|
|
269
|
+
`missing:${name}`,
|
|
270
|
+
`Unknown icon name "${name}" \u2014 nothing will render. Add it to CARBON_MAP in src/components/core/icon-map.ts and rebuild, or register it with configureIcons({ resolve }).`
|
|
271
|
+
);
|
|
272
|
+
}
|
|
273
|
+
}
|
|
177
274
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
275
|
"span",
|
|
179
276
|
{
|
|
@@ -182,26 +279,18 @@ function Icon({ name, size = 16, label, pack, style, ...rest }) {
|
|
|
182
279
|
"aria-hidden": label ? void 0 : true,
|
|
183
280
|
"data-icon": name,
|
|
184
281
|
...rest,
|
|
185
|
-
style: {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
flex: "0 0 auto",
|
|
189
|
-
width: size,
|
|
190
|
-
height: size,
|
|
191
|
-
backgroundColor: failed ? "transparent" : "currentColor",
|
|
192
|
-
WebkitMaskImage: failed ? void 0 : `url("${url}")`,
|
|
193
|
-
WebkitMask: failed ? void 0 : mask,
|
|
194
|
-
mask: failed ? void 0 : mask,
|
|
195
|
-
...style
|
|
196
|
-
},
|
|
197
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
198
|
-
"img",
|
|
282
|
+
style: { display: "inline-block", flex: "0 0 auto", width: size, height: size, ...style },
|
|
283
|
+
children: markup === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
284
|
+
"svg",
|
|
199
285
|
{
|
|
200
|
-
|
|
201
|
-
|
|
286
|
+
viewBox: "0 0 32 32",
|
|
287
|
+
width: size,
|
|
288
|
+
height: size,
|
|
289
|
+
fill: "currentColor",
|
|
290
|
+
focusable: "false",
|
|
202
291
|
"aria-hidden": "true",
|
|
203
|
-
|
|
204
|
-
|
|
292
|
+
style: { display: "block" },
|
|
293
|
+
dangerouslySetInnerHTML: { __html: markup }
|
|
205
294
|
}
|
|
206
295
|
)
|
|
207
296
|
}
|
|
@@ -209,7 +298,7 @@ function Icon({ name, size = 16, label, pack, style, ...rest }) {
|
|
|
209
298
|
}
|
|
210
299
|
|
|
211
300
|
// src/components/core/Button.tsx
|
|
212
|
-
var
|
|
301
|
+
var React = __toESM(require("react"), 1);
|
|
213
302
|
var import_react_aria_components = require("react-aria-components");
|
|
214
303
|
|
|
215
304
|
// src/components/utils/cx.ts
|
|
@@ -219,7 +308,7 @@ function cx(...parts) {
|
|
|
219
308
|
|
|
220
309
|
// src/components/core/Button.tsx
|
|
221
310
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
222
|
-
var Button =
|
|
311
|
+
var Button = React.forwardRef(function Button2({ children, variant = "secondary", size = "md", icon, iconEnd, fullWidth, className, ...rest }, ref) {
|
|
223
312
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
224
313
|
import_react_aria_components.Button,
|
|
225
314
|
{
|
|
@@ -239,7 +328,7 @@ var Button = React2.forwardRef(function Button2({ children, variant = "secondary
|
|
|
239
328
|
});
|
|
240
329
|
|
|
241
330
|
// src/components/core/IconButton.tsx
|
|
242
|
-
var
|
|
331
|
+
var React2 = __toESM(require("react"), 1);
|
|
243
332
|
var import_react_aria_components3 = require("react-aria-components");
|
|
244
333
|
|
|
245
334
|
// src/components/feedback/Tooltip.tsx
|
|
@@ -257,7 +346,7 @@ function Tooltip({ label, placement = "top", delay = 500, children }) {
|
|
|
257
346
|
|
|
258
347
|
// src/components/core/IconButton.tsx
|
|
259
348
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
260
|
-
var IconButton =
|
|
349
|
+
var IconButton = React2.forwardRef(function IconButton2({ icon, label, size = "md", variant = "tertiary", selected, hideTooltip, className, ...rest }, ref) {
|
|
261
350
|
const button = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
262
351
|
import_react_aria_components3.Button,
|
|
263
352
|
{
|
|
@@ -328,11 +417,11 @@ function Card({ title, subtitle, icon, actions, footer, interactive, children, c
|
|
|
328
417
|
}
|
|
329
418
|
|
|
330
419
|
// src/components/core/Avatar.tsx
|
|
331
|
-
var
|
|
420
|
+
var React3 = __toESM(require("react"), 1);
|
|
332
421
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
333
422
|
var initials = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
|
|
334
423
|
function Avatar({ name, size = "md", src, className, ...rest }) {
|
|
335
|
-
const [failed, setFailed] =
|
|
424
|
+
const [failed, setFailed] = React3.useState(false);
|
|
336
425
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cx("pire-avatar", className), "data-size": size, role: "img", "aria-label": name, ...rest, children: src && !failed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
337
426
|
"img",
|
|
338
427
|
{
|
|
@@ -345,7 +434,7 @@ function Avatar({ name, size = "md", src, className, ...rest }) {
|
|
|
345
434
|
}
|
|
346
435
|
|
|
347
436
|
// src/components/core/SegmentedControl.tsx
|
|
348
|
-
var
|
|
437
|
+
var React4 = __toESM(require("react"), 1);
|
|
349
438
|
var import_react_aria_components5 = require("react-aria-components");
|
|
350
439
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
351
440
|
function SegmentedControl({
|
|
@@ -359,7 +448,7 @@ function SegmentedControl({
|
|
|
359
448
|
style,
|
|
360
449
|
...rest
|
|
361
450
|
}) {
|
|
362
|
-
const selected =
|
|
451
|
+
const selected = React4.useMemo(() => new Set(value ? [value] : defaultValue ? [defaultValue] : []), [value, defaultValue]);
|
|
363
452
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
364
453
|
import_react_aria_components5.ToggleButtonGroup,
|
|
365
454
|
{
|
|
@@ -461,9 +550,94 @@ function Input({
|
|
|
461
550
|
);
|
|
462
551
|
}
|
|
463
552
|
|
|
464
|
-
// src/components/forms/
|
|
553
|
+
// src/components/forms/TextArea.tsx
|
|
554
|
+
var React5 = __toESM(require("react"), 1);
|
|
465
555
|
var import_react_aria_components7 = require("react-aria-components");
|
|
466
556
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
557
|
+
var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
|
|
558
|
+
function TextArea({
|
|
559
|
+
label,
|
|
560
|
+
description,
|
|
561
|
+
errorMessage,
|
|
562
|
+
size = "md",
|
|
563
|
+
rows = 3,
|
|
564
|
+
autoGrow,
|
|
565
|
+
maxRows,
|
|
566
|
+
fullWidth = true,
|
|
567
|
+
className,
|
|
568
|
+
style,
|
|
569
|
+
textAreaRef,
|
|
570
|
+
onChange,
|
|
571
|
+
...rest
|
|
572
|
+
}) {
|
|
573
|
+
const innerRef = React5.useRef(null);
|
|
574
|
+
const ref = React5.useCallback((node) => {
|
|
575
|
+
innerRef.current = node;
|
|
576
|
+
if (typeof textAreaRef === "function") textAreaRef(node);
|
|
577
|
+
else if (textAreaRef) textAreaRef.current = node;
|
|
578
|
+
}, [textAreaRef]);
|
|
579
|
+
const grow = React5.useCallback(() => {
|
|
580
|
+
const el = innerRef.current;
|
|
581
|
+
if (!el || !autoGrow) return;
|
|
582
|
+
const styles = getComputedStyle(el);
|
|
583
|
+
const lineHeight = Number.parseFloat(styles.lineHeight) || Number.parseFloat(styles.fontSize) * 1.5;
|
|
584
|
+
const chrome = el.offsetHeight - el.clientHeight;
|
|
585
|
+
el.style.height = "auto";
|
|
586
|
+
const wanted = maxRows ? Math.min(el.scrollHeight, Math.ceil(lineHeight * maxRows)) : el.scrollHeight;
|
|
587
|
+
const next = `${wanted + chrome}px`;
|
|
588
|
+
if (el.style.height !== next) el.style.height = next;
|
|
589
|
+
}, [autoGrow, maxRows]);
|
|
590
|
+
useIsomorphicLayoutEffect(() => {
|
|
591
|
+
if (!autoGrow) {
|
|
592
|
+
if (innerRef.current) innerRef.current.style.height = "";
|
|
593
|
+
return;
|
|
594
|
+
}
|
|
595
|
+
grow();
|
|
596
|
+
}, [autoGrow, grow, rest.value]);
|
|
597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
598
|
+
import_react_aria_components7.TextField,
|
|
599
|
+
{
|
|
600
|
+
className: cx("pire-field", className),
|
|
601
|
+
style,
|
|
602
|
+
onChange,
|
|
603
|
+
validationBehavior: "aria",
|
|
604
|
+
...rest,
|
|
605
|
+
children: [
|
|
606
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_aria_components7.Label, { className: "pire-field-label", children: [
|
|
607
|
+
label,
|
|
608
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
609
|
+
] }) : null,
|
|
610
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
611
|
+
import_react_aria_components7.Group,
|
|
612
|
+
{
|
|
613
|
+
className: "pire-control",
|
|
614
|
+
"data-size": size,
|
|
615
|
+
"data-full-width": String(fullWidth),
|
|
616
|
+
"data-multiline": "true",
|
|
617
|
+
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
618
|
+
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
619
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
620
|
+
import_react_aria_components7.TextArea,
|
|
621
|
+
{
|
|
622
|
+
ref,
|
|
623
|
+
rows,
|
|
624
|
+
onInput: autoGrow ? grow : void 0,
|
|
625
|
+
className: cx("pire-input", "pire-textarea"),
|
|
626
|
+
"data-auto-grow": autoGrow ? "true" : void 0
|
|
627
|
+
}
|
|
628
|
+
)
|
|
629
|
+
}
|
|
630
|
+
),
|
|
631
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
632
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
633
|
+
]
|
|
634
|
+
}
|
|
635
|
+
);
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
// src/components/forms/Select.tsx
|
|
639
|
+
var import_react_aria_components8 = require("react-aria-components");
|
|
640
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
467
641
|
var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
|
|
468
642
|
function Select({
|
|
469
643
|
label,
|
|
@@ -481,8 +655,8 @@ function Select({
|
|
|
481
655
|
...rest
|
|
482
656
|
}) {
|
|
483
657
|
const items = options.map(norm);
|
|
484
|
-
return /* @__PURE__ */ (0,
|
|
485
|
-
|
|
658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
659
|
+
import_react_aria_components8.Select,
|
|
486
660
|
{
|
|
487
661
|
className: cx("pire-field", className),
|
|
488
662
|
style,
|
|
@@ -493,78 +667,78 @@ function Select({
|
|
|
493
667
|
validationBehavior: "aria",
|
|
494
668
|
...rest,
|
|
495
669
|
children: [
|
|
496
|
-
label ? /* @__PURE__ */ (0,
|
|
670
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.Label, { className: "pire-field-label", children: [
|
|
497
671
|
label,
|
|
498
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
672
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
499
673
|
] }) : null,
|
|
500
|
-
/* @__PURE__ */ (0,
|
|
501
|
-
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
675
|
+
import_react_aria_components8.Button,
|
|
502
676
|
{
|
|
503
677
|
className: "pire-control",
|
|
504
678
|
"data-size": size,
|
|
505
679
|
"data-full-width": String(fullWidth),
|
|
506
680
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
507
681
|
children: [
|
|
508
|
-
/* @__PURE__ */ (0,
|
|
509
|
-
/* @__PURE__ */ (0,
|
|
682
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.SelectValue, { className: "pire-select-value" }),
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
|
|
510
684
|
]
|
|
511
685
|
}
|
|
512
686
|
),
|
|
513
|
-
description ? /* @__PURE__ */ (0,
|
|
514
|
-
/* @__PURE__ */ (0,
|
|
515
|
-
/* @__PURE__ */ (0,
|
|
687
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
688
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
689
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
|
|
516
690
|
]
|
|
517
691
|
}
|
|
518
692
|
);
|
|
519
693
|
}
|
|
520
694
|
|
|
521
695
|
// src/components/forms/Checkbox.tsx
|
|
522
|
-
var
|
|
523
|
-
var
|
|
696
|
+
var import_react_aria_components9 = require("react-aria-components");
|
|
697
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
524
698
|
function Checkbox({ label, hint, children, className, ...rest }) {
|
|
525
|
-
return /* @__PURE__ */ (0,
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
527
|
-
/* @__PURE__ */ (0,
|
|
699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
700
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "check", size: 12 }) : null }),
|
|
701
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
|
|
528
702
|
label ?? children,
|
|
529
|
-
hint ? /* @__PURE__ */ (0,
|
|
703
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
530
704
|
] })
|
|
531
705
|
] }) });
|
|
532
706
|
}
|
|
533
707
|
|
|
534
708
|
// src/components/forms/Radio.tsx
|
|
535
|
-
var
|
|
536
|
-
var
|
|
709
|
+
var import_react_aria_components10 = require("react-aria-components");
|
|
710
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
537
711
|
function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
|
|
538
|
-
return /* @__PURE__ */ (0,
|
|
539
|
-
label ? /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
541
|
-
description ? /* @__PURE__ */ (0,
|
|
542
|
-
/* @__PURE__ */ (0,
|
|
712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components10.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
|
|
713
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Label, { className: "pire-field-label", children: label }) : null,
|
|
714
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pire-radiogroup", children }),
|
|
715
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
543
717
|
] });
|
|
544
718
|
}
|
|
545
719
|
function Radio({ label, hint, children, className, ...rest }) {
|
|
546
|
-
return /* @__PURE__ */ (0,
|
|
547
|
-
/* @__PURE__ */ (0,
|
|
548
|
-
/* @__PURE__ */ (0,
|
|
720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components10.Radio, { className: cx("pire-choice", className), ...rest, children: [
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
|
|
549
723
|
label ?? children,
|
|
550
|
-
hint ? /* @__PURE__ */ (0,
|
|
724
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
|
|
551
725
|
] })
|
|
552
726
|
] });
|
|
553
727
|
}
|
|
554
728
|
|
|
555
729
|
// src/components/forms/Switch.tsx
|
|
556
|
-
var
|
|
557
|
-
var
|
|
730
|
+
var import_react_aria_components11 = require("react-aria-components");
|
|
731
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
558
732
|
function Switch({ label, children, className, ...rest }) {
|
|
559
|
-
return /* @__PURE__ */ (0,
|
|
560
|
-
/* @__PURE__ */ (0,
|
|
561
|
-
/* @__PURE__ */ (0,
|
|
733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_aria_components11.Switch, { className: cx("pire-choice", className), ...rest, children: [
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-switch-thumb" }) }),
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label ?? children })
|
|
562
736
|
] });
|
|
563
737
|
}
|
|
564
738
|
|
|
565
739
|
// src/components/forms/ComboBox.tsx
|
|
566
|
-
var
|
|
567
|
-
var
|
|
740
|
+
var import_react_aria_components12 = require("react-aria-components");
|
|
741
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
568
742
|
var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
569
743
|
function ComboBox({
|
|
570
744
|
label,
|
|
@@ -582,8 +756,8 @@ function ComboBox({
|
|
|
582
756
|
...rest
|
|
583
757
|
}) {
|
|
584
758
|
const items = options.map(norm2);
|
|
585
|
-
return /* @__PURE__ */ (0,
|
|
586
|
-
|
|
759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
760
|
+
import_react_aria_components12.ComboBox,
|
|
587
761
|
{
|
|
588
762
|
className: cx("pire-field", className),
|
|
589
763
|
style,
|
|
@@ -596,29 +770,150 @@ function ComboBox({
|
|
|
596
770
|
validationBehavior: "aria",
|
|
597
771
|
...rest,
|
|
598
772
|
children: [
|
|
599
|
-
label ? /* @__PURE__ */ (0,
|
|
773
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.Label, { className: "pire-field-label", children: [
|
|
600
774
|
label,
|
|
601
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
775
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
602
776
|
] }) : null,
|
|
603
|
-
/* @__PURE__ */ (0,
|
|
604
|
-
|
|
777
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
778
|
+
import_react_aria_components12.Group,
|
|
605
779
|
{
|
|
606
780
|
className: "pire-control",
|
|
607
781
|
"data-size": size,
|
|
608
782
|
"data-full-width": String(fullWidth),
|
|
609
783
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
610
784
|
children: [
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
612
|
-
/* @__PURE__ */ (0,
|
|
613
|
-
/* @__PURE__ */ (0,
|
|
785
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
786
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Input, { className: "pire-input", placeholder: rest.placeholder }),
|
|
787
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Show suggestions", style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "chevron-down", size: 16 }) })
|
|
614
788
|
]
|
|
615
789
|
}
|
|
616
790
|
),
|
|
617
|
-
description ? /* @__PURE__ */ (0,
|
|
618
|
-
/* @__PURE__ */ (0,
|
|
619
|
-
/* @__PURE__ */ (0,
|
|
620
|
-
/* @__PURE__ */ (0,
|
|
621
|
-
item.secondary ? /* @__PURE__ */ (0,
|
|
791
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
792
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
793
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
794
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { flex: 1 }, children: item.label }),
|
|
795
|
+
item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
796
|
+
] }) }) })
|
|
797
|
+
]
|
|
798
|
+
}
|
|
799
|
+
);
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
// src/components/forms/MultiComboBox.tsx
|
|
803
|
+
var React6 = __toESM(require("react"), 1);
|
|
804
|
+
var import_react_aria_components13 = require("react-aria-components");
|
|
805
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
806
|
+
var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
|
|
807
|
+
function MultiComboBox({
|
|
808
|
+
label,
|
|
809
|
+
value,
|
|
810
|
+
defaultValue,
|
|
811
|
+
onChange,
|
|
812
|
+
onInputChange,
|
|
813
|
+
options = [],
|
|
814
|
+
description,
|
|
815
|
+
errorMessage,
|
|
816
|
+
allowsCustomValue,
|
|
817
|
+
size = "md",
|
|
818
|
+
fullWidth = true,
|
|
819
|
+
className,
|
|
820
|
+
style,
|
|
821
|
+
...rest
|
|
822
|
+
}) {
|
|
823
|
+
const items = React6.useMemo(() => options.map(norm3), [options]);
|
|
824
|
+
const [uncontrolled, setUncontrolled] = React6.useState(defaultValue ?? []);
|
|
825
|
+
const [announcement, setAnnouncement] = React6.useState("");
|
|
826
|
+
const inputRef = React6.useRef(null);
|
|
827
|
+
const raw = value ?? uncontrolled;
|
|
828
|
+
const contentKey = raw.join("\0");
|
|
829
|
+
const values = React6.useMemo(() => raw, [contentKey]);
|
|
830
|
+
const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
|
|
831
|
+
const isEditable = !rest.isDisabled && !rest.isReadOnly;
|
|
832
|
+
const commit = (next) => {
|
|
833
|
+
const added = next.find((v) => !values.includes(v));
|
|
834
|
+
const removed = values.find((v) => !next.includes(v));
|
|
835
|
+
if (added) setAnnouncement(`${labelOf(added)} added. ${next.length} selected.`);
|
|
836
|
+
else if (removed) setAnnouncement(`${labelOf(removed)} removed. ${next.length} selected.`);
|
|
837
|
+
if (value === void 0) setUncontrolled(next);
|
|
838
|
+
onChange?.(next);
|
|
839
|
+
};
|
|
840
|
+
const remove = (v) => {
|
|
841
|
+
commit(values.filter((x) => x !== v));
|
|
842
|
+
inputRef.current?.focus();
|
|
843
|
+
};
|
|
844
|
+
const onKeyDownCapture = (e) => {
|
|
845
|
+
const el = e.currentTarget;
|
|
846
|
+
if (!isEditable) return;
|
|
847
|
+
if (e.key === "Backspace" && el.value === "" && values.length > 0) {
|
|
848
|
+
e.preventDefault();
|
|
849
|
+
e.stopPropagation();
|
|
850
|
+
commit(values.slice(0, -1));
|
|
851
|
+
return;
|
|
852
|
+
}
|
|
853
|
+
if (e.key !== "Enter" || !allowsCustomValue) return;
|
|
854
|
+
const text = el.value.trim();
|
|
855
|
+
if (text === "" || el.getAttribute("aria-activedescendant")) return;
|
|
856
|
+
const match = items.find((o) => o.label.toLowerCase() === text.toLowerCase());
|
|
857
|
+
const next = match ? match.value : text;
|
|
858
|
+
e.preventDefault();
|
|
859
|
+
e.stopPropagation();
|
|
860
|
+
if (!values.includes(next)) commit([...values, next]);
|
|
861
|
+
};
|
|
862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
863
|
+
import_react_aria_components13.ComboBox,
|
|
864
|
+
{
|
|
865
|
+
className: cx("pire-field", className),
|
|
866
|
+
style,
|
|
867
|
+
selectionMode: "multiple",
|
|
868
|
+
value: values,
|
|
869
|
+
onChange: (keys) => commit(keys.map(String)),
|
|
870
|
+
onInputChange,
|
|
871
|
+
defaultItems: items,
|
|
872
|
+
menuTrigger: "input",
|
|
873
|
+
validationBehavior: "aria",
|
|
874
|
+
...rest,
|
|
875
|
+
children: [
|
|
876
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.Label, { className: "pire-field-label", children: [
|
|
877
|
+
label,
|
|
878
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
879
|
+
] }) : null,
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
881
|
+
import_react_aria_components13.Group,
|
|
882
|
+
{
|
|
883
|
+
className: "pire-control",
|
|
884
|
+
"data-size": size,
|
|
885
|
+
"data-full-width": String(fullWidth),
|
|
886
|
+
"data-multiline": "true",
|
|
887
|
+
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
888
|
+
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
889
|
+
children: [
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pire-chipfield", children: [
|
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.ButtonContext.Provider, { value: null, children: values.map((v) => (
|
|
893
|
+
/* Disabled follows the field, not `isEditable`: a read-only field's chips are
|
|
894
|
+
real, current values and should read as such — they simply lose the × . */
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, { isDisabled: rest.isDisabled, onRemove: isEditable ? () => remove(v) : void 0, children: labelOf(v) }, v)
|
|
896
|
+
)) }),
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
898
|
+
import_react_aria_components13.Input,
|
|
899
|
+
{
|
|
900
|
+
ref: inputRef,
|
|
901
|
+
className: cx("pire-input", "pire-chipinput"),
|
|
902
|
+
placeholder: rest.placeholder,
|
|
903
|
+
onKeyDownCapture
|
|
904
|
+
}
|
|
905
|
+
)
|
|
906
|
+
] }),
|
|
907
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Show suggestions", style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "chevron-down", size: 16 }) })
|
|
908
|
+
]
|
|
909
|
+
}
|
|
910
|
+
),
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-live": "polite", children: announcement }) }),
|
|
912
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
914
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { flex: 1 }, children: item.label }),
|
|
916
|
+
item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
|
|
622
917
|
] }) }) })
|
|
623
918
|
]
|
|
624
919
|
}
|
|
@@ -626,8 +921,8 @@ function ComboBox({
|
|
|
626
921
|
}
|
|
627
922
|
|
|
628
923
|
// src/components/forms/NumberField.tsx
|
|
629
|
-
var
|
|
630
|
-
var
|
|
924
|
+
var import_react_aria_components14 = require("react-aria-components");
|
|
925
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
631
926
|
function NumberField({
|
|
632
927
|
label,
|
|
633
928
|
suffix,
|
|
@@ -640,13 +935,13 @@ function NumberField({
|
|
|
640
935
|
style,
|
|
641
936
|
...rest
|
|
642
937
|
}) {
|
|
643
|
-
return /* @__PURE__ */ (0,
|
|
644
|
-
label ? /* @__PURE__ */ (0,
|
|
938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components14.NumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
939
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components14.Label, { className: "pire-field-label", children: [
|
|
645
940
|
label,
|
|
646
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
941
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
647
942
|
] }) : null,
|
|
648
|
-
/* @__PURE__ */ (0,
|
|
649
|
-
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
944
|
+
import_react_aria_components14.Group,
|
|
650
945
|
{
|
|
651
946
|
className: "pire-control",
|
|
652
947
|
"data-size": size,
|
|
@@ -654,23 +949,23 @@ function NumberField({
|
|
|
654
949
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
655
950
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
656
951
|
children: [
|
|
657
|
-
/* @__PURE__ */ (0,
|
|
658
|
-
suffix ? /* @__PURE__ */ (0,
|
|
659
|
-
hideStepper ? null : /* @__PURE__ */ (0,
|
|
660
|
-
/* @__PURE__ */ (0,
|
|
661
|
-
/* @__PURE__ */ (0,
|
|
952
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Input, { className: "pire-input", "data-numeric": "true" }),
|
|
953
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-affix", children: suffix }) : null,
|
|
954
|
+
hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "pire-stepper", children: [
|
|
955
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": "Increase", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "plus", size: 10 }) }),
|
|
956
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": "Decrease", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "minus", size: 10 }) })
|
|
662
957
|
] })
|
|
663
958
|
]
|
|
664
959
|
}
|
|
665
960
|
),
|
|
666
|
-
description ? /* @__PURE__ */ (0,
|
|
667
|
-
/* @__PURE__ */ (0,
|
|
961
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
962
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.FieldError, { className: "pire-field-error", children: errorMessage })
|
|
668
963
|
] });
|
|
669
964
|
}
|
|
670
965
|
|
|
671
966
|
// src/components/forms/DatePicker.tsx
|
|
672
|
-
var
|
|
673
|
-
var
|
|
967
|
+
var import_react_aria_components15 = require("react-aria-components");
|
|
968
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
674
969
|
function DatePicker({
|
|
675
970
|
label,
|
|
676
971
|
description,
|
|
@@ -681,13 +976,13 @@ function DatePicker({
|
|
|
681
976
|
style,
|
|
682
977
|
...rest
|
|
683
978
|
}) {
|
|
684
|
-
return /* @__PURE__ */ (0,
|
|
685
|
-
label ? /* @__PURE__ */ (0,
|
|
979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.DatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
|
|
980
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.Label, { className: "pire-field-label", children: [
|
|
686
981
|
label,
|
|
687
|
-
rest.isRequired ? /* @__PURE__ */ (0,
|
|
982
|
+
rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
|
|
688
983
|
] }) : null,
|
|
689
|
-
/* @__PURE__ */ (0,
|
|
690
|
-
|
|
984
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
985
|
+
import_react_aria_components15.Group,
|
|
691
986
|
{
|
|
692
987
|
className: "pire-control",
|
|
693
988
|
"data-size": size,
|
|
@@ -695,36 +990,36 @@ function DatePicker({
|
|
|
695
990
|
"data-invalid": rest.isInvalid ? "true" : void 0,
|
|
696
991
|
"data-readonly": rest.isReadOnly ? "true" : void 0,
|
|
697
992
|
children: [
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
699
|
-
/* @__PURE__ */ (0,
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.DateSegment, { segment, className: "pire-datesegment" }) }),
|
|
994
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Open calendar", style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "calendar", size: 16 }) })
|
|
700
995
|
]
|
|
701
996
|
}
|
|
702
997
|
),
|
|
703
|
-
description ? /* @__PURE__ */ (0,
|
|
704
|
-
/* @__PURE__ */ (0,
|
|
705
|
-
/* @__PURE__ */ (0,
|
|
706
|
-
/* @__PURE__ */ (0,
|
|
707
|
-
/* @__PURE__ */ (0,
|
|
708
|
-
/* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
998
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
|
|
999
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.FieldError, { className: "pire-field-error", children: errorMessage }),
|
|
1000
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.Calendar, { className: "pire-calendar", children: [
|
|
1001
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "pire-calendar-head", children: [
|
|
1002
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
|
|
1003
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Heading, { className: "pire-calendar-title" }),
|
|
1004
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-right", size: 16 }) })
|
|
710
1005
|
] }),
|
|
711
|
-
/* @__PURE__ */ (0,
|
|
712
|
-
/* @__PURE__ */ (0,
|
|
713
|
-
/* @__PURE__ */ (0,
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.CalendarGrid, { className: "pire-calendar-grid", children: [
|
|
1007
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarHeaderCell, { children: day }) }),
|
|
1008
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarCell, { date, className: "pire-calendar-cell" }) })
|
|
714
1009
|
] })
|
|
715
1010
|
] }) }) })
|
|
716
1011
|
] });
|
|
717
1012
|
}
|
|
718
1013
|
|
|
719
1014
|
// src/components/forms/ValueHelpField.tsx
|
|
720
|
-
var
|
|
1015
|
+
var React8 = __toESM(require("react"), 1);
|
|
721
1016
|
|
|
722
1017
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
723
|
-
var
|
|
1018
|
+
var React7 = __toESM(require("react"), 1);
|
|
724
1019
|
|
|
725
1020
|
// src/components/feedback/Dialog.tsx
|
|
726
|
-
var
|
|
727
|
-
var
|
|
1021
|
+
var import_react_aria_components16 = require("react-aria-components");
|
|
1022
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
728
1023
|
function Dialog({
|
|
729
1024
|
isOpen,
|
|
730
1025
|
onOpenChange,
|
|
@@ -743,8 +1038,8 @@ function Dialog({
|
|
|
743
1038
|
onClose?.();
|
|
744
1039
|
onOpenChange?.(false);
|
|
745
1040
|
};
|
|
746
|
-
return /* @__PURE__ */ (0,
|
|
747
|
-
|
|
1041
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1042
|
+
import_react_aria_components16.ModalOverlay,
|
|
748
1043
|
{
|
|
749
1044
|
className: "pire-modal-overlay",
|
|
750
1045
|
isOpen,
|
|
@@ -752,24 +1047,24 @@ function Dialog({
|
|
|
752
1047
|
onOpenChange: (o) => {
|
|
753
1048
|
if (!o) close();
|
|
754
1049
|
},
|
|
755
|
-
children: /* @__PURE__ */ (0,
|
|
756
|
-
title ? /* @__PURE__ */ (0,
|
|
757
|
-
/* @__PURE__ */ (0,
|
|
758
|
-
/* @__PURE__ */ (0,
|
|
759
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
1050
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_aria_components16.Dialog, { className: "pire-dialog", children: [
|
|
1051
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("header", { className: "pire-dialog-head", children: [
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
1054
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
760
1055
|
] }),
|
|
761
|
-
showClose ? /* @__PURE__ */ (0,
|
|
1056
|
+
showClose ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconButton, { icon: "x", label: "Close", size: "sm", onPress: close }) : null
|
|
762
1057
|
] }) : null,
|
|
763
|
-
/* @__PURE__ */ (0,
|
|
764
|
-
footer ? /* @__PURE__ */ (0,
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pire-dialog-body", children }),
|
|
1059
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
765
1060
|
] }) })
|
|
766
1061
|
}
|
|
767
1062
|
);
|
|
768
1063
|
}
|
|
769
1064
|
|
|
770
1065
|
// src/components/data/DataTable.tsx
|
|
771
|
-
var
|
|
772
|
-
var
|
|
1066
|
+
var import_react_aria_components17 = require("react-aria-components");
|
|
1067
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
773
1068
|
function DataTable({
|
|
774
1069
|
columns,
|
|
775
1070
|
rows,
|
|
@@ -791,8 +1086,8 @@ function DataTable({
|
|
|
791
1086
|
if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
|
|
792
1087
|
onSelectionChange?.([...keys]);
|
|
793
1088
|
};
|
|
794
|
-
return /* @__PURE__ */ (0,
|
|
795
|
-
|
|
1089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("pire-table-wrap", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1090
|
+
import_react_aria_components17.Table,
|
|
796
1091
|
{
|
|
797
1092
|
className: "pire-table",
|
|
798
1093
|
"data-density": density,
|
|
@@ -808,10 +1103,10 @@ function DataTable({
|
|
|
808
1103
|
if (row) onRowAction(row);
|
|
809
1104
|
} : void 0,
|
|
810
1105
|
children: [
|
|
811
|
-
/* @__PURE__ */ (0,
|
|
812
|
-
selectable ? /* @__PURE__ */ (0,
|
|
813
|
-
columns.map((c, i) => /* @__PURE__ */ (0,
|
|
814
|
-
|
|
1106
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components17.TableHeader, { className: "pire-thead-row", children: [
|
|
1107
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { slot: "selection", "aria-label": "Select all rows" }) }) : null,
|
|
1108
|
+
columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1109
|
+
import_react_aria_components17.Column,
|
|
815
1110
|
{
|
|
816
1111
|
id: c.key,
|
|
817
1112
|
className: "pire-th",
|
|
@@ -820,9 +1115,9 @@ function DataTable({
|
|
|
820
1115
|
width: c.width,
|
|
821
1116
|
"data-align": c.numeric || c.align === "right" ? "right" : c.align,
|
|
822
1117
|
"data-allows-sorting": c.sortable ? "true" : void 0,
|
|
823
|
-
children: /* @__PURE__ */ (0,
|
|
1118
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "pire-th-inner", children: [
|
|
824
1119
|
c.label,
|
|
825
|
-
c.sortable ? /* @__PURE__ */ (0,
|
|
1120
|
+
c.sortable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
826
1121
|
Icon,
|
|
827
1122
|
{
|
|
828
1123
|
size: 12,
|
|
@@ -835,10 +1130,10 @@ function DataTable({
|
|
|
835
1130
|
c.key
|
|
836
1131
|
))
|
|
837
1132
|
] }),
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
selectable ? /* @__PURE__ */ (0,
|
|
840
|
-
columns.map((c) => /* @__PURE__ */ (0,
|
|
841
|
-
|
|
1133
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.TableBody, { renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components17.Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
|
|
1134
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { slot: "selection", "aria-label": "Select row" }) }) : null,
|
|
1135
|
+
columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1136
|
+
import_react_aria_components17.Cell,
|
|
842
1137
|
{
|
|
843
1138
|
className: "pire-td",
|
|
844
1139
|
"data-numeric": c.numeric ? "true" : void 0,
|
|
@@ -854,7 +1149,7 @@ function DataTable({
|
|
|
854
1149
|
}
|
|
855
1150
|
|
|
856
1151
|
// src/components/patterns/ValueHelpDialog.tsx
|
|
857
|
-
var
|
|
1152
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
858
1153
|
function ValueHelpDialog({
|
|
859
1154
|
isOpen,
|
|
860
1155
|
title = "Select a record",
|
|
@@ -865,25 +1160,25 @@ function ValueHelpDialog({
|
|
|
865
1160
|
onSelect,
|
|
866
1161
|
onClose
|
|
867
1162
|
}) {
|
|
868
|
-
const [query, setQuery] =
|
|
869
|
-
|
|
1163
|
+
const [query, setQuery] = React7.useState("");
|
|
1164
|
+
React7.useEffect(() => {
|
|
870
1165
|
if (isOpen) setQuery("");
|
|
871
1166
|
}, [isOpen]);
|
|
872
|
-
const filtered =
|
|
1167
|
+
const filtered = React7.useMemo(() => {
|
|
873
1168
|
const q = query.trim().toLowerCase();
|
|
874
1169
|
if (!q) return rows;
|
|
875
1170
|
return rows.filter((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(q)));
|
|
876
1171
|
}, [rows, query]);
|
|
877
|
-
return /* @__PURE__ */ (0,
|
|
1172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
878
1173
|
Dialog,
|
|
879
1174
|
{
|
|
880
1175
|
isOpen,
|
|
881
1176
|
size: "lg",
|
|
882
1177
|
title,
|
|
883
1178
|
onClose,
|
|
884
|
-
footer: /* @__PURE__ */ (0,
|
|
885
|
-
children: /* @__PURE__ */ (0,
|
|
886
|
-
/* @__PURE__ */ (0,
|
|
1179
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "tertiary", onPress: onClose, children: "Cancel" }),
|
|
1180
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
|
|
1181
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
887
1182
|
Input,
|
|
888
1183
|
{
|
|
889
1184
|
"aria-label": "Search records",
|
|
@@ -895,7 +1190,7 @@ function ValueHelpDialog({
|
|
|
895
1190
|
autoFocus: true
|
|
896
1191
|
}
|
|
897
1192
|
),
|
|
898
|
-
/* @__PURE__ */ (0,
|
|
1193
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
899
1194
|
DataTable,
|
|
900
1195
|
{
|
|
901
1196
|
"aria-label": typeof title === "string" ? title : "Records",
|
|
@@ -915,7 +1210,7 @@ function ValueHelpDialog({
|
|
|
915
1210
|
}
|
|
916
1211
|
|
|
917
1212
|
// src/components/forms/ValueHelpField.tsx
|
|
918
|
-
var
|
|
1213
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
919
1214
|
var defaultFormat = (row) => [row.id, row.name ?? row.label ?? row.text].filter(Boolean).join(" \u2014 ");
|
|
920
1215
|
function ValueHelpField({
|
|
921
1216
|
label,
|
|
@@ -935,10 +1230,10 @@ function ValueHelpField({
|
|
|
935
1230
|
className,
|
|
936
1231
|
style
|
|
937
1232
|
}) {
|
|
938
|
-
const [open, setOpen] =
|
|
939
|
-
return /* @__PURE__ */ (0,
|
|
940
|
-
/* @__PURE__ */ (0,
|
|
941
|
-
/* @__PURE__ */ (0,
|
|
1233
|
+
const [open, setOpen] = React8.useState(false);
|
|
1234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx(className), style, children: [
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
|
|
1236
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
942
1237
|
Input,
|
|
943
1238
|
{
|
|
944
1239
|
label,
|
|
@@ -952,7 +1247,7 @@ function ValueHelpField({
|
|
|
952
1247
|
errorMessage
|
|
953
1248
|
}
|
|
954
1249
|
),
|
|
955
|
-
allowsClear && value ? /* @__PURE__ */ (0,
|
|
1250
|
+
allowsClear && value ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
956
1251
|
IconButton,
|
|
957
1252
|
{
|
|
958
1253
|
icon: "x",
|
|
@@ -962,7 +1257,7 @@ function ValueHelpField({
|
|
|
962
1257
|
onPress: () => onChange?.(null)
|
|
963
1258
|
}
|
|
964
1259
|
) : null,
|
|
965
|
-
/* @__PURE__ */ (0,
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
966
1261
|
IconButton,
|
|
967
1262
|
{
|
|
968
1263
|
icon: "search",
|
|
@@ -973,7 +1268,7 @@ function ValueHelpField({
|
|
|
973
1268
|
}
|
|
974
1269
|
)
|
|
975
1270
|
] }),
|
|
976
|
-
/* @__PURE__ */ (0,
|
|
1271
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
977
1272
|
ValueHelpDialog,
|
|
978
1273
|
{
|
|
979
1274
|
isOpen: open,
|
|
@@ -988,26 +1283,136 @@ function ValueHelpField({
|
|
|
988
1283
|
}
|
|
989
1284
|
|
|
990
1285
|
// src/components/navigation/ShellBar.tsx
|
|
991
|
-
var
|
|
1286
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
992
1287
|
var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
|
|
993
|
-
function ShellBar({
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1288
|
+
function ShellBar({
|
|
1289
|
+
product,
|
|
1290
|
+
monogram,
|
|
1291
|
+
title,
|
|
1292
|
+
onMenu,
|
|
1293
|
+
onSearch,
|
|
1294
|
+
menuLabel = "Open navigation",
|
|
1295
|
+
searchLabel = "Search",
|
|
1296
|
+
actions,
|
|
1297
|
+
user,
|
|
1298
|
+
className,
|
|
1299
|
+
...rest
|
|
1300
|
+
}) {
|
|
1301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
|
|
1302
|
+
onMenu ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
|
|
1303
|
+
monogram ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
|
|
1304
|
+
product ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
|
|
1305
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-spacer" }),
|
|
1307
|
+
onSearch ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
|
|
1001
1308
|
actions,
|
|
1002
|
-
user ? /* @__PURE__ */ (0,
|
|
1309
|
+
user ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
|
|
1003
1310
|
] });
|
|
1004
1311
|
}
|
|
1005
1312
|
|
|
1006
1313
|
// src/components/navigation/SideNav.tsx
|
|
1007
|
-
var
|
|
1008
|
-
var
|
|
1009
|
-
|
|
1010
|
-
|
|
1314
|
+
var React9 = __toESM(require("react"), 1);
|
|
1315
|
+
var import_react_aria_components18 = require("react-aria-components");
|
|
1316
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1317
|
+
function findActiveParent(groups, value) {
|
|
1318
|
+
if (value == null) return void 0;
|
|
1319
|
+
for (const group of groups) {
|
|
1320
|
+
for (const item of group.items) {
|
|
1321
|
+
if (item.items?.some((child) => child.id === value)) return item.id;
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
return void 0;
|
|
1325
|
+
}
|
|
1326
|
+
function SideNav({
|
|
1327
|
+
groups,
|
|
1328
|
+
value,
|
|
1329
|
+
onChange,
|
|
1330
|
+
expandedIds,
|
|
1331
|
+
defaultExpandedIds,
|
|
1332
|
+
onExpandedChange,
|
|
1333
|
+
collapsed,
|
|
1334
|
+
footer,
|
|
1335
|
+
className,
|
|
1336
|
+
...rest
|
|
1337
|
+
}) {
|
|
1338
|
+
const activeParent = findActiveParent(groups, value);
|
|
1339
|
+
const isControlled = expandedIds != null;
|
|
1340
|
+
const [ownExpanded, setOwnExpanded] = React9.useState(
|
|
1341
|
+
() => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
|
|
1342
|
+
);
|
|
1343
|
+
const [lastValue, setLastValue] = React9.useState(value);
|
|
1344
|
+
if (value !== lastValue) {
|
|
1345
|
+
setLastValue(value);
|
|
1346
|
+
if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
|
|
1347
|
+
setOwnExpanded(new Set(ownExpanded).add(activeParent));
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
const expanded = isControlled ? new Set(expandedIds) : ownExpanded;
|
|
1351
|
+
const commitExpanded = (next) => {
|
|
1352
|
+
if (!isControlled) setOwnExpanded(next);
|
|
1353
|
+
onExpandedChange?.([...next]);
|
|
1354
|
+
};
|
|
1355
|
+
const handleExpandedChange = (keys) => commitExpanded(new Set([...keys].map(String)));
|
|
1356
|
+
const toggleExpanded = (id) => {
|
|
1357
|
+
const next = new Set(expanded);
|
|
1358
|
+
if (!next.delete(id)) next.add(id);
|
|
1359
|
+
commitExpanded(next);
|
|
1360
|
+
};
|
|
1361
|
+
const renderRow = (item, onPress, isGroup) => {
|
|
1362
|
+
const selected = !isGroup && item.id === value;
|
|
1363
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1364
|
+
import_react_aria_components18.Button,
|
|
1365
|
+
{
|
|
1366
|
+
className: "pire-sidenav-item",
|
|
1367
|
+
"data-selected": selected ? "true" : void 0,
|
|
1368
|
+
"data-active-child": isGroup && item.id === activeParent ? "true" : void 0,
|
|
1369
|
+
"aria-current": selected ? "page" : void 0,
|
|
1370
|
+
onPress,
|
|
1371
|
+
children: [
|
|
1372
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1373
|
+
collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: item.label }),
|
|
1374
|
+
item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
|
|
1375
|
+
]
|
|
1376
|
+
},
|
|
1377
|
+
item.id
|
|
1378
|
+
);
|
|
1379
|
+
return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
|
|
1380
|
+
};
|
|
1381
|
+
const renderSection = (item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1383
|
+
import_react_aria_components18.Button,
|
|
1384
|
+
{
|
|
1385
|
+
slot: "trigger",
|
|
1386
|
+
className: "pire-sidenav-item",
|
|
1387
|
+
"data-kind": "group",
|
|
1388
|
+
"data-active-child": item.id === activeParent ? "true" : void 0,
|
|
1389
|
+
children: [
|
|
1390
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1391
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: item.label }),
|
|
1392
|
+
item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null,
|
|
1393
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
|
|
1394
|
+
]
|
|
1395
|
+
}
|
|
1396
|
+
),
|
|
1397
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
|
|
1398
|
+
const selected = child.id === value;
|
|
1399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1400
|
+
import_react_aria_components18.Button,
|
|
1401
|
+
{
|
|
1402
|
+
className: "pire-sidenav-item pire-sidenav-subitem",
|
|
1403
|
+
"data-selected": selected ? "true" : void 0,
|
|
1404
|
+
"aria-current": selected ? "page" : void 0,
|
|
1405
|
+
onPress: () => onChange?.(child.id),
|
|
1406
|
+
children: [
|
|
1407
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: child.label }),
|
|
1408
|
+
child.count != null ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-sidenav-count", children: child.count }) : null
|
|
1409
|
+
]
|
|
1410
|
+
},
|
|
1411
|
+
child.id
|
|
1412
|
+
);
|
|
1413
|
+
}) })
|
|
1414
|
+
] }, item.id);
|
|
1415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1011
1416
|
"nav",
|
|
1012
1417
|
{
|
|
1013
1418
|
className: cx("pire-sidenav", className),
|
|
@@ -1015,40 +1420,39 @@ function SideNav({ groups, value, onChange, collapsed, footer, className, ...res
|
|
|
1015
1420
|
"aria-label": "Main navigation",
|
|
1016
1421
|
...rest,
|
|
1017
1422
|
children: [
|
|
1018
|
-
groups.map((group, gi) =>
|
|
1019
|
-
|
|
1020
|
-
group.items.map((item) => {
|
|
1021
|
-
const
|
|
1022
|
-
|
|
1023
|
-
|
|
1423
|
+
groups.map((group, gi) => {
|
|
1424
|
+
const hasSections = !collapsed && group.items.some((item) => item.items?.length);
|
|
1425
|
+
const rows = group.items.map((item) => {
|
|
1426
|
+
const isGroup = Boolean(item.items?.length);
|
|
1427
|
+
if (isGroup && !collapsed) return renderSection(item);
|
|
1428
|
+
return renderRow(item, () => isGroup ? toggleExpanded(item.id) : onChange?.(item.id), isGroup);
|
|
1429
|
+
});
|
|
1430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pire-sidenav-group", children: [
|
|
1431
|
+
group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
|
|
1432
|
+
hasSections ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1433
|
+
import_react_aria_components18.DisclosureGroup,
|
|
1024
1434
|
{
|
|
1025
|
-
className: "pire-sidenav-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
children:
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
item.id
|
|
1036
|
-
);
|
|
1037
|
-
return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
|
|
1038
|
-
})
|
|
1039
|
-
] }, group.label ?? gi)),
|
|
1040
|
-
footer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
|
|
1435
|
+
className: "pire-sidenav-tree",
|
|
1436
|
+
allowsMultipleExpanded: true,
|
|
1437
|
+
expandedKeys: expanded,
|
|
1438
|
+
onExpandedChange: handleExpandedChange,
|
|
1439
|
+
children: rows
|
|
1440
|
+
}
|
|
1441
|
+
) : rows
|
|
1442
|
+
] }, group.label ?? gi);
|
|
1443
|
+
}),
|
|
1444
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
|
|
1041
1445
|
]
|
|
1042
1446
|
}
|
|
1043
1447
|
);
|
|
1044
1448
|
}
|
|
1045
1449
|
|
|
1046
1450
|
// src/components/navigation/Tabs.tsx
|
|
1047
|
-
var
|
|
1048
|
-
var
|
|
1451
|
+
var import_react_aria_components19 = require("react-aria-components");
|
|
1452
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1049
1453
|
function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
|
|
1050
|
-
return /* @__PURE__ */ (0,
|
|
1051
|
-
|
|
1454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1455
|
+
import_react_aria_components19.Tabs,
|
|
1052
1456
|
{
|
|
1053
1457
|
className,
|
|
1054
1458
|
style,
|
|
@@ -1056,23 +1460,23 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
|
|
|
1056
1460
|
defaultSelectedKey: defaultValue,
|
|
1057
1461
|
onSelectionChange: (k) => onChange?.(String(k)),
|
|
1058
1462
|
children: [
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1463
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_aria_components19.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
|
|
1464
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: item.icon, size: 16 }) : null,
|
|
1061
1465
|
item.label,
|
|
1062
|
-
item.count != null ? /* @__PURE__ */ (0,
|
|
1466
|
+
item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
|
|
1063
1467
|
] }) }),
|
|
1064
|
-
items.map((item) => /* @__PURE__ */ (0,
|
|
1468
|
+
items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
|
|
1065
1469
|
]
|
|
1066
1470
|
}
|
|
1067
1471
|
);
|
|
1068
1472
|
}
|
|
1069
1473
|
|
|
1070
1474
|
// src/components/navigation/Breadcrumb.tsx
|
|
1071
|
-
var
|
|
1072
|
-
var
|
|
1475
|
+
var import_react_aria_components20 = require("react-aria-components");
|
|
1476
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1073
1477
|
function Breadcrumb({ items, onNavigate, className, style }) {
|
|
1074
|
-
return /* @__PURE__ */ (0,
|
|
1075
|
-
|
|
1478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1479
|
+
import_react_aria_components20.Breadcrumbs,
|
|
1076
1480
|
{
|
|
1077
1481
|
className: cx("pire-breadcrumbs", className),
|
|
1078
1482
|
style,
|
|
@@ -1080,9 +1484,9 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1080
1484
|
onAction: (key) => onNavigate?.(String(key)),
|
|
1081
1485
|
children: (item) => {
|
|
1082
1486
|
const last = items[items.length - 1] === item;
|
|
1083
|
-
return /* @__PURE__ */ (0,
|
|
1084
|
-
last ? item.label : /* @__PURE__ */ (0,
|
|
1085
|
-
last ? null : /* @__PURE__ */ (0,
|
|
1487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_aria_components20.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
|
|
1488
|
+
last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Link, { href: item.href, children: item.label }),
|
|
1489
|
+
last ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
|
|
1086
1490
|
] });
|
|
1087
1491
|
}
|
|
1088
1492
|
}
|
|
@@ -1090,7 +1494,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
|
|
|
1090
1494
|
}
|
|
1091
1495
|
|
|
1092
1496
|
// src/components/navigation/Pagination.tsx
|
|
1093
|
-
var
|
|
1497
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1094
1498
|
function Pagination({
|
|
1095
1499
|
page = 1,
|
|
1096
1500
|
pageSize = 25,
|
|
@@ -1104,15 +1508,15 @@ function Pagination({
|
|
|
1104
1508
|
const pages = Math.max(1, Math.ceil(total / pageSize));
|
|
1105
1509
|
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
|
1106
1510
|
const to = Math.min(total, page * pageSize);
|
|
1107
|
-
return /* @__PURE__ */ (0,
|
|
1108
|
-
/* @__PURE__ */ (0,
|
|
1511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": "Pagination", children: [
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "pire-pagination-count", children: [
|
|
1109
1513
|
from.toLocaleString(),
|
|
1110
1514
|
"\u2013",
|
|
1111
1515
|
to.toLocaleString(),
|
|
1112
1516
|
" of ",
|
|
1113
1517
|
total.toLocaleString()
|
|
1114
1518
|
] }),
|
|
1115
|
-
/* @__PURE__ */ (0,
|
|
1519
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1116
1520
|
IconButton,
|
|
1117
1521
|
{
|
|
1118
1522
|
icon: "chevron-left",
|
|
@@ -1123,13 +1527,13 @@ function Pagination({
|
|
|
1123
1527
|
onPress: () => onPageChange?.(page - 1)
|
|
1124
1528
|
}
|
|
1125
1529
|
),
|
|
1126
|
-
/* @__PURE__ */ (0,
|
|
1530
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "pire-pagination-count", "aria-live": "polite", children: [
|
|
1127
1531
|
"Page ",
|
|
1128
1532
|
page,
|
|
1129
1533
|
" of ",
|
|
1130
1534
|
pages
|
|
1131
1535
|
] }),
|
|
1132
|
-
/* @__PURE__ */ (0,
|
|
1536
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1133
1537
|
IconButton,
|
|
1134
1538
|
{
|
|
1135
1539
|
icon: "chevron-right",
|
|
@@ -1140,7 +1544,7 @@ function Pagination({
|
|
|
1140
1544
|
onPress: () => onPageChange?.(page + 1)
|
|
1141
1545
|
}
|
|
1142
1546
|
),
|
|
1143
|
-
onPageSizeChange ? /* @__PURE__ */ (0,
|
|
1547
|
+
onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1144
1548
|
Select,
|
|
1145
1549
|
{
|
|
1146
1550
|
"aria-label": "Rows per page",
|
|
@@ -1156,7 +1560,7 @@ function Pagination({
|
|
|
1156
1560
|
}
|
|
1157
1561
|
|
|
1158
1562
|
// src/components/feedback/InlineMessage.tsx
|
|
1159
|
-
var
|
|
1563
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1160
1564
|
var KIND_ICON = {
|
|
1161
1565
|
info: "info",
|
|
1162
1566
|
success: "check-circle-2",
|
|
@@ -1165,7 +1569,7 @@ var KIND_ICON = {
|
|
|
1165
1569
|
};
|
|
1166
1570
|
function InlineMessage({ kind = "info", title, action, onClose, children, className, ...rest }) {
|
|
1167
1571
|
const assertive = kind === "error" || kind === "warning";
|
|
1168
|
-
return /* @__PURE__ */ (0,
|
|
1572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1169
1573
|
"div",
|
|
1170
1574
|
{
|
|
1171
1575
|
className: cx("pire-msg", className),
|
|
@@ -1174,21 +1578,21 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
|
|
|
1174
1578
|
"aria-live": assertive ? "assertive" : "polite",
|
|
1175
1579
|
...rest,
|
|
1176
1580
|
children: [
|
|
1177
|
-
/* @__PURE__ */ (0,
|
|
1178
|
-
/* @__PURE__ */ (0,
|
|
1179
|
-
title ? /* @__PURE__ */ (0,
|
|
1180
|
-
children ? /* @__PURE__ */ (0,
|
|
1581
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
|
|
1582
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
|
|
1583
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pire-msg-title", children: title }) : null,
|
|
1584
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pire-msg-body", children }) : null,
|
|
1181
1585
|
action
|
|
1182
1586
|
] }),
|
|
1183
|
-
onClose ? /* @__PURE__ */ (0,
|
|
1587
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { icon: "x", label: "Dismiss message", size: "sm", onPress: onClose }) : null
|
|
1184
1588
|
]
|
|
1185
1589
|
}
|
|
1186
1590
|
);
|
|
1187
1591
|
}
|
|
1188
1592
|
|
|
1189
1593
|
// src/components/feedback/ProgressBar.tsx
|
|
1190
|
-
var
|
|
1191
|
-
var
|
|
1594
|
+
var import_react_aria_components21 = require("react-aria-components");
|
|
1595
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1192
1596
|
function ProgressBar({
|
|
1193
1597
|
value = 0,
|
|
1194
1598
|
minValue = 0,
|
|
@@ -1201,8 +1605,8 @@ function ProgressBar({
|
|
|
1201
1605
|
className,
|
|
1202
1606
|
style
|
|
1203
1607
|
}) {
|
|
1204
|
-
return /* @__PURE__ */ (0,
|
|
1205
|
-
|
|
1608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1609
|
+
import_react_aria_components21.ProgressBar,
|
|
1206
1610
|
{
|
|
1207
1611
|
className: cx("pire-progress", className),
|
|
1208
1612
|
"data-status": status,
|
|
@@ -1212,20 +1616,20 @@ function ProgressBar({
|
|
|
1212
1616
|
maxValue,
|
|
1213
1617
|
isIndeterminate,
|
|
1214
1618
|
style,
|
|
1215
|
-
children: ({ percentage, valueText }) => /* @__PURE__ */ (0,
|
|
1216
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
1217
|
-
label ? /* @__PURE__ */ (0,
|
|
1218
|
-
showValue && !isIndeterminate ? /* @__PURE__ */ (0,
|
|
1619
|
+
children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
1620
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "pire-progress-head", children: [
|
|
1621
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria_components21.Label, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {}),
|
|
1622
|
+
showValue && !isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-numeric", children: valueText }) : null
|
|
1219
1623
|
] }) : null,
|
|
1220
|
-
/* @__PURE__ */ (0,
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pire-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
|
|
1221
1625
|
] })
|
|
1222
1626
|
}
|
|
1223
1627
|
);
|
|
1224
1628
|
}
|
|
1225
1629
|
|
|
1226
1630
|
// src/components/feedback/Toast.tsx
|
|
1227
|
-
var
|
|
1228
|
-
var
|
|
1631
|
+
var React10 = __toESM(require("react"), 1);
|
|
1632
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1229
1633
|
var KIND_ICON2 = {
|
|
1230
1634
|
info: "info",
|
|
1231
1635
|
success: "check-circle-2",
|
|
@@ -1233,7 +1637,7 @@ var KIND_ICON2 = {
|
|
|
1233
1637
|
error: "alert-octagon"
|
|
1234
1638
|
};
|
|
1235
1639
|
function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
|
|
1236
|
-
return /* @__PURE__ */ (0,
|
|
1640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1237
1641
|
"div",
|
|
1238
1642
|
{
|
|
1239
1643
|
className: cx("pire-toast", className),
|
|
@@ -1242,39 +1646,84 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
|
|
|
1242
1646
|
"aria-live": kind === "error" ? "assertive" : "polite",
|
|
1243
1647
|
...rest,
|
|
1244
1648
|
children: [
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1246
|
-
/* @__PURE__ */ (0,
|
|
1247
|
-
onClose ? /* @__PURE__ */ (0,
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { flex: 1 }, children }),
|
|
1651
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { icon: "x", label: "Dismiss", size: "sm", variant: "inverse", onPress: onClose }) : null
|
|
1248
1652
|
]
|
|
1249
1653
|
}
|
|
1250
1654
|
);
|
|
1251
1655
|
}
|
|
1252
|
-
var ToastContext =
|
|
1656
|
+
var ToastContext = React10.createContext(null);
|
|
1253
1657
|
function ToastProvider({ children, timeout = 6e3 }) {
|
|
1254
|
-
const [toasts, setToasts] =
|
|
1255
|
-
const close =
|
|
1256
|
-
const add =
|
|
1658
|
+
const [toasts, setToasts] = React10.useState([]);
|
|
1659
|
+
const close = React10.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
|
|
1660
|
+
const add = React10.useCallback((toast) => {
|
|
1257
1661
|
const id = Math.random().toString(36).slice(2);
|
|
1258
1662
|
setToasts((t) => [...t, { ...toast, id }]);
|
|
1259
1663
|
const ms = toast.timeout ?? timeout;
|
|
1260
1664
|
if (ms > 0) setTimeout(() => close(id), ms);
|
|
1261
1665
|
return id;
|
|
1262
1666
|
}, [close, timeout]);
|
|
1263
|
-
const value =
|
|
1264
|
-
return /* @__PURE__ */ (0,
|
|
1667
|
+
const value = React10.useMemo(() => ({ add, close }), [add, close]);
|
|
1668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ToastContext.Provider, { value, children: [
|
|
1265
1669
|
children,
|
|
1266
|
-
/* @__PURE__ */ (0,
|
|
1670
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": "Notifications", children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
|
|
1267
1671
|
] });
|
|
1268
1672
|
}
|
|
1269
1673
|
function useToast() {
|
|
1270
|
-
const ctx =
|
|
1674
|
+
const ctx = React10.useContext(ToastContext);
|
|
1271
1675
|
if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
|
|
1272
1676
|
return ctx;
|
|
1273
1677
|
}
|
|
1274
1678
|
|
|
1679
|
+
// src/components/feedback/Skeleton.tsx
|
|
1680
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1681
|
+
function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
|
|
1682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1683
|
+
"div",
|
|
1684
|
+
{
|
|
1685
|
+
className: cx("pire-skeleton", className),
|
|
1686
|
+
"data-shape": shape,
|
|
1687
|
+
"aria-hidden": "true",
|
|
1688
|
+
style: { width, height, ...style },
|
|
1689
|
+
...rest
|
|
1690
|
+
}
|
|
1691
|
+
);
|
|
1692
|
+
}
|
|
1693
|
+
var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
|
|
1694
|
+
function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
|
|
1695
|
+
const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
|
|
1696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1697
|
+
"div",
|
|
1698
|
+
{
|
|
1699
|
+
className: cx("pire-skeleton-row", className),
|
|
1700
|
+
"data-density": density,
|
|
1701
|
+
"aria-hidden": "true",
|
|
1702
|
+
style,
|
|
1703
|
+
...rest,
|
|
1704
|
+
children: cells.map((c, i) => {
|
|
1705
|
+
const align = c.numeric ? "right" : c.align ?? "left";
|
|
1706
|
+
return (
|
|
1707
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1709
|
+
"div",
|
|
1710
|
+
{
|
|
1711
|
+
className: "pire-skeleton-cell",
|
|
1712
|
+
"data-align": align,
|
|
1713
|
+
style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
|
|
1714
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
|
|
1715
|
+
},
|
|
1716
|
+
i
|
|
1717
|
+
)
|
|
1718
|
+
);
|
|
1719
|
+
})
|
|
1720
|
+
}
|
|
1721
|
+
);
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1275
1724
|
// src/components/data/KpiTile.tsx
|
|
1276
|
-
var
|
|
1277
|
-
var
|
|
1725
|
+
var import_react_aria_components22 = require("react-aria-components");
|
|
1726
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1278
1727
|
function KpiTile({
|
|
1279
1728
|
label,
|
|
1280
1729
|
value,
|
|
@@ -1290,50 +1739,50 @@ function KpiTile({
|
|
|
1290
1739
|
style
|
|
1291
1740
|
}) {
|
|
1292
1741
|
const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
|
|
1293
|
-
const body = /* @__PURE__ */ (0,
|
|
1294
|
-
/* @__PURE__ */ (0,
|
|
1295
|
-
icon ? /* @__PURE__ */ (0,
|
|
1742
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-label", children: [
|
|
1744
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon, size: 16 }) : null,
|
|
1296
1745
|
label
|
|
1297
1746
|
] }),
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-value", children: [
|
|
1299
1748
|
value,
|
|
1300
|
-
unit ? /* @__PURE__ */ (0,
|
|
1749
|
+
unit ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
|
|
1301
1750
|
] }),
|
|
1302
|
-
delta ? /* @__PURE__ */ (0,
|
|
1303
|
-
deltaDirection ? /* @__PURE__ */ (0,
|
|
1751
|
+
delta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
|
|
1752
|
+
deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
|
|
1304
1753
|
delta
|
|
1305
1754
|
] }) : null,
|
|
1306
|
-
footnote ? /* @__PURE__ */ (0,
|
|
1755
|
+
footnote ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-kpi-foot", children: footnote }) : null
|
|
1307
1756
|
] });
|
|
1308
1757
|
const props = { className: cx("pire-kpi", className), "data-status": status, style };
|
|
1309
|
-
return onPress ? /* @__PURE__ */ (0,
|
|
1758
|
+
return onPress ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components22.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...props, children: body });
|
|
1310
1759
|
}
|
|
1311
1760
|
|
|
1312
1761
|
// src/components/data/ObjectHeader.tsx
|
|
1313
|
-
var
|
|
1762
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1314
1763
|
function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
|
|
1315
|
-
return /* @__PURE__ */ (0,
|
|
1764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
|
|
1316
1765
|
breadcrumb,
|
|
1317
|
-
/* @__PURE__ */ (0,
|
|
1318
|
-
/* @__PURE__ */ (0,
|
|
1319
|
-
/* @__PURE__ */ (0,
|
|
1320
|
-
subtitle || id ? /* @__PURE__ */ (0,
|
|
1766
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "pire-objheader-row", children: [
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", { className: "pire-objheader-title", children: title }),
|
|
1769
|
+
subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "pire-objheader-sub", children: [
|
|
1321
1770
|
subtitle,
|
|
1322
|
-
id ? /* @__PURE__ */ (0,
|
|
1771
|
+
id ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-objheader-id", children: id }) : null
|
|
1323
1772
|
] }) : null
|
|
1324
1773
|
] }),
|
|
1325
1774
|
badge,
|
|
1326
|
-
actions ? /* @__PURE__ */ (0,
|
|
1775
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
|
|
1327
1776
|
] }),
|
|
1328
|
-
facts?.length ? /* @__PURE__ */ (0,
|
|
1329
|
-
/* @__PURE__ */ (0,
|
|
1330
|
-
/* @__PURE__ */ (0,
|
|
1777
|
+
facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
|
|
1778
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
|
|
1779
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
|
|
1331
1780
|
] }, fact.label)) }) : null
|
|
1332
1781
|
] });
|
|
1333
1782
|
}
|
|
1334
1783
|
|
|
1335
1784
|
// src/components/data/FilterBar.tsx
|
|
1336
|
-
var
|
|
1785
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1337
1786
|
function FilterBar({
|
|
1338
1787
|
children,
|
|
1339
1788
|
activeFilters = [],
|
|
@@ -1345,115 +1794,115 @@ function FilterBar({
|
|
|
1345
1794
|
className,
|
|
1346
1795
|
...rest
|
|
1347
1796
|
}) {
|
|
1348
|
-
return /* @__PURE__ */ (0,
|
|
1349
|
-
/* @__PURE__ */ (0,
|
|
1797
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { className: cx("pire-filterbar", className), "aria-label": "Filters", ...rest, children: [
|
|
1798
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "pire-filterbar-controls", children: [
|
|
1350
1799
|
children,
|
|
1351
|
-
onGo ? /* @__PURE__ */ (0,
|
|
1800
|
+
onGo ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "primary", onPress: onGo, children: "Go" }) : null
|
|
1352
1801
|
] }),
|
|
1353
|
-
activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0,
|
|
1354
|
-
activeFilters.map((filter) => /* @__PURE__ */ (0,
|
|
1355
|
-
activeFilters.length && onClear ? /* @__PURE__ */ (0,
|
|
1356
|
-
resultLabel ? /* @__PURE__ */ (0,
|
|
1357
|
-
actions ? /* @__PURE__ */ (0,
|
|
1802
|
+
activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "pire-filterbar-foot", children: [
|
|
1803
|
+
activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
|
|
1804
|
+
activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: "Clear all" }) : null,
|
|
1805
|
+
resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
|
|
1806
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
|
|
1358
1807
|
] }) : null
|
|
1359
1808
|
] });
|
|
1360
1809
|
}
|
|
1361
1810
|
|
|
1362
1811
|
// src/components/data/DescriptionList.tsx
|
|
1363
|
-
var
|
|
1812
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1364
1813
|
function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
|
|
1365
|
-
return /* @__PURE__ */ (0,
|
|
1814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1366
1815
|
"dl",
|
|
1367
1816
|
{
|
|
1368
1817
|
className: cx("pire-dl", className),
|
|
1369
1818
|
"data-layout": layout,
|
|
1370
1819
|
style: { ...layout === "grid" ? { "--pire-dl-cols": columns } : null, ...style },
|
|
1371
1820
|
...rest,
|
|
1372
|
-
children: items.map((item, i) => /* @__PURE__ */ (0,
|
|
1373
|
-
/* @__PURE__ */ (0,
|
|
1821
|
+
children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
|
|
1822
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dt", { className: "pire-dl-term", children: [
|
|
1374
1823
|
item.label,
|
|
1375
1824
|
item.hint
|
|
1376
1825
|
] }),
|
|
1377
|
-
/* @__PURE__ */ (0,
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
|
|
1378
1827
|
] }, i))
|
|
1379
1828
|
}
|
|
1380
1829
|
);
|
|
1381
1830
|
}
|
|
1382
1831
|
|
|
1383
1832
|
// src/components/data/Timeline.tsx
|
|
1384
|
-
var
|
|
1833
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1385
1834
|
function Timeline({ entries, reverse = false, className, ...rest }) {
|
|
1386
1835
|
const list = reverse ? [...entries].reverse() : entries;
|
|
1387
|
-
return /* @__PURE__ */ (0,
|
|
1388
|
-
/* @__PURE__ */ (0,
|
|
1389
|
-
/* @__PURE__ */ (0,
|
|
1390
|
-
entry.actor ? /* @__PURE__ */ (0,
|
|
1836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "pire-timeline-item", children: [
|
|
1837
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
|
|
1839
|
+
entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
|
|
1391
1840
|
] }, entry.id ?? i)) });
|
|
1392
1841
|
}
|
|
1393
1842
|
|
|
1394
1843
|
// src/components/data/LinkList.tsx
|
|
1395
|
-
var
|
|
1396
|
-
var
|
|
1844
|
+
var import_react_aria_components23 = require("react-aria-components");
|
|
1845
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1397
1846
|
function LinkList({ items, onSelect, className, ...rest }) {
|
|
1398
|
-
return /* @__PURE__ */ (0,
|
|
1399
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
1400
|
-
item.key ? /* @__PURE__ */ (0,
|
|
1401
|
-
item.text ? /* @__PURE__ */ (0,
|
|
1847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_aria_components23.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
|
|
1848
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
|
|
1849
|
+
item.key ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
|
|
1850
|
+
item.text ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
|
|
1402
1851
|
item.trailing
|
|
1403
1852
|
] }, item.id)) });
|
|
1404
1853
|
}
|
|
1405
1854
|
|
|
1406
1855
|
// src/components/layout/PageHeader.tsx
|
|
1407
|
-
var
|
|
1856
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1408
1857
|
function PageHeader({ title, subtitle, actions, className, ...rest }) {
|
|
1409
|
-
return /* @__PURE__ */ (0,
|
|
1410
|
-
/* @__PURE__ */ (0,
|
|
1411
|
-
/* @__PURE__ */ (0,
|
|
1412
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
1858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
|
|
1859
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h1", { className: "pire-pageheader-title", children: title }),
|
|
1861
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
|
|
1413
1862
|
] }),
|
|
1414
|
-
actions ? /* @__PURE__ */ (0,
|
|
1863
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
|
|
1415
1864
|
] });
|
|
1416
1865
|
}
|
|
1417
1866
|
|
|
1418
1867
|
// src/components/layout/SectionHeader.tsx
|
|
1419
|
-
var
|
|
1868
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
1420
1869
|
function SectionHeader({ title, meta, actions, className, ...rest }) {
|
|
1421
|
-
return /* @__PURE__ */ (0,
|
|
1422
|
-
/* @__PURE__ */ (0,
|
|
1423
|
-
meta ? /* @__PURE__ */ (0,
|
|
1424
|
-
actions ? /* @__PURE__ */ (0,
|
|
1870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
|
|
1871
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pire-eyebrow", children: title }),
|
|
1872
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
|
|
1873
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
|
|
1425
1874
|
] });
|
|
1426
1875
|
}
|
|
1427
1876
|
|
|
1428
1877
|
// src/components/layout/SelectionBar.tsx
|
|
1429
|
-
var
|
|
1878
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
1430
1879
|
function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
|
|
1431
1880
|
if (!count) return null;
|
|
1432
|
-
return /* @__PURE__ */ (0,
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
|
|
1882
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "pire-selectionbar-count", children: [
|
|
1434
1883
|
count.toLocaleString(),
|
|
1435
1884
|
" ",
|
|
1436
1885
|
noun,
|
|
1437
1886
|
count === 1 ? "" : "s",
|
|
1438
1887
|
" selected"
|
|
1439
1888
|
] }),
|
|
1440
|
-
children ? /* @__PURE__ */ (0,
|
|
1441
|
-
actions ? /* @__PURE__ */ (0,
|
|
1889
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
|
|
1890
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
|
|
1442
1891
|
] });
|
|
1443
1892
|
}
|
|
1444
1893
|
|
|
1445
1894
|
// src/components/layout/FooterBar.tsx
|
|
1446
|
-
var
|
|
1895
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
1447
1896
|
function FooterBar({ note, actions, children, className, ...rest }) {
|
|
1448
|
-
return /* @__PURE__ */ (0,
|
|
1449
|
-
note ? /* @__PURE__ */ (0,
|
|
1897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
|
|
1898
|
+
note ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
|
|
1450
1899
|
children,
|
|
1451
|
-
actions ? /* @__PURE__ */ (0,
|
|
1900
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
|
|
1452
1901
|
] });
|
|
1453
1902
|
}
|
|
1454
1903
|
|
|
1455
1904
|
// src/components/patterns/ConfirmDialog.tsx
|
|
1456
|
-
var
|
|
1905
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
1457
1906
|
function ConfirmDialog({
|
|
1458
1907
|
isOpen,
|
|
1459
1908
|
title,
|
|
@@ -1467,7 +1916,7 @@ function ConfirmDialog({
|
|
|
1467
1916
|
onConfirm,
|
|
1468
1917
|
onCancel
|
|
1469
1918
|
}) {
|
|
1470
|
-
return /* @__PURE__ */ (0,
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
1471
1920
|
Dialog,
|
|
1472
1921
|
{
|
|
1473
1922
|
isOpen,
|
|
@@ -1477,12 +1926,12 @@ function ConfirmDialog({
|
|
|
1477
1926
|
onClose: onCancel,
|
|
1478
1927
|
isDismissable: !isBusy,
|
|
1479
1928
|
showClose: false,
|
|
1480
|
-
footer: /* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1929
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
|
|
1930
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
|
|
1931
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
|
|
1483
1932
|
] }),
|
|
1484
1933
|
children: [
|
|
1485
|
-
consequence ? /* @__PURE__ */ (0,
|
|
1934
|
+
consequence ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
|
|
1486
1935
|
children
|
|
1487
1936
|
]
|
|
1488
1937
|
}
|
|
@@ -1490,11 +1939,11 @@ function ConfirmDialog({
|
|
|
1490
1939
|
}
|
|
1491
1940
|
|
|
1492
1941
|
// src/components/patterns/SidePanel.tsx
|
|
1493
|
-
var
|
|
1494
|
-
var
|
|
1942
|
+
var import_react_aria_components24 = require("react-aria-components");
|
|
1943
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
1495
1944
|
function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
|
|
1496
|
-
return /* @__PURE__ */ (0,
|
|
1497
|
-
|
|
1945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
1946
|
+
import_react_aria_components24.ModalOverlay,
|
|
1498
1947
|
{
|
|
1499
1948
|
className: "pire-sidepanel-overlay",
|
|
1500
1949
|
isOpen,
|
|
@@ -1502,34 +1951,34 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
|
|
|
1502
1951
|
onOpenChange: (o) => {
|
|
1503
1952
|
if (!o) onClose?.();
|
|
1504
1953
|
},
|
|
1505
|
-
children: /* @__PURE__ */ (0,
|
|
1506
|
-
/* @__PURE__ */ (0,
|
|
1507
|
-
/* @__PURE__ */ (0,
|
|
1508
|
-
/* @__PURE__ */ (0,
|
|
1509
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
1954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components24.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_aria_components24.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
|
|
1955
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("header", { className: "pire-dialog-head", children: [
|
|
1956
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1957
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components24.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
|
|
1958
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
|
|
1510
1959
|
] }),
|
|
1511
|
-
/* @__PURE__ */ (0,
|
|
1960
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconButton, { icon: "x", label: "Close panel", size: "sm", onPress: onClose })
|
|
1512
1961
|
] }),
|
|
1513
|
-
/* @__PURE__ */ (0,
|
|
1514
|
-
footer ? /* @__PURE__ */ (0,
|
|
1962
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
|
|
1963
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
|
|
1515
1964
|
] }) })
|
|
1516
1965
|
}
|
|
1517
1966
|
);
|
|
1518
1967
|
}
|
|
1519
1968
|
|
|
1520
1969
|
// src/components/patterns/EmptyState.tsx
|
|
1521
|
-
var
|
|
1970
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
1522
1971
|
function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
|
|
1523
|
-
return /* @__PURE__ */ (0,
|
|
1524
|
-
/* @__PURE__ */ (0,
|
|
1525
|
-
title ? /* @__PURE__ */ (0,
|
|
1526
|
-
children ? /* @__PURE__ */ (0,
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
|
|
1973
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
|
|
1974
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
|
|
1975
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
|
|
1527
1976
|
action
|
|
1528
1977
|
] });
|
|
1529
1978
|
}
|
|
1530
1979
|
|
|
1531
1980
|
// src/index.ts
|
|
1532
|
-
var
|
|
1981
|
+
var import_react_aria_components25 = require("react-aria-components");
|
|
1533
1982
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1534
1983
|
0 && (module.exports = {
|
|
1535
1984
|
Avatar,
|
|
@@ -1559,6 +2008,7 @@ var import_react_aria_components23 = require("react-aria-components");
|
|
|
1559
2008
|
Menu,
|
|
1560
2009
|
MenuItem,
|
|
1561
2010
|
MenuTrigger,
|
|
2011
|
+
MultiComboBox,
|
|
1562
2012
|
NumberField,
|
|
1563
2013
|
ObjectHeader,
|
|
1564
2014
|
PageHeader,
|
|
@@ -1575,9 +2025,12 @@ var import_react_aria_components23 = require("react-aria-components");
|
|
|
1575
2025
|
ShellBar,
|
|
1576
2026
|
SideNav,
|
|
1577
2027
|
SidePanel,
|
|
2028
|
+
Skeleton,
|
|
2029
|
+
SkeletonTableRow,
|
|
1578
2030
|
Switch,
|
|
1579
2031
|
Tabs,
|
|
1580
2032
|
Tag,
|
|
2033
|
+
TextArea,
|
|
1581
2034
|
Timeline,
|
|
1582
2035
|
Toast,
|
|
1583
2036
|
ToastProvider,
|