@walidsj/react-ui 0.1.5 → 0.3.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 (307) hide show
  1. package/README.md +199 -6
  2. package/dist/accordion-nzbtc3_2.js +40 -0
  3. package/dist/accordion-nzbtc3_2.js.map +1 -0
  4. package/dist/alert-BQzMceKI.js +43 -0
  5. package/dist/alert-BQzMceKI.js.map +1 -0
  6. package/dist/alert-dialog-_E4de7AY.js +75 -0
  7. package/dist/alert-dialog-_E4de7AY.js.map +1 -0
  8. package/dist/aspect-ratio-CIVD_tCo.js +18 -0
  9. package/dist/aspect-ratio-CIVD_tCo.js.map +1 -0
  10. package/dist/autocomplete-CVD8GTVR.js +62 -0
  11. package/dist/autocomplete-CVD8GTVR.js.map +1 -0
  12. package/dist/avatar-1d_t2tas.js +42 -0
  13. package/dist/avatar-1d_t2tas.js.map +1 -0
  14. package/dist/breadcrumb-BGVDD5TT.js +57 -0
  15. package/dist/breadcrumb-BGVDD5TT.js.map +1 -0
  16. package/dist/{button-CYdt-JvA.js → button-BsqAkDSO.js} +9 -8
  17. package/dist/button-BsqAkDSO.js.map +1 -0
  18. package/dist/button-group-DPbwNPnT.js +16 -0
  19. package/dist/button-group-DPbwNPnT.js.map +1 -0
  20. package/dist/checkbox-DG9a1K_o.js +22 -0
  21. package/dist/checkbox-DG9a1K_o.js.map +1 -0
  22. package/dist/checkbox-group-DnC_1XMf.js +13 -0
  23. package/dist/checkbox-group-DnC_1XMf.js.map +1 -0
  24. package/dist/cn-Ccwc28Yd.js +1 -0
  25. package/dist/collapsible-odw6ynaJ.js +24 -0
  26. package/dist/collapsible-odw6ynaJ.js.map +1 -0
  27. package/dist/combobox-BjSMdUz_.js +98 -0
  28. package/dist/combobox-BjSMdUz_.js.map +1 -0
  29. package/dist/components/accordion/accordion.d.ts +11 -0
  30. package/dist/components/accordion/index.d.ts +1 -0
  31. package/dist/components/accordion/index.js +1 -0
  32. package/dist/components/alert/alert.d.ts +12 -0
  33. package/dist/components/alert/index.d.ts +2 -0
  34. package/dist/components/alert/index.js +1 -0
  35. package/dist/components/alert-dialog/alert-dialog.d.ts +21 -0
  36. package/dist/components/alert-dialog/index.d.ts +2 -0
  37. package/dist/components/alert-dialog/index.js +1 -0
  38. package/dist/components/aspect-ratio/aspect-ratio.d.ts +6 -0
  39. package/dist/components/aspect-ratio/index.d.ts +2 -0
  40. package/dist/components/aspect-ratio/index.js +1 -0
  41. package/dist/components/autocomplete/autocomplete.d.ts +15 -0
  42. package/dist/components/autocomplete/index.d.ts +1 -0
  43. package/dist/components/autocomplete/index.js +1 -0
  44. package/dist/components/avatar/avatar-group.d.ts +3 -0
  45. package/dist/components/avatar/avatar.d.ts +9 -0
  46. package/dist/components/avatar/index.d.ts +2 -0
  47. package/dist/components/avatar/index.js +1 -0
  48. package/dist/components/badge/badge.d.ts +12 -0
  49. package/dist/components/badge/index.d.ts +2 -0
  50. package/dist/components/breadcrumb/breadcrumb.d.ts +11 -0
  51. package/dist/components/breadcrumb/index.d.ts +1 -0
  52. package/dist/components/breadcrumb/index.js +1 -0
  53. package/dist/components/button/button.d.ts +1 -2
  54. package/dist/components/button/index.js +1 -1
  55. package/dist/components/button-group/button-group.d.ts +6 -0
  56. package/dist/components/button-group/index.d.ts +2 -0
  57. package/dist/components/button-group/index.js +1 -0
  58. package/dist/components/card/card.d.ts +7 -0
  59. package/dist/components/card/index.d.ts +1 -0
  60. package/dist/components/checkbox/checkbox.d.ts +3 -0
  61. package/dist/components/checkbox/index.d.ts +1 -0
  62. package/dist/components/checkbox/index.js +1 -0
  63. package/dist/components/checkbox-group/checkbox-group.d.ts +3 -0
  64. package/dist/components/checkbox-group/index.d.ts +1 -0
  65. package/dist/components/checkbox-group/index.js +1 -0
  66. package/dist/components/collapsible/collapsible.d.ts +9 -0
  67. package/dist/components/collapsible/index.d.ts +1 -0
  68. package/dist/components/collapsible/index.js +1 -0
  69. package/dist/components/combobox/combobox.d.ts +29 -0
  70. package/dist/components/combobox/index.d.ts +2 -0
  71. package/dist/components/combobox/index.js +1 -0
  72. package/dist/components/container/container.d.ts +1 -0
  73. package/dist/components/container/index.d.ts +1 -0
  74. package/dist/components/container/index.js +1 -0
  75. package/dist/components/context-menu/context-menu.d.ts +22 -0
  76. package/dist/components/context-menu/index.d.ts +1 -0
  77. package/dist/components/context-menu/index.js +1 -0
  78. package/dist/components/description-list/description-list.d.ts +4 -0
  79. package/dist/components/description-list/index.d.ts +1 -0
  80. package/dist/components/description-list/index.js +1 -0
  81. package/dist/components/dialog/dialog.d.ts +13 -0
  82. package/dist/components/dialog/index.d.ts +1 -0
  83. package/dist/components/dialog/index.js +1 -0
  84. package/dist/components/drawer/drawer.d.ts +15 -0
  85. package/dist/components/drawer/index.d.ts +1 -0
  86. package/dist/components/drawer/index.js +1 -0
  87. package/dist/components/dropdown-menu/dropdown-menu.d.ts +12 -0
  88. package/dist/components/dropdown-menu/index.d.ts +1 -0
  89. package/dist/components/dropdown-menu/index.js +1 -0
  90. package/dist/components/empty/empty.d.ts +4 -0
  91. package/dist/components/empty/index.d.ts +1 -0
  92. package/dist/components/empty/index.js +1 -0
  93. package/dist/components/field/field.d.ts +11 -0
  94. package/dist/components/field/index.d.ts +1 -0
  95. package/dist/components/field/index.js +1 -0
  96. package/dist/components/fieldset/fieldset.d.ts +8 -0
  97. package/dist/components/fieldset/index.d.ts +1 -0
  98. package/dist/components/fieldset/index.js +1 -0
  99. package/dist/components/form/form.d.ts +3 -0
  100. package/dist/components/form/index.d.ts +1 -0
  101. package/dist/components/form/index.js +1 -0
  102. package/dist/components/icon-button/icon-button.d.ts +7 -0
  103. package/dist/components/icon-button/index.d.ts +2 -0
  104. package/dist/components/icon-button/index.js +1 -0
  105. package/dist/components/inline-code/index.d.ts +1 -0
  106. package/dist/components/inline-code/index.js +1 -0
  107. package/dist/components/inline-code/inline-code.d.ts +1 -0
  108. package/dist/components/input/index.js +1 -1
  109. package/dist/components/input-group/index.d.ts +1 -0
  110. package/dist/components/input-group/index.js +1 -0
  111. package/dist/components/input-group/input-group.d.ts +3 -0
  112. package/dist/components/kbd/index.d.ts +1 -0
  113. package/dist/components/kbd/index.js +1 -0
  114. package/dist/components/kbd/kbd.d.ts +1 -0
  115. package/dist/components/label/index.d.ts +2 -0
  116. package/dist/components/label/label.d.ts +6 -0
  117. package/dist/components/link/index.d.ts +1 -0
  118. package/dist/components/link/index.js +1 -0
  119. package/dist/components/link/link.d.ts +1 -0
  120. package/dist/components/menubar/index.d.ts +1 -0
  121. package/dist/components/menubar/index.js +1 -0
  122. package/dist/components/menubar/menubar.d.ts +16 -0
  123. package/dist/components/meter/index.d.ts +2 -0
  124. package/dist/components/meter/index.js +1 -0
  125. package/dist/components/meter/meter.d.ts +13 -0
  126. package/dist/components/navigation-menu/index.d.ts +1 -0
  127. package/dist/components/navigation-menu/index.js +1 -0
  128. package/dist/components/navigation-menu/navigation-menu.d.ts +21 -0
  129. package/dist/components/number-field/index.d.ts +1 -0
  130. package/dist/components/number-field/index.js +1 -0
  131. package/dist/components/number-field/number-field.d.ts +13 -0
  132. package/dist/components/otp-field/index.d.ts +1 -0
  133. package/dist/components/otp-field/index.js +1 -0
  134. package/dist/components/otp-field/otp-field.d.ts +10 -0
  135. package/dist/components/pagination/index.d.ts +2 -0
  136. package/dist/components/pagination/index.js +1 -0
  137. package/dist/components/pagination/pagination.d.ts +23 -0
  138. package/dist/components/popover/index.d.ts +1 -0
  139. package/dist/components/popover/index.js +1 -0
  140. package/dist/components/popover/popover.d.ts +13 -0
  141. package/dist/components/preview-card/index.d.ts +1 -0
  142. package/dist/components/preview-card/index.js +1 -0
  143. package/dist/components/preview-card/preview-card.d.ts +11 -0
  144. package/dist/components/progress/index.d.ts +1 -0
  145. package/dist/components/progress/index.js +1 -0
  146. package/dist/components/progress/progress.d.ts +3 -0
  147. package/dist/components/radio/index.d.ts +1 -0
  148. package/dist/components/radio/index.js +1 -0
  149. package/dist/components/radio/radio.d.ts +3 -0
  150. package/dist/components/radio-group/index.d.ts +1 -0
  151. package/dist/components/radio-group/index.js +1 -0
  152. package/dist/components/radio-group/radio-group.d.ts +9 -0
  153. package/dist/components/scroll-area/index.d.ts +1 -0
  154. package/dist/components/scroll-area/index.js +1 -0
  155. package/dist/components/scroll-area/scroll-area.d.ts +3 -0
  156. package/dist/components/select/index.d.ts +1 -0
  157. package/dist/components/select/index.js +1 -0
  158. package/dist/components/select/select.d.ts +13 -0
  159. package/dist/components/separator/index.d.ts +2 -0
  160. package/dist/components/separator/separator.d.ts +6 -0
  161. package/dist/components/sheet/index.d.ts +2 -0
  162. package/dist/components/sheet/index.js +1 -0
  163. package/dist/components/sheet/sheet.d.ts +23 -0
  164. package/dist/components/sidebar/index.d.ts +1 -0
  165. package/dist/components/sidebar/index.js +1 -0
  166. package/dist/components/sidebar/sidebar.d.ts +10 -0
  167. package/dist/components/skeleton/index.d.ts +1 -0
  168. package/dist/components/skeleton/index.js +1 -0
  169. package/dist/components/skeleton/skeleton.d.ts +1 -0
  170. package/dist/components/slider/index.d.ts +1 -0
  171. package/dist/components/slider/index.js +1 -0
  172. package/dist/components/slider/slider.d.ts +3 -0
  173. package/dist/components/spinner/index.d.ts +2 -0
  174. package/dist/components/spinner/index.js +1 -0
  175. package/dist/components/spinner/spinner.d.ts +7 -0
  176. package/dist/components/status-indicator/index.d.ts +2 -0
  177. package/dist/components/status-indicator/index.js +1 -0
  178. package/dist/components/status-indicator/status-indicator.d.ts +6 -0
  179. package/dist/components/switch/index.d.ts +1 -0
  180. package/dist/components/switch/index.js +1 -0
  181. package/dist/components/switch/switch.d.ts +3 -0
  182. package/dist/components/table/index.d.ts +1 -0
  183. package/dist/components/table/index.js +1 -0
  184. package/dist/components/table/table.d.ts +9 -0
  185. package/dist/components/tabs/index.d.ts +1 -0
  186. package/dist/components/tabs/index.js +1 -0
  187. package/dist/components/tabs/tabs.d.ts +12 -0
  188. package/dist/components/textarea/index.js +1 -1
  189. package/dist/components/toast/index.d.ts +1 -0
  190. package/dist/components/toast/index.js +1 -0
  191. package/dist/components/toast/toast.d.ts +15 -0
  192. package/dist/components/toggle/index.d.ts +1 -0
  193. package/dist/components/toggle/index.js +1 -0
  194. package/dist/components/toggle/toggle.d.ts +3 -0
  195. package/dist/components/toggle-group/index.d.ts +1 -0
  196. package/dist/components/toggle-group/index.js +1 -0
  197. package/dist/components/toggle-group/toggle-group.d.ts +9 -0
  198. package/dist/components/toolbar/index.d.ts +1 -0
  199. package/dist/components/toolbar/index.js +1 -0
  200. package/dist/components/toolbar/toolbar.d.ts +16 -0
  201. package/dist/components/tooltip/index.d.ts +1 -0
  202. package/dist/components/tooltip/index.js +1 -0
  203. package/dist/components/tooltip/tooltip.d.ts +9 -0
  204. package/dist/components/visually-hidden/index.d.ts +2 -0
  205. package/dist/components/visually-hidden/index.js +1 -0
  206. package/dist/components/visually-hidden/visually-hidden.d.ts +6 -0
  207. package/dist/container-BiCW_jGj.js +14 -0
  208. package/dist/container-BiCW_jGj.js.map +1 -0
  209. package/dist/context-menu-paRijJ7d.js +86 -0
  210. package/dist/context-menu-paRijJ7d.js.map +1 -0
  211. package/dist/description-list-DDfz-rHA.js +32 -0
  212. package/dist/description-list-DDfz-rHA.js.map +1 -0
  213. package/dist/dialog-wnHwh4r8.js +39 -0
  214. package/dist/dialog-wnHwh4r8.js.map +1 -0
  215. package/dist/{cn-BtC0eFBk.js → dist-hY1s01yz.js} +2 -3
  216. package/dist/dist-hY1s01yz.js.map +1 -0
  217. package/dist/drawer-C27gyXYB.js +59 -0
  218. package/dist/drawer-C27gyXYB.js.map +1 -0
  219. package/dist/dropdown-menu-nea36MKM.js +36 -0
  220. package/dist/dropdown-menu-nea36MKM.js.map +1 -0
  221. package/dist/empty-Cqrg0Hyt.js +32 -0
  222. package/dist/empty-Cqrg0Hyt.js.map +1 -0
  223. package/dist/field-C-2eNSGZ.js +31 -0
  224. package/dist/field-C-2eNSGZ.js.map +1 -0
  225. package/dist/fieldset-Cgl_KnGa.js +20 -0
  226. package/dist/fieldset-Cgl_KnGa.js.map +1 -0
  227. package/dist/form-CLslJWE_.js +13 -0
  228. package/dist/form-CLslJWE_.js.map +1 -0
  229. package/dist/icon-button-lHWx7t_U.js +19 -0
  230. package/dist/icon-button-lHWx7t_U.js.map +1 -0
  231. package/dist/index.d.ts +74 -0
  232. package/dist/index.js +166 -4
  233. package/dist/index.js.map +1 -0
  234. package/dist/inline-code-UqU5cSaC.js +14 -0
  235. package/dist/inline-code-UqU5cSaC.js.map +1 -0
  236. package/dist/{input-CAZTJfrq.js → input-D9nJXDHP.js} +5 -4
  237. package/dist/input-D9nJXDHP.js.map +1 -0
  238. package/dist/input-group-DgRdsJK8.js +23 -0
  239. package/dist/input-group-DgRdsJK8.js.map +1 -0
  240. package/dist/kbd-Bd9mF-xm.js +14 -0
  241. package/dist/kbd-Bd9mF-xm.js.map +1 -0
  242. package/dist/link-D-SpYJsE.js +14 -0
  243. package/dist/link-D-SpYJsE.js.map +1 -0
  244. package/dist/menubar-11VKbNs2.js +50 -0
  245. package/dist/menubar-11VKbNs2.js.map +1 -0
  246. package/dist/meter-Bn8OYigA.js +33 -0
  247. package/dist/meter-Bn8OYigA.js.map +1 -0
  248. package/dist/navigation-menu-DP7r2PP-.js +71 -0
  249. package/dist/navigation-menu-DP7r2PP-.js.map +1 -0
  250. package/dist/number-field-YJ_58VU5.js +47 -0
  251. package/dist/number-field-YJ_58VU5.js.map +1 -0
  252. package/dist/otp-field-DZmagJ_O.js +29 -0
  253. package/dist/otp-field-DZmagJ_O.js.map +1 -0
  254. package/dist/pagination-CSAJn5Ph.js +106 -0
  255. package/dist/pagination-CSAJn5Ph.js.map +1 -0
  256. package/dist/popover-COYlKfkf.js +39 -0
  257. package/dist/popover-COYlKfkf.js.map +1 -0
  258. package/dist/preview-card-ByyvdPvk.js +36 -0
  259. package/dist/preview-card-ByyvdPvk.js.map +1 -0
  260. package/dist/progress-CGxVjwpG.js +17 -0
  261. package/dist/progress-CGxVjwpG.js.map +1 -0
  262. package/dist/radio-CT-p4jz7.js +17 -0
  263. package/dist/radio-CT-p4jz7.js.map +1 -0
  264. package/dist/radio-group-OdNChchU.js +25 -0
  265. package/dist/radio-group-OdNChchU.js.map +1 -0
  266. package/dist/scroll-area-oMOK10-G.js +29 -0
  267. package/dist/scroll-area-oMOK10-G.js.map +1 -0
  268. package/dist/select--Rn5DQaC.js +54 -0
  269. package/dist/select--Rn5DQaC.js.map +1 -0
  270. package/dist/sheet-B6-iNDZG.js +66 -0
  271. package/dist/sheet-B6-iNDZG.js.map +1 -0
  272. package/dist/sidebar-C9YE73TS.js +82 -0
  273. package/dist/sidebar-C9YE73TS.js.map +1 -0
  274. package/dist/skeleton-CmJK1ao2.js +15 -0
  275. package/dist/skeleton-CmJK1ao2.js.map +1 -0
  276. package/dist/slider-Fhbdti2X.js +20 -0
  277. package/dist/slider-Fhbdti2X.js.map +1 -0
  278. package/dist/spinner-Xgsj2ClX.js +21 -0
  279. package/dist/spinner-Xgsj2ClX.js.map +1 -0
  280. package/dist/status-indicator-DnM1Iu7D.js +24 -0
  281. package/dist/status-indicator-DnM1Iu7D.js.map +1 -0
  282. package/dist/style.css +1634 -192
  283. package/dist/switch-C-i7Mmdd.js +14 -0
  284. package/dist/switch-C-i7Mmdd.js.map +1 -0
  285. package/dist/table-CH0H16pL.js +75 -0
  286. package/dist/table-CH0H16pL.js.map +1 -0
  287. package/dist/tabs-VnWSV0RD.js +33 -0
  288. package/dist/tabs-VnWSV0RD.js.map +1 -0
  289. package/dist/{textarea-BrjTLlfm.js → textarea-oT7xw8CO.js} +5 -4
  290. package/dist/textarea-oT7xw8CO.js.map +1 -0
  291. package/dist/toast-BkDQhrZ5.js +56 -0
  292. package/dist/toast-BkDQhrZ5.js.map +1 -0
  293. package/dist/toggle-CNd5ja2h.js +13 -0
  294. package/dist/toggle-CNd5ja2h.js.map +1 -0
  295. package/dist/toggle-group-B8vnkGCk.js +21 -0
  296. package/dist/toggle-group-B8vnkGCk.js.map +1 -0
  297. package/dist/toolbar-BVA36_dH.js +50 -0
  298. package/dist/toolbar-BVA36_dH.js.map +1 -0
  299. package/dist/tooltip-a7t8wv2L.js +24 -0
  300. package/dist/tooltip-a7t8wv2L.js.map +1 -0
  301. package/dist/visually-hidden-C8KngZTo.js +14 -0
  302. package/dist/visually-hidden-C8KngZTo.js.map +1 -0
  303. package/package.json +223 -1
  304. package/dist/button-CYdt-JvA.js.map +0 -1
  305. package/dist/cn-BtC0eFBk.js.map +0 -1
  306. package/dist/input-CAZTJfrq.js.map +0 -1
  307. package/dist/textarea-BrjTLlfm.js.map +0 -1
