@xenide-io/the-old-ui-theme 0.2.6 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/README.md +1 -1
  2. package/dist/chunk-FDMD3IIN.mjs +3831 -0
  3. package/dist/index-D1RTT2Ap.d.mts +1044 -0
  4. package/dist/index-D1RTT2Ap.d.ts +1044 -0
  5. package/dist/index.d.mts +11 -758
  6. package/dist/index.d.ts +11 -758
  7. package/dist/index.js +1749 -768
  8. package/dist/index.mjs +312 -2846
  9. package/dist/tailwind-preset.js +7 -0
  10. package/dist/tailwind-preset.mjs +7 -0
  11. package/dist/ui.d.mts +4 -0
  12. package/dist/ui.d.ts +4 -0
  13. package/dist/ui.js +3864 -0
  14. package/dist/ui.mjs +169 -0
  15. package/package.json +28 -6
  16. package/src/app/globals.css +1005 -227
  17. package/src/components/charts/index.ts +8 -0
  18. package/src/components/charts/ph-insight-charts.tsx +162 -0
  19. package/src/components/dashboard/DashboardFiltersBar.tsx +19 -0
  20. package/src/components/dashboard/DashboardGrid.tsx +23 -0
  21. package/src/components/dashboard/DashboardInsightPlaceholder.tsx +37 -0
  22. package/src/components/dashboard/DashboardKpiCard.tsx +25 -0
  23. package/src/components/dashboard/DashboardToolbar.tsx +23 -0
  24. package/src/components/dashboard/DashboardWell.tsx +10 -0
  25. package/src/components/dashboard/InsightMiniCard.tsx +26 -0
  26. package/src/components/dashboard/InsightShell.tsx +37 -0
  27. package/src/components/dashboard/InsightShellHeader.tsx +22 -0
  28. package/src/components/dashboard/MiniTrendBars.tsx +51 -0
  29. package/src/components/dashboard/index.ts +31 -0
  30. package/src/components/dashboard/types.ts +9 -0
  31. package/src/components/icons/IconBase.tsx +47 -0
  32. package/src/components/icons/createIconBase.tsx +32 -0
  33. package/src/components/icons/icons.tsx +557 -0
  34. package/src/components/icons/index.ts +3 -0
  35. package/src/components/sections/AccordionShowcase.tsx +45 -0
  36. package/src/components/sections/AlertShowcase.tsx +40 -0
  37. package/src/components/sections/AvatarShowcase.tsx +80 -0
  38. package/src/components/sections/BadgeShowcase.tsx +65 -0
  39. package/src/components/sections/ButtonShowcase.tsx +308 -0
  40. package/src/components/sections/CalendarShowcase.tsx +35 -0
  41. package/src/components/sections/CardShowcase.tsx +159 -0
  42. package/src/components/sections/ChartShowcase.tsx +190 -0
  43. package/src/components/sections/CodeMockupShowcase.tsx +56 -0
  44. package/src/components/sections/ColorPalette.tsx +117 -0
  45. package/src/components/sections/CommandPaletteShowcase.tsx +48 -0
  46. package/src/components/sections/CountdownShowcase.tsx +43 -0
  47. package/src/components/sections/DashboardShowcase.tsx +191 -0
  48. package/src/components/sections/DiffShowcase.tsx +70 -0
  49. package/src/components/sections/DrawerShowcase.tsx +97 -0
  50. package/src/components/sections/DropdownShowcase.tsx +98 -0
  51. package/src/components/sections/EmptyStateShowcase.tsx +50 -0
  52. package/src/components/sections/FilterChipsShowcase.tsx +98 -0
  53. package/src/components/sections/FormShowcase.tsx +127 -0
  54. package/src/components/sections/HoverCardShowcase.tsx +50 -0
  55. package/src/components/sections/IconShowcase.tsx +127 -0
  56. package/src/components/sections/IndicatorShowcase.tsx +52 -0
  57. package/src/components/sections/KbdShowcase.tsx +57 -0
  58. package/src/components/sections/ModalShowcase.tsx +211 -0
  59. package/src/components/sections/NavigationShowcase.tsx +199 -0
  60. package/src/components/sections/ProductLayoutsShowcase.tsx +138 -0
  61. package/src/components/sections/ProgressShowcase.tsx +82 -0
  62. package/src/components/sections/SegmentedControlShowcase.tsx +49 -0
  63. package/src/components/sections/SetupThemeShowcase.tsx +262 -0
  64. package/src/components/sections/StackShowcase.tsx +33 -0
  65. package/src/components/sections/StatShowcase.tsx +129 -0
  66. package/src/components/sections/StepperShowcase.tsx +37 -0
  67. package/src/components/sections/SwapShowcase.tsx +99 -0
  68. package/src/components/sections/TabShowcase.tsx +84 -0
  69. package/src/components/sections/TableShowcase.tsx +140 -0
  70. package/src/components/sections/TimelineShowcase.tsx +83 -0
  71. package/src/components/sections/ToastShowcase.tsx +108 -0
  72. package/src/components/sections/TooltipShowcase.tsx +44 -0
  73. package/src/components/sections/UtilityShowcase.tsx +81 -0
  74. package/src/components/ui/Accordion.tsx +77 -0
  75. package/src/components/ui/Alert.tsx +77 -0
  76. package/src/components/ui/AuthLayout.tsx +58 -0
  77. package/src/components/ui/Avatar.tsx +97 -0
  78. package/src/components/ui/Badge.tsx +60 -0
  79. package/src/components/ui/Button.tsx +120 -0
  80. package/src/components/ui/ButtonChrome.tsx +20 -0
  81. package/src/components/ui/Calendar.tsx +115 -0
  82. package/src/components/ui/Card.tsx +70 -0
  83. package/src/components/ui/ChatBubble.tsx +71 -0
  84. package/src/components/ui/CodeBlock.tsx +48 -0
  85. package/src/components/ui/CollapsibleSection.tsx +49 -0
  86. package/src/components/ui/CommandPalette.tsx +137 -0
  87. package/src/components/ui/ComponentDocs.tsx +52 -0
  88. package/src/components/ui/Drawer.tsx +71 -0
  89. package/src/components/ui/DropdownMenu.tsx +262 -0
  90. package/src/components/ui/EmptyState.tsx +33 -0
  91. package/src/components/ui/FilterBar.tsx +165 -0
  92. package/src/components/ui/FilterChips.tsx +80 -0
  93. package/src/components/ui/FilterControls.tsx +30 -0
  94. package/src/components/ui/FormField.tsx +69 -0
  95. package/src/components/ui/HoverCard.tsx +36 -0
  96. package/src/components/ui/Indicator.tsx +61 -0
  97. package/src/components/ui/Input.tsx +385 -0
  98. package/src/components/ui/Kbd.tsx +113 -0
  99. package/src/components/ui/Loader.tsx +96 -0
  100. package/src/components/ui/Modal.tsx +105 -0
  101. package/src/components/ui/Navigation.tsx +94 -0
  102. package/src/components/ui/Panel.tsx +18 -0
  103. package/src/components/ui/Progress.tsx +59 -0
  104. package/src/components/ui/Rating.tsx +65 -0
  105. package/src/components/ui/SearchInput.tsx +106 -0
  106. package/src/components/ui/SegmentedControl.tsx +44 -0
  107. package/src/components/ui/SettingsLayout.tsx +94 -0
  108. package/src/components/ui/ShowcaseWrapper.tsx +124 -0
  109. package/src/components/ui/Stat.tsx +39 -0
  110. package/src/components/ui/Stepper.tsx +74 -0
  111. package/src/components/ui/Table.tsx +55 -0
  112. package/src/components/ui/Tabs.tsx +53 -0
  113. package/src/components/ui/Terminal.tsx +54 -0
  114. package/src/components/ui/ThemeDomSync.tsx +17 -0
  115. package/src/components/ui/ThemeManager.tsx +18 -0
  116. package/src/components/ui/ThemeSwitcher.tsx +46 -0
  117. package/src/components/ui/Timeline.tsx +60 -0
  118. package/src/components/ui/Toast.tsx +70 -0
  119. package/src/components/ui/Typography.tsx +129 -0
  120. package/src/components/ui/first-slice.test.tsx +98 -0
  121. package/src/components/ui/index.ts +151 -0
  122. package/src/components/ui/interaction-primitives.test.tsx +77 -0
  123. package/src/components/ui/kbd-icons.test.tsx +90 -0
  124. package/src/components/ui/product-patterns.test.tsx +77 -0
  125. package/src/styles/themes.css +528 -0
  126. package/tailwind-preset.ts +7 -0
