gladvn 0.2.36 → 0.2.37

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 (134) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/scripts/strip-comments.ts +79 -0
  4. package/src/blocks/auth-form.tsx +34 -30
  5. package/src/blocks/auth-recovery.tsx +9 -13
  6. package/src/blocks/auth-split.tsx +46 -36
  7. package/src/blocks/settings.tsx +84 -117
  8. package/src/components/macro/alert-preset.tsx +3 -1
  9. package/src/components/macro/carousel-preset.tsx +0 -1
  10. package/src/components/macro/checkbox-preset.test.tsx +2 -2
  11. package/src/components/macro/checkbox-preset.tsx +1 -2
  12. package/src/components/macro/command-preset.tsx +1 -1
  13. package/src/components/macro/date-picker.tsx +5 -18
  14. package/src/components/macro/dialog-preset.tsx +5 -3
  15. package/src/components/macro/input-preset.tsx +0 -1
  16. package/src/components/macro/select-preset.tsx +1 -1
  17. package/src/components/macro/switch-preset.test.tsx +1 -1
  18. package/src/components/micro/accordion.test.tsx +6 -12
  19. package/src/components/micro/alert-dialog.tsx +0 -2
  20. package/src/components/micro/alert.test.tsx +5 -8
  21. package/src/components/micro/alert.tsx +0 -2
  22. package/src/components/micro/badge.test.tsx +5 -7
  23. package/src/components/micro/badge.tsx +1 -3
  24. package/src/components/micro/button.test.tsx +19 -26
  25. package/src/components/micro/button.tsx +3 -11
  26. package/src/components/micro/calendar.tsx +12 -13
  27. package/src/components/micro/card.test.tsx +3 -5
  28. package/src/components/micro/carousel.tsx +0 -1
  29. package/src/components/micro/chart.tsx +3 -2
  30. package/src/components/micro/checkbox.test.tsx +9 -18
  31. package/src/components/micro/combobox.tsx +1 -3
  32. package/src/components/micro/command.tsx +23 -11
  33. package/src/components/micro/context-menu.tsx +0 -2
  34. package/src/components/micro/dialog.test.tsx +6 -14
  35. package/src/components/micro/dialog.tsx +0 -2
  36. package/src/components/micro/drawer.tsx +0 -3
  37. package/src/components/micro/dropdown-menu.test.tsx +8 -14
  38. package/src/components/micro/dropdown-menu.tsx +0 -2
  39. package/src/components/micro/field.tsx +3 -3
  40. package/src/components/micro/hover-card.tsx +0 -2
  41. package/src/components/micro/input-group.tsx +9 -42
  42. package/src/components/micro/input.test.tsx +15 -24
  43. package/src/components/micro/navigation-menu.tsx +0 -2
  44. package/src/components/micro/popover.test.tsx +5 -9
  45. package/src/components/micro/progress.tsx +5 -1
  46. package/src/components/micro/select.test.tsx +5 -18
  47. package/src/components/micro/select.tsx +3 -5
  48. package/src/components/micro/separator.tsx +1 -1
  49. package/src/components/micro/sheet.test.tsx +6 -14
  50. package/src/components/micro/sheet.tsx +0 -2
  51. package/src/components/micro/sidebar.tsx +5 -6
  52. package/src/components/micro/sonner.tsx +0 -1
  53. package/src/components/micro/switch.test.tsx +9 -18
  54. package/src/components/micro/switch.tsx +1 -1
  55. package/src/components/micro/tabs.test.tsx +5 -11
  56. package/src/components/micro/theme-provider.tsx +0 -12
  57. package/src/components/micro/toggle-group.tsx +1 -12
  58. package/src/components/micro/tooltip.test.tsx +7 -12
  59. package/src/dev/App.tsx +6 -6
  60. package/src/dev/components/BlockViewer.tsx +15 -4
  61. package/src/dev/components/Container.tsx +20 -0
  62. package/src/dev/components/GladvnLogo.tsx +3 -9
  63. package/src/dev/components/code-highlighter.tsx +5 -3
  64. package/src/dev/components/showcase.tsx +116 -168
  65. package/src/dev/sections/buttons.tsx +4 -9
  66. package/src/dev/sections/display.tsx +68 -72
  67. package/src/dev/sections/feedback.tsx +304 -314
  68. package/src/dev/sections/forms.tsx +10 -14
  69. package/src/dev/sections/interactive.tsx +32 -32
  70. package/src/dev/sections/overview.tsx +2 -10
  71. package/src/dev/showcase/accordion.tsx +512 -554
  72. package/src/dev/showcase/alert-dialog.tsx +525 -565
  73. package/src/dev/showcase/alert.tsx +352 -402
  74. package/src/dev/showcase/aspect-ratio.tsx +167 -193
  75. package/src/dev/showcase/avatar.tsx +231 -269
  76. package/src/dev/showcase/badge.tsx +92 -140
  77. package/src/dev/showcase/breadcrumb.tsx +113 -135
  78. package/src/dev/showcase/button.tsx +140 -173
  79. package/src/dev/showcase/calendar.tsx +187 -237
  80. package/src/dev/showcase/card.tsx +229 -261
  81. package/src/dev/showcase/carousel.tsx +288 -315
  82. package/src/dev/showcase/chart.tsx +44 -50
  83. package/src/dev/showcase/checkbox.tsx +286 -330
  84. package/src/dev/showcase/collapsible.tsx +143 -160
  85. package/src/dev/showcase/combobox.tsx +327 -369
  86. package/src/dev/showcase/command.tsx +106 -120
  87. package/src/dev/showcase/context-menu.tsx +93 -107
  88. package/src/dev/showcase/dialog.tsx +585 -630
  89. package/src/dev/showcase/drawer.tsx +176 -196
  90. package/src/dev/showcase/dropdown-menu.tsx +183 -201
  91. package/src/dev/showcase/empty.tsx +232 -274
  92. package/src/dev/showcase/hover-card.tsx +153 -180
  93. package/src/dev/showcase/input-group.tsx +221 -253
  94. package/src/dev/showcase/input-otp.tsx +204 -250
  95. package/src/dev/showcase/input.tsx +246 -325
  96. package/src/dev/showcase/item.tsx +134 -152
  97. package/src/dev/showcase/kbd.tsx +149 -172
  98. package/src/dev/showcase/label.tsx +50 -68
  99. package/src/dev/showcase/menubar.tsx +194 -213
  100. package/src/dev/showcase/navigation-menu.tsx +119 -133
  101. package/src/dev/showcase/overview-components/ArchitectureSection.tsx +126 -0
  102. package/src/dev/showcase/overview-components/CodeBlock.tsx +50 -0
  103. package/src/dev/showcase/overview-components/ColorPaletteSection.tsx +44 -0
  104. package/src/dev/showcase/overview-components/DashboardPreview.tsx +159 -0
  105. package/src/dev/showcase/overview-components/FeatureGridSection.tsx +535 -0
  106. package/src/dev/showcase/overview-components/FooterCTA.tsx +137 -0
  107. package/src/dev/showcase/overview-components/HeroSection.tsx +65 -0
  108. package/src/dev/showcase/overview-components/PrinciplesSection.tsx +128 -0
  109. package/src/dev/showcase/overview.tsx +21 -1163
  110. package/src/dev/showcase/pagination.tsx +144 -190
  111. package/src/dev/showcase/popover.tsx +181 -196
  112. package/src/dev/showcase/progress.tsx +141 -189
  113. package/src/dev/showcase/radio-group.tsx +272 -332
  114. package/src/dev/showcase/resizable.tsx +119 -141
  115. package/src/dev/showcase/scroll-area.tsx +21 -36
  116. package/src/dev/showcase/select.tsx +262 -322
  117. package/src/dev/showcase/separator.tsx +75 -73
  118. package/src/dev/showcase/sheet.tsx +333 -361
  119. package/src/dev/showcase/sidebar.tsx +53 -59
  120. package/src/dev/showcase/skeleton.tsx +93 -112
  121. package/src/dev/showcase/slider.tsx +244 -296
  122. package/src/dev/showcase/sonner.tsx +251 -258
  123. package/src/dev/showcase/spinner.tsx +46 -67
  124. package/src/dev/showcase/switch.tsx +298 -362
  125. package/src/dev/showcase/table.tsx +76 -80
  126. package/src/dev/showcase/tabs.tsx +302 -355
  127. package/src/dev/showcase/textarea.tsx +240 -293
  128. package/src/dev/showcase/toast.tsx +48 -54
  129. package/src/dev/showcase/toggle-group.tsx +104 -129
  130. package/src/dev/showcase/toggle.tsx +82 -102
  131. package/src/dev/showcase/tooltip.tsx +173 -192
  132. package/src/dev/showcase/why.tsx +6 -12
  133. package/src/hooks/use-mobile.test.ts +3 -2
  134. package/src/lib/utils.test.ts +5 -4
