@lglab/compose-ui 0.28.0 → 0.29.0

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 (191) hide show
  1. package/dist/accordion.d.ts +49 -40
  2. package/dist/accordion.d.ts.map +1 -0
  3. package/dist/accordion.js +47 -45
  4. package/dist/accordion.js.map +1 -0
  5. package/dist/alert-dialog.d.ts +93 -87
  6. package/dist/alert-dialog.d.ts.map +1 -0
  7. package/dist/alert-dialog.js +94 -111
  8. package/dist/alert-dialog.js.map +1 -0
  9. package/dist/autocomplete.d.ts +99 -96
  10. package/dist/autocomplete.d.ts.map +1 -0
  11. package/dist/autocomplete.js +92 -116
  12. package/dist/autocomplete.js.map +1 -0
  13. package/dist/avatar.d.ts +56 -47
  14. package/dist/avatar.d.ts.map +1 -0
  15. package/dist/avatar.js +66 -79
  16. package/dist/avatar.js.map +1 -0
  17. package/dist/badge.d.ts +48 -42
  18. package/dist/badge.d.ts.map +1 -0
  19. package/dist/badge.js +195 -202
  20. package/dist/badge.js.map +1 -0
  21. package/dist/button.d.ts +26 -21
  22. package/dist/button.d.ts.map +1 -0
  23. package/dist/button.js +24 -24
  24. package/dist/button.js.map +1 -0
  25. package/dist/card.d.ts +105 -99
  26. package/dist/card.d.ts.map +1 -0
  27. package/dist/card.js +105 -66
  28. package/dist/card.js.map +1 -0
  29. package/dist/checkbox-group.d.ts +16 -12
  30. package/dist/checkbox-group.d.ts.map +1 -0
  31. package/dist/checkbox-group.js +18 -14
  32. package/dist/checkbox-group.js.map +1 -0
  33. package/dist/checkbox.d.ts +25 -19
  34. package/dist/checkbox.d.ts.map +1 -0
  35. package/dist/checkbox.js +26 -32
  36. package/dist/checkbox.js.map +1 -0
  37. package/dist/collapsible.d.ts +32 -26
  38. package/dist/collapsible.d.ts.map +1 -0
  39. package/dist/collapsible.js +32 -32
  40. package/dist/collapsible.js.map +1 -0
  41. package/dist/combobox.d.ts +191 -182
  42. package/dist/combobox.d.ts.map +1 -0
  43. package/dist/combobox.js +176 -250
  44. package/dist/combobox.js.map +1 -0
  45. package/dist/context-menu.d.ts +151 -138
  46. package/dist/context-menu.d.ts.map +1 -0
  47. package/dist/context-menu.js +151 -173
  48. package/dist/context-menu.js.map +1 -0
  49. package/dist/dialog.d.ts +101 -92
  50. package/dist/dialog.d.ts.map +1 -0
  51. package/dist/dialog.js +101 -105
  52. package/dist/dialog.js.map +1 -0
  53. package/dist/drawer.d.ts +109 -99
  54. package/dist/drawer.d.ts.map +1 -0
  55. package/dist/drawer.js +120 -111
  56. package/dist/drawer.js.map +1 -0
  57. package/dist/field.d.ts +61 -54
  58. package/dist/field.d.ts.map +1 -0
  59. package/dist/field.js +58 -27
  60. package/dist/field.js.map +1 -0
  61. package/dist/fieldset.d.ts +24 -19
  62. package/dist/fieldset.d.ts.map +1 -0
  63. package/dist/fieldset.js +26 -18
  64. package/dist/fieldset.js.map +1 -0
  65. package/dist/form.d.ts +16 -12
  66. package/dist/form.d.ts.map +1 -0
  67. package/dist/form.js +18 -8
  68. package/dist/form.js.map +1 -0
  69. package/dist/index.d.ts +44 -2115
  70. package/dist/index.js +44 -318
  71. package/dist/input.d.ts +16 -12
  72. package/dist/input.d.ts.map +1 -0
  73. package/dist/input.js +19 -9
  74. package/dist/input.js.map +1 -0
  75. package/dist/lib/arrow-svg.js +28 -0
  76. package/dist/lib/arrow-svg.js.map +1 -0
  77. package/dist/lib/button-variants.d.ts +6 -0
  78. package/dist/lib/button-variants.d.ts.map +1 -0
  79. package/dist/lib/button-variants.js +31 -0
  80. package/dist/lib/button-variants.js.map +1 -0
  81. package/dist/lib/control-variants.d.ts +6 -0
  82. package/dist/lib/control-variants.d.ts.map +1 -0
  83. package/dist/lib/control-variants.js +37 -0
  84. package/dist/lib/control-variants.js.map +1 -0
  85. package/dist/lib/form-variants.js +11 -0
  86. package/dist/lib/form-variants.js.map +1 -0
  87. package/dist/lib/tooltip-variants.d.ts +5 -0
  88. package/dist/lib/tooltip-variants.d.ts.map +1 -0
  89. package/dist/lib/tooltip-variants.js +36 -0
  90. package/dist/lib/tooltip-variants.js.map +1 -0
  91. package/dist/lib/utils.js +11 -0
  92. package/dist/lib/utils.js.map +1 -0
  93. package/dist/menu.d.ts +151 -138
  94. package/dist/menu.d.ts.map +1 -0
  95. package/dist/menu.js +151 -146
  96. package/dist/menu.js.map +1 -0
  97. package/dist/menubar.d.ts +168 -155
  98. package/dist/menubar.d.ts.map +1 -0
  99. package/dist/menubar.js +163 -169
  100. package/dist/menubar.js.map +1 -0
  101. package/dist/meter.d.ts +53 -43
  102. package/dist/meter.d.ts.map +1 -0
  103. package/dist/meter.js +59 -64
  104. package/dist/meter.js.map +1 -0
  105. package/dist/navigation-menu.d.ts +111 -96
  106. package/dist/navigation-menu.d.ts.map +1 -0
  107. package/dist/navigation-menu.js +117 -175
  108. package/dist/navigation-menu.js.map +1 -0
  109. package/dist/number-field.d.ts +64 -54
  110. package/dist/number-field.d.ts.map +1 -0
  111. package/dist/number-field.js +61 -69
  112. package/dist/number-field.js.map +1 -0
  113. package/dist/popover.d.ts +90 -82
  114. package/dist/popover.d.ts.map +1 -0
  115. package/dist/popover.js +85 -94
  116. package/dist/popover.js.map +1 -0
  117. package/dist/preview-card.d.ts +58 -54
  118. package/dist/preview-card.d.ts.map +1 -0
  119. package/dist/preview-card.js +57 -81
  120. package/dist/preview-card.js.map +1 -0
  121. package/dist/progress.d.ts +48 -40
  122. package/dist/progress.d.ts.map +1 -0
  123. package/dist/progress.js +46 -50
  124. package/dist/progress.js.map +1 -0
  125. package/dist/radio-group.d.ts +16 -12
  126. package/dist/radio-group.d.ts.map +1 -0
  127. package/dist/radio-group.js +18 -14
  128. package/dist/radio-group.js.map +1 -0
  129. package/dist/radio.d.ts +24 -19
  130. package/dist/radio.d.ts.map +1 -0
  131. package/dist/radio.js +25 -34
  132. package/dist/radio.js.map +1 -0
  133. package/dist/scroll-area.d.ts +57 -47
  134. package/dist/scroll-area.d.ts.map +1 -0
  135. package/dist/scroll-area.js +54 -56
  136. package/dist/scroll-area.js.map +1 -0
  137. package/dist/select.d.ts +146 -133
  138. package/dist/select.d.ts.map +1 -0
  139. package/dist/select.js +133 -167
  140. package/dist/select.js.map +1 -0
  141. package/dist/separator.d.ts +17 -12
  142. package/dist/separator.d.ts.map +1 -0
  143. package/dist/separator.js +19 -23
  144. package/dist/separator.js.map +1 -0
  145. package/dist/skeleton.d.ts +20 -0
  146. package/dist/skeleton.d.ts.map +1 -0
  147. package/dist/skeleton.js +27 -0
  148. package/dist/skeleton.js.map +1 -0
  149. package/dist/slider.d.ts +56 -47
  150. package/dist/slider.d.ts.map +1 -0
  151. package/dist/slider.js +53 -62
  152. package/dist/slider.js.map +1 -0
  153. package/dist/styles/default.css +14 -0
  154. package/dist/switch.d.ts +24 -19
  155. package/dist/switch.d.ts.map +1 -0
  156. package/dist/switch.js +23 -39
  157. package/dist/switch.js.map +1 -0
  158. package/dist/tabs.d.ts +60 -49
  159. package/dist/tabs.d.ts.map +1 -0
  160. package/dist/tabs.js +76 -84
  161. package/dist/tabs.js.map +1 -0
  162. package/dist/textarea.d.ts +15 -11
  163. package/dist/textarea.d.ts.map +1 -0
  164. package/dist/textarea.js +18 -14
  165. package/dist/textarea.js.map +1 -0
  166. package/dist/toast.d.ts +87 -81
  167. package/dist/toast.d.ts.map +1 -0
  168. package/dist/toast.js +79 -150
  169. package/dist/toast.js.map +1 -0
  170. package/dist/toggle-group.d.ts +34 -29
  171. package/dist/toggle-group.d.ts.map +1 -0
  172. package/dist/toggle-group.js +31 -34
  173. package/dist/toggle-group.js.map +1 -0
  174. package/dist/toggle.d.ts +24 -21
  175. package/dist/toggle.d.ts.map +1 -0
  176. package/dist/toggle.js +22 -15
  177. package/dist/toggle.js.map +1 -0
  178. package/dist/toolbar.d.ts +64 -56
  179. package/dist/toolbar.d.ts.map +1 -0
  180. package/dist/toolbar.js +57 -68
  181. package/dist/toolbar.js.map +1 -0
  182. package/dist/tooltip.d.ts +67 -62
  183. package/dist/tooltip.d.ts.map +1 -0
  184. package/dist/tooltip.js +65 -90
  185. package/dist/tooltip.js.map +1 -0
  186. package/package.json +8 -8
  187. package/dist/arrow-svg-C6zQTvgS.js +0 -40
  188. package/dist/button-variants-CbFMPwc8.js +0 -33
  189. package/dist/control-variants-Bwep4n0y.js +0 -37
  190. package/dist/form-variants-LJ8gIbk0.js +0 -9
  191. package/dist/utils-B6yFEsav.js +0 -8
