@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

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 (76) hide show
  1. package/dist/{chunk-54ZR4VL5.mjs → chunk-RZXHZWUB.mjs} +44 -17
  2. package/dist/{index-B5NOyoKS.d.mts → index-Od4pIP4F.d.mts} +7 -1
  3. package/dist/{index-B5NOyoKS.d.ts → index-Od4pIP4F.d.ts} +7 -1
  4. package/dist/index.d.mts +2 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +37 -10
  7. package/dist/index.mjs +1 -1
  8. package/dist/suite.d.mts +152 -41
  9. package/dist/suite.d.ts +152 -41
  10. package/dist/suite.js +1366 -671
  11. package/dist/suite.mjs +1304 -610
  12. package/dist/ui.d.mts +1 -1
  13. package/dist/ui.d.ts +1 -1
  14. package/dist/ui.js +37 -10
  15. package/dist/ui.mjs +1 -1
  16. package/package.json +7 -3
  17. package/src/components/ui/Modal.tsx +70 -26
  18. package/src/styles/suite-skin.css +284 -24
  19. package/src/suite/components/ai-panel.test.ts +20 -0
  20. package/src/suite/components/ai-panel.tsx +494 -103
  21. package/src/suite/components/suite-app-layout.tsx +48 -28
  22. package/src/suite/components/suite-layout.tsx +84 -40
  23. package/src/suite/components/suite-mobile-drawer.tsx +35 -22
  24. package/src/suite/components/suite-notification-bell.tsx +9 -3
  25. package/src/suite/components/suite-settings-layout.tsx +82 -0
  26. package/src/suite/components/suite-settings-mobile-nav.tsx +18 -17
  27. package/src/suite/components/suite-skeleton.tsx +3 -3
  28. package/src/suite/components/today-calibrating.tsx +11 -35
  29. package/src/suite/components/today-page-frame.tsx +19 -11
  30. package/src/suite/components/today-ui.tsx +276 -19
  31. package/src/suite/index.ts +41 -25
  32. package/src/suite/lib/apps.ts +32 -2
  33. package/src/suite/lib/use-sidebar-width.ts +114 -0
  34. package/src/components/sections/AccordionShowcase.tsx +0 -45
  35. package/src/components/sections/AlertShowcase.tsx +0 -40
  36. package/src/components/sections/AvatarShowcase.tsx +0 -80
  37. package/src/components/sections/BadgeShowcase.tsx +0 -65
  38. package/src/components/sections/ButtonShowcase.tsx +0 -308
  39. package/src/components/sections/CalendarShowcase.tsx +0 -35
  40. package/src/components/sections/CardShowcase.tsx +0 -159
  41. package/src/components/sections/CodeMockupShowcase.tsx +0 -56
  42. package/src/components/sections/ColorPalette.tsx +0 -117
  43. package/src/components/sections/CommandPaletteShowcase.tsx +0 -48
  44. package/src/components/sections/CountdownShowcase.tsx +0 -43
  45. package/src/components/sections/DiffShowcase.tsx +0 -70
  46. package/src/components/sections/DrawerShowcase.tsx +0 -97
  47. package/src/components/sections/DropdownShowcase.tsx +0 -98
  48. package/src/components/sections/EmptyStateShowcase.tsx +0 -50
  49. package/src/components/sections/FilterChipsShowcase.tsx +0 -98
  50. package/src/components/sections/FormShowcase.tsx +0 -127
  51. package/src/components/sections/HoverCardShowcase.tsx +0 -50
  52. package/src/components/sections/IconShowcase.tsx +0 -121
  53. package/src/components/sections/IndicatorShowcase.tsx +0 -52
  54. package/src/components/sections/KbdShowcase.tsx +0 -57
  55. package/src/components/sections/ModalShowcase.tsx +0 -211
  56. package/src/components/sections/NavigationShowcase.tsx +0 -199
  57. package/src/components/sections/NewComponentsShowcase.tsx +0 -1052
  58. package/src/components/sections/ProductLayoutsShowcase.tsx +0 -78
  59. package/src/components/sections/ProgressShowcase.tsx +0 -82
  60. package/src/components/sections/QuillChartShowcase.tsx +0 -92
  61. package/src/components/sections/QuillDashboardShowcase.tsx +0 -149
  62. package/src/components/sections/SegmentedControlShowcase.tsx +0 -49
  63. package/src/components/sections/SetupThemeShowcase.tsx +0 -262
  64. package/src/components/sections/SidebarShowcase.tsx +0 -152
  65. package/src/components/sections/StackShowcase.tsx +0 -33
  66. package/src/components/sections/StepperShowcase.tsx +0 -37
  67. package/src/components/sections/SuiteShowcase.tsx +0 -669
  68. package/src/components/sections/SwapShowcase.tsx +0 -99
  69. package/src/components/sections/TabShowcase.tsx +0 -84
  70. package/src/components/sections/TableShowcase.tsx +0 -142
  71. package/src/components/sections/TimelineShowcase.tsx +0 -83
  72. package/src/components/sections/ToastShowcase.tsx +0 -108
  73. package/src/components/sections/TooltipShowcase.tsx +0 -38
  74. package/src/components/sections/UtilityShowcase.tsx +0 -81
  75. package/src/styles/excel-themes.css +0 -110
  76. package/src/styles/lemon-primitives.css +0 -550
