@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.
- package/README.md +199 -6
- package/dist/accordion-nzbtc3_2.js +40 -0
- package/dist/accordion-nzbtc3_2.js.map +1 -0
- package/dist/alert-BQzMceKI.js +43 -0
- package/dist/alert-BQzMceKI.js.map +1 -0
- package/dist/alert-dialog-_E4de7AY.js +75 -0
- package/dist/alert-dialog-_E4de7AY.js.map +1 -0
- package/dist/aspect-ratio-CIVD_tCo.js +18 -0
- package/dist/aspect-ratio-CIVD_tCo.js.map +1 -0
- package/dist/autocomplete-CVD8GTVR.js +62 -0
- package/dist/autocomplete-CVD8GTVR.js.map +1 -0
- package/dist/avatar-1d_t2tas.js +42 -0
- package/dist/avatar-1d_t2tas.js.map +1 -0
- package/dist/breadcrumb-BGVDD5TT.js +57 -0
- package/dist/breadcrumb-BGVDD5TT.js.map +1 -0
- package/dist/{button-CYdt-JvA.js → button-BsqAkDSO.js} +9 -8
- package/dist/button-BsqAkDSO.js.map +1 -0
- package/dist/button-group-DPbwNPnT.js +16 -0
- package/dist/button-group-DPbwNPnT.js.map +1 -0
- package/dist/checkbox-DG9a1K_o.js +22 -0
- package/dist/checkbox-DG9a1K_o.js.map +1 -0
- package/dist/checkbox-group-DnC_1XMf.js +13 -0
- package/dist/checkbox-group-DnC_1XMf.js.map +1 -0
- package/dist/cn-Ccwc28Yd.js +1 -0
- package/dist/collapsible-odw6ynaJ.js +24 -0
- package/dist/collapsible-odw6ynaJ.js.map +1 -0
- package/dist/combobox-BjSMdUz_.js +98 -0
- package/dist/combobox-BjSMdUz_.js.map +1 -0
- package/dist/components/accordion/accordion.d.ts +11 -0
- package/dist/components/accordion/index.d.ts +1 -0
- package/dist/components/accordion/index.js +1 -0
- package/dist/components/alert/alert.d.ts +12 -0
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.js +1 -0
- package/dist/components/alert-dialog/alert-dialog.d.ts +21 -0
- package/dist/components/alert-dialog/index.d.ts +2 -0
- package/dist/components/alert-dialog/index.js +1 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +6 -0
- package/dist/components/aspect-ratio/index.d.ts +2 -0
- package/dist/components/aspect-ratio/index.js +1 -0
- package/dist/components/autocomplete/autocomplete.d.ts +15 -0
- package/dist/components/autocomplete/index.d.ts +1 -0
- package/dist/components/autocomplete/index.js +1 -0
- package/dist/components/avatar/avatar-group.d.ts +3 -0
- package/dist/components/avatar/avatar.d.ts +9 -0
- package/dist/components/avatar/index.d.ts +2 -0
- package/dist/components/avatar/index.js +1 -0
- package/dist/components/badge/badge.d.ts +12 -0
- package/dist/components/badge/index.d.ts +2 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts +11 -0
- package/dist/components/breadcrumb/index.d.ts +1 -0
- package/dist/components/breadcrumb/index.js +1 -0
- package/dist/components/button/button.d.ts +1 -2
- package/dist/components/button/index.js +1 -1
- package/dist/components/button-group/button-group.d.ts +6 -0
- package/dist/components/button-group/index.d.ts +2 -0
- package/dist/components/button-group/index.js +1 -0
- package/dist/components/card/card.d.ts +7 -0
- package/dist/components/card/index.d.ts +1 -0
- package/dist/components/checkbox/checkbox.d.ts +3 -0
- package/dist/components/checkbox/index.d.ts +1 -0
- package/dist/components/checkbox/index.js +1 -0
- package/dist/components/checkbox-group/checkbox-group.d.ts +3 -0
- package/dist/components/checkbox-group/index.d.ts +1 -0
- package/dist/components/checkbox-group/index.js +1 -0
- package/dist/components/collapsible/collapsible.d.ts +9 -0
- package/dist/components/collapsible/index.d.ts +1 -0
- package/dist/components/collapsible/index.js +1 -0
- package/dist/components/combobox/combobox.d.ts +29 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/combobox/index.js +1 -0
- package/dist/components/container/container.d.ts +1 -0
- package/dist/components/container/index.d.ts +1 -0
- package/dist/components/container/index.js +1 -0
- package/dist/components/context-menu/context-menu.d.ts +22 -0
- package/dist/components/context-menu/index.d.ts +1 -0
- package/dist/components/context-menu/index.js +1 -0
- package/dist/components/description-list/description-list.d.ts +4 -0
- package/dist/components/description-list/index.d.ts +1 -0
- package/dist/components/description-list/index.js +1 -0
- package/dist/components/dialog/dialog.d.ts +13 -0
- package/dist/components/dialog/index.d.ts +1 -0
- package/dist/components/dialog/index.js +1 -0
- package/dist/components/drawer/drawer.d.ts +15 -0
- package/dist/components/drawer/index.d.ts +1 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +12 -0
- package/dist/components/dropdown-menu/index.d.ts +1 -0
- package/dist/components/dropdown-menu/index.js +1 -0
- package/dist/components/empty/empty.d.ts +4 -0
- package/dist/components/empty/index.d.ts +1 -0
- package/dist/components/empty/index.js +1 -0
- package/dist/components/field/field.d.ts +11 -0
- package/dist/components/field/index.d.ts +1 -0
- package/dist/components/field/index.js +1 -0
- package/dist/components/fieldset/fieldset.d.ts +8 -0
- package/dist/components/fieldset/index.d.ts +1 -0
- package/dist/components/fieldset/index.js +1 -0
- package/dist/components/form/form.d.ts +3 -0
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/index.js +1 -0
- package/dist/components/icon-button/icon-button.d.ts +7 -0
- package/dist/components/icon-button/index.d.ts +2 -0
- package/dist/components/icon-button/index.js +1 -0
- package/dist/components/inline-code/index.d.ts +1 -0
- package/dist/components/inline-code/index.js +1 -0
- package/dist/components/inline-code/inline-code.d.ts +1 -0
- package/dist/components/input/index.js +1 -1
- package/dist/components/input-group/index.d.ts +1 -0
- package/dist/components/input-group/index.js +1 -0
- package/dist/components/input-group/input-group.d.ts +3 -0
- package/dist/components/kbd/index.d.ts +1 -0
- package/dist/components/kbd/index.js +1 -0
- package/dist/components/kbd/kbd.d.ts +1 -0
- package/dist/components/label/index.d.ts +2 -0
- package/dist/components/label/label.d.ts +6 -0
- package/dist/components/link/index.d.ts +1 -0
- package/dist/components/link/index.js +1 -0
- package/dist/components/link/link.d.ts +1 -0
- package/dist/components/menubar/index.d.ts +1 -0
- package/dist/components/menubar/index.js +1 -0
- package/dist/components/menubar/menubar.d.ts +16 -0
- package/dist/components/meter/index.d.ts +2 -0
- package/dist/components/meter/index.js +1 -0
- package/dist/components/meter/meter.d.ts +13 -0
- package/dist/components/navigation-menu/index.d.ts +1 -0
- package/dist/components/navigation-menu/index.js +1 -0
- package/dist/components/navigation-menu/navigation-menu.d.ts +21 -0
- package/dist/components/number-field/index.d.ts +1 -0
- package/dist/components/number-field/index.js +1 -0
- package/dist/components/number-field/number-field.d.ts +13 -0
- package/dist/components/otp-field/index.d.ts +1 -0
- package/dist/components/otp-field/index.js +1 -0
- package/dist/components/otp-field/otp-field.d.ts +10 -0
- package/dist/components/pagination/index.d.ts +2 -0
- package/dist/components/pagination/index.js +1 -0
- package/dist/components/pagination/pagination.d.ts +23 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/popover/index.js +1 -0
- package/dist/components/popover/popover.d.ts +13 -0
- package/dist/components/preview-card/index.d.ts +1 -0
- package/dist/components/preview-card/index.js +1 -0
- package/dist/components/preview-card/preview-card.d.ts +11 -0
- package/dist/components/progress/index.d.ts +1 -0
- package/dist/components/progress/index.js +1 -0
- package/dist/components/progress/progress.d.ts +3 -0
- package/dist/components/radio/index.d.ts +1 -0
- package/dist/components/radio/index.js +1 -0
- package/dist/components/radio/radio.d.ts +3 -0
- package/dist/components/radio-group/index.d.ts +1 -0
- package/dist/components/radio-group/index.js +1 -0
- package/dist/components/radio-group/radio-group.d.ts +9 -0
- package/dist/components/scroll-area/index.d.ts +1 -0
- package/dist/components/scroll-area/index.js +1 -0
- package/dist/components/scroll-area/scroll-area.d.ts +3 -0
- package/dist/components/select/index.d.ts +1 -0
- package/dist/components/select/index.js +1 -0
- package/dist/components/select/select.d.ts +13 -0
- package/dist/components/separator/index.d.ts +2 -0
- package/dist/components/separator/separator.d.ts +6 -0
- package/dist/components/sheet/index.d.ts +2 -0
- package/dist/components/sheet/index.js +1 -0
- package/dist/components/sheet/sheet.d.ts +23 -0
- package/dist/components/sidebar/index.d.ts +1 -0
- package/dist/components/sidebar/index.js +1 -0
- package/dist/components/sidebar/sidebar.d.ts +10 -0
- package/dist/components/skeleton/index.d.ts +1 -0
- package/dist/components/skeleton/index.js +1 -0
- package/dist/components/skeleton/skeleton.d.ts +1 -0
- package/dist/components/slider/index.d.ts +1 -0
- package/dist/components/slider/index.js +1 -0
- package/dist/components/slider/slider.d.ts +3 -0
- package/dist/components/spinner/index.d.ts +2 -0
- package/dist/components/spinner/index.js +1 -0
- package/dist/components/spinner/spinner.d.ts +7 -0
- package/dist/components/status-indicator/index.d.ts +2 -0
- package/dist/components/status-indicator/index.js +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts +6 -0
- package/dist/components/switch/index.d.ts +1 -0
- package/dist/components/switch/index.js +1 -0
- package/dist/components/switch/switch.d.ts +3 -0
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/index.js +1 -0
- package/dist/components/table/table.d.ts +9 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/components/tabs/tabs.d.ts +12 -0
- package/dist/components/textarea/index.js +1 -1
- package/dist/components/toast/index.d.ts +1 -0
- package/dist/components/toast/index.js +1 -0
- package/dist/components/toast/toast.d.ts +15 -0
- package/dist/components/toggle/index.d.ts +1 -0
- package/dist/components/toggle/index.js +1 -0
- package/dist/components/toggle/toggle.d.ts +3 -0
- package/dist/components/toggle-group/index.d.ts +1 -0
- package/dist/components/toggle-group/index.js +1 -0
- package/dist/components/toggle-group/toggle-group.d.ts +9 -0
- package/dist/components/toolbar/index.d.ts +1 -0
- package/dist/components/toolbar/index.js +1 -0
- package/dist/components/toolbar/toolbar.d.ts +16 -0
- package/dist/components/tooltip/index.d.ts +1 -0
- package/dist/components/tooltip/index.js +1 -0
- package/dist/components/tooltip/tooltip.d.ts +9 -0
- package/dist/components/visually-hidden/index.d.ts +2 -0
- package/dist/components/visually-hidden/index.js +1 -0
- package/dist/components/visually-hidden/visually-hidden.d.ts +6 -0
- package/dist/container-BiCW_jGj.js +14 -0
- package/dist/container-BiCW_jGj.js.map +1 -0
- package/dist/context-menu-paRijJ7d.js +86 -0
- package/dist/context-menu-paRijJ7d.js.map +1 -0
- package/dist/description-list-DDfz-rHA.js +32 -0
- package/dist/description-list-DDfz-rHA.js.map +1 -0
- package/dist/dialog-wnHwh4r8.js +39 -0
- package/dist/dialog-wnHwh4r8.js.map +1 -0
- package/dist/{cn-BtC0eFBk.js → dist-hY1s01yz.js} +2 -3
- package/dist/dist-hY1s01yz.js.map +1 -0
- package/dist/drawer-C27gyXYB.js +59 -0
- package/dist/drawer-C27gyXYB.js.map +1 -0
- package/dist/dropdown-menu-nea36MKM.js +36 -0
- package/dist/dropdown-menu-nea36MKM.js.map +1 -0
- package/dist/empty-Cqrg0Hyt.js +32 -0
- package/dist/empty-Cqrg0Hyt.js.map +1 -0
- package/dist/field-C-2eNSGZ.js +31 -0
- package/dist/field-C-2eNSGZ.js.map +1 -0
- package/dist/fieldset-Cgl_KnGa.js +20 -0
- package/dist/fieldset-Cgl_KnGa.js.map +1 -0
- package/dist/form-CLslJWE_.js +13 -0
- package/dist/form-CLslJWE_.js.map +1 -0
- package/dist/icon-button-lHWx7t_U.js +19 -0
- package/dist/icon-button-lHWx7t_U.js.map +1 -0
- package/dist/index.d.ts +74 -0
- package/dist/index.js +166 -4
- package/dist/index.js.map +1 -0
- package/dist/inline-code-UqU5cSaC.js +14 -0
- package/dist/inline-code-UqU5cSaC.js.map +1 -0
- package/dist/{input-CAZTJfrq.js → input-D9nJXDHP.js} +5 -4
- package/dist/input-D9nJXDHP.js.map +1 -0
- package/dist/input-group-DgRdsJK8.js +23 -0
- package/dist/input-group-DgRdsJK8.js.map +1 -0
- package/dist/kbd-Bd9mF-xm.js +14 -0
- package/dist/kbd-Bd9mF-xm.js.map +1 -0
- package/dist/link-D-SpYJsE.js +14 -0
- package/dist/link-D-SpYJsE.js.map +1 -0
- package/dist/menubar-11VKbNs2.js +50 -0
- package/dist/menubar-11VKbNs2.js.map +1 -0
- package/dist/meter-Bn8OYigA.js +33 -0
- package/dist/meter-Bn8OYigA.js.map +1 -0
- package/dist/navigation-menu-DP7r2PP-.js +71 -0
- package/dist/navigation-menu-DP7r2PP-.js.map +1 -0
- package/dist/number-field-YJ_58VU5.js +47 -0
- package/dist/number-field-YJ_58VU5.js.map +1 -0
- package/dist/otp-field-DZmagJ_O.js +29 -0
- package/dist/otp-field-DZmagJ_O.js.map +1 -0
- package/dist/pagination-CSAJn5Ph.js +106 -0
- package/dist/pagination-CSAJn5Ph.js.map +1 -0
- package/dist/popover-COYlKfkf.js +39 -0
- package/dist/popover-COYlKfkf.js.map +1 -0
- package/dist/preview-card-ByyvdPvk.js +36 -0
- package/dist/preview-card-ByyvdPvk.js.map +1 -0
- package/dist/progress-CGxVjwpG.js +17 -0
- package/dist/progress-CGxVjwpG.js.map +1 -0
- package/dist/radio-CT-p4jz7.js +17 -0
- package/dist/radio-CT-p4jz7.js.map +1 -0
- package/dist/radio-group-OdNChchU.js +25 -0
- package/dist/radio-group-OdNChchU.js.map +1 -0
- package/dist/scroll-area-oMOK10-G.js +29 -0
- package/dist/scroll-area-oMOK10-G.js.map +1 -0
- package/dist/select--Rn5DQaC.js +54 -0
- package/dist/select--Rn5DQaC.js.map +1 -0
- package/dist/sheet-B6-iNDZG.js +66 -0
- package/dist/sheet-B6-iNDZG.js.map +1 -0
- package/dist/sidebar-C9YE73TS.js +82 -0
- package/dist/sidebar-C9YE73TS.js.map +1 -0
- package/dist/skeleton-CmJK1ao2.js +15 -0
- package/dist/skeleton-CmJK1ao2.js.map +1 -0
- package/dist/slider-Fhbdti2X.js +20 -0
- package/dist/slider-Fhbdti2X.js.map +1 -0
- package/dist/spinner-Xgsj2ClX.js +21 -0
- package/dist/spinner-Xgsj2ClX.js.map +1 -0
- package/dist/status-indicator-DnM1Iu7D.js +24 -0
- package/dist/status-indicator-DnM1Iu7D.js.map +1 -0
- package/dist/style.css +1634 -192
- package/dist/switch-C-i7Mmdd.js +14 -0
- package/dist/switch-C-i7Mmdd.js.map +1 -0
- package/dist/table-CH0H16pL.js +75 -0
- package/dist/table-CH0H16pL.js.map +1 -0
- package/dist/tabs-VnWSV0RD.js +33 -0
- package/dist/tabs-VnWSV0RD.js.map +1 -0
- package/dist/{textarea-BrjTLlfm.js → textarea-oT7xw8CO.js} +5 -4
- package/dist/textarea-oT7xw8CO.js.map +1 -0
- package/dist/toast-BkDQhrZ5.js +56 -0
- package/dist/toast-BkDQhrZ5.js.map +1 -0
- package/dist/toggle-CNd5ja2h.js +13 -0
- package/dist/toggle-CNd5ja2h.js.map +1 -0
- package/dist/toggle-group-B8vnkGCk.js +21 -0
- package/dist/toggle-group-B8vnkGCk.js.map +1 -0
- package/dist/toolbar-BVA36_dH.js +50 -0
- package/dist/toolbar-BVA36_dH.js.map +1 -0
- package/dist/tooltip-a7t8wv2L.js +24 -0
- package/dist/tooltip-a7t8wv2L.js.map +1 -0
- package/dist/visually-hidden-C8KngZTo.js +14 -0
- package/dist/visually-hidden-C8KngZTo.js.map +1 -0
- package/package.json +223 -1
- package/dist/button-CYdt-JvA.js.map +0 -1
- package/dist/cn-BtC0eFBk.js.map +0 -1
- package/dist/input-CAZTJfrq.js.map +0 -1
- 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
|
-
<
|
|
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:
|
|
154
|
-
--ui-
|
|
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"}
|