tembro 5.0.0 → 6.0.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 (103) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/charts/progress-circle.d.ts +12 -3
  3. package/dist/components/data-table/data-table.d.ts +2 -2
  4. package/dist/components/feedback/index.d.ts +0 -2
  5. package/dist/components/layout/section.d.ts +1 -8
  6. package/dist/components/ui/number-field/index.cjs +1 -0
  7. package/dist/components/ui/number-field/index.d.ts +18 -0
  8. package/dist/components/ui/number-field/index.js +1 -0
  9. package/dist/components/ui/toggle-group/index.cjs +1 -0
  10. package/dist/components/ui/toggle-group/index.d.ts +13 -0
  11. package/dist/components/ui/toggle-group/index.js +1 -0
  12. package/dist/components/ui/toolbar/index.cjs +1 -0
  13. package/dist/components/ui/toolbar/index.d.ts +14 -0
  14. package/dist/components/ui/toolbar/index.js +1 -0
  15. package/dist/index.d.ts +3 -0
  16. package/dist/src/components/charts/progress-circle.cjs +1 -1
  17. package/dist/src/components/charts/progress-circle.js +57 -3
  18. package/dist/src/components/data-table/data-table.cjs +1 -1
  19. package/dist/src/components/data-table/data-table.js +102 -100
  20. package/dist/src/components/feedback/index.cjs +1 -1
  21. package/dist/src/components/feedback/index.js +2 -4
  22. package/dist/src/components/layout/index.cjs +1 -1
  23. package/dist/src/components/layout/index.js +3 -3
  24. package/dist/src/components/layout/public.cjs +1 -1
  25. package/dist/src/components/layout/public.js +3 -3
  26. package/dist/src/components/layout/section.cjs +1 -1
  27. package/dist/src/components/layout/section.js +2 -26
  28. package/dist/src/components/ui/number-field/index.cjs +1 -0
  29. package/dist/src/components/ui/number-field/index.js +73 -0
  30. package/dist/src/components/ui/toggle-group/index.cjs +1 -0
  31. package/dist/src/components/ui/toggle-group/index.js +32 -0
  32. package/dist/src/components/ui/toolbar/index.cjs +1 -0
  33. package/dist/src/components/ui/toolbar/index.js +50 -0
  34. package/dist/src/index.cjs +1 -1
  35. package/dist/src/index.js +92 -91
  36. package/dist/src/public-component-surface.cjs +1 -1
  37. package/dist/src/public-component-surface.js +15 -0
  38. package/package.json +1 -1
  39. package/packages/cli/dist/index.cjs +63 -63
  40. package/packages/cli/vendor/src/components/charts/progress-circle.tsx +78 -3
  41. package/packages/cli/vendor/src/components/data-table/data-table.tsx +4 -4
  42. package/packages/cli/vendor/src/components/feedback/index.ts +0 -2
  43. package/packages/cli/vendor/src/components/layout/section.tsx +1 -28
  44. package/packages/cli/vendor/src/components/ui/number-field/index.tsx +89 -0
  45. package/packages/cli/vendor/src/components/ui/toggle-group/index.tsx +72 -0
  46. package/packages/cli/vendor/src/components/ui/toolbar/index.tsx +67 -0
  47. package/packages/cli/vendor/src/index.ts +6 -3
  48. package/packages/cli/vendor/src/public-component-surface.ts +3 -0
  49. package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts +4 -2
  50. package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx +2 -2
  51. package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx +1 -1
  52. package/packages/cli/vendor/templates/showcase/src/showcase/sections/ComponentLivePreview.tsx +2 -2
  53. package/packages/cli/vendor/templates/showcase/src/showcase/sections/FormsSection.tsx +2 -2
  54. package/packages/cli/vendor/templates/styles/globals.css +5 -5
  55. package/registry.json +962 -431
  56. package/dist/components/charts/progress-ring.cjs +0 -1
  57. package/dist/components/charts/progress-ring.d.ts +0 -13
  58. package/dist/components/charts/progress-ring.js +0 -1
  59. package/dist/components/feedback/loading-state.cjs +0 -1
  60. package/dist/components/feedback/loading-state.d.ts +0 -9
  61. package/dist/components/feedback/loading-state.js +0 -1
  62. package/dist/components/feedback/page-state.cjs +0 -1
  63. package/dist/components/feedback/page-state.d.ts +0 -18
  64. package/dist/components/feedback/page-state.js +0 -1
  65. package/dist/components/layout/page-container.cjs +0 -1
  66. package/dist/components/layout/page-container.d.ts +0 -7
  67. package/dist/components/layout/page-container.js +0 -1
  68. package/dist/components/layout/page-header.cjs +0 -1
  69. package/dist/components/layout/page-header.d.ts +0 -23
  70. package/dist/components/layout/page-header.js +0 -1
  71. package/dist/components/layout/section-header.cjs +0 -1
  72. package/dist/components/layout/section-header.d.ts +0 -14
  73. package/dist/components/layout/section-header.js +0 -1
  74. package/dist/components/layout/sidebar-nav.cjs +0 -1
  75. package/dist/components/layout/sidebar-nav.d.ts +0 -37
  76. package/dist/components/layout/sidebar-nav.js +0 -1
  77. package/dist/components/layout/sticky-footer-bar.cjs +0 -1
  78. package/dist/components/layout/sticky-footer-bar.d.ts +0 -7
  79. package/dist/components/layout/sticky-footer-bar.js +0 -1
  80. package/dist/src/components/charts/progress-ring.cjs +0 -1
  81. package/dist/src/components/charts/progress-ring.js +0 -57
  82. package/dist/src/components/feedback/loading-state.cjs +0 -1
  83. package/dist/src/components/feedback/loading-state.js +0 -15
  84. package/dist/src/components/feedback/page-state.cjs +0 -1
  85. package/dist/src/components/feedback/page-state.js +0 -28
  86. package/dist/src/components/layout/page-container.cjs +0 -1
  87. package/dist/src/components/layout/page-container.js +0 -21
  88. package/dist/src/components/layout/page-header.cjs +0 -1
  89. package/dist/src/components/layout/page-header.js +0 -92
  90. package/dist/src/components/layout/section-header.cjs +0 -1
  91. package/dist/src/components/layout/section-header.js +0 -44
  92. package/dist/src/components/layout/sidebar-nav.cjs +0 -1
  93. package/dist/src/components/layout/sidebar-nav.js +0 -220
  94. package/dist/src/components/layout/sticky-footer-bar.cjs +0 -1
  95. package/dist/src/components/layout/sticky-footer-bar.js +0 -20
  96. package/packages/cli/vendor/src/components/charts/progress-ring.tsx +0 -56
  97. package/packages/cli/vendor/src/components/feedback/loading-state.tsx +0 -15
  98. package/packages/cli/vendor/src/components/feedback/page-state.tsx +0 -29
  99. package/packages/cli/vendor/src/components/layout/page-container.tsx +0 -30
  100. package/packages/cli/vendor/src/components/layout/page-header.tsx +0 -104
  101. package/packages/cli/vendor/src/components/layout/section-header.tsx +0 -56
  102. package/packages/cli/vendor/src/components/layout/sidebar-nav.tsx +0 -377
  103. package/packages/cli/vendor/src/components/layout/sticky-footer-bar.tsx +0 -23