package/src/components/sections/NavigationShowcase.tsx DELETED
@@ -1,199 +0,0 @@
1
- "use client";
2
-
3
- import { IconBell, IconPerson } from "@/components/icons";
4
- import { Button, DropdownItem, DropdownMenu, SearchInput, ShowcaseWrapper } from "@/components/ui";
5
-
6
- export default function NavigationShowcase() {
7
- const code = `import { IconBell, IconPerson } from "the-old-ui";
8
- import { Button, DropdownItem, DropdownMenu, SearchInput } from "the-old-ui";
9
-
10
- <div className="space-y-8">
11
- <div className="ph-panel">
12
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
13
- <div className="ph-navbar-demo justify-between gap-4">
14
- <span className="text-lg font-bold text-ph-brand">posthog</span>
15
- <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
16
- <SearchInput
17
- label="Jump to"
18
- hideLabel
19
- shortcut="Cmd K"
20
- placeholder="Jump to…"
21
- density="compact"
22
- />
23
- <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
24
- <IconBell className="h-5 w-5 text-ph-mutedtext" />
25
- <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
26
- </Button>
27
- <DropdownMenu
28
- align="end"
29
- aria-label="Account menu"
30
- trigger={
31
- <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
32
- <IconPerson className="h-5 w-5" aria-hidden />
33
- </span>
34
- }
35
- >
36
- <DropdownItem>Personal API keys</DropdownItem>
37
- <DropdownItem>Organisation settings</DropdownItem>
38
- </DropdownMenu>
39
- </div>
40
- </div>
41
- </div>
42
-
43
- <div className="ph-panel flex gap-10">
44
- <div>
45
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
46
- <ul className="w-52 space-y-1 text-sm font-medium">
47
- <li>
48
- <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
49
- Home
50
- </a>
51
- </li>
52
- <li>
53
- <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
54
- Data pipeline
55
- </a>
56
- </li>
57
- <li>
58
- <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
59
- <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
60
- <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
61
- <li>
62
- <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
63
- Sources
64
- </a>
65
- </li>
66
- <li>
67
- <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
68
- Views
69
- </a>
70
- </li>
71
- </ul>
72
- </details>
73
- </li>
74
- </ul>
75
- </div>
76
-
77
- <div className="flex-1">
78
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
79
- <ol className="ph-steps">
80
- <li className="flex flex-col items-center gap-2">
81
- <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
82
- 1
83
- </span>
84
- <span>Install snippet</span>
85
- </li>
86
- <li className="flex flex-col items-center gap-2 opacity-60">
87
- <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
88
- 2
89
- </span>
90
- <span>Send test event</span>
91
- </li>
92
- <li className="flex flex-col items-center gap-2 opacity-60">
93
- <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
94
- 3
95
- </span>
96
- <span>Invite team</span>
97
- </li>
98
- </ol>
99
- </div>
100
- </div>
101
- </div>`;
102
-
103
- return (
104
- <ShowcaseWrapper title="Navigation chrome" code={code} filename="NavigationExample.tsx">
105
- <div className="space-y-8">
106
- <div className="ph-panel">
107
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
108
- <div className="ph-navbar-demo justify-between gap-4">
109
- <span className="text-lg font-bold text-ph-brand">posthog</span>
110
- <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
111
- <SearchInput
112
- label="Jump to"
113
- hideLabel
114
- shortcut="Cmd K"
115
- placeholder="Jump to…"
116
- density="compact"
117
- />
118
- <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
119
- <IconBell className="h-5 w-5 text-ph-mutedtext" />
120
- <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
121
- </Button>
122
- <DropdownMenu
123
- align="end"
124
- aria-label="Account menu"
125
- trigger={
126
- <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
127
- <IconPerson className="h-5 w-5" aria-hidden />
128
- </span>
129
- }
130
- >
131
- <DropdownItem>Personal API keys</DropdownItem>
132
- <DropdownItem>Organisation settings</DropdownItem>
133
- </DropdownMenu>
134
- </div>
135
- </div>
136
- </div>
137
-
138
- <div className="ph-panel flex gap-10">
139
- <div>
140
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
141
- <ul className="w-52 space-y-1 text-sm font-medium">
142
- <li>
143
- <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
144
- Home
145
- </a>
146
- </li>
147
- <li>
148
- <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
149
- Data pipeline
150
- </a>
151
- </li>
152
- <li>
153
- <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
154
- <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
155
- <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
156
- <li>
157
- <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
158
- Sources
159
- </a>
160
- </li>
161
- <li>
162
- <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
163
- Views
164
- </a>
165
- </li>
166
- </ul>
167
- </details>
168
- </li>
169
- </ul>
170
- </div>
171
-
172
- <div className="flex-1">
173
- <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
174
- <ol className="ph-steps">
175
- <li className="flex flex-col items-center gap-2">
176
- <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
177
- 1
178
- </span>
179
- <span>Install snippet</span>
180
- </li>
181
- <li className="flex flex-col items-center gap-2 opacity-60">
182
- <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
183
- 2
184
- </span>
185
- <span>Send test event</span>
186
- </li>
187
- <li className="flex flex-col items-center gap-2 opacity-60">
188
- <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
189
- 3
190
- </span>
191
- <span>Invite team</span>
192
- </li>
193
- </ol>
194
- </div>
195
- </div>
196
- </div>
197
- </ShowcaseWrapper>
198
- );
199
- }