@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

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 (59) hide show
  1. package/README.md +47 -34
  2. package/dist/{index-Od4pIP4F.d.mts → Chip-C5hRFAhe.d.mts} +10 -606
  3. package/dist/{index-Od4pIP4F.d.ts → Chip-C5hRFAhe.d.ts} +10 -606
  4. package/dist/{chunk-G53YLHVE.mjs → chunk-E5ZBQYEX.mjs} +59 -9
  5. package/dist/{chunk-RZXHZWUB.mjs → chunk-SBBKXV35.mjs} +174 -222
  6. package/dist/index.d.mts +4 -80
  7. package/dist/index.d.ts +4 -80
  8. package/dist/index.js +562 -3746
  9. package/dist/index.mjs +3 -765
  10. package/dist/suite.d.mts +56 -25
  11. package/dist/suite.d.ts +56 -25
  12. package/dist/suite.js +248 -107
  13. package/dist/suite.mjs +217 -105
  14. package/dist/ui.d.mts +608 -2
  15. package/dist/ui.d.ts +608 -2
  16. package/dist/ui.js +232 -230
  17. package/dist/ui.mjs +2 -2
  18. package/package.json +2 -6
  19. package/scripts/install-theme-dev.sh +60 -0
  20. package/scripts/sync-posthog-icons.mjs +75 -0
  21. package/src/app/globals.css +1 -0
  22. package/src/components/ui/Chip.tsx +36 -18
  23. package/src/components/ui/CommandPalette.test.tsx +41 -0
  24. package/src/components/ui/CommandPalette.tsx +58 -9
  25. package/src/components/ui/DropdownMenu.tsx +50 -11
  26. package/src/components/ui/SegmentedControl.tsx +2 -1
  27. package/src/components/ui/SettingsLayout.tsx +19 -5
  28. package/src/components/ui/ThemeSwitcher.tsx +12 -3
  29. package/src/components/ui/interaction-primitives.test.tsx +52 -0
  30. package/src/styles/suite-skin.css +53 -1
  31. package/src/styles/themes.css +445 -1656
  32. package/src/suite/components/app-switcher.tsx +32 -25
  33. package/src/suite/components/command-palette-host.tsx +20 -8
  34. package/src/suite/components/suite-app-layout.tsx +31 -10
  35. package/src/suite/components/suite-bottom-nav.tsx +23 -18
  36. package/src/suite/components/suite-layout.test.tsx +44 -0
  37. package/src/suite/components/suite-layout.tsx +3 -3
  38. package/src/suite/components/suite-mobile-drawer.tsx +12 -0
  39. package/src/suite/components/suite-mobile-header.tsx +15 -9
  40. package/src/suite/components/suite-notification-bell.tsx +23 -11
  41. package/src/suite/components/suite-settings-mobile-nav.tsx +2 -0
  42. package/src/suite/components/suite-sidebar.tsx +54 -43
  43. package/src/suite/components/suite-user-menu.tsx +54 -26
  44. package/src/suite/components/today-page-frame.tsx +1 -1
  45. package/src/suite/icons/app-accents.ts +38 -43
  46. package/src/suite/icons/glyph-parts.tsx +16 -9
  47. package/src/suite/icons/glyphs.ts +130 -99
  48. package/src/suite/lib/apps.ts +1 -1
  49. package/src/suite/lib/injected.ts +12 -11
  50. package/src/suite/lib/use-sidebar-width.ts +23 -8
  51. package/src/components/charts/index.ts +0 -9
  52. package/src/components/charts/quill/BarChart.tsx +0 -85
  53. package/src/components/charts/quill/FunnelChart.tsx +0 -49
  54. package/src/components/charts/quill/InsightShell.tsx +0 -27
  55. package/src/components/charts/quill/MetricCard.tsx +0 -44
  56. package/src/components/charts/quill/PieChart.tsx +0 -81
  57. package/src/components/charts/quill/Sparkline.tsx +0 -57
  58. package/src/components/charts/quill/TimeSeriesLineChart.tsx +0 -62
  59. package/src/components/charts/quill/index.ts +0 -9
