gladvn 0.2.35 → 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 +2 -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/drawer.tsx CHANGED
@@ -13,22 +13,16 @@ import {
13
13
  import {
14
14
  DocsP,
15
15
  ExampleGrid,
16
- ExampleSection,
16
+ ShowcaseExample,
17
17
  Showcase,
18
18
  ShowcaseDocs
19
19
  } from "../../dev/components/showcase";
20
20
 
21
- // ──────────────────────────────────────────────────────────
22
- // SECTION 2: Micro Content (không export)
23
- // ──────────────────────────────────────────────────────────
24
21
  function DrawerMicroShowcase() {
25
22
  return (
26
- <div className="space-y-10 mt-6">
23
+ <div className="space-y-10">
27
24
  <ExampleGrid>
28
- <ExampleSection
29
- label="Bottom Drawer"
30
- description="Drawer mặc định trượt từ dưới lên."
31
- codeString={`<Drawer>
25
+ <ShowcaseExample title="Bottom Drawer" description="Drawer mặc định trượt từ dưới lên." code={`<Drawer>
32
26
  <DrawerTrigger asChild>
33
27
  <Button variant="outline">Open Bottom</Button>
34
28
  </DrawerTrigger>
@@ -70,73 +64,71 @@ function DrawerMicroShowcase() {
70
64
  </div>
71
65
  </div>
72
66
  <DrawerFooter>
73
- <Button>Submit</Button>
67
+ <Button>Xác nhận</Button>
74
68
  <DrawerClose asChild>
75
- <Button variant="outline">Cancel</Button>
69
+ <Button variant="outline">Huỷ</Button>
76
70
  </DrawerClose>
77
71
  </DrawerFooter>
78
72
  </div>
79
73
  </DrawerContent>
80
74
 
81
- </Drawer>`}
82
- >
83
- <Drawer>
84
- <DrawerTrigger asChild>
85
- <Button variant="outline">Open Bottom</Button>
86
- </DrawerTrigger>
75
+ </Drawer>`} preview={
76
+ <>
77
+ <Drawer>
78
+ <DrawerTrigger asChild>
79
+ <Button variant="outline">Open Bottom</Button>
80
+ </DrawerTrigger>
87
81
 
88
- <DrawerContent>
89
- <div className="mx-auto w-full max-w-sm">
90
- <DrawerHeader>
91
- <DrawerTitle>Move Goal</DrawerTitle>
92
- <DrawerDescription>
93
- Set your daily activity goal.
94
- </DrawerDescription>
95
- </DrawerHeader>
96
- <div className="p-4 pb-0">
97
- <div className="flex items-center justify-center space-x-2">
98
- <Button
99
- variant="outline"
100
- size="sm"
101
- className="h-8 w-8 rounded-full"
102
- onClick={() => {}}
103
- >
104
- -
105
- </Button>
106
- <div className="flex-1 text-center">
107
- <div className="text-7xl font-bold tracking-tighter">
108
- 350
109
- </div>
110
- <div className="text-[0.70rem] uppercase text-muted-foreground">
111
- Calories/day
112
- </div>
113
- </div>
114
- <Button
115
- variant="outline"
116
- size="sm"
117
- className="h-8 w-8 rounded-full"
118
- onClick={() => {}}
119
- >
120
- +
121
- </Button>
122
- </div>
123
- </div>
124
- <DrawerFooter>
125
- <Button>Submit</Button>
126
- <DrawerClose asChild>
127
- <Button variant="outline">Cancel</Button>
128
- </DrawerClose>
129
- </DrawerFooter>
130
- </div>
131
- </DrawerContent>
132
-
133
- </Drawer>
134
- </ExampleSection>
82
+ <DrawerContent>
83
+ <div className="mx-auto w-full max-w-sm">
84
+ <DrawerHeader>
85
+ <DrawerTitle>Move Goal</DrawerTitle>
86
+ <DrawerDescription>
87
+ Set your daily activity goal.
88
+ </DrawerDescription>
89
+ </DrawerHeader>
90
+ <div className="p-4 pb-0">
91
+ <div className="flex items-center justify-center space-x-2">
92
+ <Button
93
+ variant="outline"
94
+ size="sm"
95
+ className="h-8 w-8 rounded-full"
96
+ onClick={() => {}}
97
+ >
98
+ -
99
+ </Button>
100
+ <div className="flex-1 text-center">
101
+ <div className="text-7xl font-bold tracking-tighter">
102
+ 350
103
+ </div>
104
+ <div className="text-[0.70rem] uppercase text-muted-foreground">
105
+ Calories/day
106
+ </div>
107
+ </div>
108
+ <Button
109
+ variant="outline"
110
+ size="sm"
111
+ className="h-8 w-8 rounded-full"
112
+ onClick={() => {}}
113
+ >
114
+ +
115
+ </Button>
116
+ </div>
117
+ </div>
118
+ <DrawerFooter>
119
+ <Button>Xác nhận</Button>
120
+ <DrawerClose asChild>
121
+ <Button variant="outline">Huỷ</Button>
122
+ </DrawerClose>
123
+ </DrawerFooter>
124
+ </div>
125
+ </DrawerContent>
126
+
127
+ </Drawer>
128
+ </>
129
+ } />
135
130
 
136
- <ExampleSection
137
- label="Simple Message"
138
- description="Drawer với nội dung văn bản đơn giản."
139
- codeString={`<Drawer>
131
+ <ShowcaseExample title="Simple Message" description="Drawer với nội dung văn bản đơn giản." code={`<Drawer>
140
132
  <DrawerTrigger asChild>
141
133
  <Button variant="outline">Show Info</Button>
142
134
  </DrawerTrigger>
@@ -160,37 +152,35 @@ function DrawerMicroShowcase() {
160
152
  </div>
161
153
  </DrawerContent>
162
154
 
163
- </Drawer>`}
164
- >
165
- <Drawer>
166
- <DrawerTrigger asChild>
167
- <Button variant="outline">Show Info</Button>
168
- </DrawerTrigger>
155
+ </Drawer>`} preview={
156
+ <>
157
+ <Drawer>
158
+ <DrawerTrigger asChild>
159
+ <Button variant="outline">Show Info</Button>
160
+ </DrawerTrigger>
169
161
 
170
- <DrawerContent>
171
- <div className="mx-auto w-full max-w-sm">
172
- <DrawerHeader>
173
- <DrawerTitle>About this feature</DrawerTitle>
174
- <DrawerDescription>
175
- This feature is currently in beta. Some functionality may
176
- be limited or change without notice. We appreciate your
177
- feedback as we work to improve the experience.
178
- </DrawerDescription>
179
- </DrawerHeader>
180
- <DrawerFooter>
181
- <DrawerClose asChild>
182
- <Button variant="outline">Got it</Button>
183
- </DrawerClose>
184
- </DrawerFooter>
185
- </div>
186
- </DrawerContent>
187
-
188
- </Drawer>
189
- </ExampleSection>
190
- <ExampleSection
191
- label="Left / Right Drawers"
192
- description="Drawer mở từ cạnh trái hoặc phải — phù hợp cho Sidebar và Filter panel."
193
- codeString={`<Drawer direction="left">
162
+ <DrawerContent>
163
+ <div className="mx-auto w-full max-w-sm">
164
+ <DrawerHeader>
165
+ <DrawerTitle>About this feature</DrawerTitle>
166
+ <DrawerDescription>
167
+ This feature is currently in beta. Some functionality may
168
+ be limited or change without notice. We appreciate your
169
+ feedback as we work to improve the experience.
170
+ </DrawerDescription>
171
+ </DrawerHeader>
172
+ <DrawerFooter>
173
+ <DrawerClose asChild>
174
+ <Button variant="outline">Got it</Button>
175
+ </DrawerClose>
176
+ </DrawerFooter>
177
+ </div>
178
+ </DrawerContent>
179
+
180
+ </Drawer>
181
+ </>
182
+ } />
183
+ <ShowcaseExample title="Left / Right Drawers" description="Drawer mở từ cạnh trái hoặc phải — phù hợp cho Sidebar và Filter panel." code={`<Drawer direction="left">
194
184
  <DrawerTrigger asChild>
195
185
  <Button variant="outline">Open Left</Button>
196
186
  </DrawerTrigger>
@@ -238,73 +228,69 @@ function DrawerMicroShowcase() {
238
228
  <DrawerFooter>
239
229
  <Button>Apply Filters</Button>
240
230
  <DrawerClose asChild>
241
- <Button variant="outline">Cancel</Button>
231
+ <Button variant="outline">Huỷ</Button>
242
232
  </DrawerClose>
243
233
  </DrawerFooter>
244
234
  </DrawerContent>
245
235
 
246
- </Drawer>`}
247
- >
248
- <Drawer direction="left">
249
- <DrawerTrigger asChild>
250
- <Button variant="outline">Open Left</Button>
251
- </DrawerTrigger>
252
-
253
- <DrawerContent>
254
- <DrawerHeader>
255
- <DrawerTitle>Sidebar Menu</DrawerTitle>
256
- <DrawerDescription>
257
- Điều hướng từ cạnh trái của màn hình.
258
- </DrawerDescription>
259
- </DrawerHeader>
260
- <div className="flex-1 p-4">
261
- <ul className="space-y-4 text-sm">
262
- <li>Dashboard</li>
263
- <li>Settings</li>
264
- <li>Profile</li>
265
- </ul>
266
- </div>
267
- <DrawerFooter>
268
- <DrawerClose asChild>
269
- <Button variant="outline">Close</Button>
270
- </DrawerClose>
271
- </DrawerFooter>
272
- </DrawerContent>
273
-
274
- </Drawer>
236
+ </Drawer>`} preview={
237
+ <>
238
+ <Drawer direction="left">
239
+ <DrawerTrigger asChild>
240
+ <Button variant="outline">Open Left</Button>
241
+ </DrawerTrigger>
275
242
 
276
- <Drawer direction="right">
277
- <DrawerTrigger asChild>
278
- <Button variant="outline">Open Right</Button>
279
- </DrawerTrigger>
243
+ <DrawerContent>
244
+ <DrawerHeader>
245
+ <DrawerTitle>Sidebar Menu</DrawerTitle>
246
+ <DrawerDescription>
247
+ Điều hướng từ cạnh trái của màn hình.
248
+ </DrawerDescription>
249
+ </DrawerHeader>
250
+ <div className="flex-1 p-4">
251
+ <ul className="space-y-4 text-sm">
252
+ <li>Dashboard</li>
253
+ <li>Settings</li>
254
+ <li>Profile</li>
255
+ </ul>
256
+ </div>
257
+ <DrawerFooter>
258
+ <DrawerClose asChild>
259
+ <Button variant="outline">Close</Button>
260
+ </DrawerClose>
261
+ </DrawerFooter>
262
+ </DrawerContent>
263
+
264
+ </Drawer><Drawer direction="right">
265
+ <DrawerTrigger asChild>
266
+ <Button variant="outline">Open Right</Button>
267
+ </DrawerTrigger>
280
268
 
281
- <DrawerContent>
282
- <DrawerHeader>
283
- <DrawerTitle>Filters</DrawerTitle>
284
- <DrawerDescription>
285
- Bộ lọc tìm kiếm từ cạnh phải.
286
- </DrawerDescription>
287
- </DrawerHeader>
288
- <div className="flex-1 space-y-2 p-4">
289
- <div className="h-4 w-1/2 rounded bg-muted" />
290
- <div className="h-4 w-3/4 rounded bg-muted" />
291
- <div className="h-4 w-2/3 rounded bg-muted" />
292
- </div>
293
- <DrawerFooter>
294
- <Button>Apply Filters</Button>
295
- <DrawerClose asChild>
296
- <Button variant="outline">Cancel</Button>
297
- </DrawerClose>
298
- </DrawerFooter>
299
- </DrawerContent>
300
-
301
- </Drawer>
302
- </ExampleSection>
269
+ <DrawerContent>
270
+ <DrawerHeader>
271
+ <DrawerTitle>Filters</DrawerTitle>
272
+ <DrawerDescription>
273
+ Bộ lọc tìm kiếm từ cạnh phải.
274
+ </DrawerDescription>
275
+ </DrawerHeader>
276
+ <div className="flex-1 space-y-2 p-4">
277
+ <div className="h-4 w-1/2 rounded bg-muted" />
278
+ <div className="h-4 w-3/4 rounded bg-muted" />
279
+ <div className="h-4 w-2/3 rounded bg-muted" />
280
+ </div>
281
+ <DrawerFooter>
282
+ <Button>Apply Filters</Button>
283
+ <DrawerClose asChild>
284
+ <Button variant="outline">Huỷ</Button>
285
+ </DrawerClose>
286
+ </DrawerFooter>
287
+ </DrawerContent>
288
+
289
+ </Drawer>
290
+ </>
291
+ } />
303
292
 
304
- <ExampleSection
305
- label="Top Drawer"
306
- description="Drawer mở từ phía trên — phù hợp cho notifications, alerts, hoặc search."
307
- codeString={`<Drawer direction="top">
293
+ <ShowcaseExample title="Top Drawer" description="Drawer mở từ phía trên — phù hợp cho notifications, alerts, hoặc search." code={`<Drawer direction="top">
308
294
  <DrawerTrigger asChild>
309
295
  <Button variant="outline">Open Top</Button>
310
296
  </DrawerTrigger>
@@ -330,50 +316,48 @@ function DrawerMicroShowcase() {
330
316
  </div>
331
317
  </DrawerContent>
332
318
 
333
- </Drawer>`}
334
- >
335
- <Drawer direction="top">
336
- <DrawerTrigger asChild>
337
- <Button variant="outline">Open Top</Button>
338
- </DrawerTrigger>
319
+ </Drawer>`} preview={
320
+ <>
321
+ <Drawer direction="top">
322
+ <DrawerTrigger asChild>
323
+ <Button variant="outline">Open Top</Button>
324
+ </DrawerTrigger>
339
325
 
340
- <DrawerContent>
341
- <div className="mx-auto w-full max-w-sm">
342
- <DrawerHeader>
343
- <DrawerTitle>New Notification</DrawerTitle>
344
- <DrawerDescription>
345
- Bạn có 3 thông báo chưa đọc.
346
- </DrawerDescription>
347
- </DrawerHeader>
348
- <div className="space-y-2 px-4 pb-2 text-sm text-muted-foreground">
349
- <p>🔔 Your order has been shipped.</p>
350
- <p>🔔 A new comment on your post.</p>
351
- <p>🔔 Your subscription renews in 3 days.</p>
352
- </div>
353
- <DrawerFooter>
354
- <DrawerClose asChild>
355
- <Button variant="outline">Dismiss all</Button>
356
- </DrawerClose>
357
- </DrawerFooter>
358
- </div>
359
- </DrawerContent>
360
-
361
- </Drawer>
362
- </ExampleSection>
326
+ <DrawerContent>
327
+ <div className="mx-auto w-full max-w-sm">
328
+ <DrawerHeader>
329
+ <DrawerTitle>New Notification</DrawerTitle>
330
+ <DrawerDescription>
331
+ Bạn có 3 thông báo chưa đọc.
332
+ </DrawerDescription>
333
+ </DrawerHeader>
334
+ <div className="space-y-2 px-4 pb-2 text-sm text-muted-foreground">
335
+ <p>🔔 Your order has been shipped.</p>
336
+ <p>🔔 A new comment on your post.</p>
337
+ <p>🔔 Your subscription renews in 3 days.</p>
338
+ </div>
339
+ <DrawerFooter>
340
+ <DrawerClose asChild>
341
+ <Button variant="outline">Dismiss all</Button>
342
+ </DrawerClose>
343
+ </DrawerFooter>
344
+ </div>
345
+ </DrawerContent>
346
+
347
+ </Drawer>
348
+ </>
349
+ } />
363
350
  </ExampleGrid>
364
351
  </div>
365
352
  );
366
353
  }
367
354
 
368
- // ──────────────────────────────────────────────────────────
369
- // SECTION 3: Entry point (export default)
370
- // ──────────────────────────────────────────────────────────
371
355
  export default function DrawerShowcase() {
372
356
  return (
373
357
  <Showcase
374
358
  title="Drawer"
375
359
  description="Panel trượt ra từ cạnh màn hình — thường dùng cho bottom sheet, sidebar trên mobile."
376
- generalConcept={
360
+ guideline={
377
361
  <ShowcaseDocs>
378
362
  <DocsP>
379
363
  Sử dụng Drawer (Ngăn kéo) để hiển thị thông tin hoặc tuỳ chọn bổ
@@ -383,11 +367,7 @@ export default function DrawerShowcase() {
383
367
  </DocsP>
384
368
  </ShowcaseDocs>
385
369
  }
386
- tabs={[
387
- {
388
- label: "Micro (Primitive)",
389
- content: <DrawerMicroShowcase /> },
390
- ]}
370
+ micro={{ content: <DrawerMicroShowcase /> }}
391
371
  />
392
372
  );
393
373
  }