@brijbyte/agentic-ui 0.0.1-beta → 0.0.2
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 +808 -0
- package/dist/accordion/accordion.css +85 -0
- package/dist/accordion/accordion.d.ts +28 -0
- package/dist/accordion/accordion.d.ts.map +1 -0
- package/dist/accordion/accordion.js +51 -0
- package/dist/accordion/accordion.js.map +1 -0
- package/dist/accordion/accordion.module.css.d.ts +2 -0
- package/dist/accordion/accordion.module.js +14 -0
- package/dist/accordion/accordion.module.js.map +1 -0
- package/dist/accordion/index.d.ts +3 -0
- package/dist/accordion/index.js +4 -0
- package/dist/accordion/parts.d.ts +28 -0
- package/dist/accordion/parts.d.ts.map +1 -0
- package/dist/accordion/parts.js +55 -0
- package/dist/accordion/parts.js.map +1 -0
- package/dist/alert-dialog/alert-dialog.css +84 -0
- package/dist/alert-dialog/alert-dialog.d.ts +44 -0
- package/dist/alert-dialog/alert-dialog.d.ts.map +1 -0
- package/dist/alert-dialog/alert-dialog.js +46 -0
- package/dist/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/alert-dialog/alert-dialog.module.css.d.ts +2 -0
- package/dist/alert-dialog/alert-dialog.module.js +14 -0
- package/dist/alert-dialog/alert-dialog.module.js.map +1 -0
- package/dist/alert-dialog/index.d.ts +3 -0
- package/dist/alert-dialog/index.js +4 -0
- package/dist/alert-dialog/parts.d.ts +28 -0
- package/dist/alert-dialog/parts.d.ts.map +1 -0
- package/dist/alert-dialog/parts.js +62 -0
- package/dist/alert-dialog/parts.js.map +1 -0
- package/dist/badge/badge.css +66 -0
- package/dist/badge/badge.d.ts +20 -0
- package/dist/badge/badge.d.ts.map +1 -0
- package/dist/badge/badge.js +21 -0
- package/dist/badge/badge.js.map +1 -0
- package/dist/badge/badge.module.css.d.ts +2 -0
- package/dist/badge/badge.module.js +16 -0
- package/dist/badge/badge.module.js.map +1 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +3 -0
- package/dist/button/button.css +242 -0
- package/dist/button/button.d.ts +28 -0
- package/dist/button/button.d.ts.map +1 -0
- package/dist/button/button.js +34 -0
- package/dist/button/button.js.map +1 -0
- package/dist/button/button.module.css.d.ts +2 -0
- package/dist/button/button.module.js +27 -0
- package/dist/button/button.module.js.map +1 -0
- package/dist/button/index.d.ts +2 -0
- package/dist/button/index.js +3 -0
- package/dist/card/card.css +64 -0
- package/dist/card/card.d.ts +41 -0
- package/dist/card/card.d.ts.map +1 -0
- package/dist/card/card.js +50 -0
- package/dist/card/card.js.map +1 -0
- package/dist/card/card.module.css.d.ts +2 -0
- package/dist/card/card.module.js +15 -0
- package/dist/card/card.module.js.map +1 -0
- package/dist/card/index.d.ts +2 -0
- package/dist/card/index.js +3 -0
- package/dist/checkbox/checkbox.css +72 -0
- package/dist/checkbox/checkbox.d.ts +29 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -0
- package/dist/checkbox/checkbox.js +40 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/checkbox/checkbox.module.css.d.ts +2 -0
- package/dist/checkbox/checkbox.module.js +11 -0
- package/dist/checkbox/checkbox.module.js.map +1 -0
- package/dist/checkbox/index.d.ts +3 -0
- package/dist/checkbox/index.js +4 -0
- package/dist/checkbox/parts.d.ts +20 -0
- package/dist/checkbox/parts.d.ts.map +1 -0
- package/dist/checkbox/parts.js +51 -0
- package/dist/checkbox/parts.js.map +1 -0
- package/dist/collapsible/collapsible.css +88 -0
- package/dist/collapsible/collapsible.d.ts +24 -0
- package/dist/collapsible/collapsible.d.ts.map +1 -0
- package/dist/collapsible/collapsible.js +44 -0
- package/dist/collapsible/collapsible.js.map +1 -0
- package/dist/collapsible/collapsible.module.css.d.ts +2 -0
- package/dist/collapsible/collapsible.module.js +12 -0
- package/dist/collapsible/collapsible.module.js.map +1 -0
- package/dist/collapsible/index.d.ts +3 -0
- package/dist/collapsible/index.js +4 -0
- package/dist/collapsible/parts.d.ts +23 -0
- package/dist/collapsible/parts.d.ts.map +1 -0
- package/dist/collapsible/parts.js +44 -0
- package/dist/collapsible/parts.js.map +1 -0
- package/dist/context-menu/context-menu.css +151 -0
- package/dist/context-menu/context-menu.d.ts +36 -0
- package/dist/context-menu/context-menu.d.ts.map +1 -0
- package/dist/context-menu/context-menu.js +54 -0
- package/dist/context-menu/context-menu.js.map +1 -0
- package/dist/context-menu/context-menu.module.css.d.ts +2 -0
- package/dist/context-menu/context-menu.module.js +18 -0
- package/dist/context-menu/context-menu.module.js.map +1 -0
- package/dist/context-menu/index.d.ts +3 -0
- package/dist/context-menu/index.js +4 -0
- package/dist/context-menu/parts.d.ts +38 -0
- package/dist/context-menu/parts.d.ts.map +1 -0
- package/dist/context-menu/parts.js +91 -0
- package/dist/context-menu/parts.js.map +1 -0
- package/dist/dialog/dialog.css +125 -0
- package/dist/dialog/dialog.d.ts +40 -0
- package/dist/dialog/dialog.d.ts.map +1 -0
- package/dist/dialog/dialog.js +57 -0
- package/dist/dialog/dialog.js.map +1 -0
- package/dist/dialog/dialog.module.css.d.ts +2 -0
- package/dist/dialog/dialog.module.js +17 -0
- package/dist/dialog/dialog.module.js.map +1 -0
- package/dist/dialog/index.d.ts +3 -0
- package/dist/dialog/index.js +4 -0
- package/dist/dialog/parts.d.ts +38 -0
- package/dist/dialog/parts.d.ts.map +1 -0
- package/dist/dialog/parts.js +75 -0
- package/dist/dialog/parts.js.map +1 -0
- package/dist/drawer/drawer.css +253 -0
- package/dist/drawer/drawer.d.ts +38 -0
- package/dist/drawer/drawer.d.ts.map +1 -0
- package/dist/drawer/drawer.js +87 -0
- package/dist/drawer/drawer.js.map +1 -0
- package/dist/drawer/drawer.module.css.d.ts +2 -0
- package/dist/drawer/drawer.module.js +20 -0
- package/dist/drawer/drawer.module.js.map +1 -0
- package/dist/drawer/index.d.ts +3 -0
- package/dist/drawer/index.js +4 -0
- package/dist/drawer/parts.d.ts +58 -0
- package/dist/drawer/parts.d.ts.map +1 -0
- package/dist/drawer/parts.js +107 -0
- package/dist/drawer/parts.js.map +1 -0
- package/dist/index.css +2701 -0
- package/dist/index.d.ts +39 -0
- package/dist/index.js +62 -0
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +3 -0
- package/dist/input/input.css +103 -0
- package/dist/input/input.d.ts +17 -0
- package/dist/input/input.d.ts.map +1 -0
- package/dist/input/input.js +37 -0
- package/dist/input/input.js.map +1 -0
- package/dist/input/input.module.css.d.ts +2 -0
- package/dist/input/input.module.js +18 -0
- package/dist/input/input.module.js.map +1 -0
- package/dist/layer-order.css +22 -0
- package/dist/menu/index.d.ts +4 -0
- package/dist/menu/index.js +5 -0
- package/dist/menu/menu.css +154 -0
- package/dist/menu/menu.d.ts +50 -0
- package/dist/menu/menu.d.ts.map +1 -0
- package/dist/menu/menu.js +69 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/menu/menu.module.css.d.ts +2 -0
- package/dist/menu/menu.module.js +19 -0
- package/dist/menu/menu.module.js.map +1 -0
- package/dist/menu/menuitemshortcut.d.ts +9 -0
- package/dist/menu/menuitemshortcut.d.ts.map +1 -0
- package/dist/menu/menuitemshortcut.js +15 -0
- package/dist/menu/menuitemshortcut.js.map +1 -0
- package/dist/menu/parts.d.ts +39 -0
- package/dist/menu/parts.d.ts.map +1 -0
- package/dist/menu/parts.js +76 -0
- package/dist/menu/parts.js.map +1 -0
- package/dist/number-field/index.d.ts +3 -0
- package/dist/number-field/index.js +4 -0
- package/dist/number-field/number-field.css +111 -0
- package/dist/number-field/number-field.d.ts +31 -0
- package/dist/number-field/number-field.d.ts.map +1 -0
- package/dist/number-field/number-field.js +78 -0
- package/dist/number-field/number-field.js.map +1 -0
- package/dist/number-field/number-field.module.css.d.ts +2 -0
- package/dist/number-field/number-field.module.js +16 -0
- package/dist/number-field/number-field.module.js.map +1 -0
- package/dist/number-field/parts.d.ts +38 -0
- package/dist/number-field/parts.d.ts.map +1 -0
- package/dist/number-field/parts.js +74 -0
- package/dist/number-field/parts.js.map +1 -0
- package/dist/progress/index.d.ts +3 -0
- package/dist/progress/index.js +4 -0
- package/dist/progress/parts.d.ts +20 -0
- package/dist/progress/parts.d.ts.map +1 -0
- package/dist/progress/parts.js +42 -0
- package/dist/progress/parts.js.map +1 -0
- package/dist/progress/progress.css +71 -0
- package/dist/progress/progress.d.ts +27 -0
- package/dist/progress/progress.d.ts.map +1 -0
- package/dist/progress/progress.js +27 -0
- package/dist/progress/progress.js.map +1 -0
- package/dist/progress/progress.module.css.d.ts +2 -0
- package/dist/progress/progress.module.js +19 -0
- package/dist/progress/progress.module.js.map +1 -0
- package/dist/reset.css +91 -0
- package/dist/select/index.d.ts +3 -0
- package/dist/select/index.js +4 -0
- package/dist/select/parts.d.ts +65 -0
- package/dist/select/parts.d.ts.map +1 -0
- package/dist/select/parts.js +134 -0
- package/dist/select/parts.js.map +1 -0
- package/dist/select/select.css +157 -0
- package/dist/select/select.d.ts +41 -0
- package/dist/select/select.d.ts.map +1 -0
- package/dist/select/select.js +89 -0
- package/dist/select/select.js.map +1 -0
- package/dist/select/select.module.css.d.ts +2 -0
- package/dist/select/select.module.js +17 -0
- package/dist/select/select.module.js.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +3 -0
- package/dist/separator/separator.css +16 -0
- package/dist/separator/separator.d.ts +16 -0
- package/dist/separator/separator.d.ts.map +1 -0
- package/dist/separator/separator.js +17 -0
- package/dist/separator/separator.js.map +1 -0
- package/dist/separator/separator.module.css.d.ts +2 -0
- package/dist/separator/separator.module.js +6 -0
- package/dist/separator/separator.module.js.map +1 -0
- package/dist/slider/index.d.ts +3 -0
- package/dist/slider/index.js +4 -0
- package/dist/slider/parts.d.ts +38 -0
- package/dist/slider/parts.d.ts.map +1 -0
- package/dist/slider/parts.js +69 -0
- package/dist/slider/parts.js.map +1 -0
- package/dist/slider/slider.css +97 -0
- package/dist/slider/slider.d.ts +38 -0
- package/dist/slider/slider.d.ts.map +1 -0
- package/dist/slider/slider.js +41 -0
- package/dist/slider/slider.js.map +1 -0
- package/dist/slider/slider.module.css.d.ts +2 -0
- package/dist/slider/slider.module.js +15 -0
- package/dist/slider/slider.module.js.map +1 -0
- package/dist/styles/reset.css +69 -0
- package/dist/styles/tokens.css +276 -0
- package/dist/switch/index.d.ts +3 -0
- package/dist/switch/index.js +4 -0
- package/dist/switch/parts.d.ts +18 -0
- package/dist/switch/parts.d.ts.map +1 -0
- package/dist/switch/parts.js +39 -0
- package/dist/switch/parts.js.map +1 -0
- package/dist/switch/switch.css +64 -0
- package/dist/switch/switch.d.ts +28 -0
- package/dist/switch/switch.d.ts.map +1 -0
- package/dist/switch/switch.js +26 -0
- package/dist/switch/switch.js.map +1 -0
- package/dist/switch/switch.module.css.d.ts +2 -0
- package/dist/switch/switch.module.js +11 -0
- package/dist/switch/switch.module.js.map +1 -0
- package/dist/tabs/index.d.ts +3 -0
- package/dist/tabs/index.js +4 -0
- package/dist/tabs/parts.d.ts +23 -0
- package/dist/tabs/parts.d.ts.map +1 -0
- package/dist/tabs/parts.js +48 -0
- package/dist/tabs/parts.js.map +1 -0
- package/dist/tabs/tabs.css +86 -0
- package/dist/tabs/tabs.d.ts +28 -0
- package/dist/tabs/tabs.d.ts.map +1 -0
- package/dist/tabs/tabs.js +30 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/tabs/tabs.module.css.d.ts +2 -0
- package/dist/tabs/tabs.module.js +11 -0
- package/dist/tabs/tabs.module.js.map +1 -0
- package/dist/tailwind-theme.css +142 -0
- package/dist/toast/index.d.ts +3 -0
- package/dist/toast/index.js +4 -0
- package/dist/toast/parts.d.ts +33 -0
- package/dist/toast/parts.d.ts.map +1 -0
- package/dist/toast/parts.js +62 -0
- package/dist/toast/parts.js.map +1 -0
- package/dist/toast/toast.css +207 -0
- package/dist/toast/toast.d.ts +43 -0
- package/dist/toast/toast.d.ts.map +1 -0
- package/dist/toast/toast.js +156 -0
- package/dist/toast/toast.js.map +1 -0
- package/dist/toast/toast.module.css.d.ts +2 -0
- package/dist/toast/toast.module.js +25 -0
- package/dist/toast/toast.module.js.map +1 -0
- package/dist/tokens.css +404 -0
- package/dist/tooltip/index.d.ts +3 -0
- package/dist/tooltip/index.js +4 -0
- package/dist/tooltip/parts.d.ts +23 -0
- package/dist/tooltip/parts.d.ts.map +1 -0
- package/dist/tooltip/parts.js +53 -0
- package/dist/tooltip/parts.js.map +1 -0
- package/dist/tooltip/tooltip.css +60 -0
- package/dist/tooltip/tooltip.d.ts +22 -0
- package/dist/tooltip/tooltip.d.ts.map +1 -0
- package/dist/tooltip/tooltip.js +23 -0
- package/dist/tooltip/tooltip.js.map +1 -0
- package/dist/tooltip/tooltip.module.css.d.ts +2 -0
- package/dist/tooltip/tooltip.module.js +10 -0
- package/dist/tooltip/tooltip.module.js.map +1 -0
- package/package.json +153 -4
- package/src/accordion/accordion.module.css +75 -0
- package/src/accordion/accordion.tsx +50 -0
- package/src/accordion/index.ts +6 -0
- package/src/accordion/parts.tsx +68 -0
- package/src/alert-dialog/alert-dialog.module.css +91 -0
- package/src/alert-dialog/alert-dialog.tsx +69 -0
- package/src/alert-dialog/index.ts +7 -0
- package/src/alert-dialog/parts.tsx +73 -0
- package/src/badge/badge.module.css +60 -0
- package/src/badge/badge.tsx +19 -0
- package/src/badge/index.ts +3 -0
- package/src/button/button.module.css +229 -0
- package/src/button/button.tsx +67 -0
- package/src/button/index.ts +3 -0
- package/src/card/card.module.css +56 -0
- package/src/card/card.tsx +54 -0
- package/src/card/index.ts +3 -0
- package/src/checkbox/checkbox.module.css +69 -0
- package/src/checkbox/checkbox.tsx +38 -0
- package/src/checkbox/index.ts +6 -0
- package/src/checkbox/parts.tsx +54 -0
- package/src/collapsible/collapsible.module.css +81 -0
- package/src/collapsible/collapsible.tsx +38 -0
- package/src/collapsible/index.ts +6 -0
- package/src/collapsible/parts.tsx +52 -0
- package/src/context-menu/context-menu.module.css +168 -0
- package/src/context-menu/context-menu.tsx +75 -0
- package/src/context-menu/index.ts +21 -0
- package/src/context-menu/parts.tsx +99 -0
- package/src/css.d.ts +8 -0
- package/src/dialog/dialog.module.css +116 -0
- package/src/dialog/dialog.tsx +73 -0
- package/src/dialog/index.ts +13 -0
- package/src/dialog/parts.tsx +96 -0
- package/src/drawer/drawer.module.css +240 -0
- package/src/drawer/drawer.tsx +96 -0
- package/src/drawer/index.ts +24 -0
- package/src/drawer/parts.tsx +122 -0
- package/src/index.ts +237 -0
- package/src/input/index.ts +3 -0
- package/src/input/input.module.css +93 -0
- package/src/input/input.tsx +39 -0
- package/src/menu/index.ts +7 -0
- package/src/menu/menu.module.css +142 -0
- package/src/menu/menu.tsx +108 -0
- package/src/menu/menuitemshortcut.tsx +9 -0
- package/src/menu/parts.tsx +90 -0
- package/src/number-field/index.ts +20 -0
- package/src/number-field/number-field.module.css +98 -0
- package/src/number-field/number-field.tsx +75 -0
- package/src/number-field/parts.tsx +91 -0
- package/src/progress/index.ts +6 -0
- package/src/progress/parts.tsx +51 -0
- package/src/progress/progress.module.css +61 -0
- package/src/progress/progress.tsx +42 -0
- package/src/select/index.ts +30 -0
- package/src/select/parts.tsx +171 -0
- package/src/select/select.module.css +146 -0
- package/src/select/select.tsx +98 -0
- package/src/separator/index.ts +3 -0
- package/src/separator/separator.module.css +14 -0
- package/src/separator/separator.tsx +20 -0
- package/src/slider/index.ts +14 -0
- package/src/slider/parts.tsx +90 -0
- package/src/slider/slider.module.css +110 -0
- package/src/slider/slider.tsx +68 -0
- package/src/styles/layer-order.css +22 -0
- package/src/styles/reset.css +91 -0
- package/src/styles/tailwind-theme.css +142 -0
- package/src/styles/tokens.css +404 -0
- package/src/switch/index.ts +6 -0
- package/src/switch/parts.tsx +44 -0
- package/src/switch/switch.module.css +57 -0
- package/src/switch/switch.tsx +33 -0
- package/src/tabs/index.ts +6 -0
- package/src/tabs/parts.tsx +48 -0
- package/src/tabs/tabs.module.css +79 -0
- package/src/tabs/tabs.tsx +48 -0
- package/src/toast/index.ts +6 -0
- package/src/toast/parts.tsx +76 -0
- package/src/toast/toast.module.css +212 -0
- package/src/toast/toast.tsx +129 -0
- package/src/tooltip/index.ts +6 -0
- package/src/tooltip/parts.tsx +62 -0
- package/src/tooltip/tooltip.module.css +56 -0
- package/src/tooltip/tooltip.tsx +30 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.root_XcG3ua {
|
|
3
|
+
border: var(--border-width-base) solid var(--color-line);
|
|
4
|
+
border-radius: var(--radius-lg);
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: 0;
|
|
7
|
+
display: flex;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.item_XcG3ua {
|
|
12
|
+
border-bottom: var(--border-width-base) solid var(--color-line-subtle);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.item_XcG3ua:last-child {
|
|
16
|
+
border-bottom: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.header_XcG3ua {
|
|
20
|
+
align-items: center;
|
|
21
|
+
display: flex;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.trigger_XcG3ua {
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--space-2);
|
|
28
|
+
padding: var(--space-3) var(--space-4);
|
|
29
|
+
font-family: var(--font-mono);
|
|
30
|
+
font-size: var(--font-size-sm);
|
|
31
|
+
font-weight: var(--font-weight-medium);
|
|
32
|
+
color: var(--color-primary);
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
text-align: left;
|
|
35
|
+
transition: background-color var(--duration-fast) var(--easing-standard),
|
|
36
|
+
color var(--duration-fast) var(--easing-standard);
|
|
37
|
+
user-select: none;
|
|
38
|
+
background: none;
|
|
39
|
+
border: none;
|
|
40
|
+
outline: none;
|
|
41
|
+
flex: 1;
|
|
42
|
+
display: flex;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.trigger_XcG3ua:hover {
|
|
46
|
+
background-color: var(--color-hover);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.trigger_XcG3ua:focus-visible {
|
|
50
|
+
box-shadow: inset var(--shadow-focus);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.trigger_XcG3ua[data-disabled] {
|
|
54
|
+
opacity: .44;
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.trigger-icon_XcG3ua {
|
|
59
|
+
color: var(--color-tertiary);
|
|
60
|
+
transition: transform var(--duration-normal) var(--easing-standard);
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.trigger_XcG3ua[data-panel-open] .trigger-icon_XcG3ua {
|
|
65
|
+
transform: rotate(180deg);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.panel_XcG3ua {
|
|
69
|
+
height: var(--accordion-panel-height);
|
|
70
|
+
transition: height var(--duration-normal) var(--easing-standard);
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.panel_XcG3ua[data-starting-style], .panel_XcG3ua[data-ending-style] {
|
|
75
|
+
height: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.panel-content_XcG3ua {
|
|
79
|
+
padding: var(--space-2) var(--space-4) var(--space-4);
|
|
80
|
+
font-family: var(--font-mono);
|
|
81
|
+
font-size: var(--font-size-sm);
|
|
82
|
+
color: var(--color-secondary);
|
|
83
|
+
line-height: var(--line-height-relaxed);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import styles from "./accordion.module.css";
|
|
4
|
+
|
|
5
|
+
//#region src/accordion/accordion.d.ts
|
|
6
|
+
interface AccordionItem {
|
|
7
|
+
value: string;
|
|
8
|
+
header: ReactNode;
|
|
9
|
+
content: ReactNode;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface AccordionProps {
|
|
13
|
+
items: AccordionItem[];
|
|
14
|
+
multiple?: boolean;
|
|
15
|
+
defaultValue?: string[];
|
|
16
|
+
value?: string[];
|
|
17
|
+
onValueChange?: (value: string[]) => void;
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
declare function Accordion({
|
|
21
|
+
items,
|
|
22
|
+
className,
|
|
23
|
+
multiple,
|
|
24
|
+
...props
|
|
25
|
+
}: AccordionProps): react_jsx_runtime0.JSX.Element;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { Accordion, AccordionItem, AccordionProps, styles };
|
|
28
|
+
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,KAAA;EACA,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,SAAA;EACT,QAAA;AAAA;AAAA,UAGe,cAAA;EACf,KAAA,EAAO,aAAA;EACP,QAAA;EACA,YAAA;EACA,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;AAAA,iBAWc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import accordion_module_default from "./accordion.module.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Accordion } from "@base-ui/react/accordion";
|
|
4
|
+
//#region src/accordion/accordion.tsx
|
|
5
|
+
function ChevronIcon() {
|
|
6
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
7
|
+
width: "12",
|
|
8
|
+
height: "12",
|
|
9
|
+
viewBox: "0 0 12 12",
|
|
10
|
+
fill: "none",
|
|
11
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
12
|
+
d: "M2.5 4.5L6 8L9.5 4.5",
|
|
13
|
+
stroke: "currentColor",
|
|
14
|
+
strokeWidth: "1.5",
|
|
15
|
+
strokeLinecap: "round",
|
|
16
|
+
strokeLinejoin: "round"
|
|
17
|
+
})
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function Accordion$1({ items, className, multiple = true, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(Accordion.Root, {
|
|
22
|
+
className: `${accordion_module_default.root} ${className ?? ""}`,
|
|
23
|
+
multiple,
|
|
24
|
+
...props,
|
|
25
|
+
children: items.map((item) => /* @__PURE__ */ jsxs(Accordion.Item, {
|
|
26
|
+
value: item.value,
|
|
27
|
+
className: accordion_module_default.item,
|
|
28
|
+
disabled: item.disabled ?? false,
|
|
29
|
+
children: [/* @__PURE__ */ jsx(Accordion.Header, {
|
|
30
|
+
className: accordion_module_default.header,
|
|
31
|
+
children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
|
|
32
|
+
className: accordion_module_default.trigger,
|
|
33
|
+
children: [item.header, /* @__PURE__ */ jsx("span", {
|
|
34
|
+
className: accordion_module_default["trigger-icon"],
|
|
35
|
+
children: /* @__PURE__ */ jsx(ChevronIcon, {})
|
|
36
|
+
})]
|
|
37
|
+
})
|
|
38
|
+
}), /* @__PURE__ */ jsx(Accordion.Panel, {
|
|
39
|
+
className: accordion_module_default.panel,
|
|
40
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
41
|
+
className: accordion_module_default["panel-content"],
|
|
42
|
+
children: item.content
|
|
43
|
+
})
|
|
44
|
+
})]
|
|
45
|
+
}, item.value))
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
export { Accordion$1 as Accordion };
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n value: string;\n header: ReactNode;\n content: ReactNode;\n disabled?: boolean;\n}\n\nexport interface AccordionProps {\n items: AccordionItem[];\n multiple?: boolean;\n defaultValue?: string[];\n value?: string[];\n onValueChange?: (value: string[]) => void;\n className?: string;\n}\n\nfunction ChevronIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n );\n}\n\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n return (\n <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n {items.map((item) => (\n <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n <BaseAccordion.Header className={styles.header}>\n <BaseAccordion.Trigger className={styles.trigger}>\n {item.header}\n <span className={styles[\"trigger-icon\"]}>\n <ChevronIcon />\n </span>\n </BaseAccordion.Trigger>\n </BaseAccordion.Header>\n <BaseAccordion.Panel className={styles.panel}>\n <div className={styles[\"panel-content\"]}>{item.content}</div>\n </BaseAccordion.Panel>\n </BaseAccordion.Item>\n ))}\n </BaseAccordion.Root>\n );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AAoBA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
//#region src/accordion/accordion.module.css
|
|
2
|
+
var accordion_module_default = {
|
|
3
|
+
"header": "header_XcG3ua",
|
|
4
|
+
"item": "item_XcG3ua",
|
|
5
|
+
"panel": "panel_XcG3ua",
|
|
6
|
+
"panel-content": "panel-content_XcG3ua",
|
|
7
|
+
"root": "root_XcG3ua",
|
|
8
|
+
"trigger": "trigger_XcG3ua",
|
|
9
|
+
"trigger-icon": "trigger-icon_XcG3ua"
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { accordion_module_default as default };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=accordion.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.module.js","names":[],"sources":["../../src/accordion/accordion.module.css"],"sourcesContent":["@layer components {\n .root {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: var(--border-width-base) solid var(--color-line);\n border-radius: var(--radius-lg);\n overflow: hidden;\n }\n .item {\n border-bottom: var(--border-width-base) solid var(--color-line-subtle);\n }\n .item:last-child {\n border-bottom: none;\n }\n .header {\n display: flex;\n align-items: center;\n }\n .trigger {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n color: var(--color-primary);\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n text-align: left;\n transition:\n background-color var(--duration-fast) var(--easing-standard),\n color var(--duration-fast) var(--easing-standard);\n user-select: none;\n }\n .trigger:hover {\n background-color: var(--color-hover);\n }\n .trigger:focus-visible {\n box-shadow: inset var(--shadow-focus);\n }\n .trigger[data-disabled] {\n opacity: 0.44;\n cursor: not-allowed;\n }\n .trigger-icon {\n color: var(--color-tertiary);\n flex-shrink: 0;\n transition: transform var(--duration-normal) var(--easing-standard);\n }\n .trigger[data-panel-open] .trigger-icon {\n transform: rotate(180deg);\n }\n .panel {\n height: var(--accordion-panel-height);\n overflow: hidden;\n transition: height var(--duration-normal) var(--easing-standard);\n }\n .panel[data-starting-style],\n .panel[data-ending-style] {\n height: 0;\n }\n .panel-content {\n padding: var(--space-2) var(--space-4) var(--space-4);\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-secondary);\n line-height: var(--line-height-relaxed);\n }\n}\n"],"mappings":";AAcA,IAAA,2BAAE;CAAA,UAAA;CAAA,QAAA;CAAA,SAAA;CAAA,iBAAA;CAAA,QAAA;CAAA,WAAA;CAAA,gBAAA;CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { Accordion, AccordionItem, AccordionProps, styles } from "./accordion.js";
|
|
2
|
+
import { AccordionHeader, AccordionHeaderProps, AccordionItem as AccordionItem$1, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps } from "./parts.js";
|
|
3
|
+
export { Accordion, AccordionHeader, type AccordionHeaderProps, type AccordionItem, AccordionItem$1 as AccordionItemPart, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, styles as AccordionStyles, AccordionTrigger, type AccordionTriggerProps };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import accordion_module_default from "./accordion.module.js";
|
|
2
|
+
import { Accordion } from "./accordion.js";
|
|
3
|
+
import { AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./parts.js";
|
|
4
|
+
export { Accordion, AccordionHeader, AccordionItem as AccordionItemPart, AccordionPanel, accordion_module_default as AccordionStyles, AccordionTrigger };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react from "react";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
import { Accordion } from "@base-ui/react/accordion";
|
|
4
|
+
|
|
5
|
+
//#region src/accordion/parts.d.ts
|
|
6
|
+
type BaseItemProps = ComponentPropsWithoutRef<typeof Accordion.Item>;
|
|
7
|
+
type BaseHeaderProps = ComponentPropsWithoutRef<typeof Accordion.Header>;
|
|
8
|
+
type BaseTriggerProps = ComponentPropsWithoutRef<typeof Accordion.Trigger>;
|
|
9
|
+
type BasePanelProps = ComponentPropsWithoutRef<typeof Accordion.Panel>;
|
|
10
|
+
interface AccordionItemProps extends Omit<BaseItemProps, "className"> {
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
interface AccordionHeaderProps extends Omit<BaseHeaderProps, "className"> {
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
interface AccordionTriggerProps extends Omit<BaseTriggerProps, "className"> {
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
interface AccordionPanelProps extends Omit<BasePanelProps, "className"> {
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
declare const AccordionHeader: react.ForwardRefExoticComponent<AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
24
|
+
declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLElement>>;
|
|
25
|
+
declare const AccordionPanel: react.ForwardRefExoticComponent<AccordionPanelProps & react.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps };
|
|
28
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/accordion/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,SAAA,CAAc,IAAA;AAAA,KAC9D,eAAA,GAAkB,wBAAA,QAAgC,SAAA,CAAc,MAAA;AAAA,KAChE,gBAAA,GAAmB,wBAAA,QAAgC,SAAA,CAAc,OAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,SAAA,CAAc,KAAA;AAAA,UAEnD,kBAAA,SAA2B,IAAA,CAAK,aAAA;EAC/C,SAAA;AAAA;AAAA,UAEe,oBAAA,SAA6B,IAAA,CAAK,eAAA;EACjD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,gBAAA;EAClD,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,cAAA;EAChD,SAAA;AAAA;AAAA,cAGW,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOb,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOf,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOhB,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import accordion_module_default from "./accordion.module.js";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Accordion } from "@base-ui/react/accordion";
|
|
5
|
+
//#region src/accordion/parts.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Styled primitives for Accordion.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import { Accordion } from '@base-ui/react/accordion';
|
|
12
|
+
* import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';
|
|
13
|
+
*
|
|
14
|
+
* <Accordion.Root defaultValue={['a']}>
|
|
15
|
+
* <AccordionItem value="a">
|
|
16
|
+
* <AccordionHeader>
|
|
17
|
+
* <AccordionTrigger>Section A</AccordionTrigger>
|
|
18
|
+
* </AccordionHeader>
|
|
19
|
+
* <AccordionPanel>Content A</AccordionPanel>
|
|
20
|
+
* </AccordionItem>
|
|
21
|
+
* </Accordion.Root>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Accordion.Item, {
|
|
26
|
+
ref,
|
|
27
|
+
className: `${accordion_module_default.item} ${className ?? ""}`,
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
|
|
32
|
+
return /* @__PURE__ */ jsx(Accordion.Header, {
|
|
33
|
+
ref,
|
|
34
|
+
className: `${accordion_module_default.header} ${className ?? ""}`,
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
const AccordionTrigger = forwardRef(function AccordionTrigger({ className, ...props }, ref) {
|
|
39
|
+
return /* @__PURE__ */ jsx(Accordion.Trigger, {
|
|
40
|
+
ref,
|
|
41
|
+
className: `${accordion_module_default.trigger} ${className ?? ""}`,
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
const AccordionPanel = forwardRef(function AccordionPanel({ className, ...props }, ref) {
|
|
46
|
+
return /* @__PURE__ */ jsx(Accordion.Panel, {
|
|
47
|
+
ref,
|
|
48
|
+
className: `${accordion_module_default.panel} ${className ?? ""}`,
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
//#endregion
|
|
53
|
+
export { AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };
|
|
54
|
+
|
|
55
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","names":["BaseAccordion","styles"],"sources":["../../src/accordion/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Accordion.\n *\n * @example\n * ```tsx\n * import { Accordion } from '@base-ui/react/accordion';\n * import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';\n *\n * <Accordion.Root defaultValue={['a']}>\n * <AccordionItem value=\"a\">\n * <AccordionHeader>\n * <AccordionTrigger>Section A</AccordionTrigger>\n * </AccordionHeader>\n * <AccordionPanel>Content A</AccordionPanel>\n * </AccordionItem>\n * </Accordion.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\ntype BaseItemProps = ComponentPropsWithoutRef<typeof BaseAccordion.Item>;\ntype BaseHeaderProps = ComponentPropsWithoutRef<typeof BaseAccordion.Header>;\ntype BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;\ntype BasePanelProps = ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;\n\nexport interface AccordionItemProps extends Omit<BaseItemProps, \"className\"> {\n className?: string;\n}\nexport interface AccordionHeaderProps extends Omit<BaseHeaderProps, \"className\"> {\n className?: string;\n}\nexport interface AccordionTriggerProps extends Omit<BaseTriggerProps, \"className\"> {\n className?: string;\n}\nexport interface AccordionPanelProps extends Omit<BasePanelProps, \"className\"> {\n className?: string;\n}\n\nexport const AccordionItem = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItem(\n { className, ...props },\n ref,\n) {\n return <BaseAccordion.Item ref={ref} className={`${styles.item} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionHeader = forwardRef<ComponentRef<typeof BaseAccordion.Header>, AccordionHeaderProps>(function AccordionHeader(\n { className, ...props },\n ref,\n) {\n return <BaseAccordion.Header ref={ref} className={`${styles.header} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(\n { className, ...props },\n ref,\n) {\n return <BaseAccordion.Trigger ref={ref} className={`${styles.trigger} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionPanel = forwardRef<ComponentRef<typeof BaseAccordion.Panel>, AccordionPanelProps>(function AccordionPanel(\n { className, ...props },\n ref,\n) {\n return <BaseAccordion.Panel ref={ref} className={`${styles.panel} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,WAAwE,SAAS,cAC5G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,UAAc,MAAf;EAAyB;EAAK,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,QAAf;EAA2B;EAAK,WAAW,GAAGC,yBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,SAAf;EAA4B;EAAK,WAAW,GAAGC,yBAAO,QAAQ,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACxG;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,OAAf;EAA0B;EAAK,WAAW,GAAGC,yBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpG"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.backdrop_xocxMW {
|
|
3
|
+
min-height: 100dvh;
|
|
4
|
+
z-index: var(--z-overlay);
|
|
5
|
+
transition: opacity var(--duration-slow) var(--easing-standard);
|
|
6
|
+
background-color: #0000007a;
|
|
7
|
+
position: fixed;
|
|
8
|
+
inset: 0;
|
|
9
|
+
|
|
10
|
+
@supports (-webkit-touch-callout: none) {
|
|
11
|
+
position: absolute;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.backdrop_xocxMW[data-starting-style], .backdrop_xocxMW[data-ending-style] {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.popup_xocxMW {
|
|
20
|
+
z-index: var(--z-modal);
|
|
21
|
+
background-color: var(--color-elevated);
|
|
22
|
+
border: var(--border-width-base) solid var(--color-line);
|
|
23
|
+
border-radius: var(--radius-2xl);
|
|
24
|
+
box-shadow: var(--shadow-xl);
|
|
25
|
+
padding: var(--space-5) var(--space-6);
|
|
26
|
+
width: min(380px, calc(100vw - var(--space-8)));
|
|
27
|
+
gap: var(--space-3);
|
|
28
|
+
transition: opacity .2s var(--easing-ease-out),
|
|
29
|
+
transform .2s var(--easing-spring);
|
|
30
|
+
outline: none;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
display: flex;
|
|
33
|
+
position: fixed;
|
|
34
|
+
top: 50%;
|
|
35
|
+
left: 50%;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
transform: translate(-50%, -50%);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.popup_xocxMW[data-starting-style] {
|
|
41
|
+
opacity: 0;
|
|
42
|
+
transform: translate(-50%, -48%) scale(.96);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.popup_xocxMW[data-ending-style] {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transition: opacity .15s var(--easing-ease-in),
|
|
48
|
+
transform .15s var(--easing-ease-in);
|
|
49
|
+
transform: translate(-50%, -50%) scale(.98);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.header_xocxMW {
|
|
53
|
+
gap: var(--space-1-5);
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
display: flex;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.icon_xocxMW {
|
|
59
|
+
margin-bottom: var(--space-1);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.title_xocxMW {
|
|
63
|
+
font-family: var(--font-sans);
|
|
64
|
+
font-size: var(--font-size-lg);
|
|
65
|
+
font-weight: var(--font-weight-bold);
|
|
66
|
+
color: var(--color-primary);
|
|
67
|
+
line-height: var(--line-height-tight);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.description_xocxMW {
|
|
71
|
+
font-family: var(--font-sans);
|
|
72
|
+
font-size: var(--font-size-md);
|
|
73
|
+
color: var(--color-secondary);
|
|
74
|
+
line-height: var(--line-height-relaxed);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.actions_xocxMW {
|
|
78
|
+
justify-content: flex-end;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: var(--space-2);
|
|
81
|
+
padding-top: var(--space-1);
|
|
82
|
+
display: flex;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from "react";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import styles from "./alert-dialog.module.css";
|
|
4
|
+
|
|
5
|
+
//#region src/alert-dialog/alert-dialog.d.ts
|
|
6
|
+
interface AlertAction {
|
|
7
|
+
label: ReactNode;
|
|
8
|
+
/** Called when the action button is clicked. The dialog closes automatically. */
|
|
9
|
+
onAction?: () => void;
|
|
10
|
+
/** Renders as a filled accent button — use for the primary confirm action. */
|
|
11
|
+
primary?: boolean;
|
|
12
|
+
/** Renders as a soft destructive button. Sits on the left when combined with other actions. */
|
|
13
|
+
destructive?: boolean;
|
|
14
|
+
}
|
|
15
|
+
interface AlertDialogProps {
|
|
16
|
+
open?: boolean;
|
|
17
|
+
defaultOpen?: boolean;
|
|
18
|
+
onOpenChange?: (open: boolean, eventDetails: unknown) => void;
|
|
19
|
+
trigger?: ReactElement;
|
|
20
|
+
/** Optional icon shown above the title. */
|
|
21
|
+
icon?: ReactNode;
|
|
22
|
+
title: ReactNode;
|
|
23
|
+
description?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Action buttons rendered right-aligned.
|
|
26
|
+
* Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).
|
|
27
|
+
* Use `destructive: true` to apply destructive tone to the confirm action.
|
|
28
|
+
*/
|
|
29
|
+
actions: AlertAction[];
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
declare function AlertDialog({
|
|
33
|
+
trigger,
|
|
34
|
+
icon,
|
|
35
|
+
title,
|
|
36
|
+
description,
|
|
37
|
+
actions,
|
|
38
|
+
className,
|
|
39
|
+
onOpenChange,
|
|
40
|
+
...props
|
|
41
|
+
}: AlertDialogProps): react_jsx_runtime0.JSX.Element;
|
|
42
|
+
//#endregion
|
|
43
|
+
export { AlertAction, AlertDialog, AlertDialogProps, styles };
|
|
44
|
+
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,KAAA,EAAO,SAAA;;EAEP,QAAA;EAH0B;EAK1B,OAAA;EAJgB;EAMhB,WAAA;AAAA;AAAA,UAGe,gBAAA;EACf,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EAJK;EAMf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,SAAA;EACP,WAAA,GAAc,SAAA;EAFP;;;;;EAQP,OAAA,EAAS,WAAA;EACT,SAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EAAc,OAAA;EAAS,IAAA;EAAM,KAAA;EAAO,WAAA;EAAa,OAAA;EAAS,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Button } from "../button/button.js";
|
|
2
|
+
import alert_dialog_module_default from "./alert-dialog.module.js";
|
|
3
|
+
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/alert-dialog/alert-dialog.tsx
|
|
6
|
+
function AlertDialog$1({ trigger, icon, title, description, actions, className, onOpenChange, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsxs(AlertDialog.Root, {
|
|
8
|
+
onOpenChange,
|
|
9
|
+
...props,
|
|
10
|
+
children: [trigger && /* @__PURE__ */ jsx(AlertDialog.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: alert_dialog_module_default.backdrop }), /* @__PURE__ */ jsxs(AlertDialog.Popup, {
|
|
11
|
+
className: `${alert_dialog_module_default.popup} ${className ?? ""}`,
|
|
12
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
13
|
+
className: alert_dialog_module_default.header,
|
|
14
|
+
children: [
|
|
15
|
+
icon && /* @__PURE__ */ jsx("div", {
|
|
16
|
+
className: alert_dialog_module_default.icon,
|
|
17
|
+
children: icon
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ jsx(AlertDialog.Title, {
|
|
20
|
+
className: alert_dialog_module_default.title,
|
|
21
|
+
children: title
|
|
22
|
+
}),
|
|
23
|
+
description && /* @__PURE__ */ jsx(AlertDialog.Description, {
|
|
24
|
+
className: alert_dialog_module_default.description,
|
|
25
|
+
children: description
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
29
|
+
className: alert_dialog_module_default.actions,
|
|
30
|
+
children: actions.map((action, i) => /* @__PURE__ */ jsx(AlertDialog.Close, {
|
|
31
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
32
|
+
variant: action.primary ? "solid" : "outline",
|
|
33
|
+
tone: action.destructive ? "destructive" : "primary",
|
|
34
|
+
size: "sm",
|
|
35
|
+
onClick: action.onAction
|
|
36
|
+
}),
|
|
37
|
+
children: action.label
|
|
38
|
+
}, i))
|
|
39
|
+
})]
|
|
40
|
+
})] })]
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
export { AlertDialog$1 as AlertDialog };
|
|
45
|
+
|
|
46
|
+
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { Button } from \"../button/button\";\nimport styles from \"./alert-dialog.module.css\";\n\nexport interface AlertAction {\n label: ReactNode;\n /** Called when the action button is clicked. The dialog closes automatically. */\n onAction?: () => void;\n /** Renders as a filled accent button — use for the primary confirm action. */\n primary?: boolean;\n /** Renders as a soft destructive button. Sits on the left when combined with other actions. */\n destructive?: boolean;\n}\n\nexport interface AlertDialogProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n trigger?: ReactElement;\n /** Optional icon shown above the title. */\n icon?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n /**\n * Action buttons rendered right-aligned.\n * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).\n * Use `destructive: true` to apply destructive tone to the confirm action.\n */\n actions: AlertAction[];\n className?: string;\n}\n\nexport function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {\n return (\n <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>\n {trigger && <BaseAlertDialog.Trigger render={trigger} />}\n <BaseAlertDialog.Portal>\n <BaseAlertDialog.Backdrop className={styles.backdrop} />\n <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n <div className={styles.header}>\n {icon && <div className={styles.icon}>{icon}</div>}\n <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>\n {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}\n </div>\n <div className={styles.actions}>\n {actions.map((action, i) => (\n <BaseAlertDialog.Close\n key={i}\n render={\n <Button\n variant={action.primary ? \"solid\" : \"outline\"}\n tone={action.destructive ? \"destructive\" : \"primary\"}\n size=\"sm\"\n onClick={action.onAction}\n />\n }\n >\n {action.label}\n </BaseAlertDialog.Close>\n ))}\n </div>\n </BaseAlertDialog.Popup>\n </BaseAlertDialog.Portal>\n </BaseAlertDialog.Root>\n );\n}\n\nexport { styles as AlertDialogStyles };\n"],"mappings":";;;;;AAiCA,SAAgBA,cAAY,EAAE,SAAS,MAAM,OAAO,aAAa,SAAS,WAAW,cAAc,GAAG,SAA2B;AAC/H,QACE,qBAACC,YAAgB,MAAjB;EAAoC;EAAuB,GAAI;YAA/D,CACG,WAAW,oBAACA,YAAgB,SAAjB,EAAyB,QAAQ,SAAW,CAAA,EACxD,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAWC,4BAAO,UAAY,CAAA,EACxD,qBAACD,YAAgB,OAAjB;GAAuB,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;aAAlE,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;cAAvB;KACG,QAAQ,oBAAC,OAAD;MAAK,WAAWA,4BAAO;gBAAO;MAAW,CAAA;KAClD,oBAACD,YAAgB,OAAjB;MAAuB,WAAWC,4BAAO;gBAAQ;MAA8B,CAAA;KAC9E,eAAe,oBAACD,YAAgB,aAAjB;MAA6B,WAAWC,4BAAO;gBAAc;MAA0C,CAAA;KACnH;OACN,oBAAC,OAAD;IAAK,WAAWA,4BAAO;cACpB,QAAQ,KAAK,QAAQ,MACpB,oBAACD,YAAgB,OAAjB;KAEE,QACE,oBAAC,QAAD;MACE,SAAS,OAAO,UAAU,UAAU;MACpC,MAAM,OAAO,cAAc,gBAAgB;MAC3C,MAAK;MACL,SAAS,OAAO;MAChB,CAAA;eAGH,OAAO;KACc,EAXjB,EAWiB,CACxB;IACE,CAAA,CACgB;KACD,EAAA,CAAA,CACJ"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
//#region src/alert-dialog/alert-dialog.module.css
|
|
2
|
+
var alert_dialog_module_default = {
|
|
3
|
+
"actions": "actions_xocxMW",
|
|
4
|
+
"backdrop": "backdrop_xocxMW",
|
|
5
|
+
"description": "description_xocxMW",
|
|
6
|
+
"header": "header_xocxMW",
|
|
7
|
+
"icon": "icon_xocxMW",
|
|
8
|
+
"popup": "popup_xocxMW",
|
|
9
|
+
"title": "title_xocxMW"
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { alert_dialog_module_default as default };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=alert-dialog.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.module.js","names":[],"sources":["../../src/alert-dialog/alert-dialog.module.css"],"sourcesContent":["@layer components {\n .backdrop {\n position: fixed;\n inset: 0;\n min-height: 100dvh;\n background-color: rgba(0, 0, 0, 0.48);\n z-index: var(--z-overlay);\n transition: opacity var(--duration-slow) var(--easing-standard);\n\n @supports (-webkit-touch-callout: none) {\n position: absolute;\n }\n }\n\n .backdrop[data-starting-style],\n .backdrop[data-ending-style] {\n opacity: 0;\n }\n\n .popup {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: var(--z-modal);\n background-color: var(--color-elevated);\n border: var(--border-width-base) solid var(--color-line);\n border-radius: var(--radius-2xl);\n box-shadow: var(--shadow-xl);\n padding: var(--space-5) var(--space-6);\n width: min(380px, calc(100vw - var(--space-8)));\n outline: none;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n transition:\n opacity 200ms var(--easing-ease-out),\n transform 200ms var(--easing-spring);\n }\n\n .popup[data-starting-style] {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n\n .popup[data-ending-style] {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.98);\n transition:\n opacity 150ms var(--easing-ease-in),\n transform 150ms var(--easing-ease-in);\n }\n\n /* ─── Header ──────────────────────────────────────────────────── */\n\n .header {\n display: flex;\n flex-direction: column;\n gap: var(--space-1-5);\n }\n\n .icon {\n margin-bottom: var(--space-1);\n }\n\n .title {\n font-family: var(--font-sans);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-bold);\n color: var(--color-primary);\n line-height: var(--line-height-tight);\n }\n\n .description {\n font-family: var(--font-sans);\n font-size: var(--font-size-md);\n color: var(--color-secondary);\n line-height: var(--line-height-relaxed);\n }\n\n /* ─── Actions ─────────────────────────────────────────────────── */\n\n .actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n padding-top: var(--space-1);\n }\n}\n"],"mappings":";AAcA,IAAA,8BAAY;CAAI,WAAU;CAAM,YAAA;CAAA,eAAA;CAAA,UAAA;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { AlertAction, AlertDialog, AlertDialogProps, styles } from "./alert-dialog.js";
|
|
2
|
+
import { AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogTitle, AlertDialogTitleProps } from "./parts.js";
|
|
3
|
+
export { type AlertAction, AlertDialog, AlertDialogBackdrop, type AlertDialogBackdropProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogProps, styles as AlertDialogStyles, AlertDialogTitle, type AlertDialogTitleProps };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import alert_dialog_module_default from "./alert-dialog.module.js";
|
|
2
|
+
import { AlertDialog } from "./alert-dialog.js";
|
|
3
|
+
import { AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, AlertDialogTitle } from "./parts.js";
|
|
4
|
+
export { AlertDialog, AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, alert_dialog_module_default as AlertDialogStyles, AlertDialogTitle };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
2
|
+
import * as react from "react";
|
|
3
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/alert-dialog/parts.d.ts
|
|
6
|
+
type BaseBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;
|
|
7
|
+
type BasePopupProps = ComponentPropsWithoutRef<typeof AlertDialog.Popup>;
|
|
8
|
+
type BaseTitleProps = ComponentPropsWithoutRef<typeof AlertDialog.Title>;
|
|
9
|
+
type BaseDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialog.Description>;
|
|
10
|
+
interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const AlertDialogBackdrop: react.ForwardRefExoticComponent<AlertDialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
declare const AlertDialogPopup: react.ForwardRefExoticComponent<AlertDialogPopupProps & react.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
declare const AlertDialogTitle: react.ForwardRefExoticComponent<AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
25
|
+
declare const AlertDialogDescription: react.ForwardRefExoticComponent<AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogTitle, AlertDialogTitleProps };
|
|
28
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/alert-dialog/parts.tsx"],"mappings":";;;;;KA8BK,iBAAA,GAAoB,wBAAA,QAAgC,WAAA,CAAgB,QAAA;AAAA,KACpE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,oBAAA,GAAuB,wBAAA,QAAgC,WAAA,CAAgB,WAAA;AAAA,UAE3D,wBAAA,SAAiC,IAAA,CAAK,iBAAA;EACrD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,2BAAA,SAAoC,IAAA,CAAK,oBAAA;EACxD,SAAA;AAAA;AAAA,cAGW,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAA,wBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMnB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOhB,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import alert_dialog_module_default from "./alert-dialog.module.js";
|
|
2
|
+
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/alert-dialog/parts.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Styled primitives for AlertDialog.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
|
|
12
|
+
* import { Button } from '@brijbyte/agentic-ui/button';
|
|
13
|
+
* import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';
|
|
14
|
+
*
|
|
15
|
+
* <BaseAlertDialog.Root>
|
|
16
|
+
* <BaseAlertDialog.Trigger render={<button>Open</button>} />
|
|
17
|
+
* <BaseAlertDialog.Portal>
|
|
18
|
+
* <AlertDialogBackdrop />
|
|
19
|
+
* <AlertDialogPopup>
|
|
20
|
+
* <AlertDialogTitle>Delete account?</AlertDialogTitle>
|
|
21
|
+
* <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
|
|
22
|
+
* <div>
|
|
23
|
+
* <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
|
|
24
|
+
* <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
|
|
25
|
+
* </div>
|
|
26
|
+
* </AlertDialogPopup>
|
|
27
|
+
* </BaseAlertDialog.Portal>
|
|
28
|
+
* </BaseAlertDialog.Root>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
|
|
32
|
+
return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
|
|
33
|
+
ref,
|
|
34
|
+
className: `${alert_dialog_module_default.backdrop} ${className ?? ""}`,
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
const AlertDialogPopup = forwardRef(function AlertDialogPopup({ className, ...props }, ref) {
|
|
39
|
+
return /* @__PURE__ */ jsx(AlertDialog.Popup, {
|
|
40
|
+
ref,
|
|
41
|
+
className: `${alert_dialog_module_default.popup} ${className ?? ""}`,
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
const AlertDialogTitle = forwardRef(function AlertDialogTitle({ className, ...props }, ref) {
|
|
46
|
+
return /* @__PURE__ */ jsx(AlertDialog.Title, {
|
|
47
|
+
ref,
|
|
48
|
+
className: `${alert_dialog_module_default.title} ${className ?? ""}`,
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
const AlertDialogDescription = forwardRef(function AlertDialogDescription({ className, ...props }, ref) {
|
|
53
|
+
return /* @__PURE__ */ jsx(AlertDialog.Description, {
|
|
54
|
+
ref,
|
|
55
|
+
className: `${alert_dialog_module_default.description} ${className ?? ""}`,
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
//#endregion
|
|
60
|
+
export { AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, AlertDialogTitle };
|
|
61
|
+
|
|
62
|
+
//# sourceMappingURL=parts.js.map
|