package/README.md CHANGED
@@ -22,7 +22,11 @@ Import the library CSS once at your app root. This gives you the theme variables
22
22
  // app/layout.tsx or pages/_app.tsx
23
23
  import "@xenide-io/the-old-ui-theme/styles.css";
24
24
 
25
- export default function RootLayout({ children }: { children: React.ReactNode }) {
25
+ export default function RootLayout({
26
+ children,
27
+ }: {
28
+ children: React.ReactNode;
29
+ }) {
26
30
  return (
27
31
  <html data-theme="hedgehog-light">
28
32
  <body>{children}</body>
@@ -81,26 +85,40 @@ import { Alert, Badge, Button, Card, Input, H1, H2, P } from "@xenide-io/the-old
81
85
 
82
86
  ### Exported React Components
83
87
 
84
- | Area | Components |
85
- | ---- | ---------- |
86
- | Actions | `Button`, `DropdownButton`, `DropdownMenu`, `DropdownItem` |
87
- | Feedback | `Alert`, `Badge`, `Toast`, `ToastStack`, `EmptyState`, `Progress` demos |
88
- | Inputs | `FormField`, `Input`, `Select`, `Textarea`, `Checkbox`, `Radio`, `Toggle`, `Range`, `Rating`, `FileUpload`, `SearchInput`, `SearchGroup` |
89
- | Layout | `Card`, `Modal`, `Drawer`, `Panel`, `Accordion`, `HoverCard` |
90
- | Navigation | `Tabs`, `Breadcrumbs`, `Pagination`, `SegmentedControl`, `Stepper`, `CommandPalette`, `FilterChips` |
91
- | Data | `Table`, `Stat`, chart components, dashboard shell components |
92
- | Typography | `H1`, `H2`, `H3`, `H4`, `H5`, `P`, `Small`, `Caption`, `Lead`, `Mono`, `Overline`, `Display` |
93
- | Foundation | icons, theme switcher, code block, color tokens |
88
+ | Area | Components |
89
+ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
90
+ | Actions | `Button`, `DropdownButton`, `DropdownMenu`, `DropdownItem` |
91
+ | Feedback | `Alert`, `Badge`, `Toast`, `ToastStack`, `EmptyState`, `Progress` demos |
92
+ | Inputs | `FormField`, `Input`, `Select`, `Textarea`, `Checkbox`, `Radio`, `Toggle`, `Range`, `Rating`, `FileUpload`, `SearchInput`, `SearchGroup` |
93
+ | Layout | `Card`, `Modal`, `Drawer`, `Panel`, `Accordion`, `HoverCard` |
94
+ | Navigation | `Tabs`, `Breadcrumbs`, `Pagination`, `SegmentedControl`, `Stepper`, `CommandPalette`, `FilterChips` |
95
+ | Data | `Table`, `Stat`, chart components, dashboard shell components |
96
+ | Typography | `H1`, `H2`, `H3`, `H4`, `H5`, `P`, `Small`, `Caption`, `Lead`, `Mono`, `Overline`, `Display` |
97
+ | Foundation | icons, theme switcher, code block, color tokens |
94
98
 
95
99
  Some showcase sections are foundation or pattern demos rather than standalone components, such as color tokens, icon inventory, terminal capture, diff slider, and chart/dashboard compositions.
96
100
 
101
+ ### Focused demos
102
+
103
+ The rendered catalogue is split into focused routes so each page mounts only
104
+ the component family it demonstrates:
105
+
106
+ | Route | Focus |
107
+ | ------------------- | -------------------------------- |
108
+ | `/demo` | Route picker |
109
+ | `/demo/foundations` | Tokens, themes, icons, and setup |
110
+ | `/demo/components` | Primitive components |
111
+ | `/demo/patterns` | Composed UI flows |
112
+ | `/demo/charts` | Charts and data surfaces |
113
+ | `/demo/suite` | Shared product chrome |
114
+
97
115
  ## Layers (take what you need)
98
116
 
99
- | Tier | What you get | Dependencies |
100
- | ---- | ------------ | ------------ |
101
- | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
102
- | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, Lemon radii, shadows | `tailwindcss` |
103
- | **App shell** | `src/app/globals.css` — typography, primitives, layouts | Tokens + Tailwind |
117
+ | Tier | What you get | Dependencies |
118
+ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
119
+ | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
120
+ | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, Lemon radii, shadows | `tailwindcss` |
121
+ | **App shell** | `src/app/globals.css` — typography, primitives, layouts | Tokens + Tailwind |
104
122
  | **Charts (optional)** | Token-driven Chart.js demos (`register-chartjs` only registers controllers you use); hog-charts-**lite** canvas trend reads the same `--ph-data-*` palette | `chart.js`, `react-chartjs-2`; trend line also `d3-scale` |
105
123
 
106
124
  Chart.js supports doughnut, polar area, pie, radar, bubble, etc. — this repo registers **Bar · Doughnut · Polar area** only to keep bundles small; add controllers in `src/lib/chart/register-chartjs.ts` when you need more types.
@@ -113,20 +131,15 @@ All theme colors live in `src/styles/themes.css`. The master registry of IDs, di
113
131
 
114
132
  ### Built-in themes
115
133
 
116
- | Group | Light | Dark |
117
- | ----- | ----- | ---- |
118
- | **HedgeHog** | `hedgehog-light` | `hedgehog-dark` |
119
- | **Productivity** | `sheets` | `sheets-dark` |
120
- | **Productivity** | `note` | `note-dark` |
121
- | **Productivity** | `presentation` | `presentation-dark` |
122
- | **Social** | `socials` | `socials-dark` |
123
- | **Chats** | `chats-light` | `chats-dark` |
124
- | **Catppuccin** | `catppuccin-light` | `catppuccin-dark` |
125
- | **Xenide** | `xenide-light` | `xenide-dark` |
126
- | **GitHub** | `github-light` | `github-dark` |
127
- | **Rosé Pine** | `rosepine-light` | `rosepine-dark` |
128
- | **Fun** | `turtletime` | `turtletime-dark` |
129
- | **Fun** | `bikini-bottom` | `bikini-bottom-dark` |
134
+ | Group | Light | Dark |
135
+ | --------------- | ---------------- | ----------------- |
136
+ | **HedgeHog** | `hedgehog-light` | `hedgehog-dark` |
137
+ | **Note** | `note` | `note-dark` |
138
+ | **TurtleTime** | `turtletime` | `turtletime-dark` |
139
+ | **Rosé Pine** | `rosepine-light` | `rosepine-dark` |
140
+ | **Kraken** | `kraken-light` | `kraken-dark` |
141
+ | **Tokyo Night** | `deepsea-light` | `deepsea-dark` |
142
+ | **Malibu** | `malibu-light` | `malibu-dark` |
130
143
 
131
144
  ### Programmatic usage
132
145
 
@@ -134,10 +147,10 @@ All theme colors live in `src/styles/themes.css`. The master registry of IDs, di
134
147
  import { persistTheme, readStoredTheme } from "@xenide-io/the-old-ui-theme";
135
148
 
136
149
  // Switch theme — persists to localStorage and updates html[data-theme]
137
- persistTheme("sheets");
150
+ persistTheme("malibu-dark");
138
151
 
139
152
  // Read current theme
140
- const themeId = readStoredTheme(); // "hedgehog-light" | "sheets" | ...
153
+ const themeId = readStoredTheme(); // one of the built-in ThemeId values
141
154
  ```
142
155
 
143
156
  ### Theme switcher setup
@@ -165,7 +178,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
165
178
  If you do not want the built-in switcher, you can set the attribute directly.
166
179
 
167
180
  ```tsx
168
- document.documentElement.setAttribute("data-theme", "chats-dark");
181
+ document.documentElement.setAttribute("data-theme", "malibu-dark");
169
182
  ```
170
183
 
171
184
  For persisted switching, use the helper.
@@ -173,7 +186,7 @@ For persisted switching, use the helper.
173
186
  ```tsx
174
187
  import { persistTheme } from "@xenide-io/the-old-ui-theme";
175
188
 
176
- persistTheme("presentation");
189
+ persistTheme("kraken-dark");
177
190
  ```
178
191
 
179
192
  ### Custom themes