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/dropdown-menu.tsx CHANGED
@@ -30,26 +30,20 @@ import { useDevContext } from "../../dev/components/dev-context";
30
30
  import {
31
31
  DocsP,
32
32
  ExampleGrid,
33
- ExampleSection,
33
+ ShowcaseExample,
34
34
  Showcase,
35
35
  ShowcaseDocs
36
36
  } from "../../dev/components/showcase";
37
37
  import { type Size } from "../../lib/types";
38
38
 
39
- // ──────────────────────────────────────────────────────────
40
- // SECTION 2: Micro Content (không export)
41
- // ──────────────────────────────────────────────────────────
42
39
  function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
43
40
  const [showStatusBar, setShowStatusBar] = useState(true);
44
41
  const [showPanel, setShowPanel] = useState(false);
45
42
 
46
43
  return (
47
- <div className="space-y-10 mt-6">
44
+ <div className="space-y-10">
48
45
  <ExampleGrid>
49
- <ExampleSection
50
- label="Standard Dropdown"
51
- description="Menu cơ bản với các phím tắt và action nguy hiểm."
52
- codeString={`<DropdownMenu>
46
+ <ShowcaseExample title="Standard Dropdown" description="Menu cơ bản với các phím tắt và action nguy hiểm." code={`<DropdownMenu>
53
47
  <DropdownMenuTrigger
54
48
  render={<Button variant="outline">Open Menu</Button>}
55
49
  />
@@ -88,58 +82,56 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
88
82
  </DropdownMenuItem>
89
83
  </DropdownMenuContent>
90
84
 
91
- </DropdownMenu>`}
92
- >
93
- <DropdownMenu>
94
- <DropdownMenuTrigger
95
- render={
96
- <Button variant="outline" size={globalSize}>
97
- Open Menu
98
- </Button>
99
- }
100
- />
85
+ </DropdownMenu>`} preview={
86
+ <>
87
+ <DropdownMenu>
88
+ <DropdownMenuTrigger
89
+ render={
90
+ <Button variant="outline" size={globalSize}>
91
+ Open Menu
92
+ </Button>
93
+ }
94
+ />
101
95
 
102
- <DropdownMenuContent className="w-56">
103
- <DropdownMenuGroup>
104
- <DropdownMenuLabel>My Account</DropdownMenuLabel>
105
- <DropdownMenuSeparator />
106
- <DropdownMenuItem>
107
- <UserIcon className="mr-2 h-4 w-4" />
108
- <span>Profile</span>
109
- <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
110
- </DropdownMenuItem>
111
- <DropdownMenuItem>
112
- <SettingsIcon className="mr-2 h-4 w-4" />
113
- <span>Settings</span>
114
- <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
115
- </DropdownMenuItem>
116
- <DropdownMenuItem>
117
- <CreditCardIcon className="mr-2 h-4 w-4" />
118
- <span>Billing</span>
119
- <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
120
- </DropdownMenuItem>
121
- </DropdownMenuGroup>
122
- <DropdownMenuSeparator />
123
- <DropdownMenuItem>
124
- <LogOutIcon className="mr-2 h-4 w-4" />
125
- <span>Log out</span>
126
- <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
127
- </DropdownMenuItem>
128
- <DropdownMenuSeparator />
129
- <DropdownMenuItem variant="destructive">
130
- <LogOutIcon className="mr-2 h-4 w-4" />
131
- <span>Delete Account</span>
132
- <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
133
- </DropdownMenuItem>
134
- </DropdownMenuContent>
135
-
136
- </DropdownMenu>
137
- </ExampleSection>
96
+ <DropdownMenuContent className="w-56">
97
+ <DropdownMenuGroup>
98
+ <DropdownMenuLabel>My Account</DropdownMenuLabel>
99
+ <DropdownMenuSeparator />
100
+ <DropdownMenuItem>
101
+ <UserIcon className="mr-2 h-4 w-4" />
102
+ <span>Profile</span>
103
+ <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
104
+ </DropdownMenuItem>
105
+ <DropdownMenuItem>
106
+ <SettingsIcon className="mr-2 h-4 w-4" />
107
+ <span>Settings</span>
108
+ <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
109
+ </DropdownMenuItem>
110
+ <DropdownMenuItem>
111
+ <CreditCardIcon className="mr-2 h-4 w-4" />
112
+ <span>Billing</span>
113
+ <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
114
+ </DropdownMenuItem>
115
+ </DropdownMenuGroup>
116
+ <DropdownMenuSeparator />
117
+ <DropdownMenuItem>
118
+ <LogOutIcon className="mr-2 h-4 w-4" />
119
+ <span>Log out</span>
120
+ <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
121
+ </DropdownMenuItem>
122
+ <DropdownMenuSeparator />
123
+ <DropdownMenuItem variant="destructive">
124
+ <LogOutIcon className="mr-2 h-4 w-4" />
125
+ <span>Delete Account</span>
126
+ <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
127
+ </DropdownMenuItem>
128
+ </DropdownMenuContent>
129
+
130
+ </DropdownMenu>
131
+ </>
132
+ } />
138
133
 
139
- <ExampleSection
140
- label="With Disabled Items"
141
- description="Một số mục không tương tác."
142
- codeString={`<DropdownMenu>
134
+ <ShowcaseExample title="With Disabled Items" description="Một số mục không tương tác." code={`<DropdownMenu>
143
135
  <DropdownMenuTrigger
144
136
  render={<Button variant="outline">Actions</Button>}
145
137
  />
@@ -150,7 +142,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
150
142
  <DropdownMenuSeparator />
151
143
  <DropdownMenuItem>
152
144
  <UserIcon className="mr-2 h-4 w-4" />
153
- <span>Edit Profile</span>
145
+ <span>Chỉnh sửa hồ sơ</span>
154
146
  </DropdownMenuItem>
155
147
  <DropdownMenuItem disabled>
156
148
  <CreditCardIcon className="mr-2 h-4 w-4" />
@@ -168,47 +160,45 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
168
160
  </DropdownMenuItem>
169
161
  </DropdownMenuContent>
170
162
 
171
- </DropdownMenu>`}
172
- >
173
- <DropdownMenu>
174
- <DropdownMenuTrigger
175
- render={
176
- <Button variant="outline" size={globalSize}>
177
- Actions
178
- </Button>
179
- }
180
- />
163
+ </DropdownMenu>`} preview={
164
+ <>
165
+ <DropdownMenu>
166
+ <DropdownMenuTrigger
167
+ render={
168
+ <Button variant="outline" size={globalSize}>
169
+ Actions
170
+ </Button>
171
+ }
172
+ />
181
173
 
182
- <DropdownMenuContent className="w-56">
183
- <DropdownMenuGroup>
184
- <DropdownMenuLabel>Actions</DropdownMenuLabel>
185
- <DropdownMenuSeparator />
186
- <DropdownMenuItem>
187
- <UserIcon className="mr-2 h-4 w-4" />
188
- <span>Edit Profile</span>
189
- </DropdownMenuItem>
190
- <DropdownMenuItem disabled>
191
- <CreditCardIcon className="mr-2 h-4 w-4" />
192
- <span>Upgrade Plan</span>
193
- </DropdownMenuItem>
194
- <DropdownMenuItem disabled>
195
- <HelpCircleIcon className="mr-2 h-4 w-4" />
196
- <span>Support (Offline)</span>
197
- </DropdownMenuItem>
198
- </DropdownMenuGroup>
199
- <DropdownMenuSeparator />
200
- <DropdownMenuItem>
201
- <LogOutIcon className="mr-2 h-4 w-4" />
202
- <span>Log out</span>
203
- </DropdownMenuItem>
204
- </DropdownMenuContent>
205
-
206
- </DropdownMenu>
207
- </ExampleSection>
208
- <ExampleSection
209
- label="Advanced Dropdown"
210
- description="Menu có các hộp kiểm, mục radio và menu con."
211
- codeString={`<DropdownMenu>
174
+ <DropdownMenuContent className="w-56">
175
+ <DropdownMenuGroup>
176
+ <DropdownMenuLabel>Actions</DropdownMenuLabel>
177
+ <DropdownMenuSeparator />
178
+ <DropdownMenuItem>
179
+ <UserIcon className="mr-2 h-4 w-4" />
180
+ <span>Chỉnh sửa hồ sơ</span>
181
+ </DropdownMenuItem>
182
+ <DropdownMenuItem disabled>
183
+ <CreditCardIcon className="mr-2 h-4 w-4" />
184
+ <span>Upgrade Plan</span>
185
+ </DropdownMenuItem>
186
+ <DropdownMenuItem disabled>
187
+ <HelpCircleIcon className="mr-2 h-4 w-4" />
188
+ <span>Support (Offline)</span>
189
+ </DropdownMenuItem>
190
+ </DropdownMenuGroup>
191
+ <DropdownMenuSeparator />
192
+ <DropdownMenuItem>
193
+ <LogOutIcon className="mr-2 h-4 w-4" />
194
+ <span>Log out</span>
195
+ </DropdownMenuItem>
196
+ </DropdownMenuContent>
197
+
198
+ </DropdownMenu>
199
+ </>
200
+ } />
201
+ <ShowcaseExample title="Advanced Dropdown" description="Menu có các hộp kiểm, mục radio và menu con." code={`<DropdownMenu>
212
202
  <DropdownMenuTrigger
213
203
  render={<Button variant="outline">Advanced</Button>}
214
204
  />
@@ -260,68 +250,66 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
260
250
  </DropdownMenuGroup>
261
251
  </DropdownMenuContent>
262
252
 
263
- </DropdownMenu>`}
264
- >
265
- <DropdownMenu>
266
- <DropdownMenuTrigger
267
- render={
268
- <Button variant="outline" size={globalSize}>
269
- Advanced
270
- </Button>
271
- }
272
- />
273
-
274
- <DropdownMenuContent className="w-56">
275
- <DropdownMenuGroup>
276
- <DropdownMenuLabel>Appearance</DropdownMenuLabel>
277
- <DropdownMenuSeparator />
278
- <DropdownMenuCheckboxItem
279
- checked={showStatusBar}
280
- onCheckedChange={setShowStatusBar}
281
- >
282
- Show Status Bar
283
- </DropdownMenuCheckboxItem>
284
- <DropdownMenuCheckboxItem disabled>
285
- Show Activity Bar
286
- </DropdownMenuCheckboxItem>
287
- <DropdownMenuCheckboxItem
288
- checked={showPanel}
289
- onCheckedChange={setShowPanel}
290
- >
291
- Show Panel
292
- </DropdownMenuCheckboxItem>
293
- <DropdownMenuSeparator />
294
- <DropdownMenuSub>
295
- <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
296
-
297
- <DropdownMenuSubContent>
298
- <DropdownMenuItem>Light</DropdownMenuItem>
299
- <DropdownMenuItem>Dark</DropdownMenuItem>
300
- <DropdownMenuItem>System</DropdownMenuItem>
301
- </DropdownMenuSubContent>
302
-
303
- </DropdownMenuSub>
304
- <DropdownMenuSeparator />
305
- <DropdownMenuRadioGroup value="bottom">
306
- <DropdownMenuRadioItem value="top">
307
- Top
308
- </DropdownMenuRadioItem>
309
- <DropdownMenuRadioItem value="bottom">
310
- Bottom
311
- </DropdownMenuRadioItem>
312
- <DropdownMenuRadioItem value="right">
313
- Right
314
- </DropdownMenuRadioItem>
315
- </DropdownMenuRadioGroup>
316
- </DropdownMenuGroup>
317
- </DropdownMenuContent>
318
-
319
- </DropdownMenu>
320
- </ExampleSection>
321
- <ExampleSection
322
- label="Inset Items"
323
- description="Dùng prop inset trên label và items khi menu không có icon — giữ alignment đồng đều."
324
- codeString={`<DropdownMenu>
253
+ </DropdownMenu>`} preview={
254
+ <>
255
+ <DropdownMenu>
256
+ <DropdownMenuTrigger
257
+ render={
258
+ <Button variant="outline" size={globalSize}>
259
+ Advanced
260
+ </Button>
261
+ }
262
+ />
263
+
264
+ <DropdownMenuContent className="w-56">
265
+ <DropdownMenuGroup>
266
+ <DropdownMenuLabel>Appearance</DropdownMenuLabel>
267
+ <DropdownMenuSeparator />
268
+ <DropdownMenuCheckboxItem
269
+ checked={showStatusBar}
270
+ onCheckedChange={setShowStatusBar}
271
+ >
272
+ Show Status Bar
273
+ </DropdownMenuCheckboxItem>
274
+ <DropdownMenuCheckboxItem disabled>
275
+ Show Activity Bar
276
+ </DropdownMenuCheckboxItem>
277
+ <DropdownMenuCheckboxItem
278
+ checked={showPanel}
279
+ onCheckedChange={setShowPanel}
280
+ >
281
+ Show Panel
282
+ </DropdownMenuCheckboxItem>
283
+ <DropdownMenuSeparator />
284
+ <DropdownMenuSub>
285
+ <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
286
+
287
+ <DropdownMenuSubContent>
288
+ <DropdownMenuItem>Light</DropdownMenuItem>
289
+ <DropdownMenuItem>Dark</DropdownMenuItem>
290
+ <DropdownMenuItem>System</DropdownMenuItem>
291
+ </DropdownMenuSubContent>
292
+
293
+ </DropdownMenuSub>
294
+ <DropdownMenuSeparator />
295
+ <DropdownMenuRadioGroup value="bottom">
296
+ <DropdownMenuRadioItem value="top">
297
+ Top
298
+ </DropdownMenuRadioItem>
299
+ <DropdownMenuRadioItem value="bottom">
300
+ Bottom
301
+ </DropdownMenuRadioItem>
302
+ <DropdownMenuRadioItem value="right">
303
+ Right
304
+ </DropdownMenuRadioItem>
305
+ </DropdownMenuRadioGroup>
306
+ </DropdownMenuGroup>
307
+ </DropdownMenuContent>
308
+
309
+ </DropdownMenu>
310
+ </>
311
+ } />
312
+ <ShowcaseExample title="Inset Items" description="Dùng prop inset trên label và items khi menu không có icon — giữ alignment đồng đều." code={`<DropdownMenu>
325
313
  <DropdownMenuTrigger
326
314
  render={
327
315
  <Button variant="outline">View Options</Button>
@@ -355,51 +343,49 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
355
343
  </DropdownMenuGroup>
356
344
  </DropdownMenuContent>
357
345
 
358
- </DropdownMenu>`}
359
- >
360
- <DropdownMenu>
361
- <DropdownMenuTrigger
362
- render={
363
- <Button variant="outline" size={globalSize}>
364
- View Options
365
- </Button>
366
- }
367
- />
368
-
369
- <DropdownMenuContent className="w-48">
370
- <DropdownMenuGroup>
371
- <DropdownMenuLabel inset>View</DropdownMenuLabel>
372
- <DropdownMenuSeparator />
373
- <DropdownMenuItem inset>Zoom In</DropdownMenuItem>
374
- <DropdownMenuItem inset>Zoom Out</DropdownMenuItem>
375
- <DropdownMenuItem inset>Reset Zoom</DropdownMenuItem>
376
- </DropdownMenuGroup>
377
- <DropdownMenuSeparator />
378
- <DropdownMenuGroup>
379
- <DropdownMenuLabel inset>Layout</DropdownMenuLabel>
380
- <DropdownMenuSeparator />
381
- <DropdownMenuItem inset>Single Column</DropdownMenuItem>
382
- <DropdownMenuItem inset>Two Columns</DropdownMenuItem>
383
- </DropdownMenuGroup>
384
- </DropdownMenuContent>
385
-
386
- </DropdownMenu>
387
- </ExampleSection>
346
+ </DropdownMenu>`} preview={
347
+ <>
348
+ <DropdownMenu>
349
+ <DropdownMenuTrigger
350
+ render={
351
+ <Button variant="outline" size={globalSize}>
352
+ View Options
353
+ </Button>
354
+ }
355
+ />
356
+
357
+ <DropdownMenuContent className="w-48">
358
+ <DropdownMenuGroup>
359
+ <DropdownMenuLabel inset>View</DropdownMenuLabel>
360
+ <DropdownMenuSeparator />
361
+ <DropdownMenuItem inset>Zoom In</DropdownMenuItem>
362
+ <DropdownMenuItem inset>Zoom Out</DropdownMenuItem>
363
+ <DropdownMenuItem inset>Reset Zoom</DropdownMenuItem>
364
+ </DropdownMenuGroup>
365
+ <DropdownMenuSeparator />
366
+ <DropdownMenuGroup>
367
+ <DropdownMenuLabel inset>Layout</DropdownMenuLabel>
368
+ <DropdownMenuSeparator />
369
+ <DropdownMenuItem inset>Single Column</DropdownMenuItem>
370
+ <DropdownMenuItem inset>Two Columns</DropdownMenuItem>
371
+ </DropdownMenuGroup>
372
+ </DropdownMenuContent>
373
+
374
+ </DropdownMenu>
375
+ </>
376
+ } />
388
377
  </ExampleGrid>
389
378
  </div>
390
379
  );
391
380
  }
392
381
 
393
- // ──────────────────────────────────────────────────────────
394
- // SECTION 3: Entry point (export default)
395
- // ──────────────────────────────────────────────────────────
396
382
  export default function DropdownMenuShowcase() {
397
383
  const { size: globalSize } = useDevContext();
398
384
  return (
399
385
  <Showcase
400
386
  title="Dropdown Menu"
401
387
  description="Menu thả xuống kích hoạt bằng nút — chứa actions, checkbox, radio, và submenu."
402
- generalConcept={
388
+ guideline={
403
389
  <ShowcaseDocs>
404
390
  <DocsP>
405
391
  Dropdown Menu dùng để hiển thị các hành động liên quan tới một đối
@@ -407,11 +393,7 @@ export default function DropdownMenuShowcase() {
407
393
  </DocsP>
408
394
  </ShowcaseDocs>
409
395
  }
410
- tabs={[
411
- {
412
- label: "Micro (Primitive)",
413
- content: <DropdownMenuMicroShowcase globalSize={globalSize} /> },
414
- ]}
396
+ micro={{ content: <DropdownMenuMicroShowcase globalSize={globalSize} /> }}
415
397
  />
416
398
  );
417
399
  }