@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.
Files changed (112) hide show
  1. package/dist/chunk-FWCSY2DS.mjs +37 -0
  2. package/dist/chunk-SHF57J7U.mjs +2910 -0
  3. package/dist/index-CmS6hcUk.d.mts +753 -0
  4. package/dist/index-CmS6hcUk.d.ts +753 -0
  5. package/dist/index.d.mts +5 -755
  6. package/dist/index.d.ts +5 -755
  7. package/dist/index.js +655 -378
  8. package/dist/index.mjs +348 -2695
  9. package/dist/tailwind-preset.mjs +2 -0
  10. package/dist/ui.d.mts +3 -0
  11. package/dist/ui.d.ts +3 -0
  12. package/dist/ui.js +2946 -0
  13. package/dist/ui.mjs +139 -0
  14. package/package.json +13 -5
  15. package/src/components/charts/index.ts +8 -0
  16. package/src/components/charts/ph-insight-charts.tsx +162 -0
  17. package/src/components/dashboard/DashboardFiltersBar.tsx +19 -0
  18. package/src/components/dashboard/DashboardGrid.tsx +23 -0
  19. package/src/components/dashboard/DashboardInsightPlaceholder.tsx +37 -0
  20. package/src/components/dashboard/DashboardKpiCard.tsx +25 -0
  21. package/src/components/dashboard/DashboardToolbar.tsx +23 -0
  22. package/src/components/dashboard/DashboardWell.tsx +10 -0
  23. package/src/components/dashboard/InsightMiniCard.tsx +26 -0
  24. package/src/components/dashboard/InsightShell.tsx +37 -0
  25. package/src/components/dashboard/InsightShellHeader.tsx +22 -0
  26. package/src/components/dashboard/MiniTrendBars.tsx +51 -0
  27. package/src/components/dashboard/index.ts +31 -0
  28. package/src/components/dashboard/types.ts +9 -0
  29. package/src/components/icons/IconBase.tsx +39 -0
  30. package/src/components/icons/createIconBase.tsx +27 -0
  31. package/src/components/icons/icons.tsx +367 -0
  32. package/src/components/icons/index.ts +3 -0
  33. package/src/components/sections/AccordionShowcase.tsx +45 -0
  34. package/src/components/sections/AlertShowcase.tsx +39 -0
  35. package/src/components/sections/AvatarShowcase.tsx +80 -0
  36. package/src/components/sections/BadgeShowcase.tsx +65 -0
  37. package/src/components/sections/ButtonShowcase.tsx +312 -0
  38. package/src/components/sections/CalendarShowcase.tsx +35 -0
  39. package/src/components/sections/CardShowcase.tsx +143 -0
  40. package/src/components/sections/ChartShowcase.tsx +190 -0
  41. package/src/components/sections/CodeMockupShowcase.tsx +56 -0
  42. package/src/components/sections/ColorPalette.tsx +117 -0
  43. package/src/components/sections/CommandPaletteShowcase.tsx +48 -0
  44. package/src/components/sections/CountdownShowcase.tsx +43 -0
  45. package/src/components/sections/DashboardShowcase.tsx +191 -0
  46. package/src/components/sections/DiffShowcase.tsx +70 -0
  47. package/src/components/sections/DrawerShowcase.tsx +97 -0
  48. package/src/components/sections/DropdownShowcase.tsx +100 -0
  49. package/src/components/sections/EmptyStateShowcase.tsx +50 -0
  50. package/src/components/sections/FilterChipsShowcase.tsx +50 -0
  51. package/src/components/sections/FormShowcase.tsx +126 -0
  52. package/src/components/sections/HoverCardShowcase.tsx +50 -0
  53. package/src/components/sections/IconShowcase.tsx +247 -0
  54. package/src/components/sections/IndicatorShowcase.tsx +52 -0
  55. package/src/components/sections/KbdShowcase.tsx +31 -0
  56. package/src/components/sections/ModalShowcase.tsx +210 -0
  57. package/src/components/sections/NavigationShowcase.tsx +199 -0
  58. package/src/components/sections/ProgressShowcase.tsx +85 -0
  59. package/src/components/sections/SegmentedControlShowcase.tsx +49 -0
  60. package/src/components/sections/SetupThemeShowcase.tsx +262 -0
  61. package/src/components/sections/StackShowcase.tsx +33 -0
  62. package/src/components/sections/StatShowcase.tsx +129 -0
  63. package/src/components/sections/StepperShowcase.tsx +37 -0
  64. package/src/components/sections/SwapShowcase.tsx +91 -0
  65. package/src/components/sections/TabShowcase.tsx +84 -0
  66. package/src/components/sections/TableShowcase.tsx +140 -0
  67. package/src/components/sections/TimelineShowcase.tsx +83 -0
  68. package/src/components/sections/ToastShowcase.tsx +108 -0
  69. package/src/components/sections/TooltipShowcase.tsx +44 -0
  70. package/src/components/sections/UtilityShowcase.tsx +81 -0
  71. package/src/components/ui/Accordion.tsx +77 -0
  72. package/src/components/ui/Alert.tsx +68 -0
  73. package/src/components/ui/Avatar.tsx +97 -0
  74. package/src/components/ui/Badge.tsx +55 -0
  75. package/src/components/ui/Button.tsx +110 -0
  76. package/src/components/ui/ButtonChrome.tsx +20 -0
  77. package/src/components/ui/Calendar.tsx +116 -0
  78. package/src/components/ui/Card.tsx +60 -0
  79. package/src/components/ui/ChatBubble.tsx +71 -0
  80. package/src/components/ui/CodeBlock.tsx +48 -0
  81. package/src/components/ui/CollapsibleSection.tsx +49 -0
  82. package/src/components/ui/CommandPalette.tsx +137 -0
  83. package/src/components/ui/ComponentDocs.tsx +52 -0
  84. package/src/components/ui/Drawer.tsx +71 -0
  85. package/src/components/ui/DropdownMenu.tsx +138 -0
  86. package/src/components/ui/EmptyState.tsx +33 -0
  87. package/src/components/ui/FilterChips.tsx +50 -0
  88. package/src/components/ui/HoverCard.tsx +36 -0
  89. package/src/components/ui/Indicator.tsx +61 -0
  90. package/src/components/ui/Input.tsx +359 -0
  91. package/src/components/ui/Kbd.tsx +38 -0
  92. package/src/components/ui/Modal.tsx +75 -0
  93. package/src/components/ui/Navigation.tsx +94 -0
  94. package/src/components/ui/Panel.tsx +18 -0
  95. package/src/components/ui/Progress.tsx +59 -0
  96. package/src/components/ui/Rating.tsx +65 -0
  97. package/src/components/ui/SearchInput.tsx +106 -0
  98. package/src/components/ui/SegmentedControl.tsx +44 -0
  99. package/src/components/ui/ShowcaseWrapper.tsx +136 -0
  100. package/src/components/ui/Stat.tsx +39 -0
  101. package/src/components/ui/Stepper.tsx +75 -0
  102. package/src/components/ui/Table.tsx +55 -0
  103. package/src/components/ui/Tabs.tsx +53 -0
  104. package/src/components/ui/Terminal.tsx +54 -0
  105. package/src/components/ui/ThemeDomSync.tsx +17 -0
  106. package/src/components/ui/ThemeManager.tsx +18 -0
  107. package/src/components/ui/ThemeSwitcher.tsx +46 -0
  108. package/src/components/ui/Timeline.tsx +60 -0
  109. package/src/components/ui/Toast.tsx +70 -0
  110. package/src/components/ui/Typography.tsx +129 -0
  111. package/src/components/ui/index.ts +92 -0
  112. package/src/styles/themes.css +118 -0