package/dist/badge.js CHANGED
@@ -1,203 +1,196 @@
1
- "use client";
2
- import { jsx as t } from "react/jsx-runtime";
3
- import { cva as o } from "class-variance-authority";
4
- import { c as s } from "./utils-B6yFEsav.js";
5
- const p = o(
6
- [
7
- "inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors",
8
- "[&_svg]:pointer-events-none [&_svg]:shrink-0"
9
- ],
10
- {
11
- variants: {
12
- variant: {
13
- default: "",
14
- secondary: "",
15
- destructive: "",
16
- success: "",
17
- warning: "",
18
- info: ""
19
- },
20
- appearance: {
21
- default: "",
22
- outline: "border",
23
- light: "",
24
- ghost: ""
25
- },
26
- size: {
27
- sm: "text-xs px-2 h-5 min-w-5 [&_svg]:size-3",
28
- md: "text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5",
29
- lg: "text-sm px-3 h-7 min-w-7 [&_svg]:size-4"
30
- },
31
- shape: {
32
- pill: "rounded-full",
33
- rounded: "rounded-md"
34
- }
35
- },
36
- compoundVariants: [
37
- // Default appearance (solid) - full color bg, white text
38
- {
39
- variant: "default",
40
- appearance: "default",
41
- class: "bg-primary text-primary-foreground"
42
- },
43
- {
44
- variant: "secondary",
45
- appearance: "default",
46
- class: "bg-secondary text-secondary-foreground"
47
- },
48
- {
49
- variant: "destructive",
50
- appearance: "default",
51
- class: "bg-destructive text-white"
52
- },
53
- {
54
- variant: "success",
55
- appearance: "default",
56
- class: "bg-success text-white"
57
- },
58
- {
59
- variant: "warning",
60
- appearance: "default",
61
- class: "bg-warning text-white"
62
- },
63
- {
64
- variant: "info",
65
- appearance: "default",
66
- class: "bg-info text-white"
67
- },
68
- // Light appearance - 10% bg, colored text
69
- {
70
- variant: "default",
71
- appearance: "light",
72
- class: "bg-primary/10 text-primary"
73
- },
74
- {
75
- variant: "secondary",
76
- appearance: "light",
77
- class: "bg-secondary text-secondary-foreground"
78
- },
79
- {
80
- variant: "destructive",
81
- appearance: "light",
82
- class: "bg-destructive/10 text-destructive"
83
- },
84
- {
85
- variant: "success",
86
- appearance: "light",
87
- class: "bg-success/10 text-success"
88
- },
89
- {
90
- variant: "warning",
91
- appearance: "light",
92
- class: "bg-warning/10 text-warning"
93
- },
94
- {
95
- variant: "info",
96
- appearance: "light",
97
- class: "bg-info/10 text-info"
98
- },
99
- // Outline appearance - border + 10% bg, colored text
100
- {
101
- variant: "default",
102
- appearance: "outline",
103
- class: "border-primary bg-primary/10 text-primary"
104
- },
105
- {
106
- variant: "secondary",
107
- appearance: "outline",
108
- class: "bg-secondary border-border text-foreground"
109
- },
110
- {
111
- variant: "destructive",
112
- appearance: "outline",
113
- class: "border-destructive bg-destructive/10 text-destructive"
114
- },
115
- {
116
- variant: "success",
117
- appearance: "outline",
118
- class: "border-success bg-success/10 text-success"
119
- },
120
- {
121
- variant: "warning",
122
- appearance: "outline",
123
- class: "border-warning bg-warning/10 text-warning"
124
- },
125
- {
126
- variant: "info",
127
- appearance: "outline",
128
- class: "border-info bg-info/10 text-info"
129
- },
130
- // Ghost appearance - just colored text
131
- {
132
- variant: "default",
133
- appearance: "ghost",
134
- class: "text-primary"
135
- },
136
- {
137
- variant: "secondary",
138
- appearance: "ghost",
139
- class: "text-secondary-foreground"
140
- },
141
- {
142
- variant: "destructive",
143
- appearance: "ghost",
144
- class: "text-destructive"
145
- },
146
- {
147
- variant: "success",
148
- appearance: "ghost",
149
- class: "text-success"
150
- },
151
- {
152
- variant: "warning",
153
- appearance: "ghost",
154
- class: "text-warning"
155
- },
156
- {
157
- variant: "info",
158
- appearance: "ghost",
159
- class: "text-info"
160
- }
161
- ],
162
- defaultVariants: {
163
- variant: "default",
164
- appearance: "default",
165
- size: "md",
166
- shape: "rounded"
167
- }
168
- }
169
- ), d = ({ className: a, variant: e, appearance: r, size: n, shape: i, ...c }) => /* @__PURE__ */ t(
170
- "span",
171
- {
172
- className: s(p({ variant: e, appearance: r, size: n, shape: i }), a),
173
- ...c
174
- }
175
- );
176
- d.displayName = "Badge";
177
- const l = ({ className: a, ...e }) => /* @__PURE__ */ t(
178
- "span",
179
- {
180
- "data-slot": "badge-dot",
181
- className: s("size-2 rounded-full bg-[currentColor]", a),
182
- ...e
183
- }
184
- );
185
- l.displayName = "BadgeDot";
186
- const u = ({ className: a, ...e }) => /* @__PURE__ */ t(
187
- "button",
188
- {
189
- "data-slot": "badge-button",
190
- type: "button",
191
- className: s(
192
- "cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100",
193
- a
194
- ),
195
- ...e
196
- }
197
- );
198
- u.displayName = "BadgeButton";
199
- export {
200
- d as Badge,
201
- u as BadgeButton,
202
- l as BadgeDot
1
+ 'use client';
2
+
3
+ import { cn } from "./lib/utils.js";
4
+ import "react";
5
+ import { cva } from "class-variance-authority";
6
+ import { jsx } from "react/jsx-runtime";
7
+
8
+ //#region src/components/badge.tsx
9
+ const badgeVariants = cva(["inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors", "[&_svg]:pointer-events-none [&_svg]:shrink-0"], {
10
+ variants: {
11
+ variant: {
12
+ default: "",
13
+ secondary: "",
14
+ destructive: "",
15
+ success: "",
16
+ warning: "",
17
+ info: ""
18
+ },
19
+ appearance: {
20
+ default: "",
21
+ outline: "border",
22
+ light: "",
23
+ ghost: ""
24
+ },
25
+ size: {
26
+ sm: "text-xs px-2 h-5 min-w-5 [&_svg]:size-3",
27
+ md: "text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5",
28
+ lg: "text-sm px-3 h-7 min-w-7 [&_svg]:size-4"
29
+ },
30
+ shape: {
31
+ pill: "rounded-full",
32
+ rounded: "rounded-md"
33
+ }
34
+ },
35
+ compoundVariants: [
36
+ {
37
+ variant: "default",
38
+ appearance: "default",
39
+ class: "bg-primary text-primary-foreground"
40
+ },
41
+ {
42
+ variant: "secondary",
43
+ appearance: "default",
44
+ class: "bg-secondary text-secondary-foreground"
45
+ },
46
+ {
47
+ variant: "destructive",
48
+ appearance: "default",
49
+ class: "bg-destructive text-white"
50
+ },
51
+ {
52
+ variant: "success",
53
+ appearance: "default",
54
+ class: "bg-success text-white"
55
+ },
56
+ {
57
+ variant: "warning",
58
+ appearance: "default",
59
+ class: "bg-warning text-white"
60
+ },
61
+ {
62
+ variant: "info",
63
+ appearance: "default",
64
+ class: "bg-info text-white"
65
+ },
66
+ {
67
+ variant: "default",
68
+ appearance: "light",
69
+ class: "bg-primary/10 text-primary"
70
+ },
71
+ {
72
+ variant: "secondary",
73
+ appearance: "light",
74
+ class: "bg-secondary text-secondary-foreground"
75
+ },
76
+ {
77
+ variant: "destructive",
78
+ appearance: "light",
79
+ class: "bg-destructive/10 text-destructive"
80
+ },
81
+ {
82
+ variant: "success",
83
+ appearance: "light",
84
+ class: "bg-success/10 text-success"
85
+ },
86
+ {
87
+ variant: "warning",
88
+ appearance: "light",
89
+ class: "bg-warning/10 text-warning"
90
+ },
91
+ {
92
+ variant: "info",
93
+ appearance: "light",
94
+ class: "bg-info/10 text-info"
95
+ },
96
+ {
97
+ variant: "default",
98
+ appearance: "outline",
99
+ class: "border-primary bg-primary/10 text-primary"
100
+ },
101
+ {
102
+ variant: "secondary",
103
+ appearance: "outline",
104
+ class: "bg-secondary border-border text-foreground"
105
+ },
106
+ {
107
+ variant: "destructive",
108
+ appearance: "outline",
109
+ class: "border-destructive bg-destructive/10 text-destructive"
110
+ },
111
+ {
112
+ variant: "success",
113
+ appearance: "outline",
114
+ class: "border-success bg-success/10 text-success"
115
+ },
116
+ {
117
+ variant: "warning",
118
+ appearance: "outline",
119
+ class: "border-warning bg-warning/10 text-warning"
120
+ },
121
+ {
122
+ variant: "info",
123
+ appearance: "outline",
124
+ class: "border-info bg-info/10 text-info"
125
+ },
126
+ {
127
+ variant: "default",
128
+ appearance: "ghost",
129
+ class: "text-primary"
130
+ },
131
+ {
132
+ variant: "secondary",
133
+ appearance: "ghost",
134
+ class: "text-secondary-foreground"
135
+ },
136
+ {
137
+ variant: "destructive",
138
+ appearance: "ghost",
139
+ class: "text-destructive"
140
+ },
141
+ {
142
+ variant: "success",
143
+ appearance: "ghost",
144
+ class: "text-success"
145
+ },
146
+ {
147
+ variant: "warning",
148
+ appearance: "ghost",
149
+ class: "text-warning"
150
+ },
151
+ {
152
+ variant: "info",
153
+ appearance: "ghost",
154
+ class: "text-info"
155
+ }
156
+ ],
157
+ defaultVariants: {
158
+ variant: "default",
159
+ appearance: "default",
160
+ size: "md",
161
+ shape: "rounded"
162
+ }
163
+ });
164
+ const Badge = ({ className, variant, appearance, size, shape, ...props }) => {
165
+ return /* @__PURE__ */ jsx("span", {
166
+ className: cn(badgeVariants({
167
+ variant,
168
+ appearance,
169
+ size,
170
+ shape
171
+ }), className),
172
+ ...props
173
+ });
203
174
  };
175
+ Badge.displayName = "Badge";
176
+ const BadgeDot = ({ className, ...props }) => {
177
+ return /* @__PURE__ */ jsx("span", {
178
+ "data-slot": "badge-dot",
179
+ className: cn("size-2 rounded-full bg-[currentColor]", className),
180
+ ...props
181
+ });
182
+ };
183
+ BadgeDot.displayName = "BadgeDot";
184
+ const BadgeButton = ({ className, ...props }) => {
185
+ return /* @__PURE__ */ jsx("button", {
186
+ "data-slot": "badge-button",
187
+ type: "button",
188
+ className: cn("cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100", className),
189
+ ...props
190
+ });
191
+ };
192
+ BadgeButton.displayName = "BadgeButton";
193
+
194
+ //#endregion
195
+ export { Badge, BadgeButton, BadgeDot };
196
+ //# sourceMappingURL=badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// Badge Variants\n// ============================================================================\n\nconst badgeVariants = cva(\n [\n 'inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors',\n '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n ],\n {\n variants: {\n variant: {\n default: '',\n secondary: '',\n destructive: '',\n success: '',\n warning: '',\n info: '',\n },\n appearance: {\n default: '',\n outline: 'border',\n light: '',\n ghost: '',\n },\n size: {\n sm: 'text-xs px-2 h-5 min-w-5 [&_svg]:size-3',\n md: 'text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5',\n lg: 'text-sm px-3 h-7 min-w-7 [&_svg]:size-4',\n },\n shape: {\n pill: 'rounded-full',\n rounded: 'rounded-md',\n },\n },\n compoundVariants: [\n // Default appearance (solid) - full color bg, white text\n {\n variant: 'default',\n appearance: 'default',\n class: 'bg-primary text-primary-foreground',\n },\n {\n variant: 'secondary',\n appearance: 'default',\n class: 'bg-secondary text-secondary-foreground',\n },\n {\n variant: 'destructive',\n appearance: 'default',\n class: 'bg-destructive text-white',\n },\n {\n variant: 'success',\n appearance: 'default',\n class: 'bg-success text-white',\n },\n {\n variant: 'warning',\n appearance: 'default',\n class: 'bg-warning text-white',\n },\n {\n variant: 'info',\n appearance: 'default',\n class: 'bg-info text-white',\n },\n // Light appearance - 10% bg, colored text\n {\n variant: 'default',\n appearance: 'light',\n class: 'bg-primary/10 text-primary',\n },\n {\n variant: 'secondary',\n appearance: 'light',\n class: 'bg-secondary text-secondary-foreground',\n },\n {\n variant: 'destructive',\n appearance: 'light',\n class: 'bg-destructive/10 text-destructive',\n },\n {\n variant: 'success',\n appearance: 'light',\n class: 'bg-success/10 text-success',\n },\n {\n variant: 'warning',\n appearance: 'light',\n class: 'bg-warning/10 text-warning',\n },\n {\n variant: 'info',\n appearance: 'light',\n class: 'bg-info/10 text-info',\n },\n // Outline appearance - border + 10% bg, colored text\n {\n variant: 'default',\n appearance: 'outline',\n class: 'border-primary bg-primary/10 text-primary',\n },\n {\n variant: 'secondary',\n appearance: 'outline',\n class: 'bg-secondary border-border text-foreground',\n },\n {\n variant: 'destructive',\n appearance: 'outline',\n class: 'border-destructive bg-destructive/10 text-destructive',\n },\n {\n variant: 'success',\n appearance: 'outline',\n class: 'border-success bg-success/10 text-success',\n },\n {\n variant: 'warning',\n appearance: 'outline',\n class: 'border-warning bg-warning/10 text-warning',\n },\n {\n variant: 'info',\n appearance: 'outline',\n class: 'border-info bg-info/10 text-info',\n },\n // Ghost appearance - just colored text\n {\n variant: 'default',\n appearance: 'ghost',\n class: 'text-primary',\n },\n {\n variant: 'secondary',\n appearance: 'ghost',\n class: 'text-secondary-foreground',\n },\n {\n variant: 'destructive',\n appearance: 'ghost',\n class: 'text-destructive',\n },\n {\n variant: 'success',\n appearance: 'ghost',\n class: 'text-success',\n },\n {\n variant: 'warning',\n appearance: 'ghost',\n class: 'text-warning',\n },\n {\n variant: 'info',\n appearance: 'ghost',\n class: 'text-info',\n },\n ],\n defaultVariants: {\n variant: 'default',\n appearance: 'default',\n size: 'md',\n shape: 'rounded',\n },\n },\n)\n\nexport type BadgeVariant =\n | 'default'\n | 'secondary'\n | 'destructive'\n | 'success'\n | 'warning'\n | 'info'\n\nexport type BadgeAppearance = 'default' | 'outline' | 'light' | 'ghost'\n\nexport type BadgeSize = 'sm' | 'md' | 'lg'\n\nexport type BadgeShape = 'pill' | 'rounded'\n\n// ============================================================================\n// Badge\n// ============================================================================\n\ntype BadgeProps = React.ComponentProps<'span'> & {\n /** Visual style variant */\n variant?: BadgeVariant\n /** Appearance style */\n appearance?: BadgeAppearance\n /** Size of the badge */\n size?: BadgeSize\n /** Shape of the badge */\n shape?: BadgeShape\n}\n\nconst Badge = ({ className, variant, appearance, size, shape, ...props }: BadgeProps) => {\n return (\n <span\n className={cn(badgeVariants({ variant, appearance, size, shape }), className)}\n {...props}\n />\n )\n}\n\nBadge.displayName = 'Badge'\n\n// ============================================================================\n// BadgeDot\n// ============================================================================\n\ntype BadgeDotProps = React.ComponentProps<'span'>\n\nconst BadgeDot = ({ className, ...props }: BadgeDotProps) => {\n return (\n <span\n data-slot='badge-dot'\n className={cn('size-2 rounded-full bg-[currentColor]', className)}\n {...props}\n />\n )\n}\n\nBadgeDot.displayName = 'BadgeDot'\n\n// ============================================================================\n// BadgeButton\n// ============================================================================\n\ntype BadgeButtonProps = React.ComponentProps<'button'>\n\nconst BadgeButton = ({ className, ...props }: BadgeButtonProps) => {\n return (\n <button\n data-slot='badge-button'\n type='button'\n className={cn(\n 'cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100',\n className,\n )}\n {...props}\n />\n )\n}\n\nBadgeButton.displayName = 'BadgeButton'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { Badge, BadgeDot, BadgeButton }\n\nexport type { BadgeProps, BadgeDotProps, BadgeButtonProps }\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,IACpB,CACE,oFACA,+CACD,EACD;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,SAAS;GACT,MAAM;GACP;EACD,YAAY;GACV,SAAS;GACT,SAAS;GACT,OAAO;GACP,OAAO;GACR;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACF;CACD,kBAAkB;EAEhB;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,CACF;AA+BD,MAAM,SAAS,EAAE,WAAW,SAAS,YAAY,MAAM,OAAO,GAAG,YAAwB;AACvF,QACE,oBAAC;EACC,WAAW,GAAG,cAAc;GAAE;GAAS;GAAY;GAAM;GAAO,CAAC,EAAE,UAAU;EAC7E,GAAI;GACJ;;AAIN,MAAM,cAAc;AAQpB,MAAM,YAAY,EAAE,WAAW,GAAG,YAA2B;AAC3D,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;GACJ;;AAIN,SAAS,cAAc;AAQvB,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAAC;EACC,aAAU;EACV,MAAK;EACL,WAAW,GACT,0LACA,UACD;EACD,GAAI;GACJ;;AAIN,YAAY,cAAc"}
package/dist/button.d.ts CHANGED
@@ -1,21 +1,26 @@
1
- import { Button as Button_2 } from '@base-ui/react/button';
2
- import { JSX } from 'react/jsx-runtime';
3
- import * as React_2 from 'react';
4
-
5
- export declare const Button: {
6
- ({ className, variant, size, disabled, children, ...props }: ButtonProps): JSX.Element;
7
- displayName: string;
8
- };
9
-
10
- export declare type ButtonProps = React_2.ComponentProps<typeof Button_2> & {
11
- /** Visual style variant */
12
- variant?: ButtonVariant;
13
- /** Size of the button */
14
- size?: ButtonSize;
15
- };
16
-
17
- declare type ButtonSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
18
-
19
- declare type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
20
-
21
- export { }
1
+ import { ButtonSize, ButtonVariant } from "./lib/button-variants.js";
2
+ import { Button as Button$1 } from "@base-ui/react/button";
3
+ import * as React from "react";
4
+ import * as react_jsx_runtime18 from "react/jsx-runtime";
5
+
6
+ //#region src/components/button.d.ts
7
+ type ButtonProps = React.ComponentProps<typeof Button$1> & {
8
+ /** Visual style variant */
9
+ variant?: ButtonVariant;
10
+ /** Size of the button */
11
+ size?: ButtonSize;
12
+ };
13
+ declare const Button: {
14
+ ({
15
+ className,
16
+ variant,
17
+ size,
18
+ disabled,
19
+ children,
20
+ ...props
21
+ }: ButtonProps): react_jsx_runtime18.JSX.Element;
22
+ displayName: string;
23
+ };
24
+ //#endregion
25
+ export { Button, type ButtonProps };
26
+ //# sourceMappingURL=button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.d.ts","names":[],"sources":["../src/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;;KAYK,WAAA,GAAc,KAAA,CAAM,sBAAsB;;YAEnC;EAFP;EAAW,IAAA,CAAA,EAIP,UAJO;;cAOV,MAPmB,EAAA;;IAEb,SAAA;IAAA,OAAA;IAAA,IAAA;IAAA,QAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA,EAYT,WAZS,CAAA,EAYE,mBAAA,CAAA,GAAA,CAAA,OAZF;aAEH,EAAA,MAAA;CAAU"}
package/dist/button.js CHANGED
@@ -1,25 +1,25 @@
1
- "use client";
2
- import { jsx as a } from "react/jsx-runtime";
3
- import { Button as i } from "@base-ui/react/button";
4
- import { b as u } from "./button-variants-CbFMPwc8.js";
5
- import { c as e } from "./utils-B6yFEsav.js";
6
- const p = ({
7
- className: t,
8
- variant: o,
9
- size: r,
10
- disabled: m,
11
- children: n,
12
- ...s
13
- }) => /* @__PURE__ */ a(
14
- i,
15
- {
16
- className: e(u({ variant: o, size: r }), t),
17
- disabled: m,
18
- ...s,
19
- children: n
20
- }
21
- );
22
- p.displayName = "Button";
23
- export {
24
- p as Button
1
+ 'use client';
2
+
3
+ import { buttonVariants } from "./lib/button-variants.js";
4
+ import { cn } from "./lib/utils.js";
5
+ import { Button as Button$1 } from "@base-ui/react/button";
6
+ import "react";
7
+ import { jsx } from "react/jsx-runtime";
8
+
9
+ //#region src/components/button.tsx
10
+ const Button = ({ className, variant, size, disabled, children, ...props }) => {
11
+ return /* @__PURE__ */ jsx(Button$1, {
12
+ className: cn(buttonVariants({
13
+ variant,
14
+ size
15
+ }), className),
16
+ disabled,
17
+ ...props,
18
+ children
19
+ });
25
20
  };
21
+ Button.displayName = "Button";
22
+
23
+ //#endregion
24
+ export { Button };
25
+ //# sourceMappingURL=button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.js","names":["BaseButton"],"sources":["../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as BaseButton } from '@base-ui/react/button'\nimport * as React from 'react'\n\nimport {\n type ButtonSize,\n type ButtonVariant,\n buttonVariants,\n} from '../lib/button-variants'\nimport { cn } from '../lib/utils'\n\ntype ButtonProps = React.ComponentProps<typeof BaseButton> & {\n /** Visual style variant */\n variant?: ButtonVariant\n /** Size of the button */\n size?: ButtonSize\n}\n\nconst Button = ({\n className,\n variant,\n size,\n disabled,\n children,\n ...props\n}: ButtonProps) => {\n return (\n <BaseButton\n className={cn(buttonVariants({ variant, size }), className)}\n disabled={disabled}\n {...props}\n >\n {children}\n </BaseButton>\n )\n}\n\nButton.displayName = 'Button'\n\nexport { Button }\n\nexport type { ButtonProps }\n"],"mappings":";;;;;;;;;AAmBA,MAAM,UAAU,EACd,WACA,SACA,MACA,UACA,UACA,GAAG,YACc;AACjB,QACE,oBAACA;EACC,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM,CAAC,EAAE,UAAU;EACjD;EACV,GAAI;EAEH;GACU;;AAIjB,OAAO,cAAc"}