@xenide-io/the-old-ui-theme 0.2.5 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-FWCSY2DS.mjs +37 -0
- package/dist/chunk-SHF57J7U.mjs +2910 -0
- package/dist/index-CmS6hcUk.d.mts +753 -0
- package/dist/index-CmS6hcUk.d.ts +753 -0
- package/dist/index.d.mts +5 -755
- package/dist/index.d.ts +5 -755
- package/dist/index.js +655 -378
- package/dist/index.mjs +348 -2695
- package/dist/tailwind-preset.mjs +2 -0
- package/dist/ui.d.mts +3 -0
- package/dist/ui.d.ts +3 -0
- package/dist/ui.js +2946 -0
- package/dist/ui.mjs +139 -0
- package/package.json +13 -5
- package/src/components/charts/index.ts +8 -0
- package/src/components/charts/ph-insight-charts.tsx +162 -0
- package/src/components/dashboard/DashboardFiltersBar.tsx +19 -0
- package/src/components/dashboard/DashboardGrid.tsx +23 -0
- package/src/components/dashboard/DashboardInsightPlaceholder.tsx +37 -0
- package/src/components/dashboard/DashboardKpiCard.tsx +25 -0
- package/src/components/dashboard/DashboardToolbar.tsx +23 -0
- package/src/components/dashboard/DashboardWell.tsx +10 -0
- package/src/components/dashboard/InsightMiniCard.tsx +26 -0
- package/src/components/dashboard/InsightShell.tsx +37 -0
- package/src/components/dashboard/InsightShellHeader.tsx +22 -0
- package/src/components/dashboard/MiniTrendBars.tsx +51 -0
- package/src/components/dashboard/index.ts +31 -0
- package/src/components/dashboard/types.ts +9 -0
- package/src/components/icons/IconBase.tsx +39 -0
- package/src/components/icons/createIconBase.tsx +27 -0
- package/src/components/icons/icons.tsx +367 -0
- package/src/components/icons/index.ts +3 -0
- package/src/components/sections/AccordionShowcase.tsx +45 -0
- package/src/components/sections/AlertShowcase.tsx +39 -0
- package/src/components/sections/AvatarShowcase.tsx +80 -0
- package/src/components/sections/BadgeShowcase.tsx +65 -0
- package/src/components/sections/ButtonShowcase.tsx +312 -0
- package/src/components/sections/CalendarShowcase.tsx +35 -0
- package/src/components/sections/CardShowcase.tsx +143 -0
- package/src/components/sections/ChartShowcase.tsx +190 -0
- package/src/components/sections/CodeMockupShowcase.tsx +56 -0
- package/src/components/sections/ColorPalette.tsx +117 -0
- package/src/components/sections/CommandPaletteShowcase.tsx +48 -0
- package/src/components/sections/CountdownShowcase.tsx +43 -0
- package/src/components/sections/DashboardShowcase.tsx +191 -0
- package/src/components/sections/DiffShowcase.tsx +70 -0
- package/src/components/sections/DrawerShowcase.tsx +97 -0
- package/src/components/sections/DropdownShowcase.tsx +100 -0
- package/src/components/sections/EmptyStateShowcase.tsx +50 -0
- package/src/components/sections/FilterChipsShowcase.tsx +50 -0
- package/src/components/sections/FormShowcase.tsx +126 -0
- package/src/components/sections/HoverCardShowcase.tsx +50 -0
- package/src/components/sections/IconShowcase.tsx +247 -0
- package/src/components/sections/IndicatorShowcase.tsx +52 -0
- package/src/components/sections/KbdShowcase.tsx +31 -0
- package/src/components/sections/ModalShowcase.tsx +210 -0
- package/src/components/sections/NavigationShowcase.tsx +199 -0
- package/src/components/sections/ProgressShowcase.tsx +85 -0
- package/src/components/sections/SegmentedControlShowcase.tsx +49 -0
- package/src/components/sections/SetupThemeShowcase.tsx +262 -0
- package/src/components/sections/StackShowcase.tsx +33 -0
- package/src/components/sections/StatShowcase.tsx +129 -0
- package/src/components/sections/StepperShowcase.tsx +37 -0
- package/src/components/sections/SwapShowcase.tsx +91 -0
- package/src/components/sections/TabShowcase.tsx +84 -0
- package/src/components/sections/TableShowcase.tsx +140 -0
- package/src/components/sections/TimelineShowcase.tsx +83 -0
- package/src/components/sections/ToastShowcase.tsx +108 -0
- package/src/components/sections/TooltipShowcase.tsx +44 -0
- package/src/components/sections/UtilityShowcase.tsx +81 -0
- package/src/components/ui/Accordion.tsx +77 -0
- package/src/components/ui/Alert.tsx +68 -0
- package/src/components/ui/Avatar.tsx +97 -0
- package/src/components/ui/Badge.tsx +55 -0
- package/src/components/ui/Button.tsx +110 -0
- package/src/components/ui/ButtonChrome.tsx +20 -0
- package/src/components/ui/Calendar.tsx +116 -0
- package/src/components/ui/Card.tsx +60 -0
- package/src/components/ui/ChatBubble.tsx +71 -0
- package/src/components/ui/CodeBlock.tsx +48 -0
- package/src/components/ui/CollapsibleSection.tsx +49 -0
- package/src/components/ui/CommandPalette.tsx +137 -0
- package/src/components/ui/ComponentDocs.tsx +52 -0
- package/src/components/ui/Drawer.tsx +71 -0
- package/src/components/ui/DropdownMenu.tsx +138 -0
- package/src/components/ui/EmptyState.tsx +33 -0
- package/src/components/ui/FilterChips.tsx +50 -0
- package/src/components/ui/HoverCard.tsx +36 -0
- package/src/components/ui/Indicator.tsx +61 -0
- package/src/components/ui/Input.tsx +359 -0
- package/src/components/ui/Kbd.tsx +38 -0
- package/src/components/ui/Modal.tsx +75 -0
- package/src/components/ui/Navigation.tsx +94 -0
- package/src/components/ui/Panel.tsx +18 -0
- package/src/components/ui/Progress.tsx +59 -0
- package/src/components/ui/Rating.tsx +65 -0
- package/src/components/ui/SearchInput.tsx +106 -0
- package/src/components/ui/SegmentedControl.tsx +44 -0
- package/src/components/ui/ShowcaseWrapper.tsx +136 -0
- package/src/components/ui/Stat.tsx +39 -0
- package/src/components/ui/Stepper.tsx +75 -0
- package/src/components/ui/Table.tsx +55 -0
- package/src/components/ui/Tabs.tsx +53 -0
- package/src/components/ui/Terminal.tsx +54 -0
- package/src/components/ui/ThemeDomSync.tsx +17 -0
- package/src/components/ui/ThemeManager.tsx +18 -0
- package/src/components/ui/ThemeSwitcher.tsx +46 -0
- package/src/components/ui/Timeline.tsx +60 -0
- package/src/components/ui/Toast.tsx +70 -0
- package/src/components/ui/Typography.tsx +129 -0
- package/src/components/ui/index.ts +92 -0
- package/src/styles/themes.css +118 -0
package/dist/index.mjs
CHANGED
|
@@ -1,2580 +1,198 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17l-.59.59-.58.58V4h16v12zm-9.5-2H18v-2h-5.5zm3.86-5.87c.2-.2.2-.51 0-.71l-1.77-1.77c-.2-.2-.51-.2-.71 0L6 11.53V14h2.47l5.89-5.87z"
|
|
152
|
-
)
|
|
153
|
-
});
|
|
154
|
-
var IconCohort = createIconBase({
|
|
155
|
-
paths: fill(
|
|
156
|
-
"m4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58-.74.32-1.22 1.04-1.22 1.85v1.57h4.5v-1.61c0-.83.23-1.61.63-2.29zm14.87-1.1c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29v1.61h4.5zm-7.76-2.78c-1.17-.52-2.61-.9-4.24-.9s-3.07.39-4.24.9c-1.08.48-1.76 1.56-1.76 2.74v1.61h12v-1.61c0-1.18-.68-2.26-1.76-2.74zm-8.17 2.35c.09-.23.13-.39.91-.69.97-.38 1.99-.56 3.02-.56s2.05.18 3.02.56c.77.3.81.46.91.69zm3.93-8c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0-2c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
|
|
157
|
-
)
|
|
158
|
-
});
|
|
159
|
-
var IconRecording = createIconBase({
|
|
160
|
-
paths: fill(
|
|
161
|
-
"m10 8v8l5-4zm9-5h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm0 16h-14v-14h14z"
|
|
162
|
-
)
|
|
163
|
-
});
|
|
164
|
-
var IconFlare = createIconBase({
|
|
165
|
-
paths: fill(
|
|
166
|
-
"m7 11h-6v2h6zm2.17-3.24-2.12-2.12-1.41 1.41 2.12 2.12zm3.83-6.76h-2v6h2zm5.36 6.05-1.41-1.41-2.12 2.12 1.41 1.41zm-1.36 3.95v2h6v-2zm-5-2c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm2.83 7.24 2.12 2.12 1.41-1.41-2.12-2.12zm-9.19.71 1.41 1.41 2.12-2.12-1.41-1.41zm5.36 6.05h2v-6h-2z"
|
|
167
|
-
)
|
|
168
|
-
});
|
|
169
|
-
var IconSelectEvents = createIconBase({
|
|
170
|
-
paths: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
171
|
-
fill("M17.5 9L16.56 6.94L14.5 6L16.56 5.06L17.5 3L18.44 5.06L20.5 6L18.44 6.94L17.5 9Z"),
|
|
172
|
-
fill("M6 12.5L6.94 14.56L9 15.5L6.94 16.44L6 18.5L5.06 16.44L3 15.5L5.06 14.56L6 12.5Z"),
|
|
173
|
-
fill("M6 9L5.06 6.94L3 6L5.06 5.06L6 3L6.94 5.06L9 6L6.94 6.94L6 9Z"),
|
|
174
|
-
fill("M16.23 14.26L20 13L10 10L13 20L14.26 16.23L18.53 20.5L20.51 18.52L16.23 14.26Z")
|
|
175
|
-
] })
|
|
176
|
-
});
|
|
177
|
-
var IconClipboardEdit = createIconBase({
|
|
178
|
-
paths: fill(
|
|
179
|
-
"M21.04 12.13C21.18 12.13 21.31 12.19 21.42 12.3L22.7 13.58C22.92 13.79 22.92 14.14 22.7 14.35L21.7 15.35L19.65 13.3L20.65 12.3C20.76 12.19 20.9 12.13 21.04 12.13M19.07 13.88L21.12 15.93L15.06 22H13V19.94L19.07 13.88M11 19L9 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H9.18C9.6 1.84 10.7 1 12 1C13.3 1 14.4 1.84 14.82 3H19C20.1 3 21 3.9 21 5V9L19 11V5H17V7H7V5H5V19H11M12 3C11.45 3 11 3.45 11 4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4C13 3.45 12.55 3 12 3Z"
|
|
180
|
-
)
|
|
181
|
-
});
|
|
182
|
-
var IconQueryEditor = createIconBase({
|
|
183
|
-
paths: fill(
|
|
184
|
-
"M4,14V17C4,19 7.05,20.72 11,21V18.11L11.13,18C7.12,17.76 4,16.06 4,14M12,13C7.58,13 4,11.21 4,9V12C4,14.21 7.58,16 12,16C12.39,16 12.77,16 13.16,16L17,12.12C15.4,12.72 13.71,13 12,13M12,3C7.58,3 4,4.79 4,7C4,9.21 7.58,11 12,11C16.42,11 20,9.21 20,7C20,4.79 16.42,3 12,3M21,11.13C20.85,11.13 20.71,11.19 20.61,11.3L19.61,12.3L21.66,14.3L22.66,13.3C22.87,13.1 22.88,12.76 22.66,12.53L21.42,11.3C21.32,11.19 21.18,11.13 21.04,11.13M19.04,12.88L13,18.94V21H15.06L21.12,14.93L19.04,12.88Z"
|
|
185
|
-
)
|
|
186
|
-
});
|
|
187
|
-
var IconTuning = createIconBase({
|
|
188
|
-
paths: fill(
|
|
189
|
-
"M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z"
|
|
190
|
-
)
|
|
191
|
-
});
|
|
192
|
-
var IconSync = createIconBase({
|
|
193
|
-
paths: fill(
|
|
194
|
-
"m12.5 4v-3l-4 4 4 4v-3c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46c.78-1.23 1.24-2.69 1.24-4.26 0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8l-1.46-1.46c-.78 1.23-1.24 2.69-1.24 4.26 0 4.42 3.58 8 8 8v3l4-4-4-4z"
|
|
195
|
-
)
|
|
196
|
-
});
|
|
197
|
-
var IconPlayCircle = createIconBase({
|
|
198
|
-
paths: fill(
|
|
199
|
-
"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM9.5 16.5L16.5 12L9.5 7.5V16.5Z"
|
|
200
|
-
)
|
|
201
|
-
});
|
|
202
|
-
var IconGridView = createIconBase({
|
|
203
|
-
paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
|
|
204
|
-
});
|
|
205
|
-
var IconListView = createIconBase({
|
|
206
|
-
paths: fill(
|
|
207
|
-
"M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"
|
|
208
|
-
)
|
|
209
|
-
});
|
|
210
|
-
var IconPremium = createIconBase({
|
|
211
|
-
paths: fill(
|
|
212
|
-
"m9.68 13.69 2.32-1.76 2.31 1.76-.88-2.85 2.32-1.84h-2.84l-.91-2.81-.91 2.81h-2.84l2.31 1.84zm10.32-3.69c0-4.42-3.58-8-8-8s-8 3.58-8 8c0 2.03.76 3.87 2 5.28v7.72l6-2 6 2v-7.72c1.24-1.41 2-3.25 2-5.28zm-8-6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6zm0 15-4 1.02v-3.1c1.18.68 2.54 1.08 4 1.08s2.82-.4 4-1.08v3.1z"
|
|
213
|
-
)
|
|
214
|
-
});
|
|
215
|
-
var IconGift = createIconBase({
|
|
216
|
-
paths: fill(
|
|
217
|
-
"M14.4495 4.55495C15.264 4.31223 15.8631 4.48426 16.1 4.80007C16.4013 5.20182 16.4765 5.57305 16.4336 5.91424C16.3888 6.27088 16.2084 6.63998 15.9211 7.00139C15.3397 7.73275 14.4193 8.30877 13.8244 8.53186C13.598 8.61674 13.4648 8.85138 13.508 9.08924C13.5511 9.32709 13.7582 9.50002 13.9999 9.50002L19.4999 9.50002V12.5H17.9999C17.7237 12.5 17.4999 12.7239 17.4999 13V20.5H6.49988V14.5C6.49988 14.2239 6.27602 14 5.99988 14C5.72374 14 5.49988 14.2239 5.49988 14.5V21C5.49988 21.2762 5.72374 21.5 5.99988 21.5H17.9999C18.276 21.5 18.4999 21.2762 18.4999 21V13.5H19.9999C20.276 13.5 20.4999 13.2762 20.4999 13V9.00002C20.4999 8.86741 20.4472 8.74023 20.3534 8.64646C20.2597 8.5527 20.1325 8.50002 19.9999 8.50002L15.8202 8.50002C16.1407 8.24235 16.4465 7.94742 16.7039 7.62365C17.0625 7.17257 17.3508 6.63541 17.4258 6.03894C17.5027 5.42702 17.3487 4.79826 16.8999 4.20003C16.2882 3.3845 15.1373 3.30652 14.1639 3.5966C13.3806 3.83005 12.5842 4.3279 12.0008 5.07014C11.4285 4.33982 10.6586 3.86464 9.88727 3.64427C8.91382 3.36616 7.82238 3.47045 7.14633 4.14645C6.65753 4.63523 6.41235 5.18234 6.41347 5.75925C6.41457 6.32144 6.64952 6.84016 6.97799 7.28883C7.30058 7.72946 7.7389 8.13769 8.22434 8.50002L3.99988 8.50002C3.86727 8.50002 3.74009 8.5527 3.64632 8.64646C3.55256 8.74023 3.49988 8.86741 3.49988 9.00002V13C3.49988 13.2762 3.72374 13.5 3.99988 13.5H15.4999C15.776 13.5 15.9999 13.2762 15.9999 13C15.9999 12.7239 15.776 12.5 15.4999 12.5H4.49988V9.50002L9.99995 9.50002C10.2318 9.50002 10.4333 9.34058 10.4866 9.1149C10.5398 8.88921 10.431 8.65651 10.2236 8.55281C9.25206 8.06706 8.29723 7.39797 7.78487 6.69811C7.53216 6.35292 7.41402 6.03722 7.41347 5.7573C7.41295 5.49209 7.51758 5.1894 7.85342 4.85358C8.17738 4.52964 8.83597 4.38393 9.61256 4.6058C10.3657 4.82096 11.1212 5.36045 11.5528 6.22359C11.6375 6.39298 11.8106 6.49997 12 6.49997C12.1894 6.49997 12.3625 6.39297 12.4472 6.22358C12.8783 5.36141 13.672 4.78667 14.4495 4.55495Z"
|
|
218
|
-
)
|
|
219
|
-
});
|
|
220
|
-
var IconRobot = createIconBase({
|
|
221
|
-
paths: fill(
|
|
222
|
-
"M17.5 15.5C17.5 16.61 16.61 17.5 15.5 17.5S13.5 16.61 13.5 15.5 14.4 13.5 15.5 13.5 17.5 14.4 17.5 15.5M8.5 13.5C7.4 13.5 6.5 14.4 6.5 15.5S7.4 17.5 8.5 17.5 10.5 16.61 10.5 15.5 9.61 13.5 8.5 13.5M23 15V18C23 18.55 22.55 19 22 19H21V20C21 21.11 20.11 22 19 22H5C3.9 22 3 21.11 3 20V19H2C1.45 19 1 18.55 1 18V15C1 14.45 1.45 14 2 14H3C3 10.13 6.13 7 10 7H11V5.73C10.4 5.39 10 4.74 10 4C10 2.9 10.9 2 12 2S14 2.9 14 4C14 4.74 13.6 5.39 13 5.73V7H14C17.87 7 21 10.13 21 14H22C22.55 14 23 14.45 23 15M21 16H19V14C19 11.24 16.76 9 14 9H10C7.24 9 5 11.24 5 14V16H3V17H5V20H19V17H21V16Z"
|
|
223
|
-
)
|
|
224
|
-
});
|
|
225
|
-
var IconExclamation = createIconBase({
|
|
226
|
-
paths: /* @__PURE__ */ jsxs3("g", { fill: "currentColor", children: [
|
|
227
|
-
/* @__PURE__ */ jsx5("path", { d: "m12 21c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" }),
|
|
228
|
-
/* @__PURE__ */ jsx5("path", { d: "m10 3h4v12h-4z" })
|
|
229
|
-
] })
|
|
230
|
-
});
|
|
231
|
-
var IconErrorOutline = createIconBase({
|
|
232
|
-
paths: fill(
|
|
233
|
-
"m11 15h2v2h-2zm0-8h2v6h-2zm.99-5c-5.52 0-9.99 4.48-9.99 10s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10s-4.48-10-10.01-10zm.01 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
|
234
|
-
)
|
|
235
|
-
});
|
|
236
|
-
var IconCancel = createIconBase({
|
|
237
|
-
paths: fill(
|
|
238
|
-
"m12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13-3.59 3.59-3.59-3.59-1.41 1.41 3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59z"
|
|
239
|
-
)
|
|
240
|
-
});
|
|
241
|
-
var IconCheckCircle = createIconBase({
|
|
242
|
-
paths: fill(
|
|
243
|
-
"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
244
|
-
)
|
|
245
|
-
});
|
|
246
|
-
var IconArrowUp = createIconBase({
|
|
247
|
-
paths: fill("M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z")
|
|
248
|
-
});
|
|
249
|
-
var IconArrowDown = createIconBase({
|
|
250
|
-
paths: fill("M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z")
|
|
251
|
-
});
|
|
252
|
-
var IconChevronLeft = createIconBasePath("M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z");
|
|
253
|
-
var IconChevronRight = createIconBasePath("M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z");
|
|
254
|
-
var IconChevronDown = createIconBasePath("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z");
|
|
255
|
-
var IconSubArrowRight = createIconBase({
|
|
256
|
-
paths: /* @__PURE__ */ jsx5("g", { transform: "translate(4 5.5)", children: fill("M2 0H0V10H12.01V13L16 9L12.01 5V8H2V0Z") })
|
|
257
|
-
});
|
|
258
|
-
var IconSearch = createIconBasePath(
|
|
259
|
-
"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
|
260
|
-
);
|
|
261
|
-
var IconBell = createIconBasePath(
|
|
262
|
-
"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2m6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1z"
|
|
263
|
-
);
|
|
264
|
-
var IconBellOff = createIconBasePath(
|
|
265
|
-
"M20 18.69 7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2m6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11h-.01c-.01 0-.01 0-.02.01-.23.09-.46.2-.68.31 0 0-.01 0-.01.01z"
|
|
266
|
-
);
|
|
267
|
-
var IconPerson = createIconBasePath(
|
|
268
|
-
"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
|
|
269
|
-
);
|
|
270
|
-
var IconHome = createIconBasePath("M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z");
|
|
271
|
-
var IconPanelRight = createIconBasePath(
|
|
272
|
-
"M3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2zm12 4h-5v10h5V9zm-7 0H5v10h3V9z"
|
|
273
|
-
);
|
|
274
|
-
var IconPlus = createIconBasePath("M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z");
|
|
275
|
-
var IconCheck = createIconBasePath("M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z");
|
|
276
|
-
var IconClose = createIconBasePath("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
|
|
277
|
-
var IconTrash = createIconBasePath("M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z");
|
|
278
|
-
var IconDownload = createIconBasePath("M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z");
|
|
279
|
-
var IconUpload = createIconBasePath("M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z");
|
|
280
|
-
var IconSave = createIconBasePath(
|
|
281
|
-
"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
|
|
282
|
-
);
|
|
283
|
-
var IconCopy = createIconBasePath(
|
|
284
|
-
"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
|
|
285
|
-
);
|
|
286
|
-
var IconEdit = createIconBasePath(
|
|
287
|
-
"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
|
288
|
-
);
|
|
289
|
-
var IconLogout = createIconBasePath(
|
|
290
|
-
"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"
|
|
291
|
-
);
|
|
292
|
-
var IconStar = createIconBasePath(
|
|
293
|
-
"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
|
294
|
-
);
|
|
295
|
-
var IconMail = createIconBasePath(
|
|
296
|
-
"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
|
|
297
|
-
);
|
|
298
|
-
var IconShoppingCart = createIconBasePath(
|
|
299
|
-
"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"
|
|
300
|
-
);
|
|
301
|
-
var IconMoon = createIconBasePath(
|
|
302
|
-
"M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"
|
|
303
|
-
);
|
|
304
|
-
var IconSun = createIconBasePath(
|
|
305
|
-
"M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
|
|
306
|
-
);
|
|
307
|
-
var IconVolume = createIconBasePath(
|
|
308
|
-
"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
|
|
309
|
-
);
|
|
310
|
-
var IconVolumeOff = createIconBasePath(
|
|
311
|
-
"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
|
|
312
|
-
);
|
|
313
|
-
var IconFlag = createIconBasePath("M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z");
|
|
314
|
-
var IconDatabase = createIconBasePath(
|
|
315
|
-
"M12 3C7.58 3 4 4.79 4 7s3.58 4 8 4 8-1.79 8-4-3.58-4-8-4zM4 9v3c0 2.21 3.58 4 8 4s8-1.79 8-4V9c0 2.21-3.58 4-8 4s-8-1.79-8-4zm0 5v3c0 2.21 3.58 4 8 4s8-1.79 8-4v-3c0 2.21-3.58 4-8 4s-8-1.79-8-4z"
|
|
316
|
-
);
|
|
317
|
-
var IconLayers = createIconBasePath("M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z");
|
|
318
|
-
var IconBox = createIconBasePath(
|
|
319
|
-
"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
|
|
320
|
-
);
|
|
321
|
-
var IconBolt = createIconBasePath(
|
|
322
|
-
"M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66-.19-.34-.04-.12-.07-.12C8.48 10.94 10.42 7.54 11 7V3h1v4c.58 0 .57.32.38.66-.19-.34-.04-.12-.07-.12-.95 2.28-2.96 5.66-3.31 6.22H13l-1 7h-1z"
|
|
323
|
-
);
|
|
324
|
-
var IconRadar = createIconBasePath(
|
|
325
|
-
"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
|
|
326
|
-
);
|
|
327
|
-
var IconToggle = createIconBasePath(
|
|
328
|
-
"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8H7c-1.66 0-3-1.34-3-3s1.34-3 3-3h10c1.66 0 3 1.34 3 3s-1.34 3-3 3zM7 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
|
329
|
-
);
|
|
330
|
-
var IconRocket = createIconBasePath(
|
|
331
|
-
"M9.19 6.35c-2.04 2.29-3.44 5.58-3.57 5.89L2 10.69l4.05-4.05c.47-.47 1.15-.68 1.81-.55l1.33 1.26zm5.45 8.67l-1.33-1.26c-.66-.13-1.34.08-1.81.55L2 18.31l3.62 3.57c.31-.13 3.6-1.53 5.89-3.57 1.53-1.72 2.52-3.76 2.87-5.02zM12 2c-1.1 0-2 .9-2 2v1.09c2.84.48 5 2.94 5 5.91 0 2.97-2.16 5.43-5 5.91V20c0 1.1.9 2 2 2s2-.9 2-2v-1.09c-2.84-.48-5-2.94-5-5.91 0-2.97 2.16-5.43 5-5.91V4c0-1.1-.9-2-2-2z"
|
|
332
|
-
);
|
|
333
|
-
var IconTerminal = createIconBasePath("M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z");
|
|
334
|
-
var IconActivity = createIconBasePath(
|
|
335
|
-
"M22 12h-4l-3 9L9 3l-3 9H2v2h6.76l2.24-6.72L15 15l2.24-6.72L19 14h3v-2z"
|
|
336
|
-
);
|
|
337
|
-
var IconFlask = createIconBasePath(
|
|
338
|
-
"M19.8 18.4L14 10.67V6.5l1.35-1.35c.39-.39.39-1.02 0-1.41L14.65 2.7a.9959.9959 0 0 0-1.41 0L9.35 6.54c-.39.39-.39 1.02 0 1.41L10.7 9.3v4.17L4.2 18.4C3.53 19.07 4.04 20.25 5 20.25h14c.96 0 1.47-1.18.8-1.85zM6.91 18.25l5.09-5.09 5.09 5.09H6.91z"
|
|
339
|
-
);
|
|
340
|
-
function IconSpinner({ className, ...props }) {
|
|
341
|
-
return /* @__PURE__ */ jsx5(IconSync, { className: cn("ph-icon-spin", className), ...props });
|
|
342
|
-
}
|
|
343
|
-
var PH_ICONS = {
|
|
344
|
-
activity: IconActivity,
|
|
345
|
-
areaChart: IconAreaChart,
|
|
346
|
-
arrowDown: IconArrowDown,
|
|
347
|
-
arrowUp: IconArrowUp,
|
|
348
|
-
bell: IconBell,
|
|
349
|
-
bellOff: IconBellOff,
|
|
350
|
-
bolt: IconBolt,
|
|
351
|
-
box: IconBox,
|
|
352
|
-
cancel: IconCancel,
|
|
353
|
-
check: IconCheck,
|
|
354
|
-
checkCircle: IconCheckCircle,
|
|
355
|
-
chevronDown: IconChevronDown,
|
|
356
|
-
chevronLeft: IconChevronLeft,
|
|
357
|
-
chevronRight: IconChevronRight,
|
|
358
|
-
clipboard: IconClipboardEdit,
|
|
359
|
-
close: IconClose,
|
|
360
|
-
cohort: IconCohort,
|
|
361
|
-
copy: IconCopy,
|
|
362
|
-
cumulativeChart: IconCumulativeChart,
|
|
363
|
-
database: IconDatabase,
|
|
364
|
-
download: IconDownload,
|
|
365
|
-
edit: IconEdit,
|
|
366
|
-
errorOutline: IconErrorOutline,
|
|
367
|
-
exclamation: IconExclamation,
|
|
368
|
-
flag: IconFlag,
|
|
369
|
-
flare: IconFlare,
|
|
370
|
-
flask: IconFlask,
|
|
371
|
-
gift: IconGift,
|
|
372
|
-
grid: IconGridView,
|
|
373
|
-
handClick: IconHandClick,
|
|
374
|
-
home: IconHome,
|
|
375
|
-
info: IconErrorOutline,
|
|
376
|
-
layers: IconLayers,
|
|
377
|
-
list: IconListView,
|
|
378
|
-
logout: IconLogout,
|
|
379
|
-
mail: IconMail,
|
|
380
|
-
moon: IconMoon,
|
|
381
|
-
panelRight: IconPanelRight,
|
|
382
|
-
person: IconPerson,
|
|
383
|
-
play: IconPlayCircle,
|
|
384
|
-
plus: IconPlus,
|
|
385
|
-
premium: IconPremium,
|
|
386
|
-
queryEditor: IconQueryEditor,
|
|
387
|
-
radar: IconRadar,
|
|
388
|
-
recording: IconRecording,
|
|
389
|
-
robot: IconRobot,
|
|
390
|
-
rocket: IconRocket,
|
|
391
|
-
save: IconSave,
|
|
392
|
-
search: IconSearch,
|
|
393
|
-
selectEvents: IconSelectEvents,
|
|
394
|
-
settings: IconTuning,
|
|
395
|
-
shoppingCart: IconShoppingCart,
|
|
396
|
-
spinner: IconSpinner,
|
|
397
|
-
star: IconStar,
|
|
398
|
-
subArrowRight: IconSubArrowRight,
|
|
399
|
-
sun: IconSun,
|
|
400
|
-
surveys: IconSurveys,
|
|
401
|
-
sync: IconSync,
|
|
402
|
-
tableChart: IconTableChart,
|
|
403
|
-
terminal: IconTerminal,
|
|
404
|
-
toggle: IconToggle,
|
|
405
|
-
trash: IconTrash,
|
|
406
|
-
trendingUp: IconArrowUp,
|
|
407
|
-
upload: IconUpload,
|
|
408
|
-
volume: IconVolume,
|
|
409
|
-
volumeOff: IconVolumeOff,
|
|
410
|
-
warning: IconExclamation,
|
|
411
|
-
xCircle: IconCancel
|
|
412
|
-
};
|
|
413
|
-
function IconByName({ name, ...props }) {
|
|
414
|
-
const Icon = PH_ICONS[name];
|
|
415
|
-
return /* @__PURE__ */ jsx5(Icon, { ...props });
|
|
416
|
-
}
|
|
417
|
-
|
|
418
|
-
// src/components/ui/Alert.tsx
|
|
419
|
-
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
420
|
-
var statusConfig = {
|
|
421
|
-
info: { icon: IconErrorOutline, color: "text-ph-info" },
|
|
422
|
-
success: { icon: IconCheckCircle, color: "text-ph-success" },
|
|
423
|
-
warning: { icon: IconExclamation, color: "text-ph-warning" },
|
|
424
|
-
danger: { icon: IconCancel, color: "text-ph-danger" }
|
|
425
|
-
};
|
|
426
|
-
var statusClassMap = {
|
|
427
|
-
info: "ph-alert-info",
|
|
428
|
-
success: "ph-alert-success",
|
|
429
|
-
warning: "ph-alert-warning",
|
|
430
|
-
danger: "ph-alert-danger"
|
|
431
|
-
};
|
|
432
|
-
function Alert({
|
|
433
|
-
status = "info",
|
|
434
|
-
title,
|
|
435
|
-
description,
|
|
436
|
-
icon,
|
|
437
|
-
children,
|
|
438
|
-
className,
|
|
439
|
-
onDismiss
|
|
440
|
-
}) {
|
|
441
|
-
const config = statusConfig[status];
|
|
442
|
-
const Icon = config.icon;
|
|
443
|
-
return /* @__PURE__ */ jsxs4(
|
|
444
|
-
"div",
|
|
445
|
-
{
|
|
446
|
-
role: "alert",
|
|
447
|
-
className: cn("ph-alert", statusClassMap[status], className),
|
|
448
|
-
children: [
|
|
449
|
-
icon ?? /* @__PURE__ */ jsx6(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
|
|
450
|
-
/* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
|
|
451
|
-
title && /* @__PURE__ */ jsx6("p", { className: "font-semibold", children: title }),
|
|
452
|
-
description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
|
|
453
|
-
children
|
|
454
|
-
] }),
|
|
455
|
-
onDismiss && /* @__PURE__ */ jsx6(
|
|
456
|
-
"button",
|
|
457
|
-
{
|
|
458
|
-
type: "button",
|
|
459
|
-
onClick: onDismiss,
|
|
460
|
-
className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
|
|
461
|
-
"aria-label": "Dismiss",
|
|
462
|
-
children: /* @__PURE__ */ jsx6("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx6("path", { d: "M18 6L6 18M6 6l12 12" }) })
|
|
463
|
-
}
|
|
464
|
-
)
|
|
465
|
-
]
|
|
466
|
-
}
|
|
467
|
-
);
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
// src/components/ui/Badge.tsx
|
|
471
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
472
|
-
var variantMap = {
|
|
473
|
-
brand: "ph-badge-brand",
|
|
474
|
-
neutral: "ph-badge-neutral",
|
|
475
|
-
success: "ph-badge-success",
|
|
476
|
-
warning: "ph-badge-warning",
|
|
477
|
-
danger: "ph-badge-danger",
|
|
478
|
-
info: "ph-badge-info",
|
|
479
|
-
outline: "ph-badge-outline"
|
|
480
|
-
};
|
|
481
|
-
var sizeMap = {
|
|
482
|
-
sm: "text-[10px] px-1.5 py-0.5",
|
|
483
|
-
md: ""
|
|
484
|
-
};
|
|
485
|
-
function Badge({
|
|
486
|
-
variant = "neutral",
|
|
487
|
-
size = "md",
|
|
488
|
-
children,
|
|
489
|
-
className
|
|
490
|
-
}) {
|
|
491
|
-
return /* @__PURE__ */ jsx7(
|
|
492
|
-
"span",
|
|
493
|
-
{
|
|
494
|
-
className: cn(
|
|
495
|
-
"ph-badge",
|
|
496
|
-
variantMap[variant],
|
|
497
|
-
sizeMap[size],
|
|
498
|
-
className
|
|
499
|
-
),
|
|
500
|
-
children
|
|
501
|
-
}
|
|
502
|
-
);
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
// src/components/ui/Card.tsx
|
|
506
|
-
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
507
|
-
var variantMap2 = {
|
|
508
|
-
default: "bg-ph-surface",
|
|
509
|
-
outlined: "border-2 border-ph-border bg-ph-surface",
|
|
510
|
-
elevated: "bg-ph-surface shadow-ph-md",
|
|
511
|
-
highlighted: "border border-ph-brand/35 bg-orange-50/40 shadow-ph"
|
|
512
|
-
};
|
|
513
|
-
function Card({
|
|
514
|
-
children,
|
|
515
|
-
title,
|
|
516
|
-
description,
|
|
517
|
-
actions,
|
|
518
|
-
footer,
|
|
519
|
-
media,
|
|
520
|
-
variant = "default",
|
|
521
|
-
className,
|
|
522
|
-
bodyClassName
|
|
523
|
-
}) {
|
|
524
|
-
return /* @__PURE__ */ jsxs5(
|
|
525
|
-
"div",
|
|
526
|
-
{
|
|
527
|
-
className: cn(
|
|
528
|
-
"ph-card",
|
|
529
|
-
variantMap2[variant],
|
|
530
|
-
className
|
|
531
|
-
),
|
|
532
|
-
children: [
|
|
533
|
-
media && /* @__PURE__ */ jsx8("div", { className: "-mx-6 -mt-6 mb-4", children: media }),
|
|
534
|
-
/* @__PURE__ */ jsxs5("div", { className: cn("ph-card-body", bodyClassName), children: [
|
|
535
|
-
title && /* @__PURE__ */ jsx8("h3", { className: "ph-card-title", children: title }),
|
|
536
|
-
description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-ph-subtle", children: description }),
|
|
537
|
-
children,
|
|
538
|
-
actions && /* @__PURE__ */ jsx8("div", { className: "ph-card-actions", children: actions })
|
|
539
|
-
] }),
|
|
540
|
-
footer && /* @__PURE__ */ jsx8("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
|
|
541
|
-
]
|
|
542
|
-
}
|
|
543
|
-
);
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
// src/components/ui/Drawer.tsx
|
|
547
|
-
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
548
|
-
var sideMap = {
|
|
549
|
-
left: "left-0 border-r",
|
|
550
|
-
right: "right-0 border-l"
|
|
551
|
-
};
|
|
552
|
-
var sizeMap2 = {
|
|
553
|
-
sm: "w-[min(100%,18rem)]",
|
|
554
|
-
md: "w-[min(100%,22rem)]",
|
|
555
|
-
lg: "w-[min(100%,30rem)]"
|
|
556
|
-
};
|
|
557
|
-
function Drawer({
|
|
558
|
-
open = false,
|
|
559
|
-
onClose,
|
|
560
|
-
title,
|
|
561
|
-
children,
|
|
562
|
-
footer,
|
|
563
|
-
side = "right",
|
|
564
|
-
size = "md",
|
|
565
|
-
className,
|
|
566
|
-
showCloseButton = true
|
|
567
|
-
}) {
|
|
568
|
-
if (!open) return null;
|
|
569
|
-
return /* @__PURE__ */ jsxs6(Fragment3, { children: [
|
|
570
|
-
/* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]", role: "presentation", onClick: onClose }),
|
|
571
|
-
/* @__PURE__ */ jsxs6(
|
|
572
|
-
"aside",
|
|
573
|
-
{
|
|
574
|
-
className: cn(
|
|
575
|
-
"fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
|
|
576
|
-
sideMap[side],
|
|
577
|
-
sizeMap2[size],
|
|
578
|
-
className
|
|
579
|
-
),
|
|
580
|
-
children: [
|
|
581
|
-
(title || showCloseButton) && /* @__PURE__ */ jsxs6("header", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
|
|
582
|
-
/* @__PURE__ */ jsx9("span", { className: "text-sm font-bold text-ph-ink", children: title }),
|
|
583
|
-
showCloseButton && onClose && /* @__PURE__ */ jsx9(Button, { variant: "ghost", className: "ph-btn-circle", onClick: onClose, "aria-label": "Close drawer", children: /* @__PURE__ */ jsx9(IconClose, { className: "h-5 w-5" }) })
|
|
584
|
-
] }),
|
|
585
|
-
/* @__PURE__ */ jsx9("div", { className: "flex-1", children }),
|
|
586
|
-
footer && /* @__PURE__ */ jsx9("footer", { className: "border-t border-ph-border px-4 py-3", children: footer })
|
|
587
|
-
]
|
|
588
|
-
}
|
|
589
|
-
)
|
|
590
|
-
] });
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
// src/components/ui/Kbd.tsx
|
|
594
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
595
|
-
function Kbd({ variant = "shortcut", keys, children, className, ...props }) {
|
|
596
|
-
if (variant === "token") {
|
|
597
|
-
return /* @__PURE__ */ jsx10("code", { className: cn("ph-kbd text-ph-ink", className), ...props, children });
|
|
598
|
-
}
|
|
599
|
-
const content = (keys == null ? void 0 : keys.length) ? keys.join(" ") : normalizeShortcut(children);
|
|
600
|
-
return /* @__PURE__ */ jsx10("kbd", { className: cn("ph-shortcut", className), ...props, children: content });
|
|
601
|
-
}
|
|
602
|
-
function normalizeShortcut(children) {
|
|
603
|
-
if (typeof children !== "string") return children;
|
|
604
|
-
return children.replace(/\bCommand\b|\bCmd\b/g, "\u2318").replace(/\bOption\b|\bAlt\b/g, "\u2325").replace(/\bShift\b/g, "\u21E7").replace(/\bControl\b|\bCtrl\b/g, "\u2303");
|
|
605
|
-
}
|
|
606
|
-
|
|
607
|
-
// src/components/ui/DropdownMenu.tsx
|
|
608
|
-
import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
609
|
-
var sizeClass2 = {
|
|
610
|
-
xs: "ph-btn-xs",
|
|
611
|
-
sm: "ph-btn-sm",
|
|
612
|
-
md: "",
|
|
613
|
-
lg: "ph-btn-lg"
|
|
614
|
-
};
|
|
615
|
-
var variantClass2 = {
|
|
616
|
-
primary: "ph-btn-primary",
|
|
617
|
-
secondary: "ph-btn-secondary",
|
|
618
|
-
accent: "ph-btn-accent"
|
|
619
|
-
};
|
|
620
|
-
function dropdownPanelClass(align, panelClassName) {
|
|
621
|
-
return cn(
|
|
622
|
-
"ph-dropdown-panel absolute top-full z-50 mt-0",
|
|
623
|
-
align === "end" ? "right-0" : "left-0",
|
|
624
|
-
panelClassName
|
|
625
|
-
);
|
|
626
|
-
}
|
|
627
|
-
function DropdownMenu({
|
|
628
|
-
trigger,
|
|
629
|
-
children,
|
|
630
|
-
align = "start",
|
|
631
|
-
className,
|
|
632
|
-
panelClassName,
|
|
633
|
-
"aria-label": ariaLabel,
|
|
634
|
-
...props
|
|
635
|
-
}) {
|
|
636
|
-
return /* @__PURE__ */ jsxs7("details", { className: cn("relative", className), ...props, children: [
|
|
637
|
-
/* @__PURE__ */ jsx11(
|
|
638
|
-
"summary",
|
|
639
|
-
{
|
|
640
|
-
className: "cursor-pointer list-none [&::-webkit-details-marker]:hidden",
|
|
641
|
-
"aria-label": ariaLabel,
|
|
642
|
-
children: trigger
|
|
643
|
-
}
|
|
644
|
-
),
|
|
645
|
-
/* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
|
|
646
|
-
] });
|
|
647
|
-
}
|
|
648
|
-
function DropdownButton({
|
|
649
|
-
label,
|
|
650
|
-
variant = "secondary",
|
|
651
|
-
outline = false,
|
|
652
|
-
size = "md",
|
|
653
|
-
split = false,
|
|
654
|
-
icon,
|
|
655
|
-
sideIcon,
|
|
656
|
-
children,
|
|
657
|
-
align = "start",
|
|
658
|
-
className,
|
|
659
|
-
panelClassName,
|
|
660
|
-
"aria-label": ariaLabel,
|
|
661
|
-
...props
|
|
662
|
-
}) {
|
|
663
|
-
const usesLemonChrome = variant === "primary" || variant === "secondary";
|
|
664
|
-
const chevron = /* @__PURE__ */ jsx11(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
|
|
665
|
-
const trailing = sideIcon ?? chevron;
|
|
666
|
-
return /* @__PURE__ */ jsxs7("details", { className: cn("relative", className), ...props, children: [
|
|
667
|
-
/* @__PURE__ */ jsx11(
|
|
668
|
-
"summary",
|
|
669
|
-
{
|
|
670
|
-
className: cn(
|
|
671
|
-
"ph-btn cursor-pointer list-none [&::-webkit-details-marker]:hidden",
|
|
672
|
-
variantClass2[variant],
|
|
673
|
-
outline && "ph-btn-outline",
|
|
674
|
-
sizeClass2[size],
|
|
675
|
-
split && "ph-btn-split"
|
|
676
|
-
),
|
|
677
|
-
"aria-label": ariaLabel ?? label,
|
|
678
|
-
children: usesLemonChrome ? /* @__PURE__ */ jsx11(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
|
|
679
|
-
icon != null ? /* @__PURE__ */ jsx11("span", { className: "ph-btn-icon", children: icon }) : null,
|
|
680
|
-
/* @__PURE__ */ jsx11("span", { className: "ph-btn-label", children: label }),
|
|
681
|
-
/* @__PURE__ */ jsx11("span", { className: "ph-btn-side-icon", children: trailing })
|
|
682
|
-
] })
|
|
683
|
-
}
|
|
684
|
-
),
|
|
685
|
-
/* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
|
|
686
|
-
] });
|
|
687
|
-
}
|
|
688
|
-
function DropdownItem({
|
|
689
|
-
className,
|
|
690
|
-
children,
|
|
691
|
-
...props
|
|
692
|
-
}) {
|
|
693
|
-
return /* @__PURE__ */ jsx11("button", { type: "button", className: cn("ph-dropdown-item w-full text-left", className), ...props, children });
|
|
694
|
-
}
|
|
695
|
-
|
|
696
|
-
// src/components/ui/Input.tsx
|
|
697
|
-
import { useId } from "react";
|
|
698
|
-
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
699
|
-
var sizeMap3 = {
|
|
700
|
-
sm: "ph-input-sm",
|
|
701
|
-
md: "",
|
|
702
|
-
lg: "ph-input-lg"
|
|
703
|
-
};
|
|
704
|
-
function Input({
|
|
705
|
-
id: idProp,
|
|
706
|
-
label,
|
|
707
|
-
hideLabel = false,
|
|
708
|
-
error,
|
|
709
|
-
helperText,
|
|
710
|
-
size = "md",
|
|
711
|
-
variant = "default",
|
|
712
|
-
className,
|
|
713
|
-
wrapperClassName,
|
|
714
|
-
disabled,
|
|
715
|
-
...props
|
|
716
|
-
}) {
|
|
717
|
-
const autoId = useId();
|
|
718
|
-
const id = idProp ?? autoId;
|
|
719
|
-
const hasError = Boolean(error);
|
|
720
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
721
|
-
label && /* @__PURE__ */ jsx12(
|
|
722
|
-
"label",
|
|
723
|
-
{
|
|
724
|
-
htmlFor: id,
|
|
725
|
-
className: cn(
|
|
726
|
-
"ph-label",
|
|
727
|
-
hideLabel && "sr-only",
|
|
728
|
-
disabled && "opacity-50"
|
|
729
|
-
),
|
|
730
|
-
children: label
|
|
731
|
-
}
|
|
732
|
-
),
|
|
733
|
-
/* @__PURE__ */ jsx12(
|
|
734
|
-
"input",
|
|
735
|
-
{
|
|
736
|
-
id,
|
|
737
|
-
disabled,
|
|
738
|
-
"aria-invalid": hasError || void 0,
|
|
739
|
-
className: cn(
|
|
740
|
-
"ph-input w-full",
|
|
741
|
-
sizeMap3[size],
|
|
742
|
-
variant === "ghost" && "ph-input-ghost",
|
|
743
|
-
hasError && "ph-input-error",
|
|
744
|
-
disabled && "cursor-not-allowed opacity-60",
|
|
745
|
-
className
|
|
746
|
-
),
|
|
747
|
-
...props
|
|
748
|
-
}
|
|
749
|
-
),
|
|
750
|
-
helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
|
|
751
|
-
error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
|
|
752
|
-
] });
|
|
753
|
-
}
|
|
754
|
-
function Select({
|
|
755
|
-
id: idProp,
|
|
756
|
-
label,
|
|
757
|
-
hideLabel = false,
|
|
758
|
-
error,
|
|
759
|
-
helperText,
|
|
760
|
-
size = "md",
|
|
761
|
-
className,
|
|
762
|
-
wrapperClassName,
|
|
763
|
-
disabled,
|
|
764
|
-
children,
|
|
765
|
-
...props
|
|
766
|
-
}) {
|
|
767
|
-
const autoId = useId();
|
|
768
|
-
const id = idProp ?? autoId;
|
|
769
|
-
const hasError = Boolean(error);
|
|
770
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
771
|
-
label && /* @__PURE__ */ jsx12(
|
|
772
|
-
"label",
|
|
773
|
-
{
|
|
774
|
-
htmlFor: id,
|
|
775
|
-
className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
|
|
776
|
-
children: label
|
|
777
|
-
}
|
|
778
|
-
),
|
|
779
|
-
/* @__PURE__ */ jsx12(
|
|
780
|
-
"select",
|
|
781
|
-
{
|
|
782
|
-
id,
|
|
783
|
-
disabled,
|
|
784
|
-
"aria-invalid": hasError || void 0,
|
|
785
|
-
className: cn(
|
|
786
|
-
"ph-select w-full",
|
|
787
|
-
sizeMap3[size],
|
|
788
|
-
hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
|
|
789
|
-
disabled && "cursor-not-allowed opacity-60",
|
|
790
|
-
className
|
|
791
|
-
),
|
|
792
|
-
...props,
|
|
793
|
-
children
|
|
794
|
-
}
|
|
795
|
-
),
|
|
796
|
-
helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
|
|
797
|
-
error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
|
|
798
|
-
] });
|
|
799
|
-
}
|
|
800
|
-
function Textarea({
|
|
801
|
-
id: idProp,
|
|
802
|
-
label,
|
|
803
|
-
hideLabel = false,
|
|
804
|
-
error,
|
|
805
|
-
helperText,
|
|
806
|
-
size = "md",
|
|
807
|
-
className,
|
|
808
|
-
wrapperClassName,
|
|
809
|
-
disabled,
|
|
810
|
-
...props
|
|
811
|
-
}) {
|
|
812
|
-
const autoId = useId();
|
|
813
|
-
const id = idProp ?? autoId;
|
|
814
|
-
const hasError = Boolean(error);
|
|
815
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
816
|
-
label && /* @__PURE__ */ jsx12(
|
|
817
|
-
"label",
|
|
818
|
-
{
|
|
819
|
-
htmlFor: id,
|
|
820
|
-
className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
|
|
821
|
-
children: label
|
|
822
|
-
}
|
|
823
|
-
),
|
|
824
|
-
/* @__PURE__ */ jsx12(
|
|
825
|
-
"textarea",
|
|
826
|
-
{
|
|
827
|
-
id,
|
|
828
|
-
disabled,
|
|
829
|
-
"aria-invalid": hasError || void 0,
|
|
830
|
-
className: cn(
|
|
831
|
-
"ph-textarea w-full",
|
|
832
|
-
sizeMap3[size],
|
|
833
|
-
hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
|
|
834
|
-
disabled && "cursor-not-allowed opacity-60",
|
|
835
|
-
className
|
|
836
|
-
),
|
|
837
|
-
...props
|
|
838
|
-
}
|
|
839
|
-
),
|
|
840
|
-
helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
|
|
841
|
-
error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
|
|
842
|
-
] });
|
|
843
|
-
}
|
|
844
|
-
function Checkbox({
|
|
845
|
-
id: idProp,
|
|
846
|
-
label,
|
|
847
|
-
error,
|
|
848
|
-
helperText,
|
|
849
|
-
className,
|
|
850
|
-
wrapperClassName,
|
|
851
|
-
disabled,
|
|
852
|
-
...props
|
|
853
|
-
}) {
|
|
854
|
-
const autoId = useId();
|
|
855
|
-
const id = idProp ?? autoId;
|
|
856
|
-
const hasError = Boolean(error);
|
|
857
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName), children: [
|
|
858
|
-
/* @__PURE__ */ jsx12(
|
|
859
|
-
"input",
|
|
860
|
-
{
|
|
861
|
-
id,
|
|
862
|
-
type: "checkbox",
|
|
863
|
-
disabled,
|
|
864
|
-
"aria-invalid": hasError || void 0,
|
|
865
|
-
className: cn(
|
|
866
|
-
"ph-checkbox",
|
|
867
|
-
hasError && "border-ph-danger",
|
|
868
|
-
disabled && "cursor-not-allowed opacity-60",
|
|
869
|
-
className
|
|
870
|
-
),
|
|
871
|
-
...props
|
|
872
|
-
}
|
|
873
|
-
),
|
|
874
|
-
/* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
|
|
875
|
-
helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
|
|
876
|
-
error && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs font-medium text-ph-danger", children: error })
|
|
877
|
-
] });
|
|
878
|
-
}
|
|
879
|
-
function Radio({
|
|
880
|
-
id: idProp,
|
|
881
|
-
label,
|
|
882
|
-
className,
|
|
883
|
-
wrapperClassName,
|
|
884
|
-
disabled,
|
|
885
|
-
...props
|
|
886
|
-
}) {
|
|
887
|
-
const autoId = useId();
|
|
888
|
-
const id = idProp ?? autoId;
|
|
889
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
|
|
890
|
-
/* @__PURE__ */ jsx12(
|
|
891
|
-
"input",
|
|
892
|
-
{
|
|
893
|
-
id,
|
|
894
|
-
type: "radio",
|
|
895
|
-
disabled,
|
|
896
|
-
className: cn("ph-radio", disabled && "cursor-not-allowed", className),
|
|
897
|
-
...props
|
|
898
|
-
}
|
|
899
|
-
),
|
|
900
|
-
/* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
|
|
901
|
-
] });
|
|
902
|
-
}
|
|
903
|
-
function Toggle({
|
|
904
|
-
id: idProp,
|
|
905
|
-
label,
|
|
906
|
-
className,
|
|
907
|
-
wrapperClassName,
|
|
908
|
-
disabled,
|
|
909
|
-
...props
|
|
910
|
-
}) {
|
|
911
|
-
const autoId = useId();
|
|
912
|
-
const id = idProp ?? autoId;
|
|
913
|
-
return /* @__PURE__ */ jsxs8("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
|
|
914
|
-
/* @__PURE__ */ jsx12("span", { className: disabled ? "opacity-60" : void 0, children: label }),
|
|
915
|
-
/* @__PURE__ */ jsx12(
|
|
916
|
-
"input",
|
|
917
|
-
{
|
|
918
|
-
id,
|
|
919
|
-
type: "checkbox",
|
|
920
|
-
role: "switch",
|
|
921
|
-
disabled,
|
|
922
|
-
className: cn("ph-toggle", disabled && "cursor-not-allowed", className),
|
|
923
|
-
...props
|
|
924
|
-
}
|
|
925
|
-
)
|
|
926
|
-
] });
|
|
927
|
-
}
|
|
928
|
-
function Range({
|
|
929
|
-
label,
|
|
930
|
-
minLabel,
|
|
931
|
-
maxLabel,
|
|
932
|
-
valueLabel,
|
|
933
|
-
wrapperClassName,
|
|
934
|
-
className,
|
|
935
|
-
...props
|
|
936
|
-
}) {
|
|
937
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
938
|
-
label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
|
|
939
|
-
/* @__PURE__ */ jsx12("input", { type: "range", className: cn("ph-range", className), ...props }),
|
|
940
|
-
(minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
|
|
941
|
-
/* @__PURE__ */ jsx12("span", { children: minLabel }),
|
|
942
|
-
/* @__PURE__ */ jsx12("span", { children: valueLabel }),
|
|
943
|
-
/* @__PURE__ */ jsx12("span", { children: maxLabel })
|
|
944
|
-
] })
|
|
945
|
-
] });
|
|
946
|
-
}
|
|
947
|
-
function FileUpload({ label, prompt = "Drop file or browse", wrapperClassName, className, ...props }) {
|
|
948
|
-
return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
949
|
-
label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
|
|
950
|
-
/* @__PURE__ */ jsxs8("label", { className: "flex cursor-pointer items-center gap-3 rounded-lg border border-dashed border-ph-border bg-ph-surface px-4 py-6 text-sm text-ph-subtle transition hover:bg-ph-muted/60", children: [
|
|
951
|
-
/* @__PURE__ */ jsx12("input", { type: "file", className: cn("sr-only", className), ...props }),
|
|
952
|
-
prompt
|
|
953
|
-
] })
|
|
954
|
-
] });
|
|
955
|
-
}
|
|
956
|
-
|
|
957
|
-
// src/components/ui/Modal.tsx
|
|
958
|
-
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
959
|
-
var sizeMap4 = {
|
|
960
|
-
sm: "max-w-sm",
|
|
961
|
-
md: "max-w-lg",
|
|
962
|
-
lg: "max-w-2xl",
|
|
963
|
-
xl: "max-w-4xl",
|
|
964
|
-
full: "max-w-[calc(100%-2rem)]"
|
|
965
|
-
};
|
|
966
|
-
function Modal({
|
|
967
|
-
open = false,
|
|
968
|
-
onClose,
|
|
969
|
-
title,
|
|
970
|
-
description,
|
|
971
|
-
children,
|
|
972
|
-
footer,
|
|
973
|
-
size = "md",
|
|
974
|
-
className,
|
|
975
|
-
showCloseButton = true
|
|
976
|
-
}) {
|
|
977
|
-
if (!open) return null;
|
|
978
|
-
return /* @__PURE__ */ jsx13("div", { className: "ph-modal-overlay", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs9(
|
|
979
|
-
"div",
|
|
980
|
-
{
|
|
981
|
-
role: "dialog",
|
|
982
|
-
"aria-modal": true,
|
|
983
|
-
className: cn(
|
|
984
|
-
"ph-modal-panel",
|
|
985
|
-
sizeMap4[size],
|
|
986
|
-
className
|
|
987
|
-
),
|
|
988
|
-
onClick: (e) => e.stopPropagation(),
|
|
989
|
-
children: [
|
|
990
|
-
(title || showCloseButton) && /* @__PURE__ */ jsxs9("header", { className: "flex items-start justify-between gap-4", children: [
|
|
991
|
-
/* @__PURE__ */ jsxs9("div", { children: [
|
|
992
|
-
title && /* @__PURE__ */ jsx13("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
|
|
993
|
-
description && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-ph-subtle", children: description })
|
|
994
|
-
] }),
|
|
995
|
-
showCloseButton && onClose && /* @__PURE__ */ jsx13(
|
|
996
|
-
"button",
|
|
997
|
-
{
|
|
998
|
-
type: "button",
|
|
999
|
-
onClick: onClose,
|
|
1000
|
-
className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
|
|
1001
|
-
"aria-label": "Close",
|
|
1002
|
-
children: /* @__PURE__ */ jsx13(IconClose, { className: "h-5 w-5" })
|
|
1003
|
-
}
|
|
1004
|
-
)
|
|
1005
|
-
] }),
|
|
1006
|
-
/* @__PURE__ */ jsx13("div", { className: "mt-4", children }),
|
|
1007
|
-
footer && /* @__PURE__ */ jsx13("div", { className: "mt-6 flex justify-end gap-2 border-t border-ph-border pt-5", children: footer })
|
|
1008
|
-
]
|
|
1009
|
-
}
|
|
1010
|
-
) });
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
// src/components/ui/Navigation.tsx
|
|
1014
|
-
import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1015
|
-
function Breadcrumbs({ items, label = "Breadcrumb", className }) {
|
|
1016
|
-
return /* @__PURE__ */ jsx14("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
|
|
1017
|
-
index > 0 ? /* @__PURE__ */ jsx14("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
|
|
1018
|
-
item.current || !item.href ? /* @__PURE__ */ jsx14("span", { className: "ph-breadcrumb-current", "aria-current": item.current ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsx14("a", { href: item.href, className: "ph-breadcrumb-link", children: item.label })
|
|
1019
|
-
] }, `${item.label}-${index}`)) });
|
|
1020
|
-
}
|
|
1021
|
-
function Pagination({
|
|
1022
|
-
page,
|
|
1023
|
-
totalPages,
|
|
1024
|
-
onPageChange,
|
|
1025
|
-
label = "Pagination",
|
|
1026
|
-
compact = false,
|
|
1027
|
-
className
|
|
1028
|
-
}) {
|
|
1029
|
-
const pages = compact ? [Math.max(1, page - 1), page, Math.min(totalPages, page + 1)] : [1, 2, 3, totalPages];
|
|
1030
|
-
const uniquePages = Array.from(new Set(pages)).filter((n) => n >= 1 && n <= totalPages);
|
|
1031
|
-
return /* @__PURE__ */ jsxs10("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
|
|
1032
|
-
/* @__PURE__ */ jsx14(
|
|
1033
|
-
"button",
|
|
1034
|
-
{
|
|
1035
|
-
type: "button",
|
|
1036
|
-
className: "ph-pagination-btn",
|
|
1037
|
-
disabled: page <= 1,
|
|
1038
|
-
"aria-label": "Previous page",
|
|
1039
|
-
onClick: () => onPageChange == null ? void 0 : onPageChange(page - 1),
|
|
1040
|
-
children: /* @__PURE__ */ jsx14(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
|
|
1041
|
-
}
|
|
1042
|
-
),
|
|
1043
|
-
uniquePages.map((pageNumber, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
|
|
1044
|
-
!compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ jsx14("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
|
|
1045
|
-
/* @__PURE__ */ jsx14(
|
|
1046
|
-
"button",
|
|
1047
|
-
{
|
|
1048
|
-
type: "button",
|
|
1049
|
-
className: cn("ph-pagination-btn", pageNumber === page && "ph-pagination-btn-active"),
|
|
1050
|
-
"aria-current": pageNumber === page ? "page" : void 0,
|
|
1051
|
-
onClick: () => onPageChange == null ? void 0 : onPageChange(pageNumber),
|
|
1052
|
-
children: pageNumber
|
|
1053
|
-
}
|
|
1054
|
-
)
|
|
1055
|
-
] }, pageNumber)),
|
|
1056
|
-
/* @__PURE__ */ jsx14(
|
|
1057
|
-
"button",
|
|
1058
|
-
{
|
|
1059
|
-
type: "button",
|
|
1060
|
-
className: "ph-pagination-btn",
|
|
1061
|
-
disabled: page >= totalPages,
|
|
1062
|
-
"aria-label": "Next page",
|
|
1063
|
-
onClick: () => onPageChange == null ? void 0 : onPageChange(page + 1),
|
|
1064
|
-
children: /* @__PURE__ */ jsx14(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
|
|
1065
|
-
}
|
|
1066
|
-
)
|
|
1067
|
-
] });
|
|
1068
|
-
}
|
|
1069
|
-
|
|
1070
|
-
// src/components/ui/Panel.tsx
|
|
1071
|
-
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1072
|
-
function Panel({ title, description, children, className, ...props }) {
|
|
1073
|
-
return /* @__PURE__ */ jsxs11("div", { className: cn("ph-panel", className), ...props, children: [
|
|
1074
|
-
title && /* @__PURE__ */ jsx15("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
|
|
1075
|
-
description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-ph-subtle", children: description }),
|
|
1076
|
-
children
|
|
1077
|
-
] });
|
|
1078
|
-
}
|
|
1079
|
-
|
|
1080
|
-
// src/components/ui/Rating.tsx
|
|
1081
|
-
import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1082
|
-
function Rating({
|
|
1083
|
-
label,
|
|
1084
|
-
value = 0,
|
|
1085
|
-
max = 5,
|
|
1086
|
-
readOnly = true,
|
|
1087
|
-
onChange,
|
|
1088
|
-
className,
|
|
1089
|
-
wrapperClassName,
|
|
1090
|
-
...props
|
|
1091
|
-
}) {
|
|
1092
|
-
const stars = Array.from({ length: max }, (_, index) => index + 1);
|
|
1093
|
-
return /* @__PURE__ */ jsxs12("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
1094
|
-
label && /* @__PURE__ */ jsx16("span", { className: "ph-label", children: label }),
|
|
1095
|
-
/* @__PURE__ */ jsx16(
|
|
1096
|
-
"div",
|
|
1097
|
-
{
|
|
1098
|
-
className: cn("ph-rating flex", className),
|
|
1099
|
-
role: readOnly ? "img" : "radiogroup",
|
|
1100
|
-
"aria-label": label ?? `Rating: ${value} out of ${max}`,
|
|
1101
|
-
...props,
|
|
1102
|
-
children: stars.map((star) => {
|
|
1103
|
-
const active = star <= value;
|
|
1104
|
-
if (readOnly) {
|
|
1105
|
-
return /* @__PURE__ */ jsx16(
|
|
1106
|
-
IconStar,
|
|
1107
|
-
{
|
|
1108
|
-
className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border"),
|
|
1109
|
-
"aria-hidden": true
|
|
1110
|
-
},
|
|
1111
|
-
star
|
|
1112
|
-
);
|
|
1113
|
-
}
|
|
1114
|
-
return /* @__PURE__ */ jsx16(
|
|
1115
|
-
"button",
|
|
1116
|
-
{
|
|
1117
|
-
type: "button",
|
|
1118
|
-
className: "rounded p-0.5 transition hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-brand",
|
|
1119
|
-
role: "radio",
|
|
1120
|
-
"aria-checked": active,
|
|
1121
|
-
"aria-label": `${star} out of ${max}`,
|
|
1122
|
-
onClick: () => onChange == null ? void 0 : onChange(star),
|
|
1123
|
-
children: /* @__PURE__ */ jsx16(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
|
|
1124
|
-
},
|
|
1125
|
-
star
|
|
1126
|
-
);
|
|
1127
|
-
})
|
|
1128
|
-
}
|
|
1129
|
-
)
|
|
1130
|
-
] });
|
|
1131
|
-
}
|
|
1132
|
-
|
|
1133
|
-
// src/components/ui/SearchInput.tsx
|
|
1134
|
-
import { useId as useId2 } from "react";
|
|
1135
|
-
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1136
|
-
function SearchInput({
|
|
1137
|
-
id: idProp,
|
|
1138
|
-
label = "Search",
|
|
1139
|
-
hideLabel = false,
|
|
1140
|
-
shortcut,
|
|
1141
|
-
density = "default",
|
|
1142
|
-
className,
|
|
1143
|
-
wrapperClassName,
|
|
1144
|
-
placeholder,
|
|
1145
|
-
...props
|
|
1146
|
-
}) {
|
|
1147
|
-
const autoId = useId2();
|
|
1148
|
-
const id = idProp ?? autoId;
|
|
1149
|
-
return /* @__PURE__ */ jsxs13("div", { className: cn("relative", wrapperClassName), children: [
|
|
1150
|
-
/* @__PURE__ */ jsx17("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
|
|
1151
|
-
/* @__PURE__ */ jsxs13("div", { className: "relative", children: [
|
|
1152
|
-
shortcut != null ? /* @__PURE__ */ jsx17(
|
|
1153
|
-
"span",
|
|
1154
|
-
{
|
|
1155
|
-
className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
|
|
1156
|
-
"aria-hidden": true,
|
|
1157
|
-
children: shortcut
|
|
1158
|
-
}
|
|
1159
|
-
) : null,
|
|
1160
|
-
/* @__PURE__ */ jsx17(
|
|
1161
|
-
"input",
|
|
1162
|
-
{
|
|
1163
|
-
id,
|
|
1164
|
-
type: "search",
|
|
1165
|
-
placeholder,
|
|
1166
|
-
"aria-label": hideLabel ? label : void 0,
|
|
1167
|
-
className: cn(
|
|
1168
|
-
"ph-input w-full",
|
|
1169
|
-
density === "compact" && "max-w-xs !min-h-[2rem] py-1.5 text-sm",
|
|
1170
|
-
shortcut != null && "pl-[3.25rem]",
|
|
1171
|
-
className
|
|
1172
|
-
),
|
|
1173
|
-
...props
|
|
1174
|
-
}
|
|
1175
|
-
)
|
|
1176
|
-
] })
|
|
1177
|
-
] });
|
|
1178
|
-
}
|
|
1179
|
-
function SearchGroup({
|
|
1180
|
-
id: idProp,
|
|
1181
|
-
label = "Search records",
|
|
1182
|
-
submitLabel = "Search",
|
|
1183
|
-
placeholder = "Persons, actions, flags\u2026",
|
|
1184
|
-
wrapperClassName,
|
|
1185
|
-
className,
|
|
1186
|
-
...props
|
|
1187
|
-
}) {
|
|
1188
|
-
const autoId = useId2();
|
|
1189
|
-
const id = idProp ?? autoId;
|
|
1190
|
-
return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
|
|
1191
|
-
/* @__PURE__ */ jsx17("label", { htmlFor: id, className: "ph-label", children: label }),
|
|
1192
|
-
/* @__PURE__ */ jsxs13("div", { className: "ph-search-group flex w-full max-w-lg min-h-[2.3125rem] items-stretch divide-x divide-ph-border", children: [
|
|
1193
|
-
/* @__PURE__ */ jsx17(
|
|
1194
|
-
"input",
|
|
1195
|
-
{
|
|
1196
|
-
id,
|
|
1197
|
-
type: "search",
|
|
1198
|
-
placeholder,
|
|
1199
|
-
className: cn("ph-input ph-input-group-field min-w-0 flex-1", className),
|
|
1200
|
-
...props
|
|
1201
|
-
}
|
|
1202
|
-
),
|
|
1203
|
-
/* @__PURE__ */ jsx17(
|
|
1204
|
-
Button,
|
|
1205
|
-
{
|
|
1206
|
-
type: "submit",
|
|
1207
|
-
variant: "primary",
|
|
1208
|
-
icon: /* @__PURE__ */ jsx17(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
|
|
1209
|
-
className: "ph-search-group__submit",
|
|
1210
|
-
"aria-label": submitLabel
|
|
1211
|
-
}
|
|
1212
|
-
)
|
|
1213
|
-
] })
|
|
1214
|
-
] });
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
// src/components/ui/Table.tsx
|
|
1218
|
-
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1219
|
-
function Table({
|
|
1220
|
-
data,
|
|
1221
|
-
columns,
|
|
1222
|
-
zebra = false,
|
|
1223
|
-
compact = false,
|
|
1224
|
-
ribbon = false,
|
|
1225
|
-
getRowStyle,
|
|
1226
|
-
className,
|
|
1227
|
-
caption
|
|
1228
|
-
}) {
|
|
1229
|
-
return /* @__PURE__ */ jsx18("div", { className: cn("ph-table-wrap", compact && "ph-table-compact", className), children: /* @__PURE__ */ jsxs14("table", { className: cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon"), children: [
|
|
1230
|
-
caption && /* @__PURE__ */ jsx18("caption", { className: "sr-only", children: caption }),
|
|
1231
|
-
/* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: columns.map((col) => /* @__PURE__ */ jsx18("th", { className: col.className, children: col.header }, col.key)) }) }),
|
|
1232
|
-
/* @__PURE__ */ jsx18("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx18("tr", { style: getRowStyle == null ? void 0 : getRowStyle(row), children: columns.map((col) => /* @__PURE__ */ jsx18("td", { className: col.className, children: col.cell(row) }, col.key)) }, i)) })
|
|
1233
|
-
] }) });
|
|
1234
|
-
}
|
|
1235
|
-
|
|
1236
|
-
// src/components/ui/Stat.tsx
|
|
1237
|
-
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1238
|
-
var toneMap = {
|
|
1239
|
-
default: "text-ph-ink",
|
|
1240
|
-
brand: "text-ph-brand",
|
|
1241
|
-
blue: "text-ph-blue",
|
|
1242
|
-
purple: "text-ph-purple",
|
|
1243
|
-
warning: "text-amber-900"
|
|
1244
|
-
};
|
|
1245
|
-
var statMap = {
|
|
1246
|
-
default: "",
|
|
1247
|
-
brand: "",
|
|
1248
|
-
blue: "",
|
|
1249
|
-
purple: "",
|
|
1250
|
-
warning: "border-amber-200 bg-amber-50/70"
|
|
1251
|
-
};
|
|
1252
|
-
function Stat({ icon, label, value, footer, tone = "default", className, ...props }) {
|
|
1253
|
-
return /* @__PURE__ */ jsxs15("article", { className: cn("ph-stat", statMap[tone], className), ...props, children: [
|
|
1254
|
-
icon && /* @__PURE__ */ jsx19("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
|
|
1255
|
-
/* @__PURE__ */ jsx19("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
|
|
1256
|
-
/* @__PURE__ */ jsx19("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
|
|
1257
|
-
footer && /* @__PURE__ */ jsx19("p", { className: "text-xs text-ph-subtle", children: footer })
|
|
1258
|
-
] });
|
|
1259
|
-
}
|
|
1260
|
-
|
|
1261
|
-
// src/components/ui/Toast.tsx
|
|
1262
|
-
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1263
|
-
var statusConfig2 = {
|
|
1264
|
-
info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
|
|
1265
|
-
success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
|
|
1266
|
-
warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
|
|
1267
|
-
danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" }
|
|
1268
|
-
};
|
|
1269
|
-
function Toast({
|
|
1270
|
-
status = "info",
|
|
1271
|
-
title,
|
|
1272
|
-
description,
|
|
1273
|
-
onDismiss,
|
|
1274
|
-
className
|
|
1275
|
-
}) {
|
|
1276
|
-
const config = statusConfig2[status];
|
|
1277
|
-
const Icon = config.icon;
|
|
1278
|
-
return /* @__PURE__ */ jsxs16("div", { className: cn("ph-toast", config.bg, className), children: [
|
|
1279
|
-
/* @__PURE__ */ jsx20(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
|
|
1280
|
-
/* @__PURE__ */ jsxs16("div", { className: "pr-8", children: [
|
|
1281
|
-
/* @__PURE__ */ jsx20("div", { className: "font-semibold", children: title }),
|
|
1282
|
-
description && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
|
|
1283
|
-
] }),
|
|
1284
|
-
onDismiss && /* @__PURE__ */ jsx20(
|
|
1285
|
-
"button",
|
|
1286
|
-
{
|
|
1287
|
-
type: "button",
|
|
1288
|
-
"aria-label": `Dismiss ${title}`,
|
|
1289
|
-
className: "absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle",
|
|
1290
|
-
onClick: onDismiss,
|
|
1291
|
-
children: /* @__PURE__ */ jsx20(IconClose, { className: "h-4 w-4" })
|
|
1292
|
-
}
|
|
1293
|
-
)
|
|
1294
|
-
] });
|
|
1295
|
-
}
|
|
1296
|
-
function ToastStack({ children, className }) {
|
|
1297
|
-
return /* @__PURE__ */ jsx20("div", { className: cn("ph-toast-stack", className), children });
|
|
1298
|
-
}
|
|
1299
|
-
|
|
1300
|
-
// src/components/ui/Tabs.tsx
|
|
1301
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1302
|
-
function Tabs({ items, value, onChange, variant = "pill", className }) {
|
|
1303
|
-
if (variant === "underline") {
|
|
1304
|
-
return /* @__PURE__ */ jsx21("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ jsx21(
|
|
1305
|
-
"button",
|
|
1306
|
-
{
|
|
1307
|
-
type: "button",
|
|
1308
|
-
onClick: () => onChange(item.value),
|
|
1309
|
-
className: cn(
|
|
1310
|
-
"-mb-px border-b-2 pb-2 text-sm font-semibold transition",
|
|
1311
|
-
value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
|
|
1312
|
-
),
|
|
1313
|
-
children: item.label
|
|
1314
|
-
},
|
|
1315
|
-
item.value
|
|
1316
|
-
)) });
|
|
1317
|
-
}
|
|
1318
|
-
return /* @__PURE__ */ jsx21("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ jsx21(
|
|
1319
|
-
"button",
|
|
1320
|
-
{
|
|
1321
|
-
type: "button",
|
|
1322
|
-
onClick: () => onChange(item.value),
|
|
1323
|
-
className: cn("ph-tab", value === item.value && "ph-tab-active"),
|
|
1324
|
-
children: item.label
|
|
1325
|
-
},
|
|
1326
|
-
item.value
|
|
1327
|
-
)) });
|
|
1328
|
-
}
|
|
1329
|
-
|
|
1330
|
-
// src/components/ui/ThemeDomSync.tsx
|
|
1331
|
-
import { useLayoutEffect } from "react";
|
|
1332
|
-
|
|
1333
|
-
// src/themes/registry.ts
|
|
1334
|
-
var DEFAULT_THEME_ID = "hedgehog-light";
|
|
1335
|
-
var THEMES = [
|
|
1336
|
-
{
|
|
1337
|
-
id: "hedgehog-light",
|
|
1338
|
-
name: "HedgeHog Light",
|
|
1339
|
-
description: "Default Quill warm greys and orange Lemon chrome.",
|
|
1340
|
-
colorScheme: "light",
|
|
1341
|
-
group: "HedgeHog"
|
|
1342
|
-
},
|
|
1343
|
-
{
|
|
1344
|
-
id: "hedgehog-dark",
|
|
1345
|
-
name: "HedgeHog Dark",
|
|
1346
|
-
description: "Dark app shell with HedgeHog orange accents.",
|
|
1347
|
-
colorScheme: "dark",
|
|
1348
|
-
group: "HedgeHog"
|
|
1349
|
-
},
|
|
1350
|
-
{
|
|
1351
|
-
id: "catppuccin-light",
|
|
1352
|
-
name: "Catppuccin Light",
|
|
1353
|
-
description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
|
|
1354
|
-
colorScheme: "light",
|
|
1355
|
-
group: "Catppuccin"
|
|
1356
|
-
},
|
|
1357
|
-
{
|
|
1358
|
-
id: "catppuccin-dark",
|
|
1359
|
-
name: "Catppuccin Dark",
|
|
1360
|
-
description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
|
|
1361
|
-
colorScheme: "dark",
|
|
1362
|
-
group: "Catppuccin"
|
|
1363
|
-
},
|
|
1364
|
-
{
|
|
1365
|
-
id: "sheets",
|
|
1366
|
-
name: "Sheets",
|
|
1367
|
-
description: "Spreadsheet green on office neutrals.",
|
|
1368
|
-
colorScheme: "light",
|
|
1369
|
-
group: "Productivity"
|
|
1370
|
-
},
|
|
1371
|
-
{
|
|
1372
|
-
id: "sheets-dark",
|
|
1373
|
-
name: "Sheets Dark",
|
|
1374
|
-
description: "Dark shell with spreadsheet green accent.",
|
|
1375
|
-
colorScheme: "dark",
|
|
1376
|
-
group: "Productivity"
|
|
1377
|
-
},
|
|
1378
|
-
{
|
|
1379
|
-
id: "note",
|
|
1380
|
-
name: "Note",
|
|
1381
|
-
description: "Notebook purple on lavender-white chrome.",
|
|
1382
|
-
colorScheme: "light",
|
|
1383
|
-
group: "Productivity"
|
|
1384
|
-
},
|
|
1385
|
-
{
|
|
1386
|
-
id: "note-dark",
|
|
1387
|
-
name: "Note Dark",
|
|
1388
|
-
description: "Dark notebook purple \u2014 night reading mode.",
|
|
1389
|
-
colorScheme: "dark",
|
|
1390
|
-
group: "Productivity"
|
|
1391
|
-
},
|
|
1392
|
-
{
|
|
1393
|
-
id: "presentation",
|
|
1394
|
-
name: "Presentation",
|
|
1395
|
-
description: "Orange-red on office neutrals.",
|
|
1396
|
-
colorScheme: "light",
|
|
1397
|
-
group: "Productivity"
|
|
1398
|
-
},
|
|
1399
|
-
{
|
|
1400
|
-
id: "presentation-dark",
|
|
1401
|
-
name: "Presentation Dark",
|
|
1402
|
-
description: "Dark shell with orange-red accent.",
|
|
1403
|
-
colorScheme: "dark",
|
|
1404
|
-
group: "Productivity"
|
|
1405
|
-
},
|
|
1406
|
-
{
|
|
1407
|
-
id: "socials",
|
|
1408
|
-
name: "Socials",
|
|
1409
|
-
description: "Meta blue accent on familiar social greys.",
|
|
1410
|
-
colorScheme: "light",
|
|
1411
|
-
group: "Social"
|
|
1412
|
-
},
|
|
1413
|
-
{
|
|
1414
|
-
id: "socials-dark",
|
|
1415
|
-
name: "Socials Dark",
|
|
1416
|
-
description: "Social dark mode \u2014 #18191A base and Meta blue.",
|
|
1417
|
-
colorScheme: "dark",
|
|
1418
|
-
group: "Social"
|
|
1419
|
-
},
|
|
1420
|
-
{
|
|
1421
|
-
id: "chats-light",
|
|
1422
|
-
name: "Chats Light",
|
|
1423
|
-
description: "Aubergine brand on clean workspace neutrals.",
|
|
1424
|
-
colorScheme: "light",
|
|
1425
|
-
group: "Chats"
|
|
1426
|
-
},
|
|
1427
|
-
{
|
|
1428
|
-
id: "chats-dark",
|
|
1429
|
-
name: "Chats Dark",
|
|
1430
|
-
description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
|
|
1431
|
-
colorScheme: "dark",
|
|
1432
|
-
group: "Chats"
|
|
1433
|
-
},
|
|
1434
|
-
{
|
|
1435
|
-
id: "xenide-light",
|
|
1436
|
-
name: "Xenide Light",
|
|
1437
|
-
description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
|
|
1438
|
-
colorScheme: "light",
|
|
1439
|
-
group: "Xenide"
|
|
1440
|
-
},
|
|
1441
|
-
{
|
|
1442
|
-
id: "xenide-dark",
|
|
1443
|
-
name: "Xenide Dark",
|
|
1444
|
-
description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
|
|
1445
|
-
colorScheme: "dark",
|
|
1446
|
-
group: "Xenide"
|
|
1447
|
-
},
|
|
1448
|
-
{
|
|
1449
|
-
id: "bikini-bottom",
|
|
1450
|
-
name: "Bikini Bottom",
|
|
1451
|
-
description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
|
|
1452
|
-
colorScheme: "light",
|
|
1453
|
-
group: "Fun"
|
|
1454
|
-
},
|
|
1455
|
-
{
|
|
1456
|
-
id: "bikini-bottom-dark",
|
|
1457
|
-
name: "Bikini Bottom Dark",
|
|
1458
|
-
description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
|
|
1459
|
-
colorScheme: "dark",
|
|
1460
|
-
group: "Fun"
|
|
1461
|
-
},
|
|
1462
|
-
{
|
|
1463
|
-
id: "turtletime",
|
|
1464
|
-
name: "TurtleTime",
|
|
1465
|
-
description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
|
|
1466
|
-
colorScheme: "light",
|
|
1467
|
-
group: "Fun"
|
|
1468
|
-
},
|
|
1469
|
-
{
|
|
1470
|
-
id: "turtletime-dark",
|
|
1471
|
-
name: "TurtleTime Dark",
|
|
1472
|
-
description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
|
|
1473
|
-
colorScheme: "dark",
|
|
1474
|
-
group: "Fun"
|
|
1475
|
-
},
|
|
1476
|
-
{
|
|
1477
|
-
id: "github-light",
|
|
1478
|
-
name: "GitHub Light",
|
|
1479
|
-
description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
|
|
1480
|
-
colorScheme: "light",
|
|
1481
|
-
group: "GitHub"
|
|
1482
|
-
},
|
|
1483
|
-
{
|
|
1484
|
-
id: "github-dark",
|
|
1485
|
-
name: "GitHub Dark",
|
|
1486
|
-
description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
|
|
1487
|
-
colorScheme: "dark",
|
|
1488
|
-
group: "GitHub"
|
|
1489
|
-
},
|
|
1490
|
-
{
|
|
1491
|
-
id: "rosepine-light",
|
|
1492
|
-
name: "Ros\xE9 Pine Dawn",
|
|
1493
|
-
description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
|
|
1494
|
-
colorScheme: "light",
|
|
1495
|
-
group: "Ros\xE9 Pine"
|
|
1496
|
-
},
|
|
1497
|
-
{
|
|
1498
|
-
id: "rosepine-dark",
|
|
1499
|
-
name: "Ros\xE9 Pine",
|
|
1500
|
-
description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
|
|
1501
|
-
colorScheme: "dark",
|
|
1502
|
-
group: "Ros\xE9 Pine"
|
|
1503
|
-
}
|
|
1504
|
-
];
|
|
1505
|
-
var THEME_GROUPS = Array.from(new Set(THEMES.map((theme) => theme.group)));
|
|
1506
|
-
function isThemeId(value) {
|
|
1507
|
-
return THEMES.some((theme) => theme.id === value);
|
|
1508
|
-
}
|
|
1509
|
-
function getTheme(id) {
|
|
1510
|
-
return THEMES.find((theme) => theme.id === id);
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
|
-
// src/themes/init-theme.ts
|
|
1514
|
-
var STORAGE_KEY = "ph-theme";
|
|
1515
|
-
var VALID_THEMES = THEMES.map((theme) => theme.id);
|
|
1516
|
-
var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(t==="xenide")t="xenide-light";if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
|
|
1517
|
-
function persistTheme(themeId) {
|
|
1518
|
-
if (typeof window === "undefined") {
|
|
1519
|
-
return;
|
|
1520
|
-
}
|
|
1521
|
-
if (!isThemeId(themeId)) {
|
|
1522
|
-
return;
|
|
1523
|
-
}
|
|
1524
|
-
document.documentElement.setAttribute("data-theme", themeId);
|
|
1525
|
-
localStorage.setItem(STORAGE_KEY, themeId);
|
|
1526
|
-
}
|
|
1527
|
-
function readStoredTheme() {
|
|
1528
|
-
if (typeof window === "undefined") {
|
|
1529
|
-
return DEFAULT_THEME_ID;
|
|
1530
|
-
}
|
|
1531
|
-
const stored = localStorage.getItem(STORAGE_KEY);
|
|
1532
|
-
if (stored === "xenide") {
|
|
1533
|
-
return "xenide-light";
|
|
1534
|
-
}
|
|
1535
|
-
return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
|
|
1536
|
-
}
|
|
1537
|
-
|
|
1538
|
-
// src/components/ui/ThemeDomSync.tsx
|
|
1539
|
-
function ThemeDomSync() {
|
|
1540
|
-
useLayoutEffect(() => {
|
|
1541
|
-
persistTheme(readStoredTheme());
|
|
1542
|
-
}, []);
|
|
1543
|
-
return null;
|
|
1544
|
-
}
|
|
1545
|
-
|
|
1546
|
-
// src/components/ui/ThemeManager.tsx
|
|
1547
|
-
import { useLayoutEffect as useLayoutEffect2 } from "react";
|
|
1548
|
-
import { Fragment as Fragment5, jsx as jsx22 } from "react/jsx-runtime";
|
|
1549
|
-
function ThemeManager({ children }) {
|
|
1550
|
-
useLayoutEffect2(() => {
|
|
1551
|
-
persistTheme(readStoredTheme());
|
|
1552
|
-
}, []);
|
|
1553
|
-
return /* @__PURE__ */ jsx22(Fragment5, { children });
|
|
1554
|
-
}
|
|
1555
|
-
|
|
1556
|
-
// src/components/ui/ThemeSwitcher.tsx
|
|
1557
|
-
import { useEffect, useState } from "react";
|
|
1558
|
-
import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1559
|
-
function ThemeSwitcher({ className }) {
|
|
1560
|
-
const [themeId, setThemeId] = useState("hedgehog-light");
|
|
1561
|
-
useEffect(() => {
|
|
1562
|
-
const id = readStoredTheme();
|
|
1563
|
-
persistTheme(id);
|
|
1564
|
-
setThemeId(id);
|
|
1565
|
-
}, []);
|
|
1566
|
-
return /* @__PURE__ */ jsxs17("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
|
|
1567
|
-
/* @__PURE__ */ jsx23("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
|
|
1568
|
-
/* @__PURE__ */ jsx23(
|
|
1569
|
-
"select",
|
|
1570
|
-
{
|
|
1571
|
-
className: "ph-select max-w-[11rem] !min-h-[2rem] py-1 pl-2.5 pr-8 text-xs sm:max-w-[14rem] sm:text-sm",
|
|
1572
|
-
value: themeId,
|
|
1573
|
-
"aria-label": "Colour theme",
|
|
1574
|
-
onChange: (event) => {
|
|
1575
|
-
const next = event.target.value;
|
|
1576
|
-
persistTheme(next);
|
|
1577
|
-
setThemeId(next);
|
|
1578
|
-
},
|
|
1579
|
-
children: THEME_GROUPS.map((group) => /* @__PURE__ */ jsx23("optgroup", { label: group, children: THEMES.filter((theme) => theme.group === group).map((theme) => /* @__PURE__ */ jsx23("option", { value: theme.id, children: theme.name }, theme.id)) }, group))
|
|
1580
|
-
}
|
|
1581
|
-
)
|
|
1582
|
-
] });
|
|
1583
|
-
}
|
|
1584
|
-
|
|
1585
|
-
// src/components/ui/Accordion.tsx
|
|
1586
|
-
import { useState as useState2 } from "react";
|
|
1587
|
-
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1588
|
-
function Accordion({
|
|
1589
|
-
items,
|
|
1590
|
-
allowMultiple = false,
|
|
1591
|
-
defaultOpen = [],
|
|
1592
|
-
className
|
|
1593
|
-
}) {
|
|
1594
|
-
const [openItems, setOpenItems] = useState2(new Set(defaultOpen));
|
|
1595
|
-
const toggleItem = (id) => {
|
|
1596
|
-
setOpenItems((prev) => {
|
|
1597
|
-
const next = new Set(prev);
|
|
1598
|
-
if (next.has(id)) {
|
|
1599
|
-
next.delete(id);
|
|
1600
|
-
} else {
|
|
1601
|
-
if (!allowMultiple) {
|
|
1602
|
-
next.clear();
|
|
1603
|
-
}
|
|
1604
|
-
next.add(id);
|
|
1605
|
-
}
|
|
1606
|
-
return next;
|
|
1607
|
-
});
|
|
1608
|
-
};
|
|
1609
|
-
return /* @__PURE__ */ jsx24("div", { className: cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className), children: items.map((item) => {
|
|
1610
|
-
const isOpen = openItems.has(item.id);
|
|
1611
|
-
return /* @__PURE__ */ jsxs18("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
|
|
1612
|
-
/* @__PURE__ */ jsxs18(
|
|
1613
|
-
"button",
|
|
1614
|
-
{
|
|
1615
|
-
type: "button",
|
|
1616
|
-
onClick: () => toggleItem(item.id),
|
|
1617
|
-
className: "flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted",
|
|
1618
|
-
children: [
|
|
1619
|
-
/* @__PURE__ */ jsx24("span", { className: "font-semibold text-ph-ink", children: item.title }),
|
|
1620
|
-
/* @__PURE__ */ jsx24(
|
|
1621
|
-
IconChevronDown,
|
|
1622
|
-
{
|
|
1623
|
-
className: cn(
|
|
1624
|
-
"h-5 w-5 text-ph-mutedtext transition-transform duration-200",
|
|
1625
|
-
isOpen && "rotate-180"
|
|
1626
|
-
)
|
|
1627
|
-
}
|
|
1628
|
-
)
|
|
1629
|
-
]
|
|
1630
|
-
}
|
|
1631
|
-
),
|
|
1632
|
-
/* @__PURE__ */ jsx24(
|
|
1633
|
-
"div",
|
|
1634
|
-
{
|
|
1635
|
-
className: cn(
|
|
1636
|
-
"grid transition-all duration-200",
|
|
1637
|
-
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
1638
|
-
),
|
|
1639
|
-
children: /* @__PURE__ */ jsx24("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
|
|
1640
|
-
}
|
|
1641
|
-
)
|
|
1642
|
-
] }, item.id);
|
|
1643
|
-
}) });
|
|
1644
|
-
}
|
|
1645
|
-
|
|
1646
|
-
// src/components/ui/Stepper.tsx
|
|
1647
|
-
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1648
|
-
function Stepper({ steps, currentStep, className }) {
|
|
1649
|
-
return /* @__PURE__ */ jsx25("div", { className: cn("flex items-start gap-2", className), children: steps.map((step, index) => {
|
|
1650
|
-
const isCompleted = index < currentStep;
|
|
1651
|
-
const isCurrent = index === currentStep;
|
|
1652
|
-
const isPending = index > currentStep;
|
|
1653
|
-
const isError = step.status === "error";
|
|
1654
|
-
return /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 items-start gap-2", children: [
|
|
1655
|
-
/* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col items-center", children: [
|
|
1656
|
-
/* @__PURE__ */ jsx25(
|
|
1657
|
-
"div",
|
|
1658
|
-
{
|
|
1659
|
-
className: cn(
|
|
1660
|
-
"flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
|
|
1661
|
-
isCompleted && "bg-ph-success text-white",
|
|
1662
|
-
isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
|
|
1663
|
-
isCurrent && isError && "bg-ph-danger text-white",
|
|
1664
|
-
isPending && "bg-ph-muted text-ph-mutedtext"
|
|
1665
|
-
),
|
|
1666
|
-
children: isCompleted ? /* @__PURE__ */ jsx25("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsx25("path", { d: "M5 13l4 4L19 7" }) }) : index + 1
|
|
1667
|
-
}
|
|
1668
|
-
),
|
|
1669
|
-
/* @__PURE__ */ jsxs19("div", { className: "mt-2 text-center", children: [
|
|
1670
|
-
/* @__PURE__ */ jsx25(
|
|
1671
|
-
"p",
|
|
1672
|
-
{
|
|
1673
|
-
className: cn(
|
|
1674
|
-
"text-sm font-semibold",
|
|
1675
|
-
isCurrent && "text-ph-ink",
|
|
1676
|
-
!isCurrent && "text-ph-mutedtext"
|
|
1677
|
-
),
|
|
1678
|
-
children: step.label
|
|
1679
|
-
}
|
|
1680
|
-
),
|
|
1681
|
-
step.description && /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
|
|
1682
|
-
] })
|
|
1683
|
-
] }),
|
|
1684
|
-
index < steps.length - 1 && /* @__PURE__ */ jsx25(
|
|
1685
|
-
"div",
|
|
1686
|
-
{
|
|
1687
|
-
className: cn(
|
|
1688
|
-
"mt-4 h-0.5 flex-1 rounded-full transition-colors",
|
|
1689
|
-
isCompleted ? "bg-ph-success" : "bg-ph-border"
|
|
1690
|
-
)
|
|
1691
|
-
}
|
|
1692
|
-
)
|
|
1693
|
-
] }, step.id);
|
|
1694
|
-
}) });
|
|
1695
|
-
}
|
|
1696
|
-
|
|
1697
|
-
// src/components/ui/SegmentedControl.tsx
|
|
1698
|
-
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1699
|
-
function SegmentedControl({ options, value, onChange, className }) {
|
|
1700
|
-
return /* @__PURE__ */ jsx26(
|
|
1701
|
-
"div",
|
|
1702
|
-
{
|
|
1703
|
-
className: cn(
|
|
1704
|
-
"inline-flex rounded-lg bg-ph-muted p-1",
|
|
1705
|
-
className
|
|
1706
|
-
),
|
|
1707
|
-
children: options.map((option) => /* @__PURE__ */ jsxs20(
|
|
1708
|
-
"button",
|
|
1709
|
-
{
|
|
1710
|
-
type: "button",
|
|
1711
|
-
onClick: () => onChange(option.value),
|
|
1712
|
-
className: cn(
|
|
1713
|
-
"relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
|
|
1714
|
-
value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
|
|
1715
|
-
),
|
|
1716
|
-
children: [
|
|
1717
|
-
option.icon && /* @__PURE__ */ jsx26("span", { className: "h-4 w-4", children: option.icon }),
|
|
1718
|
-
option.label
|
|
1719
|
-
]
|
|
1720
|
-
},
|
|
1721
|
-
option.value
|
|
1722
|
-
))
|
|
1723
|
-
}
|
|
1724
|
-
);
|
|
1725
|
-
}
|
|
1726
|
-
|
|
1727
|
-
// src/components/ui/CommandPalette.tsx
|
|
1728
|
-
import { useState as useState3, useEffect as useEffect2, useRef } from "react";
|
|
1729
|
-
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1730
|
-
function CommandPalette({
|
|
1731
|
-
items,
|
|
1732
|
-
isOpen,
|
|
1733
|
-
onClose,
|
|
1734
|
-
placeholder = "Type a command or search...",
|
|
1735
|
-
className
|
|
1736
|
-
}) {
|
|
1737
|
-
const [query, setQuery] = useState3("");
|
|
1738
|
-
const [selectedIndex, setSelectedIndex] = useState3(0);
|
|
1739
|
-
const inputRef = useRef(null);
|
|
1740
|
-
const filtered = items.filter(
|
|
1741
|
-
(item) => item.label.toLowerCase().includes(query.toLowerCase())
|
|
1742
|
-
);
|
|
1743
|
-
useEffect2(() => {
|
|
1744
|
-
var _a;
|
|
1745
|
-
if (isOpen) {
|
|
1746
|
-
setQuery("");
|
|
1747
|
-
setSelectedIndex(0);
|
|
1748
|
-
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
1749
|
-
}
|
|
1750
|
-
}, [isOpen]);
|
|
1751
|
-
useEffect2(() => {
|
|
1752
|
-
const handleKeyDown = (e) => {
|
|
1753
|
-
var _a;
|
|
1754
|
-
if (!isOpen) return;
|
|
1755
|
-
switch (e.key) {
|
|
1756
|
-
case "ArrowDown":
|
|
1757
|
-
e.preventDefault();
|
|
1758
|
-
setSelectedIndex((i) => (i + 1) % filtered.length);
|
|
1759
|
-
break;
|
|
1760
|
-
case "ArrowUp":
|
|
1761
|
-
e.preventDefault();
|
|
1762
|
-
setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
|
|
1763
|
-
break;
|
|
1764
|
-
case "Enter":
|
|
1765
|
-
e.preventDefault();
|
|
1766
|
-
(_a = filtered[selectedIndex]) == null ? void 0 : _a.onSelect();
|
|
1767
|
-
onClose();
|
|
1768
|
-
break;
|
|
1769
|
-
case "Escape":
|
|
1770
|
-
onClose();
|
|
1771
|
-
break;
|
|
1772
|
-
}
|
|
1773
|
-
};
|
|
1774
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
1775
|
-
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
1776
|
-
}, [isOpen, filtered, selectedIndex, onClose]);
|
|
1777
|
-
if (!isOpen) return null;
|
|
1778
|
-
return /* @__PURE__ */ jsx27("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ jsxs21(
|
|
1779
|
-
"div",
|
|
1780
|
-
{
|
|
1781
|
-
className: cn(
|
|
1782
|
-
"w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
|
|
1783
|
-
className
|
|
1784
|
-
),
|
|
1785
|
-
children: [
|
|
1786
|
-
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
|
|
1787
|
-
/* @__PURE__ */ jsx27(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
|
|
1788
|
-
/* @__PURE__ */ jsx27(
|
|
1789
|
-
"input",
|
|
1790
|
-
{
|
|
1791
|
-
ref: inputRef,
|
|
1792
|
-
type: "text",
|
|
1793
|
-
value: query,
|
|
1794
|
-
onChange: (e) => {
|
|
1795
|
-
setQuery(e.target.value);
|
|
1796
|
-
setSelectedIndex(0);
|
|
1797
|
-
},
|
|
1798
|
-
placeholder,
|
|
1799
|
-
className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
|
|
1800
|
-
}
|
|
1801
|
-
),
|
|
1802
|
-
/* @__PURE__ */ jsx27("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
|
|
1803
|
-
] }),
|
|
1804
|
-
/* @__PURE__ */ jsx27("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx27("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs21(
|
|
1805
|
-
"button",
|
|
1806
|
-
{
|
|
1807
|
-
type: "button",
|
|
1808
|
-
onClick: () => {
|
|
1809
|
-
item.onSelect();
|
|
1810
|
-
onClose();
|
|
1811
|
-
},
|
|
1812
|
-
onMouseEnter: () => setSelectedIndex(index),
|
|
1813
|
-
className: cn(
|
|
1814
|
-
"flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
|
|
1815
|
-
index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
|
|
1816
|
-
),
|
|
1817
|
-
children: [
|
|
1818
|
-
item.icon && /* @__PURE__ */ jsx27("span", { className: "h-5 w-5", children: item.icon }),
|
|
1819
|
-
/* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
|
|
1820
|
-
item.shortcut && /* @__PURE__ */ jsx27("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
|
|
1821
|
-
]
|
|
1822
|
-
},
|
|
1823
|
-
item.id
|
|
1824
|
-
)) })
|
|
1825
|
-
]
|
|
1826
|
-
}
|
|
1827
|
-
) });
|
|
1828
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
Accordion,
|
|
3
|
+
Alert,
|
|
4
|
+
Avatar,
|
|
5
|
+
AvatarGroup,
|
|
6
|
+
Badge,
|
|
7
|
+
Breadcrumbs,
|
|
8
|
+
Button,
|
|
9
|
+
ButtonChrome,
|
|
10
|
+
Calendar,
|
|
11
|
+
Caption,
|
|
12
|
+
Card,
|
|
13
|
+
ChatBubble,
|
|
14
|
+
Checkbox,
|
|
15
|
+
CodeBlock,
|
|
16
|
+
CollapsibleSection,
|
|
17
|
+
CommandPalette,
|
|
18
|
+
ComponentDocs,
|
|
19
|
+
DEFAULT_THEME_ID,
|
|
20
|
+
Display,
|
|
21
|
+
Drawer,
|
|
22
|
+
DropdownButton,
|
|
23
|
+
DropdownItem,
|
|
24
|
+
DropdownMenu,
|
|
25
|
+
EmptyState,
|
|
26
|
+
FileUpload,
|
|
27
|
+
FilterChips,
|
|
28
|
+
H1,
|
|
29
|
+
H2,
|
|
30
|
+
H3,
|
|
31
|
+
H4,
|
|
32
|
+
H5,
|
|
33
|
+
HoverCard,
|
|
34
|
+
IconActivity,
|
|
35
|
+
IconAreaChart,
|
|
36
|
+
IconArrowDown,
|
|
37
|
+
IconArrowUp,
|
|
38
|
+
IconBase,
|
|
39
|
+
IconBell,
|
|
40
|
+
IconBellOff,
|
|
41
|
+
IconBolt,
|
|
42
|
+
IconBox,
|
|
43
|
+
IconByName,
|
|
44
|
+
IconCancel,
|
|
45
|
+
IconCheck,
|
|
46
|
+
IconCheckCircle,
|
|
47
|
+
IconChevronDown,
|
|
48
|
+
IconChevronLeft,
|
|
49
|
+
IconChevronRight,
|
|
50
|
+
IconClipboardEdit,
|
|
51
|
+
IconClose,
|
|
52
|
+
IconCohort,
|
|
53
|
+
IconCopy,
|
|
54
|
+
IconCumulativeChart,
|
|
55
|
+
IconDatabase,
|
|
56
|
+
IconDownload,
|
|
57
|
+
IconEdit,
|
|
58
|
+
IconErrorOutline,
|
|
59
|
+
IconExclamation,
|
|
60
|
+
IconFlag,
|
|
61
|
+
IconFlare,
|
|
62
|
+
IconFlask,
|
|
63
|
+
IconGift,
|
|
64
|
+
IconGridView,
|
|
65
|
+
IconHandClick,
|
|
66
|
+
IconHome,
|
|
67
|
+
IconLayers,
|
|
68
|
+
IconListView,
|
|
69
|
+
IconLogout,
|
|
70
|
+
IconMail,
|
|
71
|
+
IconMoon,
|
|
72
|
+
IconPanelRight,
|
|
73
|
+
IconPerson,
|
|
74
|
+
IconPlayCircle,
|
|
75
|
+
IconPlus,
|
|
76
|
+
IconPremium,
|
|
77
|
+
IconQueryEditor,
|
|
78
|
+
IconRadar,
|
|
79
|
+
IconRecording,
|
|
80
|
+
IconRobot,
|
|
81
|
+
IconRocket,
|
|
82
|
+
IconSave,
|
|
83
|
+
IconSearch,
|
|
84
|
+
IconSelectEvents,
|
|
85
|
+
IconShoppingCart,
|
|
86
|
+
IconSpinner,
|
|
87
|
+
IconStar,
|
|
88
|
+
IconSubArrowRight,
|
|
89
|
+
IconSun,
|
|
90
|
+
IconSurveys,
|
|
91
|
+
IconSync,
|
|
92
|
+
IconTableChart,
|
|
93
|
+
IconTerminal,
|
|
94
|
+
IconToggle,
|
|
95
|
+
IconTrash,
|
|
96
|
+
IconTuning,
|
|
97
|
+
IconUpload,
|
|
98
|
+
IconVolume,
|
|
99
|
+
IconVolumeOff,
|
|
100
|
+
Indicator,
|
|
101
|
+
Input,
|
|
102
|
+
Kbd,
|
|
103
|
+
Label,
|
|
104
|
+
Lead,
|
|
105
|
+
Modal,
|
|
106
|
+
Mono,
|
|
107
|
+
Overline,
|
|
108
|
+
P,
|
|
109
|
+
PH_ICONS,
|
|
110
|
+
Pagination,
|
|
111
|
+
Panel,
|
|
112
|
+
Progress,
|
|
113
|
+
Radio,
|
|
114
|
+
Range,
|
|
115
|
+
Rating,
|
|
116
|
+
SearchGroup,
|
|
117
|
+
SearchInput,
|
|
118
|
+
SegmentedControl,
|
|
119
|
+
Select,
|
|
120
|
+
ShowcaseWrapper,
|
|
121
|
+
Small,
|
|
122
|
+
Stat,
|
|
123
|
+
Stepper,
|
|
124
|
+
THEMES,
|
|
125
|
+
THEME_GROUPS,
|
|
126
|
+
THEME_INIT_SCRIPT,
|
|
127
|
+
Table,
|
|
128
|
+
Tabs,
|
|
129
|
+
Terminal,
|
|
130
|
+
Textarea,
|
|
131
|
+
ThemeDomSync,
|
|
132
|
+
ThemeManager,
|
|
133
|
+
ThemeSwitcher,
|
|
134
|
+
Timeline,
|
|
135
|
+
Toast,
|
|
136
|
+
ToastStack,
|
|
137
|
+
Toggle,
|
|
138
|
+
cn,
|
|
139
|
+
createIconBase,
|
|
140
|
+
createIconBasePath,
|
|
141
|
+
getTheme,
|
|
142
|
+
isThemeId,
|
|
143
|
+
persistTheme,
|
|
144
|
+
readStoredTheme
|
|
145
|
+
} from "./chunk-SHF57J7U.mjs";
|
|
146
|
+
import {
|
|
147
|
+
__objRest,
|
|
148
|
+
__spreadProps,
|
|
149
|
+
__spreadValues
|
|
150
|
+
} from "./chunk-FWCSY2DS.mjs";
|
|
1829
151
|
|
|
1830
|
-
// src/components/
|
|
1831
|
-
import { useState as
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
"September",
|
|
1852
|
-
"October",
|
|
1853
|
-
"November",
|
|
1854
|
-
"December"
|
|
1855
|
-
];
|
|
1856
|
-
const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
1857
|
-
const isSelected = (day) => {
|
|
1858
|
-
if (!value) return false;
|
|
1859
|
-
return value.getDate() === day && value.getMonth() === month && value.getFullYear() === year;
|
|
1860
|
-
};
|
|
1861
|
-
const isToday = (day) => {
|
|
1862
|
-
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
|
|
1863
|
-
};
|
|
1864
|
-
const handleSelect = (day) => {
|
|
1865
|
-
onChange == null ? void 0 : onChange(new Date(year, month, day));
|
|
1866
|
-
};
|
|
1867
|
-
const days = [];
|
|
1868
|
-
for (let i = 0; i < firstDay; i++) {
|
|
1869
|
-
days.push(null);
|
|
152
|
+
// src/components/charts/ph-insight-charts.tsx
|
|
153
|
+
import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
|
|
154
|
+
|
|
155
|
+
// src/lib/chart/register-chartjs.ts
|
|
156
|
+
import {
|
|
157
|
+
ArcElement,
|
|
158
|
+
BarController,
|
|
159
|
+
BarElement,
|
|
160
|
+
CategoryScale,
|
|
161
|
+
Chart as ChartJS,
|
|
162
|
+
DoughnutController,
|
|
163
|
+
Legend,
|
|
164
|
+
LinearScale,
|
|
165
|
+
PolarAreaController,
|
|
166
|
+
RadialLinearScale,
|
|
167
|
+
Title,
|
|
168
|
+
Tooltip
|
|
169
|
+
} from "chart.js";
|
|
170
|
+
function synchroniseChartJsFontFamily() {
|
|
171
|
+
if (typeof document === "undefined") {
|
|
172
|
+
return;
|
|
1870
173
|
}
|
|
1871
|
-
|
|
1872
|
-
|
|
174
|
+
const family = window.getComputedStyle(document.body).fontFamily;
|
|
175
|
+
const trimmed = family == null ? void 0 : family.trim();
|
|
176
|
+
if (trimmed) {
|
|
177
|
+
ChartJS.defaults.font.family = trimmed;
|
|
1873
178
|
}
|
|
1874
|
-
return /* @__PURE__ */ jsxs22("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
|
|
1875
|
-
/* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
|
|
1876
|
-
/* @__PURE__ */ jsx28(
|
|
1877
|
-
"button",
|
|
1878
|
-
{
|
|
1879
|
-
type: "button",
|
|
1880
|
-
onClick: prevMonth,
|
|
1881
|
-
className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
|
|
1882
|
-
children: /* @__PURE__ */ jsx28("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx28("path", { d: "M15 18l-6-6 6-6" }) })
|
|
1883
|
-
}
|
|
1884
|
-
),
|
|
1885
|
-
/* @__PURE__ */ jsxs22("span", { className: "text-sm font-semibold text-ph-ink", children: [
|
|
1886
|
-
monthNames[month],
|
|
1887
|
-
" ",
|
|
1888
|
-
year
|
|
1889
|
-
] }),
|
|
1890
|
-
/* @__PURE__ */ jsx28(
|
|
1891
|
-
"button",
|
|
1892
|
-
{
|
|
1893
|
-
type: "button",
|
|
1894
|
-
onClick: nextMonth,
|
|
1895
|
-
className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
|
|
1896
|
-
children: /* @__PURE__ */ jsx28("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx28("path", { d: "M9 18l6-6-6-6" }) })
|
|
1897
|
-
}
|
|
1898
|
-
)
|
|
1899
|
-
] }),
|
|
1900
|
-
/* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-7 gap-1", children: [
|
|
1901
|
-
weekDays.map((day) => /* @__PURE__ */ jsx28("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
|
|
1902
|
-
days.map((day, index) => /* @__PURE__ */ jsx28("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx28(
|
|
1903
|
-
"button",
|
|
1904
|
-
{
|
|
1905
|
-
type: "button",
|
|
1906
|
-
onClick: () => handleSelect(day),
|
|
1907
|
-
className: cn(
|
|
1908
|
-
"flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
|
|
1909
|
-
isSelected(day) ? "bg-ph-brand font-semibold text-white shadow-ph" : isToday(day) ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30" : "text-ph-ink hover:bg-ph-muted"
|
|
1910
|
-
),
|
|
1911
|
-
children: day
|
|
1912
|
-
}
|
|
1913
|
-
) }, index))
|
|
1914
|
-
] })
|
|
1915
|
-
] });
|
|
1916
|
-
}
|
|
1917
|
-
|
|
1918
|
-
// src/components/ui/HoverCard.tsx
|
|
1919
|
-
import { useState as useState5 } from "react";
|
|
1920
|
-
import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1921
|
-
function HoverCard({ trigger, children, className }) {
|
|
1922
|
-
const [isVisible, setIsVisible] = useState5(false);
|
|
1923
|
-
return /* @__PURE__ */ jsxs23(
|
|
1924
|
-
"div",
|
|
1925
|
-
{
|
|
1926
|
-
className: "relative inline-block",
|
|
1927
|
-
onMouseEnter: () => setIsVisible(true),
|
|
1928
|
-
onMouseLeave: () => setIsVisible(false),
|
|
1929
|
-
children: [
|
|
1930
|
-
trigger,
|
|
1931
|
-
/* @__PURE__ */ jsxs23(
|
|
1932
|
-
"div",
|
|
1933
|
-
{
|
|
1934
|
-
className: cn(
|
|
1935
|
-
"absolute left-1/2 top-full z-50 mt-2 w-64 -translate-x-1/2 rounded-lg border border-ph-border bg-ph-surface p-4 shadow-ph-md transition-all duration-150",
|
|
1936
|
-
isVisible ? "visible translate-y-0 opacity-100" : "invisible -translate-y-1 opacity-0",
|
|
1937
|
-
className
|
|
1938
|
-
),
|
|
1939
|
-
children: [
|
|
1940
|
-
/* @__PURE__ */ jsx29("div", { className: "absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-ph-border bg-ph-surface" }),
|
|
1941
|
-
/* @__PURE__ */ jsx29("div", { className: "relative", children })
|
|
1942
|
-
]
|
|
1943
|
-
}
|
|
1944
|
-
)
|
|
1945
|
-
]
|
|
1946
|
-
}
|
|
1947
|
-
);
|
|
1948
|
-
}
|
|
1949
|
-
|
|
1950
|
-
// src/components/ui/EmptyState.tsx
|
|
1951
|
-
import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1952
|
-
function EmptyState({ icon, title, description, action, className }) {
|
|
1953
|
-
return /* @__PURE__ */ jsxs24(
|
|
1954
|
-
"div",
|
|
1955
|
-
{
|
|
1956
|
-
className: cn(
|
|
1957
|
-
"flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
|
|
1958
|
-
className
|
|
1959
|
-
),
|
|
1960
|
-
children: [
|
|
1961
|
-
icon && /* @__PURE__ */ jsx30("div", { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext", children: icon }),
|
|
1962
|
-
/* @__PURE__ */ jsx30("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
|
|
1963
|
-
description && /* @__PURE__ */ jsx30("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
|
|
1964
|
-
action && /* @__PURE__ */ jsx30("div", { className: "mt-4", children: action })
|
|
1965
|
-
]
|
|
1966
|
-
}
|
|
1967
|
-
);
|
|
1968
|
-
}
|
|
1969
|
-
|
|
1970
|
-
// src/components/ui/FilterChips.tsx
|
|
1971
|
-
import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1972
|
-
function FilterChips({ chips, onToggle, onRemove, className }) {
|
|
1973
|
-
return /* @__PURE__ */ jsx31("div", { className: cn("flex flex-wrap gap-2", className), children: chips.map((chip) => /* @__PURE__ */ jsxs25(
|
|
1974
|
-
"button",
|
|
1975
|
-
{
|
|
1976
|
-
type: "button",
|
|
1977
|
-
onClick: () => onToggle(chip.id),
|
|
1978
|
-
className: cn(
|
|
1979
|
-
"inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
|
|
1980
|
-
chip.active ? "bg-ph-brand text-white" : "bg-ph-muted text-ph-subtle hover:bg-ph-border hover:text-ph-ink"
|
|
1981
|
-
),
|
|
1982
|
-
children: [
|
|
1983
|
-
chip.label,
|
|
1984
|
-
chip.active && /* @__PURE__ */ jsx31(
|
|
1985
|
-
"span",
|
|
1986
|
-
{
|
|
1987
|
-
onClick: (e) => {
|
|
1988
|
-
e.stopPropagation();
|
|
1989
|
-
onRemove(chip.id);
|
|
1990
|
-
},
|
|
1991
|
-
className: "ml-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-white/20",
|
|
1992
|
-
children: /* @__PURE__ */ jsx31(IconClose, { className: "h-3 w-3" })
|
|
1993
|
-
}
|
|
1994
|
-
)
|
|
1995
|
-
]
|
|
1996
|
-
},
|
|
1997
|
-
chip.id
|
|
1998
|
-
)) });
|
|
1999
|
-
}
|
|
2000
|
-
|
|
2001
|
-
// src/components/ui/CodeBlock.tsx
|
|
2002
|
-
import { useState as useState6 } from "react";
|
|
2003
|
-
import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2004
|
-
function CodeBlock({ code, language = "tsx", filename, className }) {
|
|
2005
|
-
const [copied, setCopied] = useState6(false);
|
|
2006
|
-
const handleCopy = async () => {
|
|
2007
|
-
await navigator.clipboard.writeText(code);
|
|
2008
|
-
setCopied(true);
|
|
2009
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
2010
|
-
};
|
|
2011
|
-
return /* @__PURE__ */ jsxs26("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
|
|
2012
|
-
(filename || language) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
|
|
2013
|
-
/* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
|
|
2014
|
-
/* @__PURE__ */ jsxs26("div", { className: "flex gap-1.5", children: [
|
|
2015
|
-
/* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
|
|
2016
|
-
/* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
|
|
2017
|
-
/* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
|
|
2018
|
-
] }),
|
|
2019
|
-
filename && /* @__PURE__ */ jsx32("span", { className: "ml-2 text-xs text-white/60", children: filename })
|
|
2020
|
-
] }),
|
|
2021
|
-
/* @__PURE__ */ jsx32(
|
|
2022
|
-
"button",
|
|
2023
|
-
{
|
|
2024
|
-
type: "button",
|
|
2025
|
-
onClick: handleCopy,
|
|
2026
|
-
className: "text-xs text-white/60 transition hover:text-white",
|
|
2027
|
-
children: copied ? "Copied!" : "Copy"
|
|
2028
|
-
}
|
|
2029
|
-
)
|
|
2030
|
-
] }),
|
|
2031
|
-
/* @__PURE__ */ jsx32("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx32("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
|
|
2032
|
-
] });
|
|
2033
|
-
}
|
|
2034
|
-
|
|
2035
|
-
// src/components/ui/ComponentDocs.tsx
|
|
2036
|
-
import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2037
|
-
function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
|
|
2038
|
-
return /* @__PURE__ */ jsxs27("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
|
|
2039
|
-
/* @__PURE__ */ jsxs27("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden", children: [
|
|
2040
|
-
/* @__PURE__ */ jsx33("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
|
|
2041
|
-
/* @__PURE__ */ jsxs27("span", { className: "rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white", children: [
|
|
2042
|
-
/* @__PURE__ */ jsx33("span", { className: "group-open:hidden", children: "Show" }),
|
|
2043
|
-
/* @__PURE__ */ jsx33("span", { className: "hidden group-open:inline", children: "Hide" })
|
|
2044
|
-
] })
|
|
2045
|
-
] }),
|
|
2046
|
-
/* @__PURE__ */ jsx33("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs27("table", { className: "w-full text-left text-sm", children: [
|
|
2047
|
-
/* @__PURE__ */ jsx33("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs27("tr", { children: [
|
|
2048
|
-
/* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
|
|
2049
|
-
/* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
|
|
2050
|
-
/* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
|
|
2051
|
-
/* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Use" })
|
|
2052
|
-
] }) }),
|
|
2053
|
-
/* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => /* @__PURE__ */ jsxs27("tr", { children: [
|
|
2054
|
-
/* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
|
|
2055
|
-
/* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
|
|
2056
|
-
/* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.defaultValue ?? "-" }),
|
|
2057
|
-
/* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
|
|
2058
|
-
] }, row.name)) })
|
|
2059
|
-
] }) })
|
|
2060
|
-
] });
|
|
2061
|
-
}
|
|
2062
|
-
|
|
2063
|
-
// src/components/ui/ShowcaseWrapper.tsx
|
|
2064
|
-
import { useState as useState7 } from "react";
|
|
2065
|
-
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2066
|
-
function ShowcaseWrapper({
|
|
2067
|
-
id,
|
|
2068
|
-
title,
|
|
2069
|
-
description,
|
|
2070
|
-
docs,
|
|
2071
|
-
code,
|
|
2072
|
-
filename = "Example.tsx",
|
|
2073
|
-
children,
|
|
2074
|
-
className
|
|
2075
|
-
}) {
|
|
2076
|
-
const [showCode, setShowCode] = useState7(false);
|
|
2077
|
-
const fallbackId = titleIdMap[title] ?? title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
|
2078
|
-
return /* @__PURE__ */ jsxs28("section", { id: id ?? fallbackId, className: cn("scroll-mt-20", className), children: [
|
|
2079
|
-
/* @__PURE__ */ jsxs28("div", { className: "ph-h2-rule mb-8", children: [
|
|
2080
|
-
/* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5", children: [
|
|
2081
|
-
/* @__PURE__ */ jsx34("h2", { children: title }),
|
|
2082
|
-
/* @__PURE__ */ jsx34(
|
|
2083
|
-
"button",
|
|
2084
|
-
{
|
|
2085
|
-
type: "button",
|
|
2086
|
-
onClick: () => setShowCode(!showCode),
|
|
2087
|
-
className: cn(
|
|
2088
|
-
"flex h-10 w-10 items-center justify-center rounded-full border transition-all",
|
|
2089
|
-
showCode ? "border-ph-brand bg-ph-brand text-white shadow-lg shadow-ph-brand/25" : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
|
|
2090
|
-
),
|
|
2091
|
-
title: showCode ? "Hide code" : "Show code",
|
|
2092
|
-
children: /* @__PURE__ */ jsxs28(
|
|
2093
|
-
"svg",
|
|
2094
|
-
{
|
|
2095
|
-
className: "h-5 w-5",
|
|
2096
|
-
viewBox: "0 0 24 24",
|
|
2097
|
-
fill: "none",
|
|
2098
|
-
stroke: "currentColor",
|
|
2099
|
-
strokeWidth: "2",
|
|
2100
|
-
strokeLinecap: "round",
|
|
2101
|
-
strokeLinejoin: "round",
|
|
2102
|
-
children: [
|
|
2103
|
-
/* @__PURE__ */ jsx34("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
|
|
2104
|
-
/* @__PURE__ */ jsx34("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
|
|
2105
|
-
/* @__PURE__ */ jsx34("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
|
|
2106
|
-
/* @__PURE__ */ jsx34("line", { x1: "6", y1: "8", x2: "6", y2: "8" }),
|
|
2107
|
-
/* @__PURE__ */ jsx34("line", { x1: "10", y1: "8", x2: "10", y2: "8" })
|
|
2108
|
-
]
|
|
2109
|
-
}
|
|
2110
|
-
)
|
|
2111
|
-
}
|
|
2112
|
-
)
|
|
2113
|
-
] }),
|
|
2114
|
-
/* @__PURE__ */ jsx34("hr", {})
|
|
2115
|
-
] }),
|
|
2116
|
-
description && /* @__PURE__ */ jsx34("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
|
|
2117
|
-
docs && /* @__PURE__ */ jsx34("div", { className: "mb-6", children: docs }),
|
|
2118
|
-
/* @__PURE__ */ jsxs28(
|
|
2119
|
-
"div",
|
|
2120
|
-
{
|
|
2121
|
-
className: cn(
|
|
2122
|
-
"gap-6",
|
|
2123
|
-
showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
|
|
2124
|
-
),
|
|
2125
|
-
children: [
|
|
2126
|
-
/* @__PURE__ */ jsx34("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
|
|
2127
|
-
/* @__PURE__ */ jsx34(
|
|
2128
|
-
"div",
|
|
2129
|
-
{
|
|
2130
|
-
className: cn(
|
|
2131
|
-
"transition-all duration-300",
|
|
2132
|
-
showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
|
|
2133
|
-
),
|
|
2134
|
-
children: /* @__PURE__ */ jsx34("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx34(CodeBlock, { code, filename }) })
|
|
2135
|
-
}
|
|
2136
|
-
)
|
|
2137
|
-
]
|
|
2138
|
-
}
|
|
2139
|
-
)
|
|
2140
|
-
] });
|
|
2141
|
-
}
|
|
2142
|
-
var titleIdMap = {
|
|
2143
|
-
"Icons": "icons",
|
|
2144
|
-
"Colour tokens": "colors",
|
|
2145
|
-
"Buttons": "buttons",
|
|
2146
|
-
"Badges": "badges",
|
|
2147
|
-
"Alerts": "alerts",
|
|
2148
|
-
"Toasts": "toasts",
|
|
2149
|
-
"Cards": "cards",
|
|
2150
|
-
"Forms": "forms",
|
|
2151
|
-
"Inputs & Forms": "forms",
|
|
2152
|
-
"Tables": "tables",
|
|
2153
|
-
"Accordion": "accordion",
|
|
2154
|
-
"Calendar": "calendar",
|
|
2155
|
-
"Hover Card": "hovercard",
|
|
2156
|
-
"Modals": "modals",
|
|
2157
|
-
"Drawers": "drawers",
|
|
2158
|
-
"Navigation chrome": "navigation",
|
|
2159
|
-
"Navigation utilities": "utilities",
|
|
2160
|
-
"Stepper": "stepper",
|
|
2161
|
-
"Command Palette": "command",
|
|
2162
|
-
"Filter Chips": "filters",
|
|
2163
|
-
"Empty State": "emptystate",
|
|
2164
|
-
"Charts (PostHog-style)": "charts",
|
|
2165
|
-
"Dashboard shells": "dashboard",
|
|
2166
|
-
"Tabs": "tabs",
|
|
2167
|
-
"Dropdowns": "dropdowns",
|
|
2168
|
-
"Progress & loading": "progress",
|
|
2169
|
-
"Tooltip": "tooltip",
|
|
2170
|
-
"Avatars": "avatars",
|
|
2171
|
-
"Stats & conversational UI": "stats",
|
|
2172
|
-
"Timeline": "timeline",
|
|
2173
|
-
"Countdown motif": "countdown",
|
|
2174
|
-
"Keyboard glyphs": "kbd",
|
|
2175
|
-
"Icon swap": "swap",
|
|
2176
|
-
"Stacked surfaces": "stack",
|
|
2177
|
-
"Diff slider": "diff",
|
|
2178
|
-
"Badge hotspots": "indicator",
|
|
2179
|
-
"Terminal capture": "code-mockup"
|
|
2180
|
-
};
|
|
2181
|
-
|
|
2182
|
-
// src/components/ui/CollapsibleSection.tsx
|
|
2183
|
-
import { useState as useState8 } from "react";
|
|
2184
|
-
import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2185
|
-
function CollapsibleSection({ title, children, defaultOpen = true, id }) {
|
|
2186
|
-
const [isOpen, setIsOpen] = useState8(defaultOpen);
|
|
2187
|
-
return /* @__PURE__ */ jsxs29("section", { id, className: "scroll-mt-20", children: [
|
|
2188
|
-
/* @__PURE__ */ jsxs29(
|
|
2189
|
-
"button",
|
|
2190
|
-
{
|
|
2191
|
-
type: "button",
|
|
2192
|
-
onClick: () => setIsOpen(!isOpen),
|
|
2193
|
-
className: "mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80",
|
|
2194
|
-
children: [
|
|
2195
|
-
/* @__PURE__ */ jsx35("span", { className: "text-lg font-bold text-ph-ink", children: title }),
|
|
2196
|
-
/* @__PURE__ */ jsx35(
|
|
2197
|
-
"svg",
|
|
2198
|
-
{
|
|
2199
|
-
className: cn(
|
|
2200
|
-
"h-5 w-5 text-ph-subtle transition-transform duration-200",
|
|
2201
|
-
isOpen && "rotate-180"
|
|
2202
|
-
),
|
|
2203
|
-
viewBox: "0 0 24 24",
|
|
2204
|
-
fill: "none",
|
|
2205
|
-
stroke: "currentColor",
|
|
2206
|
-
strokeWidth: "2",
|
|
2207
|
-
strokeLinecap: "round",
|
|
2208
|
-
strokeLinejoin: "round",
|
|
2209
|
-
children: /* @__PURE__ */ jsx35("path", { d: "M6 9l6 6 6-6" })
|
|
2210
|
-
}
|
|
2211
|
-
)
|
|
2212
|
-
]
|
|
2213
|
-
}
|
|
2214
|
-
),
|
|
2215
|
-
/* @__PURE__ */ jsx35(
|
|
2216
|
-
"div",
|
|
2217
|
-
{
|
|
2218
|
-
className: cn(
|
|
2219
|
-
"overflow-hidden transition-all duration-300",
|
|
2220
|
-
isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
|
|
2221
|
-
),
|
|
2222
|
-
children
|
|
2223
|
-
}
|
|
2224
|
-
)
|
|
2225
|
-
] });
|
|
2226
|
-
}
|
|
2227
|
-
|
|
2228
|
-
// src/components/ui/Typography.tsx
|
|
2229
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
2230
|
-
var toneMap2 = {
|
|
2231
|
-
default: "text-ph-ink",
|
|
2232
|
-
muted: "text-ph-mutedtext",
|
|
2233
|
-
subtle: "text-ph-subtle",
|
|
2234
|
-
brand: "text-ph-brand",
|
|
2235
|
-
danger: "text-ph-danger",
|
|
2236
|
-
success: "text-ph-success",
|
|
2237
|
-
warning: "text-ph-warning",
|
|
2238
|
-
info: "text-ph-info",
|
|
2239
|
-
inherit: ""
|
|
2240
|
-
};
|
|
2241
|
-
var weightMap = {
|
|
2242
|
-
normal: "font-normal",
|
|
2243
|
-
medium: "font-medium",
|
|
2244
|
-
semibold: "font-semibold",
|
|
2245
|
-
bold: "font-bold",
|
|
2246
|
-
extrabold: "font-extrabold"
|
|
2247
|
-
};
|
|
2248
|
-
function textClass(base, tone, weight, truncate, className) {
|
|
2249
|
-
return cn(base, toneMap2[tone], weight && weightMap[weight], truncate && "truncate", className);
|
|
2250
|
-
}
|
|
2251
|
-
function Display({
|
|
2252
|
-
children,
|
|
2253
|
-
tone = "default",
|
|
2254
|
-
weight,
|
|
2255
|
-
truncate,
|
|
2256
|
-
className
|
|
2257
|
-
}) {
|
|
2258
|
-
return /* @__PURE__ */ jsx36("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
|
|
2259
|
-
}
|
|
2260
|
-
function H1({ children, tone = "default", weight, truncate, className }) {
|
|
2261
|
-
return /* @__PURE__ */ jsx36("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
|
|
2262
|
-
}
|
|
2263
|
-
function H2({ children, tone = "default", weight, truncate, className }) {
|
|
2264
|
-
return /* @__PURE__ */ jsx36("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
|
|
2265
|
-
}
|
|
2266
|
-
function H3({ children, tone = "default", weight, truncate, className }) {
|
|
2267
|
-
return /* @__PURE__ */ jsx36("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
|
|
2268
|
-
}
|
|
2269
|
-
function H4({ children, tone = "default", weight, truncate, className }) {
|
|
2270
|
-
return /* @__PURE__ */ jsx36("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
|
|
2271
|
-
}
|
|
2272
|
-
function H5({ children, tone = "default", weight, truncate, className }) {
|
|
2273
|
-
return /* @__PURE__ */ jsx36("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
|
|
2274
|
-
}
|
|
2275
|
-
function P({ children, tone = "default", weight, truncate, className }) {
|
|
2276
|
-
return /* @__PURE__ */ jsx36("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
|
|
2277
|
-
}
|
|
2278
|
-
function Small({ children, tone = "default", weight, truncate, className }) {
|
|
2279
|
-
return /* @__PURE__ */ jsx36("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
|
|
2280
|
-
}
|
|
2281
|
-
function Caption({ children, tone = "muted", weight, truncate, className }) {
|
|
2282
|
-
return /* @__PURE__ */ jsx36("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
|
|
2283
|
-
}
|
|
2284
|
-
function Overline({ children, tone = "muted", weight, truncate, className }) {
|
|
2285
|
-
return /* @__PURE__ */ jsx36("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
|
|
2286
|
-
}
|
|
2287
|
-
function Lead({ children, tone = "subtle", weight, truncate, className }) {
|
|
2288
|
-
return /* @__PURE__ */ jsx36("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
|
|
2289
|
-
}
|
|
2290
|
-
function Mono({ children, tone = "default", weight, truncate, className }) {
|
|
2291
|
-
return /* @__PURE__ */ jsx36("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
|
|
2292
|
-
}
|
|
2293
|
-
function Label({ children, tone = "default", weight, truncate, className }) {
|
|
2294
|
-
return /* @__PURE__ */ jsx36("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
|
|
2295
|
-
}
|
|
2296
|
-
|
|
2297
|
-
// src/components/ui/Avatar.tsx
|
|
2298
|
-
import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2299
|
-
var sizeMap5 = {
|
|
2300
|
-
xs: "h-8 w-8 text-[10px]",
|
|
2301
|
-
sm: "h-10 w-10 text-xs",
|
|
2302
|
-
md: "h-12 w-12 text-base",
|
|
2303
|
-
lg: "h-16 w-16 text-xl",
|
|
2304
|
-
xl: "h-24 w-24 text-3xl"
|
|
2305
|
-
};
|
|
2306
|
-
var statusMap = {
|
|
2307
|
-
online: "bg-emerald-500",
|
|
2308
|
-
offline: "bg-ph-mutedtext",
|
|
2309
|
-
away: "bg-amber-400",
|
|
2310
|
-
busy: "bg-ph-danger"
|
|
2311
|
-
};
|
|
2312
|
-
function Avatar({
|
|
2313
|
-
label,
|
|
2314
|
-
icon,
|
|
2315
|
-
size = "md",
|
|
2316
|
-
color = "bg-ph-brand text-white",
|
|
2317
|
-
status,
|
|
2318
|
-
badge,
|
|
2319
|
-
className,
|
|
2320
|
-
...props
|
|
2321
|
-
}) {
|
|
2322
|
-
return /* @__PURE__ */ jsxs30("div", { className: cn("relative inline-flex shrink-0", className), ...props, children: [
|
|
2323
|
-
/* @__PURE__ */ jsx37(
|
|
2324
|
-
"div",
|
|
2325
|
-
{
|
|
2326
|
-
className: cn(
|
|
2327
|
-
"flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
|
|
2328
|
-
sizeMap5[size],
|
|
2329
|
-
color
|
|
2330
|
-
),
|
|
2331
|
-
children: icon || label
|
|
2332
|
-
}
|
|
2333
|
-
),
|
|
2334
|
-
status && /* @__PURE__ */ jsx37(
|
|
2335
|
-
"span",
|
|
2336
|
-
{
|
|
2337
|
-
className: cn(
|
|
2338
|
-
"absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
|
|
2339
|
-
statusMap[status]
|
|
2340
|
-
)
|
|
2341
|
-
}
|
|
2342
|
-
),
|
|
2343
|
-
badge && /* @__PURE__ */ jsx37("span", { className: "absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white", children: badge })
|
|
2344
|
-
] });
|
|
2345
|
-
}
|
|
2346
|
-
function AvatarGroup({ children, max, className, ...props }) {
|
|
2347
|
-
const items = Array.isArray(children) ? children : [children];
|
|
2348
|
-
const visible = max ? items.slice(0, max) : items;
|
|
2349
|
-
const remaining = max ? items.length - max : 0;
|
|
2350
|
-
return /* @__PURE__ */ jsxs30("div", { className: cn("-space-x-3 flex rtl:space-x-reverse", className), ...props, children: [
|
|
2351
|
-
visible,
|
|
2352
|
-
remaining > 0 && /* @__PURE__ */ jsx37(
|
|
2353
|
-
Avatar,
|
|
2354
|
-
{
|
|
2355
|
-
label: `+${remaining}`,
|
|
2356
|
-
size: "md",
|
|
2357
|
-
color: "bg-ph-toolbar text-ph-subtle"
|
|
2358
|
-
}
|
|
2359
|
-
)
|
|
2360
|
-
] });
|
|
2361
|
-
}
|
|
2362
|
-
|
|
2363
|
-
// src/components/ui/Progress.tsx
|
|
2364
|
-
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2365
|
-
var sizeMap6 = {
|
|
2366
|
-
sm: "h-1",
|
|
2367
|
-
md: "h-2",
|
|
2368
|
-
lg: "h-3"
|
|
2369
|
-
};
|
|
2370
|
-
function Progress({
|
|
2371
|
-
value,
|
|
2372
|
-
max = 100,
|
|
2373
|
-
color = "bg-ph-brand",
|
|
2374
|
-
label,
|
|
2375
|
-
showPercentage = false,
|
|
2376
|
-
size = "md",
|
|
2377
|
-
className,
|
|
2378
|
-
...props
|
|
2379
|
-
}) {
|
|
2380
|
-
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
2381
|
-
return /* @__PURE__ */ jsxs31("div", { className: cn("w-full", className), ...props, children: [
|
|
2382
|
-
(label || showPercentage) && /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
|
|
2383
|
-
label && /* @__PURE__ */ jsx38("span", { children: label }),
|
|
2384
|
-
showPercentage && /* @__PURE__ */ jsxs31("span", { className: "tabular-nums", children: [
|
|
2385
|
-
Math.round(percentage),
|
|
2386
|
-
"%"
|
|
2387
|
-
] })
|
|
2388
|
-
] }),
|
|
2389
|
-
/* @__PURE__ */ jsx38("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ jsx38(
|
|
2390
|
-
"div",
|
|
2391
|
-
{
|
|
2392
|
-
className: cn("ph-progress-bar", color),
|
|
2393
|
-
style: { width: `${percentage}%` },
|
|
2394
|
-
role: "progressbar",
|
|
2395
|
-
"aria-valuenow": value,
|
|
2396
|
-
"aria-valuemin": 0,
|
|
2397
|
-
"aria-valuemax": max
|
|
2398
|
-
}
|
|
2399
|
-
) })
|
|
2400
|
-
] });
|
|
2401
|
-
}
|
|
2402
|
-
|
|
2403
|
-
// src/components/ui/ChatBubble.tsx
|
|
2404
|
-
import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2405
|
-
function ChatBubble({
|
|
2406
|
-
children,
|
|
2407
|
-
avatar,
|
|
2408
|
-
name,
|
|
2409
|
-
time,
|
|
2410
|
-
variant = "from",
|
|
2411
|
-
footer,
|
|
2412
|
-
className,
|
|
2413
|
-
...props
|
|
2414
|
-
}) {
|
|
2415
|
-
const isSelf = variant === "self";
|
|
2416
|
-
return /* @__PURE__ */ jsxs32(
|
|
2417
|
-
"div",
|
|
2418
|
-
{
|
|
2419
|
-
className: cn(
|
|
2420
|
-
"flex gap-3",
|
|
2421
|
-
isSelf && "flex-row-reverse",
|
|
2422
|
-
className
|
|
2423
|
-
),
|
|
2424
|
-
...props,
|
|
2425
|
-
children: [
|
|
2426
|
-
avatar && /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: avatar }),
|
|
2427
|
-
/* @__PURE__ */ jsxs32("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
|
|
2428
|
-
(name || time) && /* @__PURE__ */ jsxs32(
|
|
2429
|
-
"header",
|
|
2430
|
-
{
|
|
2431
|
-
className: cn(
|
|
2432
|
-
"flex gap-2 text-xs text-ph-mutedtext",
|
|
2433
|
-
isSelf && "flex-row-reverse justify-end"
|
|
2434
|
-
),
|
|
2435
|
-
children: [
|
|
2436
|
-
name && /* @__PURE__ */ jsx39("span", { className: "font-semibold text-ph-ink", children: name }),
|
|
2437
|
-
time && /* @__PURE__ */ jsx39("span", { children: time })
|
|
2438
|
-
]
|
|
2439
|
-
}
|
|
2440
|
-
),
|
|
2441
|
-
/* @__PURE__ */ jsx39(
|
|
2442
|
-
"div",
|
|
2443
|
-
{
|
|
2444
|
-
className: cn(
|
|
2445
|
-
"mt-2 inline-block text-left shadow-ph",
|
|
2446
|
-
isSelf ? "ph-chat-self" : "ph-chat-from"
|
|
2447
|
-
),
|
|
2448
|
-
children
|
|
2449
|
-
}
|
|
2450
|
-
),
|
|
2451
|
-
footer && /* @__PURE__ */ jsx39("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
|
|
2452
|
-
] })
|
|
2453
|
-
]
|
|
2454
|
-
}
|
|
2455
|
-
);
|
|
2456
|
-
}
|
|
2457
|
-
|
|
2458
|
-
// src/components/ui/Terminal.tsx
|
|
2459
|
-
import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2460
|
-
function Terminal({
|
|
2461
|
-
title = "sandbox",
|
|
2462
|
-
lines,
|
|
2463
|
-
children,
|
|
2464
|
-
className,
|
|
2465
|
-
...props
|
|
2466
|
-
}) {
|
|
2467
|
-
return /* @__PURE__ */ jsxs33(
|
|
2468
|
-
"div",
|
|
2469
|
-
{
|
|
2470
|
-
className: cn(
|
|
2471
|
-
"overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
|
|
2472
|
-
className
|
|
2473
|
-
),
|
|
2474
|
-
...props,
|
|
2475
|
-
children: [
|
|
2476
|
-
/* @__PURE__ */ jsxs33("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
|
|
2477
|
-
/* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
|
|
2478
|
-
/* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
|
|
2479
|
-
/* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
|
|
2480
|
-
title && /* @__PURE__ */ jsx40("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
|
|
2481
|
-
] }),
|
|
2482
|
-
/* @__PURE__ */ jsx40("div", { className: "ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed", children: children || /* @__PURE__ */ jsx40(Fragment6, { children: lines == null ? void 0 : lines.map((line, i) => {
|
|
2483
|
-
const text = typeof line === "string" ? line : line.text;
|
|
2484
|
-
const color = typeof line === "string" ? void 0 : line.color;
|
|
2485
|
-
return /* @__PURE__ */ jsxs33("span", { children: [
|
|
2486
|
-
/* @__PURE__ */ jsx40("span", { className: color || "text-neutral-600", children: text }),
|
|
2487
|
-
i < lines.length - 1 && /* @__PURE__ */ jsx40("br", {})
|
|
2488
|
-
] }, i);
|
|
2489
|
-
}) }) })
|
|
2490
|
-
]
|
|
2491
|
-
}
|
|
2492
|
-
);
|
|
2493
|
-
}
|
|
2494
|
-
|
|
2495
|
-
// src/components/ui/Indicator.tsx
|
|
2496
|
-
import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2497
|
-
var positionMap = {
|
|
2498
|
-
"top-right": "-right-[2px] -top-[2px]",
|
|
2499
|
-
"top-left": "-left-[2px] -top-[2px]",
|
|
2500
|
-
"bottom-right": "-right-[2px] -bottom-[2px]",
|
|
2501
|
-
"bottom-left": "-left-[2px] -bottom-[2px]"
|
|
2502
|
-
};
|
|
2503
|
-
function Indicator({
|
|
2504
|
-
children,
|
|
2505
|
-
badge,
|
|
2506
|
-
color = "bg-ph-brand",
|
|
2507
|
-
position = "top-right",
|
|
2508
|
-
dot = false,
|
|
2509
|
-
className,
|
|
2510
|
-
...props
|
|
2511
|
-
}) {
|
|
2512
|
-
return /* @__PURE__ */ jsxs34("div", { className: cn("relative inline-flex items-center justify-center", className), ...props, children: [
|
|
2513
|
-
dot ? /* @__PURE__ */ jsx41(
|
|
2514
|
-
"span",
|
|
2515
|
-
{
|
|
2516
|
-
className: cn(
|
|
2517
|
-
"absolute z-10 h-2.5 w-2.5 rounded-full border-2 border-white",
|
|
2518
|
-
color,
|
|
2519
|
-
positionMap[position]
|
|
2520
|
-
)
|
|
2521
|
-
}
|
|
2522
|
-
) : badge != null ? /* @__PURE__ */ jsx41(
|
|
2523
|
-
"span",
|
|
2524
|
-
{
|
|
2525
|
-
className: cn(
|
|
2526
|
-
"absolute z-10 flex min-h-[22px] min-w-[22px] items-center justify-center rounded-full px-1 text-[11px] font-bold text-white",
|
|
2527
|
-
color,
|
|
2528
|
-
positionMap[position]
|
|
2529
|
-
),
|
|
2530
|
-
children: badge
|
|
2531
|
-
}
|
|
2532
|
-
) : null,
|
|
2533
|
-
children
|
|
2534
|
-
] });
|
|
2535
|
-
}
|
|
2536
|
-
|
|
2537
|
-
// src/components/ui/Timeline.tsx
|
|
2538
|
-
import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2539
|
-
function Timeline({
|
|
2540
|
-
events,
|
|
2541
|
-
alternate = false,
|
|
2542
|
-
className,
|
|
2543
|
-
...props
|
|
2544
|
-
}) {
|
|
2545
|
-
return /* @__PURE__ */ jsx42(
|
|
2546
|
-
"ol",
|
|
2547
|
-
{
|
|
2548
|
-
className: cn("relative space-y-8", className),
|
|
2549
|
-
...props,
|
|
2550
|
-
children: events.map((event, idx) => {
|
|
2551
|
-
const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
|
|
2552
|
-
return /* @__PURE__ */ jsxs35("li", { className: cn("relative flex gap-6", align), children: [
|
|
2553
|
-
/* @__PURE__ */ jsx42(
|
|
2554
|
-
"div",
|
|
2555
|
-
{
|
|
2556
|
-
className: cn(
|
|
2557
|
-
"relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
|
|
2558
|
-
event.color || "bg-ph-brand text-white"
|
|
2559
|
-
),
|
|
2560
|
-
children: event.icon
|
|
2561
|
-
}
|
|
2562
|
-
),
|
|
2563
|
-
/* @__PURE__ */ jsxs35("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
|
|
2564
|
-
/* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-baseline gap-3", children: [
|
|
2565
|
-
/* @__PURE__ */ jsx42("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
|
|
2566
|
-
event.time && /* @__PURE__ */ jsx42("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
|
|
2567
|
-
] }),
|
|
2568
|
-
event.description && /* @__PURE__ */ jsx42("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
|
|
2569
|
-
] })
|
|
2570
|
-
] }, event.id);
|
|
2571
|
-
})
|
|
2572
|
-
}
|
|
2573
|
-
);
|
|
2574
179
|
}
|
|
180
|
+
ChartJS.register(
|
|
181
|
+
CategoryScale,
|
|
182
|
+
LinearScale,
|
|
183
|
+
RadialLinearScale,
|
|
184
|
+
BarController,
|
|
185
|
+
BarElement,
|
|
186
|
+
DoughnutController,
|
|
187
|
+
PolarAreaController,
|
|
188
|
+
ArcElement,
|
|
189
|
+
Title,
|
|
190
|
+
Tooltip,
|
|
191
|
+
Legend
|
|
192
|
+
);
|
|
193
|
+
synchroniseChartJsFontFamily();
|
|
2575
194
|
|
|
2576
195
|
// src/components/charts/ph-insight-charts.tsx
|
|
2577
|
-
import { useEffect as useEffect5, useMemo as useMemo2, useState as useState11 } from "react";
|
|
2578
196
|
import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
|
|
2579
197
|
|
|
2580
198
|
// src/lib/chart/with-alpha.ts
|
|
@@ -2910,7 +528,7 @@ function buildPolarAreaDemo(tokens) {
|
|
|
2910
528
|
}
|
|
2911
529
|
|
|
2912
530
|
// src/lib/chart/use-ph-chart-tokens.ts
|
|
2913
|
-
import { useEffect
|
|
531
|
+
import { useEffect, useRef, useState } from "react";
|
|
2914
532
|
|
|
2915
533
|
// src/lib/chart/ph-chart-tokens.ts
|
|
2916
534
|
var FALLBACK_CHART_TOKENS = {
|
|
@@ -2929,7 +547,7 @@ function readChartTokens(root) {
|
|
|
2929
547
|
if (typeof document === "undefined") {
|
|
2930
548
|
return FALLBACK_CHART_TOKENS;
|
|
2931
549
|
}
|
|
2932
|
-
const el = root
|
|
550
|
+
const el = root != null ? root : document.documentElement;
|
|
2933
551
|
const series = [1, 2, 3, 4, 5, 6, 7].map((index) => {
|
|
2934
552
|
const raw = readCssVar(el, `--ph-data-${index}`);
|
|
2935
553
|
return raw !== "" ? raw : FALLBACK_CHART_TOKENS.series[index - 1];
|
|
@@ -2944,12 +562,24 @@ function readChartTokens(root) {
|
|
|
2944
562
|
}
|
|
2945
563
|
|
|
2946
564
|
// src/lib/chart/use-ph-chart-tokens.ts
|
|
565
|
+
function tokensEqual(a, b) {
|
|
566
|
+
if (a.series.length !== b.series.length) return false;
|
|
567
|
+
for (let i = 0; i < a.series.length; i++) {
|
|
568
|
+
if (a.series[i] !== b.series[i]) return false;
|
|
569
|
+
}
|
|
570
|
+
return a.grid === b.grid && a.text === b.text && a.textMuted === b.textMuted && a.surface === b.surface && a.borderStrong === b.borderStrong && a.accent === b.accent;
|
|
571
|
+
}
|
|
2947
572
|
function useChartTokens() {
|
|
2948
|
-
const [tokens, setTokens] =
|
|
2949
|
-
|
|
573
|
+
const [tokens, setTokens] = useState(FALLBACK_CHART_TOKENS);
|
|
574
|
+
const tokensRef = useRef(FALLBACK_CHART_TOKENS);
|
|
575
|
+
useEffect(() => {
|
|
2950
576
|
const root = document.documentElement;
|
|
2951
577
|
const refresh = () => {
|
|
2952
|
-
|
|
578
|
+
const next = readChartTokens(root);
|
|
579
|
+
if (!tokensEqual(tokensRef.current, next)) {
|
|
580
|
+
tokensRef.current = next;
|
|
581
|
+
setTokens(next);
|
|
582
|
+
}
|
|
2953
583
|
};
|
|
2954
584
|
refresh();
|
|
2955
585
|
const observer = new MutationObserver(refresh);
|
|
@@ -2972,8 +602,8 @@ function buildHogChartTheme(tokens) {
|
|
|
2972
602
|
|
|
2973
603
|
// src/lib/hog-charts-lite/CanvasTrendLineChart.tsx
|
|
2974
604
|
import { scaleLinear, scalePoint } from "d3-scale";
|
|
2975
|
-
import { useCallback, useEffect as
|
|
2976
|
-
import { jsx
|
|
605
|
+
import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
|
|
606
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2977
607
|
var HOG_LITE_DEFAULT_MARGINS = { top: 16, right: 16, bottom: 32, left: 48 };
|
|
2978
608
|
function resolveDisplayedSeries(series, palette) {
|
|
2979
609
|
const visible = series.filter((s) => {
|
|
@@ -2983,7 +613,7 @@ function resolveDisplayedSeries(series, palette) {
|
|
|
2983
613
|
return visible.map((s, visibleIndex) => {
|
|
2984
614
|
const hasExplicit = s.color != null && String(s.color).trim() !== "";
|
|
2985
615
|
const resolvedColor = hasExplicit ? String(s.color).trim() : palette[visibleIndex % palette.length];
|
|
2986
|
-
return {
|
|
616
|
+
return __spreadProps(__spreadValues({}, s), { resolvedColor });
|
|
2987
617
|
});
|
|
2988
618
|
}
|
|
2989
619
|
function yDomainForSeries(resolved) {
|
|
@@ -3029,9 +659,9 @@ function CanvasTrendLineChart({
|
|
|
3029
659
|
}) {
|
|
3030
660
|
const containerRef = useRef2(null);
|
|
3031
661
|
const canvasRef = useRef2(null);
|
|
3032
|
-
const [size, setSize] =
|
|
3033
|
-
const [hoverIndex, setHoverIndex] =
|
|
3034
|
-
|
|
662
|
+
const [size, setSize] = useState2({ width: 0, height: 0 });
|
|
663
|
+
const [hoverIndex, setHoverIndex] = useState2(null);
|
|
664
|
+
useEffect2(() => {
|
|
3035
665
|
const el = containerRef.current;
|
|
3036
666
|
if (!el) {
|
|
3037
667
|
return;
|
|
@@ -3046,7 +676,7 @@ function CanvasTrendLineChart({
|
|
|
3046
676
|
}, []);
|
|
3047
677
|
const resolved = useMemo(() => resolveDisplayedSeries(series, theme.colors), [series, theme.colors]);
|
|
3048
678
|
const draw = useCallback(() => {
|
|
3049
|
-
var _a, _b, _c;
|
|
679
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
3050
680
|
const canvas = canvasRef.current;
|
|
3051
681
|
const container = containerRef.current;
|
|
3052
682
|
if (!canvas || !container) {
|
|
@@ -3074,15 +704,15 @@ function CanvasTrendLineChart({
|
|
|
3074
704
|
if (plotWidth <= 4 || plotHeight <= 4) {
|
|
3075
705
|
return;
|
|
3076
706
|
}
|
|
3077
|
-
const bg = theme.backgroundColor
|
|
707
|
+
const bg = (_a = theme.backgroundColor) != null ? _a : "#ffffff";
|
|
3078
708
|
ctx.fillStyle = bg;
|
|
3079
709
|
ctx.fillRect(0, 0, cssW, cssH);
|
|
3080
710
|
const labelList = [...labels];
|
|
3081
711
|
const xScale = scalePoint().domain(labelList).range([plotLeft, plotLeft + plotWidth]).padding(0.5);
|
|
3082
712
|
const [y0, y1] = yDomainForSeries(resolved);
|
|
3083
713
|
const yScale = scaleLinear().domain([y0, y1]).nice().range([plotTop + plotHeight, plotTop]);
|
|
3084
|
-
const axisColor = theme.axisColor
|
|
3085
|
-
const gridColor = theme.gridColor
|
|
714
|
+
const axisColor = (_b = theme.axisColor) != null ? _b : "#666";
|
|
715
|
+
const gridColor = (_c = theme.gridColor) != null ? _c : "rgba(0,0,0,0.08)";
|
|
3086
716
|
if (showGrid) {
|
|
3087
717
|
const ticks = yScale.ticks(6);
|
|
3088
718
|
ctx.strokeStyle = gridColor;
|
|
@@ -3104,7 +734,7 @@ function CanvasTrendLineChart({
|
|
|
3104
734
|
if (s.overlay || !s.fill) {
|
|
3105
735
|
continue;
|
|
3106
736
|
}
|
|
3107
|
-
const opacity = s.fill.opacity
|
|
737
|
+
const opacity = (_d = s.fill.opacity) != null ? _d : 0.45;
|
|
3108
738
|
const baseline = yScale(0);
|
|
3109
739
|
ctx.save();
|
|
3110
740
|
ctx.globalAlpha = opacity;
|
|
@@ -3138,10 +768,10 @@ function CanvasTrendLineChart({
|
|
|
3138
768
|
ctx.restore();
|
|
3139
769
|
}
|
|
3140
770
|
for (const s of resolved) {
|
|
3141
|
-
if ((
|
|
771
|
+
if ((_e = s.visibility) == null ? void 0 : _e.excluded) {
|
|
3142
772
|
continue;
|
|
3143
773
|
}
|
|
3144
|
-
const pattern = ((
|
|
774
|
+
const pattern = (_g = (_f = s.stroke) == null ? void 0 : _f.pattern) != null ? _g : [];
|
|
3145
775
|
ctx.strokeStyle = s.resolvedColor;
|
|
3146
776
|
ctx.lineWidth = 2;
|
|
3147
777
|
ctx.lineJoin = "round";
|
|
@@ -3195,7 +825,7 @@ function CanvasTrendLineChart({
|
|
|
3195
825
|
if (hi != null && hi >= 0 && hi < labels.length && showCrosshair) {
|
|
3196
826
|
const cx = xAt(hi);
|
|
3197
827
|
if (cx != null) {
|
|
3198
|
-
const cross = theme.crosshairColor
|
|
828
|
+
const cross = (_h = theme.crosshairColor) != null ? _h : gridColor;
|
|
3199
829
|
ctx.strokeStyle = cross;
|
|
3200
830
|
ctx.lineWidth = 1;
|
|
3201
831
|
ctx.setLineDash([4, 4]);
|
|
@@ -3205,7 +835,7 @@ function CanvasTrendLineChart({
|
|
|
3205
835
|
ctx.stroke();
|
|
3206
836
|
ctx.setLineDash([]);
|
|
3207
837
|
for (const s of resolved) {
|
|
3208
|
-
if (s.overlay || ((
|
|
838
|
+
if (s.overlay || ((_i = s.visibility) == null ? void 0 : _i.excluded)) {
|
|
3209
839
|
continue;
|
|
3210
840
|
}
|
|
3211
841
|
const v = s.data[hi];
|
|
@@ -3218,7 +848,7 @@ function CanvasTrendLineChart({
|
|
|
3218
848
|
}
|
|
3219
849
|
}
|
|
3220
850
|
}, [hoverIndex, labels, resolved, showCrosshair, showGrid, size.height, size.width, theme]);
|
|
3221
|
-
|
|
851
|
+
useEffect2(() => {
|
|
3222
852
|
draw();
|
|
3223
853
|
}, [draw]);
|
|
3224
854
|
const onMouseMove = (event) => {
|
|
@@ -3270,8 +900,8 @@ function CanvasTrendLineChart({
|
|
|
3270
900
|
value: s.data[hoverIndex]
|
|
3271
901
|
})).filter((row) => typeof row.value === "number" && Number.isFinite(row.value));
|
|
3272
902
|
}, [hoverIndex, labels, resolved]);
|
|
3273
|
-
return /* @__PURE__ */
|
|
3274
|
-
/* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`.trim(), children: [
|
|
904
|
+
/* @__PURE__ */ jsx(
|
|
3275
905
|
"canvas",
|
|
3276
906
|
{
|
|
3277
907
|
ref: canvasRef,
|
|
@@ -3281,7 +911,7 @@ function CanvasTrendLineChart({
|
|
|
3281
911
|
onMouseLeave
|
|
3282
912
|
}
|
|
3283
913
|
),
|
|
3284
|
-
tooltipRows != null && tooltipRows.length > 0 && hoverIndex != null ? /* @__PURE__ */
|
|
914
|
+
tooltipRows != null && tooltipRows.length > 0 && hoverIndex != null ? /* @__PURE__ */ jsxs(
|
|
3285
915
|
"div",
|
|
3286
916
|
{
|
|
3287
917
|
className: "pointer-events-none absolute z-20 max-w-xs rounded-[var(--ph-radius-app)] border border-ph-border-strong bg-ph-surface px-3 py-2 text-xs shadow-ph-md",
|
|
@@ -3290,11 +920,11 @@ function CanvasTrendLineChart({
|
|
|
3290
920
|
top: 8
|
|
3291
921
|
},
|
|
3292
922
|
children: [
|
|
3293
|
-
/* @__PURE__ */
|
|
3294
|
-
/* @__PURE__ */
|
|
3295
|
-
/* @__PURE__ */
|
|
3296
|
-
/* @__PURE__ */
|
|
3297
|
-
/* @__PURE__ */
|
|
923
|
+
/* @__PURE__ */ jsx("div", { className: "font-semibold text-ph-ink", children: labels[hoverIndex] }),
|
|
924
|
+
/* @__PURE__ */ jsx("ul", { className: "mt-1 space-y-0.5 text-ph-mutedtext", children: tooltipRows.map((row) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
|
|
925
|
+
/* @__PURE__ */ jsx("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { background: row.color } }),
|
|
926
|
+
/* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: row.label }),
|
|
927
|
+
/* @__PURE__ */ jsx("span", { className: "ml-auto tabular-nums text-ph-ink", children: row.value })
|
|
3298
928
|
] }, row.label)) })
|
|
3299
929
|
]
|
|
3300
930
|
}
|
|
@@ -3303,15 +933,15 @@ function CanvasTrendLineChart({
|
|
|
3303
933
|
}
|
|
3304
934
|
|
|
3305
935
|
// src/components/charts/ph-insight-charts.tsx
|
|
3306
|
-
import { jsx as
|
|
936
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
3307
937
|
var DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
3308
938
|
function useClientMounted() {
|
|
3309
|
-
const [mounted, setMounted] =
|
|
3310
|
-
|
|
939
|
+
const [mounted, setMounted] = useState3(false);
|
|
940
|
+
useEffect3(() => setMounted(true), []);
|
|
3311
941
|
return mounted;
|
|
3312
942
|
}
|
|
3313
943
|
function ChartSkeleton({ className = "h-[280px]" }) {
|
|
3314
|
-
return /* @__PURE__ */
|
|
944
|
+
return /* @__PURE__ */ jsx2(
|
|
3315
945
|
"div",
|
|
3316
946
|
{
|
|
3317
947
|
className: `w-full animate-pulse rounded-lemon bg-ph-muted ${className}`,
|
|
@@ -3343,9 +973,9 @@ function HogTrendLineChart() {
|
|
|
3343
973
|
[tokens.series]
|
|
3344
974
|
);
|
|
3345
975
|
if (!mounted) {
|
|
3346
|
-
return /* @__PURE__ */
|
|
976
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, {});
|
|
3347
977
|
}
|
|
3348
|
-
return /* @__PURE__ */
|
|
978
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx2(
|
|
3349
979
|
CanvasTrendLineChart,
|
|
3350
980
|
{
|
|
3351
981
|
labels: DEMO_LABELS,
|
|
@@ -3362,144 +992,159 @@ function InsightVerticalBarChart() {
|
|
|
3362
992
|
const tokens = useChartTokens();
|
|
3363
993
|
const config = useMemo2(() => buildVerticalBarDemo(tokens), [tokens]);
|
|
3364
994
|
if (!mounted) {
|
|
3365
|
-
return /* @__PURE__ */
|
|
995
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, {});
|
|
3366
996
|
}
|
|
3367
|
-
return /* @__PURE__ */
|
|
997
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
|
|
3368
998
|
}
|
|
3369
999
|
function InsightHorizontalBarChart() {
|
|
3370
1000
|
const mounted = useClientMounted();
|
|
3371
1001
|
const tokens = useChartTokens();
|
|
3372
1002
|
const config = useMemo2(() => buildHorizontalBarDemo(tokens), [tokens]);
|
|
3373
1003
|
if (!mounted) {
|
|
3374
|
-
return /* @__PURE__ */
|
|
1004
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[320px]" });
|
|
3375
1005
|
}
|
|
3376
|
-
return /* @__PURE__ */
|
|
1006
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
|
|
3377
1007
|
}
|
|
3378
1008
|
function InsightStackedBarChart() {
|
|
3379
1009
|
const mounted = useClientMounted();
|
|
3380
1010
|
const tokens = useChartTokens();
|
|
3381
1011
|
const config = useMemo2(() => buildStackedBarDemo(tokens), [tokens]);
|
|
3382
1012
|
if (!mounted) {
|
|
3383
|
-
return /* @__PURE__ */
|
|
1013
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[300px]" });
|
|
3384
1014
|
}
|
|
3385
|
-
return /* @__PURE__ */
|
|
1015
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
|
|
3386
1016
|
}
|
|
3387
1017
|
function InsightDoughnutChart() {
|
|
3388
1018
|
const mounted = useClientMounted();
|
|
3389
1019
|
const tokens = useChartTokens();
|
|
3390
1020
|
const config = useMemo2(() => buildDoughnutDemo(tokens), [tokens]);
|
|
3391
1021
|
if (!mounted) {
|
|
3392
|
-
return /* @__PURE__ */
|
|
1022
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[260px]" });
|
|
3393
1023
|
}
|
|
3394
|
-
return /* @__PURE__ */
|
|
1024
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ jsx2(Doughnut, { data: config.data, options: config.options, redraw: false }) });
|
|
3395
1025
|
}
|
|
3396
1026
|
function InsightPolarAreaChart() {
|
|
3397
1027
|
const mounted = useClientMounted();
|
|
3398
1028
|
const tokens = useChartTokens();
|
|
3399
1029
|
const config = useMemo2(() => buildPolarAreaDemo(tokens), [tokens]);
|
|
3400
1030
|
if (!mounted) {
|
|
3401
|
-
return /* @__PURE__ */
|
|
1031
|
+
return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[280px]" });
|
|
3402
1032
|
}
|
|
3403
|
-
return /* @__PURE__ */
|
|
1033
|
+
return /* @__PURE__ */ jsx2("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ jsx2(PolarArea, { data: config.data, options: config.options, redraw: false }) });
|
|
3404
1034
|
}
|
|
3405
1035
|
|
|
3406
1036
|
// src/components/dashboard/DashboardWell.tsx
|
|
3407
|
-
import { jsx as
|
|
3408
|
-
function DashboardWell(
|
|
3409
|
-
|
|
1037
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
1038
|
+
function DashboardWell(_a) {
|
|
1039
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1040
|
+
return /* @__PURE__ */ jsx3("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
|
|
3410
1041
|
}
|
|
3411
1042
|
|
|
3412
1043
|
// src/components/dashboard/DashboardToolbar.tsx
|
|
3413
|
-
import { jsx as
|
|
1044
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
3414
1045
|
function DashboardToolbar({ title, description, actions, className }) {
|
|
3415
|
-
return /* @__PURE__ */
|
|
3416
|
-
/* @__PURE__ */
|
|
3417
|
-
/* @__PURE__ */
|
|
3418
|
-
description ? /* @__PURE__ */
|
|
1046
|
+
return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-baseline justify-between gap-4", className), children: [
|
|
1047
|
+
/* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
|
|
1048
|
+
/* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
|
|
1049
|
+
description ? /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-sm text-ph-mutedtext", children: description }) : null
|
|
3419
1050
|
] }),
|
|
3420
|
-
actions != null ? /* @__PURE__ */
|
|
1051
|
+
actions != null ? /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
|
|
3421
1052
|
] });
|
|
3422
1053
|
}
|
|
3423
1054
|
|
|
3424
1055
|
// src/components/dashboard/DashboardGrid.tsx
|
|
3425
|
-
import { jsx as
|
|
1056
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
3426
1057
|
var presetClass = {
|
|
3427
1058
|
insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
|
|
3428
1059
|
dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
|
3429
1060
|
};
|
|
3430
|
-
function DashboardGrid({
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
}
|
|
3435
|
-
|
|
1061
|
+
function DashboardGrid(_a) {
|
|
1062
|
+
var _b = _a, {
|
|
1063
|
+
preset = "insights",
|
|
1064
|
+
className
|
|
1065
|
+
} = _b, props = __objRest(_b, [
|
|
1066
|
+
"preset",
|
|
1067
|
+
"className"
|
|
1068
|
+
]);
|
|
1069
|
+
return /* @__PURE__ */ jsx5("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
|
|
3436
1070
|
}
|
|
3437
1071
|
|
|
3438
1072
|
// src/components/dashboard/DashboardFiltersBar.tsx
|
|
3439
|
-
import { jsx as
|
|
3440
|
-
function DashboardFiltersBar(
|
|
3441
|
-
|
|
1073
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
1074
|
+
function DashboardFiltersBar(_a) {
|
|
1075
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1076
|
+
return /* @__PURE__ */ jsx6(
|
|
3442
1077
|
"div",
|
|
3443
|
-
{
|
|
1078
|
+
__spreadValues({
|
|
3444
1079
|
className: cn(
|
|
3445
1080
|
"flex flex-wrap items-center gap-2 rounded-[var(--ph-radius-app)] border border-solid bg-ph-surface px-3 py-2 text-sm text-ph-subtle [border-color:var(--ph-border-control)]",
|
|
3446
1081
|
"[box-shadow:var(--ph-chrome-inset-face-top),var(--ph-chrome-inset-face-bottom),var(--ph-shadow-elevation-3000)]",
|
|
3447
1082
|
className
|
|
3448
|
-
)
|
|
3449
|
-
|
|
3450
|
-
}
|
|
1083
|
+
)
|
|
1084
|
+
}, props)
|
|
3451
1085
|
);
|
|
3452
1086
|
}
|
|
3453
1087
|
|
|
3454
1088
|
// src/components/dashboard/DashboardKpiCard.tsx
|
|
3455
|
-
import { jsx as
|
|
3456
|
-
function DashboardKpiCard(
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
/* @__PURE__ */
|
|
3460
|
-
/* @__PURE__ */
|
|
3461
|
-
|
|
1089
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1090
|
+
function DashboardKpiCard(_a) {
|
|
1091
|
+
var _b = _a, { label, value, footer, icon, className, children } = _b, props = __objRest(_b, ["label", "value", "footer", "icon", "className", "children"]);
|
|
1092
|
+
return /* @__PURE__ */ jsxs3("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
|
|
1093
|
+
icon != null ? /* @__PURE__ */ jsx7("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
|
|
1094
|
+
/* @__PURE__ */ jsx7("div", { className: "ph-stat-label", children: label }),
|
|
1095
|
+
/* @__PURE__ */ jsx7("div", { className: "ph-stat-val", children: value }),
|
|
1096
|
+
footer != null ? /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
|
|
3462
1097
|
children
|
|
3463
|
-
] });
|
|
1098
|
+
] }));
|
|
3464
1099
|
}
|
|
3465
1100
|
|
|
3466
1101
|
// src/components/dashboard/DashboardInsightPlaceholder.tsx
|
|
3467
|
-
import { jsx as
|
|
3468
|
-
function DashboardInsightPlaceholder({
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
}
|
|
3475
|
-
|
|
1102
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1103
|
+
function DashboardInsightPlaceholder(_a) {
|
|
1104
|
+
var _b = _a, {
|
|
1105
|
+
label = "Add insight",
|
|
1106
|
+
className,
|
|
1107
|
+
children,
|
|
1108
|
+
type = "button"
|
|
1109
|
+
} = _b, props = __objRest(_b, [
|
|
1110
|
+
"label",
|
|
1111
|
+
"className",
|
|
1112
|
+
"children",
|
|
1113
|
+
"type"
|
|
1114
|
+
]);
|
|
1115
|
+
return /* @__PURE__ */ jsx8(
|
|
3476
1116
|
"button",
|
|
3477
|
-
{
|
|
1117
|
+
__spreadProps(__spreadValues({
|
|
3478
1118
|
type,
|
|
3479
1119
|
"aria-label": label,
|
|
3480
1120
|
className: cn(
|
|
3481
1121
|
"ph-dashboard-placeholder group text-left outline-none transition",
|
|
3482
1122
|
"focus-visible:ring-2 focus-visible:ring-ph-brand focus-visible:ring-offset-2",
|
|
3483
1123
|
className
|
|
3484
|
-
)
|
|
3485
|
-
|
|
3486
|
-
children: children != null ? children : /* @__PURE__ */
|
|
3487
|
-
}
|
|
1124
|
+
)
|
|
1125
|
+
}, props), {
|
|
1126
|
+
children: children != null ? children : /* @__PURE__ */ jsx8("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
|
|
1127
|
+
})
|
|
3488
1128
|
);
|
|
3489
1129
|
}
|
|
3490
1130
|
|
|
3491
1131
|
// src/components/dashboard/InsightShell.tsx
|
|
3492
|
-
import { jsx as
|
|
3493
|
-
function InsightShell({
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
}
|
|
1132
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1133
|
+
function InsightShell(_a) {
|
|
1134
|
+
var _b = _a, {
|
|
1135
|
+
ribbonColour,
|
|
1136
|
+
bodyClassName,
|
|
1137
|
+
className,
|
|
1138
|
+
children
|
|
1139
|
+
} = _b, props = __objRest(_b, [
|
|
1140
|
+
"ribbonColour",
|
|
1141
|
+
"bodyClassName",
|
|
1142
|
+
"className",
|
|
1143
|
+
"children"
|
|
1144
|
+
]);
|
|
3500
1145
|
const ribbon = ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
|
|
3501
|
-
return /* @__PURE__ */
|
|
3502
|
-
ribbon != null ? /* @__PURE__ */
|
|
1146
|
+
return /* @__PURE__ */ jsxs4("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
|
|
1147
|
+
ribbon != null ? /* @__PURE__ */ jsx9(
|
|
3503
1148
|
"div",
|
|
3504
1149
|
{
|
|
3505
1150
|
className: "ph-insight-shell__ribbon min-h-[7rem] shrink-0 self-stretch",
|
|
@@ -3507,24 +1152,24 @@ function InsightShell({
|
|
|
3507
1152
|
"aria-hidden": true
|
|
3508
1153
|
}
|
|
3509
1154
|
) : null,
|
|
3510
|
-
/* @__PURE__ */
|
|
3511
|
-
] });
|
|
1155
|
+
/* @__PURE__ */ jsx9("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
|
|
1156
|
+
] }));
|
|
3512
1157
|
}
|
|
3513
1158
|
|
|
3514
1159
|
// src/components/dashboard/InsightShellHeader.tsx
|
|
3515
|
-
import { jsx as
|
|
1160
|
+
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3516
1161
|
function InsightShellHeader({ title, subtitle, actions, className }) {
|
|
3517
|
-
return /* @__PURE__ */
|
|
3518
|
-
/* @__PURE__ */
|
|
3519
|
-
/* @__PURE__ */
|
|
3520
|
-
subtitle != null ? /* @__PURE__ */
|
|
1162
|
+
return /* @__PURE__ */ jsxs5("header", { className: cn("flex gap-3", actions != null ? "items-start justify-between" : "", className), children: [
|
|
1163
|
+
/* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
|
|
1164
|
+
/* @__PURE__ */ jsx10("h4", { className: "font-semibold leading-snug text-ph-ink", children: title }),
|
|
1165
|
+
subtitle != null ? /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: subtitle }) : null
|
|
3521
1166
|
] }),
|
|
3522
|
-
actions != null ? /* @__PURE__ */
|
|
1167
|
+
actions != null ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
|
|
3523
1168
|
] });
|
|
3524
1169
|
}
|
|
3525
1170
|
|
|
3526
1171
|
// src/components/dashboard/MiniTrendBars.tsx
|
|
3527
|
-
import { jsx as
|
|
1172
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
3528
1173
|
var DEFAULT_SERIES_CYCLE = [1, 2, 3, 4, 5, 6, 7];
|
|
3529
1174
|
function clampPct(n) {
|
|
3530
1175
|
if (!Number.isFinite(n)) {
|
|
@@ -3538,8 +1183,11 @@ function MiniTrendBars({
|
|
|
3538
1183
|
seriesResolver,
|
|
3539
1184
|
className
|
|
3540
1185
|
}) {
|
|
3541
|
-
const resolveSeries = seriesResolver
|
|
3542
|
-
|
|
1186
|
+
const resolveSeries = seriesResolver != null ? seriesResolver : ((i) => {
|
|
1187
|
+
var _a;
|
|
1188
|
+
return (_a = DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length]) != null ? _a : 1;
|
|
1189
|
+
});
|
|
1190
|
+
return /* @__PURE__ */ jsx11("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
|
|
3543
1191
|
const pct = clampPct(raw);
|
|
3544
1192
|
const series = resolveSeries(i, pct);
|
|
3545
1193
|
const style = {
|
|
@@ -3547,23 +1195,28 @@ function MiniTrendBars({
|
|
|
3547
1195
|
background: `var(--ph-data-${String(series)})`,
|
|
3548
1196
|
minHeight: pct > 0 ? 4 : 0
|
|
3549
1197
|
};
|
|
3550
|
-
return /* @__PURE__ */
|
|
1198
|
+
return /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1 rounded-t-[3px]", style }, `bar-${String(i)}`);
|
|
3551
1199
|
}) });
|
|
3552
1200
|
}
|
|
3553
1201
|
|
|
3554
1202
|
// src/components/dashboard/InsightMiniCard.tsx
|
|
3555
|
-
import { jsx as
|
|
3556
|
-
function InsightMiniCard({
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
}
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
1203
|
+
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1204
|
+
function InsightMiniCard(_a) {
|
|
1205
|
+
var _b = _a, {
|
|
1206
|
+
title,
|
|
1207
|
+
subtitle,
|
|
1208
|
+
heights,
|
|
1209
|
+
ribbonColour
|
|
1210
|
+
} = _b, shellProps = __objRest(_b, [
|
|
1211
|
+
"title",
|
|
1212
|
+
"subtitle",
|
|
1213
|
+
"heights",
|
|
1214
|
+
"ribbonColour"
|
|
1215
|
+
]);
|
|
1216
|
+
return /* @__PURE__ */ jsxs6(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
|
|
1217
|
+
/* @__PURE__ */ jsx12(InsightShellHeader, { title, subtitle }),
|
|
1218
|
+
/* @__PURE__ */ jsx12(MiniTrendBars, { heights })
|
|
1219
|
+
] }));
|
|
3567
1220
|
}
|
|
3568
1221
|
export {
|
|
3569
1222
|
Accordion,
|