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/toggle.tsx CHANGED
@@ -7,83 +7,71 @@ import {
7
7
  DocsH3,
8
8
  DocsP,
9
9
  ExampleGrid,
10
- ExampleSection,
10
+ ShowcaseExample,
11
11
  Showcase,
12
12
  ShowcaseDocs
13
13
  } from "../../dev/components/showcase";
14
14
  import { type Size } from "../../lib/types";
15
15
 
16
- // ──────────────────────────────────────────────────────────
17
- // SECTION 1: Micro Content
18
- // ──────────────────────────────────────────────────────────
19
16
  function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
20
17
  return (
21
- <div className="space-y-10 mt-6">
22
- {/* Variants */}
18
+ <div className="space-y-10">
23
19
  <ExampleGrid>
24
- <ExampleSection
25
- label="Default (Ghost)"
26
- description="Variant mặc định — không viền, chỉ đổi nền khi pressed."
27
- codeString={`<Toggle aria-label="Toggle italic">
20
+ <ShowcaseExample title="Default (Ghost)" description="Variant mặc định — không viền, chỉ đổi nền khi pressed." code={`<Toggle aria-label="Toggle italic">
28
21
  <ItalicIcon />
29
22
  Italic
30
23
  </Toggle>
31
24
  <Toggle aria-label="Toggle bold">
32
25
  <BoldIcon />
33
26
  Bold
34
- </Toggle>`}
35
- >
36
- <div className="flex gap-2">
37
- <Toggle aria-label="Toggle italic" size={globalSize}>
38
- <ItalicIcon />
39
- Italic
40
- </Toggle>
41
- <Toggle aria-label="Toggle bold" size={globalSize}>
42
- <BoldIcon />
43
- Bold
44
- </Toggle>
45
- </div>
46
- </ExampleSection>
27
+ </Toggle>`} preview={
28
+ <>
29
+ <div className="flex gap-2">
30
+ <Toggle aria-label="Toggle italic" size={globalSize}>
31
+ <ItalicIcon />
32
+ Italic
33
+ </Toggle>
34
+ <Toggle aria-label="Toggle bold" size={globalSize}>
35
+ <BoldIcon />
36
+ Bold
37
+ </Toggle>
38
+ </div>
39
+ </>
40
+ } />
47
41
 
48
- <ExampleSection
49
- label="Outline"
50
- description='variant="outline" thêm viền border-input xung quanh toggle.'
51
- codeString={`<Toggle variant="outline" aria-label="Toggle italic">
42
+ <ShowcaseExample title="Outline" description='variant="outline" thêm viền border-input xung quanh toggle.' code={`<Toggle variant="outline" aria-label="Toggle italic">
52
43
  <ItalicIcon />
53
44
  Italic
54
45
  </Toggle>
55
46
  <Toggle variant="outline" aria-label="Toggle underline">
56
47
  <UnderlineIcon />
57
48
  Underline
58
- </Toggle>`}
59
- >
60
- <div className="flex gap-2">
61
- <Toggle
62
- variant="outline"
63
- aria-label="Toggle italic"
64
- size={globalSize}
65
- >
66
- <ItalicIcon />
67
- Italic
68
- </Toggle>
69
- <Toggle
70
- variant="outline"
71
- aria-label="Toggle underline"
72
- size={globalSize}
73
- >
74
- <UnderlineIcon />
75
- Underline
76
- </Toggle>
77
- </div>
78
- </ExampleSection>
49
+ </Toggle>`} preview={
50
+ <>
51
+ <div className="flex gap-2">
52
+ <Toggle
53
+ variant="outline"
54
+ aria-label="Toggle italic"
55
+ size={globalSize}
56
+ >
57
+ <ItalicIcon />
58
+ Italic
59
+ </Toggle>
60
+ <Toggle
61
+ variant="outline"
62
+ aria-label="Toggle underline"
63
+ size={globalSize}
64
+ >
65
+ <UnderlineIcon />
66
+ Underline
67
+ </Toggle>
68
+ </div>
69
+ </>
70
+ } />
79
71
  </ExampleGrid>
80
72
 
81
- {/* Icon Only & Disabled */}
82
73
  <ExampleGrid>
83
- <ExampleSection
84
- label="Icon Only"
85
- description="Toggle chỉ có icon — luôn truyền aria-label để đảm bảo a11y."
86
- codeString={`<Toggle aria-label="Toggle italic">
74
+ <ShowcaseExample title="Icon Only" description="Toggle chỉ có icon — luôn truyền aria-label để đảm bảo a11y." code={`<Toggle aria-label="Toggle italic">
87
75
  <ItalicIcon />
88
76
  </Toggle>
89
77
  <Toggle aria-label="Toggle bold">
@@ -91,29 +79,27 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
91
79
  </Toggle>
92
80
  <Toggle variant="outline" aria-label="Toggle underline">
93
81
  <UnderlineIcon />
94
- </Toggle>`}
95
- >
96
- <div className="flex gap-2">
97
- <Toggle aria-label="Toggle italic" size={globalSize}>
98
- <ItalicIcon />
99
- </Toggle>
100
- <Toggle aria-label="Toggle bold" size={globalSize}>
101
- <BoldIcon />
102
- </Toggle>
103
- <Toggle
104
- variant="outline"
105
- aria-label="Toggle underline"
106
- size={globalSize}
107
- >
108
- <UnderlineIcon />
109
- </Toggle>
110
- </div>
111
- </ExampleSection>
82
+ </Toggle>`} preview={
83
+ <>
84
+ <div className="flex gap-2">
85
+ <Toggle aria-label="Toggle italic" size={globalSize}>
86
+ <ItalicIcon />
87
+ </Toggle>
88
+ <Toggle aria-label="Toggle bold" size={globalSize}>
89
+ <BoldIcon />
90
+ </Toggle>
91
+ <Toggle
92
+ variant="outline"
93
+ aria-label="Toggle underline"
94
+ size={globalSize}
95
+ >
96
+ <UnderlineIcon />
97
+ </Toggle>
98
+ </div>
99
+ </>
100
+ } />
112
101
 
113
- <ExampleSection
114
- label="Disabled"
115
- description="Toggle bị vô hiệu hóa — không thể tương tác, hiển thị mờ."
116
- codeString={`<Toggle disabled aria-label="Toggle italic">
102
+ <ShowcaseExample title="Disabled" description="Toggle bị vô hiệu hóa — không thể tương tác, hiển thị mờ." code={`<Toggle disabled aria-label="Toggle italic">
117
103
  <ItalicIcon />
118
104
  Italic
119
105
  </Toggle>
@@ -124,39 +110,37 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
124
110
  >
125
111
  <BoldIcon />
126
112
  Bold
127
- </Toggle>`}
128
- >
129
- <div className="flex gap-2">
130
- <Toggle disabled aria-label="Toggle italic" size={globalSize}>
131
- <ItalicIcon />
132
- Italic
133
- </Toggle>
134
- <Toggle
135
- variant="outline"
136
- disabled
137
- aria-label="Toggle bold"
138
- size={globalSize}
139
- >
140
- <BoldIcon />
141
- Bold
142
- </Toggle>
143
- </div>
144
- </ExampleSection>
113
+ </Toggle>`} preview={
114
+ <>
115
+ <div className="flex gap-2">
116
+ <Toggle disabled aria-label="Toggle italic" size={globalSize}>
117
+ <ItalicIcon />
118
+ Italic
119
+ </Toggle>
120
+ <Toggle
121
+ variant="outline"
122
+ disabled
123
+ aria-label="Toggle bold"
124
+ size={globalSize}
125
+ >
126
+ <BoldIcon />
127
+ Bold
128
+ </Toggle>
129
+ </div>
130
+ </>
131
+ } />
145
132
  </ExampleGrid>
146
133
  </div>
147
134
  );
148
135
  }
149
136
 
150
- // ──────────────────────────────────────────────────────────
151
- // SECTION 2: Entry point
152
- // ──────────────────────────────────────────────────────────
153
137
  export default function ToggleShowcase() {
154
138
  const { size: globalSize } = useDevContext();
155
139
  return (
156
140
  <Showcase
157
141
  title="Toggle"
158
142
  description="Nút hai trạng thái có thể bật hoặc tắt, hỗ trợ icon, text, variants và sizes."
159
- generalConcept={
143
+ guideline={
160
144
  <ShowcaseDocs>
161
145
  <DocsH3>Toggle</DocsH3>
162
146
  <DocsP>
@@ -169,11 +153,7 @@ export default function ToggleShowcase() {
169
153
  </DocsP>
170
154
  </ShowcaseDocs>
171
155
  }
172
- tabs={[
173
- {
174
- label: "Micro (Primitive)",
175
- content: <ToggleMicroShowcase globalSize={globalSize} /> },
176
- ]}
156
+ micro={{ content: <ToggleMicroShowcase globalSize={globalSize} /> }}
177
157
  />
178
158
  );
179
159
  }