nucleus-core-ts 0.9.22 → 0.9.23

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 (4) hide show
  1. package/dist/fe/components/DesignSystem/components/ComponentCanvas.d.ts +1 -1
  2. package/dist/fe/components/DesignSystem/components/ComponentCanvas.js +156 -196
  3. package/dist/fe/components/DesignSystem/theme/index.js +51 -51
  4. package/package.json +1 -1
package/dist/fe/components/DesignSystem/components/ComponentCanvas.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ComponentEntry } from '../types';
1
+ import type { ComponentEntry } from "../types";
2
2
  type ComponentCanvasProps = {
3
3
  registry: ComponentEntry[];
4
4
  };
package/dist/fe/components/DesignSystem/components/ComponentCanvas.js CHANGED
@@ -1,32 +1,37 @@
1
- 'use client';
1
+ "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { cn } from '../../../utils/cn';
4
- import { useDesignSystemStore } from '../store';
5
- import { designSystemTheme } from '../theme';
3
+ import { cn } from "../../../utils/cn";
4
+ import { useDesignSystemStore } from "../store";
5
+ import { designSystemTheme } from "../theme";
6
6
  const VIEWPORT_WIDTHS = {
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'
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
- 'mobile-sm': '320px — Phone S',
16
- 'mobile-lg': '428px — Phone L',
17
- 'tablet-sm': '768px — Tablet S',
18
- 'tablet-lg': '1024px — Tablet L',
19
- 'desktop-sm': '1280px — Desktop S',
20
- 'desktop-lg': 'Full — Desktop L'
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
- 'mobile-sm',
24
- 'mobile-lg',
25
- 'tablet-sm',
26
- 'tablet-lg',
27
- 'desktop-sm',
28
- 'desktop-lg'
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 === 'dark';
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-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800",
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
- /*#__PURE__*/ _jsx("span", {
67
- className: "text-xs font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mr-2",
68
- children: "Viewport"
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 mr-1",
86
+ className: "inline",
169
87
  "aria-hidden": "true",
170
- children: [
171
- /*#__PURE__*/ _jsx("circle", {
172
- cx: "12",
173
- cy: "12",
174
- r: "5"
175
- }),
176
- /*#__PURE__*/ _jsx("path", {
177
- 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"
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__*/ _jsxs("button", {
98
+ /*#__PURE__*/ _jsx("button", {
185
99
  type: "button",
186
- onClick: ()=>store.setThemeMode('dark'),
187
- className: store.themeMode === 'dark' ? t.toolbarButtonActive : t.toolbarButton,
188
- children: [
189
- /*#__PURE__*/ _jsx("svg", {
190
- width: "14",
191
- height: "14",
192
- viewBox: "0 0 24 24",
193
- fill: "none",
194
- stroke: "currentColor",
195
- strokeWidth: "2",
196
- className: "inline mr-1",
197
- "aria-hidden": "true",
198
- children: /*#__PURE__*/ _jsx("path", {
199
- d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
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
- "Dark"
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__*/ _jsxs("button", {
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__*/ _jsxs("svg", {
215
- width: "14",
216
- height: "14",
217
- viewBox: "0 0 24 24",
218
- fill: "none",
219
- stroke: "currentColor",
220
- strokeWidth: "2",
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
- "Props"
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 ? 'bg-zinc-950' : 'bg-zinc-100'),
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 ? 'bg-zinc-900 border-zinc-800' : 'bg-white border-zinc-200'),
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 ? 'dark' : '',
202
+ className: isDark ? "dark" : "",
252
203
  children: /*#__PURE__*/ _jsx("section", {
253
- className: cn('p-4 rounded-lg', isDark ? 'bg-zinc-900 text-white' : 'bg-white text-zinc-900'),
204
+ className: cn("rounded-lg", 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, isDark ? 'border-zinc-800' : 'border-zinc-200'),
260
+ className: cn(t.container, borderColor, tableBg),
301
261
  children: [
302
262
  /*#__PURE__*/ _jsxs("header", {
303
- className: "px-4 py-3 border-b border-zinc-200 dark:border-zinc-800",
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-zinc-900 dark:text-white uppercase tracking-wider",
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-0.5 text-xs text-zinc-500 dark:text-zinc-400 font-mono",
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, isDark ? 'border-zinc-800/60 hover:bg-zinc-800/30' : ''),
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 === 'select' && prop.options ? prop.options.map((o)=>`'${o.value}'`).join(' | ') : prop.type === 'boolean' ? 'boolean' : prop.type === 'number' ? 'number' : 'string'
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 ? '—' : typeof prop.defaultValue === 'boolean' ? String(prop.defaultValue) : typeof prop.defaultValue === 'string' ? `"${prop.defaultValue}"` : String(prop.defaultValue)
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
  ]
package/dist/fe/components/DesignSystem/theme/index.js CHANGED
@@ -1,69 +1,69 @@
1
1
  export const designSystemTheme = {
2
2
  layout: {
3
- container: 'relative min-h-screen w-full bg-zinc-50 dark:bg-zinc-950',
3
+ container: 'relative min-h-screen w-full bg-white dark:bg-slate-950',
4
4
  wrapper: 'flex h-screen overflow-hidden'
5
5
  },
6
6
  sidebar: {
7
- container: 'flex flex-col w-72 h-full border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shrink-0 overflow-y-auto',
8
- header: 'sticky top-0 z-10 bg-white dark:bg-zinc-900 px-4 pt-5 pb-3 border-b border-zinc-100 dark:border-zinc-800',
9
- title: 'text-lg font-bold tracking-tight text-zinc-900 dark:text-white',
10
- searchInput: 'mt-3 w-full px-3 py-2 text-sm rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 dark:focus:ring-white/10 transition-shadow',
11
- categoryButton: 'px-2.5 py-1 text-xs font-medium rounded-md transition-colors text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800',
12
- categoryButtonActive: 'px-2.5 py-1 text-xs font-medium rounded-md bg-zinc-900 dark:bg-white text-white dark:text-zinc-900',
7
+ container: 'flex flex-col w-64 h-full border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 shrink-0 overflow-y-auto',
8
+ header: 'sticky top-0 z-10 bg-slate-50 dark:bg-slate-900 px-4 pt-5 pb-3 border-b border-slate-200 dark:border-slate-800',
9
+ title: 'text-base font-semibold text-slate-900 dark:text-slate-100',
10
+ searchInput: 'mt-3 w-full px-3 py-2 text-sm rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 dark:focus:ring-blue-400/30 dark:focus:border-blue-400 transition-all',
11
+ categoryButton: 'px-2.5 py-1 text-xs font-medium rounded-md transition-colors text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800',
12
+ categoryButtonActive: 'px-2.5 py-1 text-xs font-medium rounded-md bg-blue-600 text-white dark:bg-blue-500 dark:text-white',
13
13
  componentItem: 'flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-all duration-150 border-l-2 border-transparent',
14
- componentItemActive: 'bg-zinc-50 dark:bg-zinc-800/60 border-l-2 border-zinc-900 dark:border-white',
15
- componentItemHover: 'hover:bg-zinc-50 dark:hover:bg-zinc-800/40',
16
- componentName: 'text-sm font-medium text-zinc-700 dark:text-zinc-300',
17
- componentCategory: 'text-[10px] uppercase tracking-wider text-zinc-400 dark:text-zinc-500 font-medium',
18
- mobileToggle: 'fixed top-4 left-4 z-50 p-2 rounded-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 shadow-lg lg:hidden',
19
- overlay: 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden'
14
+ componentItemActive: 'bg-blue-50 dark:bg-blue-500/10 border-l-2 !border-blue-600 dark:!border-blue-400',
15
+ componentItemHover: 'hover:bg-slate-100 dark:hover:bg-slate-800/60',
16
+ componentName: 'text-sm font-medium text-slate-800 dark:text-slate-200',
17
+ componentCategory: 'text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium',
18
+ mobileToggle: 'fixed top-4 left-4 z-50 p-2 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-lg lg:hidden',
19
+ overlay: 'fixed inset-0 z-40 bg-black/30 backdrop-blur-sm lg:hidden'
20
20
  },
21
21
  canvas: {
22
22
  container: 'flex-1 flex flex-col min-w-0 overflow-hidden',
23
- toolbar: 'flex items-center gap-2 px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shrink-0 flex-wrap',
24
- toolbarButton: 'px-3 py-1.5 text-xs font-medium rounded-md transition-colors text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800',
25
- toolbarButtonActive: 'px-3 py-1.5 text-xs font-medium rounded-md bg-zinc-900 dark:bg-white text-white dark:text-zinc-900',
26
- toolbarDivider: 'w-px h-5 bg-zinc-200 dark:bg-zinc-700 mx-1',
27
- viewportFrame: 'flex-1 overflow-auto p-6 transition-all duration-300',
28
- viewportLabel: 'mb-3 text-[11px] uppercase tracking-wider font-medium text-zinc-400 dark:text-zinc-500',
29
- componentWrapper: 'mx-auto bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm p-8 transition-all duration-300 overflow-auto',
23
+ toolbar: 'flex items-center gap-1.5 px-4 py-2.5 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shrink-0 flex-wrap',
24
+ toolbarButton: 'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800',
25
+ toolbarButtonActive: 'px-2.5 py-1.5 text-xs font-medium rounded-md bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900',
26
+ toolbarDivider: 'w-px h-5 bg-slate-200 dark:bg-slate-700 mx-1.5',
27
+ viewportFrame: 'flex-1 overflow-auto p-8 transition-all duration-300',
28
+ viewportLabel: 'mb-4 text-[11px] uppercase tracking-widest font-semibold text-slate-400 dark:text-slate-500',
29
+ componentWrapper: 'mx-auto rounded-xl border shadow-sm p-8 transition-all duration-300 overflow-auto',
30
30
  emptyState: 'flex flex-col items-center justify-center h-full text-center py-24',
31
- emptyIcon: 'w-16 h-16 text-zinc-300 dark:text-zinc-700 mb-4',
32
- emptyText: 'text-sm text-zinc-400 dark:text-zinc-500'
31
+ emptyIcon: 'w-16 h-16 text-slate-200 dark:text-slate-700 mb-4',
32
+ emptyText: 'text-sm text-slate-400 dark:text-slate-500 max-w-xs'
33
33
  },
34
34
  propsPanel: {
35
- container: 'w-80 h-full border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shrink-0 overflow-y-auto',
36
- header: 'sticky top-0 z-10 bg-white dark:bg-zinc-900 px-4 pt-5 pb-3 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between',
37
- title: 'text-sm font-bold tracking-tight text-zinc-900 dark:text-white uppercase',
38
- sectionTitle: 'px-4 pt-4 pb-2 text-[11px] uppercase tracking-wider font-semibold text-zinc-400 dark:text-zinc-500',
39
- controlRow: 'px-4 py-2.5 border-b border-zinc-50 dark:border-zinc-800/50',
40
- controlLabel: 'text-xs font-medium text-zinc-700 dark:text-zinc-300',
41
- controlDescription: 'text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5',
42
- textInput: 'mt-1.5 w-full px-2.5 py-1.5 text-xs rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-zinc-400 dark:focus:ring-zinc-500 transition-shadow',
43
- numberInput: 'mt-1.5 w-full px-2.5 py-1.5 text-xs rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-zinc-400 dark:focus:ring-zinc-500 transition-shadow',
44
- selectInput: 'mt-1.5 w-full px-2.5 py-1.5 text-xs rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-zinc-400 dark:focus:ring-zinc-500 transition-shadow appearance-none cursor-pointer',
45
- booleanToggle: 'mt-1.5 relative w-9 h-5 rounded-full cursor-pointer transition-colors duration-200 bg-zinc-200 dark:bg-zinc-700',
46
- booleanToggleActive: 'mt-1.5 relative w-9 h-5 rounded-full cursor-pointer transition-colors duration-200 bg-zinc-900 dark:bg-white',
35
+ container: 'w-80 h-full border-l border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 shrink-0 overflow-y-auto',
36
+ header: 'sticky top-0 z-10 bg-slate-50 dark:bg-slate-900 px-4 pt-5 pb-3 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between',
37
+ title: 'text-xs font-semibold tracking-widest text-slate-500 dark:text-slate-400 uppercase',
38
+ sectionTitle: 'px-4 pt-5 pb-2 text-[10px] uppercase tracking-widest font-bold text-slate-400 dark:text-slate-500',
39
+ controlRow: 'px-4 py-3 border-b border-slate-100 dark:border-slate-800/60',
40
+ controlLabel: 'block text-xs font-semibold text-slate-700 dark:text-slate-300',
41
+ controlDescription: 'text-[11px] text-slate-400 dark:text-slate-500 mt-0.5 leading-relaxed',
42
+ textInput: 'mt-2 w-full px-3 py-2 text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 dark:focus:ring-blue-400/30 dark:focus:border-blue-400 transition-all',
43
+ numberInput: 'mt-2 w-full px-3 py-2 text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 dark:focus:ring-blue-400/30 dark:focus:border-blue-400 transition-all',
44
+ selectInput: 'mt-2 w-full px-3 py-2 text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 dark:focus:ring-blue-400/30 dark:focus:border-blue-400 transition-all appearance-none cursor-pointer',
45
+ booleanToggle: 'mt-2 relative w-10 h-[22px] rounded-full cursor-pointer transition-colors duration-200 bg-slate-300 dark:bg-slate-600',
46
+ booleanToggleActive: 'mt-2 relative w-10 h-[22px] rounded-full cursor-pointer transition-colors duration-200 bg-blue-600 dark:bg-blue-500',
47
47
  booleanTrack: '',
48
- booleanThumb: 'absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white dark:bg-zinc-900 shadow-sm transition-transform duration-200',
49
- rangeInput: 'mt-1.5 w-full accent-zinc-900 dark:accent-white',
50
- resetButton: 'px-3 py-1.5 text-xs font-medium rounded-md text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors',
51
- exampleCard: 'mx-4 mb-2 px-3 py-2.5 rounded-lg border border-zinc-100 dark:border-zinc-800 cursor-pointer transition-all hover:border-zinc-300 dark:hover:border-zinc-600',
52
- exampleCardActive: 'mx-4 mb-2 px-3 py-2.5 rounded-lg border-2 border-zinc-900 dark:border-white cursor-pointer bg-zinc-50 dark:bg-zinc-800/50',
53
- exampleTitle: 'text-xs font-medium text-zinc-700 dark:text-zinc-300',
54
- exampleDescription: 'text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5'
48
+ booleanThumb: 'absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200',
49
+ rangeInput: 'mt-2 w-full accent-blue-600 dark:accent-blue-400',
50
+ resetButton: 'px-3 py-1.5 text-xs font-medium rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-700 transition-colors',
51
+ exampleCard: 'mx-4 mb-2 px-3 py-2.5 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer transition-all hover:border-slate-400 dark:hover:border-slate-500 hover:bg-white dark:hover:bg-slate-800/50',
52
+ exampleCardActive: 'mx-4 mb-2 px-3 py-2.5 rounded-lg border-2 border-blue-600 dark:border-blue-400 cursor-pointer bg-blue-50 dark:bg-blue-500/10',
53
+ exampleTitle: 'text-xs font-semibold text-slate-800 dark:text-slate-200',
54
+ exampleDescription: 'text-[11px] text-slate-400 dark:text-slate-500 mt-0.5'
55
55
  },
56
56
  propTable: {
57
- container: 'mt-6 mx-auto w-full overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800',
58
- header: 'bg-zinc-50 dark:bg-zinc-800/60',
59
- headerCell: 'px-4 py-2.5 text-left text-[11px] uppercase tracking-wider font-semibold text-zinc-500 dark:text-zinc-400',
60
- row: 'border-t border-zinc-100 dark:border-zinc-800/60 hover:bg-zinc-50/50 dark:hover:bg-zinc-800/30 transition-colors',
61
- cell: 'px-4 py-2.5 text-xs',
62
- propName: 'font-mono font-semibold text-zinc-900 dark:text-white',
63
- propType: 'font-mono text-amber-600 dark:text-amber-400',
64
- propDefault: 'font-mono text-zinc-500 dark:text-zinc-400',
65
- propRequired: 'inline-flex px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
66
- propDescription: 'text-zinc-600 dark:text-zinc-400'
57
+ container: 'mt-8 mx-auto w-full overflow-x-auto rounded-xl border shadow-sm',
58
+ header: '',
59
+ headerCell: 'px-5 py-3 text-left text-[11px] uppercase tracking-widest font-bold',
60
+ row: 'border-t transition-colors',
61
+ cell: 'px-5 py-3 text-[13px]',
62
+ propName: 'font-mono font-bold',
63
+ propType: 'font-mono',
64
+ propDefault: 'font-mono',
65
+ propRequired: 'inline-flex px-2 py-0.5 rounded-md text-[10px] font-bold bg-rose-100 dark:bg-rose-500/15 text-rose-700 dark:text-rose-400',
66
+ propDescription: ''
67
67
  }
68
68
  };
69
69
  export function extendDesignSystemTheme(overrides) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nucleus-core-ts",
3
- "version": "0.9.22",
3
+ "version": "0.9.23",
4
4
  "description": "Production-ready, enterprise-grade TypeScript framework for building multi-tenant APIs",
5
5
  "author": "Hidayet Can Özcan <hidayetcan@gmail.com>",
6
6
  "license": "SEE LICENSE IN LICENSE",