package/README.md CHANGED
@@ -26,17 +26,23 @@ Requires React 19. The package is ESM-only.
26
26
  ## Usage
27
27
 
28
28
  Import the compiled stylesheet once, then use components from the package
29
- root:
29
+ root. `InputGroup` and `InputGroup.Addon` place optional prefix/suffix content
30
+ beside an `Input`; unlabeled addons are decorative. `Container` centers content
31
+ within a responsive maximum width:
30
32
 
31
33
  ``` tsx
32
- import { Button, Input, Textarea } from "@walidsj/react-ui";
34
+ import { Badge, Button, Card, Input, Label, Separator, Textarea } from "@walidsj/react-ui";
33
35
  import "@walidsj/react-ui/style.css";
34
36
 
35
37
  export function Example() {
36
38
  return (
37
39
  <div style={{ display: "grid", gap: "1rem", maxWidth: "24rem" }}>
38
- <Input aria-label="Full name" placeholder="Full name" />
40
+ <Label htmlFor="name">Full name</Label>
41
+ <Input id="name" placeholder="Full name" />
39
42
  <Textarea aria-label="Notes" placeholder="Notes" size="lg" />
43
+ <Card><div style={{ padding: "1.5rem" }}>Account overview</div></Card>
44
+ <Badge variant="success">Active</Badge>
45
+ <Separator />
40
46
  <Button variant="primary" size="md">
41
47
  Save changes
42
48
  </Button>
@@ -55,6 +61,160 @@ import { Textarea } from "@walidsj/react-ui/components/textarea";
55
61
 
56
62
  ## Components
57
63
 
64
+ ### Label, Badge, Card, and Separator
65
+
66
+ The package also exports `Label`, `Badge`, `Separator`, and composable card
67
+ parts: `Card`, `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`,
68
+ and `Card.Footer`. Badge variants are `default`, `secondary`, `outline`,
69
+ `accent`, `success`, `warning`, and `danger`. `Separator` uses Base UI's
70
+ separator primitive and accepts `horizontal` or `vertical` orientation.
71
+
72
+ ### Tabs, Dialog, Dropdown Menu, and Tooltip
73
+
74
+ These components use Base UI for keyboard and focus behavior. Compose their
75
+ parts as needed:
76
+
77
+ ``` tsx
78
+ import { Tabs } from "@walidsj/react-ui";
79
+
80
+ <Tabs defaultValue="account">
81
+ <Tabs.List>
82
+ <Tabs.Trigger value="account">Account</Tabs.Trigger>
83
+ <Tabs.Trigger value="security">Security</Tabs.Trigger>
84
+ </Tabs.List>
85
+ <Tabs.Content value="account">Account settings</Tabs.Content>
86
+ <Tabs.Content value="security">Security settings</Tabs.Content>
87
+ </Tabs>
88
+ ```
89
+
90
+ `Dialog.Content` should include a `Dialog.Title` for an accessible name.
91
+ `Tooltip` instances should be wrapped in `Tooltip.Provider`.
92
+
93
+ ### More controls and layout components
94
+
95
+ `Switch` and `Checkbox` are Base UI-backed controls. `Select` is composed
96
+ from `Select`, `Select.Trigger`, `Select.Value`, `Select.Content`, and
97
+ `Select.Item`. `Accordion` is composed from `Accordion.Item`,
98
+ `Accordion.Trigger`, and `Accordion.Content`. `Avatar` supports `Avatar.Image`
99
+ and should always include an `Avatar.Fallback`. `AvatarGroup` overlaps avatars
100
+ and can include `AvatarGroup.Count` to indicate additional members.
101
+
102
+ For data and feedback, the package exports composable semantic table parts
103
+ (`Table`, `Table.Header`, `Table.Body`, `Table.Row`, `Table.Head`, `Table.Cell`,
104
+ `Table.Footer`, and `Table.Caption`), Base UI-backed `Progress`, `Skeleton`
105
+ for loading placeholders, and `Alert` with `default`, `danger`, `success`,
106
+ and `warning` variants.
107
+
108
+ Additional navigation and choice components include `Popover`,
109
+ `RadioGroup`/`RadioGroup.Item`, `ToggleGroup`/`ToggleGroup.Item`, and semantic
110
+ breadcrumb parts (`Breadcrumb`, `Breadcrumb.List`, `Breadcrumb.Item`,
111
+ `Breadcrumb.Link`, `Breadcrumb.Page`, and `Breadcrumb.Separator`).
112
+
113
+ Form composition also includes Base UI `Field` parts (`Field.Label`,
114
+ `Field.Description`, and `Field.Error`), `Slider`, `NumberField` with its group,
115
+ input and increment/decrement controls, and `Collapsible` with trigger and
116
+ content parts.
117
+
118
+ `Combobox` provides a searchable selection built on Base UI. Pass an `items`
119
+ collection to the root, then compose `Combobox.InputGroup`, `Combobox.Input`,
120
+ `Combobox.Content`, and `Combobox.Item`. `Meter` is a non-interactive value
121
+ display with `primary`, `success`, `warning`, and `danger` variants. `Toolbar`
122
+ provides keyboard-navigable action groups, while `ContextMenu` provides
123
+ right-click actions. `OTPField` composes one `OTPField.Input` per code slot and
124
+ supports Base UI's native paste and keyboard behavior.
125
+
126
+ The OTP root requires `length` (the number of code slots); use
127
+ `OTPField.Separator` only for visual grouping and do not count it as a slot.
128
+
129
+ `Autocomplete` suggests matching values while allowing free-form input. Its
130
+ object values can provide `label` and `value`; otherwise configure
131
+ `itemToStringValue` to produce the input text.
132
+ `Fieldset` groups related fields under an accessible legend. `Menubar` is for
133
+ application-level menus; `NavigationMenu` is for site navigation with linked
134
+ content panels. Both use Base UI keyboard and focus behavior.
135
+
136
+ `CheckboxGroup` shares selected values across a set of native-style checkboxes.
137
+ `PreviewCard` reveals link context on hover or keyboard focus. `Drawer` is a
138
+ swipe-dismissible bottom panel; use `Drawer.Title` and `Drawer.Description` to
139
+ provide its accessible name and description.
140
+
141
+ `Toggle` is a standalone two-state button. `Form` wraps Base UI's native form
142
+ and supports `onFormSubmit`, external `errors`, and `validationMode`; compose
143
+ it with `Field` and the other form controls for field-level validation.
144
+ `Radio` provides a standalone single-choice control; use `RadioGroup` when
145
+ several radio options share one value and keyboard navigation context.
146
+ `AspectRatio` reserves a stable content frame (16:9 by default) for images,
147
+ video, and other responsive media.
148
+ `Kbd` styles the native `<kbd>` element for semantic keyboard shortcut labels.
149
+ `Empty`, `Empty.Title`, and `Empty.Description` compose a clear no-content
150
+ message; place an action such as a `Button` inside `Empty` when users can
151
+ create or recover content.
152
+ `InlineCode` styles short code fragments within prose; use a preformatted
153
+ code block for multiline examples.
154
+ `Spinner` indicates ongoing work, supports `sm`, `md`, and `lg` sizes, and
155
+ uses its `label` prop as the accessible status name.
156
+ `ButtonGroup` groups related actions under one accessible group name and
157
+ supports horizontal (default) or vertical orientation.
158
+ `VisuallyHidden` keeps helper text available to assistive technology; set
159
+ `focusable` for content such as a keyboard-revealed skip link.
160
+ `Sidebar` provides composable navigation layout parts. The mobile overlay,
161
+ collapse state, and route selection remain under application control; use
162
+ `aria-current="page"` on the active `Sidebar.MenuButton` link.
163
+ `IconButton` reuses the standard button variants with square sizing and
164
+ requires an `aria-label` for its icon-only content.
165
+ `Link` styles a native anchor and preserves browser navigation behavior; use
166
+ your router's link component when client-side routing is required.
167
+ `DescriptionList`, `DescriptionList.Term`, and `DescriptionList.Details` provide
168
+ semantic label/value pairs for record details and summaries.
169
+ `StatusIndicator` pairs a colored dot with a visible label using `default`,
170
+ `success`, `warning`, or `danger` variants.
171
+
172
+ Overlays include `AlertDialog` (with `AlertDialog.Header`, `AlertDialog.Footer`,
173
+ `AlertDialog.Cancel`, and `AlertDialog.Action`) and `Sheet` with `right`, `left`,
174
+ `top`, and `bottom` sides. `ScrollArea` adds themed scrollbars around a native
175
+ scroll container. `Pagination` is composed from `Pagination.Content`,
176
+ `Pagination.Item`, `Pagination.Link`, `Pagination.Previous`, `Pagination.Next`, and
177
+ `Pagination.Ellipsis`.
178
+
179
+ Notifications use Base UI toast primitives. Wrap the application in
180
+ `ToastProvider`, render `Toaster` once, and call `useToastManager` from a
181
+ descendant component:
182
+
183
+ ```tsx
184
+ import {
185
+ Button,
186
+ Toaster,
187
+ ToastProvider,
188
+ useToastManager,
189
+ } from "@walidsj/react-ui";
190
+
191
+ function SaveButton() {
192
+ const { add } = useToastManager();
193
+
194
+ return (
195
+ <Button
196
+ onClick={() =>
197
+ add({
198
+ title: "Changes saved",
199
+ description: "Your settings are up to date.",
200
+ })
201
+ }
202
+ >
203
+ Save changes
204
+ </Button>
205
+ );
206
+ }
207
+
208
+ export function App() {
209
+ return (
210
+ <ToastProvider>
211
+ <SaveButton />
212
+ <Toaster />
213
+ </ToastProvider>
214
+ );
215
+ }
216
+ ```
217
+
58
218
  ### Button
59
219
 
60
220
  Renders a native `<button>`, defaults to `type="button"`, and forwards
@@ -115,6 +275,26 @@ Labels, descriptions, and error messages are composed by the consumer.
115
275
  Both form controls merge `className` with their internal classes using the
116
276
  `cn` package. Consumers do not need to install `clsx` or `tailwind-merge`.
117
277
 
278
+ Internal control glyphs (select chevrons, item checkmarks, clear/close
279
+ buttons, pagination arrows, numeric steppers, accordion chevrons) use
280
+ `@tabler/icons-react`, which ships as a runtime dependency of this package.
281
+ Consumers do not need to install it separately.
282
+
283
+ ## Migration
284
+
285
+ Compound parts moved from flat exports (`CardTitle`) to object namespaces
286
+ (`Card.Title`). Import only the namespace root, then use its properties:
287
+
288
+ ``` tsx
289
+ // Before (removed)
290
+ import { Card, CardTitle } from "@walidsj/react-ui";
291
+ <Card><CardTitle>Account</CardTitle></Card>
292
+
293
+ // After
294
+ import { Card } from "@walidsj/react-ui";
295
+ <Card><Card.Title>Account</Card.Title></Card>
296
+ ```
297
+
118
298
  ## Styling
119
299
 
120
300
  The package ships a precompiled stylesheet at
@@ -124,7 +304,10 @@ configuration to compile the library's CSS.
124
304
  The stylesheet includes only the utilities used by the published
125
305
  components and the semantic theme tokens. It intentionally does not
126
306
  include Tailwind Preflight, and it does not set the host application's
127
- global background, text color, or font family.
307
+ global background, text color, or font family. Component typography uses a
308
+ Geist-first font stack; load Geist Sans/Mono in the consuming app for exact
309
+ typeface matching. The default palette and materials follow Geist's neutral,
310
+ high-contrast direction with blue focus accents.
128
311
 
129
312
  ### Theme tokens
130
313
 
@@ -150,8 +333,9 @@ Override these variables on a wrapping element to customize the theme:
150
333
 
151
334
  ``` css
