@jfrader/ui 0.4.0 → 0.5.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 +2 -0
- package/dist/{accordion-Bd-j04hW.js → accordion-xCI_u0BV.js} +2 -2
- package/dist/accordion.js +1 -1
- package/dist/{alert-BBqaKI4k.js → alert-DS_einpy.js} +1 -1
- package/dist/alert.js +1 -1
- package/dist/announcement-bar-B58xempt.js +382 -0
- package/dist/announcement-bar.js +2 -0
- package/dist/avatar-group-DOQQuV51.js +138 -0
- package/dist/avatar-group.js +2 -0
- package/dist/bottom-sheet-DPJBFkie.js +673 -0
- package/dist/bottom-sheet.js +2 -0
- package/dist/{breadcrumbs-DVAOxfvL.js → breadcrumbs-Cfw_hgt2.js} +1 -1
- package/dist/breadcrumbs.js +1 -1
- package/dist/{button-P2e7_44z.js → button-C92uYFJW.js} +1 -1
- package/dist/button.js +1 -1
- package/dist/calendar-B3Svu0X2.js +447 -0
- package/dist/calendar.js +1 -1
- package/dist/carousel-IvPqN-oM.js +472 -0
- package/dist/carousel.js +2 -0
- package/dist/{checkbox-COYG6L7d.js → checkbox-cFquiSdy.js} +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chip-group-DTQd_M-G.js +289 -0
- package/dist/chip-group.js +2 -0
- package/dist/code-block/shiki.js +147 -0
- package/dist/code-block-ahnRi-g8.js +292 -0
- package/dist/code-block.js +2 -0
- package/dist/collection-registry-k6JcD3Jr.js +44 -0
- package/dist/combobox-Bhzvu9ma.js +334 -0
- package/dist/combobox.js +1 -1
- package/dist/command-palette-BQ5LleGb.js +384 -0
- package/dist/command-palette.js +1 -1
- package/dist/copy-button-ByiA6D3R.js +252 -0
- package/dist/copy-button.js +2 -0
- package/dist/countdown-Dp_TD1VP.js +293 -0
- package/dist/countdown.js +2 -0
- package/dist/date-picker-5zKSSuFF.js +255 -0
- package/dist/date-picker.js +1 -1
- package/dist/date-range-picker-B5uFWsm-.js +562 -0
- package/dist/date-range-picker.js +2 -0
- package/dist/{dialog-xaydbXl2.js → dialog-ciiv9H2b.js} +19 -19
- package/dist/dialog.js +1 -1
- package/dist/drawer-DsASTiP-.js +553 -0
- package/dist/drawer.js +2 -0
- package/dist/empty-state-CDgrjPPf.js +142 -0
- package/dist/empty-state.js +2 -0
- package/dist/expandable-card-C-qJcZ14.js +340 -0
- package/dist/expandable-card.js +2 -0
- package/dist/field-anatomy-COVdNpf5.js +84 -0
- package/dist/file-dropzone-pR4v7owg.js +457 -0
- package/dist/file-dropzone.js +2 -0
- package/dist/filter-toolbar-D5KEKTSe.js +312 -0
- package/dist/filter-toolbar.js +2 -0
- package/dist/hold-to-confirm-DjB2EVjM.js +294 -0
- package/dist/hold-to-confirm.js +2 -0
- package/dist/hover-card-B-nrCIy2.js +347 -0
- package/dist/hover-card.js +2 -0
- package/dist/image-compare-ciuhPtQZ.js +415 -0
- package/dist/image-compare.js +2 -0
- package/dist/index.js +79 -38
- package/dist/inline-edit-C0eeml65.js +535 -0
- package/dist/inline-edit.js +2 -0
- package/dist/input-control-DmMuAuPS.js +34 -0
- package/dist/json-viewer-BcySQfjZ.js +798 -0
- package/dist/json-viewer.js +2 -0
- package/dist/listbox-style-WX-RASp1.js +59 -0
- package/dist/{media-D_eA_I-e.js → media-8yrN85VT.js} +2 -2
- package/dist/mention-input-BcQKX2EJ.js +599 -0
- package/dist/mention-input.js +2 -0
- package/dist/menu-xwOOUtWP.js +275 -0
- package/dist/menu.js +1 -1
- package/dist/metric-card-Bh9K4fZs.js +118 -0
- package/dist/metric-card.js +2 -0
- package/dist/multi-select-Pce_IYnz.js +590 -0
- package/dist/multi-select.js +2 -0
- package/dist/{navigation-DhnKriOp.js → navigation-sP5fiuQS.js} +4 -4
- package/dist/navigation.js +1 -1
- package/dist/overlay-layer-SeUyyEPD.js +64 -0
- package/dist/overlay-portal-C4JZFq2M.js +15 -0
- package/dist/{pagination-DYdwsxwe.js → pagination-DmXZ8E85.js} +1 -1
- package/dist/pagination.js +1 -1
- package/dist/password-field-03pWRkuY.js +250 -0
- package/dist/password-field.js +2 -0
- package/dist/popover-QHcEvf9c.js +119 -0
- package/dist/popover.js +1 -1
- package/dist/{progress-BpJswTG4.js → progress-CbOWBUdA.js} +4 -4
- package/dist/progress.js +1 -1
- package/dist/radio-cards-D2QZENI_.js +455 -0
- package/dist/radio-cards.js +2 -0
- package/dist/{radio-group-Ce0_IWQr.js → radio-group-E6mMRgo7.js} +4 -4
- package/dist/radio-group.js +1 -1
- package/dist/resizable-panels-BhjUVXZZ.js +519 -0
- package/dist/resizable-panels.js +2 -0
- package/dist/scroll-area-CcZyiSOQ.js +371 -0
- package/dist/scroll-area.js +2 -0
- package/dist/search-field-IxF0IJXm.js +274 -0
- package/dist/search-field.js +2 -0
- package/dist/segmented-control-yO1K1nbi.js +326 -0
- package/dist/segmented-control.js +2 -0
- package/dist/select-n_H52W1Z.js +292 -0
- package/dist/select.js +1 -1
- package/dist/signature-pad-q2SAsrdD.js +640 -0
- package/dist/signature-pad.js +2 -0
- package/dist/{skeleton-OoFlOEXO.js → skeleton-XQQDkCHd.js} +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/slider-t0B5cecO.js +477 -0
- package/dist/slider.js +2 -0
- package/dist/sortable-data-table-tirqlLY2.js +365 -0
- package/dist/sortable-data-table.js +2 -0
- package/dist/{spinner-C2YDoiMn.js → spinner-DtxvDPdM.js} +1 -1
- package/dist/spinner.js +1 -1
- package/dist/split-button-Cb3EHs64.js +268 -0
- package/dist/split-button.js +2 -0
- package/dist/stepper-CruHbXxX.js +480 -0
- package/dist/stepper.js +2 -0
- package/dist/swipe-actions-DiZC57-3.js +418 -0
- package/dist/swipe-actions.js +2 -0
- package/dist/{switch-Dr-qjmT4.js → switch-qwv8jQnR.js} +1 -1
- package/dist/switch.js +1 -1
- package/dist/{tabs-CK_g1RKa.js → tabs-CAVJndX1.js} +2 -2
- package/dist/tabs.js +1 -1
- package/dist/tag-input-DSRCyrX2.js +418 -0
- package/dist/tag-input.js +2 -0
- package/dist/{text-field-D60ok14S.js → text-field-C8TWG-tY.js} +6 -5
- package/dist/text-field.js +1 -1
- package/dist/{textarea-DyfjtP0A.js → textarea-BrW0XcG_.js} +6 -5
- package/dist/textarea.js +1 -1
- package/dist/time-picker-Db8D49cP.js +305 -0
- package/dist/time-picker.js +2 -0
- package/dist/timeline-k3nURuCP.js +618 -0
- package/dist/timeline.js +2 -0
- package/dist/toast-BHxI32ZA.js +352 -0
- package/dist/toast-stack-DqrAzdg5.js +183 -0
- package/dist/toast-stack.js +2 -0
- package/dist/toast.js +1 -1
- package/dist/{toggle-group-CI0e7hFm.js → toggle-group-fcjzpifI.js} +4 -4
- package/dist/toggle-group.js +1 -1
- package/dist/tooltip-CkeiW9C1.js +113 -0
- package/dist/tooltip.js +1 -1
- package/dist/tree-view-C2liIxqy.js +360 -0
- package/dist/tree-view.js +2 -0
- package/dist/types/components/announcement-bar/announcement-bar.d.ts +75 -0
- package/dist/types/components/announcement-bar/index.d.ts +2 -0
- package/dist/types/components/avatar-group/avatar-group.d.ts +43 -0
- package/dist/types/components/avatar-group/index.d.ts +2 -0
- package/dist/types/components/bottom-sheet/bottom-sheet.d.ts +60 -0
- package/dist/types/components/bottom-sheet/index.d.ts +2 -0
- package/dist/types/components/calendar/calendar.d.ts +25 -1
- package/dist/types/components/calendar/index.d.ts +1 -1
- package/dist/types/components/carousel/carousel.d.ts +73 -0
- package/dist/types/components/carousel/index.d.ts +2 -0
- package/dist/types/components/chip-group/chip-group.d.ts +54 -0
- package/dist/types/components/chip-group/index.d.ts +1 -0
- package/dist/types/components/code-block/code-block.d.ts +58 -0
- package/dist/types/components/code-block/index.d.ts +1 -0
- package/dist/types/components/code-block/shiki.d.ts +3 -0
- package/dist/types/components/combobox/combobox.d.ts +1 -1
- package/dist/types/components/command-palette/command-palette.d.ts +1 -1
- package/dist/types/components/copy-button/copy-button.d.ts +49 -0
- package/dist/types/components/copy-button/index.d.ts +2 -0
- package/dist/types/components/countdown/countdown.d.ts +37 -0
- package/dist/types/components/countdown/index.d.ts +1 -0
- package/dist/types/components/date-picker/date-picker.d.ts +1 -1
- package/dist/types/components/date-range-picker/date-range-picker.d.ts +103 -0
- package/dist/types/components/date-range-picker/index.d.ts +2 -0
- package/dist/types/components/drawer/drawer.d.ts +59 -0
- package/dist/types/components/drawer/index.d.ts +2 -0
- package/dist/types/components/empty-state/empty-state.d.ts +36 -0
- package/dist/types/components/empty-state/index.d.ts +2 -0
- package/dist/types/components/expandable-card/expandable-card.d.ts +28 -0
- package/dist/types/components/expandable-card/index.d.ts +2 -0
- package/dist/types/components/field/field-anatomy.d.ts +4 -2
- package/dist/types/components/file-dropzone/file-dropzone.d.ts +93 -0
- package/dist/types/components/file-dropzone/index.d.ts +2 -0
- package/dist/types/components/filter-toolbar/filter-toolbar.d.ts +70 -0
- package/dist/types/components/filter-toolbar/index.d.ts +1 -0
- package/dist/types/components/hold-to-confirm/hold-to-confirm.d.ts +32 -0
- package/dist/types/components/hold-to-confirm/index.d.ts +2 -0
- package/dist/types/components/hover-card/hover-card.d.ts +97 -0
- package/dist/types/components/hover-card/index.d.ts +2 -0
- package/dist/types/components/image-compare/image-compare.d.ts +54 -0
- package/dist/types/components/image-compare/index.d.ts +1 -0
- package/dist/types/components/inline-edit/index.d.ts +2 -0
- package/dist/types/components/inline-edit/inline-edit.d.ts +93 -0
- package/dist/types/components/json-viewer/index.d.ts +2 -0
- package/dist/types/components/json-viewer/json-viewer.d.ts +82 -0
- package/dist/types/components/mention-input/index.d.ts +2 -0
- package/dist/types/components/mention-input/mention-input.d.ts +87 -0
- package/dist/types/components/menu/menu.d.ts +23 -5
- package/dist/types/components/metric-card/index.d.ts +1 -0
- package/dist/types/components/metric-card/metric-card.d.ts +37 -0
- package/dist/types/components/multi-select/index.d.ts +2 -0
- package/dist/types/components/multi-select/multi-select.d.ts +73 -0
- package/dist/types/components/password-field/index.d.ts +2 -0
- package/dist/types/components/password-field/password-field.d.ts +34 -0
- package/dist/types/components/popover/popover.d.ts +1 -1
- package/dist/types/components/radio-cards/index.d.ts +1 -0
- package/dist/types/components/radio-cards/radio-cards.d.ts +42 -0
- package/dist/types/components/resizable-panels/index.d.ts +2 -0
- package/dist/types/components/resizable-panels/resizable-panels.d.ts +42 -0
- package/dist/types/components/scroll-area/index.d.ts +2 -0
- package/dist/types/components/scroll-area/scroll-area.d.ts +34 -0
- package/dist/types/components/search-field/index.d.ts +1 -0
- package/dist/types/components/search-field/search-field.d.ts +31 -0
- package/dist/types/components/segmented-control/index.d.ts +2 -0
- package/dist/types/components/segmented-control/segmented-control.d.ts +32 -0
- package/dist/types/components/select/select.d.ts +1 -1
- package/dist/types/components/signature-pad/index.d.ts +2 -0
- package/dist/types/components/signature-pad/signature-pad.d.ts +104 -0
- package/dist/types/components/slider/index.d.ts +1 -0
- package/dist/types/components/slider/slider.d.ts +70 -0
- package/dist/types/components/sortable-data-table/index.d.ts +1 -0
- package/dist/types/components/sortable-data-table/sortable-data-table.d.ts +76 -0
- package/dist/types/components/split-button/index.d.ts +2 -0
- package/dist/types/components/split-button/split-button.d.ts +55 -0
- package/dist/types/components/stepper/index.d.ts +2 -0
- package/dist/types/components/stepper/stepper.d.ts +85 -0
- package/dist/types/components/swipe-actions/index.d.ts +2 -0
- package/dist/types/components/swipe-actions/swipe-actions.d.ts +44 -0
- package/dist/types/components/tag-input/index.d.ts +2 -0
- package/dist/types/components/tag-input/tag-input.d.ts +66 -0
- package/dist/types/components/time-picker/index.d.ts +2 -0
- package/dist/types/components/time-picker/time-picker.d.ts +48 -0
- package/dist/types/components/timeline/index.d.ts +2 -0
- package/dist/types/components/timeline/timeline.d.ts +66 -0
- package/dist/types/components/toast/toast.d.ts +37 -2
- package/dist/types/components/toast-stack/index.d.ts +2 -0
- package/dist/types/components/toast-stack/toast-stack.d.ts +28 -0
- package/dist/types/components/tooltip/tooltip.d.ts +1 -1
- package/dist/types/components/tree-view/index.d.ts +1 -0
- package/dist/types/components/tree-view/tree-view.d.ts +47 -0
- package/dist/types/components/usage-meter/index.d.ts +2 -0
- package/dist/types/components/usage-meter/usage-meter.d.ts +83 -0
- package/dist/types/index.d.ts +40 -0
- package/dist/types/overlay/overlay-layer.d.ts +33 -0
- package/dist/types/overlay/use-overlay-floating.d.ts +11 -1
- package/dist/types/styling/media.d.ts +1 -0
- package/dist/types/styling/theme.d.ts +12 -0
- package/dist/types/utils/use-controlled-state.d.ts +2 -1
- package/dist/usage-meter-qyQ3rYVv.js +463 -0
- package/dist/usage-meter.js +2 -0
- package/dist/use-controlled-state-DpeVQZNR.js +20 -0
- package/dist/use-latest-callback-cj1OOQL6.js +11 -0
- package/dist/use-overlay-floating-DvJifLpF.js +31 -0
- package/package.json +175 -3
- package/dist/calendar-C9Yad_-w.js +0 -394
- package/dist/collection-registry-BTYi6zGh.js +0 -98
- package/dist/combobox-DiMC2g_u.js +0 -327
- package/dist/command-palette-V_2pEay7.js +0 -379
- package/dist/date-picker-C29Uo4Tx.js +0 -250
- package/dist/field-anatomy-D2ToMeRa.js +0 -109
- package/dist/menu-CGPTNRnF.js +0 -216
- package/dist/popover-CdRXjQqI.js +0 -113
- package/dist/select-BgG7WgSh.js +0 -286
- package/dist/toast-CjmELMZZ.js +0 -283
- package/dist/tooltip-CaL3rKbV.js +0 -108
- package/dist/use-controlled-state-CVXDa-qM.js +0 -21
- package/dist/use-overlay-floating-Bit-f0FU.js +0 -31
|
@@ -0,0 +1,553 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { n as r } from "./focus-ring-BK5W5_NY.js";
|
|
4
|
+
import { n as i, r as a } from "./media-8yrN85VT.js";
|
|
5
|
+
import { t as o } from "./use-controlled-state-DpeVQZNR.js";
|
|
6
|
+
import { t as s } from "./renderable-DzcIj1Lo.js";
|
|
7
|
+
import { n as c, t as l } from "./surface-DZ4d-2aL.js";
|
|
8
|
+
import { t as u } from "./trigger-style-B1KVC8O1.js";
|
|
9
|
+
import { i as d, n as f, r as p, t as m } from "./use-native-dialog-DWpIUVO1.js";
|
|
10
|
+
import { createContext as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
|
|
11
|
+
import { vars as C } from "@jfrader/tokens/vars";
|
|
12
|
+
import { jsx as w } from "@emotion/react/jsx-runtime";
|
|
13
|
+
import { useMergeRefs as ee } from "@floating-ui/react";
|
|
14
|
+
import { animate as T } from "motion/react";
|
|
15
|
+
//#region src/components/drawer/drawer.tsx
|
|
16
|
+
var E = h(null), D = h(null);
|
|
17
|
+
function O(e) {
|
|
18
|
+
let t = _(E);
|
|
19
|
+
if (!t) throw Error(`Drawer.${e} must be rendered inside <Drawer>.`);
|
|
20
|
+
return t;
|
|
21
|
+
}
|
|
22
|
+
var k = 1 / 3, A = 500, j = .2, M = 100, N = {
|
|
23
|
+
type: "spring",
|
|
24
|
+
stiffness: 400,
|
|
25
|
+
damping: 40,
|
|
26
|
+
mass: 1
|
|
27
|
+
}, P = [
|
|
28
|
+
"button",
|
|
29
|
+
"a[href]",
|
|
30
|
+
"input",
|
|
31
|
+
"select",
|
|
32
|
+
"textarea",
|
|
33
|
+
"label",
|
|
34
|
+
"[contenteditable]:not([contenteditable=\"false\"])",
|
|
35
|
+
"[data-ui~=\"drawer-title\"]",
|
|
36
|
+
"[data-ui~=\"drawer-description\"]"
|
|
37
|
+
].join(", "), te = "[data-floating-ui-portal]:not(:empty)", F = {
|
|
38
|
+
sm: "22rem",
|
|
39
|
+
md: "30rem",
|
|
40
|
+
lg: "38rem"
|
|
41
|
+
}, I = "32rem", L = C.space[3], R = "@media (max-width: 40rem)", z = C.space[6], B = C.space[5], V = {
|
|
42
|
+
top: "env(safe-area-inset-top, 0px)",
|
|
43
|
+
bottom: "env(safe-area-inset-bottom, 0px)"
|
|
44
|
+
}, H = e({ from: {
|
|
45
|
+
opacity: 0,
|
|
46
|
+
transform: "translate(var(--drawer-entry-x, 0), var(--drawer-entry-y, 0))"
|
|
47
|
+
} }), ne = t({
|
|
48
|
+
...l,
|
|
49
|
+
position: "fixed",
|
|
50
|
+
inset: 0,
|
|
51
|
+
margin: 0,
|
|
52
|
+
inlineSize: "100%",
|
|
53
|
+
blockSize: "100%",
|
|
54
|
+
maxInlineSize: "none",
|
|
55
|
+
maxBlockSize: "none",
|
|
56
|
+
overflow: "hidden",
|
|
57
|
+
"&[open]": { display: "flex" }
|
|
58
|
+
}), re = {
|
|
59
|
+
"inline-start": t({
|
|
60
|
+
flexDirection: "row",
|
|
61
|
+
justifyContent: "flex-start"
|
|
62
|
+
}),
|
|
63
|
+
"inline-end": t({
|
|
64
|
+
flexDirection: "row",
|
|
65
|
+
justifyContent: "flex-end"
|
|
66
|
+
}),
|
|
67
|
+
top: t({
|
|
68
|
+
flexDirection: "column",
|
|
69
|
+
justifyContent: "flex-start"
|
|
70
|
+
}),
|
|
71
|
+
bottom: t({
|
|
72
|
+
flexDirection: "column",
|
|
73
|
+
justifyContent: "flex-end"
|
|
74
|
+
})
|
|
75
|
+
}, U = t({
|
|
76
|
+
...c,
|
|
77
|
+
display: "flex",
|
|
78
|
+
flexDirection: "column",
|
|
79
|
+
minBlockSize: 0,
|
|
80
|
+
borderWidth: 0,
|
|
81
|
+
boxShadow: C.shadow.floating,
|
|
82
|
+
animationName: H,
|
|
83
|
+
animationDuration: C.motion.duration.base,
|
|
84
|
+
animationTimingFunction: C.motion.easeStandard,
|
|
85
|
+
animationFillMode: "backwards",
|
|
86
|
+
[a]: { animation: "none" },
|
|
87
|
+
[i]: {
|
|
88
|
+
boxShadow: "none",
|
|
89
|
+
borderColor: "CanvasText"
|
|
90
|
+
}
|
|
91
|
+
}), W = {
|
|
92
|
+
blockSize: "100%",
|
|
93
|
+
paddingBlockStart: V.top
|
|
94
|
+
}, ie = {
|
|
95
|
+
"inline-start": t({
|
|
96
|
+
...W,
|
|
97
|
+
borderInlineEndWidth: "1px",
|
|
98
|
+
borderStartEndRadius: C.radius.lg,
|
|
99
|
+
borderEndEndRadius: C.radius.lg,
|
|
100
|
+
"--drawer-entry-x": "-100%",
|
|
101
|
+
"&:dir(rtl)": { "--drawer-entry-x": "100%" },
|
|
102
|
+
[i]: { borderInlineEndWidth: "2px" }
|
|
103
|
+
}),
|
|
104
|
+
"inline-end": t({
|
|
105
|
+
...W,
|
|
106
|
+
borderInlineStartWidth: "1px",
|
|
107
|
+
borderStartStartRadius: C.radius.lg,
|
|
108
|
+
borderEndStartRadius: C.radius.lg,
|
|
109
|
+
"--drawer-entry-x": "100%",
|
|
110
|
+
"&:dir(rtl)": { "--drawer-entry-x": "-100%" },
|
|
111
|
+
[i]: { borderInlineStartWidth: "2px" }
|
|
112
|
+
}),
|
|
113
|
+
top: t({
|
|
114
|
+
inlineSize: "100%",
|
|
115
|
+
maxBlockSize: `min(${I}, 100dvh)`,
|
|
116
|
+
paddingBlockStart: V.top,
|
|
117
|
+
borderBlockEndWidth: "1px",
|
|
118
|
+
borderEndStartRadius: C.radius.lg,
|
|
119
|
+
borderEndEndRadius: C.radius.lg,
|
|
120
|
+
"--drawer-entry-y": "-100%",
|
|
121
|
+
[i]: { borderBlockEndWidth: "2px" }
|
|
122
|
+
}),
|
|
123
|
+
bottom: t({
|
|
124
|
+
inlineSize: "100%",
|
|
125
|
+
maxBlockSize: `min(${I}, 100dvh)`,
|
|
126
|
+
borderBlockStartWidth: "1px",
|
|
127
|
+
borderStartStartRadius: C.radius.lg,
|
|
128
|
+
borderStartEndRadius: C.radius.lg,
|
|
129
|
+
"--drawer-entry-y": "100%",
|
|
130
|
+
[i]: { borderBlockStartWidth: "2px" }
|
|
131
|
+
})
|
|
132
|
+
}, ae = Object.fromEntries(Object.entries(F).map(([e, n]) => [e, t({
|
|
133
|
+
inlineSize: `min(${n}, calc(100% - ${L}))`,
|
|
134
|
+
[R]: { inlineSize: `calc(100% - ${L})` }
|
|
135
|
+
})])), G = {
|
|
136
|
+
paddingInline: z,
|
|
137
|
+
[R]: { paddingInline: B }
|
|
138
|
+
}, oe = t({
|
|
139
|
+
...G,
|
|
140
|
+
display: "grid",
|
|
141
|
+
gridTemplateColumns: "minmax(0, 1fr) auto",
|
|
142
|
+
alignItems: "start",
|
|
143
|
+
columnGap: C.space[4],
|
|
144
|
+
flexShrink: 0,
|
|
145
|
+
paddingBlock: z,
|
|
146
|
+
borderBlockEnd: `1px solid ${C.color.border}`,
|
|
147
|
+
"& > *": { gridColumn: 1 },
|
|
148
|
+
"& > [data-ui~=\"drawer-close\"]": {
|
|
149
|
+
gridColumn: 2,
|
|
150
|
+
gridRow: 1
|
|
151
|
+
},
|
|
152
|
+
[R]: { paddingBlock: B }
|
|
153
|
+
}), se = t({
|
|
154
|
+
cursor: "grab",
|
|
155
|
+
touchAction: "none",
|
|
156
|
+
"&[data-dragging]": { cursor: "grabbing" },
|
|
157
|
+
[a]: {
|
|
158
|
+
cursor: "auto",
|
|
159
|
+
touchAction: "auto"
|
|
160
|
+
}
|
|
161
|
+
}), K = { "&:last-child": {
|
|
162
|
+
paddingBlockEnd: `calc(${z} + ${V.bottom})`,
|
|
163
|
+
[R]: { paddingBlockEnd: `calc(${B} + ${V.bottom})` }
|
|
164
|
+
} }, ce = t({
|
|
165
|
+
...G,
|
|
166
|
+
flex: "1 1 auto",
|
|
167
|
+
minBlockSize: 0,
|
|
168
|
+
overflow: "auto",
|
|
169
|
+
overscrollBehavior: "contain",
|
|
170
|
+
paddingBlock: C.space[5],
|
|
171
|
+
fontSize: C.textSize.sm,
|
|
172
|
+
...K
|
|
173
|
+
}), le = t({
|
|
174
|
+
...G,
|
|
175
|
+
display: "flex",
|
|
176
|
+
flexWrap: "wrap",
|
|
177
|
+
justifyContent: "flex-end",
|
|
178
|
+
alignItems: "center",
|
|
179
|
+
gap: C.space[3],
|
|
180
|
+
flexShrink: 0,
|
|
181
|
+
paddingBlock: C.space[4],
|
|
182
|
+
borderBlockStart: `1px solid ${C.color.border}`,
|
|
183
|
+
...K
|
|
184
|
+
}), ue = t({
|
|
185
|
+
margin: 0,
|
|
186
|
+
fontSize: C.textSize.lg,
|
|
187
|
+
fontWeight: C.fontWeight.semibold,
|
|
188
|
+
lineHeight: C.lineHeight.tight
|
|
189
|
+
}), de = t({
|
|
190
|
+
margin: 0,
|
|
191
|
+
marginBlockStart: C.space[2],
|
|
192
|
+
fontSize: C.textSize.sm,
|
|
193
|
+
color: C.color.textMuted
|
|
194
|
+
}), fe = t({
|
|
195
|
+
appearance: "none",
|
|
196
|
+
display: "inline-flex",
|
|
197
|
+
alignItems: "center",
|
|
198
|
+
justifyContent: "center",
|
|
199
|
+
gap: C.space[2],
|
|
200
|
+
boxSizing: "border-box",
|
|
201
|
+
minBlockSize: C.space[8],
|
|
202
|
+
minInlineSize: C.space[8],
|
|
203
|
+
border: "1px solid transparent",
|
|
204
|
+
borderRadius: C.radius.md,
|
|
205
|
+
backgroundColor: "transparent",
|
|
206
|
+
paddingBlock: C.space[1],
|
|
207
|
+
paddingInline: C.space[3],
|
|
208
|
+
font: "inherit",
|
|
209
|
+
fontSize: C.textSize.sm,
|
|
210
|
+
fontWeight: C.fontWeight.medium,
|
|
211
|
+
color: C.color.textMuted,
|
|
212
|
+
cursor: "pointer",
|
|
213
|
+
transitionProperty: "background-color, color",
|
|
214
|
+
transitionDuration: C.motion.duration.fast,
|
|
215
|
+
transitionTimingFunction: C.motion.easeStandard,
|
|
216
|
+
"&:hover:not(:disabled)": {
|
|
217
|
+
backgroundColor: C.color.surfaceHover,
|
|
218
|
+
color: C.color.text
|
|
219
|
+
},
|
|
220
|
+
"&:focus-visible": { ...r },
|
|
221
|
+
"&:disabled": {
|
|
222
|
+
opacity: .55,
|
|
223
|
+
cursor: "not-allowed"
|
|
224
|
+
},
|
|
225
|
+
[a]: { transitionDuration: "0s" },
|
|
226
|
+
[i]: {
|
|
227
|
+
borderColor: "ButtonText",
|
|
228
|
+
"&:focus-visible": { outlineColor: "Highlight" }
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
function q(e) {
|
|
232
|
+
return s(e) && e !== "";
|
|
233
|
+
}
|
|
234
|
+
function J({ open: e, defaultOpen: t = !1, onOpenChange: n, side: r = "inline-end", size: i = "md", draggable: a = !1, children: s }) {
|
|
235
|
+
let c = y(), [l = !1, u] = o(e, t, n), { setDialogElement: f, setOpen: p, requestClose: m, repairToken: h } = d(l, u), [g, _] = S(!1), [v, x] = S(!1), C = b(() => ({
|
|
236
|
+
open: l,
|
|
237
|
+
setOpen: p,
|
|
238
|
+
requestClose: m,
|
|
239
|
+
repairToken: h,
|
|
240
|
+
setDialogElement: f,
|
|
241
|
+
side: r,
|
|
242
|
+
size: i,
|
|
243
|
+
draggable: a,
|
|
244
|
+
titleId: `${c}-title`,
|
|
245
|
+
descriptionId: `${c}-description`,
|
|
246
|
+
hasTitle: g,
|
|
247
|
+
hasDescription: v,
|
|
248
|
+
setHasTitle: _,
|
|
249
|
+
setHasDescription: x
|
|
250
|
+
}), [
|
|
251
|
+
l,
|
|
252
|
+
p,
|
|
253
|
+
m,
|
|
254
|
+
h,
|
|
255
|
+
f,
|
|
256
|
+
r,
|
|
257
|
+
i,
|
|
258
|
+
a,
|
|
259
|
+
c,
|
|
260
|
+
g,
|
|
261
|
+
v
|
|
262
|
+
]);
|
|
263
|
+
return /* @__PURE__ */ w(E.Provider, {
|
|
264
|
+
value: C,
|
|
265
|
+
children: s
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
J.displayName = "Drawer";
|
|
269
|
+
function Y({ ref: e, onClick: t, className: r, sx: i, ...a }) {
|
|
270
|
+
let { open: o, setOpen: s } = O("Trigger"), c = (e) => {
|
|
271
|
+
t?.(e), e.defaultPrevented || s(!0);
|
|
272
|
+
};
|
|
273
|
+
return /* @__PURE__ */ w(n, {
|
|
274
|
+
className: r,
|
|
275
|
+
styles: u,
|
|
276
|
+
sx: i,
|
|
277
|
+
children: (t) => /* @__PURE__ */ w("button", {
|
|
278
|
+
type: "button",
|
|
279
|
+
...a,
|
|
280
|
+
ref: e,
|
|
281
|
+
"data-ui": "drawer-trigger",
|
|
282
|
+
"aria-haspopup": "dialog",
|
|
283
|
+
"aria-expanded": o,
|
|
284
|
+
onClick: c,
|
|
285
|
+
className: t
|
|
286
|
+
})
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
Y.displayName = "Drawer.Trigger";
|
|
290
|
+
var pe = "(prefers-reduced-motion: reduce)", me = {
|
|
291
|
+
"inline-start": "x",
|
|
292
|
+
"inline-end": "x",
|
|
293
|
+
top: "y",
|
|
294
|
+
bottom: "y"
|
|
295
|
+
};
|
|
296
|
+
function he(e, t) {
|
|
297
|
+
return e === "top" ? -1 : e === "bottom" ? 1 : e === "inline-end" === t ? -1 : 1;
|
|
298
|
+
}
|
|
299
|
+
function ge(e, t) {
|
|
300
|
+
let n = t * e.sign;
|
|
301
|
+
return t === 0 ? "" : e.axis === "x" ? `${n}px` : `0 ${n}px`;
|
|
302
|
+
}
|
|
303
|
+
function _e(e, t, n, r) {
|
|
304
|
+
let i = x(null), a = x(null), o = x(0), s = g(() => {
|
|
305
|
+
a.current?.stop(), a.current = null, i.current = null, o.current = 0, n.current && (n.current.style.translate = "");
|
|
306
|
+
}, [n]);
|
|
307
|
+
return v(() => s, [s]), {
|
|
308
|
+
headerGesture: b(() => {
|
|
309
|
+
if (!e) return null;
|
|
310
|
+
let s = (e, t, n) => {
|
|
311
|
+
o.current = n, e.style.translate = ge(t, n);
|
|
312
|
+
}, c = (e, t) => {
|
|
313
|
+
let o = i.current, c = n.current;
|
|
314
|
+
if (!o || o.pointerId !== e.pointerId) return;
|
|
315
|
+
i.current = null, e.currentTarget.removeAttribute("data-dragging");
|
|
316
|
+
let l = o.axis === "x" ? e.clientX : e.clientY, u = [...o.samples, {
|
|
317
|
+
position: l,
|
|
318
|
+
time: e.timeStamp
|
|
319
|
+
}].filter((t) => e.timeStamp - t.time <= M), d = u[0], f = u.at(-1), p = d && f ? (f.time - d.time) / 1e3 : 0, m = d && f && p > 0 ? (f.position - d.position) * o.sign / p : 0;
|
|
320
|
+
t && (o.offset >= o.extent * k || m >= A) && r(), c && o.offset !== 0 && (a.current = T(o.offset, 0, {
|
|
321
|
+
...N,
|
|
322
|
+
velocity: m,
|
|
323
|
+
onUpdate: (e) => s(c, o, e)
|
|
324
|
+
}));
|
|
325
|
+
};
|
|
326
|
+
return {
|
|
327
|
+
onPointerDown: (e) => {
|
|
328
|
+
let r = n.current;
|
|
329
|
+
if (!e.isPrimary || e.button !== 0 || !r || e.target instanceof Element && e.target.closest(P) || r.ownerDocument.defaultView?.matchMedia(pe).matches) return;
|
|
330
|
+
a.current?.stop();
|
|
331
|
+
let s = me[t], c = he(t, getComputedStyle(r).direction === "rtl"), l = r.getBoundingClientRect(), u = s === "x" ? e.clientX : e.clientY, d = o.current;
|
|
332
|
+
i.current = {
|
|
333
|
+
pointerId: e.pointerId,
|
|
334
|
+
axis: s,
|
|
335
|
+
sign: c,
|
|
336
|
+
start: u - d * c,
|
|
337
|
+
extent: s === "x" ? l.width : l.height,
|
|
338
|
+
offset: d,
|
|
339
|
+
samples: [{
|
|
340
|
+
position: u,
|
|
341
|
+
time: e.timeStamp
|
|
342
|
+
}]
|
|
343
|
+
}, e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.setAttribute("data-dragging", "");
|
|
344
|
+
},
|
|
345
|
+
onPointerMove: (e) => {
|
|
346
|
+
let t = i.current, r = n.current;
|
|
347
|
+
if (!t || t.pointerId !== e.pointerId || !r) return;
|
|
348
|
+
let a = t.axis === "x" ? e.clientX : e.clientY, o = (a - t.start) * t.sign;
|
|
349
|
+
t.offset = o >= 0 ? o : o * j, t.samples = [...t.samples, {
|
|
350
|
+
position: a,
|
|
351
|
+
time: e.timeStamp
|
|
352
|
+
}].filter((t) => e.timeStamp - t.time <= M), s(r, t, t.offset);
|
|
353
|
+
},
|
|
354
|
+
onPointerUp: (e) => c(e, !0),
|
|
355
|
+
onPointerCancel: (e) => c(e, !1),
|
|
356
|
+
onLostPointerCapture: (e) => c(e, !1)
|
|
357
|
+
};
|
|
358
|
+
}, [
|
|
359
|
+
e,
|
|
360
|
+
t,
|
|
361
|
+
n,
|
|
362
|
+
r
|
|
363
|
+
]),
|
|
364
|
+
reset: s
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
function X({ ref: e, className: t, sx: r, ...i }) {
|
|
368
|
+
let { children: a, onCancel: o, onClick: s, onClose: c, onKeyDownCapture: l, onKeyUp: u, "aria-labelledby": d, "aria-describedby": h, withDescription: _ = !0, ...v } = m(i), y = O("Content"), { setOpen: S, titleId: C, descriptionId: ee, hasTitle: T, hasDescription: E, side: k, draggable: A } = y, j = x(null), M = x(null), N = x(!1), P = g(() => {
|
|
369
|
+
f(j.current, S);
|
|
370
|
+
}, [S]), { headerGesture: F, reset: I } = _e(A, k, M, P), L = (e) => {
|
|
371
|
+
N.current ? (N.current = !1, e.preventDefault()) : o?.(e);
|
|
372
|
+
}, R = (e) => {
|
|
373
|
+
I(), c?.(e);
|
|
374
|
+
}, z = p({
|
|
375
|
+
...y,
|
|
376
|
+
requestClose: P
|
|
377
|
+
}, {
|
|
378
|
+
onCancel: L,
|
|
379
|
+
onClick: s,
|
|
380
|
+
onClose: R
|
|
381
|
+
}, e, j), B = (e, t) => (n) => n.target === j.current ? e(n) : t?.(n), V = {
|
|
382
|
+
...z,
|
|
383
|
+
onCancel: B(z.onCancel, o),
|
|
384
|
+
onClose: B(z.onClose, c),
|
|
385
|
+
onKeyDownCapture: (e) => {
|
|
386
|
+
l?.(e), e.key === "Escape" && (N.current = !!j.current?.querySelector(te));
|
|
387
|
+
},
|
|
388
|
+
onKeyUp: (e) => {
|
|
389
|
+
u?.(e), e.key === "Escape" && (N.current = !1);
|
|
390
|
+
}
|
|
391
|
+
}, H = b(() => ({
|
|
392
|
+
requestClose: P,
|
|
393
|
+
panelRef: M,
|
|
394
|
+
headerGesture: F
|
|
395
|
+
}), [P, F]), U = [d, T && C].filter(Boolean).join(" ") || void 0, W = [h, _ && E && ee].filter(Boolean).join(" ") || void 0;
|
|
396
|
+
return /* @__PURE__ */ w(n, {
|
|
397
|
+
className: t,
|
|
398
|
+
styles: [ne, re[k]],
|
|
399
|
+
sx: r,
|
|
400
|
+
children: (e) => /* @__PURE__ */ w("dialog", {
|
|
401
|
+
...v,
|
|
402
|
+
...V,
|
|
403
|
+
"data-ui": "drawer",
|
|
404
|
+
"data-side": k,
|
|
405
|
+
"aria-modal": "true",
|
|
406
|
+
"aria-labelledby": U,
|
|
407
|
+
"aria-describedby": W,
|
|
408
|
+
className: e,
|
|
409
|
+
children: /* @__PURE__ */ w(D.Provider, {
|
|
410
|
+
value: H,
|
|
411
|
+
children: a
|
|
412
|
+
})
|
|
413
|
+
})
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
X.displayName = "Drawer.Content";
|
|
417
|
+
function Z({ ref: e, className: t, sx: r, ...i }) {
|
|
418
|
+
let { side: a, size: o } = O("Panel"), s = _(D)?.panelRef, c = ee([s, e]), l = a === "inline-start" || a === "inline-end";
|
|
419
|
+
return /* @__PURE__ */ w(n, {
|
|
420
|
+
className: t,
|
|
421
|
+
styles: [
|
|
422
|
+
U,
|
|
423
|
+
ie[a],
|
|
424
|
+
l && ae[o]
|
|
425
|
+
],
|
|
426
|
+
sx: r,
|
|
427
|
+
children: (e) => /* @__PURE__ */ w("div", {
|
|
428
|
+
...i,
|
|
429
|
+
ref: c,
|
|
430
|
+
"data-ui": "drawer-panel",
|
|
431
|
+
className: e
|
|
432
|
+
})
|
|
433
|
+
});
|
|
434
|
+
}
|
|
435
|
+
Z.displayName = "Drawer.Panel";
|
|
436
|
+
function Q({ ref: e, className: t, sx: r, ...i }) {
|
|
437
|
+
O("Header");
|
|
438
|
+
let a = _(D)?.headerGesture ?? null, o = a && Object.fromEntries(Object.keys(a).map((e) => [e, (t) => {
|
|
439
|
+
i[e]?.(t), a[e]?.(t);
|
|
440
|
+
}]));
|
|
441
|
+
return /* @__PURE__ */ w(n, {
|
|
442
|
+
className: t,
|
|
443
|
+
styles: [oe, a && se],
|
|
444
|
+
sx: r,
|
|
445
|
+
children: (t) => /* @__PURE__ */ w("div", {
|
|
446
|
+
...i,
|
|
447
|
+
...o,
|
|
448
|
+
ref: e,
|
|
449
|
+
"data-ui": "drawer-header",
|
|
450
|
+
"data-draggable": a ? "" : void 0,
|
|
451
|
+
className: t
|
|
452
|
+
})
|
|
453
|
+
});
|
|
454
|
+
}
|
|
455
|
+
Q.displayName = "Drawer.Header";
|
|
456
|
+
function $({ ref: e, className: t, sx: r, ...i }) {
|
|
457
|
+
return O("Body"), /* @__PURE__ */ w(n, {
|
|
458
|
+
className: t,
|
|
459
|
+
styles: ce,
|
|
460
|
+
sx: r,
|
|
461
|
+
children: (t) => /* @__PURE__ */ w("div", {
|
|
462
|
+
...i,
|
|
463
|
+
ref: e,
|
|
464
|
+
"data-ui": "drawer-body",
|
|
465
|
+
className: t
|
|
466
|
+
})
|
|
467
|
+
});
|
|
468
|
+
}
|
|
469
|
+
$.displayName = "Drawer.Body";
|
|
470
|
+
function ve({ ref: e, className: t, sx: r, ...i }) {
|
|
471
|
+
return O("Footer"), /* @__PURE__ */ w(n, {
|
|
472
|
+
className: t,
|
|
473
|
+
styles: le,
|
|
474
|
+
sx: r,
|
|
475
|
+
children: (t) => /* @__PURE__ */ w("div", {
|
|
476
|
+
...i,
|
|
477
|
+
ref: e,
|
|
478
|
+
"data-ui": "drawer-footer",
|
|
479
|
+
className: t
|
|
480
|
+
})
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
ve.displayName = "Drawer.Footer";
|
|
484
|
+
function ye({ ref: e, className: t, sx: r, children: i, ...a }) {
|
|
485
|
+
let { titleId: o, setHasTitle: s } = O("Title"), c = q(i);
|
|
486
|
+
return v(() => {
|
|
487
|
+
if (c) return s(!0), () => s(!1);
|
|
488
|
+
}, [c, s]), c ? /* @__PURE__ */ w(n, {
|
|
489
|
+
className: t,
|
|
490
|
+
styles: ue,
|
|
491
|
+
sx: r,
|
|
492
|
+
children: (t) => /* @__PURE__ */ w("h2", {
|
|
493
|
+
...a,
|
|
494
|
+
ref: e,
|
|
495
|
+
id: o,
|
|
496
|
+
"data-ui": "drawer-title",
|
|
497
|
+
className: t,
|
|
498
|
+
children: i
|
|
499
|
+
})
|
|
500
|
+
}) : null;
|
|
501
|
+
}
|
|
502
|
+
ye.displayName = "Drawer.Title";
|
|
503
|
+
function be({ ref: e, className: t, sx: r, children: i, ...a }) {
|
|
504
|
+
let { descriptionId: o, setHasDescription: s } = O("Description"), c = q(i);
|
|
505
|
+
return v(() => {
|
|
506
|
+
if (c) return s(!0), () => s(!1);
|
|
507
|
+
}, [c, s]), c ? /* @__PURE__ */ w(n, {
|
|
508
|
+
className: t,
|
|
509
|
+
styles: de,
|
|
510
|
+
sx: r,
|
|
511
|
+
children: (t) => /* @__PURE__ */ w("p", {
|
|
512
|
+
...a,
|
|
513
|
+
ref: e,
|
|
514
|
+
id: o,
|
|
515
|
+
"data-ui": "drawer-description",
|
|
516
|
+
className: t,
|
|
517
|
+
children: i
|
|
518
|
+
})
|
|
519
|
+
}) : null;
|
|
520
|
+
}
|
|
521
|
+
be.displayName = "Drawer.Description";
|
|
522
|
+
function xe({ ref: e, onClick: t, className: r, sx: i, ...a }) {
|
|
523
|
+
let { setOpen: o } = O("Close"), s = _(D)?.requestClose, c = (e) => {
|
|
524
|
+
t?.(e), !e.defaultPrevented && (s ? s() : o(!1));
|
|
525
|
+
};
|
|
526
|
+
return /* @__PURE__ */ w(n, {
|
|
527
|
+
className: r,
|
|
528
|
+
styles: fe,
|
|
529
|
+
sx: i,
|
|
530
|
+
children: (t) => /* @__PURE__ */ w("button", {
|
|
531
|
+
type: "button",
|
|
532
|
+
...a,
|
|
533
|
+
ref: e,
|
|
534
|
+
"data-ui": "drawer-close",
|
|
535
|
+
onClick: c,
|
|
536
|
+
className: t
|
|
537
|
+
})
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
xe.displayName = "Drawer.Close";
|
|
541
|
+
var Se = Object.assign(J, {
|
|
542
|
+
Trigger: Y,
|
|
543
|
+
Content: X,
|
|
544
|
+
Panel: Z,
|
|
545
|
+
Header: Q,
|
|
546
|
+
Body: $,
|
|
547
|
+
Footer: ve,
|
|
548
|
+
Title: ye,
|
|
549
|
+
Description: be,
|
|
550
|
+
Close: xe
|
|
551
|
+
});
|
|
552
|
+
//#endregion
|
|
553
|
+
export { Se as t };
|
package/dist/drawer.js
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { t as n } from "./renderable-DzcIj1Lo.js";
|
|
4
|
+
import { useId as r } from "react";
|
|
5
|
+
import { vars as i } from "@jfrader/tokens/vars";
|
|
6
|
+
import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
|
|
7
|
+
//#region src/components/empty-state/empty-state.tsx
|
|
8
|
+
var s = "40ch", c = "24ch", l = e({
|
|
9
|
+
boxSizing: "border-box",
|
|
10
|
+
display: "flex",
|
|
11
|
+
gap: i.space[4],
|
|
12
|
+
minInlineSize: 0,
|
|
13
|
+
fontFamily: i.font.sans,
|
|
14
|
+
lineHeight: i.lineHeight.base,
|
|
15
|
+
color: i.color.text
|
|
16
|
+
}), u = {
|
|
17
|
+
centered: e({
|
|
18
|
+
flexDirection: "column",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
textAlign: "center",
|
|
21
|
+
paddingBlock: i.space[8],
|
|
22
|
+
paddingInline: i.space[5]
|
|
23
|
+
}),
|
|
24
|
+
inline: e({
|
|
25
|
+
flexDirection: "row",
|
|
26
|
+
flexWrap: "wrap",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
textAlign: "start",
|
|
29
|
+
paddingBlock: i.space[4],
|
|
30
|
+
paddingInline: i.space[5]
|
|
31
|
+
})
|
|
32
|
+
}, d = e({
|
|
33
|
+
boxSizing: "border-box",
|
|
34
|
+
display: "grid",
|
|
35
|
+
placeItems: "center",
|
|
36
|
+
flexShrink: 0,
|
|
37
|
+
inlineSize: i.space[12],
|
|
38
|
+
blockSize: i.space[12],
|
|
39
|
+
border: `1px solid ${i.color.border}`,
|
|
40
|
+
borderRadius: i.radius.md,
|
|
41
|
+
backgroundColor: i.color.surfaceHover,
|
|
42
|
+
color: i.color.textMuted,
|
|
43
|
+
"& > svg": {
|
|
44
|
+
inlineSize: i.space[6],
|
|
45
|
+
blockSize: i.space[6]
|
|
46
|
+
}
|
|
47
|
+
}), f = e({
|
|
48
|
+
display: "grid",
|
|
49
|
+
gap: i.space[2],
|
|
50
|
+
minInlineSize: 0
|
|
51
|
+
}), p = {
|
|
52
|
+
centered: e({
|
|
53
|
+
justifyItems: "center",
|
|
54
|
+
maxInlineSize: "100%"
|
|
55
|
+
}),
|
|
56
|
+
inline: e({ flex: `1 1 ${c}` })
|
|
57
|
+
}, m = e({
|
|
58
|
+
margin: 0,
|
|
59
|
+
fontSize: i.textSize.md,
|
|
60
|
+
fontWeight: i.fontWeight.medium,
|
|
61
|
+
lineHeight: i.lineHeight.base,
|
|
62
|
+
color: i.color.text,
|
|
63
|
+
textWrap: "balance",
|
|
64
|
+
overflowWrap: "anywhere"
|
|
65
|
+
}), h = e({
|
|
66
|
+
margin: 0,
|
|
67
|
+
maxInlineSize: s,
|
|
68
|
+
fontSize: i.textSize.sm,
|
|
69
|
+
color: i.color.textMuted,
|
|
70
|
+
textWrap: "pretty",
|
|
71
|
+
overflowWrap: "anywhere"
|
|
72
|
+
}), g = e({
|
|
73
|
+
display: "flex",
|
|
74
|
+
flexWrap: "wrap",
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
gap: i.space[3]
|
|
77
|
+
}), _ = {
|
|
78
|
+
centered: e({ justifyContent: "center" }),
|
|
79
|
+
inline: void 0
|
|
80
|
+
};
|
|
81
|
+
function v(...e) {
|
|
82
|
+
return e.filter(Boolean).join(" ") || void 0;
|
|
83
|
+
}
|
|
84
|
+
function y({ ref: e, title: i, description: s, icon: c, action: y, headingLevel: b = 3, variant: x = "centered", slotProps: S, className: C, sx: w, "aria-labelledby": T, "aria-describedby": E, ...D }) {
|
|
85
|
+
let O = r(), k = `${O}-title`, A = `${O}-description`, j = n(i), M = n(s), N = `h${b}`;
|
|
86
|
+
return /* @__PURE__ */ a(t, {
|
|
87
|
+
className: C,
|
|
88
|
+
styles: [l, u[x]],
|
|
89
|
+
sx: w,
|
|
90
|
+
children: (t) => /* @__PURE__ */ o("section", {
|
|
91
|
+
...D,
|
|
92
|
+
ref: e,
|
|
93
|
+
"data-ui": "empty-state",
|
|
94
|
+
"data-variant": x,
|
|
95
|
+
"aria-labelledby": T ? v(T, j && k) : void 0,
|
|
96
|
+
"aria-describedby": v(E, M && A),
|
|
97
|
+
className: t,
|
|
98
|
+
children: [
|
|
99
|
+
n(c) && /* @__PURE__ */ a("div", {
|
|
100
|
+
"data-ui": "empty-state-icon",
|
|
101
|
+
"aria-hidden": "true",
|
|
102
|
+
className: S?.icon?.className,
|
|
103
|
+
css: [d, S?.icon?.css],
|
|
104
|
+
children: c
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ o("div", {
|
|
107
|
+
"data-ui": "empty-state-content",
|
|
108
|
+
className: S?.content?.className,
|
|
109
|
+
css: [
|
|
110
|
+
f,
|
|
111
|
+
p[x],
|
|
112
|
+
S?.content?.css
|
|
113
|
+
],
|
|
114
|
+
children: [j && /* @__PURE__ */ a(N, {
|
|
115
|
+
id: k,
|
|
116
|
+
className: S?.title?.className,
|
|
117
|
+
css: [m, S?.title?.css],
|
|
118
|
+
children: i
|
|
119
|
+
}), M && /* @__PURE__ */ a("p", {
|
|
120
|
+
id: A,
|
|
121
|
+
className: S?.description?.className,
|
|
122
|
+
css: [h, S?.description?.css],
|
|
123
|
+
children: s
|
|
124
|
+
})]
|
|
125
|
+
}),
|
|
126
|
+
n(y) && /* @__PURE__ */ a("div", {
|
|
127
|
+
"data-ui": "empty-state-action",
|
|
128
|
+
className: S?.action?.className,
|
|
129
|
+
css: [
|
|
130
|
+
g,
|
|
131
|
+
_[x],
|
|
132
|
+
S?.action?.css
|
|
133
|
+
],
|
|
134
|
+
children: y
|
|
135
|
+
})
|
|
136
|
+
]
|
|
137
|
+
})
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
y.displayName = "EmptyState";
|
|
141
|
+
//#endregion
|
|
142
|
+
export { y as t };
|