@@ -1,377 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
-
5
- import { Badge } from "@/components/ui/badge"
6
- import { Tooltip } from "@/components/ui/tooltip"
7
- import { cn } from "@/lib/utils"
8
- import { ControllableDetails } from "./controllable-details"
9
-
10
- export type SidebarNavItem = {
11
- key: string
12
- label: React.ReactNode
13
- icon?: React.ReactNode
14
- badge?: React.ReactNode
15
- href?: string
16
- items?: SidebarNavItem[]
17
- active?: boolean
18
- current?: React.AriaAttributes["aria-current"]
19
- disabled?: boolean
20
- hidden?: boolean
21
- sectionLabel?: React.ReactNode
22
- defaultExpanded?: boolean
23
- expanded?: boolean
24
- onExpandedChange?: (expanded: boolean) => void
25
- tooltip?: React.ReactNode
26
- onSelect?: () => void
27
- }
28
-
29
- export type SidebarNavProps = React.ComponentProps<"nav"> & {
30
- items: SidebarNavItem[]
31
- collapsed?: boolean
32
- scrollable?: boolean
33
- tooltipOnCollapsed?: boolean
34
- showSectionLabels?: boolean
35
- itemSize?: "sm" | "md" | "lg"
36
- activeIndicator?: "none" | "bar" | "pill"
37
- itemClassName?: string
38
- activeItemClassName?: string
39
- renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
40
- renderLink?: (props: React.ComponentProps<"a"> & { item: SidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
41
- }
42
-
43
- function hasVisibleChildren(item: SidebarNavItem) {
44
- return item.items?.some((child) => !child.hidden) ?? false
45
- }
46
-
47
- function isActiveItem(item: SidebarNavItem): boolean {
48
- if (item.active) return true
49
- return item.items?.some((child) => isActiveItem(child)) ?? false
50
- }
51
-
52
- function SidebarLeaf({
53
- item,
54
- collapsed,
55
- depth,
56
- itemSize,
57
- activeIndicator,
58
- itemClassName,
59
- activeItemClassName,
60
- renderLink,
61
- }: {
62
- item: SidebarNavItem
63
- collapsed: boolean
64
- depth: number
65
- itemSize: NonNullable<SidebarNavProps["itemSize"]>
66
- activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
67
- itemClassName?: string
68
- activeItemClassName?: string
69
- renderLink?: SidebarNavProps["renderLink"]
70
- }) {
71
- const currentValue: React.AriaAttributes["aria-current"] = item.current ?? (item.active ? "page" : undefined)
72
- const content = (
73
- <>
74
- {item.icon && <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>}
75
- {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
76
- {!collapsed && item.badge && (
77
- <Badge variant="secondary" className="ml-auto h-5 shrink-0 px-1.5">
78
- {item.badge}
79
- </Badge>
80
- )}
81
- </>
82
- )
83
-
84
- const commonClassName = cn(
85
- "group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
86
- collapsed && "justify-center px-0",
87
- depth > 0 && !collapsed && "pl-3",
88
- itemClassName,
89
- item.active && activeItemClassName
90
- )
91
-
92
- const wrapCollapsed = (node: React.ReactNode) =>
93
- collapsed ? (
94
- <Tooltip content={item.tooltip ?? item.label} side="right">
95
- <span className="block">{node}</span>
96
- </Tooltip>
97
- ) : (
98
- node
99
- )
100
-
101
- const internal = item.href && item.href.startsWith("/")
102
-
103
- if (internal) {
104
- if (renderLink) {
105
- return wrapCollapsed(
106
- renderLink({
107
- item,
108
- href: item.href,
109
- "data-slot": "sidebar-nav-item",
110
- "data-depth": String(depth),
111
- "data-active": item.active || undefined,
112
- "data-disabled": item.disabled || undefined,
113
- "data-size": itemSize,
114
- "data-active-indicator": activeIndicator,
115
- "aria-current": currentValue,
116
- className: commonClassName,
117
- onClick: (event) => {
118
- if (item.disabled) {
119
- event.preventDefault()
120
- return
121
- }
122
- item.onSelect?.()
123
- },
124
- children: content,
125
- })
126
- )
127
- }
128
-
129
- return wrapCollapsed(
130
- <a
131
- href={item.href}
132
- data-slot="sidebar-nav-item"
133
- data-depth={depth}
134
- data-active={item.active || undefined}
135
- data-disabled={item.disabled || undefined}
136
- data-size={itemSize}
137
- data-active-indicator={activeIndicator}
138
- aria-current={currentValue}
139
- className={commonClassName}
140
- onClick={(event) => {
141
- if (item.disabled) {
142
- event.preventDefault()
143
- return
144
- }
145
- item.onSelect?.()
146
- }}
147
- >
148
- {content}
149
- </a>
150
- )
151
- }
152
-
153
- if (item.href) {
154
- return wrapCollapsed(
155
- <button
156
- type="button"
157
- data-slot="sidebar-nav-item"
158
- data-depth={depth}
159
- data-active={item.active || undefined}
160
- data-disabled={item.disabled || undefined}
161
- data-size={itemSize}
162
- data-active-indicator={activeIndicator}
163
- aria-current={currentValue}
164
- className={cn("w-full text-left", commonClassName)}
165
- onClick={() => {
166
- if (item.disabled) return
167
- const href = item.href
168
- if (!href) return
169
- item.onSelect?.()
170
- if (href.startsWith("http")) {
171
- window.open(href, "_blank", "noopener,noreferrer")
172
- return
173
- }
174
- window.location.assign(href)
175
- }}
176
- >
177
- {content}
178
- </button>
179
- )
180
- }
181
-
182
- return wrapCollapsed(
183
- <button
184
- type="button"
185
- data-slot="sidebar-nav-item"
186
- data-depth={depth}
187
- data-active={item.active || undefined}
188
- data-disabled={item.disabled || undefined}
189
- data-size={itemSize}
190
- data-active-indicator={activeIndicator}
191
- aria-current={currentValue}
192
- disabled={item.disabled}
193
- className={cn("w-full text-left", commonClassName)}
194
- onClick={item.onSelect}
195
- >
196
- {content}
197
- </button>
198
- )
199
- }
200
-
201
- function SidebarTree({
202
- items,
203
- collapsed,
204
- depth,
205
- showSectionLabels,
206
- itemSize,
207
- activeIndicator,
208
- itemClassName,
209
- activeItemClassName,
210
- renderItem,
211
- renderLink,
212
- }: {
213
- items: SidebarNavItem[]
214
- collapsed: boolean
215
- depth: number
216
- showSectionLabels: boolean
217
- itemSize: NonNullable<SidebarNavProps["itemSize"]>
218
- activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
219
- itemClassName?: string
220
- activeItemClassName?: string
221
- renderItem?: SidebarNavProps["renderItem"]
222
- renderLink?: SidebarNavProps["renderLink"]
223
- }) {
224
- return items.map((item) => {
225
- if (item.hidden) return null
226
-
227
- const showSectionLabel = showSectionLabels && !collapsed && depth === 0 && item.sectionLabel
228
- const hasChildren = hasVisibleChildren(item)
229
-
230
- if (!hasChildren) {
231
- const element = (
232
- <SidebarLeaf
233
- item={item}
234
- collapsed={collapsed}
235
- depth={depth}
236
- itemSize={itemSize}
237
- activeIndicator={activeIndicator}
238
- itemClassName={itemClassName}
239
- activeItemClassName={activeItemClassName}
240
- renderLink={renderLink}
241
- />
242
- )
243
-
244
- return (
245
- <React.Fragment key={item.key}>
246
- {showSectionLabel ? (
247
- <div
248
- data-slot="sidebar-nav-group-label"
249
- className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
250
- >
251
- {item.sectionLabel}
252
- </div>
253
- ) : null}
254
- {renderItem ? renderItem(item, element) : element}
255
- </React.Fragment>
256
- )
257
- }
258
-
259
- const isExpanded = item.defaultExpanded ?? isActiveItem(item)
260
- const trigger = (
261
- <summary
262
- data-slot="sidebar-nav-group-trigger"
263
- className={cn(
264
- "flex min-h-9 list-none items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)]",
265
- collapsed ? "justify-center px-0" : "px-2"
266
- )}
267
- >
268
- {item.icon ? (
269
- collapsed ? (
270
- <Tooltip content={item.tooltip ?? item.label} side="right">
271
- <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
272
- </Tooltip>
273
- ) : (
274
- <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
275
- )
276
- ) : null}
277
- {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
278
- {!collapsed && item.badge ? (
279
- <Badge variant="secondary" className="h-5 shrink-0 px-1.5">
280
- {item.badge}
281
- </Badge>
282
- ) : null}
283
- {!collapsed && (
284
- <span
285
- data-slot="sidebar-nav-group-chevron"
286
- className="ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90"
287
- >
288
-
289
- </span>
290
- )}
291
- </summary>
292
- )
293
-
294
- const groupElement = (
295
- <div data-slot="sidebar-nav-group" data-depth={depth}>
296
- {showSectionLabel ? (
297
- <div
298
- data-slot="sidebar-nav-group-label"
299
- className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
300
- >
301
- {item.sectionLabel}
302
- </div>
303
- ) : null}
304
- <ControllableDetails
305
- data-slot="sidebar-nav-group-details"
306
- open={item.expanded}
307
- defaultOpen={isExpanded}
308
- className="group/sidebar-nav-details"
309
- onOpenChange={item.onExpandedChange}
310
- >
311
- {trigger}
312
- <div
313
- data-slot="sidebar-nav-group-content"
314
- className={cn("mt-1 grid gap-1", !collapsed && "ml-3 border-l border-border/55 pl-2")}
315
- >
316
- <SidebarTree
317
- items={item.items ?? []}
318
- collapsed={collapsed}
319
- depth={depth + 1}
320
- showSectionLabels={showSectionLabels}
321
- itemSize={itemSize}
322
- activeIndicator={activeIndicator}
323
- itemClassName={itemClassName}
324
- activeItemClassName={activeItemClassName}
325
- renderItem={renderItem}
326
- renderLink={renderLink}
327
- />
328
- </div>
329
- </ControllableDetails>
330
- </div>
331
- )
332
-
333
- return renderItem ? <React.Fragment key={item.key}>{renderItem(item, groupElement)}</React.Fragment> : <React.Fragment key={item.key}>{groupElement}</React.Fragment>
334
- })
335
- }
336
-
337
- function SidebarNav({
338
- className,
339
- items,
340
- collapsed = false,
341
- scrollable = true,
342
- showSectionLabels = true,
343
- itemSize = "md",
344
- activeIndicator = "bar",
345
- itemClassName,
346
- activeItemClassName,
347
- renderItem,
348
- renderLink,
349
- ...props
350
- }: SidebarNavProps) {
351
- const visibleItems = items.filter((item) => !item.hidden)
352
-
353
- return (
354
- <nav
355
- aria-label="Primary navigation"
356
- data-slot="sidebar-nav"
357
- data-collapsed={collapsed || undefined}
358
- className={cn("grid min-h-0 gap-1", scrollable ? "overflow-y-auto overscroll-contain" : null, className)}
359
- {...props}
360
- >
361
- <SidebarTree
362
- items={visibleItems}
363
- collapsed={collapsed}
364
- depth={0}
365
- showSectionLabels={showSectionLabels}
366
- itemSize={itemSize}
367
- activeIndicator={activeIndicator}
368
- itemClassName={itemClassName}
369
- activeItemClassName={activeItemClassName}
370
- renderItem={renderItem}
371
- renderLink={renderLink}
372
- />
373
- </nav>
374
- )
375
- }
376
-
377
- export { SidebarNav }
@@ -1,23 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "@/lib/utils"
4
-
5
- export type StickyFooterBarProps = React.ComponentProps<"div"> & {
6
- start?: React.ReactNode
7
- end?: React.ReactNode
8
- }
9
-
10
- function StickyFooterBar({ start, end, className, children, ...props }: StickyFooterBarProps) {
11
- return (
12
- <div
13
- data-slot="sticky-footer-bar"
14
- className={cn("sticky bottom-0 z-30 flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-3 shadow-lg", className)}
15
- {...props}
16
- >
17
- <div className="min-w-0 flex-1">{start ?? children}</div>
18
- {end && <div className="flex shrink-0 items-center gap-2">{end}</div>}
19
- </div>
20
- )
21
- }
22
-
23
- export { StickyFooterBar }