package/dist/index.mjs CHANGED
@@ -1,2756 +1,188 @@
1
1
  import {
2
- __objRest,
3
- __spreadProps,
4
- __spreadValues
5
- } from "./chunk-FWCSY2DS.mjs";
6
-
7
- // src/components/ui/ButtonChrome.tsx
8
- import { jsx, jsxs } from "react/jsx-runtime";
9
- function ButtonChrome({ label, icon, sideIcon, split }) {
10
- return /* @__PURE__ */ jsxs("span", { className: "ph-btn-chrome", children: [
11
- icon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-icon", children: icon }) : null,
12
- label != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-label", children: label }) : null,
13
- split ? /* @__PURE__ */ jsx("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
14
- sideIcon != null ? /* @__PURE__ */ jsx("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
15
- ] });
16
- }
17
-
18
- // src/lib/cn.ts
19
- function cn(...parts) {
20
- return parts.filter(Boolean).join(" ");
21
- }
22
-
23
- // src/components/ui/Button.tsx
24
- import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
25
- var variantClass = {
26
- primary: "ph-btn-primary",
27
- secondary: "ph-btn-secondary",
28
- tertiary: "ph-btn-tertiary",
29
- signal: "ph-btn-signal",
30
- accent: "ph-btn-accent",
31
- neutral: "ph-btn-neutral",
32
- info: "ph-btn-info",
33
- success: "ph-btn-success",
34
- warning: "ph-btn-warning",
35
- danger: "ph-btn-danger",
36
- ghost: "ph-btn-ghost",
37
- link: "ph-btn-link"
38
- };
39
- var sizeClass = {
40
- xs: "ph-btn-xs",
41
- sm: "ph-btn-sm",
42
- md: "",
43
- lg: "ph-btn-lg"
44
- };
45
- var shapeClass = {
46
- default: "",
47
- circle: "ph-btn-circle",
48
- square: "ph-btn-square",
49
- wide: "ph-btn-wide"
50
- };
51
- function Button(_a) {
52
- var _b = _a, {
53
- variant = "secondary",
54
- size = "md",
55
- shape = "default",
56
- outline = false,
57
- split = false,
58
- icon,
59
- sideIcon,
60
- className,
61
- children,
62
- type = "button"
63
- } = _b, props = __objRest(_b, [
64
- "variant",
65
- "size",
66
- "shape",
67
- "outline",
68
- "split",
69
- "icon",
70
- "sideIcon",
71
- "className",
72
- "children",
73
- "type"
74
- ]);
75
- const usesLemonChrome = variant === "primary" || variant === "secondary";
76
- const content = usesLemonChrome ? /* @__PURE__ */ jsx2(ButtonChrome, { label: children, icon, sideIcon, split }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
77
- icon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-icon", children: icon }) : null,
78
- children != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-label", children }) : null,
79
- split ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-split-divider", "aria-hidden": true }) : null,
80
- sideIcon != null ? /* @__PURE__ */ jsx2("span", { className: "ph-btn-side-icon", children: sideIcon }) : null
81
- ] });
82
- return /* @__PURE__ */ jsx2(
83
- "button",
84
- __spreadProps(__spreadValues({
85
- type,
86
- className: cn(
87
- "ph-btn",
88
- outline && "ph-btn-outline",
89
- variantClass[variant],
90
- sizeClass[size],
91
- shapeClass[shape],
92
- split && "ph-btn-split",
93
- className
94
- )
95
- }, props), {
96
- children: content
97
- })
98
- );
99
- }
100
-
101
- // src/components/icons/IconBase.tsx
102
- import { jsx as jsx3 } from "react/jsx-runtime";
103
- function IconBase(_a) {
104
- var _b = _a, {
105
- className,
106
- size,
107
- children,
108
- viewBox = "0 0 24 24",
109
- fill: fill2 = "none",
110
- xmlns = "http://www.w3.org/2000/svg",
111
- focusable = "false"
112
- } = _b, props = __objRest(_b, [
113
- "className",
114
- "size",
115
- "children",
116
- "viewBox",
117
- "fill",
118
- "xmlns",
119
- "focusable"
120
- ]);
121
- var _a2;
122
- const dimensionProps = size != null ? { width: size, height: size } : {};
123
- return /* @__PURE__ */ jsx3(
124
- "svg",
125
- __spreadProps(__spreadValues(__spreadProps(__spreadValues({
126
- className: cn("ph-icon", className)
127
- }, dimensionProps), {
128
- viewBox,
129
- fill: fill2,
130
- xmlns,
131
- focusable,
132
- "aria-hidden": (_a2 = props["aria-hidden"]) != null ? _a2 : true
133
- }), props), {
134
- children
135
- })
136
- );
137
- }
138
-
139
- // src/components/icons/createIconBase.tsx
140
- import { jsx as jsx4 } from "react/jsx-runtime";
141
- function createIconBase({ viewBox = "0 0 24 24", paths }) {
142
- return function IconGlyph(props) {
143
- return /* @__PURE__ */ jsx4(IconBase, __spreadProps(__spreadValues({ viewBox }, props), { children: paths }));
144
- };
145
- }
146
- function createIconBasePath(d, viewBox = "0 0 24 24") {
147
- return createIconBase({
148
- viewBox,
149
- paths: /* @__PURE__ */ jsx4("path", { d, fill: "currentColor" })
150
- });
151
- }
152
-
153
- // src/components/icons/icons.tsx
154
- import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
155
- var fill = (d) => /* @__PURE__ */ jsx5("path", { d, fill: "currentColor" });
156
- var IconAreaChart = createIconBase({
157
- 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")
158
- });
159
- var IconCumulativeChart = createIconBase({
160
- paths: fill(
161
- "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"
162
- )
163
- });
164
- var IconTableChart = createIconBase({
165
- paths: fill(
166
- "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"
167
- )
168
- });
169
- var IconHandClick = createIconBase({
170
- viewBox: "0 0 18 18",
171
- paths: fill(
172
- "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"
173
- )
174
- });
175
- var IconSurveys = createIconBase({
176
- paths: fill(
177
- "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"
178
- )
179
- });
180
- var IconCohort = createIconBase({
181
- paths: fill(
182
- "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"
183
- )
184
- });
185
- var IconRecording = createIconBase({
186
- paths: fill(
187
- "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"
188
- )
189
- });
190
- var IconFlare = createIconBase({
191
- paths: fill(
192
- "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"
193
- )
194
- });
195
- var IconSelectEvents = createIconBase({
196
- paths: /* @__PURE__ */ jsxs3(Fragment2, { children: [
197
- fill("M17.5 9L16.56 6.94L14.5 6L16.56 5.06L17.5 3L18.44 5.06L20.5 6L18.44 6.94L17.5 9Z"),
198
- fill("M6 12.5L6.94 14.56L9 15.5L6.94 16.44L6 18.5L5.06 16.44L3 15.5L5.06 14.56L6 12.5Z"),
199
- fill("M6 9L5.06 6.94L3 6L5.06 5.06L6 3L6.94 5.06L9 6L6.94 6.94L6 9Z"),
200
- fill("M16.23 14.26L20 13L10 10L13 20L14.26 16.23L18.53 20.5L20.51 18.52L16.23 14.26Z")
201
- ] })
202
- });
203
- var IconClipboardEdit = createIconBase({
204
- paths: fill(
205
- "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"
206
- )
207
- });
208
- var IconQueryEditor = createIconBase({
209
- paths: fill(
210
- "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"
211
- )
212
- });
213
- var IconTuning = createIconBase({
214
- paths: fill(
215
- "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z"
216
- )
217
- });
218
- var IconSync = createIconBase({
219
- paths: fill(
220
- "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"
221
- )
222
- });
223
- var IconPlayCircle = createIconBase({
224
- paths: fill(
225
- "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"
226
- )
227
- });
228
- var IconGridView = createIconBase({
229
- paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
230
- });
231
- var IconListView = createIconBase({
232
- paths: fill(
233
- "M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"
234
- )
235
- });
236
- var IconPremium = createIconBase({
237
- paths: fill(
238
- "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"
239
- )
240
- });
241
- var IconGift = createIconBase({
242
- paths: fill(
243
- "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"
244
- )
245
- });
246
- var IconRobot = createIconBase({
247
- paths: fill(
248
- "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"
249
- )
250
- });
251
- var IconExclamation = createIconBase({
252
- paths: /* @__PURE__ */ jsxs3("g", { fill: "currentColor", children: [
253
- /* @__PURE__ */ jsx5("path", { d: "m12 21c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" }),
254
- /* @__PURE__ */ jsx5("path", { d: "m10 3h4v12h-4z" })
255
- ] })
256
- });
257
- var IconErrorOutline = createIconBase({
258
- paths: fill(
259
- "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"
260
- )
261
- });
262
- var IconCancel = createIconBase({
263
- paths: fill(
264
- "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"
265
- )
266
- });
267
- var IconCheckCircle = createIconBase({
268
- paths: fill(
269
- "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"
270
- )
271
- });
272
- var IconArrowUp = createIconBase({
273
- paths: fill("M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z")
274
- });
275
- var IconArrowDown = createIconBase({
276
- paths: fill("M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z")
277
- });
278
- var IconChevronLeft = createIconBasePath("M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z");
279
- var IconChevronRight = createIconBasePath("M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z");
280
- var IconChevronDown = createIconBasePath("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z");
281
- var IconSubArrowRight = createIconBase({
282
- paths: /* @__PURE__ */ jsx5("g", { transform: "translate(4 5.5)", children: fill("M2 0H0V10H12.01V13L16 9L12.01 5V8H2V0Z") })
283
- });
284
- var IconSearch = createIconBasePath(
285
- "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"
286
- );
287
- var IconBell = createIconBasePath(
288
- "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"
289
- );
290
- var IconBellOff = createIconBasePath(
291
- "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"
292
- );
293
- var IconPerson = createIconBasePath(
294
- "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"
295
- );
296
- var IconHome = createIconBasePath("M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z");
297
- var IconPanelRight = createIconBasePath(
298
- "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"
299
- );
300
- var IconPlus = createIconBasePath("M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z");
301
- var IconCheck = createIconBasePath("M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z");
302
- 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");
303
- 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");
304
- var IconDownload = createIconBasePath("M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z");
305
- var IconUpload = createIconBasePath("M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z");
306
- var IconSave = createIconBasePath(
307
- "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"
308
- );
309
- var IconCopy = createIconBasePath(
310
- "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"
311
- );
312
- var IconEdit = createIconBasePath(
313
- "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"
314
- );
315
- var IconLogout = createIconBasePath(
316
- "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"
317
- );
318
- var IconStar = createIconBasePath(
319
- "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"
320
- );
321
- var IconMail = createIconBasePath(
322
- "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"
323
- );
324
- var IconShoppingCart = createIconBasePath(
325
- "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"
326
- );
327
- var IconMoon = createIconBasePath(
328
- "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"
329
- );
330
- var IconSun = createIconBasePath(
331
- "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"
332
- );
333
- var IconVolume = createIconBasePath(
334
- "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"
335
- );
336
- var IconVolumeOff = createIconBasePath(
337
- "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"
338
- );
339
- var IconFlag = createIconBasePath("M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z");
340
- var IconDatabase = createIconBasePath(
341
- "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"
342
- );
343
- 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");
344
- var IconBox = createIconBasePath(
345
- "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"
346
- );
347
- var IconBolt = createIconBasePath(
348
- "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"
349
- );
350
- var IconRadar = createIconBasePath(
351
- "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"
352
- );
353
- var IconToggle = createIconBasePath(
354
- "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"
355
- );
356
- var IconRocket = createIconBasePath(
357
- "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"
358
- );
359
- 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");
360
- var IconActivity = createIconBasePath(
361
- "M22 12h-4l-3 9L9 3l-3 9H2v2h6.76l2.24-6.72L15 15l2.24-6.72L19 14h3v-2z"
362
- );
363
- var IconFlask = createIconBasePath(
364
- "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"
365
- );
366
- function IconSpinner(_a) {
367
- var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
368
- return /* @__PURE__ */ jsx5(IconSync, __spreadValues({ className: cn("ph-icon-spin", className) }, props));
369
- }
370
- var PH_ICONS = {
371
- activity: IconActivity,
372
- areaChart: IconAreaChart,
373
- arrowDown: IconArrowDown,
374
- arrowUp: IconArrowUp,
375
- bell: IconBell,
376
- bellOff: IconBellOff,
377
- bolt: IconBolt,
378
- box: IconBox,
379
- cancel: IconCancel,
380
- check: IconCheck,
381
- checkCircle: IconCheckCircle,
382
- chevronDown: IconChevronDown,
383
- chevronLeft: IconChevronLeft,
384
- chevronRight: IconChevronRight,
385
- clipboard: IconClipboardEdit,
386
- close: IconClose,
387
- cohort: IconCohort,
388
- copy: IconCopy,
389
- cumulativeChart: IconCumulativeChart,
390
- database: IconDatabase,
391
- download: IconDownload,
392
- edit: IconEdit,
393
- errorOutline: IconErrorOutline,
394
- exclamation: IconExclamation,
395
- flag: IconFlag,
396
- flare: IconFlare,
397
- flask: IconFlask,
398
- gift: IconGift,
399
- grid: IconGridView,
400
- handClick: IconHandClick,
401
- home: IconHome,
402
- info: IconErrorOutline,
403
- layers: IconLayers,
404
- list: IconListView,
405
- logout: IconLogout,
406
- mail: IconMail,
407
- moon: IconMoon,
408
- panelRight: IconPanelRight,
409
- person: IconPerson,
410
- play: IconPlayCircle,
411
- plus: IconPlus,
412
- premium: IconPremium,
413
- queryEditor: IconQueryEditor,
414
- radar: IconRadar,
415
- recording: IconRecording,
416
- robot: IconRobot,
417
- rocket: IconRocket,
418
- save: IconSave,
419
- search: IconSearch,
420
- selectEvents: IconSelectEvents,
421
- settings: IconTuning,
422
- shoppingCart: IconShoppingCart,
423
- spinner: IconSpinner,
424
- star: IconStar,
425
- subArrowRight: IconSubArrowRight,
426
- sun: IconSun,
427
- surveys: IconSurveys,
428
- sync: IconSync,
429
- tableChart: IconTableChart,
430
- terminal: IconTerminal,
431
- toggle: IconToggle,
432
- trash: IconTrash,
433
- trendingUp: IconArrowUp,
434
- upload: IconUpload,
435
- volume: IconVolume,
436
- volumeOff: IconVolumeOff,
437
- warning: IconExclamation,
438
- xCircle: IconCancel
439
- };
440
- function IconByName(_a) {
441
- var _b = _a, { name } = _b, props = __objRest(_b, ["name"]);
442
- const Icon = PH_ICONS[name];
443
- return /* @__PURE__ */ jsx5(Icon, __spreadValues({}, props));
444
- }
445
-
446
- // src/components/ui/Alert.tsx
447
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
448
- var statusConfig = {
449
- info: { icon: IconErrorOutline, color: "text-ph-info" },
450
- success: { icon: IconCheckCircle, color: "text-ph-success" },
451
- warning: { icon: IconExclamation, color: "text-ph-warning" },
452
- danger: { icon: IconCancel, color: "text-ph-danger" }
453
- };
454
- var statusClassMap = {
455
- info: "ph-alert-info",
456
- success: "ph-alert-success",
457
- warning: "ph-alert-warning",
458
- danger: "ph-alert-danger"
459
- };
460
- function Alert({
461
- status = "info",
462
- title,
463
- description,
464
- icon,
465
- children,
466
- className,
467
- onDismiss
468
- }) {
469
- const config = statusConfig[status];
470
- const Icon = config.icon;
471
- return /* @__PURE__ */ jsxs4(
472
- "div",
473
- {
474
- role: "alert",
475
- className: cn("ph-alert", statusClassMap[status], className),
476
- children: [
477
- icon != null ? icon : /* @__PURE__ */ jsx6(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color) }),
478
- /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
479
- title && /* @__PURE__ */ jsx6("p", { className: "font-semibold", children: title }),
480
- description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-ph-subtle", children: description }),
481
- children
482
- ] }),
483
- onDismiss && /* @__PURE__ */ jsx6(
484
- "button",
485
- {
486
- type: "button",
487
- onClick: onDismiss,
488
- className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
489
- "aria-label": "Dismiss",
490
- 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" }) })
491
- }
492
- )
493
- ]
494
- }
495
- );
496
- }
497
-
498
- // src/components/ui/Badge.tsx
499
- import { jsx as jsx7 } from "react/jsx-runtime";
500
- var variantMap = {
501
- brand: "ph-badge-brand",
502
- neutral: "ph-badge-neutral",
503
- success: "ph-badge-success",
504
- warning: "ph-badge-warning",
505
- danger: "ph-badge-danger",
506
- info: "ph-badge-info",
507
- outline: "ph-badge-outline"
508
- };
509
- var sizeMap = {
510
- sm: "text-[10px] px-1.5 py-0.5",
511
- md: ""
512
- };
513
- function Badge({
514
- variant = "neutral",
515
- size = "md",
516
- children,
517
- className
518
- }) {
519
- return /* @__PURE__ */ jsx7(
520
- "span",
521
- {
522
- className: cn(
523
- "ph-badge",
524
- variantMap[variant],
525
- sizeMap[size],
526
- className
527
- ),
528
- children
529
- }
530
- );
531
- }
532
-
533
- // src/components/ui/Card.tsx
534
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
535
- var variantMap2 = {
536
- default: "bg-ph-surface",
537
- outlined: "border-2 border-ph-border bg-ph-surface",
538
- elevated: "bg-ph-surface shadow-ph-md",
539
- highlighted: "border border-ph-brand/35 bg-orange-50/40 shadow-ph"
540
- };
541
- function Card({
542
- children,
543
- title,
544
- description,
545
- actions,
546
- footer,
547
- media,
548
- variant = "default",
549
- className,
550
- bodyClassName
551
- }) {
552
- return /* @__PURE__ */ jsxs5(
553
- "div",
554
- {
555
- className: cn(
556
- "ph-card",
557
- variantMap2[variant],
558
- className
559
- ),
560
- children: [
561
- media && /* @__PURE__ */ jsx8("div", { className: "-mx-6 -mt-6 mb-4", children: media }),
562
- /* @__PURE__ */ jsxs5("div", { className: cn("ph-card-body", bodyClassName), children: [
563
- title && /* @__PURE__ */ jsx8("h3", { className: "ph-card-title", children: title }),
564
- description && /* @__PURE__ */ jsx8("p", { className: "text-sm text-ph-subtle", children: description }),
565
- children,
566
- actions && /* @__PURE__ */ jsx8("div", { className: "ph-card-actions", children: actions })
567
- ] }),
568
- footer && /* @__PURE__ */ jsx8("div", { className: "border-t border-ph-border px-6 py-4 text-xs text-ph-subtle", children: footer })
569
- ]
570
- }
571
- );
572
- }
573
-
574
- // src/components/ui/Drawer.tsx
575
- import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
576
- var sideMap = {
577
- left: "left-0 border-r",
578
- right: "right-0 border-l"
579
- };
580
- var sizeMap2 = {
581
- sm: "w-[min(100%,18rem)]",
582
- md: "w-[min(100%,22rem)]",
583
- lg: "w-[min(100%,30rem)]"
584
- };
585
- function Drawer({
586
- open = false,
587
- onClose,
588
- title,
589
- children,
590
- footer,
591
- side = "right",
592
- size = "md",
593
- className,
594
- showCloseButton = true
595
- }) {
596
- if (!open) return null;
597
- return /* @__PURE__ */ jsxs6(Fragment3, { children: [
598
- /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]", role: "presentation", onClick: onClose }),
599
- /* @__PURE__ */ jsxs6(
600
- "aside",
601
- {
602
- className: cn(
603
- "fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
604
- sideMap[side],
605
- sizeMap2[size],
606
- className
607
- ),
608
- children: [
609
- (title || showCloseButton) && /* @__PURE__ */ jsxs6("header", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
610
- /* @__PURE__ */ jsx9("span", { className: "text-sm font-bold text-ph-ink", children: title }),
611
- 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" }) })
612
- ] }),
613
- /* @__PURE__ */ jsx9("div", { className: "flex-1", children }),
614
- footer && /* @__PURE__ */ jsx9("footer", { className: "border-t border-ph-border px-4 py-3", children: footer })
615
- ]
616
- }
617
- )
618
- ] });
619
- }
620
-
621
- // src/components/ui/Kbd.tsx
622
- import { jsx as jsx10 } from "react/jsx-runtime";
623
- function Kbd(_a) {
624
- var _b = _a, { variant = "shortcut", keys, children, className } = _b, props = __objRest(_b, ["variant", "keys", "children", "className"]);
625
- if (variant === "token") {
626
- return /* @__PURE__ */ jsx10("code", __spreadProps(__spreadValues({ className: cn("ph-kbd text-ph-ink", className) }, props), { children }));
627
- }
628
- const content = (keys == null ? void 0 : keys.length) ? keys.join(" ") : normalizeShortcut(children);
629
- return /* @__PURE__ */ jsx10("kbd", __spreadProps(__spreadValues({ className: cn("ph-shortcut", className) }, props), { children: content }));
630
- }
631
- function normalizeShortcut(children) {
632
- if (typeof children !== "string") return children;
633
- 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");
634
- }
635
-
636
- // src/components/ui/DropdownMenu.tsx
637
- import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
638
- var sizeClass2 = {
639
- xs: "ph-btn-xs",
640
- sm: "ph-btn-sm",
641
- md: "",
642
- lg: "ph-btn-lg"
643
- };
644
- var variantClass2 = {
645
- primary: "ph-btn-primary",
646
- secondary: "ph-btn-secondary",
647
- accent: "ph-btn-accent"
648
- };
649
- function dropdownPanelClass(align, panelClassName) {
650
- return cn(
651
- "ph-dropdown-panel absolute top-full z-50 mt-0",
652
- align === "end" ? "right-0" : "left-0",
653
- panelClassName
654
- );
655
- }
656
- function DropdownMenu(_a) {
657
- var _b = _a, {
658
- trigger,
659
- children,
660
- align = "start",
661
- className,
662
- panelClassName,
663
- "aria-label": ariaLabel
664
- } = _b, props = __objRest(_b, [
665
- "trigger",
666
- "children",
667
- "align",
668
- "className",
669
- "panelClassName",
670
- "aria-label"
671
- ]);
672
- return /* @__PURE__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
673
- /* @__PURE__ */ jsx11(
674
- "summary",
675
- {
676
- className: "cursor-pointer list-none [&::-webkit-details-marker]:hidden",
677
- "aria-label": ariaLabel,
678
- children: trigger
679
- }
680
- ),
681
- /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
682
- ] }));
683
- }
684
- function DropdownButton(_a) {
685
- var _b = _a, {
686
- label,
687
- variant = "secondary",
688
- outline = false,
689
- size = "md",
690
- split = false,
691
- icon,
692
- sideIcon,
693
- children,
694
- align = "start",
695
- className,
696
- panelClassName,
697
- "aria-label": ariaLabel
698
- } = _b, props = __objRest(_b, [
699
- "label",
700
- "variant",
701
- "outline",
702
- "size",
703
- "split",
704
- "icon",
705
- "sideIcon",
706
- "children",
707
- "align",
708
- "className",
709
- "panelClassName",
710
- "aria-label"
711
- ]);
712
- const usesLemonChrome = variant === "primary" || variant === "secondary";
713
- const chevron = /* @__PURE__ */ jsx11(IconChevronDown, { className: "h-4 w-4", "aria-hidden": true });
714
- const trailing = sideIcon != null ? sideIcon : chevron;
715
- return /* @__PURE__ */ jsxs7("details", __spreadProps(__spreadValues({ className: cn("relative", className) }, props), { children: [
716
- /* @__PURE__ */ jsx11(
717
- "summary",
718
- {
719
- className: cn(
720
- "ph-btn cursor-pointer list-none [&::-webkit-details-marker]:hidden",
721
- variantClass2[variant],
722
- outline && "ph-btn-outline",
723
- sizeClass2[size],
724
- split && "ph-btn-split"
725
- ),
726
- "aria-label": ariaLabel != null ? ariaLabel : label,
727
- children: usesLemonChrome ? /* @__PURE__ */ jsx11(ButtonChrome, { label, icon, sideIcon: trailing, split }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
728
- icon != null ? /* @__PURE__ */ jsx11("span", { className: "ph-btn-icon", children: icon }) : null,
729
- /* @__PURE__ */ jsx11("span", { className: "ph-btn-label", children: label }),
730
- /* @__PURE__ */ jsx11("span", { className: "ph-btn-side-icon", children: trailing })
731
- ] })
732
- }
733
- ),
734
- /* @__PURE__ */ jsx11("div", { className: dropdownPanelClass(align, panelClassName), children })
735
- ] }));
736
- }
737
- function DropdownItem(_a) {
738
- var _b = _a, {
739
- className,
740
- children
741
- } = _b, props = __objRest(_b, [
742
- "className",
743
- "children"
744
- ]);
745
- return /* @__PURE__ */ jsx11("button", __spreadProps(__spreadValues({ type: "button", className: cn("ph-dropdown-item w-full text-left", className) }, props), { children }));
746
- }
747
-
748
- // src/components/ui/Input.tsx
749
- import { useId } from "react";
750
- import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
751
- var sizeMap3 = {
752
- sm: "ph-input-sm",
753
- md: "",
754
- lg: "ph-input-lg"
755
- };
756
- function Input(_a) {
757
- var _b = _a, {
758
- id: idProp,
759
- label,
760
- hideLabel = false,
761
- error,
762
- helperText,
763
- size = "md",
764
- variant = "default",
765
- className,
766
- wrapperClassName,
767
- disabled
768
- } = _b, props = __objRest(_b, [
769
- "id",
770
- "label",
771
- "hideLabel",
772
- "error",
773
- "helperText",
774
- "size",
775
- "variant",
776
- "className",
777
- "wrapperClassName",
778
- "disabled"
779
- ]);
780
- const autoId = useId();
781
- const id = idProp != null ? idProp : autoId;
782
- const hasError = Boolean(error);
783
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
784
- label && /* @__PURE__ */ jsx12(
785
- "label",
786
- {
787
- htmlFor: id,
788
- className: cn(
789
- "ph-label",
790
- hideLabel && "sr-only",
791
- disabled && "opacity-50"
792
- ),
793
- children: label
794
- }
795
- ),
796
- /* @__PURE__ */ jsx12(
797
- "input",
798
- __spreadValues({
799
- id,
800
- disabled,
801
- "aria-invalid": hasError || void 0,
802
- className: cn(
803
- "ph-input w-full",
804
- sizeMap3[size],
805
- variant === "ghost" && "ph-input-ghost",
806
- hasError && "ph-input-error",
807
- disabled && "cursor-not-allowed opacity-60",
808
- className
809
- )
810
- }, props)
811
- ),
812
- helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
813
- error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
814
- ] });
815
- }
816
- function Select(_a) {
817
- var _b = _a, {
818
- id: idProp,
819
- label,
820
- hideLabel = false,
821
- error,
822
- helperText,
823
- size = "md",
824
- className,
825
- wrapperClassName,
826
- disabled,
827
- children
828
- } = _b, props = __objRest(_b, [
829
- "id",
830
- "label",
831
- "hideLabel",
832
- "error",
833
- "helperText",
834
- "size",
835
- "className",
836
- "wrapperClassName",
837
- "disabled",
838
- "children"
839
- ]);
840
- const autoId = useId();
841
- const id = idProp != null ? idProp : autoId;
842
- const hasError = Boolean(error);
843
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
844
- label && /* @__PURE__ */ jsx12(
845
- "label",
846
- {
847
- htmlFor: id,
848
- className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
849
- children: label
850
- }
851
- ),
852
- /* @__PURE__ */ jsx12(
853
- "select",
854
- __spreadProps(__spreadValues({
855
- id,
856
- disabled,
857
- "aria-invalid": hasError || void 0,
858
- className: cn(
859
- "ph-select w-full",
860
- sizeMap3[size],
861
- hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
862
- disabled && "cursor-not-allowed opacity-60",
863
- className
864
- )
865
- }, props), {
866
- children
867
- })
868
- ),
869
- helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
870
- error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
871
- ] });
872
- }
873
- function Textarea(_a) {
874
- var _b = _a, {
875
- id: idProp,
876
- label,
877
- hideLabel = false,
878
- error,
879
- helperText,
880
- size = "md",
881
- className,
882
- wrapperClassName,
883
- disabled
884
- } = _b, props = __objRest(_b, [
885
- "id",
886
- "label",
887
- "hideLabel",
888
- "error",
889
- "helperText",
890
- "size",
891
- "className",
892
- "wrapperClassName",
893
- "disabled"
894
- ]);
895
- const autoId = useId();
896
- const id = idProp != null ? idProp : autoId;
897
- const hasError = Boolean(error);
898
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
899
- label && /* @__PURE__ */ jsx12(
900
- "label",
901
- {
902
- htmlFor: id,
903
- className: cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50"),
904
- children: label
905
- }
906
- ),
907
- /* @__PURE__ */ jsx12(
908
- "textarea",
909
- __spreadValues({
910
- id,
911
- disabled,
912
- "aria-invalid": hasError || void 0,
913
- className: cn(
914
- "ph-textarea w-full",
915
- sizeMap3[size],
916
- hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
917
- disabled && "cursor-not-allowed opacity-60",
918
- className
919
- )
920
- }, props)
921
- ),
922
- helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs text-ph-subtle", children: helperText }),
923
- error && /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs font-medium text-ph-danger", children: error })
924
- ] });
925
- }
926
- function Checkbox(_a) {
927
- var _b = _a, {
928
- id: idProp,
929
- label,
930
- error,
931
- helperText,
932
- className,
933
- wrapperClassName,
934
- disabled
935
- } = _b, props = __objRest(_b, [
936
- "id",
937
- "label",
938
- "error",
939
- "helperText",
940
- "className",
941
- "wrapperClassName",
942
- "disabled"
943
- ]);
944
- const autoId = useId();
945
- const id = idProp != null ? idProp : autoId;
946
- const hasError = Boolean(error);
947
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName), children: [
948
- /* @__PURE__ */ jsx12(
949
- "input",
950
- __spreadValues({
951
- id,
952
- type: "checkbox",
953
- disabled,
954
- "aria-invalid": hasError || void 0,
955
- className: cn(
956
- "ph-checkbox",
957
- hasError && "border-ph-danger",
958
- disabled && "cursor-not-allowed opacity-60",
959
- className
960
- )
961
- }, props)
962
- ),
963
- /* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label }),
964
- helperText && !hasError && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs text-ph-subtle", children: helperText }),
965
- error && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs font-medium text-ph-danger", children: error })
966
- ] });
967
- }
968
- function Radio(_a) {
969
- var _b = _a, {
970
- id: idProp,
971
- label,
972
- className,
973
- wrapperClassName,
974
- disabled
975
- } = _b, props = __objRest(_b, [
976
- "id",
977
- "label",
978
- "className",
979
- "wrapperClassName",
980
- "disabled"
981
- ]);
982
- const autoId = useId();
983
- const id = idProp != null ? idProp : autoId;
984
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-control-row", wrapperClassName, disabled && "opacity-60"), children: [
985
- /* @__PURE__ */ jsx12(
986
- "input",
987
- __spreadValues({
988
- id,
989
- type: "radio",
990
- disabled,
991
- className: cn("ph-radio", disabled && "cursor-not-allowed", className)
992
- }, props)
993
- ),
994
- /* @__PURE__ */ jsx12("label", { htmlFor: id, className: cn("cursor-pointer", disabled && "opacity-60"), children: label })
995
- ] });
996
- }
997
- function Toggle(_a) {
998
- var _b = _a, {
999
- id: idProp,
1000
- label,
1001
- className,
1002
- wrapperClassName,
1003
- disabled
1004
- } = _b, props = __objRest(_b, [
1005
- "id",
1006
- "label",
1007
- "className",
1008
- "wrapperClassName",
1009
- "disabled"
1010
- ]);
1011
- const autoId = useId();
1012
- const id = idProp != null ? idProp : autoId;
1013
- return /* @__PURE__ */ jsxs8("label", { className: cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60"), children: [
1014
- /* @__PURE__ */ jsx12("span", { className: disabled ? "opacity-60" : void 0, children: label }),
1015
- /* @__PURE__ */ jsx12(
1016
- "input",
1017
- __spreadValues({
1018
- id,
1019
- type: "checkbox",
1020
- role: "switch",
1021
- disabled,
1022
- className: cn("ph-toggle", disabled && "cursor-not-allowed", className)
1023
- }, props)
1024
- )
1025
- ] });
1026
- }
1027
- function Range(_a) {
1028
- var _b = _a, {
1029
- label,
1030
- minLabel,
1031
- maxLabel,
1032
- valueLabel,
1033
- wrapperClassName,
1034
- className
1035
- } = _b, props = __objRest(_b, [
1036
- "label",
1037
- "minLabel",
1038
- "maxLabel",
1039
- "valueLabel",
1040
- "wrapperClassName",
1041
- "className"
1042
- ]);
1043
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
1044
- label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
1045
- /* @__PURE__ */ jsx12("input", __spreadValues({ type: "range", className: cn("ph-range", className) }, props)),
1046
- (minLabel || valueLabel || maxLabel) && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between text-xs text-ph-mutedtext", children: [
1047
- /* @__PURE__ */ jsx12("span", { children: minLabel }),
1048
- /* @__PURE__ */ jsx12("span", { children: valueLabel }),
1049
- /* @__PURE__ */ jsx12("span", { children: maxLabel })
1050
- ] })
1051
- ] });
1052
- }
1053
- function FileUpload(_a) {
1054
- var _b = _a, { label, prompt = "Drop file or browse", wrapperClassName, className } = _b, props = __objRest(_b, ["label", "prompt", "wrapperClassName", "className"]);
1055
- return /* @__PURE__ */ jsxs8("div", { className: cn("ph-field", wrapperClassName), children: [
1056
- label && /* @__PURE__ */ jsx12("label", { className: "ph-label", children: label }),
1057
- /* @__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: [
1058
- /* @__PURE__ */ jsx12("input", __spreadValues({ type: "file", className: cn("sr-only", className) }, props)),
1059
- prompt
1060
- ] })
1061
- ] });
1062
- }
1063
-
1064
- // src/components/ui/Modal.tsx
1065
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
1066
- var sizeMap4 = {
1067
- sm: "max-w-sm",
1068
- md: "max-w-lg",
1069
- lg: "max-w-2xl",
1070
- xl: "max-w-4xl",
1071
- full: "max-w-[calc(100%-2rem)]"
1072
- };
1073
- function Modal({
1074
- open = false,
1075
- onClose,
1076
- title,
1077
- description,
1078
- children,
1079
- footer,
1080
- size = "md",
1081
- className,
1082
- showCloseButton = true
1083
- }) {
1084
- if (!open) return null;
1085
- return /* @__PURE__ */ jsx13("div", { className: "ph-modal-overlay", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs9(
1086
- "div",
1087
- {
1088
- role: "dialog",
1089
- "aria-modal": true,
1090
- className: cn(
1091
- "ph-modal-panel",
1092
- sizeMap4[size],
1093
- className
1094
- ),
1095
- onClick: (e) => e.stopPropagation(),
1096
- children: [
1097
- (title || showCloseButton) && /* @__PURE__ */ jsxs9("header", { className: "flex items-start justify-between gap-4", children: [
1098
- /* @__PURE__ */ jsxs9("div", { children: [
1099
- title && /* @__PURE__ */ jsx13("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
1100
- description && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-ph-subtle", children: description })
1101
- ] }),
1102
- showCloseButton && onClose && /* @__PURE__ */ jsx13(
1103
- "button",
1104
- {
1105
- type: "button",
1106
- onClick: onClose,
1107
- className: "shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink",
1108
- "aria-label": "Close",
1109
- children: /* @__PURE__ */ jsx13(IconClose, { className: "h-5 w-5" })
1110
- }
1111
- )
1112
- ] }),
1113
- /* @__PURE__ */ jsx13("div", { className: "mt-4", children }),
1114
- footer && /* @__PURE__ */ jsx13("div", { className: "mt-6 flex justify-end gap-2 border-t border-ph-border pt-5", children: footer })
1115
- ]
1116
- }
1117
- ) });
1118
- }
1119
-
1120
- // src/components/ui/Navigation.tsx
1121
- import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
1122
- function Breadcrumbs({ items, label = "Breadcrumb", className }) {
1123
- return /* @__PURE__ */ jsx14("nav", { "aria-label": label, className: cn("ph-breadcrumbs", className), children: items.map((item, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
1124
- index > 0 ? /* @__PURE__ */ jsx14("span", { className: "ph-breadcrumb-sep", "aria-hidden": "true", children: "/" }) : null,
1125
- 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 })
1126
- ] }, `${item.label}-${index}`)) });
1127
- }
1128
- function Pagination({
1129
- page,
1130
- totalPages,
1131
- onPageChange,
1132
- label = "Pagination",
1133
- compact = false,
1134
- className
1135
- }) {
1136
- const pages = compact ? [Math.max(1, page - 1), page, Math.min(totalPages, page + 1)] : [1, 2, 3, totalPages];
1137
- const uniquePages = Array.from(new Set(pages)).filter((n) => n >= 1 && n <= totalPages);
1138
- return /* @__PURE__ */ jsxs10("nav", { "aria-label": label, className: cn("ph-pagination", className), children: [
1139
- /* @__PURE__ */ jsx14(
1140
- "button",
1141
- {
1142
- type: "button",
1143
- className: "ph-pagination-btn",
1144
- disabled: page <= 1,
1145
- "aria-label": "Previous page",
1146
- onClick: () => onPageChange == null ? void 0 : onPageChange(page - 1),
1147
- children: /* @__PURE__ */ jsx14(IconChevronLeft, { className: "mx-auto h-4 w-4", "aria-hidden": true })
1148
- }
1149
- ),
1150
- uniquePages.map((pageNumber, index) => /* @__PURE__ */ jsxs10("span", { className: "contents", children: [
1151
- !compact && index === uniquePages.length - 1 && pageNumber > 4 ? /* @__PURE__ */ jsx14("span", { className: "ph-pagination-ellipsis", "aria-hidden": "true", children: "..." }) : null,
1152
- /* @__PURE__ */ jsx14(
1153
- "button",
1154
- {
1155
- type: "button",
1156
- className: cn("ph-pagination-btn", pageNumber === page && "ph-pagination-btn-active"),
1157
- "aria-current": pageNumber === page ? "page" : void 0,
1158
- onClick: () => onPageChange == null ? void 0 : onPageChange(pageNumber),
1159
- children: pageNumber
1160
- }
1161
- )
1162
- ] }, pageNumber)),
1163
- /* @__PURE__ */ jsx14(
1164
- "button",
1165
- {
1166
- type: "button",
1167
- className: "ph-pagination-btn",
1168
- disabled: page >= totalPages,
1169
- "aria-label": "Next page",
1170
- onClick: () => onPageChange == null ? void 0 : onPageChange(page + 1),
1171
- children: /* @__PURE__ */ jsx14(IconChevronRight, { className: "mx-auto h-4 w-4", "aria-hidden": true })
1172
- }
1173
- )
1174
- ] });
1175
- }
1176
-
1177
- // src/components/ui/Panel.tsx
1178
- import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
1179
- function Panel(_a) {
1180
- var _b = _a, { title, description, children, className } = _b, props = __objRest(_b, ["title", "description", "children", "className"]);
1181
- return /* @__PURE__ */ jsxs11("div", __spreadProps(__spreadValues({ className: cn("ph-panel", className) }, props), { children: [
1182
- title && /* @__PURE__ */ jsx15("h3", { className: "text-sm font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
1183
- description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-ph-subtle", children: description }),
1184
- children
1185
- ] }));
1186
- }
1187
-
1188
- // src/components/ui/Rating.tsx
1189
- import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
1190
- function Rating(_a) {
1191
- var _b = _a, {
1192
- label,
1193
- value = 0,
1194
- max = 5,
1195
- readOnly = true,
1196
- onChange,
1197
- className,
1198
- wrapperClassName
1199
- } = _b, props = __objRest(_b, [
1200
- "label",
1201
- "value",
1202
- "max",
1203
- "readOnly",
1204
- "onChange",
1205
- "className",
1206
- "wrapperClassName"
1207
- ]);
1208
- const stars = Array.from({ length: max }, (_, index) => index + 1);
1209
- return /* @__PURE__ */ jsxs12("div", { className: cn("ph-field", wrapperClassName), children: [
1210
- label && /* @__PURE__ */ jsx16("span", { className: "ph-label", children: label }),
1211
- /* @__PURE__ */ jsx16(
1212
- "div",
1213
- __spreadProps(__spreadValues({
1214
- className: cn("ph-rating flex", className),
1215
- role: readOnly ? "img" : "radiogroup",
1216
- "aria-label": label != null ? label : `Rating: ${value} out of ${max}`
1217
- }, props), {
1218
- children: stars.map((star) => {
1219
- const active = star <= value;
1220
- if (readOnly) {
1221
- return /* @__PURE__ */ jsx16(
1222
- IconStar,
1223
- {
1224
- className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border"),
1225
- "aria-hidden": true
1226
- },
1227
- star
1228
- );
1229
- }
1230
- return /* @__PURE__ */ jsx16(
1231
- "button",
1232
- {
1233
- type: "button",
1234
- 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",
1235
- role: "radio",
1236
- "aria-checked": active,
1237
- "aria-label": `${star} out of ${max}`,
1238
- onClick: () => onChange == null ? void 0 : onChange(star),
1239
- children: /* @__PURE__ */ jsx16(IconStar, { className: cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border") })
1240
- },
1241
- star
1242
- );
1243
- })
1244
- })
1245
- )
1246
- ] });
1247
- }
1248
-
1249
- // src/components/ui/SearchInput.tsx
1250
- import { useId as useId2 } from "react";
1251
- import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
1252
- function SearchInput(_a) {
1253
- var _b = _a, {
1254
- id: idProp,
1255
- label = "Search",
1256
- hideLabel = false,
1257
- shortcut,
1258
- density = "default",
1259
- className,
1260
- wrapperClassName,
1261
- placeholder
1262
- } = _b, props = __objRest(_b, [
1263
- "id",
1264
- "label",
1265
- "hideLabel",
1266
- "shortcut",
1267
- "density",
1268
- "className",
1269
- "wrapperClassName",
1270
- "placeholder"
1271
- ]);
1272
- const autoId = useId2();
1273
- const id = idProp != null ? idProp : autoId;
1274
- return /* @__PURE__ */ jsxs13("div", { className: cn("relative", wrapperClassName), children: [
1275
- /* @__PURE__ */ jsx17("label", { htmlFor: id, className: hideLabel ? "sr-only" : "ph-label mb-1.5 block", children: label }),
1276
- /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
1277
- shortcut != null ? /* @__PURE__ */ jsx17(
1278
- "span",
1279
- {
1280
- className: "ph-shortcut pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-xs",
1281
- "aria-hidden": true,
1282
- children: shortcut
1283
- }
1284
- ) : null,
1285
- /* @__PURE__ */ jsx17(
1286
- "input",
1287
- __spreadValues({
1288
- id,
1289
- type: "search",
1290
- placeholder,
1291
- "aria-label": hideLabel ? label : void 0,
1292
- className: cn(
1293
- "ph-input w-full",
1294
- density === "compact" && "max-w-xs !min-h-[2rem] py-1.5 text-sm",
1295
- shortcut != null && "pl-[3.25rem]",
1296
- className
1297
- )
1298
- }, props)
1299
- )
1300
- ] })
1301
- ] });
1302
- }
1303
- function SearchGroup(_a) {
1304
- var _b = _a, {
1305
- id: idProp,
1306
- label = "Search records",
1307
- submitLabel = "Search",
1308
- placeholder = "Persons, actions, flags\u2026",
1309
- wrapperClassName,
1310
- className
1311
- } = _b, props = __objRest(_b, [
1312
- "id",
1313
- "label",
1314
- "submitLabel",
1315
- "placeholder",
1316
- "wrapperClassName",
1317
- "className"
1318
- ]);
1319
- const autoId = useId2();
1320
- const id = idProp != null ? idProp : autoId;
1321
- return /* @__PURE__ */ jsxs13("div", { className: cn("ph-field", wrapperClassName), children: [
1322
- /* @__PURE__ */ jsx17("label", { htmlFor: id, className: "ph-label", children: label }),
1323
- /* @__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: [
1324
- /* @__PURE__ */ jsx17(
1325
- "input",
1326
- __spreadValues({
1327
- id,
1328
- type: "search",
1329
- placeholder,
1330
- className: cn("ph-input ph-input-group-field min-w-0 flex-1", className)
1331
- }, props)
1332
- ),
1333
- /* @__PURE__ */ jsx17(
1334
- Button,
1335
- {
1336
- type: "submit",
1337
- variant: "primary",
1338
- icon: /* @__PURE__ */ jsx17(IconSearch, { className: "h-4 w-4", "aria-hidden": true }),
1339
- className: "ph-search-group__submit",
1340
- "aria-label": submitLabel
1341
- }
1342
- )
1343
- ] })
1344
- ] });
1345
- }
1346
-
1347
- // src/components/ui/Table.tsx
1348
- import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
1349
- function Table({
1350
- data,
1351
- columns,
1352
- zebra = false,
1353
- compact = false,
1354
- ribbon = false,
1355
- getRowStyle,
1356
- className,
1357
- caption
1358
- }) {
1359
- 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: [
1360
- caption && /* @__PURE__ */ jsx18("caption", { className: "sr-only", children: caption }),
1361
- /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: columns.map((col) => /* @__PURE__ */ jsx18("th", { className: col.className, children: col.header }, col.key)) }) }),
1362
- /* @__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)) })
1363
- ] }) });
1364
- }
1365
-
1366
- // src/components/ui/Stat.tsx
1367
- import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
1368
- var toneMap = {
1369
- default: "text-ph-ink",
1370
- brand: "text-ph-brand",
1371
- blue: "text-ph-blue",
1372
- purple: "text-ph-purple",
1373
- warning: "text-amber-900"
1374
- };
1375
- var statMap = {
1376
- default: "",
1377
- brand: "",
1378
- blue: "",
1379
- purple: "",
1380
- warning: "border-amber-200 bg-amber-50/70"
1381
- };
1382
- function Stat(_a) {
1383
- var _b = _a, { icon, label, value, footer, tone = "default", className } = _b, props = __objRest(_b, ["icon", "label", "value", "footer", "tone", "className"]);
1384
- return /* @__PURE__ */ jsxs15("article", __spreadProps(__spreadValues({ className: cn("ph-stat", statMap[tone], className) }, props), { children: [
1385
- icon && /* @__PURE__ */ jsx19("div", { className: cn("mb-2 h-7 w-7", toneMap[tone]), children: icon }),
1386
- /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-label", tone === "warning" && toneMap[tone]), children: label }),
1387
- /* @__PURE__ */ jsx19("div", { className: cn("ph-stat-val", toneMap[tone]), children: value }),
1388
- footer && /* @__PURE__ */ jsx19("p", { className: "text-xs text-ph-subtle", children: footer })
1389
- ] }));
1390
- }
1391
-
1392
- // src/components/ui/Toast.tsx
1393
- import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
1394
- var statusConfig2 = {
1395
- info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
1396
- success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
1397
- warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
1398
- danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" }
1399
- };
1400
- function Toast({
1401
- status = "info",
1402
- title,
1403
- description,
1404
- onDismiss,
1405
- className
1406
- }) {
1407
- const config = statusConfig2[status];
1408
- const Icon = config.icon;
1409
- return /* @__PURE__ */ jsxs16("div", { className: cn("ph-toast", config.bg, className), children: [
1410
- /* @__PURE__ */ jsx20(Icon, { className: cn("mt-0.5 h-5 w-5 shrink-0", config.color), "aria-hidden": true }),
1411
- /* @__PURE__ */ jsxs16("div", { className: "pr-8", children: [
1412
- /* @__PURE__ */ jsx20("div", { className: "font-semibold", children: title }),
1413
- description && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-xs text-ph-subtle", children: description })
1414
- ] }),
1415
- onDismiss && /* @__PURE__ */ jsx20(
1416
- "button",
1417
- {
1418
- type: "button",
1419
- "aria-label": `Dismiss ${title}`,
1420
- className: "absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle",
1421
- onClick: onDismiss,
1422
- children: /* @__PURE__ */ jsx20(IconClose, { className: "h-4 w-4" })
1423
- }
1424
- )
1425
- ] });
1426
- }
1427
- function ToastStack({ children, className }) {
1428
- return /* @__PURE__ */ jsx20("div", { className: cn("ph-toast-stack", className), children });
1429
- }
1430
-
1431
- // src/components/ui/Tabs.tsx
1432
- import { jsx as jsx21 } from "react/jsx-runtime";
1433
- function Tabs({ items, value, onChange, variant = "pill", className }) {
1434
- if (variant === "underline") {
1435
- return /* @__PURE__ */ jsx21("div", { className: cn("flex gap-6 border-b border-ph-border", className), children: items.map((item) => /* @__PURE__ */ jsx21(
1436
- "button",
1437
- {
1438
- type: "button",
1439
- onClick: () => onChange(item.value),
1440
- className: cn(
1441
- "-mb-px border-b-2 pb-2 text-sm font-semibold transition",
1442
- value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
1443
- ),
1444
- children: item.label
1445
- },
1446
- item.value
1447
- )) });
1448
- }
1449
- return /* @__PURE__ */ jsx21("div", { className: cn("ph-tabs-row inline-flex", className), children: items.map((item) => /* @__PURE__ */ jsx21(
1450
- "button",
1451
- {
1452
- type: "button",
1453
- onClick: () => onChange(item.value),
1454
- className: cn("ph-tab", value === item.value && "ph-tab-active"),
1455
- children: item.label
1456
- },
1457
- item.value
1458
- )) });
1459
- }
1460
-
1461
- // src/components/ui/ThemeDomSync.tsx
1462
- import { useLayoutEffect } from "react";
1463
-
1464
- // src/themes/registry.ts
1465
- var DEFAULT_THEME_ID = "hedgehog-light";
1466
- var THEMES = [
1467
- {
1468
- id: "hedgehog-light",
1469
- name: "HedgeHog Light",
1470
- description: "Default Quill warm greys and orange Lemon chrome.",
1471
- colorScheme: "light",
1472
- group: "HedgeHog"
1473
- },
1474
- {
1475
- id: "hedgehog-dark",
1476
- name: "HedgeHog Dark",
1477
- description: "Dark app shell with HedgeHog orange accents.",
1478
- colorScheme: "dark",
1479
- group: "HedgeHog"
1480
- },
1481
- {
1482
- id: "catppuccin-light",
1483
- name: "Catppuccin Light",
1484
- description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
1485
- colorScheme: "light",
1486
- group: "Catppuccin"
1487
- },
1488
- {
1489
- id: "catppuccin-dark",
1490
- name: "Catppuccin Dark",
1491
- description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
1492
- colorScheme: "dark",
1493
- group: "Catppuccin"
1494
- },
1495
- {
1496
- id: "sheets",
1497
- name: "Sheets",
1498
- description: "Spreadsheet green on office neutrals.",
1499
- colorScheme: "light",
1500
- group: "Productivity"
1501
- },
1502
- {
1503
- id: "sheets-dark",
1504
- name: "Sheets Dark",
1505
- description: "Dark shell with spreadsheet green accent.",
1506
- colorScheme: "dark",
1507
- group: "Productivity"
1508
- },
1509
- {
1510
- id: "note",
1511
- name: "Note",
1512
- description: "Notebook purple on lavender-white chrome.",
1513
- colorScheme: "light",
1514
- group: "Productivity"
1515
- },
1516
- {
1517
- id: "note-dark",
1518
- name: "Note Dark",
1519
- description: "Dark notebook purple \u2014 night reading mode.",
1520
- colorScheme: "dark",
1521
- group: "Productivity"
1522
- },
1523
- {
1524
- id: "presentation",
1525
- name: "Presentation",
1526
- description: "Orange-red on office neutrals.",
1527
- colorScheme: "light",
1528
- group: "Productivity"
1529
- },
1530
- {
1531
- id: "presentation-dark",
1532
- name: "Presentation Dark",
1533
- description: "Dark shell with orange-red accent.",
1534
- colorScheme: "dark",
1535
- group: "Productivity"
1536
- },
1537
- {
1538
- id: "socials",
1539
- name: "Socials",
1540
- description: "Meta blue accent on familiar social greys.",
1541
- colorScheme: "light",
1542
- group: "Social"
1543
- },
1544
- {
1545
- id: "socials-dark",
1546
- name: "Socials Dark",
1547
- description: "Social dark mode \u2014 #18191A base and Meta blue.",
1548
- colorScheme: "dark",
1549
- group: "Social"
1550
- },
1551
- {
1552
- id: "chats-light",
1553
- name: "Chats Light",
1554
- description: "Aubergine brand on clean workspace neutrals.",
1555
- colorScheme: "light",
1556
- group: "Chats"
1557
- },
1558
- {
1559
- id: "chats-dark",
1560
- name: "Chats Dark",
1561
- description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
1562
- colorScheme: "dark",
1563
- group: "Chats"
1564
- },
1565
- {
1566
- id: "xenide-light",
1567
- name: "Xenide Light",
1568
- description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
1569
- colorScheme: "light",
1570
- group: "Xenide"
1571
- },
1572
- {
1573
- id: "xenide-dark",
1574
- name: "Xenide Dark",
1575
- description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
1576
- colorScheme: "dark",
1577
- group: "Xenide"
1578
- },
1579
- {
1580
- id: "bikini-bottom",
1581
- name: "Bikini Bottom",
1582
- description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
1583
- colorScheme: "light",
1584
- group: "Fun"
1585
- },
1586
- {
1587
- id: "bikini-bottom-dark",
1588
- name: "Bikini Bottom Dark",
1589
- description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
1590
- colorScheme: "dark",
1591
- group: "Fun"
1592
- },
1593
- {
1594
- id: "turtletime",
1595
- name: "TurtleTime",
1596
- description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
1597
- colorScheme: "light",
1598
- group: "Fun"
1599
- },
1600
- {
1601
- id: "turtletime-dark",
1602
- name: "TurtleTime Dark",
1603
- description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
1604
- colorScheme: "dark",
1605
- group: "Fun"
1606
- },
1607
- {
1608
- id: "github-light",
1609
- name: "GitHub Light",
1610
- description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
1611
- colorScheme: "light",
1612
- group: "GitHub"
1613
- },
1614
- {
1615
- id: "github-dark",
1616
- name: "GitHub Dark",
1617
- description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
1618
- colorScheme: "dark",
1619
- group: "GitHub"
1620
- },
1621
- {
1622
- id: "rosepine-light",
1623
- name: "Ros\xE9 Pine Dawn",
1624
- description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
1625
- colorScheme: "light",
1626
- group: "Ros\xE9 Pine"
1627
- },
1628
- {
1629
- id: "rosepine-dark",
1630
- name: "Ros\xE9 Pine",
1631
- description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
1632
- colorScheme: "dark",
1633
- group: "Ros\xE9 Pine"
1634
- }
1635
- ];
1636
- var THEME_GROUPS = Array.from(new Set(THEMES.map((theme) => theme.group)));
1637
- function isThemeId(value) {
1638
- return THEMES.some((theme) => theme.id === value);
1639
- }
1640
- function getTheme(id) {
1641
- return THEMES.find((theme) => theme.id === id);
1642
- }
1643
-
1644
- // src/themes/init-theme.ts
1645
- var STORAGE_KEY = "ph-theme";
1646
- var VALID_THEMES = THEMES.map((theme) => theme.id);
1647
- 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}")}})();`;
1648
- function persistTheme(themeId) {
1649
- if (typeof window === "undefined") {
1650
- return;
1651
- }
1652
- if (!isThemeId(themeId)) {
1653
- return;
1654
- }
1655
- document.documentElement.setAttribute("data-theme", themeId);
1656
- localStorage.setItem(STORAGE_KEY, themeId);
1657
- }
1658
- function readStoredTheme() {
1659
- if (typeof window === "undefined") {
1660
- return DEFAULT_THEME_ID;
1661
- }
1662
- const stored = localStorage.getItem(STORAGE_KEY);
1663
- if (stored === "xenide") {
1664
- return "xenide-light";
1665
- }
1666
- return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
1667
- }
1668
-
1669
- // src/components/ui/ThemeDomSync.tsx
1670
- function ThemeDomSync() {
1671
- useLayoutEffect(() => {
1672
- persistTheme(readStoredTheme());
1673
- }, []);
1674
- return null;
1675
- }
1676
-
1677
- // src/components/ui/ThemeManager.tsx
1678
- import { useLayoutEffect as useLayoutEffect2 } from "react";
1679
- import { Fragment as Fragment5, jsx as jsx22 } from "react/jsx-runtime";
1680
- function ThemeManager({ children }) {
1681
- useLayoutEffect2(() => {
1682
- persistTheme(readStoredTheme());
1683
- }, []);
1684
- return /* @__PURE__ */ jsx22(Fragment5, { children });
1685
- }
1686
-
1687
- // src/components/ui/ThemeSwitcher.tsx
1688
- import { useEffect, useState } from "react";
1689
- import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
1690
- function ThemeSwitcher({ className }) {
1691
- const [themeId, setThemeId] = useState("hedgehog-light");
1692
- useEffect(() => {
1693
- const id = readStoredTheme();
1694
- persistTheme(id);
1695
- setThemeId(id);
1696
- }, []);
1697
- return /* @__PURE__ */ jsxs17("label", { className: cn("flex min-w-0 items-center gap-2", className), children: [
1698
- /* @__PURE__ */ jsx23("span", { className: "shrink-0 text-xs font-medium text-ph-mutedtext sm:text-sm", children: "Theme" }),
1699
- /* @__PURE__ */ jsx23(
1700
- "select",
1701
- {
1702
- 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",
1703
- value: themeId,
1704
- "aria-label": "Colour theme",
1705
- onChange: (event) => {
1706
- const next = event.target.value;
1707
- persistTheme(next);
1708
- setThemeId(next);
1709
- },
1710
- 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))
1711
- }
1712
- )
1713
- ] });
1714
- }
1715
-
1716
- // src/components/ui/Accordion.tsx
1717
- import { useState as useState2 } from "react";
1718
- import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
1719
- function Accordion({
1720
- items,
1721
- allowMultiple = false,
1722
- defaultOpen = [],
1723
- className
1724
- }) {
1725
- const [openItems, setOpenItems] = useState2(new Set(defaultOpen));
1726
- const toggleItem = (id) => {
1727
- setOpenItems((prev) => {
1728
- const next = new Set(prev);
1729
- if (next.has(id)) {
1730
- next.delete(id);
1731
- } else {
1732
- if (!allowMultiple) {
1733
- next.clear();
1734
- }
1735
- next.add(id);
1736
- }
1737
- return next;
1738
- });
1739
- };
1740
- 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) => {
1741
- const isOpen = openItems.has(item.id);
1742
- return /* @__PURE__ */ jsxs18("div", { className: "first:rounded-t-xl last:rounded-b-xl", children: [
1743
- /* @__PURE__ */ jsxs18(
1744
- "button",
1745
- {
1746
- type: "button",
1747
- onClick: () => toggleItem(item.id),
1748
- className: "flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted",
1749
- children: [
1750
- /* @__PURE__ */ jsx24("span", { className: "font-semibold text-ph-ink", children: item.title }),
1751
- /* @__PURE__ */ jsx24(
1752
- IconChevronDown,
1753
- {
1754
- className: cn(
1755
- "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
1756
- isOpen && "rotate-180"
1757
- )
1758
- }
1759
- )
1760
- ]
1761
- }
1762
- ),
1763
- /* @__PURE__ */ jsx24(
1764
- "div",
1765
- {
1766
- className: cn(
1767
- "grid transition-all duration-200",
1768
- isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
1769
- ),
1770
- children: /* @__PURE__ */ jsx24("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "px-5 pb-4 text-ph-subtle", children: item.content }) })
1771
- }
1772
- )
1773
- ] }, item.id);
1774
- }) });
1775
- }
1776
-
1777
- // src/components/ui/Stepper.tsx
1778
- import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
1779
- function Stepper({ steps, currentStep, className }) {
1780
- return /* @__PURE__ */ jsx25("div", { className: cn("flex items-start gap-2", className), children: steps.map((step, index) => {
1781
- const isCompleted = index < currentStep;
1782
- const isCurrent = index === currentStep;
1783
- const isPending = index > currentStep;
1784
- const isError = step.status === "error";
1785
- return /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 items-start gap-2", children: [
1786
- /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col items-center", children: [
1787
- /* @__PURE__ */ jsx25(
1788
- "div",
1789
- {
1790
- className: cn(
1791
- "flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
1792
- isCompleted && "bg-ph-success text-white",
1793
- isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
1794
- isCurrent && isError && "bg-ph-danger text-white",
1795
- isPending && "bg-ph-muted text-ph-mutedtext"
1796
- ),
1797
- 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
1798
- }
1799
- ),
1800
- /* @__PURE__ */ jsxs19("div", { className: "mt-2 text-center", children: [
1801
- /* @__PURE__ */ jsx25(
1802
- "p",
1803
- {
1804
- className: cn(
1805
- "text-sm font-semibold",
1806
- isCurrent && "text-ph-ink",
1807
- !isCurrent && "text-ph-mutedtext"
1808
- ),
1809
- children: step.label
1810
- }
1811
- ),
1812
- step.description && /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: step.description })
1813
- ] })
1814
- ] }),
1815
- index < steps.length - 1 && /* @__PURE__ */ jsx25(
1816
- "div",
1817
- {
1818
- className: cn(
1819
- "mt-4 h-0.5 flex-1 rounded-full transition-colors",
1820
- isCompleted ? "bg-ph-success" : "bg-ph-border"
1821
- )
1822
- }
1823
- )
1824
- ] }, step.id);
1825
- }) });
1826
- }
1827
-
1828
- // src/components/ui/SegmentedControl.tsx
1829
- import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
1830
- function SegmentedControl({ options, value, onChange, className }) {
1831
- return /* @__PURE__ */ jsx26(
1832
- "div",
1833
- {
1834
- className: cn(
1835
- "inline-flex rounded-lg bg-ph-muted p-1",
1836
- className
1837
- ),
1838
- children: options.map((option) => /* @__PURE__ */ jsxs20(
1839
- "button",
1840
- {
1841
- type: "button",
1842
- onClick: () => onChange(option.value),
1843
- className: cn(
1844
- "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
1845
- value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
1846
- ),
1847
- children: [
1848
- option.icon && /* @__PURE__ */ jsx26("span", { className: "h-4 w-4", children: option.icon }),
1849
- option.label
1850
- ]
1851
- },
1852
- option.value
1853
- ))
1854
- }
1855
- );
1856
- }
1857
-
1858
- // src/components/ui/CommandPalette.tsx
1859
- import { useState as useState3, useEffect as useEffect2, useRef } from "react";
1860
- import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
1861
- function CommandPalette({
1862
- items,
1863
- isOpen,
1864
- onClose,
1865
- placeholder = "Type a command or search...",
1866
- className
1867
- }) {
1868
- const [query, setQuery] = useState3("");
1869
- const [selectedIndex, setSelectedIndex] = useState3(0);
1870
- const inputRef = useRef(null);
1871
- const filtered = items.filter(
1872
- (item) => item.label.toLowerCase().includes(query.toLowerCase())
1873
- );
1874
- useEffect2(() => {
1875
- var _a;
1876
- if (isOpen) {
1877
- setQuery("");
1878
- setSelectedIndex(0);
1879
- (_a = inputRef.current) == null ? void 0 : _a.focus();
1880
- }
1881
- }, [isOpen]);
1882
- useEffect2(() => {
1883
- const handleKeyDown = (e) => {
1884
- var _a;
1885
- if (!isOpen) return;
1886
- switch (e.key) {
1887
- case "ArrowDown":
1888
- e.preventDefault();
1889
- setSelectedIndex((i) => (i + 1) % filtered.length);
1890
- break;
1891
- case "ArrowUp":
1892
- e.preventDefault();
1893
- setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
1894
- break;
1895
- case "Enter":
1896
- e.preventDefault();
1897
- (_a = filtered[selectedIndex]) == null ? void 0 : _a.onSelect();
1898
- onClose();
1899
- break;
1900
- case "Escape":
1901
- onClose();
1902
- break;
1903
- }
1904
- };
1905
- window.addEventListener("keydown", handleKeyDown);
1906
- return () => window.removeEventListener("keydown", handleKeyDown);
1907
- }, [isOpen, filtered, selectedIndex, onClose]);
1908
- if (!isOpen) return null;
1909
- 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(
1910
- "div",
1911
- {
1912
- className: cn(
1913
- "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
1914
- className
1915
- ),
1916
- children: [
1917
- /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
1918
- /* @__PURE__ */ jsx27(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
1919
- /* @__PURE__ */ jsx27(
1920
- "input",
1921
- {
1922
- ref: inputRef,
1923
- type: "text",
1924
- value: query,
1925
- onChange: (e) => {
1926
- setQuery(e.target.value);
1927
- setSelectedIndex(0);
1928
- },
1929
- placeholder,
1930
- className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
1931
- }
1932
- ),
1933
- /* @__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" })
1934
- ] }),
1935
- /* @__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(
1936
- "button",
1937
- {
1938
- type: "button",
1939
- onClick: () => {
1940
- item.onSelect();
1941
- onClose();
1942
- },
1943
- onMouseEnter: () => setSelectedIndex(index),
1944
- className: cn(
1945
- "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
1946
- index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
1947
- ),
1948
- children: [
1949
- item.icon && /* @__PURE__ */ jsx27("span", { className: "h-5 w-5", children: item.icon }),
1950
- /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
1951
- 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 })
1952
- ]
1953
- },
1954
- item.id
1955
- )) })
1956
- ]
1957
- }
1958
- ) });
1959
- }
1960
-
1961
- // src/components/ui/Calendar.tsx
1962
- import { useState as useState4 } from "react";
1963
- import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
1964
- function Calendar({ value, onChange, className }) {
1965
- const [currentMonth, setCurrentMonth] = useState4(value || /* @__PURE__ */ new Date());
1966
- const today = /* @__PURE__ */ new Date();
1967
- const year = currentMonth.getFullYear();
1968
- const month = currentMonth.getMonth();
1969
- const firstDay = new Date(year, month, 1).getDay();
1970
- const daysInMonth = new Date(year, month + 1, 0).getDate();
1971
- const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
1972
- const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
1973
- const monthNames = [
1974
- "January",
1975
- "February",
1976
- "March",
1977
- "April",
1978
- "May",
1979
- "June",
1980
- "July",
1981
- "August",
1982
- "September",
1983
- "October",
1984
- "November",
1985
- "December"
1986
- ];
1987
- const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
1988
- const isSelected = (day) => {
1989
- if (!value) return false;
1990
- return value.getDate() === day && value.getMonth() === month && value.getFullYear() === year;
1991
- };
1992
- const isToday = (day) => {
1993
- return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
1994
- };
1995
- const handleSelect = (day) => {
1996
- onChange == null ? void 0 : onChange(new Date(year, month, day));
1997
- };
1998
- const days = [];
1999
- for (let i = 0; i < firstDay; i++) {
2000
- days.push(null);
2001
- }
2002
- for (let i = 1; i <= daysInMonth; i++) {
2003
- days.push(i);
2004
- }
2005
- return /* @__PURE__ */ jsxs22("div", { className: cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className), children: [
2006
- /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
2007
- /* @__PURE__ */ jsx28(
2008
- "button",
2009
- {
2010
- type: "button",
2011
- onClick: prevMonth,
2012
- className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
2013
- 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" }) })
2014
- }
2015
- ),
2016
- /* @__PURE__ */ jsxs22("span", { className: "text-sm font-semibold text-ph-ink", children: [
2017
- monthNames[month],
2018
- " ",
2019
- year
2020
- ] }),
2021
- /* @__PURE__ */ jsx28(
2022
- "button",
2023
- {
2024
- type: "button",
2025
- onClick: nextMonth,
2026
- className: "rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink",
2027
- 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" }) })
2028
- }
2029
- )
2030
- ] }),
2031
- /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-7 gap-1", children: [
2032
- weekDays.map((day) => /* @__PURE__ */ jsx28("div", { className: "py-1 text-center text-xs font-medium text-ph-mutedtext", children: day }, day)),
2033
- days.map((day, index) => /* @__PURE__ */ jsx28("div", { className: "aspect-square", children: day && /* @__PURE__ */ jsx28(
2034
- "button",
2035
- {
2036
- type: "button",
2037
- onClick: () => handleSelect(day),
2038
- className: cn(
2039
- "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
2040
- 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"
2041
- ),
2042
- children: day
2043
- }
2044
- ) }, index))
2045
- ] })
2046
- ] });
2047
- }
2048
-
2049
- // src/components/ui/HoverCard.tsx
2050
- import { useState as useState5 } from "react";
2051
- import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
2052
- function HoverCard({ trigger, children, className }) {
2053
- const [isVisible, setIsVisible] = useState5(false);
2054
- return /* @__PURE__ */ jsxs23(
2055
- "div",
2056
- {
2057
- className: "relative inline-block",
2058
- onMouseEnter: () => setIsVisible(true),
2059
- onMouseLeave: () => setIsVisible(false),
2060
- children: [
2061
- trigger,
2062
- /* @__PURE__ */ jsxs23(
2063
- "div",
2064
- {
2065
- className: cn(
2066
- "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",
2067
- isVisible ? "visible translate-y-0 opacity-100" : "invisible -translate-y-1 opacity-0",
2068
- className
2069
- ),
2070
- children: [
2071
- /* @__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" }),
2072
- /* @__PURE__ */ jsx29("div", { className: "relative", children })
2073
- ]
2074
- }
2075
- )
2076
- ]
2077
- }
2078
- );
2079
- }
2080
-
2081
- // src/components/ui/EmptyState.tsx
2082
- import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
2083
- function EmptyState({ icon, title, description, action, className }) {
2084
- return /* @__PURE__ */ jsxs24(
2085
- "div",
2086
- {
2087
- className: cn(
2088
- "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",
2089
- className
2090
- ),
2091
- children: [
2092
- 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 }),
2093
- /* @__PURE__ */ jsx30("h3", { className: "text-base font-semibold text-ph-ink", children: title }),
2094
- description && /* @__PURE__ */ jsx30("p", { className: "mt-1 max-w-sm text-sm text-ph-subtle", children: description }),
2095
- action && /* @__PURE__ */ jsx30("div", { className: "mt-4", children: action })
2096
- ]
2097
- }
2098
- );
2099
- }
2100
-
2101
- // src/components/ui/FilterChips.tsx
2102
- import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
2103
- function FilterChips({ chips, onToggle, onRemove, className }) {
2104
- return /* @__PURE__ */ jsx31("div", { className: cn("flex flex-wrap gap-2", className), children: chips.map((chip) => /* @__PURE__ */ jsxs25(
2105
- "button",
2106
- {
2107
- type: "button",
2108
- onClick: () => onToggle(chip.id),
2109
- className: cn(
2110
- "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
2111
- chip.active ? "bg-ph-brand text-white" : "bg-ph-muted text-ph-subtle hover:bg-ph-border hover:text-ph-ink"
2112
- ),
2113
- children: [
2114
- chip.label,
2115
- chip.active && /* @__PURE__ */ jsx31(
2116
- "span",
2117
- {
2118
- onClick: (e) => {
2119
- e.stopPropagation();
2120
- onRemove(chip.id);
2121
- },
2122
- className: "ml-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-white/20",
2123
- children: /* @__PURE__ */ jsx31(IconClose, { className: "h-3 w-3" })
2124
- }
2125
- )
2126
- ]
2127
- },
2128
- chip.id
2129
- )) });
2130
- }
2131
-
2132
- // src/components/ui/CodeBlock.tsx
2133
- import { useState as useState6 } from "react";
2134
- import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
2135
- function CodeBlock({ code, language = "tsx", filename, className }) {
2136
- const [copied, setCopied] = useState6(false);
2137
- const handleCopy = async () => {
2138
- await navigator.clipboard.writeText(code);
2139
- setCopied(true);
2140
- setTimeout(() => setCopied(false), 2e3);
2141
- };
2142
- return /* @__PURE__ */ jsxs26("div", { className: cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className), children: [
2143
- (filename || language) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2", children: [
2144
- /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
2145
- /* @__PURE__ */ jsxs26("div", { className: "flex gap-1.5", children: [
2146
- /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
2147
- /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
2148
- /* @__PURE__ */ jsx32("div", { className: "h-3 w-3 rounded-full bg-emerald-400" })
2149
- ] }),
2150
- filename && /* @__PURE__ */ jsx32("span", { className: "ml-2 text-xs text-white/60", children: filename })
2151
- ] }),
2152
- /* @__PURE__ */ jsx32(
2153
- "button",
2154
- {
2155
- type: "button",
2156
- onClick: handleCopy,
2157
- className: "text-xs text-white/60 transition hover:text-white",
2158
- children: copied ? "Copied!" : "Copy"
2159
- }
2160
- )
2161
- ] }),
2162
- /* @__PURE__ */ jsx32("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ jsx32("code", { className: "font-mono text-[#e4e4e7]", children: code }) })
2163
- ] });
2164
- }
2165
-
2166
- // src/components/ui/ComponentDocs.tsx
2167
- import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
2168
- function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }) {
2169
- return /* @__PURE__ */ jsxs27("details", { className: cn("ph-panel group overflow-hidden p-0", className), open: defaultOpen, children: [
2170
- /* @__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: [
2171
- /* @__PURE__ */ jsx33("h3", { className: "text-xs font-semibold uppercase tracking-wider text-ph-mutedtext", children: title }),
2172
- /* @__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: [
2173
- /* @__PURE__ */ jsx33("span", { className: "group-open:hidden", children: "Show" }),
2174
- /* @__PURE__ */ jsx33("span", { className: "hidden group-open:inline", children: "Hide" })
2175
- ] })
2176
- ] }),
2177
- /* @__PURE__ */ jsx33("div", { className: "overflow-x-auto border-t border-ph-border", children: /* @__PURE__ */ jsxs27("table", { className: "w-full text-left text-sm", children: [
2178
- /* @__PURE__ */ jsx33("thead", { className: "bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext", children: /* @__PURE__ */ jsxs27("tr", { children: [
2179
- /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Prop" }),
2180
- /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Type" }),
2181
- /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Default" }),
2182
- /* @__PURE__ */ jsx33("th", { className: "px-4 py-2 font-semibold", children: "Use" })
2183
- ] }) }),
2184
- /* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
2185
- var _a;
2186
- return /* @__PURE__ */ jsxs27("tr", { children: [
2187
- /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
2188
- /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
2189
- /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
2190
- /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
2191
- ] }, row.name);
2192
- }) })
2193
- ] }) })
2194
- ] });
2195
- }
2196
-
2197
- // src/components/ui/ShowcaseWrapper.tsx
2198
- import { useState as useState7 } from "react";
2199
- import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
2200
- function ShowcaseWrapper({
2201
- id,
2202
- title,
2203
- description,
2204
- docs,
2205
- code,
2206
- filename = "Example.tsx",
2207
- children,
2208
- className
2209
- }) {
2210
- var _a;
2211
- const [showCode, setShowCode] = useState7(false);
2212
- const fallbackId = (_a = titleIdMap[title]) != null ? _a : title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
2213
- return /* @__PURE__ */ jsxs28("section", { id: id != null ? id : fallbackId, className: cn("scroll-mt-20", className), children: [
2214
- /* @__PURE__ */ jsxs28("div", { className: "ph-h2-rule mb-8", children: [
2215
- /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5", children: [
2216
- /* @__PURE__ */ jsx34("h2", { children: title }),
2217
- /* @__PURE__ */ jsx34(
2218
- "button",
2219
- {
2220
- type: "button",
2221
- onClick: () => setShowCode(!showCode),
2222
- className: cn(
2223
- "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
2224
- 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"
2225
- ),
2226
- title: showCode ? "Hide code" : "Show code",
2227
- children: /* @__PURE__ */ jsxs28(
2228
- "svg",
2229
- {
2230
- className: "h-5 w-5",
2231
- viewBox: "0 0 24 24",
2232
- fill: "none",
2233
- stroke: "currentColor",
2234
- strokeWidth: "2",
2235
- strokeLinecap: "round",
2236
- strokeLinejoin: "round",
2237
- children: [
2238
- /* @__PURE__ */ jsx34("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
2239
- /* @__PURE__ */ jsx34("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
2240
- /* @__PURE__ */ jsx34("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
2241
- /* @__PURE__ */ jsx34("line", { x1: "6", y1: "8", x2: "6", y2: "8" }),
2242
- /* @__PURE__ */ jsx34("line", { x1: "10", y1: "8", x2: "10", y2: "8" })
2243
- ]
2244
- }
2245
- )
2246
- }
2247
- )
2248
- ] }),
2249
- /* @__PURE__ */ jsx34("hr", {})
2250
- ] }),
2251
- description && /* @__PURE__ */ jsx34("p", { className: "mb-6 text-sm text-ph-subtle", children: description }),
2252
- docs && /* @__PURE__ */ jsx34("div", { className: "mb-6", children: docs }),
2253
- /* @__PURE__ */ jsxs28(
2254
- "div",
2255
- {
2256
- className: cn(
2257
- "gap-6",
2258
- showCode ? "lg:grid lg:grid-cols-[1fr,minmax(360px,420px)]" : "block"
2259
- ),
2260
- children: [
2261
- /* @__PURE__ */ jsx34("div", { className: cn("min-w-0", showCode && "lg:pr-2"), children }),
2262
- /* @__PURE__ */ jsx34(
2263
- "div",
2264
- {
2265
- className: cn(
2266
- "transition-all duration-300",
2267
- showCode ? "block opacity-100" : "hidden opacity-0 lg:hidden"
2268
- ),
2269
- children: /* @__PURE__ */ jsx34("div", { className: "sticky top-20", children: /* @__PURE__ */ jsx34(CodeBlock, { code, filename }) })
2270
- }
2271
- )
2272
- ]
2273
- }
2274
- )
2275
- ] });
2276
- }
2277
- var titleIdMap = {
2278
- "Icons": "icons",
2279
- "Colour tokens": "colors",
2280
- "Buttons": "buttons",
2281
- "Badges": "badges",
2282
- "Alerts": "alerts",
2283
- "Toasts": "toasts",
2284
- "Cards": "cards",
2285
- "Forms": "forms",
2286
- "Inputs & Forms": "forms",
2287
- "Tables": "tables",
2288
- "Accordion": "accordion",
2289
- "Calendar": "calendar",
2290
- "Hover Card": "hovercard",
2291
- "Modals": "modals",
2292
- "Drawers": "drawers",
2293
- "Navigation chrome": "navigation",
2294
- "Navigation utilities": "utilities",
2295
- "Stepper": "stepper",
2296
- "Command Palette": "command",
2297
- "Filter Chips": "filters",
2298
- "Empty State": "emptystate",
2299
- "Charts (PostHog-style)": "charts",
2300
- "Dashboard shells": "dashboard",
2301
- "Tabs": "tabs",
2302
- "Dropdowns": "dropdowns",
2303
- "Progress & loading": "progress",
2304
- "Tooltip": "tooltip",
2305
- "Avatars": "avatars",
2306
- "Stats & conversational UI": "stats",
2307
- "Timeline": "timeline",
2308
- "Countdown motif": "countdown",
2309
- "Keyboard glyphs": "kbd",
2310
- "Icon swap": "swap",
2311
- "Stacked surfaces": "stack",
2312
- "Diff slider": "diff",
2313
- "Badge hotspots": "indicator",
2314
- "Terminal capture": "code-mockup"
2315
- };
2316
-
2317
- // src/components/ui/CollapsibleSection.tsx
2318
- import { useState as useState8 } from "react";
2319
- import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
2320
- function CollapsibleSection({ title, children, defaultOpen = true, id }) {
2321
- const [isOpen, setIsOpen] = useState8(defaultOpen);
2322
- return /* @__PURE__ */ jsxs29("section", { id, className: "scroll-mt-20", children: [
2323
- /* @__PURE__ */ jsxs29(
2324
- "button",
2325
- {
2326
- type: "button",
2327
- onClick: () => setIsOpen(!isOpen),
2328
- 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",
2329
- children: [
2330
- /* @__PURE__ */ jsx35("span", { className: "text-lg font-bold text-ph-ink", children: title }),
2331
- /* @__PURE__ */ jsx35(
2332
- "svg",
2333
- {
2334
- className: cn(
2335
- "h-5 w-5 text-ph-subtle transition-transform duration-200",
2336
- isOpen && "rotate-180"
2337
- ),
2338
- viewBox: "0 0 24 24",
2339
- fill: "none",
2340
- stroke: "currentColor",
2341
- strokeWidth: "2",
2342
- strokeLinecap: "round",
2343
- strokeLinejoin: "round",
2344
- children: /* @__PURE__ */ jsx35("path", { d: "M6 9l6 6 6-6" })
2345
- }
2346
- )
2347
- ]
2348
- }
2349
- ),
2350
- /* @__PURE__ */ jsx35(
2351
- "div",
2352
- {
2353
- className: cn(
2354
- "overflow-hidden transition-all duration-300",
2355
- isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
2356
- ),
2357
- children
2358
- }
2359
- )
2360
- ] });
2361
- }
2362
-
2363
- // src/components/ui/Typography.tsx
2364
- import { jsx as jsx36 } from "react/jsx-runtime";
2365
- var toneMap2 = {
2366
- default: "text-ph-ink",
2367
- muted: "text-ph-mutedtext",
2368
- subtle: "text-ph-subtle",
2369
- brand: "text-ph-brand",
2370
- danger: "text-ph-danger",
2371
- success: "text-ph-success",
2372
- warning: "text-ph-warning",
2373
- info: "text-ph-info",
2374
- inherit: ""
2375
- };
2376
- var weightMap = {
2377
- normal: "font-normal",
2378
- medium: "font-medium",
2379
- semibold: "font-semibold",
2380
- bold: "font-bold",
2381
- extrabold: "font-extrabold"
2382
- };
2383
- function textClass(base, tone, weight, truncate, className) {
2384
- return cn(base, toneMap2[tone], weight && weightMap[weight], truncate && "truncate", className);
2385
- }
2386
- function Display({
2387
- children,
2388
- tone = "default",
2389
- weight,
2390
- truncate,
2391
- className
2392
- }) {
2393
- return /* @__PURE__ */ jsx36("h1", { className: textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className), children });
2394
- }
2395
- function H1({ children, tone = "default", weight, truncate, className }) {
2396
- return /* @__PURE__ */ jsx36("h1", { className: textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className), children });
2397
- }
2398
- function H2({ children, tone = "default", weight, truncate, className }) {
2399
- return /* @__PURE__ */ jsx36("h2", { className: textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className), children });
2400
- }
2401
- function H3({ children, tone = "default", weight, truncate, className }) {
2402
- return /* @__PURE__ */ jsx36("h3", { className: textClass("text-xl font-semibold", tone, weight, truncate, className), children });
2403
- }
2404
- function H4({ children, tone = "default", weight, truncate, className }) {
2405
- return /* @__PURE__ */ jsx36("h4", { className: textClass("text-lg font-semibold", tone, weight, truncate, className), children });
2406
- }
2407
- function H5({ children, tone = "default", weight, truncate, className }) {
2408
- return /* @__PURE__ */ jsx36("h5", { className: textClass("text-base font-semibold", tone, weight, truncate, className), children });
2409
- }
2410
- function P({ children, tone = "default", weight, truncate, className }) {
2411
- return /* @__PURE__ */ jsx36("p", { className: textClass("text-base leading-relaxed", tone, weight, truncate, className), children });
2412
- }
2413
- function Small({ children, tone = "default", weight, truncate, className }) {
2414
- return /* @__PURE__ */ jsx36("span", { className: textClass("text-sm leading-relaxed", tone, weight, truncate, className), children });
2415
- }
2416
- function Caption({ children, tone = "muted", weight, truncate, className }) {
2417
- return /* @__PURE__ */ jsx36("span", { className: textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className), children });
2418
- }
2419
- function Overline({ children, tone = "muted", weight, truncate, className }) {
2420
- return /* @__PURE__ */ jsx36("span", { className: textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className), children });
2421
- }
2422
- function Lead({ children, tone = "subtle", weight, truncate, className }) {
2423
- return /* @__PURE__ */ jsx36("p", { className: textClass("text-lg leading-relaxed", tone, weight, truncate, className), children });
2424
- }
2425
- function Mono({ children, tone = "default", weight, truncate, className }) {
2426
- return /* @__PURE__ */ jsx36("code", { className: textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className), children });
2427
- }
2428
- function Label({ children, tone = "default", weight, truncate, className }) {
2429
- return /* @__PURE__ */ jsx36("label", { className: textClass("text-sm font-medium", tone, weight, truncate, className), children });
2430
- }
2431
-
2432
- // src/components/ui/Avatar.tsx
2433
- import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
2434
- var sizeMap5 = {
2435
- xs: "h-8 w-8 text-[10px]",
2436
- sm: "h-10 w-10 text-xs",
2437
- md: "h-12 w-12 text-base",
2438
- lg: "h-16 w-16 text-xl",
2439
- xl: "h-24 w-24 text-3xl"
2440
- };
2441
- var statusMap = {
2442
- online: "bg-emerald-500",
2443
- offline: "bg-ph-mutedtext",
2444
- away: "bg-amber-400",
2445
- busy: "bg-ph-danger"
2446
- };
2447
- function Avatar(_a) {
2448
- var _b = _a, {
2449
- label,
2450
- icon,
2451
- size = "md",
2452
- color = "bg-ph-brand text-white",
2453
- status,
2454
- badge,
2455
- className
2456
- } = _b, props = __objRest(_b, [
2457
- "label",
2458
- "icon",
2459
- "size",
2460
- "color",
2461
- "status",
2462
- "badge",
2463
- "className"
2464
- ]);
2465
- return /* @__PURE__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex shrink-0", className) }, props), { children: [
2466
- /* @__PURE__ */ jsx37(
2467
- "div",
2468
- {
2469
- className: cn(
2470
- "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
2471
- sizeMap5[size],
2472
- color
2473
- ),
2474
- children: icon || label
2475
- }
2476
- ),
2477
- status && /* @__PURE__ */ jsx37(
2478
- "span",
2479
- {
2480
- className: cn(
2481
- "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
2482
- statusMap[status]
2483
- )
2484
- }
2485
- ),
2486
- 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 })
2487
- ] }));
2488
- }
2489
- function AvatarGroup(_a) {
2490
- var _b = _a, { children, max, className } = _b, props = __objRest(_b, ["children", "max", "className"]);
2491
- const items = Array.isArray(children) ? children : [children];
2492
- const visible = max ? items.slice(0, max) : items;
2493
- const remaining = max ? items.length - max : 0;
2494
- return /* @__PURE__ */ jsxs30("div", __spreadProps(__spreadValues({ className: cn("-space-x-3 flex rtl:space-x-reverse", className) }, props), { children: [
2495
- visible,
2496
- remaining > 0 && /* @__PURE__ */ jsx37(
2497
- Avatar,
2498
- {
2499
- label: `+${remaining}`,
2500
- size: "md",
2501
- color: "bg-ph-toolbar text-ph-subtle"
2502
- }
2503
- )
2504
- ] }));
2505
- }
2506
-
2507
- // src/components/ui/Progress.tsx
2508
- import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
2509
- var sizeMap6 = {
2510
- sm: "h-1",
2511
- md: "h-2",
2512
- lg: "h-3"
2513
- };
2514
- function Progress(_a) {
2515
- var _b = _a, {
2516
- value,
2517
- max = 100,
2518
- color = "bg-ph-brand",
2519
- label,
2520
- showPercentage = false,
2521
- size = "md",
2522
- className
2523
- } = _b, props = __objRest(_b, [
2524
- "value",
2525
- "max",
2526
- "color",
2527
- "label",
2528
- "showPercentage",
2529
- "size",
2530
- "className"
2531
- ]);
2532
- const percentage = Math.min(100, Math.max(0, value / max * 100));
2533
- return /* @__PURE__ */ jsxs31("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
2534
- (label || showPercentage) && /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex justify-between text-sm text-ph-subtle", children: [
2535
- label && /* @__PURE__ */ jsx38("span", { children: label }),
2536
- showPercentage && /* @__PURE__ */ jsxs31("span", { className: "tabular-nums", children: [
2537
- Math.round(percentage),
2538
- "%"
2539
- ] })
2540
- ] }),
2541
- /* @__PURE__ */ jsx38("div", { className: cn("ph-progress", sizeMap6[size]), children: /* @__PURE__ */ jsx38(
2542
- "div",
2543
- {
2544
- className: cn("ph-progress-bar", color),
2545
- style: { width: `${percentage}%` },
2546
- role: "progressbar",
2547
- "aria-valuenow": value,
2548
- "aria-valuemin": 0,
2549
- "aria-valuemax": max
2550
- }
2551
- ) })
2552
- ] }));
2553
- }
2554
-
2555
- // src/components/ui/ChatBubble.tsx
2556
- import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
2557
- function ChatBubble(_a) {
2558
- var _b = _a, {
2559
- children,
2560
- avatar,
2561
- name,
2562
- time,
2563
- variant = "from",
2564
- footer,
2565
- className
2566
- } = _b, props = __objRest(_b, [
2567
- "children",
2568
- "avatar",
2569
- "name",
2570
- "time",
2571
- "variant",
2572
- "footer",
2573
- "className"
2574
- ]);
2575
- const isSelf = variant === "self";
2576
- return /* @__PURE__ */ jsxs32(
2577
- "div",
2578
- __spreadProps(__spreadValues({
2579
- className: cn(
2580
- "flex gap-3",
2581
- isSelf && "flex-row-reverse",
2582
- className
2583
- )
2584
- }, props), {
2585
- children: [
2586
- avatar && /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: avatar }),
2587
- /* @__PURE__ */ jsxs32("div", { className: cn("min-w-0 flex-1", isSelf && "text-right"), children: [
2588
- (name || time) && /* @__PURE__ */ jsxs32(
2589
- "header",
2590
- {
2591
- className: cn(
2592
- "flex gap-2 text-xs text-ph-mutedtext",
2593
- isSelf && "flex-row-reverse justify-end"
2594
- ),
2595
- children: [
2596
- name && /* @__PURE__ */ jsx39("span", { className: "font-semibold text-ph-ink", children: name }),
2597
- time && /* @__PURE__ */ jsx39("span", { children: time })
2598
- ]
2599
- }
2600
- ),
2601
- /* @__PURE__ */ jsx39(
2602
- "div",
2603
- {
2604
- className: cn(
2605
- "mt-2 inline-block text-left shadow-ph",
2606
- isSelf ? "ph-chat-self" : "ph-chat-from"
2607
- ),
2608
- children
2609
- }
2610
- ),
2611
- footer && /* @__PURE__ */ jsx39("footer", { className: "mt-2 text-[11px] text-ph-mutedtext", children: footer })
2612
- ] })
2613
- ]
2614
- })
2615
- );
2616
- }
2617
-
2618
- // src/components/ui/Terminal.tsx
2619
- import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
2620
- function Terminal(_a) {
2621
- var _b = _a, {
2622
- title = "sandbox",
2623
- lines,
2624
- children,
2625
- className
2626
- } = _b, props = __objRest(_b, [
2627
- "title",
2628
- "lines",
2629
- "children",
2630
- "className"
2631
- ]);
2632
- return /* @__PURE__ */ jsxs33(
2633
- "div",
2634
- __spreadProps(__spreadValues({
2635
- className: cn(
2636
- "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
2637
- className
2638
- )
2639
- }, props), {
2640
- children: [
2641
- /* @__PURE__ */ jsxs33("header", { className: "flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3", children: [
2642
- /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-red-400" }),
2643
- /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-amber-400" }),
2644
- /* @__PURE__ */ jsx40("div", { className: "h-3 w-3 rounded-full bg-emerald-400" }),
2645
- title && /* @__PURE__ */ jsx40("span", { className: "text-xs font-medium text-ph-mutedtext", children: title })
2646
- ] }),
2647
- /* @__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) => {
2648
- const text = typeof line === "string" ? line : line.text;
2649
- const color = typeof line === "string" ? void 0 : line.color;
2650
- return /* @__PURE__ */ jsxs33("span", { children: [
2651
- /* @__PURE__ */ jsx40("span", { className: color || "text-neutral-600", children: text }),
2652
- i < lines.length - 1 && /* @__PURE__ */ jsx40("br", {})
2653
- ] }, i);
2654
- }) }) })
2655
- ]
2656
- })
2657
- );
2658
- }
2659
-
2660
- // src/components/ui/Indicator.tsx
2661
- import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
2662
- var positionMap = {
2663
- "top-right": "-right-[2px] -top-[2px]",
2664
- "top-left": "-left-[2px] -top-[2px]",
2665
- "bottom-right": "-right-[2px] -bottom-[2px]",
2666
- "bottom-left": "-left-[2px] -bottom-[2px]"
2667
- };
2668
- function Indicator(_a) {
2669
- var _b = _a, {
2670
- children,
2671
- badge,
2672
- color = "bg-ph-brand",
2673
- position = "top-right",
2674
- dot = false,
2675
- className
2676
- } = _b, props = __objRest(_b, [
2677
- "children",
2678
- "badge",
2679
- "color",
2680
- "position",
2681
- "dot",
2682
- "className"
2683
- ]);
2684
- return /* @__PURE__ */ jsxs34("div", __spreadProps(__spreadValues({ className: cn("relative inline-flex items-center justify-center", className) }, props), { children: [
2685
- dot ? /* @__PURE__ */ jsx41(
2686
- "span",
2687
- {
2688
- className: cn(
2689
- "absolute z-10 h-2.5 w-2.5 rounded-full border-2 border-white",
2690
- color,
2691
- positionMap[position]
2692
- )
2693
- }
2694
- ) : badge != null ? /* @__PURE__ */ jsx41(
2695
- "span",
2696
- {
2697
- className: cn(
2698
- "absolute z-10 flex min-h-[22px] min-w-[22px] items-center justify-center rounded-full px-1 text-[11px] font-bold text-white",
2699
- color,
2700
- positionMap[position]
2701
- ),
2702
- children: badge
2703
- }
2704
- ) : null,
2705
- children
2706
- ] }));
2707
- }
2708
-
2709
- // src/components/ui/Timeline.tsx
2710
- import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
2711
- function Timeline(_a) {
2712
- var _b = _a, {
2713
- events,
2714
- alternate = false,
2715
- className
2716
- } = _b, props = __objRest(_b, [
2717
- "events",
2718
- "alternate",
2719
- "className"
2720
- ]);
2721
- return /* @__PURE__ */ jsx42(
2722
- "ol",
2723
- __spreadProps(__spreadValues({
2724
- className: cn("relative space-y-8", className)
2725
- }, props), {
2726
- children: events.map((event, idx) => {
2727
- const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
2728
- return /* @__PURE__ */ jsxs35("li", { className: cn("relative flex gap-6", align), children: [
2729
- /* @__PURE__ */ jsx42(
2730
- "div",
2731
- {
2732
- className: cn(
2733
- "relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
2734
- event.color || "bg-ph-brand text-white"
2735
- ),
2736
- children: event.icon
2737
- }
2738
- ),
2739
- /* @__PURE__ */ jsxs35("article", { className: "flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", children: [
2740
- /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap items-baseline gap-3", children: [
2741
- /* @__PURE__ */ jsx42("h4", { className: "text-base font-semibold text-ph-ink", children: event.title }),
2742
- event.time && /* @__PURE__ */ jsx42("time", { className: "text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext", children: event.time })
2743
- ] }),
2744
- event.description && /* @__PURE__ */ jsx42("p", { className: "mt-2 text-sm text-ph-subtle", children: event.description })
2745
- ] })
2746
- ] }, event.id);
2747
- })
2748
- })
2749
- );
2750
- }
2
+ Accordion,
3
+ Alert,
4
+ AuthCard,
5
+ AuthDivider,
6
+ AuthLayout,
7
+ Avatar,
8
+ AvatarGroup,
9
+ Badge,
10
+ Breadcrumbs,
11
+ Button,
12
+ ButtonChrome,
13
+ CANONICAL_ICONS,
14
+ Calendar,
15
+ Caption,
16
+ Card,
17
+ ChatBubble,
18
+ Checkbox,
19
+ CodeBlock,
20
+ CollapsibleSection,
21
+ CommandPalette,
22
+ ComponentDocs,
23
+ DEFAULT_THEME_ID,
24
+ Display,
25
+ Drawer,
26
+ DropdownButton,
27
+ DropdownItem,
28
+ DropdownMenu,
29
+ DropdownRadioGroup,
30
+ DropdownRadioItem,
31
+ EmptyState,
32
+ FileUpload,
33
+ FilterBar,
34
+ FilterChips,
35
+ FilterControls,
36
+ FilterMenu,
37
+ FormField,
38
+ H1,
39
+ H2,
40
+ H3,
41
+ H4,
42
+ H5,
43
+ HoverCard,
44
+ IconActivity,
45
+ IconAreaChart,
46
+ IconArrowDown,
47
+ IconArrowUp,
48
+ IconBase,
49
+ IconBell,
50
+ IconBellOff,
51
+ IconBolt,
52
+ IconBox,
53
+ IconByName,
54
+ IconCancel,
55
+ IconCheck,
56
+ IconCheckCircle,
57
+ IconChevronDown,
58
+ IconChevronLeft,
59
+ IconChevronRight,
60
+ IconClipboardEdit,
61
+ IconClose,
62
+ IconCodePreview,
63
+ IconCohort,
64
+ IconCommandCursor,
65
+ IconCopy,
66
+ IconCumulativeChart,
67
+ IconDataReel,
68
+ IconDatabase,
69
+ IconDownload,
70
+ IconEdit,
71
+ IconErrorOutline,
72
+ IconEventStream,
73
+ IconExclamation,
74
+ IconExperimentSplit,
75
+ IconFeatureGate,
76
+ IconFlag,
77
+ IconFlare,
78
+ IconFlask,
79
+ IconGift,
80
+ IconGridView,
81
+ IconHandClick,
82
+ IconHome,
83
+ IconInfo,
84
+ IconInsightBoard,
85
+ IconLayers,
86
+ IconListView,
87
+ IconLogout,
88
+ IconMail,
89
+ IconMoon,
90
+ IconOldWindow,
91
+ IconPanelRight,
92
+ IconPerson,
93
+ IconPlayCircle,
94
+ IconPlus,
95
+ IconPremium,
96
+ IconQueryEditor,
97
+ IconQueryStack,
98
+ IconRadar,
99
+ IconRecording,
100
+ IconReplayFrame,
101
+ IconRobot,
102
+ IconRocket,
103
+ IconSave,
104
+ IconSearch,
105
+ IconSelectEvents,
106
+ IconShoppingCart,
107
+ IconSpinner,
108
+ IconStar,
109
+ IconSubArrowRight,
110
+ IconSun,
111
+ IconSurveyCard,
112
+ IconSurveys,
113
+ IconSync,
114
+ IconTableChart,
115
+ IconTerminal,
116
+ IconToggle,
117
+ IconTrash,
118
+ IconTuning,
119
+ IconUpload,
120
+ IconVolume,
121
+ IconVolumeOff,
122
+ Indicator,
123
+ Input,
124
+ Kbd,
125
+ Label,
126
+ Lead,
127
+ Loader,
128
+ LoadingState,
129
+ Modal,
130
+ Mono,
131
+ OLD_UI_ICONS,
132
+ Overline,
133
+ P,
134
+ PH_ICONS,
135
+ PH_ICON_ALIASES,
136
+ Pagination,
137
+ Panel,
138
+ Progress,
139
+ Radio,
140
+ Range,
141
+ Rating,
142
+ SearchGroup,
143
+ SearchInput,
144
+ SegmentedControl,
145
+ Select,
146
+ SettingsLayout,
147
+ SettingsNav,
148
+ ShowcaseWrapper,
149
+ Skeleton,
150
+ Small,
151
+ SortMenu,
152
+ Stat,
153
+ Stepper,
154
+ THEMES,
155
+ THEME_GROUPS,
156
+ THEME_INIT_SCRIPT,
157
+ Table,
158
+ Tabs,
159
+ Terminal,
160
+ Textarea,
161
+ ThemeDomSync,
162
+ ThemeManager,
163
+ ThemeSwitcher,
164
+ Timeline,
165
+ Toast,
166
+ ToastStack,
167
+ Toggle,
168
+ cn,
169
+ createIconBase,
170
+ createIconBasePath,
171
+ getTheme,
172
+ isThemeId,
173
+ persistTheme,
174
+ readStoredTheme
175
+ } from "./chunk-FDMD3IIN.mjs";
176
+ import {
177
+ __objRest,
178
+ __spreadProps,
179
+ __spreadValues
180
+ } from "./chunk-FWCSY2DS.mjs";
2751
181
 