152
335
  .brand-theme {
153
- --ui-primary: oklch(0.55 0.18 150);
154
- --ui-ring: oklch(0.55 0.18 150);
336
+ --ui-primary: #0070f3;
337
+ --ui-primary-foreground: #ffffff;
338
+ --ui-ring: #0070f3;
155
339
  --ui-radius-md: 0.25rem;
156
340
  }
157
341
  ```
@@ -171,6 +355,15 @@ Apply the `dark` class to any ancestor of the components:
171
355
  This repository uses Bun for dependency management and development
172
356
  scripts.
173
357
 
358
+ Run the interactive component documentation locally with:
359
+
360
+ ``` bash
361
+ bun run docs
362
+ ```
363
+
364
+ Then open the local URL printed by Vite. The docs live in `docs/` and are
365
+ not included in the published component bundle.
366
+
174
367
  ``` bash
175
368
  bun install
176
369
  bun run typecheck
@@ -0,0 +1,40 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { IconChevronDown } from "@tabler/icons-react";
4
+ import { Accordion } from "@base-ui/react/accordion";
5
+ // src/components/accordion/accordion.tsx
6
+ var AccordionRoot = Accordion.Root;
7
+ function AccordionItem({ className, ...props }) {
8
+ return /* @__PURE__ */ jsx(Accordion.Item, {
9
+ ...props,
10
+ className: cn("border-border border-b", className)
11
+ });
12
+ }
13
+ function AccordionTrigger({ className, children, ...props }) {
14
+ return /* @__PURE__ */ jsx(Accordion.Header, {
15
+ className: "flex",
16
+ children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
17
+ ...props,
18
+ className: cn("text-foreground focus-visible:ring-ring flex flex-1 items-center justify-between py-4 text-left text-sm font-medium outline-none focus-visible:ring-2", className),
19
+ children: [children, /* @__PURE__ */ jsx("span", {
20
+ className: "text-muted-foreground ml-3 flex transition-transform data-[panel-open]:rotate-180",
21
+ "aria-hidden": "true",
22
+ children: /* @__PURE__ */ jsx(IconChevronDown, { size: 16 })
23
+ })]
24
+ })
25
+ });
26
+ }
27
+ function AccordionContent({ className, ...props }) {
28
+ return /* @__PURE__ */ jsx(Accordion.Panel, {
29
+ ...props,
30
+ className: cn("text-muted-foreground overflow-hidden pb-4 text-sm", className)
31
+ });
32
+ }
33
+ var Accordion$1 = Object.assign(AccordionRoot, {
34
+ Item: AccordionItem,
35
+ Trigger: AccordionTrigger,
36
+ Content: AccordionContent
37
+ });
38
+ export { Accordion$1 as t };
39
+
40
+ //# sourceMappingURL=accordion-nzbtc3_2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"accordion-nzbtc3_2.js","names":["BaseAccordion","Accordion"],"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { IconChevronDown } from \"@tabler/icons-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst AccordionRoot = BaseAccordion.Root;\n\nfunction AccordionItem({ className, ...props }: ComponentProps<typeof BaseAccordion.Item>) {\n return <BaseAccordion.Item {...props} className={cn(\"border-border border-b\", className)} />;\n}\n\nfunction AccordionTrigger({ className, children, ...props }: ComponentProps<typeof BaseAccordion.Trigger>) {\n return <BaseAccordion.Header className=\"flex\"><BaseAccordion.Trigger {...props} className={cn(\"text-foreground focus-visible:ring-ring flex flex-1 items-center justify-between py-4 text-left text-sm font-medium outline-none focus-visible:ring-2\", className)}>{children}<span className=\"text-muted-foreground ml-3 flex transition-transform data-[panel-open]:rotate-180\" aria-hidden=\"true\"><IconChevronDown size={16} /></span></BaseAccordion.Trigger></BaseAccordion.Header>;\n}\n\nfunction AccordionContent({ className, ...props }: ComponentProps<typeof BaseAccordion.Panel>) {\n return <BaseAccordion.Panel {...props} className={cn(\"text-muted-foreground overflow-hidden pb-4 text-sm\", className)} />;\n}\n\nexport const Accordion = Object.assign(AccordionRoot, {\n Item: AccordionItem,\n Trigger: AccordionTrigger,\n Content: AccordionContent,\n});\n"],"mappings":";;;;;AAKA,IAAM,gBAAgBA,UAAc;AAEpC,SAAS,cAAc,EAAE,WAAW,GAAG,SAAoD;CACzF,OAAO,oBAACA,UAAc,MAAf;EAAoB,GAAI;EAAO,WAAW,GAAG,0BAA0B,SAAS;CAAI,CAAA;AAC7F;AAEA,SAAS,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAuD;CACzG,OAAO,oBAACA,UAAc,QAAf;EAAsB,WAAU;EAAO,UAAA,qBAACA,UAAc,SAAf;GAAuB,GAAI;GAAO,WAAW,GAAG,yJAAyJ,SAAS;GAAlN,UAAA,CAAsN,UAAS,oBAAC,QAAD;IAAM,WAAU;IAAoF,eAAY;IAAO,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;GAAO,CAAA,CAAwB;;CAAuB,CAAA;AACxd;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAqD;CAC7F,OAAO,oBAACA,UAAc,OAAf;EAAqB,GAAI;EAAO,WAAW,GAAG,sDAAsD,SAAS;CAAI,CAAA;AAC1H;AAEA,IAAaC,cAAY,OAAO,OAAO,eAAe;CACpD,MAAM;CACN,SAAS;CACT,SAAS;AACX,CAAC"}
@@ -0,0 +1,43 @@
1
+ import { t as cva } from "./dist-hY1s01yz.js";
2
+ import { t as cn } from "./cn-Ccwc28Yd.js";
3
+ import { forwardRef } from "react";
4
+ import { jsx } from "react/jsx-runtime";
5
+ // src/components/alert/alert.tsx
6
+ var alertVariants = cva("rounded-ui-lg border p-4 text-sm", {
7
+ variants: { variant: {
8
+ default: "border-border bg-background text-foreground",
9
+ danger: "border-danger/40 bg-danger/10 text-foreground [&>svg]:text-danger",
10
+ success: "border-success-foreground/30 bg-success text-success-foreground",
11
+ warning: "border-warning-foreground/30 bg-warning text-warning-foreground"
12
+ } },
13
+ defaultVariants: { variant: "default" }
14
+ });
15
+ var AlertRoot = forwardRef(function AlertRoot({ className, variant = "default", ...props }, ref) {
16
+ return /* @__PURE__ */ jsx("div", {
17
+ ...props,
18
+ ref,
19
+ role: "alert",
20
+ className: cn(alertVariants({ variant }), className)
21
+ });
22
+ });
23
+ var AlertTitle = forwardRef(function AlertTitle({ className, ...props }, ref) {
24
+ return /* @__PURE__ */ jsx("h5", {
25
+ ...props,
26
+ ref,
27
+ className: cn("mb-1 font-medium leading-none tracking-tight", className)
28
+ });
29
+ });
30
+ var AlertDescription = forwardRef(function AlertDescription({ className, ...props }, ref) {
31
+ return /* @__PURE__ */ jsx("div", {
32
+ ...props,
33
+ ref,
34
+ className: cn("text-sm opacity-90 [&_p]:leading-relaxed", className)
35
+ });
36
+ });
37
+ var Alert = Object.assign(AlertRoot, {
38
+ Title: AlertTitle,
39
+ Description: AlertDescription
40
+ });
41
+ export { Alert as t };
42
+
43
+ //# sourceMappingURL=alert-BQzMceKI.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert-BQzMceKI.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst alertVariants = cva(\"rounded-ui-lg border p-4 text-sm\", {\n variants: {\n variant: {\n default: \"border-border bg-background text-foreground\",\n danger: \"border-danger/40 bg-danger/10 text-foreground [&>svg]:text-danger\",\n success: \"border-success-foreground/30 bg-success text-success-foreground\",\n warning: \"border-warning-foreground/30 bg-warning text-warning-foreground\",\n },\n },\n defaultVariants: { variant: \"default\" },\n});\n\nexport interface AlertProps extends ComponentPropsWithoutRef<\"div\">, VariantProps<typeof alertVariants> {}\n\nconst AlertRoot = forwardRef<HTMLDivElement, AlertProps>(function AlertRoot(\n { className, variant = \"default\", ...props }, ref,\n) {\n return <div {...props} ref={ref} role=\"alert\" className={cn(alertVariants({ variant }), className)} />;\n});\n\nconst AlertTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h5\">>(\n function AlertTitle({ className, ...props }, ref) {\n return <h5 {...props} ref={ref} className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)} />;\n },\n);\n\nconst AlertDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"div\">>(\n function AlertDescription({ className, ...props }, ref) {\n return <div {...props} ref={ref} className={cn(\"text-sm opacity-90 [&_p]:leading-relaxed\", className)} />;\n },\n);\n\nexport const Alert = Object.assign(AlertRoot, {\n Title: AlertTitle,\n Description: AlertDescription,\n});\n"],"mappings":";;;;;AAIA,IAAM,gBAAgB,IAAI,oCAAoC;CAC5D,UAAU,EACR,SAAS;EACP,SAAS;EACT,QAAQ;EACR,SAAS;EACT,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC;AAID,IAAM,YAAY,WAAuC,SAAS,UAChE,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,KAC9C;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,MAAK;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;CAAI,CAAA;AACvG,CAAC;AAED,IAAM,aAAa,WACjB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAW,GAAG,gDAAgD,SAAS;CAAI,CAAA;AAC7G,CACF;AAEA,IAAM,mBAAmB,WACvB,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,4CAA4C,SAAS;CAAI,CAAA;AAC1G,CACF;AAEA,IAAa,QAAQ,OAAO,OAAO,WAAW;CAC5C,OAAO;CACP,aAAa;AACf,CAAC"}
@@ -0,0 +1,75 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { n as buttonVariants } from "./button-BsqAkDSO.js";
3
+ import { forwardRef } from "react";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { AlertDialog } from "@base-ui/react/alert-dialog";
6
+ // src/components/alert-dialog/alert-dialog.tsx
7
+ var AlertDialogRoot = AlertDialog.Root;
8
+ var AlertDialogTrigger = AlertDialog.Trigger;
9
+ function AlertDialogContent({ className, children, ...props }) {
10
+ return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: "fixed inset-0 z-40 bg-black/45 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0" }), /* @__PURE__ */ jsx(AlertDialog.Viewport, {
11
+ className: "fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4",
12
+ children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
13
+ ...props,
14
+ className: cn("rounded-ui-lg border-border bg-background text-foreground w-full max-w-md border p-6 shadow-[0_8px_30px_rgb(0,0,0,0.12)] outline-none transition-[transform,opacity] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0", className),
15
+ children
16
+ })
17
+ })] });
18
+ }
19
+ function AlertDialogTitle({ className, ...props }) {
20
+ return /* @__PURE__ */ jsx(AlertDialog.Title, {
21
+ ...props,
22
+ className: cn("text-foreground text-lg font-semibold tracking-tight", className)
23
+ });
24
+ }
25
+ function AlertDialogDescription({ className, ...props }) {
26
+ return /* @__PURE__ */ jsx(AlertDialog.Description, {
27
+ ...props,
28
+ className: cn("text-muted-foreground mt-2 text-sm", className)
29
+ });
30
+ }
31
+ var AlertDialogHeader = forwardRef(function AlertDialogHeader({ className, ...props }, ref) {
32
+ return /* @__PURE__ */ jsx("div", {
33
+ ...props,
34
+ ref,
35
+ className: cn("flex flex-col", className)
36
+ });
37
+ });
38
+ var AlertDialogFooter = forwardRef(function AlertDialogFooter({ className, ...props }, ref) {
39
+ return /* @__PURE__ */ jsx("div", {
40
+ ...props,
41
+ ref,
42
+ className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)
43
+ });
44
+ });
45
+ function AlertDialogAction({ className, variant = "primary", ...props }) {
46
+ return /* @__PURE__ */ jsx(AlertDialog.Close, {
47
+ ...props,
48
+ className: cn(buttonVariants({
49
+ variant,
50
+ size: "md"
51
+ }), className)
52
+ });
53
+ }
54
+ function AlertDialogCancel({ className, ...props }) {
55
+ return /* @__PURE__ */ jsx(AlertDialog.Close, {
56
+ ...props,
57
+ className: cn(buttonVariants({
58
+ variant: "outline",
59
+ size: "md"
60
+ }), className)
61
+ });
62
+ }
63
+ var AlertDialog$1 = Object.assign(AlertDialogRoot, {
64
+ Trigger: AlertDialogTrigger,
65
+ Action: AlertDialogAction,
66
+ Cancel: AlertDialogCancel,
67
+ Content: AlertDialogContent,
68
+ Description: AlertDialogDescription,
69
+ Footer: AlertDialogFooter,
70
+ Header: AlertDialogHeader,
71
+ Title: AlertDialogTitle
72
+ });
73
+ export { AlertDialog$1 as t };
74
+
75
+ //# sourceMappingURL=alert-dialog-_E4de7AY.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert-dialog-_E4de7AY.js","names":["BaseAlertDialog","AlertDialog"],"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { type ComponentProps, type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../../lib/cn\";\n\nconst AlertDialogRoot = BaseAlertDialog.Root;\nconst AlertDialogTrigger = BaseAlertDialog.Trigger;\n\nfunction AlertDialogContent({ className, children, ...props }: ComponentProps<typeof BaseAlertDialog.Popup>) {\n return (\n <BaseAlertDialog.Portal>\n <BaseAlertDialog.Backdrop className=\"fixed inset-0 z-40 bg-black/45 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <BaseAlertDialog.Viewport className=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4\">\n <BaseAlertDialog.Popup\n {...props}\n className={cn(\n \"rounded-ui-lg border-border bg-background text-foreground w-full max-w-md border p-6 shadow-[0_8px_30px_rgb(0,0,0,0.12)] outline-none transition-[transform,opacity] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0\",\n className,\n )}\n >\n {children}\n </BaseAlertDialog.Popup>\n </BaseAlertDialog.Viewport>\n </BaseAlertDialog.Portal>\n );\n}\n\nfunction AlertDialogTitle({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Title>) {\n return <BaseAlertDialog.Title {...props} className={cn(\"text-foreground text-lg font-semibold tracking-tight\", className)} />;\n}\n\nfunction AlertDialogDescription({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Description>) {\n return <BaseAlertDialog.Description {...props} className={cn(\"text-muted-foreground mt-2 text-sm\", className)} />;\n}\n\nconst AlertDialogHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n function AlertDialogHeader({ className, ...props }, ref) {\n return <div {...props} ref={ref} className={cn(\"flex flex-col\", className)} />;\n },\n);\n\nconst AlertDialogFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n function AlertDialogFooter({ className, ...props }, ref) {\n return <div {...props} ref={ref} className={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)} />;\n },\n);\n\nexport interface AlertDialogActionProps extends ComponentProps<typeof BaseAlertDialog.Close> {\n variant?: \"primary\" | \"danger\";\n}\n\nfunction AlertDialogAction({ className, variant = \"primary\", ...props }: AlertDialogActionProps) {\n return <BaseAlertDialog.Close {...props} className={cn(buttonVariants({ variant, size: \"md\" }), className)} />;\n}\n\nfunction AlertDialogCancel({ className, ...props }: ComponentProps<typeof BaseAlertDialog.Close>) {\n return <BaseAlertDialog.Close {...props} className={cn(buttonVariants({ variant: \"outline\", size: \"md\" }), className)} />;\n}\n\nexport const AlertDialog = Object.assign(AlertDialogRoot, {\n Trigger: AlertDialogTrigger,\n Action: AlertDialogAction,\n Cancel: AlertDialogCancel,\n Content: AlertDialogContent,\n Description: AlertDialogDescription,\n Footer: AlertDialogFooter,\n Header: AlertDialogHeader,\n Title: AlertDialogTitle,\n});\n"],"mappings":";;;;;;AAKA,IAAM,kBAAkBA,YAAgB;AACxC,IAAM,qBAAqBA,YAAgB;AAE3C,SAAS,mBAAmB,EAAE,WAAW,UAAU,GAAG,SAAuD;CAC3G,OACE,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAU,8GAA+G,CAAA,GACnJ,oBAACA,YAAgB,UAAjB;EAA0B,WAAU;EAClC,UAAA,oBAACA,YAAgB,OAAjB;GACE,GAAI;GACJ,WAAW,GACT,kSACA,SACF;GAEC;EACoB,CAAA;CACC,CAAA,CACJ,EAAA,CAAA;AAE5B;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAuD;CAC/F,OAAO,oBAACA,YAAgB,OAAjB;EAAuB,GAAI;EAAO,WAAW,GAAG,wDAAwD,SAAS;CAAI,CAAA;AAC9H;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAA6D;CAC3G,OAAO,oBAACA,YAAgB,aAAjB;EAA6B,GAAI;EAAO,WAAW,GAAG,sCAAsC,SAAS;CAAI,CAAA;AAClH;AAEA,IAAM,oBAAoB,WACxB,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,iBAAiB,SAAS;CAAI,CAAA;AAC/E,CACF;AAEA,IAAM,oBAAoB,WACxB,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,+DAA+D,SAAS;CAAI,CAAA;AAC7H,CACF;AAMA,SAAS,kBAAkB,EAAE,WAAW,UAAU,WAAW,GAAG,SAAiC;CAC/F,OAAO,oBAACA,YAAgB,OAAjB;EAAuB,GAAI;EAAO,WAAW,GAAG,eAAe;GAAE;GAAS,MAAM;EAAK,CAAC,GAAG,SAAS;CAAI,CAAA;AAC/G;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAuD;CAChG,OAAO,oBAACA,YAAgB,OAAjB;EAAuB,GAAI;EAAO,WAAW,GAAG,eAAe;GAAE,SAAS;GAAW,MAAM;EAAK,CAAC,GAAG,SAAS;CAAI,CAAA;AAC1H;AAEA,IAAaC,gBAAc,OAAO,OAAO,iBAAiB;CACxD,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ // src/components/aspect-ratio/aspect-ratio.tsx
5
+ var AspectRatio = forwardRef(function AspectRatio({ className, ratio = 16 / 9, style, ...props }, ref) {
6
+ return /* @__PURE__ */ jsx("div", {
7
+ ...props,
8
+ ref,
9
+ style: {
10
+ ...style,
11
+ aspectRatio: ratio
12
+ },
13
+ className: cn("relative w-full overflow-hidden", className)
14
+ });
15
+ });
16
+ export { AspectRatio as t };
17
+
18
+ //# sourceMappingURL=aspect-ratio-CIVD_tCo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"aspect-ratio-CIVD_tCo.js","names":[],"sources":["../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface AspectRatioProps extends ComponentPropsWithoutRef<\"div\"> {\n /** Width-to-height ratio. Defaults to 16:9. */\n ratio?: number;\n}\n\nexport const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(\n function AspectRatio({ className, ratio = 16 / 9, style, ...props }, ref) {\n return (\n <div\n {...props}\n ref={ref}\n style={{ ...style, aspectRatio: ratio }}\n className={cn(\"relative w-full overflow-hidden\", className)}\n />\n );\n },\n);\n"],"mappings":";;;;AAQA,IAAa,cAAc,WACzB,SAAS,YAAY,EAAE,WAAW,QAAQ,KAAK,GAAG,OAAO,GAAG,SAAS,KAAK;CACxE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO;GAAE,GAAG;GAAO,aAAa;EAAM;EACtC,WAAW,GAAG,mCAAmC,SAAS;CAC3D,CAAA;AAEL,CACF"}
@@ -0,0 +1,62 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { IconX } from "@tabler/icons-react";
4
+ import { Autocomplete } from "@base-ui/react/autocomplete";
5
+ // src/components/autocomplete/autocomplete.tsx
6
+ var AutocompleteRoot = Autocomplete.Root;
7
+ function AutocompleteInputGroup({ className, ...props }) {
8
+ return /* @__PURE__ */ jsx(Autocomplete.InputGroup, {
9
+ ...props,
10
+ className: cn("rounded-ui-md border-border bg-background focus-within:border-ring focus-within:ring-ring/40 relative flex h-10 w-full items-center border focus-within:ring-2", className)
11
+ });
12
+ }
13
+ function AutocompleteInput({ className, ...props }) {
14
+ return /* @__PURE__ */ jsx(Autocomplete.Input, {
15
+ ...props,
16
+ className: cn("text-foreground placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none", className)
17
+ });
18
+ }
19
+ function AutocompleteClear({ className, ...props }) {
20
+ return /* @__PURE__ */ jsx(Autocomplete.Clear, {
21
+ ...props,
22
+ "aria-label": "Clear input",
23
+ className: cn("text-muted-foreground hover:text-foreground flex h-full w-8 items-center justify-center text-sm", className),
24
+ children: /* @__PURE__ */ jsx(IconX, {
25
+ size: 16,
26
+ "aria-hidden": "true"
27
+ })
28
+ });
29
+ }
30
+ function AutocompleteContent({ className, children, ...props }) {
31
+ return /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
32
+ sideOffset: 4,
33
+ className: "z-50 outline-none",
34
+ children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
35
+ ...props,
36
+ className: cn("rounded-ui-lg border-border bg-background text-foreground min-w-[var(--anchor-width)] overflow-hidden border p-1 shadow-[0_8px_30px_rgb(0,0,0,0.12)] outline-none", className),
37
+ children: [/* @__PURE__ */ jsx(Autocomplete.Empty, {
38
+ className: "text-muted-foreground px-2 py-3 text-sm",
39
+ children: "No results found."
40
+ }), /* @__PURE__ */ jsx(Autocomplete.List, {
41
+ className: "max-h-64 overflow-y-auto overscroll-contain outline-none data-empty:p-0",
42
+ children
43
+ })]
44
+ })
45
+ }) });
46
+ }
47
+ function AutocompleteItem({ className, ...props }) {
48
+ return /* @__PURE__ */ jsx(Autocomplete.Item, {
49
+ ...props,
50
+ className: cn("data-highlighted:bg-muted rounded-ui-sm flex cursor-default items-center px-2 py-1.5 text-sm outline-none select-none data-disabled:opacity-50", className)
51
+ });
52
+ }
53
+ var Autocomplete$1 = Object.assign(AutocompleteRoot, {
54
+ InputGroup: AutocompleteInputGroup,
55
+ Input: AutocompleteInput,
56
+ Content: AutocompleteContent,
57
+ Item: AutocompleteItem,
58
+ Clear: AutocompleteClear
59
+ });
60
+ export { Autocomplete$1 as t };
61
+
62
+ //# sourceMappingURL=autocomplete-CVD8GTVR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"autocomplete-CVD8GTVR.js","names":["BaseAutocomplete","Autocomplete"],"sources":["../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from \"@base-ui/react/autocomplete\";\nimport { IconX } from \"@tabler/icons-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst AutocompleteRoot = BaseAutocomplete.Root;\n\nfunction AutocompleteInputGroup({ className, ...props }: ComponentProps<typeof BaseAutocomplete.InputGroup>) {\n return <BaseAutocomplete.InputGroup {...props} className={cn(\"rounded-ui-md border-border bg-background focus-within:border-ring focus-within:ring-ring/40 relative flex h-10 w-full items-center border focus-within:ring-2\", className)} />;\n}\n\nfunction AutocompleteInput({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Input>) {\n return <BaseAutocomplete.Input {...props} className={cn(\"text-foreground placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none\", className)} />;\n}\n\nfunction AutocompleteClear({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Clear>) {\n return <BaseAutocomplete.Clear {...props} aria-label=\"Clear input\" className={cn(\"text-muted-foreground hover:text-foreground flex h-full w-8 items-center justify-center text-sm\", className)}><IconX size={16} aria-hidden=\"true\" /></BaseAutocomplete.Clear>;\n}\n\nfunction AutocompleteContent({ className, children, ...props }: ComponentProps<typeof BaseAutocomplete.Popup>) {\n return (\n <BaseAutocomplete.Portal>\n <BaseAutocomplete.Positioner sideOffset={4} className=\"z-50 outline-none\">\n <BaseAutocomplete.Popup {...props} className={cn(\"rounded-ui-lg border-border bg-background text-foreground min-w-[var(--anchor-width)] overflow-hidden border p-1 shadow-[0_8px_30px_rgb(0,0,0,0.12)] outline-none\", className)}>\n <BaseAutocomplete.Empty className=\"text-muted-foreground px-2 py-3 text-sm\">No results found.</BaseAutocomplete.Empty>\n <BaseAutocomplete.List className=\"max-h-64 overflow-y-auto overscroll-contain outline-none data-empty:p-0\">{children}</BaseAutocomplete.List>\n </BaseAutocomplete.Popup>\n </BaseAutocomplete.Positioner>\n </BaseAutocomplete.Portal>\n );\n}\n\nfunction AutocompleteItem({ className, ...props }: ComponentProps<typeof BaseAutocomplete.Item>) {\n return <BaseAutocomplete.Item {...props} className={cn(\"data-highlighted:bg-muted rounded-ui-sm flex cursor-default items-center px-2 py-1.5 text-sm outline-none select-none data-disabled:opacity-50\", className)} />;\n}\n\nexport const Autocomplete = Object.assign(AutocompleteRoot, {\n InputGroup: AutocompleteInputGroup,\n Input: AutocompleteInput,\n Content: AutocompleteContent,\n Item: AutocompleteItem,\n Clear: AutocompleteClear,\n});\n"],"mappings":";;;;;AAKA,IAAM,mBAAmBA,aAAiB;AAE1C,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAA6D;CAC3G,OAAO,oBAACA,aAAiB,YAAlB;EAA6B,GAAI;EAAO,WAAW,GAAG,kKAAkK,SAAS;CAAI,CAAA;AAC9O;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAwD;CACjG,OAAO,oBAACA,aAAiB,OAAlB;EAAwB,GAAI;EAAO,WAAW,GAAG,oHAAoH,SAAS;CAAI,CAAA;AAC3L;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAwD;CACjG,OAAO,oBAACA,aAAiB,OAAlB;EAAwB,GAAI;EAAO,cAAW;EAAc,WAAW,GAAG,mGAAmG,SAAS;EAAG,UAAA,oBAAC,OAAD;GAAO,MAAM;GAAI,eAAY;EAAQ,CAAA;CAAyB,CAAA;AAChQ;AAEA,SAAS,oBAAoB,EAAE,WAAW,UAAU,GAAG,SAAwD;CAC7G,OACE,oBAACA,aAAiB,QAAlB,EAAA,UACE,oBAACA,aAAiB,YAAlB;EAA6B,YAAY;EAAG,WAAU;EACpD,UAAA,qBAACA,aAAiB,OAAlB;GAAwB,GAAI;GAAO,WAAW,GAAG,qKAAqK,SAAS;GAA/N,UAAA,CACE,oBAACA,aAAiB,OAAlB;IAAwB,WAAU;IAA0C,UAAA;GAAyC,CAAA,GACrH,oBAACA,aAAiB,MAAlB;IAAuB,WAAU;IAA2E;GAAgC,CAAA,CACtH;;CACG,CAAA,EACN,CAAA;AAE7B;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAuD;CAC/F,OAAO,oBAACA,aAAiB,MAAlB;EAAuB,GAAI;EAAO,WAAW,GAAG,kJAAkJ,SAAS;CAAI,CAAA;AACxN;AAEA,IAAaC,iBAAe,OAAO,OAAO,kBAAkB;CAC1D,YAAY;CACZ,OAAO;CACP,SAAS;CACT,MAAM;CACN,OAAO;AACT,CAAC"}
@@ -0,0 +1,42 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Avatar } from "@base-ui/react/avatar";
5
+ // src/components/avatar/avatar.tsx
6
+ var AvatarRoot = Avatar.Root;
7
+ function AvatarImage({ className, ...props }) {
8
+ return /* @__PURE__ */ jsx(Avatar.Image, {
9
+ ...props,
10
+ className: cn("aspect-square size-full object-cover", className)
11
+ });
12
+ }
13
+ function AvatarFallback({ className, ...props }) {
14
+ return /* @__PURE__ */ jsx(Avatar.Fallback, {
15
+ ...props,
16
+ className: cn("bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-xs font-medium", className)
17
+ });
18
+ }
19
+ var Avatar$1 = Object.assign(AvatarRoot, {
20
+ Fallback: AvatarFallback,
21
+ Image: AvatarImage
22
+ });
23
+ // src/components/avatar/avatar-group.tsx
24
+ var AvatarGroupRoot = forwardRef(function AvatarGroupRoot({ className, role = "group", ...props }, ref) {
25
+ return /* @__PURE__ */ jsx("div", {
26
+ ...props,
27
+ ref,
28
+ role,
29
+ className: cn("flex w-fit items-center -space-x-3 [&>*]:ring-2 [&>*]:ring-background", className)
30
+ });
31
+ });
32
+ var AvatarGroupCount = forwardRef(function AvatarGroupCount({ className, ...props }, ref) {
33
+ return /* @__PURE__ */ jsx("span", {
34
+ ...props,
35
+ ref,
36
+ className: cn("bg-muted text-muted-foreground inline-flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-medium", className)
37
+ });
38
+ });
39
+ var AvatarGroup = Object.assign(AvatarGroupRoot, { Count: AvatarGroupCount });
40
+ export { Avatar$1 as n, AvatarGroup as t };
41
+
42
+ //# sourceMappingURL=avatar-1d_t2tas.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"avatar-1d_t2tas.js","names":["BaseAvatar","Avatar"],"sources":["../src/components/avatar/avatar.tsx","../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst AvatarRoot = BaseAvatar.Root;\n\nfunction AvatarImage({ className, ...props }: ComponentProps<typeof BaseAvatar.Image>) {\n return <BaseAvatar.Image {...props} className={cn(\"aspect-square size-full object-cover\", className)} />;\n}\n\nfunction AvatarFallback({ className, ...props }: ComponentProps<typeof BaseAvatar.Fallback>) {\n return <BaseAvatar.Fallback {...props} className={cn(\"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-xs font-medium\", className)} />;\n}\n\nexport const Avatar = Object.assign(AvatarRoot, { Fallback: AvatarFallback, Image: AvatarImage });\n","import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst AvatarGroupRoot = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n function AvatarGroupRoot({ className, role = \"group\", ...props }, ref) {\n return (\n <div\n {...props}\n ref={ref}\n role={role}\n className={cn(\"flex w-fit items-center -space-x-3 [&>*]:ring-2 [&>*]:ring-background\", className)}\n />\n );\n },\n);\n\nconst AvatarGroupCount = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<\"span\">>(\n function AvatarGroupCount({ className, ...props }, ref) {\n return (\n <span\n {...props}\n ref={ref}\n className={cn(\"bg-muted text-muted-foreground inline-flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-medium\", className)}\n />\n );\n },\n);\n\nexport const AvatarGroup = Object.assign(AvatarGroupRoot, { Count: AvatarGroupCount });\n"],"mappings":";;;;;AAIA,IAAM,aAAaA,OAAW;AAE9B,SAAS,YAAY,EAAE,WAAW,GAAG,SAAkD;CACrF,OAAO,oBAACA,OAAW,OAAZ;EAAkB,GAAI;EAAO,WAAW,GAAG,wCAAwC,SAAS;CAAI,CAAA;AACzG;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqD;CAC3F,OAAO,oBAACA,OAAW,UAAZ;EAAqB,GAAI;EAAO,WAAW,GAAG,8GAA8G,SAAS;CAAI,CAAA;AAClL;AAEA,IAAaC,WAAS,OAAO,OAAO,YAAY;CAAE,UAAU;CAAgB,OAAO;AAAY,CAAC;;ACXhG,IAAM,kBAAkB,WACtB,SAAS,gBAAgB,EAAE,WAAW,OAAO,SAAS,GAAG,SAAS,KAAK;CACrE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GAAG,yEAAyE,SAAS;CACjG,CAAA;AAEL,CACF;AAEA,IAAM,mBAAmB,WACvB,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,4HAA4H,SAAS;CACpJ,CAAA;AAEL,CACF;AAEA,IAAa,cAAc,OAAO,OAAO,iBAAiB,EAAE,OAAO,iBAAiB,CAAC"}
@@ -0,0 +1,57 @@
1
+ import { t as cn } from "./cn-Ccwc28Yd.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ // src/components/breadcrumb/breadcrumb.tsx
5
+ function BreadcrumbRoot({ ...props }) {
6
+ return /* @__PURE__ */ jsx("nav", {
7
+ "aria-label": "breadcrumb",
8
+ ...props
9
+ });
10
+ }
11
+ var BreadcrumbList = forwardRef(function BreadcrumbList({ className, ...props }, ref) {
12
+ return /* @__PURE__ */ jsx("ol", {
13
+ ...props,
14
+ ref,
15
+ className: cn("text-muted-foreground flex flex-wrap items-center gap-2 text-sm", className)
16
+ });
17
+ });
18
+ var BreadcrumbItem = forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
19
+ return /* @__PURE__ */ jsx("li", {
20
+ ...props,
21
+ ref,
22
+ className: cn("inline-flex items-center gap-2", className)
23
+ });
24
+ });
25
+ var BreadcrumbLink = forwardRef(function BreadcrumbLink({ className, ...props }, ref) {
26
+ return /* @__PURE__ */ jsx("a", {
27
+ ...props,
28
+ ref,
29
+ className: cn("hover:text-foreground transition-colors", className)
30
+ });
31
+ });
32
+ var BreadcrumbPage = forwardRef(function BreadcrumbPage({ className, ...props }, ref) {
33
+ return /* @__PURE__ */ jsx("span", {
34
+ ...props,
35
+ ref,
36
+ "aria-current": "page",
37
+ className: cn("text-foreground font-normal", className)
38
+ });
39
+ });
40
+ function BreadcrumbSeparator({ className, children = "/", ...props }) {
41
+ return /* @__PURE__ */ jsx("li", {
42
+ ...props,
43
+ "aria-hidden": "true",
44
+ className: cn("text-muted-foreground [&>svg]:size-3.5", className),
45
+ children
46
+ });
47
+ }
48
+ var Breadcrumb = Object.assign(BreadcrumbRoot, {
49
+ Item: BreadcrumbItem,
50
+ Link: BreadcrumbLink,
51
+ List: BreadcrumbList,
52
+ Page: BreadcrumbPage,
53
+ Separator: BreadcrumbSeparator
54
+ });
55
+ export { Breadcrumb as t };
56
+
57
+ //# sourceMappingURL=breadcrumb-BGVDD5TT.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"breadcrumb-BGVDD5TT.js","names":[],"sources":["../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nfunction BreadcrumbRoot({ ...props }: ComponentPropsWithoutRef<\"nav\">) {\n return <nav aria-label=\"breadcrumb\" {...props} />;\n}\n\nconst BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<\"ol\">>(\n function BreadcrumbList({ className, ...props }, ref) {\n return <ol {...props} ref={ref} className={cn(\"text-muted-foreground flex flex-wrap items-center gap-2 text-sm\", className)} />;\n },\n);\n\nconst BreadcrumbItem = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<\"li\">>(\n function BreadcrumbItem({ className, ...props }, ref) {\n return <li {...props} ref={ref} className={cn(\"inline-flex items-center gap-2\", className)} />;\n },\n);\n\nconst BreadcrumbLink = forwardRef<HTMLAnchorElement, ComponentPropsWithoutRef<\"a\">>(\n function BreadcrumbLink({ className, ...props }, ref) {\n return <a {...props} ref={ref} className={cn(\"hover:text-foreground transition-colors\", className)} />;\n },\n);\n\nconst BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<\"span\">>(\n function BreadcrumbPage({ className, ...props }, ref) {\n return <span {...props} ref={ref} aria-current=\"page\" className={cn(\"text-foreground font-normal\", className)} />;\n },\n);\n\nfunction BreadcrumbSeparator({ className, children = \"/\", ...props }: ComponentPropsWithoutRef<\"li\">) {\n return <li {...props} aria-hidden=\"true\" className={cn(\"text-muted-foreground [&>svg]:size-3.5\", className)}>{children}</li>;\n}\n\nexport const Breadcrumb = Object.assign(BreadcrumbRoot, {\n Item: BreadcrumbItem,\n Link: BreadcrumbLink,\n List: BreadcrumbList,\n Page: BreadcrumbPage,\n Separator: BreadcrumbSeparator,\n});\n"],"mappings":";;;;AAGA,SAAS,eAAe,EAAE,GAAG,SAA0C;CACrE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,GAAI;CAAQ,CAAA;AAClD;AAEA,IAAM,iBAAiB,WACrB,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAW,GAAG,mEAAmE,SAAS;CAAI,CAAA;AAChI,CACF;AAEA,IAAM,iBAAiB,WACrB,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAW,GAAG,kCAAkC,SAAS;CAAI,CAAA;AAC/F,CACF;AAEA,IAAM,iBAAiB,WACrB,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OAAO,oBAAC,KAAD;EAAG,GAAI;EAAY;EAAK,WAAW,GAAG,2CAA2C,SAAS;CAAI,CAAA;AACvG,CACF;AAEA,IAAM,iBAAiB,WACrB,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAY;EAAK,gBAAa;EAAO,WAAW,GAAG,+BAA+B,SAAS;CAAI,CAAA;AAClH,CACF;AAEA,SAAS,oBAAoB,EAAE,WAAW,WAAW,KAAK,GAAG,SAAyC;CACpG,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAO,eAAY;EAAO,WAAW,GAAG,0CAA0C,SAAS;EAAI;CAAa,CAAA;AAC7H;AAEA,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,WAAW;AACb,CAAC"}