@giddaa-housing/ui 1.0.0 → 1.2.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/css/generated/shared.css +1 -1
- package/css/giddaa.css +12 -2
- package/dist/accordion.d.ts +9 -10
- package/dist/accordion.js +41 -87
- package/dist/activity-timeline.d.ts +12 -16
- package/dist/activity-timeline.js +83 -198
- package/dist/alert.d.ts +8 -9
- package/dist/alert.js +53 -111
- package/dist/auth-layout.d.ts +4 -4
- package/dist/auth-layout.js +143 -294
- package/dist/avatar.d.ts +6 -6
- package/dist/avatar.js +49 -19
- package/dist/badge.d.ts +12 -14
- package/dist/badge.js +71 -11
- package/dist/bar-chart.d.ts +65 -67
- package/dist/bar-chart.js +232 -207
- package/dist/breadcrumb.d.ts +5 -5
- package/dist/breadcrumb.js +56 -118
- package/dist/bullet-chart.d.ts +41 -37
- package/dist/bullet-chart.js +125 -148
- package/dist/button-BZIeyUw6.d.ts +17 -0
- package/dist/button-group.d.ts +13 -16
- package/dist/button-group.js +39 -88
- package/dist/button.d.ts +2 -19
- package/dist/button.js +94 -13
- package/dist/calendar.d.ts +6 -6
- package/dist/calendar.js +138 -17
- package/dist/card.d.ts +14 -16
- package/dist/card.js +59 -145
- package/dist/carousel.d.ts +34 -35
- package/dist/carousel.js +335 -20
- package/dist/chart.d.ts +90 -63
- package/dist/chart.js +573 -28
- package/dist/checkbox.d.ts +10 -12
- package/dist/checkbox.js +82 -47
- package/dist/cn-BI_4DMBf.js +23 -0
- package/dist/collapsible.d.ts +7 -8
- package/dist/collapsible.js +22 -47
- package/dist/combobox.d.ts +10 -10
- package/dist/combobox.js +236 -44
- package/dist/cta.d.ts +12 -14
- package/dist/cta.js +175 -341
- package/dist/currency-selector.d.ts +31 -32
- package/dist/currency-selector.js +106 -184
- package/dist/data-table.d.ts +168 -0
- package/dist/data-table.js +676 -0
- package/dist/date-picker.d.ts +22 -23
- package/dist/date-picker.js +119 -192
- package/dist/details-card.d.ts +7 -7
- package/dist/details-card.js +104 -253
- package/dist/dialog.d.ts +13 -14
- package/dist/dialog.js +116 -209
- package/dist/dropdown-menu.d.ts +13 -13
- package/dist/dropdown-menu.js +180 -37
- package/dist/dropzone.d.ts +55 -55
- package/dist/dropzone.js +327 -439
- package/dist/editorial-card.d.ts +23 -25
- package/dist/editorial-card.js +129 -296
- package/dist/empty-state.d.ts +8 -9
- package/dist/empty-state.js +48 -105
- package/dist/field.d.ts +23 -25
- package/dist/field.js +110 -221
- package/dist/filter.d.ts +118 -0
- package/dist/filter.js +775 -0
- package/dist/footer.d.ts +8 -15
- package/dist/footer.js +197 -400
- package/dist/funnel-chart.d.ts +49 -48
- package/dist/funnel-chart.js +170 -189
- package/dist/gallery-indicator.d.ts +11 -12
- package/dist/gallery-indicator.js +75 -12
- package/dist/heatmap-chart.d.ts +47 -50
- package/dist/heatmap-chart.js +186 -237
- package/dist/infotip.d.ts +8 -9
- package/dist/infotip.js +33 -59
- package/dist/input-CfoEJ8A6.d.ts +12 -0
- package/dist/input-group.d.ts +16 -20
- package/dist/input-group.js +99 -23
- package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
- package/dist/input-size-context.d.ts +2 -11
- package/dist/input-size-context.js +17 -9
- package/dist/input.d.ts +2 -13
- package/dist/input.js +27 -11
- package/dist/item.d.ts +7 -8
- package/dist/item.js +22 -59
- package/dist/kpi-card.d.ts +18 -20
- package/dist/kpi-card.js +84 -192
- package/dist/label.d.ts +6 -6
- package/dist/label.js +40 -8
- package/dist/line-chart.d.ts +200 -129
- package/dist/line-chart.js +330 -105
- package/dist/list-item.d.ts +22 -0
- package/dist/list-item.js +84 -0
- package/dist/logo.d.ts +4 -4
- package/dist/logo.js +92 -9
- package/dist/map-indicator.d.ts +7 -7
- package/dist/map-indicator.js +80 -106
- package/dist/match.d.ts +10 -11
- package/dist/match.js +62 -107
- package/dist/media-gallery-hero.d.ts +40 -42
- package/dist/media-gallery-hero.js +182 -343
- package/dist/media-player.d.ts +17 -17
- package/dist/media-player.js +873 -1348
- package/dist/multi-step-form.d.ts +56 -0
- package/dist/multi-step-form.js +342 -0
- package/dist/number-input.d.ts +34 -34
- package/dist/number-input.js +64 -117
- package/dist/page-header.d.ts +10 -11
- package/dist/page-header.js +34 -79
- package/dist/pagination.d.ts +17 -21
- package/dist/pagination.js +132 -207
- package/dist/password-input.d.ts +5 -13
- package/dist/password-input.js +31 -55
- package/dist/phone-input.d.ts +19 -20
- package/dist/phone-input.js +226 -344
- package/dist/photo-gallery.d.ts +19 -19
- package/dist/photo-gallery.js +313 -449
- package/dist/picker-lzgmsNfG.js +32 -0
- package/dist/pie-chart.d.ts +121 -90
- package/dist/pie-chart.js +183 -149
- package/dist/popover.d.ts +9 -9
- package/dist/popover.js +72 -23
- package/dist/price-tag.d.ts +26 -27
- package/dist/price-tag.js +113 -173
- package/dist/progress.d.ts +16 -17
- package/dist/progress.js +169 -24
- package/dist/property-listing-card.d.ts +14 -17
- package/dist/property-listing-card.js +102 -220
- package/dist/purchase-option-card.d.ts +79 -0
- package/dist/purchase-option-card.js +176 -0
- package/dist/radar-chart.d.ts +29 -31
- package/dist/radar-chart.js +162 -137
- package/dist/radio-group.d.ts +11 -13
- package/dist/radio-group.js +46 -60
- package/dist/review-block.d.ts +14 -16
- package/dist/review-block.js +154 -10
- package/dist/rich-text-editor.d.ts +30 -14
- package/dist/rich-text-editor.js +592 -716
- package/dist/scatter-chart.d.ts +45 -47
- package/dist/scatter-chart.js +236 -240
- package/dist/search-input.d.ts +8 -16
- package/dist/search-input.js +57 -109
- package/dist/select.d.ts +8 -8
- package/dist/select.js +144 -27
- package/dist/separator.d.ts +8 -9
- package/dist/separator.js +32 -8
- package/dist/sheet.d.ts +11 -11
- package/dist/sheet.js +103 -24
- package/dist/sidebar.d.ts +32 -37
- package/dist/sidebar.js +364 -634
- package/dist/size-context-D4mYvcg8.d.ts +10 -0
- package/dist/size-context.d.ts +2 -11
- package/dist/size-context.js +17 -9
- package/dist/skeleton.d.ts +4 -5
- package/dist/skeleton.js +12 -8
- package/dist/slider.d.ts +8 -9
- package/dist/slider.js +64 -135
- package/dist/sparkline.d.ts +68 -58
- package/dist/sparkline.js +315 -251
- package/dist/stepper.d.ts +23 -24
- package/dist/stepper.js +149 -246
- package/dist/styles.css +1004 -116
- package/dist/switch.d.ts +10 -12
- package/dist/switch.js +48 -70
- package/dist/table-card.d.ts +35 -0
- package/dist/table-card.js +125 -0
- package/dist/table.d.ts +18 -14
- package/dist/table.js +117 -154
- package/dist/tabs.d.ts +33 -15
- package/dist/tabs.js +110 -18
- package/dist/tag.d.ts +21 -23
- package/dist/tag.js +103 -159
- package/dist/testimonial-block.d.ts +18 -19
- package/dist/testimonial-block.js +189 -358
- package/dist/textarea-IS_D8pXf.d.ts +11 -0
- package/dist/textarea.d.ts +2 -12
- package/dist/textarea.js +24 -11
- package/dist/time-picker.d.ts +11 -11
- package/dist/time-picker.js +245 -302
- package/dist/toast.d.ts +16 -18
- package/dist/toast.js +154 -205
- package/dist/tooltip.d.ts +8 -9
- package/dist/tooltip.js +37 -12
- package/dist/tree-map.d.ts +59 -62
- package/dist/tree-map.js +226 -269
- package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
- package/dist/waterfall-chart.d.ts +94 -97
- package/dist/waterfall-chart.js +455 -552
- package/package.json +36 -9
- package/dist/accordion.js.map +0 -1
- package/dist/activity-timeline.js.map +0 -1
- package/dist/alert.js.map +0 -1
- package/dist/auth-layout.js.map +0 -1
- package/dist/avatar.js.map +0 -1
- package/dist/badge.js.map +0 -1
- package/dist/bar-chart.js.map +0 -1
- package/dist/breadcrumb.js.map +0 -1
- package/dist/bullet-chart.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/calendar.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/carousel.js.map +0 -1
- package/dist/chart.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/chunk-322YCNVL.js +0 -278
- package/dist/chunk-322YCNVL.js.map +0 -1
- package/dist/chunk-3ACQVT7A.js +0 -25
- package/dist/chunk-3ACQVT7A.js.map +0 -1
- package/dist/chunk-3T65TLJX.js +0 -334
- package/dist/chunk-3T65TLJX.js.map +0 -1
- package/dist/chunk-6ZSGQHH2.js +0 -192
- package/dist/chunk-6ZSGQHH2.js.map +0 -1
- package/dist/chunk-7TBMLFGW.js +0 -41
- package/dist/chunk-7TBMLFGW.js.map +0 -1
- package/dist/chunk-B4H6RNDH.js +0 -135
- package/dist/chunk-B4H6RNDH.js.map +0 -1
- package/dist/chunk-BUXCGZ6X.js +0 -219
- package/dist/chunk-BUXCGZ6X.js.map +0 -1
- package/dist/chunk-CHII2QHH.js +0 -58
- package/dist/chunk-CHII2QHH.js.map +0 -1
- package/dist/chunk-DMNOXRRW.js +0 -147
- package/dist/chunk-DMNOXRRW.js.map +0 -1
- package/dist/chunk-EFSOSSIC.js +0 -130
- package/dist/chunk-EFSOSSIC.js.map +0 -1
- package/dist/chunk-FZDSVMKY.js +0 -363
- package/dist/chunk-FZDSVMKY.js.map +0 -1
- package/dist/chunk-GJOFIJS3.js +0 -246
- package/dist/chunk-GJOFIJS3.js.map +0 -1
- package/dist/chunk-HL3ZSYES.js +0 -23
- package/dist/chunk-HL3ZSYES.js.map +0 -1
- package/dist/chunk-JVLUBAPB.js +0 -129
- package/dist/chunk-JVLUBAPB.js.map +0 -1
- package/dist/chunk-KDPYSOYZ.js +0 -64
- package/dist/chunk-KDPYSOYZ.js.map +0 -1
- package/dist/chunk-KSMDANKI.js +0 -43
- package/dist/chunk-KSMDANKI.js.map +0 -1
- package/dist/chunk-MEKCCOP5.js +0 -46
- package/dist/chunk-MEKCCOP5.js.map +0 -1
- package/dist/chunk-NOFXVRWL.js +0 -451
- package/dist/chunk-NOFXVRWL.js.map +0 -1
- package/dist/chunk-PC5MHNVA.js +0 -171
- package/dist/chunk-PC5MHNVA.js.map +0 -1
- package/dist/chunk-QKAQZ2GU.js +0 -122
- package/dist/chunk-QKAQZ2GU.js.map +0 -1
- package/dist/chunk-QZHSHSVV.js +0 -26
- package/dist/chunk-QZHSHSVV.js.map +0 -1
- package/dist/chunk-RBMK26XD.js +0 -19
- package/dist/chunk-RBMK26XD.js.map +0 -1
- package/dist/chunk-SFNJGF6M.js +0 -262
- package/dist/chunk-SFNJGF6M.js.map +0 -1
- package/dist/chunk-UJJNLGTM.js +0 -112
- package/dist/chunk-UJJNLGTM.js.map +0 -1
- package/dist/chunk-VGR4ZWJ3.js +0 -418
- package/dist/chunk-VGR4ZWJ3.js.map +0 -1
- package/dist/chunk-XG47P6D4.js +0 -99
- package/dist/chunk-XG47P6D4.js.map +0 -1
- package/dist/chunk-XZZAHNVM.js +0 -21
- package/dist/chunk-XZZAHNVM.js.map +0 -1
- package/dist/chunk-Y4TTYVNE.js +0 -36
- package/dist/chunk-Y4TTYVNE.js.map +0 -1
- package/dist/chunk-YDWIHW6Q.js +0 -69
- package/dist/chunk-YDWIHW6Q.js.map +0 -1
- package/dist/collapsible.js.map +0 -1
- package/dist/combobox.js.map +0 -1
- package/dist/cta.js.map +0 -1
- package/dist/currency-selector.js.map +0 -1
- package/dist/date-picker.js.map +0 -1
- package/dist/details-card.js.map +0 -1
- package/dist/dialog.js.map +0 -1
- package/dist/dropdown-menu.js.map +0 -1
- package/dist/dropzone.js.map +0 -1
- package/dist/editorial-card.js.map +0 -1
- package/dist/empty-state.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/footer.js.map +0 -1
- package/dist/funnel-chart.js.map +0 -1
- package/dist/gallery-indicator.js.map +0 -1
- package/dist/heatmap-chart.js.map +0 -1
- package/dist/infotip.js.map +0 -1
- package/dist/input-group.js.map +0 -1
- package/dist/input-size-context.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/item.js.map +0 -1
- package/dist/kpi-card.js.map +0 -1
- package/dist/label.js.map +0 -1
- package/dist/line-chart.js.map +0 -1
- package/dist/logo.js.map +0 -1
- package/dist/map-indicator.js.map +0 -1
- package/dist/match.js.map +0 -1
- package/dist/media-gallery-hero.js.map +0 -1
- package/dist/media-player.js.map +0 -1
- package/dist/number-input.js.map +0 -1
- package/dist/page-header.js.map +0 -1
- package/dist/pagination.js.map +0 -1
- package/dist/password-input.js.map +0 -1
- package/dist/phone-input.js.map +0 -1
- package/dist/photo-gallery.js.map +0 -1
- package/dist/pie-chart.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/price-tag.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/property-listing-card.js.map +0 -1
- package/dist/radar-chart.js.map +0 -1
- package/dist/radio-group.js.map +0 -1
- package/dist/review-block.js.map +0 -1
- package/dist/rich-text-editor.js.map +0 -1
- package/dist/scatter-chart.js.map +0 -1
- package/dist/search-input.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/separator.js.map +0 -1
- package/dist/sheet.js.map +0 -1
- package/dist/sidebar.js.map +0 -1
- package/dist/size-context.js.map +0 -1
- package/dist/skeleton.js.map +0 -1
- package/dist/slider.js.map +0 -1
- package/dist/sparkline.js.map +0 -1
- package/dist/stepper.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/tab-list.d.ts +0 -38
- package/dist/tab-list.js +0 -123
- package/dist/tab-list.js.map +0 -1
- package/dist/table.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/tag.js.map +0 -1
- package/dist/testimonial-block.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/time-picker.js.map +0 -1
- package/dist/toast.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/tree-map.js.map +0 -1
- package/dist/waterfall-chart.js.map +0 -1
package/dist/search-input.js
CHANGED
|
@@ -1,113 +1,61 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
InputGroupAddon,
|
|
4
|
-
InputGroupButton,
|
|
5
|
-
InputGroupInput
|
|
6
|
-
} from "./chunk-6ZSGQHH2.js";
|
|
7
|
-
import "./chunk-KSMDANKI.js";
|
|
8
|
-
import "./chunk-MEKCCOP5.js";
|
|
9
|
-
import "./chunk-3ACQVT7A.js";
|
|
10
|
-
import "./chunk-B4H6RNDH.js";
|
|
11
|
-
import "./chunk-HL3ZSYES.js";
|
|
12
|
-
import {
|
|
13
|
-
cn
|
|
14
|
-
} from "./chunk-Y4TTYVNE.js";
|
|
15
|
-
|
|
16
|
-
// src/search-input.tsx
|
|
1
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
2
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
|
|
17
3
|
import { Search, X } from "lucide-react";
|
|
18
|
-
import * as React from "react";
|
|
19
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
//#region src/search-input.tsx
|
|
20
7
|
function hasValue(value) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
return value !== void 0 && value !== null && String(value).length > 0;
|
|
8
|
+
if (Array.isArray(value)) return value.length > 0;
|
|
9
|
+
return value !== void 0 && value !== null && String(value).length > 0;
|
|
25
10
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
variant === "app" && "shadow-4 focus-within:shadow-none",
|
|
78
|
-
wrapperClassName
|
|
79
|
-
),
|
|
80
|
-
children: [
|
|
81
|
-
/* @__PURE__ */ jsx(
|
|
82
|
-
InputGroupInput,
|
|
83
|
-
{
|
|
84
|
-
ref: inputRef,
|
|
85
|
-
size,
|
|
86
|
-
value,
|
|
87
|
-
defaultValue,
|
|
88
|
-
className,
|
|
89
|
-
...props,
|
|
90
|
-
disabled,
|
|
91
|
-
readOnly,
|
|
92
|
-
onChange: handleChange
|
|
93
|
-
}
|
|
94
|
-
),
|
|
95
|
-
/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, {}) }),
|
|
96
|
-
showClearButton ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
|
|
97
|
-
InputGroupButton,
|
|
98
|
-
{
|
|
99
|
-
"aria-label": "Clear search",
|
|
100
|
-
disabled: disabled || readOnly,
|
|
101
|
-
onClick: handleClear,
|
|
102
|
-
children: /* @__PURE__ */ jsx(X, { className: "size-3" })
|
|
103
|
-
}
|
|
104
|
-
) }) : null
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
);
|
|
110
|
-
export {
|
|
111
|
-
SearchInput
|
|
112
|
-
};
|
|
113
|
-
//# sourceMappingURL=search-input.js.map
|
|
11
|
+
const SearchInput = React.forwardRef(function SearchInput({ className, size, value, defaultValue, wrapperClassName, onChange, onClear, disabled, readOnly, variant = "dashboard", ...props }, ref) {
|
|
12
|
+
const inputRef = React.useRef(null);
|
|
13
|
+
const [hasUncontrolledValue, setHasUncontrolledValue] = React.useState(() => hasValue(defaultValue));
|
|
14
|
+
const isControlled = value !== void 0;
|
|
15
|
+
const showClearButton = isControlled ? hasValue(value) : hasUncontrolledValue;
|
|
16
|
+
React.useImperativeHandle(ref, () => inputRef.current);
|
|
17
|
+
function handleChange(event) {
|
|
18
|
+
if (!isControlled) setHasUncontrolledValue(hasValue(event.currentTarget.value));
|
|
19
|
+
onChange?.(event);
|
|
20
|
+
}
|
|
21
|
+
function handleClear() {
|
|
22
|
+
const input = inputRef.current;
|
|
23
|
+
if (!input) return;
|
|
24
|
+
const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
|
|
25
|
+
if (valueSetter) valueSetter.call(input, "");
|
|
26
|
+
else input.value = "";
|
|
27
|
+
setHasUncontrolledValue(false);
|
|
28
|
+
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
29
|
+
input.focus();
|
|
30
|
+
onClear?.();
|
|
31
|
+
}
|
|
32
|
+
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
33
|
+
size,
|
|
34
|
+
className: cn(variant === "app" && "shadow-4 focus-within:shadow-none", wrapperClassName),
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ jsx(InputGroupInput, {
|
|
37
|
+
ref: inputRef,
|
|
38
|
+
size,
|
|
39
|
+
value,
|
|
40
|
+
defaultValue,
|
|
41
|
+
className,
|
|
42
|
+
...props,
|
|
43
|
+
disabled,
|
|
44
|
+
readOnly,
|
|
45
|
+
onChange: handleChange
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, {}) }),
|
|
48
|
+
showClearButton ? /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
49
|
+
align: "inline-end",
|
|
50
|
+
children: /* @__PURE__ */ jsx(InputGroupButton, {
|
|
51
|
+
"aria-label": "Clear search",
|
|
52
|
+
disabled: disabled || readOnly,
|
|
53
|
+
onClick: handleClear,
|
|
54
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-3" })
|
|
55
|
+
})
|
|
56
|
+
}) : null
|
|
57
|
+
]
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
//#endregion
|
|
61
|
+
export { SearchInput };
|
package/dist/select.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as React from
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Select as Select$1 } from "@base-ui/react/select";
|
|
4
|
+
//#region src/select.d.ts
|
|
5
5
|
type SelectSize = ComponentSize;
|
|
6
6
|
declare function Select<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Select$1.Root.Props<Value, Multiple> & {
|
|
7
|
-
|
|
7
|
+
size?: SelectSize;
|
|
8
8
|
}): React.JSX.Element;
|
|
9
9
|
declare function SelectGroup({ className, ...props }: Select$1.Group.Props): React.JSX.Element;
|
|
10
10
|
declare function SelectValue({ className, ...props }: Select$1.Value.Props): React.JSX.Element;
|
|
11
11
|
declare function SelectTrigger({ className, children, unstyled, ...props }: Select$1.Trigger.Props & {
|
|
12
|
-
|
|
12
|
+
unstyled?: boolean;
|
|
13
13
|
}): React.JSX.Element;
|
|
14
14
|
declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
|
|
15
15
|
declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): React.JSX.Element;
|
|
@@ -17,5 +17,5 @@ declare function SelectItem({ className, children, ...props }: Select$1.Item.Pro
|
|
|
17
17
|
declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): React.JSX.Element;
|
|
18
18
|
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpArrow>): React.JSX.Element;
|
|
19
19
|
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownArrow>): React.JSX.Element;
|
|
20
|
-
|
|
21
|
-
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };
|
package/dist/select.js
CHANGED
|
@@ -1,28 +1,145 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { SizeProvider, useComponentSize } from "./size-context.js";
|
|
4
|
+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import { Select as Select$1 } from "@base-ui/react/select";
|
|
9
|
+
//#region src/select.tsx
|
|
10
|
+
const SelectSelectionContext = React.createContext({ multiple: false });
|
|
11
|
+
function Select({ multiple, children, size, ...props }) {
|
|
12
|
+
return /* @__PURE__ */ jsx(SizeProvider, {
|
|
13
|
+
size,
|
|
14
|
+
children: /* @__PURE__ */ jsx(SelectSelectionContext.Provider, {
|
|
15
|
+
value: { multiple: multiple === true },
|
|
16
|
+
children: /* @__PURE__ */ jsx(Select$1.Root, {
|
|
17
|
+
multiple,
|
|
18
|
+
...props,
|
|
19
|
+
children
|
|
20
|
+
})
|
|
21
|
+
})
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items-center justify-between rounded-full border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger data-[invalid=true]:focus-visible:border-line-danger data-[invalid=true]:focus-visible:inset-ring-line-danger data-[invalid=true]:data-focused:border-line-danger data-[invalid=true]:data-focused:inset-ring-line-danger data-[invalid=true]:data-popup-open:border-line-danger data-[invalid=true]:data-popup-open:inset-ring-line-danger *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
25
|
+
variants: { size: {
|
|
26
|
+
sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
|
|
27
|
+
md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
|
|
28
|
+
lg: "h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
|
|
29
|
+
} },
|
|
30
|
+
defaultVariants: { size: "md" }
|
|
31
|
+
});
|
|
32
|
+
const selectContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
|
|
33
|
+
variants: { size: {
|
|
34
|
+
sm: "rounded-lg p-1",
|
|
35
|
+
md: "rounded-xl p-1.5",
|
|
36
|
+
lg: "rounded-[18px] p-2"
|
|
37
|
+
} },
|
|
38
|
+
defaultVariants: { size: "md" }
|
|
39
|
+
});
|
|
40
|
+
const selectItemVariants = cva("group/select-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none select-none data-highlighted:bg-surface data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", {
|
|
41
|
+
variants: { size: {
|
|
42
|
+
sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
|
|
43
|
+
md: "gap-2 rounded-md px-4 py-2 text-gdt-sm",
|
|
44
|
+
lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md"
|
|
45
|
+
} },
|
|
46
|
+
defaultVariants: { size: "md" }
|
|
47
|
+
});
|
|
48
|
+
function SelectGroup({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx(Select$1.Group, {
|
|
50
|
+
"data-slot": "select-group",
|
|
51
|
+
className: cn("scroll-my-1 space-y-0.5", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function SelectValue({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(Select$1.Value, {
|
|
57
|
+
"data-slot": "select-value",
|
|
58
|
+
className: cn("flex min-w-0 flex-1 text-left", className),
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function SelectTrigger({ className, children, unstyled, ...props }) {
|
|
63
|
+
const resolvedSize = useComponentSize();
|
|
64
|
+
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
65
|
+
"data-slot": "select-trigger",
|
|
66
|
+
"data-size": resolvedSize,
|
|
67
|
+
className: cn(!unstyled && selectTriggerVariants({ size: resolvedSize }), className),
|
|
68
|
+
...props,
|
|
69
|
+
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-line-strong transition-transform group-data-disabled/select-trigger:text-fg-caption-placeholder data-popup-open:rotate-180" }) })]
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function SelectContent({ className, children, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
|
|
73
|
+
const resolvedSize = useComponentSize();
|
|
74
|
+
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
|
|
75
|
+
side,
|
|
76
|
+
sideOffset,
|
|
77
|
+
align,
|
|
78
|
+
alignOffset,
|
|
79
|
+
alignItemWithTrigger,
|
|
80
|
+
className: "isolate z-50",
|
|
81
|
+
children: /* @__PURE__ */ jsxs(Select$1.Popup, {
|
|
82
|
+
"data-slot": "select-content",
|
|
83
|
+
"data-align-trigger": alignItemWithTrigger,
|
|
84
|
+
className: cn(selectContentVariants({ size: resolvedSize }), className),
|
|
85
|
+
...props,
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
88
|
+
/* @__PURE__ */ jsx(Select$1.List, {
|
|
89
|
+
className: "space-y-0.5",
|
|
90
|
+
children
|
|
91
|
+
}),
|
|
92
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
93
|
+
]
|
|
94
|
+
})
|
|
95
|
+
}) });
|
|
96
|
+
}
|
|
97
|
+
function SelectLabel({ className, ...props }) {
|
|
98
|
+
return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
|
|
99
|
+
"data-slot": "select-label",
|
|
100
|
+
className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
|
|
101
|
+
...props
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function SelectItem({ className, children, ...props }) {
|
|
105
|
+
const { multiple } = React.useContext(SelectSelectionContext);
|
|
106
|
+
const resolvedSize = useComponentSize();
|
|
107
|
+
return /* @__PURE__ */ jsxs(Select$1.Item, {
|
|
108
|
+
"data-slot": "select-item",
|
|
109
|
+
className: cn(selectItemVariants({ size: resolvedSize }), !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
|
|
110
|
+
...props,
|
|
111
|
+
children: [multiple ? /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
|
|
112
|
+
keepMounted: true,
|
|
113
|
+
className: "flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-canvas text-transparent transition-[background-color,border-color,color] group-data-selected/select-item:border-action-primary group-data-selected/select-item:bg-action-primary group-data-selected/select-item:text-fg-on-brand group-data-disabled/select-item:border-line-subtle group-data-disabled/select-item:bg-surface group-data-disabled/select-item:text-fg-caption-placeholder [&>svg]:size-3",
|
|
114
|
+
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
115
|
+
}) : null, /* @__PURE__ */ jsx(Select$1.ItemText, {
|
|
116
|
+
className: "flex min-w-0 flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
117
|
+
children
|
|
118
|
+
})]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
function SelectSeparator({ className, ...props }) {
|
|
122
|
+
return /* @__PURE__ */ jsx(Select$1.Separator, {
|
|
123
|
+
"data-slot": "select-separator",
|
|
124
|
+
className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
|
|
125
|
+
...props
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
function SelectScrollUpButton({ className, ...props }) {
|
|
129
|
+
return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
|
|
130
|
+
"data-slot": "select-scroll-up-button",
|
|
131
|
+
className: cn("sticky top-0 z-10 flex h-7 w-full cursor-default items-center justify-center bg-canvas text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
|
|
132
|
+
...props,
|
|
133
|
+
children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
function SelectScrollDownButton({ className, ...props }) {
|
|
137
|
+
return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
|
|
138
|
+
"data-slot": "select-scroll-down-button",
|
|
139
|
+
className: cn("sticky bottom-0 z-10 flex h-7 w-full cursor-default items-center justify-center bg-canvas text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
|
|
140
|
+
...props,
|
|
141
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
//#endregion
|
|
145
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
|
package/dist/separator.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { Separator as Separator$1 } from "@base-ui/react/separator";
|
|
2
|
+
//#region src/separator.d.ts
|
|
4
3
|
declare function Separator({ className, orientation, dashed, shade, thickness, ...props }: Separator$1.Props & {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}):
|
|
9
|
-
|
|
10
|
-
export { Separator };
|
|
4
|
+
dashed?: boolean;
|
|
5
|
+
shade?: "feint" | "deep";
|
|
6
|
+
thickness?: "hairline" | "default" | "thick" | "extra-thick";
|
|
7
|
+
}): import("react").JSX.Element;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { Separator };
|
package/dist/separator.js
CHANGED
|
@@ -1,9 +1,33 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
} from "
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Separator as Separator$1 } from "@base-ui/react/separator";
|
|
5
|
+
//#region src/separator.tsx
|
|
6
|
+
function Separator({ className, orientation = "horizontal", dashed = false, shade = "feint", thickness = "default", ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Separator$1, {
|
|
8
|
+
"data-slot": "separator",
|
|
9
|
+
orientation,
|
|
10
|
+
className: cn("shrink-0", dashed ? [
|
|
11
|
+
"border-dashed",
|
|
12
|
+
"data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:w-full",
|
|
13
|
+
"data-[orientation=vertical]:w-0 data-[orientation=vertical]:self-stretch",
|
|
14
|
+
shade === "feint" && "border-line-subtle",
|
|
15
|
+
shade === "deep" && "border-line",
|
|
16
|
+
thickness === "hairline" && "data-[orientation=horizontal]:border-t-[0.5px] data-[orientation=vertical]:border-l-[0.5px]",
|
|
17
|
+
thickness === "default" && "data-[orientation=horizontal]:border-t data-[orientation=vertical]:border-l",
|
|
18
|
+
thickness === "thick" && "data-[orientation=horizontal]:border-t-2 data-[orientation=vertical]:border-l-2",
|
|
19
|
+
thickness === "extra-thick" && "data-[orientation=horizontal]:border-t-[3px] data-[orientation=vertical]:border-l-[3px]"
|
|
20
|
+
] : [
|
|
21
|
+
"data-[orientation=horizontal]:w-full data-[orientation=vertical]:self-stretch",
|
|
22
|
+
shade === "feint" && "bg-line-subtle",
|
|
23
|
+
shade === "deep" && "bg-line",
|
|
24
|
+
thickness === "hairline" && "data-[orientation=horizontal]:h-[0.5px] data-[orientation=vertical]:w-[0.5px]",
|
|
25
|
+
thickness === "default" && "data-[orientation=horizontal]:h-px data-[orientation=vertical]:w-px",
|
|
26
|
+
thickness === "thick" && "data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5",
|
|
27
|
+
thickness === "extra-thick" && "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5"
|
|
28
|
+
], className),
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
//#endregion
|
|
33
|
+
export { Separator };
|
package/dist/sheet.d.ts
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
3
|
+
//#region src/sheet.d.ts
|
|
4
4
|
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
5
5
|
declare function Sheet({ ...props }: Dialog.Root.Props): React.JSX.Element;
|
|
6
6
|
declare function SheetTrigger({ ...props }: Dialog.Trigger.Props): React.JSX.Element;
|
|
7
7
|
declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element;
|
|
8
8
|
type SheetContentProps = Dialog.Popup.Props & {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
side?: SheetSide;
|
|
10
|
+
showCloseButton?: boolean;
|
|
11
11
|
} & ({
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
side: "top" | "bottom";
|
|
13
|
+
size?: "fullscreen";
|
|
14
14
|
} | {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
side?: "left" | "right";
|
|
16
|
+
size?: "sm" | "md" | "lg";
|
|
17
17
|
});
|
|
18
18
|
declare function SheetContent({ className, children, side, size, showCloseButton, ...props }: SheetContentProps): React.JSX.Element;
|
|
19
19
|
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
20
20
|
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
21
21
|
declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
|
|
22
22
|
declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
|
|
23
|
-
|
|
24
|
-
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
|
package/dist/sheet.js
CHANGED
|
@@ -1,25 +1,104 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { SizeProvider } from "./size-context.js";
|
|
4
|
+
import { Button } from "./button.js";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
9
|
+
//#region src/sheet.tsx
|
|
10
|
+
function Sheet({ ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
12
|
+
"data-slot": "sheet",
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function SheetTrigger({ ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
18
|
+
"data-slot": "sheet-trigger",
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function SheetClose({ ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
24
|
+
"data-slot": "sheet-close",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function SheetPortal({ ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
30
|
+
"data-slot": "sheet-portal",
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function SheetOverlay({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
36
|
+
"data-slot": "sheet-overlay",
|
|
37
|
+
className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)", {
|
|
42
|
+
variants: { size: {
|
|
43
|
+
sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
|
|
44
|
+
md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
|
|
45
|
+
lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
|
|
46
|
+
fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
|
|
47
|
+
} },
|
|
48
|
+
defaultVariants: { size: "md" }
|
|
49
|
+
});
|
|
50
|
+
function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, ...props }) {
|
|
51
|
+
const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
|
|
52
|
+
return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
|
|
53
|
+
size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
|
|
54
|
+
children: /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
55
|
+
"data-slot": "sheet-content",
|
|
56
|
+
"data-side": side,
|
|
57
|
+
"data-size": resolvedSize,
|
|
58
|
+
className: cn(sheetContentVariants({ size: resolvedSize }), className),
|
|
59
|
+
...props,
|
|
60
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
|
|
61
|
+
"data-slot": "sheet-close",
|
|
62
|
+
render: /* @__PURE__ */ jsxs(Button, {
|
|
63
|
+
variant: "ghost",
|
|
64
|
+
className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
|
|
65
|
+
size: "icon-sm",
|
|
66
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
67
|
+
className: "sr-only",
|
|
68
|
+
children: "Close"
|
|
69
|
+
})]
|
|
70
|
+
})
|
|
71
|
+
})]
|
|
72
|
+
})
|
|
73
|
+
})] });
|
|
74
|
+
}
|
|
75
|
+
function SheetHeader({ className, ...props }) {
|
|
76
|
+
return /* @__PURE__ */ jsx("div", {
|
|
77
|
+
"data-slot": "sheet-header",
|
|
78
|
+
className: cn("flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2", className),
|
|
79
|
+
...props
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
function SheetFooter({ className, ...props }) {
|
|
83
|
+
return /* @__PURE__ */ jsx("div", {
|
|
84
|
+
"data-slot": "sheet-footer",
|
|
85
|
+
className: cn("mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4", className),
|
|
86
|
+
...props
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function SheetTitle({ className, ...props }) {
|
|
90
|
+
return /* @__PURE__ */ jsx(Dialog.Title, {
|
|
91
|
+
"data-slot": "sheet-title",
|
|
92
|
+
className: cn("font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5", className),
|
|
93
|
+
...props
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
function SheetDescription({ className, ...props }) {
|
|
97
|
+
return /* @__PURE__ */ jsx(Dialog.Description, {
|
|
98
|
+
"data-slot": "sheet-description",
|
|
99
|
+
className: cn("text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs", className),
|
|
100
|
+
...props
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
//#endregion
|
|
104
|
+
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
|