package/dist/index.mjs CHANGED
@@ -1,2580 +1,198 @@
1
- // src/components/ui/ButtonChrome.tsx
2
- import { jsx, jsxs } from "react/jsx-runtime";
3
- function ButtonChrome({ label, icon, sideIcon, split }) {
4
- return /* @__PURE__ */ jsxs("span", { className: "ph-btn-chrome", children: [
5
- icon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-icon", children: icon }) : null,
6
- label != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-label", children: label }) : null,
7
- split ? /* @__PURE__ */ jsx("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
8
- sideIcon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
9
- ] });
10
- }
11
-
12
- // src/lib/cn.ts
13
- function cn(...parts) {
14
- return parts.filter(Boolean).join(" ");
15
- }
16
-
17
- // src/components/ui/Button.tsx
18
- import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
19
- var variantClass = {
20
- primary: "ph-btn-primary",
21
- secondary: "ph-btn-secondary",
22
- tertiary: "ph-btn-tertiary",
23
- signal: "ph-btn-signal",
24
- accent: "ph-btn-accent",
25
- neutral: "ph-btn-neutral",
26
- info: "ph-btn-info",
27
- success: "ph-btn-success",
28
- warning: "ph-btn-warning",
29
- danger: "ph-btn-danger",
30
- ghost: "ph-btn-ghost",
31
- link: "ph-btn-link"
32
- };
33
- var sizeClass = {
34
- xs: "ph-btn-xs",
35
- sm: "ph-btn-sm",
36
- md: "",
37
- lg: "ph-btn-lg"
38
- };
39
- var shapeClass = {
40
- default: "",
41
- circle: "ph-btn-circle",
42
- square: "ph-btn-square",
43
- wide: "ph-btn-wide"
44
- };
45
- function Button({
46
- variant = "secondary",
47
- size = "md",
48
- shape = "default",
49
- outline = false,
50
- split = false,
51
- icon,
52
- sideIcon,
53
- className,
54
- children,
55
- type = "button",
56
- ...props
57
- }) {
58
- const usesLemonChrome = variant === "primary" || variant === "secondary";
59
- const content = usesLemonChrome ? /* @__PURE__ */ jsx2(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
60
- icon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-icon", children: icon }) : null,
61
- children != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-label", children }) : null,
62
- split ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
63
- sideIcon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
64
- ] });
65
- return /* @__PURE__ */ jsx2(
66
- "button",
67
- {
68
- type,
69
- className: cn(
70
- "ph-btn",
71
- outline && "ph-btn-outline",
72
- variantClass[variant],
73
- sizeClass[size],
74
- shapeClass[shape],
75
- split && "ph-btn-split",
76
- className
77
- ),
78
- ...props,
79
- children: content
80
- }
81
- );
82
- }
83
-
84
- // src/components/icons/IconBase.tsx
85
- import { jsx as jsx3 } from "react/jsx-runtime";
86
- function IconBase({
87
- className,
88
- size,
89
- children,
90
- viewBox = "0 0 24 24",
91
- fill: fill2 = "none",
92
- xmlns = "http://www.w3.org/2000/svg",
93
- focusable = "false",
94
- ...props
95
- }) {
96
- const dimensionProps = size != null ? { width: size, height: size } : {};
97
- return /* @__PURE__ */ jsx3(
98
- "svg",
99
- {
100
- className: cn("ph-icon", className),
101
- ...dimensionProps,
102
- viewBox,
103
- fill: fill2,
104
- xmlns,
105
- focusable,
106
- "aria-hidden": props["aria-hidden"] ?? true,
107
- ...props,
108
- children
109
- }
110
- );
111
- }
112
-
113
- // src/components/icons/createIconBase.tsx
114
- import { jsx as jsx4 } from "react/jsx-runtime";
115
- function createIconBase({ viewBox = "0 0 24 24", paths }) {
116
- return function IconGlyph(props) {
117
- return /* @__PURE__ */ jsx4(IconBase, { viewBox, ...props, children: paths });
118
- };
119
- }
120
- function createIconBasePath(d, viewBox = "0 0 24 24") {
121
- return createIconBase({
122
- viewBox,
123
- paths: /* @__PURE__ */ jsx4("path", { d, fill: "currentColor" })
124
- });
125
- }
126
-
127
- // src/components/icons/icons.tsx
128
- import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
129
- var fill = (d) => /* @__PURE__ */ jsx5("path", { d, fill: "currentColor" });
130
- var IconAreaChart = createIconBase({
131
- paths: fill("M3 20V7l4 3 5-7 5 4h4v13Zm5-3 4-5.5 7 5.45V9h-2.7l-3.9-3.125-4.95 6.95L5 11v3.6Z")
132
- });
133
- var IconCumulativeChart = createIconBase({
134
- paths: fill(
135
- "M20.8805 7.97408C15.0614 18.7809 6.51281 19.5979 2.71265 18.4578L3.28734 16.5422C6.15384 17.4021 13.7386 17.0191 19.1195 7.02588L20.8805 7.97408Z"
136
- )
137
- });
138
- var IconTableChart = createIconBase({
139
- paths: fill(
140
- "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v3H5V5h15zm-5 14h-5v-9h5v9zM5 10h3v9H5v-9zm12 9v-9h3v9h-3z"
141
- )
142
- });
143
- var IconHandClick = createIconBase({
144
- viewBox: "0 0 18 18",
145
- paths: fill(
146
- "M14.9942 7.90164C14.9942 7.82992 14.9583 7.46993 14.6342 7.10993C14.2925 6.71407 13.7524 6.49822 13.05 6.44407C12.9783 6.33579 12.8883 6.22822 12.7442 6.11993C12.3483 5.81407 11.7359 5.65164 10.9442 5.63407C10.8724 5.54407 10.7459 5.43578 10.6024 5.32822C10.2425 5.0765 9.79245 4.93236 9.23416 4.87822V3.41993C9.23416 3.27579 9.25244 2.66407 8.83831 2.23164C8.65831 2.03335 8.31659 1.79993 7.74002 1.79993C7.14587 1.79993 6.80416 2.03407 6.60587 2.23164C6.22759 2.64578 6.22759 3.18578 6.22759 3.31164V8.46C5.88587 8.1 5.50759 7.70414 5.29173 7.56C4.84173 7.21829 3.99587 7.39828 3.51002 7.75829C3.04173 8.1 2.88002 8.62243 3.06002 9.12658C3.38416 10.0266 4.19416 10.9266 4.39173 11.1424C4.57173 11.4841 5.38173 12.9782 6.10173 13.5182C6.48002 13.8065 6.76759 14.9941 6.84002 15.7499L6.87588 16.1457H13.6801V14.364C13.7701 14.1123 13.9859 13.5723 14.2201 13.3199C14.7783 12.7616 14.9583 11.3582 14.9583 10.9257V7.91986L14.9942 7.90164ZM14.1117 10.89C14.1117 11.4117 13.8959 12.4017 13.6259 12.6717C13.1576 13.14 12.87 14.04 12.8517 14.13L12.8335 14.1841V15.2283H7.68583C7.64997 15.03 7.61411 14.7783 7.54169 14.5083C7.32583 13.6441 7.03754 13.0866 6.65998 12.7983C6.13826 12.4024 5.39998 11.1241 5.16583 10.6566L5.09411 10.5484C5.09411 10.5301 4.2124 9.63008 3.90582 8.80251C3.86996 8.69423 3.86996 8.60422 3.99582 8.47836C4.22997 8.26251 4.67997 8.20836 4.78754 8.24422C5.05754 8.46008 5.88582 9.34251 6.35339 9.86422L7.12754 10.7284L7.12824 3.29418V3.25762C7.12824 3.1859 7.14652 2.95176 7.27238 2.82591C7.36238 2.71763 7.52409 2.66419 7.75824 2.66419C7.95652 2.66419 8.09995 2.71833 8.20824 2.80833C8.35238 2.97005 8.36996 3.25833 8.36996 3.36662V8.02826H9.25167V5.7599C10.0617 5.8499 10.2958 6.19161 10.3317 6.24575L10.3675 6.33575V8.02747H11.2492V6.53332C12.0051 6.60504 12.2934 6.83918 12.3651 6.94747V8.65747H13.2468V7.34332C14.021 7.4516 14.1468 7.86504 14.1651 7.95504L14.1658 10.8899L14.1117 10.89Z"
147
- )
148
- });
149
- var IconSurveys = createIconBase({
150
- paths: fill(
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/ui/Calendar.tsx
1831
- import { useState as useState4 } from "react";
1832
- import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
1833
- function Calendar({ value, onChange, className }) {
1834
- const [currentMonth, setCurrentMonth] = useState4(value || /* @__PURE__ */ new Date());
1835
- const today = /* @__PURE__ */ new Date();
1836
- const year = currentMonth.getFullYear();
1837
- const month = currentMonth.getMonth();
1838
- const firstDay = new Date(year, month, 1).getDay();
1839
- const daysInMonth = new Date(year, month + 1, 0).getDate();
1840
- const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
1841
- const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
1842
- const monthNames = [
1843
- "January",
1844
- "February",
1845
- "March",
1846
- "April",
1847
- "May",
1848
- "June",
1849
- "July",
1850
- "August",
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
- for (let i = 1; i <= daysInMonth; i++) {
1872
- days.push(i);
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 as useEffect3, useState as useState9 } from "react";
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 ?? document.documentElement;
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] = useState9(FALLBACK_CHART_TOKENS);
2949
- useEffect3(() => {
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
- setTokens(readChartTokens(root));
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 useEffect4, useMemo, useRef as useRef2, useState as useState10 } from "react";
2976
- import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
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 { ...s, resolvedColor };
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] = useState10({ width: 0, height: 0 });
3033
- const [hoverIndex, setHoverIndex] = useState10(null);
3034
- useEffect4(() => {
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 ?? "#ffffff";
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 ?? "#666";
3085
- const gridColor = theme.gridColor ?? "rgba(0,0,0,0.08)";
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 ?? 0.45;
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 ((_a = s.visibility) == null ? void 0 : _a.excluded) {
771
+ if ((_e = s.visibility) == null ? void 0 : _e.excluded) {
3142
772
  continue;
3143
773
  }
3144
- const pattern = ((_b = s.stroke) == null ? void 0 : _b.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 ?? gridColor;
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 || ((_c = s.visibility) == null ? void 0 : _c.excluded)) {
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
- useEffect4(() => {
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__ */ jsxs36("div", { ref: containerRef, className: `relative w-full ${className}`.trim(), children: [
3274
- /* @__PURE__ */ jsx43(
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__ */ jsxs36(
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__ */ jsx43("div", { className: "font-semibold text-ph-ink", children: labels[hoverIndex] }),
3294
- /* @__PURE__ */ jsx43("ul", { className: "mt-1 space-y-0.5 text-ph-mutedtext", children: tooltipRows.map((row) => /* @__PURE__ */ jsxs36("li", { className: "flex items-center gap-2", children: [
3295
- /* @__PURE__ */ jsx43("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { background: row.color } }),
3296
- /* @__PURE__ */ jsx43("span", { className: "min-w-0 truncate", children: row.label }),
3297
- /* @__PURE__ */ jsx43("span", { className: "ml-auto tabular-nums text-ph-ink", children: row.value })
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 jsx44 } from "react/jsx-runtime";
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] = useState11(false);
3310
- useEffect5(() => setMounted(true), []);
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__ */ jsx44(
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__ */ jsx44(ChartSkeleton, {});
976
+ return /* @__PURE__ */ jsx2(ChartSkeleton, {});
3347
977
  }
3348
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(
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__ */ jsx44(ChartSkeleton, {});
995
+ return /* @__PURE__ */ jsx2(ChartSkeleton, {});
3366
996
  }
3367
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
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__ */ jsx44(ChartSkeleton, { className: "h-[320px]" });
1004
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[320px]" });
3375
1005
  }
3376
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
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__ */ jsx44(ChartSkeleton, { className: "h-[300px]" });
1013
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[300px]" });
3384
1014
  }
3385
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options }) });
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__ */ jsx44(ChartSkeleton, { className: "h-[260px]" });
1022
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[260px]" });
3393
1023
  }
3394
- return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ jsx44(Doughnut, { data: config.data, options: config.options }) });
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__ */ jsx44(ChartSkeleton, { className: "h-[280px]" });
1031
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[280px]" });
3402
1032
  }
3403
- return /* @__PURE__ */ jsx44("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ jsx44(PolarArea, { data: config.data, options: config.options }) });
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 jsx45 } from "react/jsx-runtime";
3408
- function DashboardWell({ className, ...props }) {
3409
- return /* @__PURE__ */ jsx45("div", { className: cn("ph-dashboard-well", className), ...props });
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 jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
1044
+ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
3414
1045
  function DashboardToolbar({ title, description, actions, className }) {
3415
- return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-wrap items-baseline justify-between gap-4", className), children: [
3416
- /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
3417
- /* @__PURE__ */ jsx46("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
3418
- description ? /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-sm text-ph-mutedtext", children: description }) : null
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__ */ jsx46("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
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 jsx47 } from "react/jsx-runtime";
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
- preset = "insights",
3432
- className,
3433
- ...props
3434
- }) {
3435
- return /* @__PURE__ */ jsx47("div", { className: cn(presetClass[preset], className), ...props });
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 jsx48 } from "react/jsx-runtime";
3440
- function DashboardFiltersBar({ className, ...props }) {
3441
- return /* @__PURE__ */ jsx48(
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
- ...props
3450
- }
1083
+ )
1084
+ }, props)
3451
1085
  );
3452
1086
  }
3453
1087
 
3454
1088
  // src/components/dashboard/DashboardKpiCard.tsx
3455
- import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
3456
- function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }) {
3457
- return /* @__PURE__ */ jsxs38("article", { className: cn("ph-stat", className), ...props, children: [
3458
- icon != null ? /* @__PURE__ */ jsx49("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
3459
- /* @__PURE__ */ jsx49("div", { className: "ph-stat-label", children: label }),
3460
- /* @__PURE__ */ jsx49("div", { className: "ph-stat-val", children: value }),
3461
- footer != null ? /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
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 jsx50 } from "react/jsx-runtime";
3468
- function DashboardInsightPlaceholder({
3469
- label = "Add insight",
3470
- className,
3471
- children,
3472
- type = "button",
3473
- ...props
3474
- }) {
3475
- return /* @__PURE__ */ jsx50(
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
- ...props,
3486
- children: children != null ? children : /* @__PURE__ */ jsx50("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
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 jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
3493
- function InsightShell({
3494
- ribbonColour,
3495
- bodyClassName,
3496
- className,
3497
- children,
3498
- ...props
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__ */ jsxs39("article", { className: cn("ph-insight-shell flex-row", className), ...props, children: [
3502
- ribbon != null ? /* @__PURE__ */ jsx51(
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__ */ jsx51("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
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 jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
1160
+ import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
3516
1161
  function InsightShellHeader({ title, subtitle, actions, className }) {
3517
- return /* @__PURE__ */ jsxs40("header", { className: cn("flex gap-3", actions != null ? "items-start justify-between" : "", className), children: [
3518
- /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
3519
- /* @__PURE__ */ jsx52("h4", { className: "font-semibold leading-snug text-ph-ink", children: title }),
3520
- subtitle != null ? /* @__PURE__ */ jsx52("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: subtitle }) : null
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__ */ jsx52("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
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 jsx53 } from "react/jsx-runtime";
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 ?? ((i) => DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length] ?? 1);
3542
- return /* @__PURE__ */ jsx53("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
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__ */ jsx53("div", { className: "min-h-0 flex-1 rounded-t-[3px]", style }, `bar-${String(i)}`);
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 jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
3556
- function InsightMiniCard({
3557
- title,
3558
- subtitle,
3559
- heights,
3560
- ribbonColour,
3561
- ...shellProps
3562
- }) {
3563
- return /* @__PURE__ */ jsxs41(InsightShell, { ribbonColour, ...shellProps, children: [
3564
- /* @__PURE__ */ jsx54(InsightShellHeader, { title, subtitle }),
3565
- /* @__PURE__ */ jsx54(MiniTrendBars, { heights })
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,