ixia-ui-react 1.8.0 → 2.0.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 +24 -1
- package/dist/accordion/index.d.ts +41 -0
- package/dist/accordion/index.js +142 -0
- package/dist/accordion/index.js.map +1 -0
- package/dist/alert/index.d.ts +22 -0
- package/dist/alert/index.js +1 -0
- package/dist/alert-Dcu9R8CY.js +73 -0
- package/dist/alert-Dcu9R8CY.js.map +1 -0
- package/dist/alert-dialog/index.d.ts +39 -0
- package/dist/alert-dialog/index.js +134 -0
- package/dist/alert-dialog/index.js.map +1 -0
- package/dist/autocomplete/index.d.ts +2 -0
- package/dist/autocomplete/index.js +1 -0
- package/dist/autocomplete-BfpWVO1l.js +169 -0
- package/dist/autocomplete-BfpWVO1l.js.map +1 -0
- package/dist/avatar/index.d.ts +2 -0
- package/dist/avatar/index.js +1 -0
- package/dist/avatar-Bp4gZh21.js +93 -0
- package/dist/avatar-Bp4gZh21.js.map +1 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +1 -0
- package/dist/badge-Cl-9WTW-.js +160 -0
- package/dist/badge-Cl-9WTW-.js.map +1 -0
- package/dist/bento-box/index.d.ts +30 -0
- package/dist/bento-box/index.js +103 -0
- package/dist/bento-box/index.js.map +1 -0
- package/dist/breadcrumb/index.d.ts +18 -0
- package/dist/breadcrumb/index.js +58 -0
- package/dist/breadcrumb/index.js.map +1 -0
- package/dist/button/index.d.ts +3 -0
- package/dist/button/index.js +1 -0
- package/dist/button-BpUC-R1J.js +307 -0
- package/dist/button-BpUC-R1J.js.map +1 -0
- package/dist/button-group/index.d.ts +2 -0
- package/dist/button-group/index.js +1 -0
- package/dist/button-group-7azbqlcO.js +269 -0
- package/dist/button-group-7azbqlcO.js.map +1 -0
- package/dist/button.types-BFKrBCGd.d.ts +10 -0
- package/dist/calendar/index.d.ts +63 -0
- package/dist/calendar/index.js +292 -0
- package/dist/calendar/index.js.map +1 -0
- package/dist/chart/index.d.ts +87 -0
- package/dist/chart/index.js +262 -0
- package/dist/chart/index.js.map +1 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +1 -0
- package/dist/checkbox-BuUZ1Lly.js +54 -0
- package/dist/checkbox-BuUZ1Lly.js.map +1 -0
- package/dist/checkbox-group/index.d.ts +6 -0
- package/dist/checkbox-group/index.js +17 -0
- package/dist/checkbox-group/index.js.map +1 -0
- package/dist/cn-BDi0DfT5.js +29 -0
- package/dist/cn-BDi0DfT5.js.map +1 -0
- package/dist/code-block/index.d.ts +50 -0
- package/dist/code-block/index.js +208 -0
- package/dist/code-block/index.js.map +1 -0
- package/dist/collapsible/index.d.ts +2 -0
- package/dist/collapsible/index.js +1 -0
- package/dist/collapsible-BVqrh0Q0.js +44 -0
- package/dist/collapsible-BVqrh0Q0.js.map +1 -0
- package/dist/color-channel-slider/index.d.ts +2 -0
- package/dist/color-channel-slider/index.js +1 -0
- package/dist/color-channel-slider-h8mUPJ35.js +70 -0
- package/dist/color-channel-slider-h8mUPJ35.js.map +1 -0
- package/dist/color-picker/index.d.ts +137 -0
- package/dist/color-picker/index.js +621 -0
- package/dist/color-picker/index.js.map +1 -0
- package/dist/combobox/index.d.ts +64 -0
- package/dist/combobox/index.js +289 -0
- package/dist/combobox/index.js.map +1 -0
- package/dist/context-menu/index.d.ts +49 -0
- package/dist/context-menu/index.js +166 -0
- package/dist/context-menu/index.js.map +1 -0
- package/dist/dialog/index.d.ts +36 -0
- package/dist/dialog/index.js +119 -0
- package/dist/dialog/index.js.map +1 -0
- package/dist/drawer/index.d.ts +31 -0
- package/dist/drawer/index.js +95 -0
- package/dist/drawer/index.js.map +1 -0
- package/dist/dropzone/index.d.ts +70 -0
- package/dist/dropzone/index.js +479 -0
- package/dist/dropzone/index.js.map +1 -0
- package/dist/field/index.d.ts +2 -0
- package/dist/field/index.js +1 -0
- package/dist/field-DTL7eA5y.js +254 -0
- package/dist/field-DTL7eA5y.js.map +1 -0
- package/dist/form/index.d.ts +220 -0
- package/dist/form/index.js +3 -0
- package/dist/form-BxMg796f.js +192 -0
- package/dist/form-BxMg796f.js.map +1 -0
- package/dist/has-single-element-child-DLGI0Dh2.js +12 -0
- package/dist/has-single-element-child-DLGI0Dh2.js.map +1 -0
- package/dist/hooks/index.d.ts +26 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks-DUm-q_ig.js +68 -0
- package/dist/hooks-DUm-q_ig.js.map +1 -0
- package/dist/icon/index.d.ts +2 -0
- package/dist/icon/index.js +1 -0
- package/dist/icon-D3JWfCa2.js +85 -0
- package/dist/icon-D3JWfCa2.js.map +1 -0
- package/dist/icon-container/index.d.ts +10 -0
- package/dist/icon-container/index.js +64 -0
- package/dist/icon-container/index.js.map +1 -0
- package/dist/index-0ZQzIKoE.d.ts +11 -0
- package/dist/index-B3MK1QYh.d.ts +11 -0
- package/dist/index-BJVMIPq4.d.ts +54 -0
- package/dist/index-BsV-u_jc.d.ts +4 -0
- package/dist/index-BygR7cUT.d.ts +22 -0
- package/dist/index-BzTOLSgZ.d.ts +9 -0
- package/dist/index-C15xiG9O.d.ts +14 -0
- package/dist/index-C2zco6-C.d.ts +15 -0
- package/dist/index-CIDOd4Z8.d.ts +56 -0
- package/dist/index-CQti9gFb.d.ts +49 -0
- package/dist/index-CiE-Rqit.d.ts +70 -0
- package/dist/index-D1kkOg9k.d.ts +14 -0
- package/dist/index-DLfdAked.d.ts +34 -0
- package/dist/index-DMaW_XF1.d.ts +24 -0
- package/dist/index-Db_QGr6S.d.ts +5 -0
- package/dist/index-DdFxZ3Xr.d.ts +22 -0
- package/dist/index-DfNHJF0t.d.ts +33 -0
- package/dist/index-DyQYoAUf.d.ts +29 -0
- package/dist/index-N2CBSUDu.d.ts +14 -0
- package/dist/index-PuhTRMce.d.ts +11 -0
- package/dist/index-Wb_tILYa.d.ts +24 -0
- package/dist/index-bVyqfhJS.d.ts +4 -0
- package/dist/index-x4f8gnaI.d.ts +15 -0
- package/dist/input/index.d.ts +3 -0
- package/dist/input/index.js +1 -0
- package/dist/input-Laj6dwtK.js +179 -0
- package/dist/input-Laj6dwtK.js.map +1 -0
- package/dist/input-group/index.d.ts +2 -0
- package/dist/input-group/index.js +1 -0
- package/dist/input-group-CgdazGrY.js +111 -0
- package/dist/input-group-CgdazGrY.js.map +1 -0
- package/dist/input-otp/index.d.ts +13 -0
- package/dist/input-otp/index.js +44 -0
- package/dist/input-otp/index.js.map +1 -0
- package/dist/input.types-816rEVWU.d.ts +20 -0
- package/dist/input.types-D0gyoaQv.js +48 -0
- package/dist/input.types-D0gyoaQv.js.map +1 -0
- package/dist/kbd/index.d.ts +9 -0
- package/dist/kbd/index.js +25 -0
- package/dist/kbd/index.js.map +1 -0
- package/dist/label/index.d.ts +8 -0
- package/dist/label/index.js +1 -0
- package/dist/label-BgpayDvN.js +27 -0
- package/dist/label-BgpayDvN.js.map +1 -0
- package/dist/layer-tree/index.d.ts +728 -0
- package/dist/layer-tree/index.js +685 -0
- package/dist/layer-tree/index.js.map +1 -0
- package/dist/map/google/index.d.ts +143 -0
- package/dist/map/google/index.js +445 -0
- package/dist/map/google/index.js.map +1 -0
- package/dist/map/index.d.ts +94 -0
- package/dist/map/index.js +208 -0
- package/dist/map/index.js.map +1 -0
- package/dist/map.context-Dw1D7E8m.js +11 -0
- package/dist/map.context-Dw1D7E8m.js.map +1 -0
- package/dist/menu/index.d.ts +2 -0
- package/dist/menu/index.js +1 -0
- package/dist/menu-sf13cnGp.js +173 -0
- package/dist/menu-sf13cnGp.js.map +1 -0
- package/dist/menu-tone-DWBEHoX2.js +22 -0
- package/dist/menu-tone-DWBEHoX2.js.map +1 -0
- package/dist/meter/index.d.ts +2 -0
- package/dist/meter/index.js +1 -0
- package/dist/meter-HD5taq57.js +116 -0
- package/dist/meter-HD5taq57.js.map +1 -0
- package/dist/nav-bar/index.d.ts +25 -0
- package/dist/nav-bar/index.js +133 -0
- package/dist/nav-bar/index.js.map +1 -0
- package/dist/navigation-menu/index.d.ts +43 -0
- package/dist/navigation-menu/index.js +176 -0
- package/dist/navigation-menu/index.js.map +1 -0
- package/dist/number-field/index.d.ts +14 -0
- package/dist/number-field/index.js +116 -0
- package/dist/number-field/index.js.map +1 -0
- package/dist/popover/index.d.ts +2 -0
- package/dist/popover/index.js +1 -0
- package/dist/popover-B1s4xXrX.js +114 -0
- package/dist/popover-B1s4xXrX.js.map +1 -0
- package/dist/preview-card/index.d.ts +13 -0
- package/dist/preview-card/index.js +35 -0
- package/dist/preview-card/index.js.map +1 -0
- package/dist/profile/index.d.ts +21 -0
- package/dist/profile/index.js +52 -0
- package/dist/profile/index.js.map +1 -0
- package/dist/progress/index.d.ts +23 -0
- package/dist/progress/index.js +97 -0
- package/dist/progress/index.js.map +1 -0
- package/dist/radar-ping/index.d.ts +11 -0
- package/dist/radar-ping/index.js +49 -0
- package/dist/radar-ping/index.js.map +1 -0
- package/dist/radio-group/index.d.ts +2 -0
- package/dist/radio-group/index.js +1 -0
- package/dist/radio-group-Dj43u35Z.js +47 -0
- package/dist/radio-group-Dj43u35Z.js.map +1 -0
- package/dist/resizeable/index.d.ts +11 -0
- package/dist/resizeable/index.js +31 -0
- package/dist/resizeable/index.js.map +1 -0
- package/dist/scroll-area/index.d.ts +11 -0
- package/dist/scroll-area/index.js +51 -0
- package/dist/scroll-area/index.js.map +1 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.js +1 -0
- package/dist/select-DncJXYim.js +159 -0
- package/dist/select-DncJXYim.js.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +1 -0
- package/dist/separator-DgIQp1cB.js +97 -0
- package/dist/separator-DgIQp1cB.js.map +1 -0
- package/dist/sidebar/index.d.ts +80 -0
- package/dist/sidebar/index.js +334 -0
- package/dist/sidebar/index.js.map +1 -0
- package/dist/site-header/index.d.ts +22 -0
- package/dist/site-header/index.js +55 -0
- package/dist/site-header/index.js.map +1 -0
- package/dist/skeleton/index.d.ts +4 -0
- package/dist/skeleton/index.js +1 -0
- package/dist/skeleton-DSG3FWby.js +13 -0
- package/dist/skeleton-DSG3FWby.js.map +1 -0
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.js +1 -0
- package/dist/slider-D_XlV4OW.js +114 -0
- package/dist/slider-D_XlV4OW.js.map +1 -0
- package/dist/slider-group/index.d.ts +46 -0
- package/dist/slider-group/index.js +198 -0
- package/dist/slider-group/index.js.map +1 -0
- package/dist/styles.css +4 -1
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +1 -0
- package/dist/switch-DXHixGHe.js +23 -0
- package/dist/switch-DXHixGHe.js.map +1 -0
- package/dist/table/index.d.ts +920 -0
- package/dist/table/index.js +1544 -0
- package/dist/table/index.js.map +1 -0
- package/dist/tabs/index.d.ts +2 -0
- package/dist/tabs/index.js +1 -0
- package/dist/tabs-DTC7coap.js +270 -0
- package/dist/tabs-DTC7coap.js.map +1 -0
- package/dist/text-area/index.d.ts +2 -0
- package/dist/text-area/index.js +1 -0
- package/dist/text-area-H6HjKnv_.js +50 -0
- package/dist/text-area-H6HjKnv_.js.map +1 -0
- package/dist/toast/index.d.ts +65 -0
- package/dist/toast/index.js +216 -0
- package/dist/toast/index.js.map +1 -0
- package/dist/toggle/index.d.ts +2 -0
- package/dist/toggle/index.js +1 -0
- package/dist/toggle-ZT9thVmz.js +73 -0
- package/dist/toggle-ZT9thVmz.js.map +1 -0
- package/dist/toggle-group/index.d.ts +10 -0
- package/dist/toggle-group/index.js +63 -0
- package/dist/toggle-group/index.js.map +1 -0
- package/dist/toggle-group-context-CBNZEf1I.js +6 -0
- package/dist/toggle-group-context-CBNZEf1I.js.map +1 -0
- package/dist/tooltip/index.d.ts +18 -0
- package/dist/tooltip/index.js +1 -0
- package/dist/tooltip-B6z3tDbW.js +41 -0
- package/dist/tooltip-B6z3tDbW.js.map +1 -0
- package/dist/trim-text-children-CQRFg2fL.js +33 -0
- package/dist/trim-text-children-CQRFg2fL.js.map +1 -0
- package/dist/utils/index.d.ts +4 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils-BI2x7nW5.js +5 -0
- package/dist/utils-BI2x7nW5.js.map +1 -0
- package/package.json +100 -31
- package/dist/index.d.ts +0 -8000
- package/dist/index.js +0 -17274
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { t as cn } from "./cn-BDi0DfT5.js";
|
|
2
|
+
import { n as inputVariants } from "./input.types-D0gyoaQv.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Autocomplete } from "@base-ui/react/autocomplete";
|
|
5
|
+
// src/components/autocomplete/autocomplete.tsx
|
|
6
|
+
function Autocomplete$2({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Autocomplete.Root, { ...props });
|
|
8
|
+
}
|
|
9
|
+
// src/components/autocomplete/autocomplete-collection.tsx
|
|
10
|
+
function AutocompleteCollection({ ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(Autocomplete.Collection, { ...props });
|
|
12
|
+
}
|
|
13
|
+
// src/components/autocomplete/autocomplete-content.tsx
|
|
14
|
+
const DEFAULT_SIDE_OFFSET$1 = 12;
|
|
15
|
+
function AutocompleteContent({ className, children, sideOffset = DEFAULT_SIDE_OFFSET$1, ref, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
|
|
17
|
+
className: cn("", className),
|
|
18
|
+
ref,
|
|
19
|
+
sideOffset,
|
|
20
|
+
...props,
|
|
21
|
+
children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
|
|
22
|
+
className: "max-h-[22.5rem] w-[calc(var(--anchor-width)+var(--spacing-md))] max-w-[calc(var(--available-width))] overflow-hidden rounded-xl bg-surface-2 shadow-md",
|
|
23
|
+
children: /* @__PURE__ */ jsx(Autocomplete.List, {
|
|
24
|
+
className: "max-h-[min(22.5rem,var(--available-height))] scroll-pt-[2.25rem] scroll-pb-[0.5rem] overflow-y-auto overscroll-contain data-empty:p-[0px]",
|
|
25
|
+
children
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
}) });
|
|
29
|
+
}
|
|
30
|
+
// src/components/autocomplete/autocomplete-empty.tsx
|
|
31
|
+
function AutocompleteEmpty({ className, ref, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(Autocomplete.Empty, {
|
|
33
|
+
className: cn("flex items-center gap-2xs px-sm py-xs style-text-prose--1 text-on-surface-variant empty:p-0", className),
|
|
34
|
+
ref,
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
// src/components/autocomplete/autocomplete-input-group.tsx
|
|
39
|
+
function AutocompleteInputGroup({ variant, className, ref, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsx("div", {
|
|
41
|
+
className: cn(inputVariants({ variant }), className),
|
|
42
|
+
ref,
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
// src/components/autocomplete/autocomplete-input-group-input.tsx
|
|
47
|
+
function AutocompleteInputGroupInput({ placeholder, className, ref, ...props }) {
|
|
48
|
+
return /* @__PURE__ */ jsx(Autocomplete.Input, {
|
|
49
|
+
placeholder,
|
|
50
|
+
className: cn("grow text-ellipsis outline-none placeholder:opacity-85", className),
|
|
51
|
+
ref,
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
// src/components/autocomplete/autocomplete-grid-content.tsx
|
|
56
|
+
const DEFAULT_SIDE_OFFSET = 4;
|
|
57
|
+
function AutocompleteGridContent({ placeholder = "Search…", emptyText, className, children, sideOffset = DEFAULT_SIDE_OFFSET, ref, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
|
|
59
|
+
className: cn("", className),
|
|
60
|
+
ref,
|
|
61
|
+
sideOffset,
|
|
62
|
+
...props,
|
|
63
|
+
children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
|
|
64
|
+
className: "max-h-[20.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-surface-2 shadow-lg transition-[transform,scale,opacity] [--input-container-height:3rem] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsx("div", {
|
|
67
|
+
className: "m-3xs flex h-(--input-container-height) items-center justify-center text-center",
|
|
68
|
+
children: /* @__PURE__ */ jsx(AutocompleteInputGroup, { children: /* @__PURE__ */ jsx(AutocompleteInputGroupInput, { placeholder }) })
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ jsx(Autocomplete.Empty, {
|
|
71
|
+
className: "p-sm style-text-prose--1 empty:m-[0px] empty:p-[0px]",
|
|
72
|
+
children: emptyText
|
|
73
|
+
}),
|
|
74
|
+
/* @__PURE__ */ jsx(Autocomplete.List, {
|
|
75
|
+
className: "max-h-[calc(19.5rem-var(--input-container-height))] scroll-pt-xl scroll-pb-[0.35rem] overflow-auto overscroll-contain",
|
|
76
|
+
children
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
})
|
|
80
|
+
}) });
|
|
81
|
+
}
|
|
82
|
+
// src/components/autocomplete/autocomplete-grid-item.tsx
|
|
83
|
+
function AutocompleteGridItem({ className, children, ref, ...props }) {
|
|
84
|
+
return /* @__PURE__ */ jsx(Autocomplete.Item, {
|
|
85
|
+
className: cn("group flex h-lg min-w-(--anchor-width) cursor-default items-center rounded-md style-text-prose--1 select-none hover:cursor-pointer hover:bg-accent-default hover:text-surface data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-accent-default data-highlighted:text-surface before:data-highlighted:absolute before:data-highlighted:inset-[0px] before:data-highlighted:z-[-1] before:data-highlighted:rounded-md", className),
|
|
86
|
+
ref,
|
|
87
|
+
...props,
|
|
88
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
89
|
+
className: "text-lg leading-none text-box-trim",
|
|
90
|
+
children
|
|
91
|
+
})
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
// src/components/autocomplete/autocomplete-group.tsx
|
|
95
|
+
function AutocompleteGroup({ className, ref, ...props }) {
|
|
96
|
+
return /* @__PURE__ */ jsx(Autocomplete.Group, {
|
|
97
|
+
className: cn("block space-y-3xs", className),
|
|
98
|
+
ref,
|
|
99
|
+
...props
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
// src/components/autocomplete/autocomplete-group-label.tsx
|
|
103
|
+
function AutocompleteGroupLabel({ className, ref, ...props }) {
|
|
104
|
+
return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
|
|
105
|
+
className: cn("sticky top-[0px] z-1 my-[0px] mr-[0px] ml-[3px] bg-surface-2 px-sm pt-sm pb-3xs style-text-strong--2 text-on-surface-variant", className),
|
|
106
|
+
ref,
|
|
107
|
+
...props
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
// src/components/autocomplete/autocomplete-input-group-addon.tsx
|
|
111
|
+
function AutocompleteInputGroupAddon({ className, ref, ...props }) {
|
|
112
|
+
return /* @__PURE__ */ jsx("div", {
|
|
113
|
+
className: cn("inline-flex items-center gap-xs style-text-default-0 text-on-surface-variant", className),
|
|
114
|
+
ref,
|
|
115
|
+
...props
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
// src/components/autocomplete/autocomplete-item.tsx
|
|
119
|
+
function AutocompleteItem({ className, ref, ...props }) {
|
|
120
|
+
return /* @__PURE__ */ jsx(Autocomplete.Item, {
|
|
121
|
+
className: cn("mx-xs flex cursor-default items-center rounded-lg px-2xs py-3xs style-text-prose-0 select-none first:mt-xs last:mb-xs hover:cursor-pointer hover:bg-neutral-container-high hover:text-neutral-on-container data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container before:data-highlighted:absolute before:data-highlighted:inset-x-sm before:data-highlighted:inset-y-[0px] before:data-highlighted:z-[-1] before:data-highlighted:rounded-sm", className),
|
|
122
|
+
ref,
|
|
123
|
+
...props
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
// src/components/autocomplete/autocomplete-row.tsx
|
|
127
|
+
function AutocompleteRow({ className, ref, ...props }) {
|
|
128
|
+
return /* @__PURE__ */ jsx(Autocomplete.Row, {
|
|
129
|
+
className: cn("grid grid-cols-5", className),
|
|
130
|
+
ref,
|
|
131
|
+
...props
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
// src/components/autocomplete/autocomplete-status.tsx
|
|
135
|
+
function AutocompleteStatus({ className, ref, ...props }) {
|
|
136
|
+
return /* @__PURE__ */ jsx(Autocomplete.Status, {
|
|
137
|
+
className: cn("flex items-center gap-2xs p-xs style-text-prose--1 text-on-surface-variant empty:hidden", className),
|
|
138
|
+
ref,
|
|
139
|
+
...props
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
// src/components/autocomplete/autocomplete-trigger.tsx
|
|
143
|
+
function AutocompleteTrigger({ className, ref, ...props }) {
|
|
144
|
+
return /* @__PURE__ */ jsx(Autocomplete.Trigger, {
|
|
145
|
+
className: cn("", className),
|
|
146
|
+
ref,
|
|
147
|
+
...props
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
// src/components/autocomplete/index.ts
|
|
151
|
+
const Autocomplete$1 = Object.assign(Autocomplete$2, {
|
|
152
|
+
Collection: AutocompleteCollection,
|
|
153
|
+
Content: AutocompleteContent,
|
|
154
|
+
Empty: AutocompleteEmpty,
|
|
155
|
+
GridContent: AutocompleteGridContent,
|
|
156
|
+
GridItem: AutocompleteGridItem,
|
|
157
|
+
Group: AutocompleteGroup,
|
|
158
|
+
GroupLabel: AutocompleteGroupLabel,
|
|
159
|
+
InputGroup: AutocompleteInputGroup,
|
|
160
|
+
InputGroupAddon: AutocompleteInputGroupAddon,
|
|
161
|
+
InputGroupInput: AutocompleteInputGroupInput,
|
|
162
|
+
Item: AutocompleteItem,
|
|
163
|
+
Row: AutocompleteRow,
|
|
164
|
+
Status: AutocompleteStatus,
|
|
165
|
+
Trigger: AutocompleteTrigger
|
|
166
|
+
});
|
|
167
|
+
export { AutocompleteItem as a, AutocompleteGroup as c, AutocompleteInputGroupInput as d, AutocompleteInputGroup as f, AutocompleteCollection as h, AutocompleteRow as i, AutocompleteGridItem as l, AutocompleteContent as m, AutocompleteTrigger as n, AutocompleteInputGroupAddon as o, AutocompleteEmpty as p, AutocompleteStatus as r, AutocompleteGroupLabel as s, Autocomplete$1 as t, AutocompleteGridContent as u };
|
|
168
|
+
|
|
169
|
+
//# sourceMappingURL=autocomplete-BfpWVO1l.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-BfpWVO1l.js","names":["Autocomplete","BaseAutocomplete","BaseAutocomplete","DEFAULT_SIDE_OFFSET","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","BaseAutocomplete","Autocomplete","AutocompleteRoot"],"sources":["../src/components/autocomplete/autocomplete.tsx","../src/components/autocomplete/autocomplete-collection.tsx","../src/components/autocomplete/autocomplete-content.tsx","../src/components/autocomplete/autocomplete-empty.tsx","../src/components/autocomplete/autocomplete-input-group.tsx","../src/components/autocomplete/autocomplete-input-group-input.tsx","../src/components/autocomplete/autocomplete-grid-content.tsx","../src/components/autocomplete/autocomplete-grid-item.tsx","../src/components/autocomplete/autocomplete-group.tsx","../src/components/autocomplete/autocomplete-group-label.tsx","../src/components/autocomplete/autocomplete-input-group-addon.tsx","../src/components/autocomplete/autocomplete-item.tsx","../src/components/autocomplete/autocomplete-row.tsx","../src/components/autocomplete/autocomplete-status.tsx","../src/components/autocomplete/autocomplete-trigger.tsx","../src/components/autocomplete/index.ts"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport type { AutocompleteProps } from './autocomplete.types'\n\nexport function Autocomplete({ ...props }: AutocompleteProps) {\n return <BaseAutocomplete.Root {...props} />\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport type { AutocompleteCollectionProps } from './autocomplete.types'\n\nexport function AutocompleteCollection({ ...props }: AutocompleteCollectionProps) {\n return <BaseAutocomplete.Collection {...props} />\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteContentProps } from './autocomplete.types'\n\nconst DEFAULT_SIDE_OFFSET = 12\n\nexport function AutocompleteContent({\n className,\n children,\n sideOffset = DEFAULT_SIDE_OFFSET,\n ref,\n ...props\n}: AutocompleteContentProps) {\n return (\n <BaseAutocomplete.Portal>\n <BaseAutocomplete.Positioner\n className={cn('', className)}\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <BaseAutocomplete.Popup className=\"max-h-[22.5rem] w-[calc(var(--anchor-width)+var(--spacing-md))] max-w-[calc(var(--available-width))] overflow-hidden rounded-xl bg-surface-2 shadow-md\">\n <BaseAutocomplete.List className=\"max-h-[min(22.5rem,var(--available-height))] scroll-pt-[2.25rem] scroll-pb-[0.5rem] overflow-y-auto overscroll-contain data-empty:p-[0px]\">\n {children}\n </BaseAutocomplete.List>\n </BaseAutocomplete.Popup>\n </BaseAutocomplete.Positioner>\n </BaseAutocomplete.Portal>\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils'\n\nimport type { AutocompleteEmptyProps } from './autocomplete.types'\n\nexport function AutocompleteEmpty({ className, ref, ...props }: AutocompleteEmptyProps) {\n return (\n <BaseAutocomplete.Empty\n className={cn(\n 'flex items-center gap-2xs px-sm py-xs style-text-prose--1 text-on-surface-variant empty:p-0',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { inputVariants } from '../input/input.types'\nimport type { AutocompleteInputGroupProps } from './autocomplete.types'\n\nexport function AutocompleteInputGroup({\n variant,\n className,\n ref,\n ...props\n}: AutocompleteInputGroupProps) {\n return <div className={cn(inputVariants({ variant }), className)} ref={ref} {...props} />\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteInputGroupInputProps } from './autocomplete.types'\n\nexport function AutocompleteInputGroupInput({\n placeholder,\n className,\n ref,\n ...props\n}: AutocompleteInputGroupInputProps) {\n return (\n <BaseAutocomplete.Input\n placeholder={placeholder}\n className={cn('grow text-ellipsis outline-none placeholder:opacity-85', className)}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport { AutocompleteInputGroup } from './autocomplete-input-group'\nimport { AutocompleteInputGroupInput } from './autocomplete-input-group-input'\nimport type { AutocompleteGridContentProps } from './autocomplete.types'\n\nconst DEFAULT_SIDE_OFFSET = 4\n\nexport function AutocompleteGridContent({\n placeholder = 'Search…',\n emptyText,\n className,\n children,\n sideOffset = DEFAULT_SIDE_OFFSET,\n ref,\n ...props\n}: AutocompleteGridContentProps) {\n return (\n <BaseAutocomplete.Portal>\n <BaseAutocomplete.Positioner\n className={cn('', className)}\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <BaseAutocomplete.Popup className=\"max-h-[20.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-surface-2 shadow-lg transition-[transform,scale,opacity] [--input-container-height:3rem] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\">\n <div className=\"m-3xs flex h-(--input-container-height) items-center justify-center text-center\">\n <AutocompleteInputGroup>\n <AutocompleteInputGroupInput placeholder={placeholder} />\n </AutocompleteInputGroup>\n </div>\n <BaseAutocomplete.Empty className=\"p-sm style-text-prose--1 empty:m-[0px] empty:p-[0px]\">\n {emptyText}\n </BaseAutocomplete.Empty>\n <BaseAutocomplete.List className=\"max-h-[calc(19.5rem-var(--input-container-height))] scroll-pt-xl scroll-pb-[0.35rem] overflow-auto overscroll-contain\">\n {children}\n </BaseAutocomplete.List>\n </BaseAutocomplete.Popup>\n </BaseAutocomplete.Positioner>\n </BaseAutocomplete.Portal>\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteGridItemProps } from './autocomplete.types'\n\nexport function AutocompleteGridItem({\n className,\n children,\n ref,\n ...props\n}: AutocompleteGridItemProps) {\n return (\n <BaseAutocomplete.Item\n className={cn(\n 'group flex h-lg min-w-(--anchor-width) cursor-default items-center rounded-md style-text-prose--1 select-none hover:cursor-pointer hover:bg-accent-default hover:text-surface data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-accent-default data-highlighted:text-surface before:data-highlighted:absolute before:data-highlighted:inset-[0px] before:data-highlighted:z-[-1] before:data-highlighted:rounded-md',\n className,\n )}\n ref={ref}\n {...props}\n >\n <span className=\"text-lg leading-none text-box-trim\">{children}</span>\n </BaseAutocomplete.Item>\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteGroupProps } from './autocomplete.types'\n\nexport function AutocompleteGroup({ className, ref, ...props }: AutocompleteGroupProps) {\n return (\n <BaseAutocomplete.Group className={cn('block space-y-3xs', className)} ref={ref} {...props} />\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteGroupProps } from './autocomplete.types'\n\nexport function AutocompleteGroupLabel({ className, ref, ...props }: AutocompleteGroupProps) {\n return (\n <BaseAutocomplete.GroupLabel\n className={cn(\n 'sticky top-[0px] z-1 my-[0px] mr-[0px] ml-[3px] bg-surface-2 px-sm pt-sm pb-3xs style-text-strong--2 text-on-surface-variant',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { AutocompleteInputGroupAddonProps } from './autocomplete.types'\n\nexport function AutocompleteInputGroupAddon({\n className,\n ref,\n ...props\n}: AutocompleteInputGroupAddonProps) {\n return (\n <div\n className={cn(\n 'inline-flex items-center gap-xs style-text-default-0 text-on-surface-variant',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteItemProps } from './autocomplete.types'\n\nexport function AutocompleteItem({ className, ref, ...props }: AutocompleteItemProps) {\n return (\n <BaseAutocomplete.Item\n className={cn(\n 'mx-xs flex cursor-default items-center rounded-lg px-2xs py-3xs style-text-prose-0 select-none first:mt-xs last:mb-xs hover:cursor-pointer hover:bg-neutral-container-high hover:text-neutral-on-container data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container before:data-highlighted:absolute before:data-highlighted:inset-x-sm before:data-highlighted:inset-y-[0px] before:data-highlighted:z-[-1] before:data-highlighted:rounded-sm',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteRowProps } from './autocomplete.types'\n\nexport function AutocompleteRow({ className, ref, ...props }: AutocompleteRowProps) {\n return <BaseAutocomplete.Row className={cn('grid grid-cols-5', className)} ref={ref} {...props} />\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteStatusProps } from './autocomplete.types'\n\nexport function AutocompleteStatus({ className, ref, ...props }: AutocompleteStatusProps) {\n return (\n <BaseAutocomplete.Status\n className={cn(\n 'flex items-center gap-2xs p-xs style-text-prose--1 text-on-surface-variant empty:hidden',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AutocompleteTriggerProps } from './autocomplete.types'\n\nexport function AutocompleteTrigger({ className, ref, ...props }: AutocompleteTriggerProps) {\n return <BaseAutocomplete.Trigger className={cn('', className)} ref={ref} {...props} />\n}\n","import { Autocomplete as AutocompleteRoot } from './autocomplete'\nimport { AutocompleteCollection } from './autocomplete-collection'\nimport { AutocompleteContent } from './autocomplete-content'\nimport { AutocompleteEmpty } from './autocomplete-empty'\nimport { AutocompleteGridContent } from './autocomplete-grid-content'\nimport { AutocompleteGridItem } from './autocomplete-grid-item'\nimport { AutocompleteGroup } from './autocomplete-group'\nimport { AutocompleteGroupLabel } from './autocomplete-group-label'\nimport { AutocompleteInputGroup } from './autocomplete-input-group'\nimport { AutocompleteInputGroupAddon } from './autocomplete-input-group-addon'\nimport { AutocompleteInputGroupInput } from './autocomplete-input-group-input'\nimport { AutocompleteItem } from './autocomplete-item'\nimport { AutocompleteRow } from './autocomplete-row'\nimport { AutocompleteStatus } from './autocomplete-status'\nimport { AutocompleteTrigger } from './autocomplete-trigger'\n\nconst Autocomplete = Object.assign(AutocompleteRoot, {\n Collection: AutocompleteCollection,\n Content: AutocompleteContent,\n Empty: AutocompleteEmpty,\n GridContent: AutocompleteGridContent,\n GridItem: AutocompleteGridItem,\n Group: AutocompleteGroup,\n GroupLabel: AutocompleteGroupLabel,\n InputGroup: AutocompleteInputGroup,\n InputGroupAddon: AutocompleteInputGroupAddon,\n InputGroupInput: AutocompleteInputGroupInput,\n Item: AutocompleteItem,\n Row: AutocompleteRow,\n Status: AutocompleteStatus,\n Trigger: AutocompleteTrigger,\n})\n\nexport type {\n AutocompleteCollectionProps,\n AutocompleteContentProps,\n AutocompleteEmptyProps,\n AutocompleteGridContentProps,\n AutocompleteGridItemProps,\n AutocompleteGroupLabelProps,\n AutocompleteGroupProps,\n AutocompleteInputGroupAddonProps,\n AutocompleteInputGroupInputProps,\n AutocompleteInputGroupProps,\n AutocompleteItemProps,\n AutocompleteProps,\n AutocompleteRowProps,\n AutocompleteStatusProps,\n AutocompleteTriggerProps,\n} from './autocomplete.types'\nexport { AutocompleteCollection } from './autocomplete-collection'\nexport { AutocompleteContent } from './autocomplete-content'\nexport { AutocompleteEmpty } from './autocomplete-empty'\nexport { AutocompleteGridContent } from './autocomplete-grid-content'\nexport { AutocompleteGridItem } from './autocomplete-grid-item'\nexport { AutocompleteGroup } from './autocomplete-group'\nexport { AutocompleteGroupLabel } from './autocomplete-group-label'\nexport { AutocompleteInputGroup } from './autocomplete-input-group'\nexport { AutocompleteInputGroupAddon } from './autocomplete-input-group-addon'\nexport { AutocompleteInputGroupInput } from './autocomplete-input-group-input'\nexport { AutocompleteItem } from './autocomplete-item'\nexport { AutocompleteRow } from './autocomplete-row'\nexport { AutocompleteStatus } from './autocomplete-status'\nexport { AutocompleteTrigger } from './autocomplete-trigger'\n\nexport { Autocomplete }\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as AvatarBadgeProps, c as AvatarProps, i as AvatarBadge, n as AvatarImage, o as AvatarFallbackProps, r as AvatarFallback, s as AvatarImageProps, t as Avatar } from "../index-DMaW_XF1.js";
|
|
2
|
+
export { Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { t as Avatar, i as AvatarBadge, r as AvatarFallback, n as AvatarImage } from "../avatar-Bp4gZh21.js";
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { t as cn } from "./cn-BDi0DfT5.js";
|
|
2
|
+
import { t as Skeleton } from "./skeleton-DSG3FWby.js";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { Avatar } from "@base-ui/react/avatar";
|
|
7
|
+
// src/components/avatar/avatar.types.ts
|
|
8
|
+
const avatarVariants = cva("group/avatar relative inline-flex shrink-0 items-center justify-center rounded-full", {
|
|
9
|
+
defaultVariants: { size: "medium" },
|
|
10
|
+
variants: { size: {
|
|
11
|
+
large: "size-3xl style-text-default-1",
|
|
12
|
+
medium: "size-2xl style-text-default-0",
|
|
13
|
+
small: "size-xl style-text-default--1"
|
|
14
|
+
} }
|
|
15
|
+
});
|
|
16
|
+
const avatarBadgeVariants = cva("absolute right-0 bottom-0 inline-flex items-center justify-center rounded-full outline-3 outline-surface-background group-data-[size=large]/avatar:size-md group-data-[size=medium]/avatar:size-sm group-data-[size=small]/avatar:size-xs group-data-[size=large]/avatar:[&_svg]:size-sm group-data-[size=medium]/avatar:[&_svg]:size-xs group-data-[size=small]/avatar:[&_svg]:size-2xs", {
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
position: "bottomRight",
|
|
19
|
+
tone: "success"
|
|
20
|
+
},
|
|
21
|
+
variants: {
|
|
22
|
+
position: {
|
|
23
|
+
bottomLeft: "bottom-px left-px",
|
|
24
|
+
bottomRight: "right-px bottom-px",
|
|
25
|
+
topLeft: "top-px left-px",
|
|
26
|
+
topRight: "top-px right-px"
|
|
27
|
+
},
|
|
28
|
+
tone: {
|
|
29
|
+
accent: "bg-accent-default [&>svg]:text-accent-on-default",
|
|
30
|
+
brand: "bg-brand-default [&>svg]:text-brand-on-default",
|
|
31
|
+
error: "bg-error-default [&>svg]:text-error-on-default",
|
|
32
|
+
info: "bg-info-default [&>svg]:text-info-on-default",
|
|
33
|
+
neutral: "bg-neutral-default [&>svg]:text-neutral-on-default",
|
|
34
|
+
success: "bg-success-default [&>svg]:text-success-on-default",
|
|
35
|
+
warning: "bg-warning-default [&>svg]:text-warning-on-default"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
// src/components/avatar/avatar.tsx
|
|
40
|
+
function Avatar$2({ size = "medium", className, ref, ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsx(Avatar.Root, {
|
|
42
|
+
className: cn(avatarVariants({
|
|
43
|
+
className,
|
|
44
|
+
size
|
|
45
|
+
})),
|
|
46
|
+
"data-size": size,
|
|
47
|
+
"data-slot": "avatar",
|
|
48
|
+
ref,
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
// src/components/avatar/avatar-badge.tsx
|
|
53
|
+
function AvatarBadge({ tone, position, className, ref, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx("div", {
|
|
55
|
+
"data-slot": "avatar-badge",
|
|
56
|
+
className: cn(avatarBadgeVariants({
|
|
57
|
+
className,
|
|
58
|
+
position,
|
|
59
|
+
tone
|
|
60
|
+
})),
|
|
61
|
+
ref,
|
|
62
|
+
...props
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
// src/components/avatar/avatar-fallback.tsx
|
|
66
|
+
function AvatarFallback({ className, ref, ...props }) {
|
|
67
|
+
return /* @__PURE__ */ jsx(Avatar.Fallback, {
|
|
68
|
+
className: cn("flex size-full items-center justify-center rounded-full bg-surface-3 align-middle shadow-2xs select-none", className),
|
|
69
|
+
"data-slot": "avatar-fallback",
|
|
70
|
+
ref,
|
|
71
|
+
...props
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
// src/components/avatar/avatar-image.tsx
|
|
75
|
+
function AvatarImage({ className, ref, ...props }) {
|
|
76
|
+
const [status, setStatus] = React.useState("loading");
|
|
77
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [status === "loading" && /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0 size-full rounded-full" }), /* @__PURE__ */ jsx(Avatar.Image, {
|
|
78
|
+
onLoadingStatusChange: setStatus,
|
|
79
|
+
className: cn("size-full rounded-full object-cover", className),
|
|
80
|
+
"data-slot": "avatar-image",
|
|
81
|
+
ref,
|
|
82
|
+
...props
|
|
83
|
+
})] });
|
|
84
|
+
}
|
|
85
|
+
// src/components/avatar/index.ts
|
|
86
|
+
const Avatar$1 = Object.assign(Avatar$2, {
|
|
87
|
+
Badge: AvatarBadge,
|
|
88
|
+
Fallback: AvatarFallback,
|
|
89
|
+
Image: AvatarImage
|
|
90
|
+
});
|
|
91
|
+
export { AvatarBadge as i, AvatarImage as n, AvatarFallback as r, Avatar$1 as t };
|
|
92
|
+
|
|
93
|
+
//# sourceMappingURL=avatar-Bp4gZh21.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-Bp4gZh21.js","names":["Avatar","BaseAvatar","BaseAvatar","BaseAvatar","Avatar","AvatarRoot"],"sources":["../src/components/avatar/avatar.types.ts","../src/components/avatar/avatar.tsx","../src/components/avatar/avatar-badge.tsx","../src/components/avatar/avatar-fallback.tsx","../src/components/avatar/avatar-image.tsx","../src/components/avatar/index.ts"],"sourcesContent":["import type { Avatar as BaseAvatar } from '@base-ui/react/avatar'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nconst avatarVariants = cva(\n 'group/avatar relative inline-flex shrink-0 items-center justify-center rounded-full',\n {\n defaultVariants: {\n size: 'medium',\n },\n variants: {\n size: {\n large: 'size-3xl style-text-default-1',\n medium: 'size-2xl style-text-default-0',\n small: 'size-xl style-text-default--1',\n },\n },\n },\n ),\n avatarBadgeVariants = cva(\n 'absolute right-0 bottom-0 inline-flex items-center justify-center rounded-full outline-3 outline-surface-background group-data-[size=large]/avatar:size-md group-data-[size=medium]/avatar:size-sm group-data-[size=small]/avatar:size-xs group-data-[size=large]/avatar:[&_svg]:size-sm group-data-[size=medium]/avatar:[&_svg]:size-xs group-data-[size=small]/avatar:[&_svg]:size-2xs',\n {\n defaultVariants: {\n position: 'bottomRight',\n tone: 'success',\n },\n variants: {\n position: {\n bottomLeft: 'bottom-px left-px',\n bottomRight: 'right-px bottom-px',\n topLeft: 'top-px left-px',\n topRight: 'top-px right-px',\n },\n tone: {\n accent: 'bg-accent-default [&>svg]:text-accent-on-default',\n brand: 'bg-brand-default [&>svg]:text-brand-on-default',\n error: 'bg-error-default [&>svg]:text-error-on-default',\n info: 'bg-info-default [&>svg]:text-info-on-default',\n neutral: 'bg-neutral-default [&>svg]:text-neutral-on-default',\n success: 'bg-success-default [&>svg]:text-success-on-default',\n warning: 'bg-warning-default [&>svg]:text-warning-on-default',\n },\n },\n },\n )\n\ntype AvatarProps = ComponentProps<typeof BaseAvatar.Root> & VariantProps<typeof avatarVariants>\ntype AvatarImageProps = ComponentProps<typeof BaseAvatar.Image>\ntype AvatarFallbackProps = ComponentProps<typeof BaseAvatar.Fallback>\ntype AvatarBadgeProps = ComponentProps<'div'> & VariantProps<typeof avatarBadgeVariants>\n\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps, AvatarBadgeProps }\nexport { avatarVariants, avatarBadgeVariants }\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\n\nimport { cn } from '@/utils/cn'\n\nimport { avatarVariants } from './avatar.types'\nimport type { AvatarProps } from './avatar.types'\n\nexport function Avatar({ size = 'medium', className, ref, ...props }: AvatarProps) {\n return (\n <BaseAvatar.Root\n className={cn(avatarVariants({ className, size }))}\n data-size={size}\n data-slot=\"avatar\"\n ref={ref}\n {...props}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { avatarBadgeVariants } from './avatar.types'\nimport type { AvatarBadgeProps } from './avatar.types'\n\nexport function AvatarBadge({ tone, position, className, ref, ...props }: AvatarBadgeProps) {\n return (\n <div\n data-slot=\"avatar-badge\"\n className={cn(avatarBadgeVariants({ className, position, tone }))}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\n\nimport { cn } from '@/utils/cn'\n\nimport type { AvatarFallbackProps } from './avatar.types'\n\nexport function AvatarFallback({ className, ref, ...props }: AvatarFallbackProps) {\n return (\n <BaseAvatar.Fallback\n className={cn(\n 'flex size-full items-center justify-center rounded-full bg-surface-3 align-middle shadow-2xs select-none',\n className,\n )}\n data-slot=\"avatar-fallback\"\n ref={ref}\n {...props}\n />\n )\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\nimport type { ImageLoadingStatus } from '@base-ui/react/avatar'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Skeleton } from '../skeleton'\nimport type { AvatarImageProps } from './avatar.types'\n\nexport function AvatarImage({ className, ref, ...props }: AvatarImageProps) {\n const [status, setStatus] = React.useState<ImageLoadingStatus>('loading')\n\n return (\n <>\n {status === 'loading' && <Skeleton className=\"absolute inset-0 size-full rounded-full\" />}\n <BaseAvatar.Image\n onLoadingStatusChange={setStatus}\n className={cn('size-full rounded-full object-cover', className)}\n data-slot=\"avatar-image\"\n ref={ref}\n {...props}\n />\n </>\n )\n}\n","import { Avatar as AvatarRoot } from './avatar'\nimport { AvatarBadge } from './avatar-badge'\nimport { AvatarFallback } from './avatar-fallback'\nimport { AvatarImage } from './avatar-image'\n\nconst Avatar = Object.assign(AvatarRoot, {\n Badge: AvatarBadge,\n Fallback: AvatarFallback,\n Image: AvatarImage,\n})\n\nexport type {\n AvatarBadgeProps,\n AvatarFallbackProps,\n AvatarImageProps,\n AvatarProps,\n} from './avatar.types'\nexport { AvatarFallback } from './avatar-fallback'\nexport { AvatarImage } from './avatar-image'\nexport { AvatarBadge } from './avatar-badge'\n\nexport { Avatar }\n"],"mappings":";;;;;;;AAKA,MAAM,iBAAiB,IACnB,uFACA;CACE,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CACF;AACA,MAAA,sBAAsB,IACpB,4XACA;CACE,iBAAiB;EACf,UAAU;EACV,MAAM;CACR;CACA,UAAU;EACR,UAAU;GACR,YAAY;GACZ,aAAa;GACb,SAAS;GACT,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;CACF;AACF,CACF;;ACtCF,SAAgBA,SAAO,EAAE,OAAO,UAAU,WAAW,KAAK,GAAG,SAAsB;CACjF,OACE,oBAACC,OAAW,MAAZ;EACE,WAAW,GAAG,eAAe;GAAE;GAAW;EAAK,CAAC,CAAC;EACjD,aAAW;EACX,aAAU;EACL;EACL,GAAI;CACL,CAAA;AAEL;;ACZA,SAAgB,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,GAAG,SAA2B;CAC1F,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB;GAAE;GAAW;GAAU;EAAK,CAAC,CAAC;EAC3D;EACL,GAAI;CACL,CAAA;AAEL;;ACRA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAACC,OAAW,UAAZ;EACE,WAAW,GACT,4GACA,SACF;EACA,aAAU;EACL;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,SAAgB,YAAY,EAAE,WAAW,KAAK,GAAG,SAA2B;CAC1E,MAAM,CAAC,QAAQ,aAAa,MAAM,SAA6B,SAAS;CAExE,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,WAAW,aAAa,oBAAC,UAAD,EAAU,WAAU,0CAA2C,CAAA,GACxF,oBAACC,OAAW,OAAZ;EACE,uBAAuB;EACvB,WAAW,GAAG,uCAAuC,SAAS;EAC9D,aAAU;EACL;EACL,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN;;ACnBA,MAAMC,WAAS,OAAO,OAAOC,UAAY;CACvC,OAAO;CACP,UAAU;CACV,OAAO;AACT,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { t as Badge } from "../badge-Cl-9WTW-.js";
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import { t as cn } from "./cn-BDi0DfT5.js";
|
|
2
|
+
import { t as hasSingleElementChild } from "./has-single-element-child-DLGI0Dh2.js";
|
|
3
|
+
import { t as trimTextChildren } from "./trim-text-children-CQRFg2fL.js";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
// src/components/badge/badge.types.ts
|
|
7
|
+
const badgeVariants = cva("inline-flex h-md items-center justify-center gap-3xs rounded-full font-body font-medium whitespace-nowrap transition-all select-none [&>svg]:shrink-0", {
|
|
8
|
+
compoundVariants: [
|
|
9
|
+
{
|
|
10
|
+
className: "bg-brand-default text-brand-on-default",
|
|
11
|
+
tone: "brand",
|
|
12
|
+
variant: "fill"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
className: "bg-accent-default text-accent-on-default",
|
|
16
|
+
tone: "accent",
|
|
17
|
+
variant: "fill"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
className: "bg-neutral-default text-neutral-on-default",
|
|
21
|
+
tone: "neutral",
|
|
22
|
+
variant: "fill"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
className: "bg-error-default text-error-on-default",
|
|
26
|
+
tone: "error",
|
|
27
|
+
variant: "fill"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
className: "bg-info-default text-info-on-default",
|
|
31
|
+
tone: "info",
|
|
32
|
+
variant: "fill"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
className: "bg-success-default text-success-on-default",
|
|
36
|
+
tone: "success",
|
|
37
|
+
variant: "fill"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
className: "bg-warning-default text-warning-on-default",
|
|
41
|
+
tone: "warning",
|
|
42
|
+
variant: "fill"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
className: "border-brand-default text-brand-default",
|
|
46
|
+
tone: "brand",
|
|
47
|
+
variant: "outline"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
className: "border-accent-default text-accent-default",
|
|
51
|
+
tone: "accent",
|
|
52
|
+
variant: "outline"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
className: "border-neutral-default text-neutral-default",
|
|
56
|
+
tone: "neutral",
|
|
57
|
+
variant: "outline"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
className: "border-error-default text-error-default",
|
|
61
|
+
tone: "error",
|
|
62
|
+
variant: "outline"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
className: "border-info-default text-info-default",
|
|
66
|
+
tone: "info",
|
|
67
|
+
variant: "outline"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
className: "border-success-default text-success-default",
|
|
71
|
+
tone: "success",
|
|
72
|
+
variant: "outline"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
className: "border-warning-default text-warning-default",
|
|
76
|
+
tone: "warning",
|
|
77
|
+
variant: "outline"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
className: "border-brand-border bg-brand-container text-brand-on-container",
|
|
81
|
+
tone: "brand",
|
|
82
|
+
variant: "soft"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
className: "border-accent-border bg-accent-container text-accent-on-container",
|
|
86
|
+
tone: "accent",
|
|
87
|
+
variant: "soft"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
className: "border-neutral-border bg-neutral-container text-neutral-on-container",
|
|
91
|
+
tone: "neutral",
|
|
92
|
+
variant: "soft"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
className: "border-error-border bg-error-container text-error-on-container",
|
|
96
|
+
tone: "error",
|
|
97
|
+
variant: "soft"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
className: "border-info-border bg-info-container text-info-on-container",
|
|
101
|
+
tone: "info",
|
|
102
|
+
variant: "soft"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
className: "border-success-border bg-success-container text-success-on-container",
|
|
106
|
+
tone: "success",
|
|
107
|
+
variant: "soft"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
className: "border-warning-border bg-warning-container text-warning-on-container",
|
|
111
|
+
tone: "warning",
|
|
112
|
+
variant: "soft"
|
|
113
|
+
}
|
|
114
|
+
],
|
|
115
|
+
defaultVariants: {
|
|
116
|
+
size: "medium",
|
|
117
|
+
tone: "brand",
|
|
118
|
+
variant: "fill"
|
|
119
|
+
},
|
|
120
|
+
variants: {
|
|
121
|
+
size: {
|
|
122
|
+
large: "h-lg px-xs text-sm leading-none [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-sm",
|
|
123
|
+
medium: "h-md px-xs text-xs leading-none [&:where([data-icon-only]:has(>svg:only-child))]:size-md [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-xs"
|
|
124
|
+
},
|
|
125
|
+
tone: {
|
|
126
|
+
accent: "",
|
|
127
|
+
brand: "",
|
|
128
|
+
error: "",
|
|
129
|
+
info: "",
|
|
130
|
+
neutral: "",
|
|
131
|
+
success: "",
|
|
132
|
+
warning: ""
|
|
133
|
+
},
|
|
134
|
+
variant: {
|
|
135
|
+
fill: "shadow-2xs",
|
|
136
|
+
outline: "border",
|
|
137
|
+
soft: "border"
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
// src/components/badge/badge.tsx
|
|
142
|
+
function Badge({ className, size, tone, variant, ref, children, ...props }) {
|
|
143
|
+
let iconOnly = void 0;
|
|
144
|
+
if (hasSingleElementChild(children)) iconOnly = "";
|
|
145
|
+
return /* @__PURE__ */ jsx("div", {
|
|
146
|
+
"data-icon-only": iconOnly,
|
|
147
|
+
className: cn(badgeVariants({
|
|
148
|
+
className,
|
|
149
|
+
size,
|
|
150
|
+
tone,
|
|
151
|
+
variant
|
|
152
|
+
})),
|
|
153
|
+
ref,
|
|
154
|
+
...props,
|
|
155
|
+
children: trimTextChildren(children)
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
export { Badge as t };
|
|
159
|
+
|
|
160
|
+
//# sourceMappingURL=badge-Cl-9WTW-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge-Cl-9WTW-.js","names":[],"sources":["../src/components/badge/badge.types.ts","../src/components/badge/badge.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nexport const badgeVariants = cva(\n 'inline-flex h-md items-center justify-center gap-3xs rounded-full font-body font-medium whitespace-nowrap transition-all select-none [&>svg]:shrink-0',\n {\n compoundVariants: [\n {\n className: 'bg-brand-default text-brand-on-default',\n tone: 'brand',\n variant: 'fill',\n },\n {\n className: 'bg-accent-default text-accent-on-default',\n tone: 'accent',\n variant: 'fill',\n },\n {\n className: 'bg-neutral-default text-neutral-on-default',\n tone: 'neutral',\n variant: 'fill',\n },\n {\n className: 'bg-error-default text-error-on-default',\n tone: 'error',\n variant: 'fill',\n },\n {\n className: 'bg-info-default text-info-on-default',\n tone: 'info',\n variant: 'fill',\n },\n {\n className: 'bg-success-default text-success-on-default',\n tone: 'success',\n variant: 'fill',\n },\n {\n className: 'bg-warning-default text-warning-on-default',\n tone: 'warning',\n variant: 'fill',\n },\n {\n className: 'border-brand-default text-brand-default',\n tone: 'brand',\n variant: 'outline',\n },\n {\n className: 'border-accent-default text-accent-default',\n tone: 'accent',\n variant: 'outline',\n },\n {\n className: 'border-neutral-default text-neutral-default',\n tone: 'neutral',\n variant: 'outline',\n },\n {\n className: 'border-error-default text-error-default',\n tone: 'error',\n variant: 'outline',\n },\n {\n className: 'border-info-default text-info-default',\n tone: 'info',\n variant: 'outline',\n },\n {\n className: 'border-success-default text-success-default',\n tone: 'success',\n variant: 'outline',\n },\n {\n className: 'border-warning-default text-warning-default',\n tone: 'warning',\n variant: 'outline',\n },\n {\n className: 'border-brand-border bg-brand-container text-brand-on-container',\n tone: 'brand',\n variant: 'soft',\n },\n {\n className: 'border-accent-border bg-accent-container text-accent-on-container',\n tone: 'accent',\n variant: 'soft',\n },\n {\n className: 'border-neutral-border bg-neutral-container text-neutral-on-container',\n tone: 'neutral',\n variant: 'soft',\n },\n {\n className: 'border-error-border bg-error-container text-error-on-container',\n tone: 'error',\n variant: 'soft',\n },\n {\n className: 'border-info-border bg-info-container text-info-on-container',\n tone: 'info',\n variant: 'soft',\n },\n {\n className: 'border-success-border bg-success-container text-success-on-container',\n tone: 'success',\n variant: 'soft',\n },\n {\n className: 'border-warning-border bg-warning-container text-warning-on-container',\n tone: 'warning',\n variant: 'soft',\n },\n ],\n defaultVariants: {\n size: 'medium',\n tone: 'brand',\n variant: 'fill',\n },\n variants: {\n size: {\n large:\n 'h-lg px-xs text-sm leading-none [&:where([data-icon-only]:has(>svg:only-child))]:size-lg [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-sm',\n medium:\n 'h-md px-xs text-xs leading-none [&:where([data-icon-only]:has(>svg:only-child))]:size-md [&:where([data-icon-only]:has(>svg:only-child))]:p-0 [&>svg]:size-[1em] [&[data-icon-only]>svg:only-child]:size-xs',\n },\n tone: {\n accent: '',\n brand: '',\n error: '',\n info: '',\n neutral: '',\n success: '',\n warning: '',\n },\n variant: {\n fill: 'shadow-2xs',\n outline: 'border',\n soft: 'border',\n },\n },\n },\n)\n\nexport type BadgeProps = ComponentProps<'div'> & VariantProps<typeof badgeVariants>\n","import { cn } from '@/utils/cn'\nimport { hasSingleElementChild } from '@/utils/has-single-element-child'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport { badgeVariants } from './badge.types'\nimport type { BadgeProps } from './badge.types'\n\nexport function Badge({ className, size, tone, variant, ref, children, ...props }: BadgeProps) {\n let iconOnly: '' | undefined = undefined\n\n if (hasSingleElementChild(children)) {\n iconOnly = ''\n }\n\n return (\n <div\n data-icon-only={iconOnly}\n className={cn(badgeVariants({ className, size, tone, variant }))}\n ref={ref}\n {...props}\n >\n {trimTextChildren(children)}\n </div>\n )\n}\n"],"mappings":";;;;;;AAIA,MAAa,gBAAgB,IAC3B,yJACA;CACE,kBAAkB;EAChB;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OACE;GACF,QACE;EACJ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,MAAM;GACN,SAAS;GACT,MAAM;EACR;CACF;AACF,CACF;;ACvIA,SAAgB,MAAM,EAAE,WAAW,MAAM,MAAM,SAAS,KAAK,UAAU,GAAG,SAAqB;CAC7F,IAAI,WAA2B,KAAA;CAE/B,IAAI,sBAAsB,QAAQ,GAChC,WAAW;CAGb,OACE,oBAAC,OAAD;EACE,kBAAgB;EAChB,WAAW,GAAG,cAAc;GAAE;GAAW;GAAM;GAAM;EAAQ,CAAC,CAAC;EAC1D;EACL,GAAI;EAEH,UAAA,iBAAiB,QAAQ;CACvB,CAAA;AAET"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
declare const bentoBoxVariants: (props?: ({
|
|
3
|
+
elevation?: "high" | "low" | "medium" | "none" | "veryHigh" | null | undefined;
|
|
4
|
+
fill?: boolean | null | undefined;
|
|
5
|
+
size?: "large" | "medium" | "small" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
type BentoBoxProps = React.ComponentProps<'div'> & VariantProps<typeof bentoBoxVariants>;
|
|
8
|
+
type BentoBoxHeaderProps = React.ComponentProps<'div'>;
|
|
9
|
+
type BentoBoxTitleProps = React.ComponentProps<'span'>;
|
|
10
|
+
type BentoBoxContentProps = React.ComponentProps<'div'>;
|
|
11
|
+
type BentoBoxDescriptionProps = React.ComponentProps<'span'>;
|
|
12
|
+
type BentoBoxActionProps = React.ComponentProps<'div'>;
|
|
13
|
+
type BentoBoxFooterProps = React.ComponentProps<'div'>;
|
|
14
|
+
declare function BentoBox$1({ elevation, fill, size, className, ref, ...props }: BentoBoxProps): import("react").JSX.Element;
|
|
15
|
+
export declare function BentoBoxAction({ className, ref, ...props }: BentoBoxActionProps): import("react").JSX.Element;
|
|
16
|
+
export declare function BentoBoxContent({ className, ref, ...props }: BentoBoxContentProps): import("react").JSX.Element;
|
|
17
|
+
export declare function BentoBoxDescription({ className, ref, ...props }: BentoBoxDescriptionProps): import("react").JSX.Element;
|
|
18
|
+
export declare function BentoBoxFooter({ className, ref, ...props }: BentoBoxFooterProps): import("react").JSX.Element;
|
|
19
|
+
export declare function BentoBoxHeader({ className, ref, ...props }: BentoBoxHeaderProps): import("react").JSX.Element;
|
|
20
|
+
export declare function BentoBoxTitle({ className, ref, ...props }: BentoBoxTitleProps): import("react").JSX.Element;
|
|
21
|
+
declare const BentoBox: typeof BentoBox$1 & {
|
|
22
|
+
Action: typeof BentoBoxAction;
|
|
23
|
+
Content: typeof BentoBoxContent;
|
|
24
|
+
Description: typeof BentoBoxDescription;
|
|
25
|
+
Footer: typeof BentoBoxFooter;
|
|
26
|
+
Header: typeof BentoBoxHeader;
|
|
27
|
+
Title: typeof BentoBoxTitle;
|
|
28
|
+
};
|
|
29
|
+
export { BentoBox, type BentoBoxActionProps, type BentoBoxContentProps, type BentoBoxDescriptionProps, type BentoBoxFooterProps, type BentoBoxHeaderProps, type BentoBoxProps, type BentoBoxTitleProps };
|
|
30
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { t as cn } from "../cn-BDi0DfT5.js";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
// src/components/bento-box/bento-box.types.ts
|
|
5
|
+
const bentoBoxVariants = cva("group/box flex size-full min-h-0 flex-col overflow-hidden border border-border bg-surface", {
|
|
6
|
+
defaultVariants: {
|
|
7
|
+
elevation: "medium",
|
|
8
|
+
fill: false,
|
|
9
|
+
size: "medium"
|
|
10
|
+
},
|
|
11
|
+
variants: {
|
|
12
|
+
elevation: {
|
|
13
|
+
high: "shadow-sm",
|
|
14
|
+
low: "shadow-2xs",
|
|
15
|
+
medium: "shadow-xs",
|
|
16
|
+
none: "",
|
|
17
|
+
veryHigh: "shadow-md"
|
|
18
|
+
},
|
|
19
|
+
fill: {
|
|
20
|
+
false: "",
|
|
21
|
+
true: "p-0!"
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
large: "gap-md rounded-3xl p-lg",
|
|
25
|
+
medium: "gap-sm rounded-2xl p-md",
|
|
26
|
+
small: "gap-xs rounded-xl p-sm"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
// src/components/bento-box/bento-box.tsx
|
|
31
|
+
function BentoBox$1({ elevation, fill, size, className, ref, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx("div", {
|
|
33
|
+
"data-size": size,
|
|
34
|
+
className: cn(bentoBoxVariants({
|
|
35
|
+
className,
|
|
36
|
+
elevation,
|
|
37
|
+
fill,
|
|
38
|
+
size
|
|
39
|
+
})),
|
|
40
|
+
ref,
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
// src/components/bento-box/bento-box-action.tsx
|
|
45
|
+
function BentoBoxAction({ className, ref, ...props }) {
|
|
46
|
+
return /* @__PURE__ */ jsx("div", {
|
|
47
|
+
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end pl-lg", className),
|
|
48
|
+
ref,
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
// src/components/bento-box/bento-box-content.tsx
|
|
53
|
+
function BentoBoxContent({ className, ref, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx("div", {
|
|
55
|
+
className: cn("flex min-h-0 flex-1 flex-col gap-3xs", className),
|
|
56
|
+
ref,
|
|
57
|
+
...props
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
// src/components/bento-box/bento-box-description.tsx
|
|
61
|
+
function BentoBoxDescription({ className, ref, ...props }) {
|
|
62
|
+
return /* @__PURE__ */ jsx("span", {
|
|
63
|
+
className: cn("text-on-surface-variant group-data-[size=large]/box:style-text-prose-0 group-data-[size=medium]/box:style-text-prose--1 group-data-[size=small]/box:style-text-prose--2", className),
|
|
64
|
+
ref,
|
|
65
|
+
...props
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
// src/components/bento-box/bento-box-footer.tsx
|
|
69
|
+
function BentoBoxFooter({ className, ref, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx("div", {
|
|
71
|
+
className: cn("mt-auto flex flex-wrap items-center justify-start gap-sm not-first:group-data-[size=large]/box:gap-lg not-first:group-data-[size=medium]/box:gap-md group-data-[size=small]/box:gap-sm", className),
|
|
72
|
+
ref,
|
|
73
|
+
...props
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
// src/components/bento-box/bento-box-header.tsx
|
|
77
|
+
function BentoBoxHeader({ className, ref, ...props }) {
|
|
78
|
+
return /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: cn("group/box-header grid auto-rows-min items-start space-y-2xs group-data-[size=large]/box:gap-0 group-data-[size=medium]/box:gap-0 group-data-[size=small]/box:gap-0", className),
|
|
80
|
+
ref,
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
// src/components/bento-box/bento-box-title.tsx
|
|
85
|
+
function BentoBoxTitle({ className, ref, ...props }) {
|
|
86
|
+
return /* @__PURE__ */ jsx("span", {
|
|
87
|
+
className: cn("group-data-[size=large]/box:style-text-strong-1 not-first:group-data-[size=large]/box:pt-xs group-data-[size=medium]/box:style-text-strong-0 not-first:group-data-[size=medium]/box:pt-2xs group-data-[size=small]/box:style-text-strong--1 not-first:group-data-[size=small]/box:pt-3xs", className),
|
|
88
|
+
ref,
|
|
89
|
+
...props
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
// src/components/bento-box/index.ts
|
|
93
|
+
const BentoBox = Object.assign(BentoBox$1, {
|
|
94
|
+
Action: BentoBoxAction,
|
|
95
|
+
Content: BentoBoxContent,
|
|
96
|
+
Description: BentoBoxDescription,
|
|
97
|
+
Footer: BentoBoxFooter,
|
|
98
|
+
Header: BentoBoxHeader,
|
|
99
|
+
Title: BentoBoxTitle
|
|
100
|
+
});
|
|
101
|
+
export { BentoBox, BentoBoxAction, BentoBoxContent, BentoBoxDescription, BentoBoxFooter, BentoBoxHeader, BentoBoxTitle };
|
|
102
|
+
|
|
103
|
+
//# sourceMappingURL=index.js.map
|