nucleus-core-ts 0.9.22 → 0.9.24
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/dist/fe/components/DesignSystem/components/ComponentCanvas.d.ts +1 -1
- package/dist/fe/components/DesignSystem/components/ComponentCanvas.js +156 -196
- package/dist/fe/components/DesignSystem/registry/defaultRegistry.d.ts +1 -1
- package/dist/fe/components/DesignSystem/registry/defaultRegistry.js +640 -538
- package/dist/fe/components/DesignSystem/theme/index.js +51 -51
- package/package.json +1 -1
|
@@ -1,32 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { cn } from
|
|
4
|
-
import { useDesignSystemStore } from
|
|
5
|
-
import { designSystemTheme } from
|
|
3
|
+
import { cn } from "../../../utils/cn";
|
|
4
|
+
import { useDesignSystemStore } from "../store";
|
|
5
|
+
import { designSystemTheme } from "../theme";
|
|
6
6
|
const VIEWPORT_WIDTHS = {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
"mobile-sm": "max-w-[320px]",
|
|
8
|
+
"mobile-lg": "max-w-[428px]",
|
|
9
|
+
"tablet-sm": "max-w-[768px]",
|
|
10
|
+
"tablet-lg": "max-w-[1024px]",
|
|
11
|
+
"desktop-sm": "max-w-[1280px]",
|
|
12
|
+
"desktop-lg": "max-w-full"
|
|
13
13
|
};
|
|
14
14
|
const VIEWPORT_LABELS = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
"mobile-sm": "320px",
|
|
16
|
+
"mobile-lg": "428px",
|
|
17
|
+
"tablet-sm": "768px",
|
|
18
|
+
"tablet-lg": "1024px",
|
|
19
|
+
"desktop-sm": "1280px",
|
|
20
|
+
"desktop-lg": "Full"
|
|
21
21
|
};
|
|
22
22
|
const VIEWPORT_OPTIONS = [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
"mobile-sm",
|
|
24
|
+
"mobile-lg",
|
|
25
|
+
"tablet-sm",
|
|
26
|
+
"tablet-lg",
|
|
27
|
+
"desktop-sm",
|
|
28
|
+
"desktop-lg"
|
|
29
29
|
];
|
|
30
|
+
const VIEWPORT_ICONS = {
|
|
31
|
+
mobile: "M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 16h.01",
|
|
32
|
+
tablet: "M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm6 16h.01",
|
|
33
|
+
desktop: "M4 3h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2zm4 18h8m-4-4v4"
|
|
34
|
+
};
|
|
30
35
|
export function ComponentCanvas({ registry }) {
|
|
31
36
|
const store = useDesignSystemStore();
|
|
32
37
|
const t = designSystemTheme.canvas;
|
|
@@ -38,7 +43,7 @@ export function ComponentCanvas({ registry }) {
|
|
|
38
43
|
resolvedProps[prop.name] = storeVal !== undefined && storeVal !== null ? storeVal : prop.defaultValue ?? null;
|
|
39
44
|
}
|
|
40
45
|
}
|
|
41
|
-
const isDark = store.themeMode ===
|
|
46
|
+
const isDark = store.themeMode === "dark";
|
|
42
47
|
return /*#__PURE__*/ _jsxs("main", {
|
|
43
48
|
className: t.container,
|
|
44
49
|
children: [
|
|
@@ -47,7 +52,7 @@ export function ComponentCanvas({ registry }) {
|
|
|
47
52
|
children: [
|
|
48
53
|
/*#__PURE__*/ _jsx("button", {
|
|
49
54
|
type: "button",
|
|
50
|
-
className: "p-2 lg:hidden rounded-md text-
|
|
55
|
+
className: "p-2 lg:hidden rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800",
|
|
51
56
|
onClick: ()=>store.toggleSidebar(),
|
|
52
57
|
"aria-label": "Toggle sidebar",
|
|
53
58
|
children: /*#__PURE__*/ _jsx("svg", {
|
|
@@ -63,194 +68,140 @@ export function ComponentCanvas({ registry }) {
|
|
|
63
68
|
})
|
|
64
69
|
})
|
|
65
70
|
}),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
VIEWPORT_OPTIONS.map((vp)=>/*#__PURE__*/ _jsxs("button", {
|
|
71
|
+
VIEWPORT_OPTIONS.map((vp)=>{
|
|
72
|
+
const deviceType = vp.split("-")[0] ?? "";
|
|
73
|
+
const sizeLabel = vp.split("-")[1]?.toUpperCase() ?? "";
|
|
74
|
+
return /*#__PURE__*/ _jsx("button", {
|
|
71
75
|
type: "button",
|
|
72
76
|
onClick: ()=>store.setViewportSize(vp),
|
|
73
77
|
className: store.viewportSize === vp ? t.toolbarButtonActive : t.toolbarButton,
|
|
74
|
-
title: VIEWPORT_LABELS[vp]
|
|
75
|
-
children:
|
|
76
|
-
vp.split('-')[0] === 'mobile' && /*#__PURE__*/ _jsxs("svg", {
|
|
77
|
-
width: "14",
|
|
78
|
-
height: "14",
|
|
79
|
-
viewBox: "0 0 24 24",
|
|
80
|
-
fill: "none",
|
|
81
|
-
stroke: "currentColor",
|
|
82
|
-
strokeWidth: "2",
|
|
83
|
-
className: "inline mr-1",
|
|
84
|
-
"aria-hidden": "true",
|
|
85
|
-
children: [
|
|
86
|
-
/*#__PURE__*/ _jsx("rect", {
|
|
87
|
-
x: "5",
|
|
88
|
-
y: "2",
|
|
89
|
-
width: "14",
|
|
90
|
-
height: "20",
|
|
91
|
-
rx: "2",
|
|
92
|
-
ry: "2"
|
|
93
|
-
}),
|
|
94
|
-
/*#__PURE__*/ _jsx("path", {
|
|
95
|
-
d: "M12 18h.01"
|
|
96
|
-
})
|
|
97
|
-
]
|
|
98
|
-
}),
|
|
99
|
-
vp.split('-')[0] === 'tablet' && /*#__PURE__*/ _jsxs("svg", {
|
|
100
|
-
width: "14",
|
|
101
|
-
height: "14",
|
|
102
|
-
viewBox: "0 0 24 24",
|
|
103
|
-
fill: "none",
|
|
104
|
-
stroke: "currentColor",
|
|
105
|
-
strokeWidth: "2",
|
|
106
|
-
className: "inline mr-1",
|
|
107
|
-
"aria-hidden": "true",
|
|
108
|
-
children: [
|
|
109
|
-
/*#__PURE__*/ _jsx("rect", {
|
|
110
|
-
x: "4",
|
|
111
|
-
y: "2",
|
|
112
|
-
width: "16",
|
|
113
|
-
height: "20",
|
|
114
|
-
rx: "2",
|
|
115
|
-
ry: "2"
|
|
116
|
-
}),
|
|
117
|
-
/*#__PURE__*/ _jsx("path", {
|
|
118
|
-
d: "M12 18h.01"
|
|
119
|
-
})
|
|
120
|
-
]
|
|
121
|
-
}),
|
|
122
|
-
vp.split('-')[0] === 'desktop' && /*#__PURE__*/ _jsxs("svg", {
|
|
123
|
-
width: "14",
|
|
124
|
-
height: "14",
|
|
125
|
-
viewBox: "0 0 24 24",
|
|
126
|
-
fill: "none",
|
|
127
|
-
stroke: "currentColor",
|
|
128
|
-
strokeWidth: "2",
|
|
129
|
-
className: "inline mr-1",
|
|
130
|
-
"aria-hidden": "true",
|
|
131
|
-
children: [
|
|
132
|
-
/*#__PURE__*/ _jsx("rect", {
|
|
133
|
-
x: "2",
|
|
134
|
-
y: "3",
|
|
135
|
-
width: "20",
|
|
136
|
-
height: "14",
|
|
137
|
-
rx: "2",
|
|
138
|
-
ry: "2"
|
|
139
|
-
}),
|
|
140
|
-
/*#__PURE__*/ _jsx("path", {
|
|
141
|
-
d: "M8 21h8M12 17v4"
|
|
142
|
-
})
|
|
143
|
-
]
|
|
144
|
-
}),
|
|
145
|
-
vp.split('-')[1]?.toUpperCase()
|
|
146
|
-
]
|
|
147
|
-
}, vp)),
|
|
148
|
-
/*#__PURE__*/ _jsx("span", {
|
|
149
|
-
className: t.toolbarDivider,
|
|
150
|
-
"aria-hidden": "true"
|
|
151
|
-
}),
|
|
152
|
-
/*#__PURE__*/ _jsx("span", {
|
|
153
|
-
className: "text-xs font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mr-2",
|
|
154
|
-
children: "Theme"
|
|
155
|
-
}),
|
|
156
|
-
/*#__PURE__*/ _jsxs("button", {
|
|
157
|
-
type: "button",
|
|
158
|
-
onClick: ()=>store.setThemeMode('light'),
|
|
159
|
-
className: store.themeMode === 'light' ? t.toolbarButtonActive : t.toolbarButton,
|
|
160
|
-
children: [
|
|
161
|
-
/*#__PURE__*/ _jsxs("svg", {
|
|
78
|
+
title: `${VIEWPORT_LABELS[vp]} — ${deviceType} ${sizeLabel}`,
|
|
79
|
+
children: /*#__PURE__*/ _jsx("svg", {
|
|
162
80
|
width: "14",
|
|
163
81
|
height: "14",
|
|
164
82
|
viewBox: "0 0 24 24",
|
|
165
83
|
fill: "none",
|
|
166
84
|
stroke: "currentColor",
|
|
167
85
|
strokeWidth: "2",
|
|
168
|
-
className: "inline
|
|
86
|
+
className: "inline",
|
|
169
87
|
"aria-hidden": "true",
|
|
170
|
-
children:
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
]
|
|
180
|
-
}),
|
|
181
|
-
"Light"
|
|
182
|
-
]
|
|
88
|
+
children: /*#__PURE__*/ _jsx("path", {
|
|
89
|
+
d: VIEWPORT_ICONS[deviceType] ?? ""
|
|
90
|
+
})
|
|
91
|
+
})
|
|
92
|
+
}, vp);
|
|
93
|
+
}),
|
|
94
|
+
/*#__PURE__*/ _jsx("span", {
|
|
95
|
+
className: t.toolbarDivider,
|
|
96
|
+
"aria-hidden": "true"
|
|
183
97
|
}),
|
|
184
|
-
/*#__PURE__*/
|
|
98
|
+
/*#__PURE__*/ _jsx("button", {
|
|
185
99
|
type: "button",
|
|
186
|
-
onClick: ()=>store.setThemeMode(
|
|
187
|
-
className: store.themeMode ===
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
100
|
+
onClick: ()=>store.setThemeMode("light"),
|
|
101
|
+
className: store.themeMode === "light" ? t.toolbarButtonActive : t.toolbarButton,
|
|
102
|
+
title: "Light mode",
|
|
103
|
+
children: /*#__PURE__*/ _jsxs("svg", {
|
|
104
|
+
width: "14",
|
|
105
|
+
height: "14",
|
|
106
|
+
viewBox: "0 0 24 24",
|
|
107
|
+
fill: "none",
|
|
108
|
+
stroke: "currentColor",
|
|
109
|
+
strokeWidth: "2",
|
|
110
|
+
"aria-hidden": "true",
|
|
111
|
+
children: [
|
|
112
|
+
/*#__PURE__*/ _jsx("circle", {
|
|
113
|
+
cx: "12",
|
|
114
|
+
cy: "12",
|
|
115
|
+
r: "5"
|
|
116
|
+
}),
|
|
117
|
+
/*#__PURE__*/ _jsx("path", {
|
|
118
|
+
d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
|
|
200
119
|
})
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
120
|
+
]
|
|
121
|
+
})
|
|
122
|
+
}),
|
|
123
|
+
/*#__PURE__*/ _jsx("button", {
|
|
124
|
+
type: "button",
|
|
125
|
+
onClick: ()=>store.setThemeMode("dark"),
|
|
126
|
+
className: store.themeMode === "dark" ? t.toolbarButtonActive : t.toolbarButton,
|
|
127
|
+
title: "Dark mode",
|
|
128
|
+
children: /*#__PURE__*/ _jsx("svg", {
|
|
129
|
+
width: "14",
|
|
130
|
+
height: "14",
|
|
131
|
+
viewBox: "0 0 24 24",
|
|
132
|
+
fill: "none",
|
|
133
|
+
stroke: "currentColor",
|
|
134
|
+
strokeWidth: "2",
|
|
135
|
+
"aria-hidden": "true",
|
|
136
|
+
children: /*#__PURE__*/ _jsx("path", {
|
|
137
|
+
d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
|
|
138
|
+
})
|
|
139
|
+
})
|
|
204
140
|
}),
|
|
205
141
|
/*#__PURE__*/ _jsx("span", {
|
|
206
142
|
className: t.toolbarDivider,
|
|
207
143
|
"aria-hidden": "true"
|
|
208
144
|
}),
|
|
209
|
-
/*#__PURE__*/
|
|
145
|
+
/*#__PURE__*/ _jsx("button", {
|
|
210
146
|
type: "button",
|
|
211
147
|
onClick: ()=>store.togglePropsPanel(),
|
|
212
148
|
className: store.propsPanelOpen ? t.toolbarButtonActive : t.toolbarButton,
|
|
149
|
+
title: "Toggle props panel",
|
|
150
|
+
children: /*#__PURE__*/ _jsxs("svg", {
|
|
151
|
+
width: "14",
|
|
152
|
+
height: "14",
|
|
153
|
+
viewBox: "0 0 24 24",
|
|
154
|
+
fill: "none",
|
|
155
|
+
stroke: "currentColor",
|
|
156
|
+
strokeWidth: "2",
|
|
157
|
+
"aria-hidden": "true",
|
|
158
|
+
children: [
|
|
159
|
+
/*#__PURE__*/ _jsx("path", {
|
|
160
|
+
d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
|
|
161
|
+
}),
|
|
162
|
+
/*#__PURE__*/ _jsx("circle", {
|
|
163
|
+
cx: "12",
|
|
164
|
+
cy: "12",
|
|
165
|
+
r: "3"
|
|
166
|
+
})
|
|
167
|
+
]
|
|
168
|
+
})
|
|
169
|
+
}),
|
|
170
|
+
activeEntry && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
213
171
|
children: [
|
|
214
|
-
/*#__PURE__*/
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
className: "inline mr-1",
|
|
222
|
-
"aria-hidden": "true",
|
|
223
|
-
children: [
|
|
224
|
-
/*#__PURE__*/ _jsx("path", {
|
|
225
|
-
d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
|
|
226
|
-
}),
|
|
227
|
-
/*#__PURE__*/ _jsx("circle", {
|
|
228
|
-
cx: "12",
|
|
229
|
-
cy: "12",
|
|
230
|
-
r: "3"
|
|
231
|
-
})
|
|
232
|
-
]
|
|
172
|
+
/*#__PURE__*/ _jsx("span", {
|
|
173
|
+
className: t.toolbarDivider,
|
|
174
|
+
"aria-hidden": "true"
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ _jsx("span", {
|
|
177
|
+
className: "text-xs font-semibold text-slate-900 dark:text-slate-100",
|
|
178
|
+
children: activeEntry.name
|
|
233
179
|
}),
|
|
234
|
-
"
|
|
180
|
+
/*#__PURE__*/ _jsx("span", {
|
|
181
|
+
className: "text-[11px] text-slate-400 dark:text-slate-500 font-mono",
|
|
182
|
+
children: VIEWPORT_LABELS[store.viewportSize]
|
|
183
|
+
})
|
|
235
184
|
]
|
|
236
185
|
})
|
|
237
186
|
]
|
|
238
187
|
}),
|
|
239
188
|
/*#__PURE__*/ _jsx("section", {
|
|
240
|
-
className: cn(t.viewportFrame, isDark ?
|
|
189
|
+
className: cn(t.viewportFrame, isDark ? "bg-slate-950" : "bg-slate-100/70"),
|
|
190
|
+
style: !isDark ? {
|
|
191
|
+
backgroundImage: "radial-gradient(circle, #e2e8f0 1px, transparent 1px)",
|
|
192
|
+
backgroundSize: "20px 20px"
|
|
193
|
+
} : {
|
|
194
|
+
backgroundImage: "radial-gradient(circle, #1e293b 1px, transparent 1px)",
|
|
195
|
+
backgroundSize: "20px 20px"
|
|
196
|
+
},
|
|
241
197
|
children: activeEntry ? /*#__PURE__*/ _jsxs(_Fragment, {
|
|
242
198
|
children: [
|
|
243
|
-
/*#__PURE__*/ _jsx("p", {
|
|
244
|
-
className: t.viewportLabel,
|
|
245
|
-
children: VIEWPORT_LABELS[store.viewportSize]
|
|
246
|
-
}),
|
|
247
199
|
/*#__PURE__*/ _jsx("article", {
|
|
248
|
-
className: cn(t.componentWrapper, VIEWPORT_WIDTHS[store.viewportSize], isDark ?
|
|
249
|
-
"data-theme": isDark ? 'dark' : 'light',
|
|
200
|
+
className: cn(t.componentWrapper, VIEWPORT_WIDTHS[store.viewportSize], isDark ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200"),
|
|
250
201
|
children: /*#__PURE__*/ _jsx("section", {
|
|
251
|
-
className: isDark ?
|
|
202
|
+
className: cn(isDark ? "dark" : "", "overflow-visible"),
|
|
252
203
|
children: /*#__PURE__*/ _jsx("section", {
|
|
253
|
-
className: cn(
|
|
204
|
+
className: cn("rounded-lg overflow-visible", isDark ? "bg-slate-900 text-white" : "bg-white text-slate-900"),
|
|
254
205
|
children: activeEntry.render(resolvedProps)
|
|
255
206
|
})
|
|
256
207
|
})
|
|
@@ -296,18 +247,27 @@ export function ComponentCanvas({ registry }) {
|
|
|
296
247
|
}
|
|
297
248
|
function PropDocTable({ entry, isDark }) {
|
|
298
249
|
const t = designSystemTheme.propTable;
|
|
250
|
+
const borderColor = isDark ? "border-slate-800" : "border-slate-200";
|
|
251
|
+
const headerBg = isDark ? "bg-slate-800/80" : "bg-slate-50";
|
|
252
|
+
const headerText = isDark ? "text-slate-400" : "text-slate-500";
|
|
253
|
+
const rowHover = isDark ? "hover:bg-slate-800/40" : "hover:bg-slate-50";
|
|
254
|
+
const nameColor = isDark ? "text-sky-400" : "text-slate-900";
|
|
255
|
+
const typeColor = isDark ? "text-emerald-400" : "text-violet-700";
|
|
256
|
+
const defaultColor = isDark ? "text-slate-400" : "text-slate-500";
|
|
257
|
+
const descColor = isDark ? "text-slate-300" : "text-slate-600";
|
|
258
|
+
const tableBg = isDark ? "bg-slate-900" : "bg-white";
|
|
299
259
|
return /*#__PURE__*/ _jsxs("section", {
|
|
300
|
-
className: cn(t.container,
|
|
260
|
+
className: cn(t.container, borderColor, tableBg),
|
|
301
261
|
children: [
|
|
302
262
|
/*#__PURE__*/ _jsxs("header", {
|
|
303
|
-
className: "px-
|
|
263
|
+
className: cn("px-5 py-4 border-b", borderColor),
|
|
304
264
|
children: [
|
|
305
265
|
/*#__PURE__*/ _jsx("h3", {
|
|
306
|
-
className: "text-sm font-bold text-
|
|
266
|
+
className: cn("text-sm font-bold tracking-tight", isDark ? "text-slate-100" : "text-slate-900"),
|
|
307
267
|
children: "Props Reference"
|
|
308
268
|
}),
|
|
309
269
|
/*#__PURE__*/ _jsx("p", {
|
|
310
|
-
className: "mt-
|
|
270
|
+
className: cn("mt-1 text-xs font-mono", isDark ? "text-slate-500" : "text-slate-400"),
|
|
311
271
|
children: entry.importPath
|
|
312
272
|
})
|
|
313
273
|
]
|
|
@@ -316,27 +276,27 @@ function PropDocTable({ entry, isDark }) {
|
|
|
316
276
|
className: "w-full text-left",
|
|
317
277
|
children: [
|
|
318
278
|
/*#__PURE__*/ _jsx("thead", {
|
|
319
|
-
className: cn(t.header, isDark ? 'bg-zinc-800/60' : 'bg-zinc-50'),
|
|
320
279
|
children: /*#__PURE__*/ _jsxs("tr", {
|
|
280
|
+
className: headerBg,
|
|
321
281
|
children: [
|
|
322
282
|
/*#__PURE__*/ _jsx("th", {
|
|
323
|
-
className: t.headerCell,
|
|
283
|
+
className: cn(t.headerCell, headerText),
|
|
324
284
|
children: "Prop"
|
|
325
285
|
}),
|
|
326
286
|
/*#__PURE__*/ _jsx("th", {
|
|
327
|
-
className: t.headerCell,
|
|
287
|
+
className: cn(t.headerCell, headerText),
|
|
328
288
|
children: "Type"
|
|
329
289
|
}),
|
|
330
290
|
/*#__PURE__*/ _jsx("th", {
|
|
331
|
-
className: t.headerCell,
|
|
291
|
+
className: cn(t.headerCell, headerText),
|
|
332
292
|
children: "Default"
|
|
333
293
|
}),
|
|
334
294
|
/*#__PURE__*/ _jsx("th", {
|
|
335
|
-
className: t.headerCell,
|
|
295
|
+
className: cn(t.headerCell, headerText),
|
|
336
296
|
children: "Required"
|
|
337
297
|
}),
|
|
338
298
|
/*#__PURE__*/ _jsx("th", {
|
|
339
|
-
className: t.headerCell,
|
|
299
|
+
className: cn(t.headerCell, headerText),
|
|
340
300
|
children: "Description"
|
|
341
301
|
})
|
|
342
302
|
]
|
|
@@ -344,19 +304,19 @@ function PropDocTable({ entry, isDark }) {
|
|
|
344
304
|
}),
|
|
345
305
|
/*#__PURE__*/ _jsx("tbody", {
|
|
346
306
|
children: entry.props.map((prop)=>/*#__PURE__*/ _jsxs("tr", {
|
|
347
|
-
className: cn(t.row,
|
|
307
|
+
className: cn(t.row, borderColor, rowHover),
|
|
348
308
|
children: [
|
|
349
309
|
/*#__PURE__*/ _jsx("td", {
|
|
350
|
-
className: cn(t.cell, t.propName),
|
|
310
|
+
className: cn(t.cell, t.propName, nameColor),
|
|
351
311
|
children: prop.name
|
|
352
312
|
}),
|
|
353
313
|
/*#__PURE__*/ _jsx("td", {
|
|
354
|
-
className: cn(t.cell, t.propType),
|
|
355
|
-
children: prop.type ===
|
|
314
|
+
className: cn(t.cell, t.propType, typeColor),
|
|
315
|
+
children: prop.type === "select" && prop.options ? prop.options.map((o)=>`'${o.value}'`).join(" | ") : prop.type === "boolean" ? "boolean" : prop.type === "number" ? "number" : "string"
|
|
356
316
|
}),
|
|
357
317
|
/*#__PURE__*/ _jsx("td", {
|
|
358
|
-
className: cn(t.cell, t.propDefault),
|
|
359
|
-
children: prop.defaultValue === null ?
|
|
318
|
+
className: cn(t.cell, t.propDefault, defaultColor),
|
|
319
|
+
children: prop.defaultValue === null ? "—" : typeof prop.defaultValue === "boolean" ? String(prop.defaultValue) : typeof prop.defaultValue === "string" ? `"${prop.defaultValue}"` : String(prop.defaultValue)
|
|
360
320
|
}),
|
|
361
321
|
/*#__PURE__*/ _jsx("td", {
|
|
362
322
|
className: t.cell,
|
|
@@ -366,7 +326,7 @@ function PropDocTable({ entry, isDark }) {
|
|
|
366
326
|
})
|
|
367
327
|
}),
|
|
368
328
|
/*#__PURE__*/ _jsx("td", {
|
|
369
|
-
className: cn(t.cell, t.propDescription),
|
|
329
|
+
className: cn(t.cell, t.propDescription, descColor),
|
|
370
330
|
children: prop.description
|
|
371
331
|
})
|
|
372
332
|
]
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { ComponentEntry } from
|
|
1
|
+
import type { ComponentEntry } from "../types";
|
|
2
2
|
export declare function createDefaultRegistry(): ComponentEntry[];
|