2752
182
  // src/components/charts/ph-insight-charts.tsx
2753
- import { useEffect as useEffect5, useMemo as useMemo2, useState as useState11 } from "react";
183
+ import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
184
+
185
+ // src/lib/chart/register-chartjs.ts
2754
186
  import {
2755
187
  ArcElement,
2756
188
  BarController,
@@ -2765,6 +197,32 @@ import {
2765
197
  Title,
2766
198
  Tooltip
2767
199
  } from "chart.js";
200
+ function synchroniseChartJsFontFamily() {
201
+ if (typeof document === "undefined") {
202
+ return;
203
+ }
204
+ const family = window.getComputedStyle(document.body).fontFamily;
205
+ const trimmed = family == null ? void 0 : family.trim();
206
+ if (trimmed) {
207
+ ChartJS.defaults.font.family = trimmed;
208
+ }
209
+ }
210
+ ChartJS.register(
211
+ CategoryScale,
212
+ LinearScale,
213
+ RadialLinearScale,
214
+ BarController,
215
+ BarElement,
216
+ DoughnutController,
217
+ PolarAreaController,
218
+ ArcElement,
219
+ Title,
220
+ Tooltip,
221
+ Legend
222
+ );
223
+ synchroniseChartJsFontFamily();
224
+
225
+ // src/components/charts/ph-insight-charts.tsx
2768
226
  import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
2769
227
 
2770
228
  // src/lib/chart/with-alpha.ts
@@ -3100,7 +558,7 @@ function buildPolarAreaDemo(tokens) {
3100
558
  }
3101
559
 
3102
560
  // src/lib/chart/use-ph-chart-tokens.ts
3103
- import { useEffect as useEffect3, useRef as useRef2, useState as useState9 } from "react";
561
+ import { useEffect, useRef, useState } from "react";
3104
562
 
3105
563
  // src/lib/chart/ph-chart-tokens.ts
3106
564
  var FALLBACK_CHART_TOKENS = {
@@ -3142,9 +600,9 @@ function tokensEqual(a, b) {
3142
600
  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;
3143
601
  }
3144
602
  function useChartTokens() {
3145
- const [tokens, setTokens] = useState9(FALLBACK_CHART_TOKENS);
3146
- const tokensRef = useRef2(FALLBACK_CHART_TOKENS);
3147
- useEffect3(() => {
603
+ const [tokens, setTokens] = useState(FALLBACK_CHART_TOKENS);
604
+ const tokensRef = useRef(FALLBACK_CHART_TOKENS);
605
+ useEffect(() => {
3148
606
  const root = document.documentElement;
3149
607
  const refresh = () => {
3150
608
  const next = readChartTokens(root);
@@ -3174,8 +632,8 @@ function buildHogChartTheme(tokens) {
3174
632
 
3175
633
  // src/lib/hog-charts-lite/CanvasTrendLineChart.tsx
3176
634
  import { scaleLinear, scalePoint } from "d3-scale";
3177
- import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState10 } from "react";
3178
- import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
635
+ import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
636
+ import { jsx, jsxs } from "react/jsx-runtime";
3179
637
  var HOG_LITE_DEFAULT_MARGINS = { top: 16, right: 16, bottom: 32, left: 48 };
3180
638
  function resolveDisplayedSeries(series, palette) {
3181
639
  const visible = series.filter((s) => {
@@ -3229,11 +687,11 @@ function CanvasTrendLineChart({
3229
687
  showCrosshair = true,
3230
688
  className = ""
3231
689
  }) {
3232
- const containerRef = useRef3(null);
3233
- const canvasRef = useRef3(null);
3234
- const [size, setSize] = useState10({ width: 0, height: 0 });
3235
- const [hoverIndex, setHoverIndex] = useState10(null);
3236
- useEffect4(() => {
690
+ const containerRef = useRef2(null);
691
+ const canvasRef = useRef2(null);
692
+ const [size, setSize] = useState2({ width: 0, height: 0 });
693
+ const [hoverIndex, setHoverIndex] = useState2(null);
694
+ useEffect2(() => {
3237
695
  const el = containerRef.current;
3238
696
  if (!el) {
3239
697
  return;
@@ -3420,7 +878,7 @@ function CanvasTrendLineChart({
3420
878
  }
3421
879
  }
3422
880
  }, [hoverIndex, labels, resolved, showCrosshair, showGrid, size.height, size.width, theme]);
3423
- useEffect4(() => {
881
+ useEffect2(() => {
3424
882
  draw();
3425
883
  }, [draw]);
3426
884
  const onMouseMove = (event) => {
@@ -3472,8 +930,8 @@ function CanvasTrendLineChart({
3472
930
  value: s.data[hoverIndex]
3473
931
  })).filter((row) => typeof row.value === "number" && Number.isFinite(row.value));
3474
932
  }, [hoverIndex, labels, resolved]);
3475
- return /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: `relative w-full ${className}`.trim(), children: [
3476
- /* @__PURE__ */ jsx43(
933
+ return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`.trim(), children: [
934
+ /* @__PURE__ */ jsx(
3477
935
  "canvas",
3478
936
  {
3479
937
  ref: canvasRef,
@@ -3483,7 +941,7 @@ function CanvasTrendLineChart({
3483
941
  onMouseLeave
3484
942
  }
3485
943
  ),
3486
- tooltipRows != null && tooltipRows.length > 0 && hoverIndex != null ? /* @__PURE__ */ jsxs36(
944
+ tooltipRows != null && tooltipRows.length > 0 && hoverIndex != null ? /* @__PURE__ */ jsxs(
3487
945
  "div",
3488
946
  {
3489
947
  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",
@@ -3492,11 +950,11 @@ function CanvasTrendLineChart({
3492
950
  top: 8
3493
951
  },
3494
952
  children: [
3495
- /* @__PURE__ */ jsx43("div", { className: "font-semibold text-ph-ink", children: labels[hoverIndex] }),
3496
- /* @__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: [
3497
- /* @__PURE__ */ jsx43("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { background: row.color } }),
3498
- /* @__PURE__ */ jsx43("span", { className: "min-w-0 truncate", children: row.label }),
3499
- /* @__PURE__ */ jsx43("span", { className: "ml-auto tabular-nums text-ph-ink", children: row.value })
953
+ /* @__PURE__ */ jsx("div", { className: "font-semibold text-ph-ink", children: labels[hoverIndex] }),
954
+ /* @__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: [
955
+ /* @__PURE__ */ jsx("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { background: row.color } }),
956
+ /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: row.label }),
957
+ /* @__PURE__ */ jsx("span", { className: "ml-auto tabular-nums text-ph-ink", children: row.value })
3500
958
  ] }, row.label)) })
3501
959
  ]
3502
960
  }
@@ -3505,37 +963,15 @@ function CanvasTrendLineChart({
3505
963
  }
3506
964
 
3507
965
  // src/components/charts/ph-insight-charts.tsx
3508
- import { jsx as jsx44 } from "react/jsx-runtime";
966
+ import { jsx as jsx2 } from "react/jsx-runtime";
3509
967
  var DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
3510
- var chartJsRegistered = false;
3511
- function registerChartJs() {
3512
- if (chartJsRegistered) return;
3513
- if (typeof window === "undefined") return;
3514
- ChartJS.register(
3515
- CategoryScale,
3516
- LinearScale,
3517
- RadialLinearScale,
3518
- BarController,
3519
- BarElement,
3520
- DoughnutController,
3521
- PolarAreaController,
3522
- ArcElement,
3523
- Title,
3524
- Tooltip,
3525
- Legend
3526
- );
3527
- chartJsRegistered = true;
3528
- }
3529
968
  function useClientMounted() {
3530
- const [mounted, setMounted] = useState11(false);
3531
- useEffect5(() => {
3532
- setMounted(true);
3533
- registerChartJs();
3534
- }, []);
969
+ const [mounted, setMounted] = useState3(false);
970
+ useEffect3(() => setMounted(true), []);
3535
971
  return mounted;
3536
972
  }
3537
973
  function ChartSkeleton({ className = "h-[280px]" }) {
3538
- return /* @__PURE__ */ jsx44(
974
+ return /* @__PURE__ */ jsx2(
3539
975
  "div",
3540
976
  {
3541
977
  className: `w-full animate-pulse rounded-lemon bg-ph-muted ${className}`,
@@ -3567,9 +1003,9 @@ function HogTrendLineChart() {
3567
1003
  [tokens.series]
3568
1004
  );
3569
1005
  if (!mounted) {
3570
- return /* @__PURE__ */ jsx44(ChartSkeleton, {});
1006
+ return /* @__PURE__ */ jsx2(ChartSkeleton, {});
3571
1007
  }
3572
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(
1008
+ return /* @__PURE__ */ jsx2("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx2(
3573
1009
  CanvasTrendLineChart,
3574
1010
  {
3575
1011
  labels: DEMO_LABELS,
@@ -3586,68 +1022,68 @@ function InsightVerticalBarChart() {
3586
1022
  const tokens = useChartTokens();
3587
1023
  const config = useMemo2(() => buildVerticalBarDemo(tokens), [tokens]);
3588
1024
  if (!mounted) {
3589
- return /* @__PURE__ */ jsx44(ChartSkeleton, {});
1025
+ return /* @__PURE__ */ jsx2(ChartSkeleton, {});
3590
1026
  }
3591
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
1027
+ 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 }) });
3592
1028
  }
3593
1029
  function InsightHorizontalBarChart() {
3594
1030
  const mounted = useClientMounted();
3595
1031
  const tokens = useChartTokens();
3596
1032
  const config = useMemo2(() => buildHorizontalBarDemo(tokens), [tokens]);
3597
1033
  if (!mounted) {
3598
- return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[320px]" });
1034
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[320px]" });
3599
1035
  }
3600
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
1036
+ 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 }) });
3601
1037
  }
3602
1038
  function InsightStackedBarChart() {
3603
1039
  const mounted = useClientMounted();
3604
1040
  const tokens = useChartTokens();
3605
1041
  const config = useMemo2(() => buildStackedBarDemo(tokens), [tokens]);
3606
1042
  if (!mounted) {
3607
- return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[300px]" });
1043
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[300px]" });
3608
1044
  }
3609
- return /* @__PURE__ */ jsx44("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx44(Bar, { data: config.data, options: config.options, redraw: false }) });
1045
+ 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 }) });
3610
1046
  }
3611
1047
  function InsightDoughnutChart() {
3612
1048
  const mounted = useClientMounted();
3613
1049
  const tokens = useChartTokens();
3614
1050
  const config = useMemo2(() => buildDoughnutDemo(tokens), [tokens]);
3615
1051
  if (!mounted) {
3616
- return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[260px]" });
1052
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[260px]" });
3617
1053
  }
3618
- 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, redraw: false }) });
1054
+ 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 }) });
3619
1055
  }
3620
1056
  function InsightPolarAreaChart() {
3621
1057
  const mounted = useClientMounted();
3622
1058
  const tokens = useChartTokens();
3623
1059
  const config = useMemo2(() => buildPolarAreaDemo(tokens), [tokens]);
3624
1060
  if (!mounted) {
3625
- return /* @__PURE__ */ jsx44(ChartSkeleton, { className: "h-[280px]" });
1061
+ return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[280px]" });
3626
1062
  }
3627
- 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, redraw: false }) });
1063
+ 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 }) });
3628
1064
  }
3629
1065
 
3630
1066
  // src/components/dashboard/DashboardWell.tsx
3631
- import { jsx as jsx45 } from "react/jsx-runtime";
1067
+ import { jsx as jsx3 } from "react/jsx-runtime";
3632
1068
  function DashboardWell(_a) {
3633
1069
  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
3634
- return /* @__PURE__ */ jsx45("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
1070
+ return /* @__PURE__ */ jsx3("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
3635
1071
  }
3636
1072
 
3637
1073
  // src/components/dashboard/DashboardToolbar.tsx
3638
- import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
1074
+ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
3639
1075
  function DashboardToolbar({ title, description, actions, className }) {
3640
- return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-wrap items-baseline justify-between gap-4", className), children: [
3641
- /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
3642
- /* @__PURE__ */ jsx46("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
3643
- description ? /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-sm text-ph-mutedtext", children: description }) : null
1076
+ return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-baseline justify-between gap-4", className), children: [
1077
+ /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
1078
+ /* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
1079
+ description ? /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-sm text-ph-mutedtext", children: description }) : null
3644
1080
  ] }),
3645
- actions != null ? /* @__PURE__ */ jsx46("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
1081
+ actions != null ? /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
3646
1082
  ] });
3647
1083
  }
3648
1084
 
3649
1085
  // src/components/dashboard/DashboardGrid.tsx
3650
- import { jsx as jsx47 } from "react/jsx-runtime";
1086
+ import { jsx as jsx5 } from "react/jsx-runtime";
3651
1087
  var presetClass = {
3652
1088
  insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
3653
1089
  dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
@@ -3660,14 +1096,14 @@ function DashboardGrid(_a) {
3660
1096
  "preset",
3661
1097
  "className"
3662
1098
  ]);
3663
- return /* @__PURE__ */ jsx47("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
1099
+ return /* @__PURE__ */ jsx5("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
3664
1100
  }
3665
1101
 
3666
1102
  // src/components/dashboard/DashboardFiltersBar.tsx
3667
- import { jsx as jsx48 } from "react/jsx-runtime";
1103
+ import { jsx as jsx6 } from "react/jsx-runtime";
3668
1104
  function DashboardFiltersBar(_a) {
3669
1105
  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
3670
- return /* @__PURE__ */ jsx48(
1106
+ return /* @__PURE__ */ jsx6(
3671
1107
  "div",
3672
1108
  __spreadValues({
3673
1109
  className: cn(
@@ -3680,20 +1116,20 @@ function DashboardFiltersBar(_a) {
3680
1116
  }
3681
1117
 
3682
1118
  // src/components/dashboard/DashboardKpiCard.tsx
3683
- import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
1119
+ import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
3684
1120
  function DashboardKpiCard(_a) {
3685
1121
  var _b = _a, { label, value, footer, icon, className, children } = _b, props = __objRest(_b, ["label", "value", "footer", "icon", "className", "children"]);
3686
- return /* @__PURE__ */ jsxs38("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
3687
- icon != null ? /* @__PURE__ */ jsx49("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
3688
- /* @__PURE__ */ jsx49("div", { className: "ph-stat-label", children: label }),
3689
- /* @__PURE__ */ jsx49("div", { className: "ph-stat-val", children: value }),
3690
- footer != null ? /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
1122
+ return /* @__PURE__ */ jsxs3("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
1123
+ icon != null ? /* @__PURE__ */ jsx7("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
1124
+ /* @__PURE__ */ jsx7("div", { className: "ph-stat-label", children: label }),
1125
+ /* @__PURE__ */ jsx7("div", { className: "ph-stat-val", children: value }),
1126
+ footer != null ? /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
3691
1127
  children
3692
1128
  ] }));
3693
1129
  }
3694
1130
 
3695
1131
  // src/components/dashboard/DashboardInsightPlaceholder.tsx
3696
- import { jsx as jsx50 } from "react/jsx-runtime";
1132
+ import { jsx as jsx8 } from "react/jsx-runtime";
3697
1133
  function DashboardInsightPlaceholder(_a) {
3698
1134
  var _b = _a, {
3699
1135
  label = "Add insight",
@@ -3706,7 +1142,7 @@ function DashboardInsightPlaceholder(_a) {
3706
1142
  "children",
3707
1143
  "type"
3708
1144
  ]);
3709
- return /* @__PURE__ */ jsx50(
1145
+ return /* @__PURE__ */ jsx8(
3710
1146
  "button",
3711
1147
  __spreadProps(__spreadValues({
3712
1148
  type,
@@ -3717,13 +1153,13 @@ function DashboardInsightPlaceholder(_a) {
3717
1153
  className
3718
1154
  )
3719
1155
  }, props), {
3720
- children: children != null ? children : /* @__PURE__ */ jsx50("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
1156
+ children: children != null ? children : /* @__PURE__ */ jsx8("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
3721
1157
  })
3722
1158
  );
3723
1159
  }
3724
1160
 
3725
1161
  // src/components/dashboard/InsightShell.tsx
3726
- import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
1162
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
3727
1163
  function InsightShell(_a) {
3728
1164
  var _b = _a, {
3729
1165
  ribbonColour,
@@ -3737,8 +1173,8 @@ function InsightShell(_a) {
3737
1173
  "children"
3738
1174
  ]);
3739
1175
  const ribbon = ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
3740
- return /* @__PURE__ */ jsxs39("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
3741
- ribbon != null ? /* @__PURE__ */ jsx51(
1176
+ return /* @__PURE__ */ jsxs4("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
1177
+ ribbon != null ? /* @__PURE__ */ jsx9(
3742
1178
  "div",
3743
1179
  {
3744
1180
  className: "ph-insight-shell__ribbon min-h-[7rem] shrink-0 self-stretch",
@@ -3746,24 +1182,24 @@ function InsightShell(_a) {
3746
1182
  "aria-hidden": true
3747
1183
  }
3748
1184
  ) : null,
3749
- /* @__PURE__ */ jsx51("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
1185
+ /* @__PURE__ */ jsx9("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
3750
1186
  ] }));
3751
1187
  }
3752
1188
 
3753
1189
  // src/components/dashboard/InsightShellHeader.tsx
3754
- import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
1190
+ import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
3755
1191
  function InsightShellHeader({ title, subtitle, actions, className }) {
3756
- return /* @__PURE__ */ jsxs40("header", { className: cn("flex gap-3", actions != null ? "items-start justify-between" : "", className), children: [
3757
- /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
3758
- /* @__PURE__ */ jsx52("h4", { className: "font-semibold leading-snug text-ph-ink", children: title }),
3759
- subtitle != null ? /* @__PURE__ */ jsx52("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: subtitle }) : null
1192
+ return /* @__PURE__ */ jsxs5("header", { className: cn("flex gap-3", actions != null ? "items-start justify-between" : "", className), children: [
1193
+ /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
1194
+ /* @__PURE__ */ jsx10("h4", { className: "font-semibold leading-snug text-ph-ink", children: title }),
1195
+ subtitle != null ? /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: subtitle }) : null
3760
1196
  ] }),
3761
- actions != null ? /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
1197
+ actions != null ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
3762
1198
  ] });
3763
1199
  }
3764
1200
 
3765
1201
  // src/components/dashboard/MiniTrendBars.tsx
3766
- import { jsx as jsx53 } from "react/jsx-runtime";
1202
+ import { jsx as jsx11 } from "react/jsx-runtime";
3767
1203
  var DEFAULT_SERIES_CYCLE = [1, 2, 3, 4, 5, 6, 7];
3768
1204
  function clampPct(n) {
3769
1205
  if (!Number.isFinite(n)) {
@@ -3781,7 +1217,7 @@ function MiniTrendBars({
3781
1217
  var _a;
3782
1218
  return (_a = DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length]) != null ? _a : 1;
3783
1219
  });
3784
- return /* @__PURE__ */ jsx53("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
1220
+ return /* @__PURE__ */ jsx11("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
3785
1221
  const pct = clampPct(raw);
3786
1222
  const series = resolveSeries(i, pct);
3787
1223
  const style = {
@@ -3789,12 +1225,12 @@ function MiniTrendBars({
3789
1225
  background: `var(--ph-data-${String(series)})`,
3790
1226
  minHeight: pct > 0 ? 4 : 0
3791
1227
  };
3792
- return /* @__PURE__ */ jsx53("div", { className: "min-h-0 flex-1 rounded-t-[3px]", style }, `bar-${String(i)}`);
1228
+ return /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1 rounded-t-[3px]", style }, `bar-${String(i)}`);
3793
1229
  }) });
3794
1230
  }
3795
1231
 
3796
1232
  // src/components/dashboard/InsightMiniCard.tsx
3797
- import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
1233
+ import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
3798
1234
  function InsightMiniCard(_a) {
3799
1235
  var _b = _a, {
3800
1236
  title,
@@ -3807,20 +1243,24 @@ function InsightMiniCard(_a) {
3807
1243
  "heights",
3808
1244
  "ribbonColour"
3809
1245
  ]);
3810
- return /* @__PURE__ */ jsxs41(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
3811
- /* @__PURE__ */ jsx54(InsightShellHeader, { title, subtitle }),
3812
- /* @__PURE__ */ jsx54(MiniTrendBars, { heights })
1246
+ return /* @__PURE__ */ jsxs6(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
1247
+ /* @__PURE__ */ jsx12(InsightShellHeader, { title, subtitle }),
1248
+ /* @__PURE__ */ jsx12(MiniTrendBars, { heights })
3813
1249
  ] }));
3814
1250
  }
3815
1251
  export {
3816
1252
  Accordion,
3817
1253
  Alert,
1254
+ AuthCard,
1255
+ AuthDivider,
1256
+ AuthLayout,
3818
1257
  Avatar,
3819
1258
  AvatarGroup,
3820
1259
  Badge,
3821
1260
  Breadcrumbs,
3822
1261
  Button,
3823
1262
  ButtonChrome,
1263
+ CANONICAL_ICONS,
3824
1264
  Calendar,
3825
1265
  Caption,
3826
1266
  Card,
@@ -3842,9 +1282,15 @@ export {
3842
1282
  DropdownButton,
3843
1283
  DropdownItem,
3844
1284
  DropdownMenu,
1285
+ DropdownRadioGroup,
1286
+ DropdownRadioItem,
3845
1287
  EmptyState,
3846
1288
  FileUpload,
1289
+ FilterBar,
3847
1290
  FilterChips,
1291
+ FilterControls,
1292
+ FilterMenu,
1293
+ FormField,
3848
1294
  H1,
3849
1295
  H2,
3850
1296
  H3,
@@ -3871,14 +1317,20 @@ export {
3871
1317
  IconChevronRight,
3872
1318
  IconClipboardEdit,
3873
1319
  IconClose,
1320
+ IconCodePreview,
3874
1321
  IconCohort,
1322
+ IconCommandCursor,
3875
1323
  IconCopy,
3876
1324
  IconCumulativeChart,
1325
+ IconDataReel,
3877
1326
  IconDatabase,
3878
1327
  IconDownload,
3879
1328
  IconEdit,
3880
1329
  IconErrorOutline,
1330
+ IconEventStream,
3881
1331
  IconExclamation,
1332
+ IconExperimentSplit,
1333
+ IconFeatureGate,
3882
1334
  IconFlag,
3883
1335
  IconFlare,
3884
1336
  IconFlask,
@@ -3886,19 +1338,24 @@ export {
3886
1338
  IconGridView,
3887
1339
  IconHandClick,
3888
1340
  IconHome,
1341
+ IconInfo,
1342
+ IconInsightBoard,
3889
1343
  IconLayers,
3890
1344
  IconListView,
3891
1345
  IconLogout,
3892
1346
  IconMail,
3893
1347
  IconMoon,
1348
+ IconOldWindow,
3894
1349
  IconPanelRight,
3895
1350
  IconPerson,
3896
1351
  IconPlayCircle,
3897
1352
  IconPlus,
3898
1353
  IconPremium,
3899
1354
  IconQueryEditor,
1355
+ IconQueryStack,
3900
1356
  IconRadar,
3901
1357
  IconRecording,
1358
+ IconReplayFrame,
3902
1359
  IconRobot,
3903
1360
  IconRocket,
3904
1361
  IconSave,
@@ -3909,6 +1366,7 @@ export {
3909
1366
  IconStar,
3910
1367
  IconSubArrowRight,
3911
1368
  IconSun,
1369
+ IconSurveyCard,
3912
1370
  IconSurveys,
3913
1371
  IconSync,
3914
1372
  IconTableChart,
@@ -3932,12 +1390,16 @@ export {
3932
1390
  Kbd,
3933
1391
  Label,
3934
1392
  Lead,
1393
+ Loader,
1394
+ LoadingState,
3935
1395
  MiniTrendBars,
3936
1396
  Modal,
3937
1397
  Mono,
1398
+ OLD_UI_ICONS,
3938
1399
  Overline,
3939
1400
  P,
3940
1401
  PH_ICONS,
1402
+ PH_ICON_ALIASES,
3941
1403
  Pagination,
3942
1404
  Panel,
3943
1405
  Progress,
@@ -3948,8 +1410,12 @@ export {
3948
1410
  SearchInput,
3949
1411
  SegmentedControl,
3950
1412
  Select,
1413
+ SettingsLayout,
1414
+ SettingsNav,
3951
1415
  ShowcaseWrapper,
1416
+ Skeleton,
3952
1417
  Small,
1418
+ SortMenu,
3953
1419
  Stat,
3954
1420
  Stepper,
3955
1421
  THEMES,