tembro 5.0.0 → 6.0.1
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.
- package/CHANGELOG.md +20 -0
- package/dist/components/charts/progress-circle.d.ts +12 -3
- package/dist/components/data-table/data-table.d.ts +2 -2
- package/dist/components/feedback/index.d.ts +0 -2
- package/dist/components/layout/section.d.ts +1 -8
- package/dist/components/ui/number-field/index.cjs +1 -0
- package/dist/components/ui/number-field/index.d.ts +18 -0
- package/dist/components/ui/number-field/index.js +1 -0
- package/dist/components/ui/toggle-group/index.cjs +1 -0
- package/dist/components/ui/toggle-group/index.d.ts +13 -0
- package/dist/components/ui/toggle-group/index.js +1 -0
- package/dist/components/ui/toolbar/index.cjs +1 -0
- package/dist/components/ui/toolbar/index.d.ts +14 -0
- package/dist/components/ui/toolbar/index.js +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/src/components/charts/progress-circle.cjs +1 -1
- package/dist/src/components/charts/progress-circle.js +57 -3
- package/dist/src/components/data-table/data-table.cjs +1 -1
- package/dist/src/components/data-table/data-table.js +102 -100
- package/dist/src/components/feedback/index.cjs +1 -1
- package/dist/src/components/feedback/index.js +2 -4
- package/dist/src/components/layout/index.cjs +1 -1
- package/dist/src/components/layout/index.js +3 -3
- package/dist/src/components/layout/public.cjs +1 -1
- package/dist/src/components/layout/public.js +3 -3
- package/dist/src/components/layout/section.cjs +1 -1
- package/dist/src/components/layout/section.js +2 -26
- package/dist/src/components/ui/number-field/index.cjs +1 -0
- package/dist/src/components/ui/number-field/index.js +73 -0
- package/dist/src/components/ui/toggle-group/index.cjs +1 -0
- package/dist/src/components/ui/toggle-group/index.js +32 -0
- package/dist/src/components/ui/toolbar/index.cjs +1 -0
- package/dist/src/components/ui/toolbar/index.js +50 -0
- package/dist/src/index.cjs +1 -1
- package/dist/src/index.js +92 -91
- package/dist/src/public-component-surface.cjs +1 -1
- package/dist/src/public-component-surface.js +15 -0
- package/package.json +13 -9
- package/packages/cli/dist/index.cjs +72 -72
- package/packages/cli/vendor/src/components/charts/progress-circle.tsx +78 -3
- package/packages/cli/vendor/src/components/data-table/data-table.tsx +4 -4
- package/packages/cli/vendor/src/components/feedback/index.ts +0 -2
- package/packages/cli/vendor/src/components/layout/section.tsx +1 -28
- package/packages/cli/vendor/src/components/ui/number-field/index.tsx +89 -0
- package/packages/cli/vendor/src/components/ui/toggle-group/index.tsx +72 -0
- package/packages/cli/vendor/src/components/ui/toolbar/index.tsx +67 -0
- package/packages/cli/vendor/src/index.ts +6 -3
- package/packages/cli/vendor/src/public-component-surface.ts +3 -0
- package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts +4 -2
- package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx +2 -2
- package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx +1 -1
- package/packages/cli/vendor/templates/showcase/src/showcase/sections/ComponentLivePreview.tsx +2 -2
- package/packages/cli/vendor/templates/showcase/src/showcase/sections/FormsSection.tsx +2 -2
- package/packages/cli/vendor/templates/styles/globals.css +5 -5
- package/registry.json +962 -431
- package/dist/components/charts/progress-ring.cjs +0 -1
- package/dist/components/charts/progress-ring.d.ts +0 -13
- package/dist/components/charts/progress-ring.js +0 -1
- package/dist/components/feedback/loading-state.cjs +0 -1
- package/dist/components/feedback/loading-state.d.ts +0 -9
- package/dist/components/feedback/loading-state.js +0 -1
- package/dist/components/feedback/page-state.cjs +0 -1
- package/dist/components/feedback/page-state.d.ts +0 -18
- package/dist/components/feedback/page-state.js +0 -1
- package/dist/components/layout/page-container.cjs +0 -1
- package/dist/components/layout/page-container.d.ts +0 -7
- package/dist/components/layout/page-container.js +0 -1
- package/dist/components/layout/page-header.cjs +0 -1
- package/dist/components/layout/page-header.d.ts +0 -23
- package/dist/components/layout/page-header.js +0 -1
- package/dist/components/layout/section-header.cjs +0 -1
- package/dist/components/layout/section-header.d.ts +0 -14
- package/dist/components/layout/section-header.js +0 -1
- package/dist/components/layout/sidebar-nav.cjs +0 -1
- package/dist/components/layout/sidebar-nav.d.ts +0 -37
- package/dist/components/layout/sidebar-nav.js +0 -1
- package/dist/components/layout/sticky-footer-bar.cjs +0 -1
- package/dist/components/layout/sticky-footer-bar.d.ts +0 -7
- package/dist/components/layout/sticky-footer-bar.js +0 -1
- package/dist/src/components/charts/progress-ring.cjs +0 -1
- package/dist/src/components/charts/progress-ring.js +0 -57
- package/dist/src/components/feedback/loading-state.cjs +0 -1
- package/dist/src/components/feedback/loading-state.js +0 -15
- package/dist/src/components/feedback/page-state.cjs +0 -1
- package/dist/src/components/feedback/page-state.js +0 -28
- package/dist/src/components/layout/page-container.cjs +0 -1
- package/dist/src/components/layout/page-container.js +0 -21
- package/dist/src/components/layout/page-header.cjs +0 -1
- package/dist/src/components/layout/page-header.js +0 -92
- package/dist/src/components/layout/section-header.cjs +0 -1
- package/dist/src/components/layout/section-header.js +0 -44
- package/dist/src/components/layout/sidebar-nav.cjs +0 -1
- package/dist/src/components/layout/sidebar-nav.js +0 -220
- package/dist/src/components/layout/sticky-footer-bar.cjs +0 -1
- package/dist/src/components/layout/sticky-footer-bar.js +0 -20
- package/packages/cli/vendor/src/components/charts/progress-ring.tsx +0 -56
- package/packages/cli/vendor/src/components/feedback/loading-state.tsx +0 -15
- package/packages/cli/vendor/src/components/feedback/page-state.tsx +0 -29
- package/packages/cli/vendor/src/components/layout/page-container.tsx +0 -30
- package/packages/cli/vendor/src/components/layout/page-header.tsx +0 -104
- package/packages/cli/vendor/src/components/layout/section-header.tsx +0 -56
- package/packages/cli/vendor/src/components/layout/sidebar-nav.tsx +0 -377
- package/packages/cli/vendor/src/components/layout/sticky-footer-bar.tsx +0 -23
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { cn as e } from "../../lib/utils.js";
|
|
3
|
-
import { Badge as t } from "../ui/badge/index.js";
|
|
4
|
-
import { ControllableDetails as n } from "./controllable-details.js";
|
|
5
|
-
import { Tooltip as r } from "../ui/tooltip/index.js";
|
|
6
|
-
import * as i from "react";
|
|
7
|
-
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
|
-
//#region src/components/layout/sidebar-nav.tsx
|
|
9
|
-
function c(e) {
|
|
10
|
-
return e.items?.some((e) => !e.hidden) ?? !1;
|
|
11
|
-
}
|
|
12
|
-
function l(e) {
|
|
13
|
-
return e.active ? !0 : e.items?.some((e) => l(e)) ?? !1;
|
|
14
|
-
}
|
|
15
|
-
function u({ item: n, collapsed: i, depth: c, itemSize: l, activeIndicator: u, itemClassName: d, activeItemClassName: f, renderLink: p }) {
|
|
16
|
-
let m = n.current ?? (n.active ? "page" : void 0), h = /* @__PURE__ */ s(a, { children: [
|
|
17
|
-
n.icon && /* @__PURE__ */ o("span", {
|
|
18
|
-
className: "shrink-0 [&_svg]:size-4",
|
|
19
|
-
children: n.icon
|
|
20
|
-
}),
|
|
21
|
-
!i && /* @__PURE__ */ o("span", {
|
|
22
|
-
className: "min-w-0 flex-1 truncate",
|
|
23
|
-
children: n.label
|
|
24
|
-
}),
|
|
25
|
-
!i && n.badge && /* @__PURE__ */ o(t, {
|
|
26
|
-
variant: "secondary",
|
|
27
|
-
className: "ml-auto h-5 shrink-0 px-1.5",
|
|
28
|
-
children: n.badge
|
|
29
|
-
})
|
|
30
|
-
] }), g = e("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", i && "justify-center px-0", c > 0 && !i && "pl-3", d, n.active && f), _ = (e) => i ? /* @__PURE__ */ o(r, {
|
|
31
|
-
content: n.tooltip ?? n.label,
|
|
32
|
-
side: "right",
|
|
33
|
-
children: /* @__PURE__ */ o("span", {
|
|
34
|
-
className: "block",
|
|
35
|
-
children: e
|
|
36
|
-
})
|
|
37
|
-
}) : e;
|
|
38
|
-
return n.href && n.href.startsWith("/") ? _(p ? p({
|
|
39
|
-
item: n,
|
|
40
|
-
href: n.href,
|
|
41
|
-
"data-slot": "sidebar-nav-item",
|
|
42
|
-
"data-depth": String(c),
|
|
43
|
-
"data-active": n.active || void 0,
|
|
44
|
-
"data-disabled": n.disabled || void 0,
|
|
45
|
-
"data-size": l,
|
|
46
|
-
"data-active-indicator": u,
|
|
47
|
-
"aria-current": m,
|
|
48
|
-
className: g,
|
|
49
|
-
onClick: (e) => {
|
|
50
|
-
if (n.disabled) {
|
|
51
|
-
e.preventDefault();
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
n.onSelect?.();
|
|
55
|
-
},
|
|
56
|
-
children: h
|
|
57
|
-
}) : /* @__PURE__ */ o("a", {
|
|
58
|
-
href: n.href,
|
|
59
|
-
"data-slot": "sidebar-nav-item",
|
|
60
|
-
"data-depth": c,
|
|
61
|
-
"data-active": n.active || void 0,
|
|
62
|
-
"data-disabled": n.disabled || void 0,
|
|
63
|
-
"data-size": l,
|
|
64
|
-
"data-active-indicator": u,
|
|
65
|
-
"aria-current": m,
|
|
66
|
-
className: g,
|
|
67
|
-
onClick: (e) => {
|
|
68
|
-
if (n.disabled) {
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
n.onSelect?.();
|
|
73
|
-
},
|
|
74
|
-
children: h
|
|
75
|
-
})) : n.href ? _(/* @__PURE__ */ o("button", {
|
|
76
|
-
type: "button",
|
|
77
|
-
"data-slot": "sidebar-nav-item",
|
|
78
|
-
"data-depth": c,
|
|
79
|
-
"data-active": n.active || void 0,
|
|
80
|
-
"data-disabled": n.disabled || void 0,
|
|
81
|
-
"data-size": l,
|
|
82
|
-
"data-active-indicator": u,
|
|
83
|
-
"aria-current": m,
|
|
84
|
-
className: e("w-full text-left", g),
|
|
85
|
-
onClick: () => {
|
|
86
|
-
if (n.disabled) return;
|
|
87
|
-
let e = n.href;
|
|
88
|
-
if (e) {
|
|
89
|
-
if (n.onSelect?.(), e.startsWith("http")) {
|
|
90
|
-
window.open(e, "_blank", "noopener,noreferrer");
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
window.location.assign(e);
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
children: h
|
|
97
|
-
})) : _(/* @__PURE__ */ o("button", {
|
|
98
|
-
type: "button",
|
|
99
|
-
"data-slot": "sidebar-nav-item",
|
|
100
|
-
"data-depth": c,
|
|
101
|
-
"data-active": n.active || void 0,
|
|
102
|
-
"data-disabled": n.disabled || void 0,
|
|
103
|
-
"data-size": l,
|
|
104
|
-
"data-active-indicator": u,
|
|
105
|
-
"aria-current": m,
|
|
106
|
-
disabled: n.disabled,
|
|
107
|
-
className: e("w-full text-left", g),
|
|
108
|
-
onClick: n.onSelect,
|
|
109
|
-
children: h
|
|
110
|
-
}));
|
|
111
|
-
}
|
|
112
|
-
function d({ items: a, collapsed: f, depth: p, showSectionLabels: m, itemSize: h, activeIndicator: g, itemClassName: _, activeItemClassName: v, renderItem: y, renderLink: b }) {
|
|
113
|
-
return a.map((a) => {
|
|
114
|
-
if (a.hidden) return null;
|
|
115
|
-
let x = m && !f && p === 0 && a.sectionLabel;
|
|
116
|
-
if (!c(a)) {
|
|
117
|
-
let e = /* @__PURE__ */ o(u, {
|
|
118
|
-
item: a,
|
|
119
|
-
collapsed: f,
|
|
120
|
-
depth: p,
|
|
121
|
-
itemSize: h,
|
|
122
|
-
activeIndicator: g,
|
|
123
|
-
itemClassName: _,
|
|
124
|
-
activeItemClassName: v,
|
|
125
|
-
renderLink: b
|
|
126
|
-
});
|
|
127
|
-
return /* @__PURE__ */ s(i.Fragment, { children: [x ? /* @__PURE__ */ o("div", {
|
|
128
|
-
"data-slot": "sidebar-nav-group-label",
|
|
129
|
-
className: "px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0",
|
|
130
|
-
children: a.sectionLabel
|
|
131
|
-
}) : null, y ? y(a, e) : e] }, a.key);
|
|
132
|
-
}
|
|
133
|
-
let S = a.defaultExpanded ?? l(a), C = /* @__PURE__ */ s("summary", {
|
|
134
|
-
"data-slot": "sidebar-nav-group-trigger",
|
|
135
|
-
className: e("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)]", f ? "justify-center px-0" : "px-2"),
|
|
136
|
-
children: [
|
|
137
|
-
a.icon ? f ? /* @__PURE__ */ o(r, {
|
|
138
|
-
content: a.tooltip ?? a.label,
|
|
139
|
-
side: "right",
|
|
140
|
-
children: /* @__PURE__ */ o("span", {
|
|
141
|
-
className: "shrink-0 [&_svg]:size-4",
|
|
142
|
-
children: a.icon
|
|
143
|
-
})
|
|
144
|
-
}) : /* @__PURE__ */ o("span", {
|
|
145
|
-
className: "shrink-0 [&_svg]:size-4",
|
|
146
|
-
children: a.icon
|
|
147
|
-
}) : null,
|
|
148
|
-
!f && /* @__PURE__ */ o("span", {
|
|
149
|
-
className: "min-w-0 flex-1 truncate",
|
|
150
|
-
children: a.label
|
|
151
|
-
}),
|
|
152
|
-
!f && a.badge ? /* @__PURE__ */ o(t, {
|
|
153
|
-
variant: "secondary",
|
|
154
|
-
className: "h-5 shrink-0 px-1.5",
|
|
155
|
-
children: a.badge
|
|
156
|
-
}) : null,
|
|
157
|
-
!f && /* @__PURE__ */ o("span", {
|
|
158
|
-
"data-slot": "sidebar-nav-group-chevron",
|
|
159
|
-
className: "ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90",
|
|
160
|
-
children: "›"
|
|
161
|
-
})
|
|
162
|
-
]
|
|
163
|
-
}), w = /* @__PURE__ */ s("div", {
|
|
164
|
-
"data-slot": "sidebar-nav-group",
|
|
165
|
-
"data-depth": p,
|
|
166
|
-
children: [x ? /* @__PURE__ */ o("div", {
|
|
167
|
-
"data-slot": "sidebar-nav-group-label",
|
|
168
|
-
className: "px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0",
|
|
169
|
-
children: a.sectionLabel
|
|
170
|
-
}) : null, /* @__PURE__ */ s(n, {
|
|
171
|
-
"data-slot": "sidebar-nav-group-details",
|
|
172
|
-
open: a.expanded,
|
|
173
|
-
defaultOpen: S,
|
|
174
|
-
className: "group/sidebar-nav-details",
|
|
175
|
-
onOpenChange: a.onExpandedChange,
|
|
176
|
-
children: [C, /* @__PURE__ */ o("div", {
|
|
177
|
-
"data-slot": "sidebar-nav-group-content",
|
|
178
|
-
className: e("mt-1 grid gap-1", !f && "ml-3 border-l border-border/55 pl-2"),
|
|
179
|
-
children: /* @__PURE__ */ o(d, {
|
|
180
|
-
items: a.items ?? [],
|
|
181
|
-
collapsed: f,
|
|
182
|
-
depth: p + 1,
|
|
183
|
-
showSectionLabels: m,
|
|
184
|
-
itemSize: h,
|
|
185
|
-
activeIndicator: g,
|
|
186
|
-
itemClassName: _,
|
|
187
|
-
activeItemClassName: v,
|
|
188
|
-
renderItem: y,
|
|
189
|
-
renderLink: b
|
|
190
|
-
})
|
|
191
|
-
})]
|
|
192
|
-
})]
|
|
193
|
-
});
|
|
194
|
-
return y ? /* @__PURE__ */ o(i.Fragment, { children: y(a, w) }, a.key) : /* @__PURE__ */ o(i.Fragment, { children: w }, a.key);
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
function f({ className: t, items: n, collapsed: r = !1, scrollable: i = !0, showSectionLabels: a = !0, itemSize: s = "md", activeIndicator: c = "bar", itemClassName: l, activeItemClassName: u, renderItem: f, renderLink: p, ...m }) {
|
|
198
|
-
let h = n.filter((e) => !e.hidden);
|
|
199
|
-
return /* @__PURE__ */ o("nav", {
|
|
200
|
-
"aria-label": "Primary navigation",
|
|
201
|
-
"data-slot": "sidebar-nav",
|
|
202
|
-
"data-collapsed": r || void 0,
|
|
203
|
-
className: e("grid min-h-0 gap-1", i ? "overflow-y-auto overscroll-contain" : null, t),
|
|
204
|
-
...m,
|
|
205
|
-
children: /* @__PURE__ */ o(d, {
|
|
206
|
-
items: h,
|
|
207
|
-
collapsed: r,
|
|
208
|
-
depth: 0,
|
|
209
|
-
showSectionLabels: a,
|
|
210
|
-
itemSize: s,
|
|
211
|
-
activeIndicator: c,
|
|
212
|
-
itemClassName: l,
|
|
213
|
-
activeItemClassName: u,
|
|
214
|
-
renderItem: f,
|
|
215
|
-
renderLink: p
|
|
216
|
-
})
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
//#endregion
|
|
220
|
-
export { f as SidebarNav };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({start:e,end:n,className:i,children:a,...o}){return(0,r.jsxs)(`div`,{"data-slot":`sticky-footer-bar`,className:t.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`,i),...o,children:[(0,r.jsx)(`div`,{className:`min-w-0 flex-1`,children:e??a}),n&&(0,r.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:n})]})}exports.StickyFooterBar=i;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { cn as e } from "../../lib/utils.js";
|
|
2
|
-
import "react";
|
|
3
|
-
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
|
-
//#region src/components/layout/sticky-footer-bar.tsx
|
|
5
|
-
function r({ start: r, end: i, className: a, children: o, ...s }) {
|
|
6
|
-
return /* @__PURE__ */ n("div", {
|
|
7
|
-
"data-slot": "sticky-footer-bar",
|
|
8
|
-
className: e("sticky bottom-0 z-30 flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-3 shadow-lg", a),
|
|
9
|
-
...s,
|
|
10
|
-
children: [/* @__PURE__ */ t("div", {
|
|
11
|
-
className: "min-w-0 flex-1",
|
|
12
|
-
children: r ?? o
|
|
13
|
-
}), i && /* @__PURE__ */ t("div", {
|
|
14
|
-
className: "flex shrink-0 items-center gap-2",
|
|
15
|
-
children: i
|
|
16
|
-
})]
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
//#endregion
|
|
20
|
-
export { r as StickyFooterBar };
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "@/lib/utils"
|
|
4
|
-
|
|
5
|
-
export type ProgressRingProps = React.ComponentProps<"svg"> & {
|
|
6
|
-
value: number
|
|
7
|
-
max?: number
|
|
8
|
-
size?: number
|
|
9
|
-
strokeWidth?: number
|
|
10
|
-
label?: React.ReactNode
|
|
11
|
-
description?: React.ReactNode
|
|
12
|
-
tone?: "default" | "success" | "warning" | "danger"
|
|
13
|
-
loading?: boolean
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function ProgressRing({ value, max = 100, size = 120, strokeWidth = 10, label, description, tone = "default", loading = false, className, ...props }: ProgressRingProps) {
|
|
17
|
-
const radius = (size - strokeWidth) / 2
|
|
18
|
-
const circumference = 2 * Math.PI * radius
|
|
19
|
-
const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0
|
|
20
|
-
const offset = circumference - ratio * circumference
|
|
21
|
-
const stroke =
|
|
22
|
-
tone === "success"
|
|
23
|
-
? "var(--color-chart-3, var(--primary))"
|
|
24
|
-
: tone === "warning"
|
|
25
|
-
? "var(--color-chart-4, var(--primary))"
|
|
26
|
-
: tone === "danger"
|
|
27
|
-
? "var(--destructive)"
|
|
28
|
-
: "var(--primary)"
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<svg data-slot="progress-ring" viewBox={`0 0 ${size} ${size}`} className={cn("h-auto w-full max-w-32", className)} role="img" {...props}>
|
|
32
|
-
<circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--muted)" strokeWidth={strokeWidth} />
|
|
33
|
-
<circle
|
|
34
|
-
cx={size / 2}
|
|
35
|
-
cy={size / 2}
|
|
36
|
-
r={radius}
|
|
37
|
-
fill="none"
|
|
38
|
-
stroke={stroke}
|
|
39
|
-
strokeWidth={strokeWidth}
|
|
40
|
-
strokeLinecap="round"
|
|
41
|
-
strokeDasharray={circumference}
|
|
42
|
-
strokeDashoffset={loading ? circumference * 0.45 : offset}
|
|
43
|
-
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
|
44
|
-
className={loading ? "animate-pulse" : undefined}
|
|
45
|
-
/>
|
|
46
|
-
{(label || description) && (
|
|
47
|
-
<text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" fill="var(--foreground)">
|
|
48
|
-
{label && <tspan x="50%" dy={description ? "-0.15em" : "0"} className="text-base font-semibold">{label}</tspan>}
|
|
49
|
-
{description && <tspan x="50%" dy="1.25em" className="text-xs fill-muted-foreground">{description}</tspan>}
|
|
50
|
-
</text>
|
|
51
|
-
)}
|
|
52
|
-
</svg>
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export { ProgressRing }
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { StateView, type StateViewProps } from "./state-view"
|
|
4
|
-
|
|
5
|
-
export type LoadingStateProps = Omit<StateViewProps, "status" | "title" | "loadingVariant" | "variant" | "slot"> & {
|
|
6
|
-
label?: React.ReactNode
|
|
7
|
-
variant?: "spinner" | "skeleton" | "progress"
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/** @deprecated Use StateView with status="loading". */
|
|
11
|
-
function LoadingState({ label = "Loading...", variant = "spinner", ...props }: LoadingStateProps) {
|
|
12
|
-
return <StateView status="loading" title={label} loadingVariant={variant} slot="loading-state" {...props} />
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { LoadingState }
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { StateView, type StateViewProps, type StateViewStatus } from "./state-view"
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
export type PageStateTone = Extract<StateViewStatus, "empty" | "loading" | "error" | "success" | "info">
|
|
7
|
-
export type PageStateProps = Omit<StateViewProps, "status" | "size" | "variant" | "tone" | "actions" | "slot"> & {
|
|
8
|
-
tone?: PageStateTone
|
|
9
|
-
action?: React.ReactNode
|
|
10
|
-
extra?: React.ReactNode
|
|
11
|
-
compact?: boolean
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/** @deprecated Use StateView. */
|
|
15
|
-
function PageState({ tone = "empty", action, extra, compact = false, className, ...props }: PageStateProps) {
|
|
16
|
-
return <StateView status={tone} size={compact ? "compact" : "page"} actions={<>{action}{extra}</>} slot="page-state" className={className} {...props} />
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export type InlineStateProps = Omit<PageStateProps, "compact"> & {
|
|
20
|
-
retryLabel?: React.ReactNode
|
|
21
|
-
onRetry?: () => void
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/** @deprecated Use StateView with variant="inline". */
|
|
25
|
-
function InlineState({ tone = "empty", action, className, ...props }: InlineStateProps) {
|
|
26
|
-
return <StateView variant="inline" size="compact" actions={action} slot="inline-state" className={cn("min-h-0", className)} {...props} status={tone} />
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export { InlineState, PageState }
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "@/lib/utils"
|
|
4
|
-
|
|
5
|
-
export type PageContainerSize = "default" | "sm" | "md" | "lg" | "xl" | "full"
|
|
6
|
-
|
|
7
|
-
export type PageContainerProps = React.ComponentProps<"div"> & {
|
|
8
|
-
size?: PageContainerSize
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const sizeClassName: Record<PageContainerSize, string> = {
|
|
12
|
-
sm: "max-w-3xl",
|
|
13
|
-
md: "max-w-5xl",
|
|
14
|
-
lg: "max-w-6xl",
|
|
15
|
-
xl: "max-w-7xl",
|
|
16
|
-
default: "max-w-7xl",
|
|
17
|
-
full: "max-w-none",
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function PageContainer({ className, size = "default", ...props }: PageContainerProps) {
|
|
21
|
-
return (
|
|
22
|
-
<div
|
|
23
|
-
data-slot="page-container"
|
|
24
|
-
className={cn("mx-auto flex w-full flex-col gap-4", sizeClassName[size], className)}
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { PageContainer }
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
const pageHeaderVariants = cva("flex flex-col border transition-[background-color,border-color,box-shadow]", {
|
|
7
|
-
variants: {
|
|
8
|
-
variant: {
|
|
9
|
-
default: "border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/5",
|
|
10
|
-
elevated: "border-border/70 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5",
|
|
11
|
-
outline: "border-border bg-transparent shadow-none",
|
|
12
|
-
ghost: "border-transparent bg-transparent shadow-none",
|
|
13
|
-
soft: "border-transparent bg-muted/45 shadow-none",
|
|
14
|
-
},
|
|
15
|
-
size: {
|
|
16
|
-
sm: "gap-3 rounded-[var(--radius-2xl)] p-4",
|
|
17
|
-
default: "gap-4 rounded-[var(--radius-3xl)] p-5",
|
|
18
|
-
lg: "gap-5 rounded-[calc(var(--radius-3xl)*1.1)] p-6",
|
|
19
|
-
},
|
|
20
|
-
tone: {
|
|
21
|
-
neutral: "",
|
|
22
|
-
info: "border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_28%),var(--card))]",
|
|
23
|
-
success: "border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_30%),var(--card))]",
|
|
24
|
-
warning: "border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_30%),var(--card))]",
|
|
25
|
-
danger: "border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_8%),var(--card))]",
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
variant: "default",
|
|
30
|
-
size: "default",
|
|
31
|
-
tone: "neutral",
|
|
32
|
-
},
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
export type PageHeaderProps = React.ComponentProps<"div"> &
|
|
36
|
-
VariantProps<typeof pageHeaderVariants> & {
|
|
37
|
-
title?: React.ReactNode
|
|
38
|
-
description?: React.ReactNode
|
|
39
|
-
eyebrow?: React.ReactNode
|
|
40
|
-
breadcrumbs?: React.ReactNode
|
|
41
|
-
actions?: React.ReactNode
|
|
42
|
-
meta?: React.ReactNode
|
|
43
|
-
leading?: React.ReactNode
|
|
44
|
-
footer?: React.ReactNode
|
|
45
|
-
sticky?: boolean
|
|
46
|
-
titleClassName?: string
|
|
47
|
-
descriptionClassName?: string
|
|
48
|
-
actionsClassName?: string
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function PageHeader({
|
|
52
|
-
className,
|
|
53
|
-
variant,
|
|
54
|
-
size,
|
|
55
|
-
tone,
|
|
56
|
-
title,
|
|
57
|
-
description,
|
|
58
|
-
eyebrow,
|
|
59
|
-
breadcrumbs,
|
|
60
|
-
actions,
|
|
61
|
-
meta,
|
|
62
|
-
leading,
|
|
63
|
-
footer,
|
|
64
|
-
sticky = false,
|
|
65
|
-
titleClassName,
|
|
66
|
-
descriptionClassName,
|
|
67
|
-
actionsClassName,
|
|
68
|
-
children,
|
|
69
|
-
...props
|
|
70
|
-
}: PageHeaderProps) {
|
|
71
|
-
return (
|
|
72
|
-
<div
|
|
73
|
-
data-slot="page-header"
|
|
74
|
-
data-sticky={sticky || undefined}
|
|
75
|
-
className={cn(
|
|
76
|
-
pageHeaderVariants({ variant, size, tone }),
|
|
77
|
-
sticky && "sticky top-0 z-30 bg-background/92 backdrop-blur supports-[backdrop-filter]:bg-background/78",
|
|
78
|
-
className
|
|
79
|
-
)}
|
|
80
|
-
{...props}
|
|
81
|
-
>
|
|
82
|
-
{breadcrumbs && <div className="text-sm text-muted-foreground/95">{breadcrumbs}</div>}
|
|
83
|
-
|
|
84
|
-
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
85
|
-
<div className="flex min-w-0 gap-4">
|
|
86
|
-
{leading ? <div className="shrink-0">{leading}</div> : null}
|
|
87
|
-
<div className="min-w-0 space-y-2">
|
|
88
|
-
{eyebrow && <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</div>}
|
|
89
|
-
{title && <h1 className={cn("truncate text-3xl font-semibold tracking-[-0.03em] text-foreground", size === "sm" && "text-2xl", size === "lg" && "text-4xl", titleClassName)}>{title}</h1>}
|
|
90
|
-
{description && <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p>}
|
|
91
|
-
{meta && <div className="pt-1 text-sm text-muted-foreground">{meta}</div>}
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
{actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2.5", actionsClassName)}>{actions}</div>}
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
{children}
|
|
99
|
-
{footer && <div data-slot="page-header-footer" className="border-t border-border/70 pt-4">{footer}</div>}
|
|
100
|
-
</div>
|
|
101
|
-
)
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
export { PageHeader, pageHeaderVariants }
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "@/lib/utils"
|
|
4
|
-
|
|
5
|
-
export type SectionHeaderProps = React.ComponentProps<"div"> & {
|
|
6
|
-
eyebrow?: React.ReactNode
|
|
7
|
-
title?: React.ReactNode
|
|
8
|
-
description?: React.ReactNode
|
|
9
|
-
actions?: React.ReactNode
|
|
10
|
-
meta?: React.ReactNode
|
|
11
|
-
align?: "start" | "center"
|
|
12
|
-
size?: "sm" | "default" | "lg"
|
|
13
|
-
titleClassName?: string
|
|
14
|
-
descriptionClassName?: string
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const titleSizeClassName = {
|
|
18
|
-
sm: "text-xl",
|
|
19
|
-
default: "text-2xl",
|
|
20
|
-
lg: "text-3xl",
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function SectionHeader({
|
|
24
|
-
className,
|
|
25
|
-
eyebrow,
|
|
26
|
-
title,
|
|
27
|
-
description,
|
|
28
|
-
actions,
|
|
29
|
-
meta,
|
|
30
|
-
align = "start",
|
|
31
|
-
size = "default",
|
|
32
|
-
titleClassName,
|
|
33
|
-
descriptionClassName,
|
|
34
|
-
children,
|
|
35
|
-
...props
|
|
36
|
-
}: SectionHeaderProps) {
|
|
37
|
-
return (
|
|
38
|
-
<div
|
|
39
|
-
data-slot="section-header"
|
|
40
|
-
data-align={align}
|
|
41
|
-
className={cn("flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", align === "center" && "text-center sm:flex-col sm:items-center", className)}
|
|
42
|
-
{...props}
|
|
43
|
-
>
|
|
44
|
-
<div className={cn("min-w-0 space-y-2", align === "center" && "mx-auto max-w-2xl")}>
|
|
45
|
-
{eyebrow ? <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
|
|
46
|
-
{title ? <h2 className={cn("font-semibold tracking-[-0.03em] text-foreground", titleSizeClassName[size], titleClassName)}>{title}</h2> : null}
|
|
47
|
-
{description ? <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p> : null}
|
|
48
|
-
{meta ? <div className="text-sm text-muted-foreground">{meta}</div> : null}
|
|
49
|
-
{children}
|
|
50
|
-
</div>
|
|
51
|
-
{actions ? <div className="flex shrink-0 flex-wrap items-center gap-2.5">{actions}</div> : null}
|
|
52
|
-
</div>
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export { SectionHeader }
|