package/src/dev/showcase/menubar.tsx CHANGED
@@ -21,28 +21,21 @@ import {
21
21
  import {
22
22
  DocsP,
23
23
  ExampleGrid,
24
- ExampleSection,
24
+ ShowcaseExample,
25
25
  Showcase,
26
26
  ShowcaseDocs
27
27
  } from "../../dev/components/showcase";
28
28
 
29
- // ──────────────────────────────────────────────────────────
30
- // SECTION 1: Micro Content
31
- // ──────────────────────────────────────────────────────────
32
29
  function MenubarMicroShowcase() {
33
30
  const [showBookmarks, setShowBookmarks] = useState(true);
34
31
  const [showFullUrls, setShowFullUrls] = useState(false);
35
32
  const [profile, setProfile] = useState("pedro");
36
33
 
37
34
  return (
38
- <div className="space-y-10 mt-6">
39
- {/* Full Demo */}
40
- <ExampleSection
41
- label="Full Menubar"
42
- description="Thanh menu đầy đủ: Items, Checkbox, Radio, Submenu, Shortcut, Separator."
43
- codeString={`<Menubar className="w-fit">
35
+ <div className="space-y-10">
36
+ <ShowcaseExample title="Full Menubar" description="Thanh menu đầy đủ: Items, Checkbox, Radio, Submenu, Shortcut, Separator." code={`<Menubar className="w-fit">
44
37
  <MenubarMenu>
45
- <MenubarTrigger>File</MenubarTrigger>
38
+ <MenubarTrigger>Tệp</MenubarTrigger>
46
39
  <MenubarContent>
47
40
  <MenubarItem>
48
41
  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
@@ -55,11 +48,11 @@ function MenubarMicroShowcase() {
55
48
  </MenubarItem>
56
49
  <MenubarSeparator />
57
50
  <MenubarSub>
58
- <MenubarSubTrigger>Share</MenubarSubTrigger>
51
+ <MenubarSubTrigger>Chia sẻ</MenubarSubTrigger>
59
52
  <MenubarSubContent>
60
53
  <MenubarItem>Email link</MenubarItem>
61
- <MenubarItem>Messages</MenubarItem>
62
- <MenubarItem>Notes</MenubarItem>
54
+ <MenubarItem>Tin nhắn</MenubarItem>
55
+ <MenubarItem>Ghi chú</MenubarItem>
63
56
  </MenubarSubContent>
64
57
  </MenubarSub>
65
58
  <MenubarSeparator />
@@ -69,7 +62,7 @@ function MenubarMicroShowcase() {
69
62
  </MenubarContent>
70
63
  </MenubarMenu>
71
64
  <MenubarMenu>
72
- <MenubarTrigger>View</MenubarTrigger>
65
+ <MenubarTrigger>Xem</MenubarTrigger>
73
66
  <MenubarContent>
74
67
  <MenubarCheckboxItem
75
68
  checked={showBookmarks}
@@ -120,93 +113,90 @@ function MenubarMicroShowcase() {
120
113
  <MenubarItem inset>Add Profile...</MenubarItem>
121
114
  </MenubarContent>
122
115
  </MenubarMenu>
123
- </Menubar>`}
124
- >
125
- <Menubar className="w-fit">
126
- <MenubarMenu>
127
- <MenubarTrigger>File</MenubarTrigger>
128
-
129
- <MenubarContent>
130
- <MenubarItem>
131
- New Tab <MenubarShortcut>⌘T</MenubarShortcut>
132
- </MenubarItem>
133
- <MenubarItem>
134
- New Window <MenubarShortcut>⌘N</MenubarShortcut>
135
- </MenubarItem>
136
- <MenubarItem disabled>New Incognito Window</MenubarItem>
137
- <MenubarSeparator />
138
- <MenubarSub>
139
- <MenubarSubTrigger>Share</MenubarSubTrigger>
140
- <MenubarSubContent>
141
- <MenubarItem>Email link</MenubarItem>
142
- <MenubarItem>Messages</MenubarItem>
143
- <MenubarItem>Notes</MenubarItem>
144
- </MenubarSubContent>
145
- </MenubarSub>
146
- <MenubarSeparator />
147
- <MenubarItem>
148
- Print... <MenubarShortcut>⌘P</MenubarShortcut>
149
- </MenubarItem>
150
- </MenubarContent>
151
-
152
- </MenubarMenu>
153
- <MenubarMenu>
154
- <MenubarTrigger>View</MenubarTrigger>
155
-
156
- <MenubarContent>
157
- <MenubarCheckboxItem
158
- checked={showBookmarks}
159
- onCheckedChange={setShowBookmarks}
160
- >
161
- Always Show Bookmarks Bar
162
- </MenubarCheckboxItem>
163
- <MenubarCheckboxItem
164
- checked={showFullUrls}
165
- onCheckedChange={setShowFullUrls}
166
- >
167
- Always Show Full URLs
168
- </MenubarCheckboxItem>
169
- <MenubarSeparator />
170
- <MenubarItem inset>
171
- Reload <MenubarShortcut>⌘R</MenubarShortcut>
172
- </MenubarItem>
173
- <MenubarItem disabled inset>
174
- Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
175
- </MenubarItem>
176
- </MenubarContent>
177
-
178
- </MenubarMenu>
179
- <MenubarMenu>
180
- <MenubarTrigger>Profiles</MenubarTrigger>
181
-
182
- <MenubarContent>
183
- <MenubarGroup>
184
- <MenubarLabel inset>Select Profile</MenubarLabel>
185
- <MenubarSeparator />
186
- <MenubarRadioGroup value={profile} onValueChange={setProfile}>
187
- <MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
188
- <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
189
- <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
190
- </MenubarRadioGroup>
191
- </MenubarGroup>
192
- <MenubarSeparator />
193
- <MenubarItem inset>Edit...</MenubarItem>
194
- <MenubarSeparator />
195
- <MenubarItem inset>Add Profile...</MenubarItem>
196
- </MenubarContent>
197
-
198
- </MenubarMenu>
199
- </Menubar>
200
- </ExampleSection>
116
+ </Menubar>`} preview={
117
+ <>
118
+ <Menubar className="w-fit">
119
+ <MenubarMenu>
120
+ <MenubarTrigger>Tệp</MenubarTrigger>
121
+
122
+ <MenubarContent>
123
+ <MenubarItem>
124
+ New Tab <MenubarShortcut>⌘T</MenubarShortcut>
125
+ </MenubarItem>
126
+ <MenubarItem>
127
+ New Window <MenubarShortcut>⌘N</MenubarShortcut>
128
+ </MenubarItem>
129
+ <MenubarItem disabled>New Incognito Window</MenubarItem>
130
+ <MenubarSeparator />
131
+ <MenubarSub>
132
+ <MenubarSubTrigger>Chia sẻ</MenubarSubTrigger>
133
+ <MenubarSubContent>
134
+ <MenubarItem>Email link</MenubarItem>
135
+ <MenubarItem>Tin nhắn</MenubarItem>
136
+ <MenubarItem>Ghi chú</MenubarItem>
137
+ </MenubarSubContent>
138
+ </MenubarSub>
139
+ <MenubarSeparator />
140
+ <MenubarItem>
141
+ Print... <MenubarShortcut>⌘P</MenubarShortcut>
142
+ </MenubarItem>
143
+ </MenubarContent>
144
+
145
+ </MenubarMenu>
146
+ <MenubarMenu>
147
+ <MenubarTrigger>Xem</MenubarTrigger>
148
+
149
+ <MenubarContent>
150
+ <MenubarCheckboxItem
151
+ checked={showBookmarks}
152
+ onCheckedChange={setShowBookmarks}
153
+ >
154
+ Always Show Bookmarks Bar
155
+ </MenubarCheckboxItem>
156
+ <MenubarCheckboxItem
157
+ checked={showFullUrls}
158
+ onCheckedChange={setShowFullUrls}
159
+ >
160
+ Always Show Full URLs
161
+ </MenubarCheckboxItem>
162
+ <MenubarSeparator />
163
+ <MenubarItem inset>
164
+ Reload <MenubarShortcut>⌘R</MenubarShortcut>
165
+ </MenubarItem>
166
+ <MenubarItem disabled inset>
167
+ Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
168
+ </MenubarItem>
169
+ </MenubarContent>
170
+
171
+ </MenubarMenu>
172
+ <MenubarMenu>
173
+ <MenubarTrigger>Profiles</MenubarTrigger>
174
+
175
+ <MenubarContent>
176
+ <MenubarGroup>
177
+ <MenubarLabel inset>Select Profile</MenubarLabel>
178
+ <MenubarSeparator />
179
+ <MenubarRadioGroup value={profile} onValueChange={setProfile}>
180
+ <MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
181
+ <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
182
+ <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
183
+ </MenubarRadioGroup>
184
+ </MenubarGroup>
185
+ <MenubarSeparator />
186
+ <MenubarItem inset>Edit...</MenubarItem>
187
+ <MenubarSeparator />
188
+ <MenubarItem inset>Add Profile...</MenubarItem>
189
+ </MenubarContent>
190
+
191
+ </MenubarMenu>
192
+ </Menubar>
193
+ </>
194
+ } />
201
195
 
202
- {/* Checkbox & Radio */}
203
196
  <ExampleGrid>
204
- <ExampleSection
205
- label="Checkbox Items"
206
- description="MenubarCheckboxItem cho phép bật/tắt từng tùy chọn độc lập nhau."
207
- codeString={`<Menubar className="w-fit">
197
+ <ShowcaseExample title="Checkbox Items" description="MenubarCheckboxItem cho phép bật/tắt từng tùy chọn độc lập nhau." code={`<Menubar className="w-fit">
208
198
  <MenubarMenu>
209
- <MenubarTrigger>View</MenubarTrigger>
199
+ <MenubarTrigger>Xem</MenubarTrigger>
210
200
  <MenubarContent>
211
201
  <MenubarCheckboxItem
212
202
  checked={showBookmarks}
@@ -222,35 +212,33 @@ function MenubarMicroShowcase() {
222
212
  </MenubarCheckboxItem>
223
213
  </MenubarContent>
224
214
  </MenubarMenu>
225
- </Menubar>`}
226
- >
227
- <Menubar className="w-fit">
228
- <MenubarMenu>
229
- <MenubarTrigger>View</MenubarTrigger>
230
-
231
- <MenubarContent>
232
- <MenubarCheckboxItem
233
- checked={showBookmarks}
234
- onCheckedChange={setShowBookmarks}
235
- >
236
- Show Bookmarks Bar
237
- </MenubarCheckboxItem>
238
- <MenubarCheckboxItem
239
- checked={showFullUrls}
240
- onCheckedChange={setShowFullUrls}
241
- >
242
- Show Full URLs
243
- </MenubarCheckboxItem>
244
- </MenubarContent>
245
-
246
- </MenubarMenu>
247
- </Menubar>
248
- </ExampleSection>
215
+ </Menubar>`} preview={
216
+ <>
217
+ <Menubar className="w-fit">
218
+ <MenubarMenu>
219
+ <MenubarTrigger>Xem</MenubarTrigger>
220
+
221
+ <MenubarContent>
222
+ <MenubarCheckboxItem
223
+ checked={showBookmarks}
224
+ onCheckedChange={setShowBookmarks}
225
+ >
226
+ Show Bookmarks Bar
227
+ </MenubarCheckboxItem>
228
+ <MenubarCheckboxItem
229
+ checked={showFullUrls}
230
+ onCheckedChange={setShowFullUrls}
231
+ >
232
+ Show Full URLs
233
+ </MenubarCheckboxItem>
234
+ </MenubarContent>
235
+
236
+ </MenubarMenu>
237
+ </Menubar>
238
+ </>
239
+ } />
249
240
 
250
- <ExampleSection
251
- label="Radio Group"
252
- description="MenubarRadioGroup cho phép chọn một giá trị duy nhất từ danh sách."
253
- codeString={`<Menubar className="w-fit">
241
+ <ShowcaseExample title="Radio Group" description="MenubarRadioGroup cho phép chọn một giá trị duy nhất từ danh sách." code={`<Menubar className="w-fit">
254
242
  <MenubarMenu>
255
243
  <MenubarTrigger>Profile</MenubarTrigger>
256
244
  <MenubarContent>
@@ -272,42 +260,39 @@ function MenubarMicroShowcase() {
272
260
  </MenubarRadioGroup>
273
261
  </MenubarContent>
274
262
  </MenubarMenu>
275
- </Menubar>`}
276
- >
277
- <Menubar className="w-fit">
278
- <MenubarMenu>
279
- <MenubarTrigger>Profile</MenubarTrigger>
280
-
281
- <MenubarContent>
282
- <MenubarLabel inset>Account</MenubarLabel>
283
- <MenubarSeparator />
284
- <MenubarRadioGroup value={profile} onValueChange={setProfile}>
285
- <MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
286
- <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
287
- <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
288
- </MenubarRadioGroup>
289
- </MenubarContent>
290
-
291
- </MenubarMenu>
292
- </Menubar>
293
- </ExampleSection>
263
+ </Menubar>`} preview={
264
+ <>
265
+ <Menubar className="w-fit">
266
+ <MenubarMenu>
267
+ <MenubarTrigger>Profile</MenubarTrigger>
268
+
269
+ <MenubarContent>
270
+ <MenubarLabel inset>Account</MenubarLabel>
271
+ <MenubarSeparator />
272
+ <MenubarRadioGroup value={profile} onValueChange={setProfile}>
273
+ <MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
274
+ <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
275
+ <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
276
+ </MenubarRadioGroup>
277
+ </MenubarContent>
278
+
279
+ </MenubarMenu>
280
+ </Menubar>
281
+ </>
282
+ } />
294
283
  </ExampleGrid>
295
284
 
296
- {/* Submenu & Disabled */}
297
285
  <ExampleGrid>
298
- <ExampleSection
299
- label="Submenu"
300
- description="MenubarSub tạo menu lồng nhau. Hover hoặc click vào SubTrigger để mở."
301
- codeString={`<Menubar className="w-fit">
286
+ <ShowcaseExample title="Submenu" description="MenubarSub tạo menu lồng nhau. Hover hoặc click vào SubTrigger để mở." code={`<Menubar className="w-fit">
302
287
  <MenubarMenu>
303
- <MenubarTrigger>File</MenubarTrigger>
288
+ <MenubarTrigger>Tệp</MenubarTrigger>
304
289
  <MenubarContent>
305
290
  <MenubarSub>
306
- <MenubarSubTrigger>Share</MenubarSubTrigger>
291
+ <MenubarSubTrigger>Chia sẻ</MenubarSubTrigger>
307
292
  <MenubarSubContent>
308
293
  <MenubarItem>Email link</MenubarItem>
309
- <MenubarItem>Messages</MenubarItem>
310
- <MenubarItem>Notes</MenubarItem>
294
+ <MenubarItem>Tin nhắn</MenubarItem>
295
+ <MenubarItem>Ghi chú</MenubarItem>
311
296
  </MenubarSubContent>
312
297
  </MenubarSub>
313
298
  <MenubarItem>
@@ -315,36 +300,34 @@ function MenubarMicroShowcase() {
315
300
  </MenubarItem>
316
301
  </MenubarContent>
317
302
  </MenubarMenu>
318
- </Menubar>`}
319
- >
320
- <Menubar className="w-fit">
321
- <MenubarMenu>
322
- <MenubarTrigger>File</MenubarTrigger>
323
-
324
- <MenubarContent>
325
- <MenubarSub>
326
- <MenubarSubTrigger>Share</MenubarSubTrigger>
327
- <MenubarSubContent>
328
- <MenubarItem>Email link</MenubarItem>
329
- <MenubarItem>Messages</MenubarItem>
330
- <MenubarItem>Notes</MenubarItem>
331
- </MenubarSubContent>
332
- </MenubarSub>
333
- <MenubarItem>
334
- Print... <MenubarShortcut>⌘P</MenubarShortcut>
335
- </MenubarItem>
336
- </MenubarContent>
337
-
338
- </MenubarMenu>
339
- </Menubar>
340
- </ExampleSection>
303
+ </Menubar>`} preview={
304
+ <>
305
+ <Menubar className="w-fit">
306
+ <MenubarMenu>
307
+ <MenubarTrigger>Tệp</MenubarTrigger>
308
+
309
+ <MenubarContent>
310
+ <MenubarSub>
311
+ <MenubarSubTrigger>Chia sẻ</MenubarSubTrigger>
312
+ <MenubarSubContent>
313
+ <MenubarItem>Email link</MenubarItem>
314
+ <MenubarItem>Tin nhắn</MenubarItem>
315
+ <MenubarItem>Ghi chú</MenubarItem>
316
+ </MenubarSubContent>
317
+ </MenubarSub>
318
+ <MenubarItem>
319
+ Print... <MenubarShortcut>⌘P</MenubarShortcut>
320
+ </MenubarItem>
321
+ </MenubarContent>
322
+
323
+ </MenubarMenu>
324
+ </Menubar>
325
+ </>
326
+ } />
341
327
 
342
- <ExampleSection
343
- label="Disabled Items"
344
- description="Items bị vô hiệu hóa không thể tương tác và hiển thị ở trạng thái mờ."
345
- codeString={`<Menubar className="w-fit">
328
+ <ShowcaseExample title="Disabled Items" description="Items bị vô hiệu hóa không thể tương tác và hiển thị ở trạng thái mờ." code={`<Menubar className="w-fit">
346
329
  <MenubarMenu>
347
- <MenubarTrigger>Edit</MenubarTrigger>
330
+ <MenubarTrigger>Chỉnh sửa</MenubarTrigger>
348
331
  <MenubarContent>
349
332
  <MenubarItem>
350
333
  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
@@ -361,45 +344,43 @@ function MenubarMicroShowcase() {
361
344
  </MenubarItem>
362
345
  </MenubarContent>
363
346
  </MenubarMenu>
364
- </Menubar>`}
365
- >
366
- <Menubar className="w-fit">
367
- <MenubarMenu>
368
- <MenubarTrigger>Edit</MenubarTrigger>
369
-
370
- <MenubarContent>
371
- <MenubarItem>
372
- Undo <MenubarShortcut>⌘Z</MenubarShortcut>
373
- </MenubarItem>
374
- <MenubarItem disabled>
375
- Redo <MenubarShortcut>⌘Y</MenubarShortcut>
376
- </MenubarItem>
377
- <MenubarSeparator />
378
- <MenubarItem disabled>
379
- Cut <MenubarShortcut>⌘X</MenubarShortcut>
380
- </MenubarItem>
381
- <MenubarItem>
382
- Copy <MenubarShortcut>⌘C</MenubarShortcut>
383
- </MenubarItem>
384
- </MenubarContent>
385
-
386
- </MenubarMenu>
387
- </Menubar>
388
- </ExampleSection>
347
+ </Menubar>`} preview={
348
+ <>
349
+ <Menubar className="w-fit">
350
+ <MenubarMenu>
351
+ <MenubarTrigger>Chỉnh sửa</MenubarTrigger>
352
+
353
+ <MenubarContent>
354
+ <MenubarItem>
355
+ Undo <MenubarShortcut>⌘Z</MenubarShortcut>
356
+ </MenubarItem>
357
+ <MenubarItem disabled>
358
+ Redo <MenubarShortcut>⌘Y</MenubarShortcut>
359
+ </MenubarItem>
360
+ <MenubarSeparator />
361
+ <MenubarItem disabled>
362
+ Cut <MenubarShortcut>⌘X</MenubarShortcut>
363
+ </MenubarItem>
364
+ <MenubarItem>
365
+ Copy <MenubarShortcut>⌘C</MenubarShortcut>
366
+ </MenubarItem>
367
+ </MenubarContent>
368
+
369
+ </MenubarMenu>
370
+ </Menubar>
371
+ </>
372
+ } />
389
373
  </ExampleGrid>
390
374
  </div>
391
375
  );
392
376
  }
393
377
 
394
- // ──────────────────────────────────────────────────────────
395
- // SECTION 2: Entry point (export default)
396
- // ──────────────────────────────────────────────────────────
397
378
  export default function MenubarShowcase() {
398
379
  return (
399
380
  <Showcase
400
381
  title="Menubar"
401
382
  description="Thanh menu cố định dạng ngang — phổ biến trong các desktop app (File, Edit, View...)."
402
- generalConcept={
383
+ guideline={
403
384
  <ShowcaseDocs>
404
385
  <DocsP>
405
386
  Menubar cung cấp thanh điều hướng ngang với các menu dropdown
@@ -409,7 +390,7 @@ export default function MenubarShowcase() {
409
390
  </DocsP>
410
391
  </ShowcaseDocs>
411
392
  }
412
- tabs={[{ label: "Micro (Primitive)", content: <MenubarMicroShowcase /> }]}
393
+ micro={{ content: <MenubarMicroShowcase /> }}
413
394
  />
414
395
  );
415
396
  }