@jfrader/ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion-Bd-j04hW.js +198 -0
- package/dist/accordion.js +1 -1
- package/dist/alert-BBqaKI4k.js +135 -0
- package/dist/alert.js +1 -1
- package/dist/avatar-BahDVO9t.js +132 -0
- package/dist/avatar.js +1 -1
- package/dist/badge-B_sLygxU.js +108 -0
- package/dist/badge.js +1 -1
- package/dist/breadcrumbs-DVAOxfvL.js +141 -0
- package/dist/breadcrumbs.js +1 -1
- package/dist/button-P2e7_44z.js +200 -0
- package/dist/button.js +1 -1
- package/dist/calendar-C9Yad_-w.js +394 -0
- package/dist/calendar.js +1 -1
- package/dist/card-D-aI2QHx.js +158 -0
- package/dist/card.js +1 -1
- package/dist/checkbox-COYG6L7d.js +140 -0
- package/dist/checkbox.js +1 -1
- package/dist/{choice-control-ByFogYcT.js → choice-control-5kJkLXgv.js} +1 -1
- package/dist/{collection-registry-1l9f3XJZ.js → collection-registry-BTYi6zGh.js} +1 -1
- package/dist/combobox-DrmjBbo7.js +327 -0
- package/dist/combobox.js +1 -1
- package/dist/command-palette-V_2pEay7.js +379 -0
- package/dist/command-palette.js +1 -1
- package/dist/container-BOaSptJa.js +41 -0
- package/dist/container.js +1 -1
- package/dist/date-picker-ClUYBIBh.js +250 -0
- package/dist/date-picker.js +1 -1
- package/dist/dialog-xaydbXl2.js +218 -0
- package/dist/dialog.js +1 -1
- package/dist/divider-DYoJf0I_.js +84 -0
- package/dist/divider.js +1 -1
- package/dist/field-anatomy-D2ToMeRa.js +109 -0
- package/dist/flex-Dh-_J5-U.js +28 -0
- package/dist/flex.js +1 -1
- package/dist/{icon-wrapper-CFWzew5m.js → icon-wrapper-stN8sD7R.js} +1 -1
- package/dist/index.js +38 -37
- package/dist/kbd-C3ACoMoE.js +71 -0
- package/dist/kbd.js +1 -1
- package/dist/{layout-style-7ZTOiWGR.js → layout-style-Cbd1Vilw.js} +1 -1
- package/dist/{loading-ring-BpdB0aFi.js → loading-ring-B8-30Dl1.js} +1 -1
- package/dist/menu-DU60SMdt.js +216 -0
- package/dist/menu.js +1 -1
- package/dist/navigation-DhnKriOp.js +197 -0
- package/dist/navigation.js +1 -1
- package/dist/pagination-DYdwsxwe.js +156 -0
- package/dist/pagination.js +1 -1
- package/dist/pill-DO2gHzMb.js +56 -0
- package/dist/pill.js +1 -1
- package/dist/popover-BtN_0ejj.js +113 -0
- package/dist/popover.js +1 -1
- package/dist/progress-BpJswTG4.js +90 -0
- package/dist/progress.js +1 -1
- package/dist/radio-group-Ce0_IWQr.js +145 -0
- package/dist/radio-group.js +1 -1
- package/dist/select-BCS0-LVW.js +286 -0
- package/dist/select.js +1 -1
- package/dist/skeleton-OoFlOEXO.js +54 -0
- package/dist/skeleton.js +1 -1
- package/dist/spinner-C2YDoiMn.js +56 -0
- package/dist/spinner.js +1 -1
- package/dist/stack-DC3IbtWk.js +27 -0
- package/dist/stack.js +1 -1
- package/dist/switch-Dr-qjmT4.js +142 -0
- package/dist/switch.js +1 -1
- package/dist/sx-Dx9JUKp5.js +23 -0
- package/dist/tabs-CK_g1RKa.js +203 -0
- package/dist/tabs.js +1 -1
- package/dist/{text-field-8PQAqRpM.js → text-field-D60ok14S.js} +19 -18
- package/dist/text-field.js +1 -1
- package/dist/{textarea-CcGWuntL.js → textarea-DyfjtP0A.js} +19 -18
- package/dist/textarea.js +1 -1
- package/dist/theme-root-BiXXvQvr.js +42 -0
- package/dist/theme-root.js +1 -1
- package/dist/toast-iqelR-r0.js +282 -0
- package/dist/toast.js +1 -1
- package/dist/toggle-group-CI0e7hFm.js +166 -0
- package/dist/toggle-group.js +1 -1
- package/dist/tooltip-CB-HC1js.js +108 -0
- package/dist/tooltip.js +1 -1
- package/dist/{trigger-style-B1GFmH7M.js → trigger-style-B1KVC8O1.js} +1 -1
- package/dist/types/components/accordion/accordion.d.ts +9 -8
- package/dist/types/components/alert/alert.d.ts +3 -2
- package/dist/types/components/avatar/avatar.d.ts +3 -2
- package/dist/types/components/badge/badge.d.ts +3 -2
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +5 -4
- package/dist/types/components/button/button.d.ts +3 -2
- package/dist/types/components/calendar/calendar.d.ts +7 -6
- package/dist/types/components/card/card.d.ts +13 -12
- package/dist/types/components/checkbox/checkbox.d.ts +3 -2
- package/dist/types/components/combobox/combobox.d.ts +8 -7
- package/dist/types/components/command-palette/command-palette.d.ts +15 -14
- package/dist/types/components/container/container.d.ts +3 -2
- package/dist/types/components/date-picker/date-picker.d.ts +3 -2
- package/dist/types/components/dialog/dialog.d.ts +11 -10
- package/dist/types/components/divider/divider.d.ts +3 -2
- package/dist/types/components/field/field-anatomy.d.ts +3 -2
- package/dist/types/components/flex/flex.d.ts +3 -2
- package/dist/types/components/kbd/kbd.d.ts +5 -4
- package/dist/types/components/menu/menu.d.ts +9 -8
- package/dist/types/components/navigation/navigation.d.ts +7 -6
- package/dist/types/components/pagination/pagination.d.ts +3 -2
- package/dist/types/components/pill/pill.d.ts +3 -2
- package/dist/types/components/popover/popover.d.ts +5 -4
- package/dist/types/components/progress/progress.d.ts +3 -2
- package/dist/types/components/radio-group/radio-group.d.ts +5 -4
- package/dist/types/components/select/select.d.ts +9 -8
- package/dist/types/components/skeleton/skeleton.d.ts +3 -2
- package/dist/types/components/spinner/spinner.d.ts +3 -2
- package/dist/types/components/stack/stack.d.ts +1 -1
- package/dist/types/components/switch/switch.d.ts +3 -2
- package/dist/types/components/tabs/tabs.d.ts +9 -8
- package/dist/types/components/text-field/text-field.d.ts +3 -2
- package/dist/types/components/textarea/textarea.d.ts +3 -2
- package/dist/types/components/theme-provider/theme-provider.d.ts +11 -0
- package/dist/types/components/theme-root/theme-root.d.ts +3 -2
- package/dist/types/components/toast/toast.d.ts +3 -2
- package/dist/types/components/toggle-group/toggle-group.d.ts +5 -4
- package/dist/types/components/tooltip/tooltip.d.ts +5 -4
- package/dist/types/index.d.ts +4 -0
- package/dist/types/styling/css.d.ts +3 -2
- package/dist/types/styling/styled.d.ts +1 -0
- package/dist/types/styling/sx.d.ts +16 -0
- package/dist/types/styling/theme.d.ts +98 -0
- package/dist/{visually-hidden-DCWhf0Cb.js → visually-hidden-BJdvqqvn.js} +1 -1
- package/package.json +3 -2
- package/dist/accordion-CkOZ-tvs.js +0 -178
- package/dist/alert-Dsjx14UW.js +0 -131
- package/dist/avatar-BRGKkoSr.js +0 -127
- package/dist/badge-DLxUMsCx.js +0 -104
- package/dist/breadcrumbs-694hF_hm.js +0 -131
- package/dist/button-CoaIcykB.js +0 -190
- package/dist/calendar-Doj7PTdG.js +0 -379
- package/dist/card-2IM71XZj.js +0 -134
- package/dist/checkbox-B7xGNFzp.js +0 -136
- package/dist/combobox-Bjhxv5U3.js +0 -311
- package/dist/command-palette-BhJwm6cS.js +0 -344
- package/dist/container-BhnrGPu-.js +0 -36
- package/dist/css-Cgj6sCHn.js +0 -2
- package/dist/date-picker-Jk8SpoiO.js +0 -245
- package/dist/dialog-fhS07G41.js +0 -187
- package/dist/divider-v_78HYF5.js +0 -79
- package/dist/field-anatomy-BzGw1Ch9.js +0 -105
- package/dist/flex-COZzFqI8.js +0 -22
- package/dist/kbd-CeP8Kfvp.js +0 -61
- package/dist/menu-B6KCbLCr.js +0 -196
- package/dist/navigation-BDht6S2-.js +0 -182
- package/dist/pagination-B50PCaDU.js +0 -151
- package/dist/pill-2_XzBdkD.js +0 -51
- package/dist/popover-DRHbeIVq.js +0 -103
- package/dist/progress-CpsskKTD.js +0 -85
- package/dist/radio-group-DPI5KUCj.js +0 -136
- package/dist/select-C1xGrOhT.js +0 -266
- package/dist/skeleton-DitdP-yz.js +0 -49
- package/dist/spinner-CFq5HPoo.js +0 -51
- package/dist/stack-D_g6NJzo.js +0 -21
- package/dist/switch-B5TTU-oJ.js +0 -138
- package/dist/tabs-C26PWl2c.js +0 -183
- package/dist/theme-root-BRLIA4eb.js +0 -22
- package/dist/toast-B1PXuwZ4.js +0 -277
- package/dist/toggle-group-N_owicT0.js +0 -156
- package/dist/tooltip-BJPisf60.js +0 -98
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { n } from "./focus-ring-BK5W5_NY.js";
|
|
4
|
+
import { n as r } from "./media-D_eA_I-e.js";
|
|
5
|
+
import { t as i } from "./use-controlled-state-CVXDa-qM.js";
|
|
6
|
+
import { t as a } from "./trigger-style-B1KVC8O1.js";
|
|
7
|
+
import { i as o, n as s, r as c, t as l } from "./use-native-dialog-DWpIUVO1.js";
|
|
8
|
+
import { n as u, t as d } from "./surface-DZ4d-2aL.js";
|
|
9
|
+
import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
|
|
10
|
+
import { vars as b } from "@jfrader/tokens/vars";
|
|
11
|
+
import { jsx as x } from "@emotion/react/jsx-runtime";
|
|
12
|
+
//#region src/components/dialog/dialog.tsx
|
|
13
|
+
var S = f(null), C = f(null);
|
|
14
|
+
function w(e) {
|
|
15
|
+
let t = m(S);
|
|
16
|
+
if (!t) throw Error(`Dialog.${e} must be rendered inside <Dialog>.`);
|
|
17
|
+
return t;
|
|
18
|
+
}
|
|
19
|
+
var T = e(d), E = e({
|
|
20
|
+
...u,
|
|
21
|
+
borderRadius: b.radius.lg,
|
|
22
|
+
boxShadow: b.shadow.floating,
|
|
23
|
+
padding: b.space[5],
|
|
24
|
+
minInlineSize: "320px",
|
|
25
|
+
maxInlineSize: "min(560px, calc(100vw - 32px))"
|
|
26
|
+
}), D = e({
|
|
27
|
+
margin: 0,
|
|
28
|
+
marginBlockEnd: b.space[2],
|
|
29
|
+
fontSize: b.textSize.lg,
|
|
30
|
+
fontWeight: b.fontWeight.semibold,
|
|
31
|
+
lineHeight: b.lineHeight.tight
|
|
32
|
+
}), O = e({
|
|
33
|
+
margin: 0,
|
|
34
|
+
marginBlockEnd: b.space[4],
|
|
35
|
+
fontSize: b.textSize.sm,
|
|
36
|
+
color: b.color.textMuted
|
|
37
|
+
}), k = e({
|
|
38
|
+
appearance: "none",
|
|
39
|
+
display: "inline-flex",
|
|
40
|
+
alignItems: "center",
|
|
41
|
+
border: "1px solid transparent",
|
|
42
|
+
borderRadius: b.radius.md,
|
|
43
|
+
backgroundColor: "transparent",
|
|
44
|
+
paddingBlock: b.space[1],
|
|
45
|
+
paddingInline: b.space[3],
|
|
46
|
+
font: "inherit",
|
|
47
|
+
fontSize: b.textSize.sm,
|
|
48
|
+
fontWeight: b.fontWeight.medium,
|
|
49
|
+
color: b.color.textMuted,
|
|
50
|
+
cursor: "pointer",
|
|
51
|
+
transitionProperty: "background-color, color",
|
|
52
|
+
transitionDuration: b.motion.duration.fast,
|
|
53
|
+
transitionTimingFunction: b.motion.easeStandard,
|
|
54
|
+
"&:hover:not(:disabled)": {
|
|
55
|
+
backgroundColor: b.color.surfaceHover,
|
|
56
|
+
color: b.color.text
|
|
57
|
+
},
|
|
58
|
+
"&:focus-visible": { ...n },
|
|
59
|
+
"&:disabled": {
|
|
60
|
+
opacity: .55,
|
|
61
|
+
cursor: "not-allowed"
|
|
62
|
+
},
|
|
63
|
+
[r]: { transitionDuration: "0s" }
|
|
64
|
+
});
|
|
65
|
+
function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
|
|
66
|
+
let a = g(), [s = !1, c] = i(e, t, n), { setDialogElement: l, setOpen: u, requestClose: d, repairToken: f } = o(s, c), [p, m] = y(!1), [h, v] = y(!1), b = _(() => ({
|
|
67
|
+
open: s,
|
|
68
|
+
setOpen: u,
|
|
69
|
+
requestClose: d,
|
|
70
|
+
repairToken: f,
|
|
71
|
+
setDialogElement: l,
|
|
72
|
+
titleId: `${a}-title`,
|
|
73
|
+
descriptionId: `${a}-description`,
|
|
74
|
+
hasTitle: p,
|
|
75
|
+
hasDescription: h,
|
|
76
|
+
setHasTitle: m,
|
|
77
|
+
setHasDescription: v
|
|
78
|
+
}), [
|
|
79
|
+
s,
|
|
80
|
+
u,
|
|
81
|
+
d,
|
|
82
|
+
f,
|
|
83
|
+
l,
|
|
84
|
+
a,
|
|
85
|
+
p,
|
|
86
|
+
h
|
|
87
|
+
]);
|
|
88
|
+
return /* @__PURE__ */ x(S.Provider, {
|
|
89
|
+
value: b,
|
|
90
|
+
children: r
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
A.displayName = "Dialog";
|
|
94
|
+
function j({ ref: e = null, onClick: n, render: r, className: i, sx: o, ...s }) {
|
|
95
|
+
let { open: c, setOpen: l } = w("Trigger"), { "data-ui": u, ...d } = s, f = n, p = (e) => {
|
|
96
|
+
f?.(e), e.defaultPrevented || l(!0);
|
|
97
|
+
}, m = {
|
|
98
|
+
type: "button",
|
|
99
|
+
...d,
|
|
100
|
+
ref: e,
|
|
101
|
+
"data-ui": r && u !== void 0 ? `${u} dialog-trigger` : "dialog-trigger",
|
|
102
|
+
"aria-haspopup": "dialog",
|
|
103
|
+
"aria-expanded": c,
|
|
104
|
+
onClick: p
|
|
105
|
+
};
|
|
106
|
+
return /* @__PURE__ */ x(t, {
|
|
107
|
+
className: i,
|
|
108
|
+
styles: r ? void 0 : a,
|
|
109
|
+
sx: o,
|
|
110
|
+
children: (e) => r ? r({
|
|
111
|
+
...m,
|
|
112
|
+
className: e
|
|
113
|
+
}) : /* @__PURE__ */ x("button", {
|
|
114
|
+
...m,
|
|
115
|
+
className: e
|
|
116
|
+
})
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
j.displayName = "Dialog.Trigger";
|
|
120
|
+
function M({ ref: e, className: n, sx: r, ...i }) {
|
|
121
|
+
let { children: a, onCancel: o, onClick: u, onClose: d, "aria-labelledby": f, "aria-describedby": m, withDescription: h = !0, ...g } = l(i), _ = w("Content"), { setOpen: y, titleId: b, descriptionId: S, hasTitle: D, hasDescription: O } = _, k = v(null), A = p(() => {
|
|
122
|
+
s(k.current, y);
|
|
123
|
+
}, [y]), j = c({
|
|
124
|
+
..._,
|
|
125
|
+
requestClose: A
|
|
126
|
+
}, {
|
|
127
|
+
onCancel: o,
|
|
128
|
+
onClick: u,
|
|
129
|
+
onClose: d
|
|
130
|
+
}, e, k), M = [f, D && b].filter(Boolean).join(" ") || void 0, N = [m, h && O && S].filter(Boolean).join(" ") || void 0;
|
|
131
|
+
return /* @__PURE__ */ x(t, {
|
|
132
|
+
className: n,
|
|
133
|
+
styles: T,
|
|
134
|
+
sx: r,
|
|
135
|
+
children: (e) => /* @__PURE__ */ x("dialog", {
|
|
136
|
+
...g,
|
|
137
|
+
...j,
|
|
138
|
+
"data-ui": "dialog",
|
|
139
|
+
"aria-modal": "true",
|
|
140
|
+
"aria-labelledby": M,
|
|
141
|
+
"aria-describedby": N,
|
|
142
|
+
className: e,
|
|
143
|
+
children: /* @__PURE__ */ x(C.Provider, {
|
|
144
|
+
value: A,
|
|
145
|
+
children: /* @__PURE__ */ x("div", {
|
|
146
|
+
css: E,
|
|
147
|
+
children: a
|
|
148
|
+
})
|
|
149
|
+
})
|
|
150
|
+
})
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
M.displayName = "Dialog.Content";
|
|
154
|
+
function N({ ref: e, className: n, sx: r, ...i }) {
|
|
155
|
+
let { titleId: a, setHasTitle: o } = w("Title");
|
|
156
|
+
return h(() => (o(!0), () => o(!1)), [o]), /* @__PURE__ */ x(t, {
|
|
157
|
+
className: n,
|
|
158
|
+
styles: D,
|
|
159
|
+
sx: r,
|
|
160
|
+
children: (t) => /* @__PURE__ */ x("h2", {
|
|
161
|
+
...i,
|
|
162
|
+
ref: e,
|
|
163
|
+
id: a,
|
|
164
|
+
"data-ui": "dialog-title",
|
|
165
|
+
className: t
|
|
166
|
+
})
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
N.displayName = "Dialog.Title";
|
|
170
|
+
function P({ ref: e, className: n, sx: r, ...i }) {
|
|
171
|
+
let { descriptionId: a, setHasDescription: o } = w("Description");
|
|
172
|
+
return h(() => (o(!0), () => o(!1)), [o]), /* @__PURE__ */ x(t, {
|
|
173
|
+
className: n,
|
|
174
|
+
styles: O,
|
|
175
|
+
sx: r,
|
|
176
|
+
children: (t) => /* @__PURE__ */ x("p", {
|
|
177
|
+
...i,
|
|
178
|
+
ref: e,
|
|
179
|
+
id: a,
|
|
180
|
+
"data-ui": "dialog-description",
|
|
181
|
+
className: t
|
|
182
|
+
})
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
P.displayName = "Dialog.Description";
|
|
186
|
+
function F({ ref: e = null, onClick: n, render: r, className: i, sx: a, ...o }) {
|
|
187
|
+
let { setOpen: s } = w("Close"), c = m(C), { "data-ui": l, ...u } = o, d = n, f = (e) => {
|
|
188
|
+
d?.(e), !e.defaultPrevented && (c ? c() : s(!1));
|
|
189
|
+
}, p = {
|
|
190
|
+
type: "button",
|
|
191
|
+
...u,
|
|
192
|
+
ref: e,
|
|
193
|
+
"data-ui": r && l !== void 0 ? `${l} dialog-close` : "dialog-close",
|
|
194
|
+
onClick: f
|
|
195
|
+
};
|
|
196
|
+
return /* @__PURE__ */ x(t, {
|
|
197
|
+
className: i,
|
|
198
|
+
styles: r ? void 0 : k,
|
|
199
|
+
sx: a,
|
|
200
|
+
children: (e) => r ? r({
|
|
201
|
+
...p,
|
|
202
|
+
className: e
|
|
203
|
+
}) : /* @__PURE__ */ x("button", {
|
|
204
|
+
...p,
|
|
205
|
+
className: e
|
|
206
|
+
})
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
F.displayName = "Dialog.Close";
|
|
210
|
+
var I = Object.assign(A, {
|
|
211
|
+
Trigger: j,
|
|
212
|
+
Content: M,
|
|
213
|
+
Title: N,
|
|
214
|
+
Description: P,
|
|
215
|
+
Close: F
|
|
216
|
+
});
|
|
217
|
+
//#endregion
|
|
218
|
+
export { I as t };
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Dialog } from "./dialog-
|
|
2
|
+
export { t as Dialog } from "./dialog-xaydbXl2.js";
|
|
@@ -0,0 +1,84 @@
|
|
|
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 } from "@emotion/react/jsx-runtime";
|
|
7
|
+
//#region src/components/divider/divider.tsx
|
|
8
|
+
var o = "@media (forced-colors: active)", s = "1px", c = {
|
|
9
|
+
backgroundColor: i.color.border,
|
|
10
|
+
[o]: {
|
|
11
|
+
forcedColorAdjust: "none",
|
|
12
|
+
backgroundColor: "CanvasText"
|
|
13
|
+
}
|
|
14
|
+
}, l = e({
|
|
15
|
+
...c,
|
|
16
|
+
boxSizing: "border-box",
|
|
17
|
+
alignSelf: "stretch",
|
|
18
|
+
blockSize: s,
|
|
19
|
+
margin: 0,
|
|
20
|
+
border: 0
|
|
21
|
+
}), u = e({
|
|
22
|
+
...c,
|
|
23
|
+
boxSizing: "border-box",
|
|
24
|
+
alignSelf: "stretch",
|
|
25
|
+
flexShrink: 0,
|
|
26
|
+
inlineSize: s
|
|
27
|
+
}), d = e({
|
|
28
|
+
display: "flex",
|
|
29
|
+
alignItems: "center",
|
|
30
|
+
alignSelf: "stretch",
|
|
31
|
+
gap: i.space[3],
|
|
32
|
+
fontFamily: i.font.sans,
|
|
33
|
+
fontSize: i.textSize.sm,
|
|
34
|
+
lineHeight: i.lineHeight.tight,
|
|
35
|
+
color: i.color.textMuted,
|
|
36
|
+
"&::before, &::after": {
|
|
37
|
+
...c,
|
|
38
|
+
content: "\"\"",
|
|
39
|
+
flex: 1,
|
|
40
|
+
blockSize: s
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby": s, className: c, sx: f, ...p }) {
|
|
44
|
+
let m = r(), h = i === "vertical", g = !h && n(o);
|
|
45
|
+
return /* @__PURE__ */ a(t, {
|
|
46
|
+
className: c,
|
|
47
|
+
styles: h ? u : g ? d : l,
|
|
48
|
+
sx: f,
|
|
49
|
+
children: (t) => h ? /* @__PURE__ */ a("div", {
|
|
50
|
+
...p,
|
|
51
|
+
ref: e,
|
|
52
|
+
role: "separator",
|
|
53
|
+
"aria-orientation": "vertical",
|
|
54
|
+
"aria-labelledby": s,
|
|
55
|
+
"data-ui": "divider",
|
|
56
|
+
"data-orientation": "vertical",
|
|
57
|
+
className: t
|
|
58
|
+
}) : g ? /* @__PURE__ */ a("div", {
|
|
59
|
+
...p,
|
|
60
|
+
ref: e,
|
|
61
|
+
role: "separator",
|
|
62
|
+
"aria-orientation": "horizontal",
|
|
63
|
+
"aria-labelledby": [m, s].filter(Boolean).join(" "),
|
|
64
|
+
"data-ui": "divider",
|
|
65
|
+
"data-orientation": "horizontal",
|
|
66
|
+
className: t,
|
|
67
|
+
children: /* @__PURE__ */ a("span", {
|
|
68
|
+
id: m,
|
|
69
|
+
"data-ui": "divider-label",
|
|
70
|
+
children: o
|
|
71
|
+
})
|
|
72
|
+
}) : /* @__PURE__ */ a("hr", {
|
|
73
|
+
...p,
|
|
74
|
+
ref: e,
|
|
75
|
+
"aria-labelledby": s,
|
|
76
|
+
"data-ui": "divider",
|
|
77
|
+
"data-orientation": "horizontal",
|
|
78
|
+
className: t
|
|
79
|
+
})
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
f.displayName = "Divider";
|
|
83
|
+
//#endregion
|
|
84
|
+
export { f as t };
|
package/dist/divider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Divider } from "./divider-
|
|
2
|
+
export { t as Divider } from "./divider-DYoJf0I_.js";
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { n } from "./media-D_eA_I-e.js";
|
|
4
|
+
import { t as r } from "./renderable-DzcIj1Lo.js";
|
|
5
|
+
import { useId as i } from "react";
|
|
6
|
+
import { vars as a } from "@jfrader/tokens/vars";
|
|
7
|
+
import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
|
|
8
|
+
//#region src/styling/input-control.ts
|
|
9
|
+
var c = e({
|
|
10
|
+
display: "block",
|
|
11
|
+
inlineSize: "100%",
|
|
12
|
+
boxSizing: "border-box",
|
|
13
|
+
margin: 0,
|
|
14
|
+
backgroundColor: a.color.surfaceRaised,
|
|
15
|
+
border: `1px solid ${a.color.borderControl}`,
|
|
16
|
+
borderRadius: a.radius.md,
|
|
17
|
+
color: a.color.text,
|
|
18
|
+
fontFamily: a.font.sans,
|
|
19
|
+
transitionProperty: "border-color",
|
|
20
|
+
transitionDuration: a.motion.duration.fast,
|
|
21
|
+
transitionTimingFunction: a.motion.easeStandard,
|
|
22
|
+
"&::placeholder": { color: a.color.textSubtle },
|
|
23
|
+
"&:hover:not(:disabled):not(:focus-visible)": { borderColor: a.color.textSubtle },
|
|
24
|
+
"&:focus-visible": {
|
|
25
|
+
outline: `2px solid ${a.color.focusRing}`,
|
|
26
|
+
outlineOffset: "2px",
|
|
27
|
+
borderColor: a.color.focusRing
|
|
28
|
+
},
|
|
29
|
+
"&:disabled": {
|
|
30
|
+
opacity: .55,
|
|
31
|
+
cursor: "not-allowed"
|
|
32
|
+
},
|
|
33
|
+
"&[aria-invalid=\"true\"]:not(:focus-visible)": { borderColor: a.color.dangerBorder },
|
|
34
|
+
[n]: { transitionDuration: "0s" }
|
|
35
|
+
}), l = e({
|
|
36
|
+
display: "grid",
|
|
37
|
+
gap: a.space[1],
|
|
38
|
+
inlineSize: "100%"
|
|
39
|
+
}), u = e({
|
|
40
|
+
display: "inline-flex",
|
|
41
|
+
gap: a.space[1],
|
|
42
|
+
fontSize: a.textSize.sm,
|
|
43
|
+
fontWeight: a.fontWeight.medium,
|
|
44
|
+
color: a.color.text
|
|
45
|
+
}), d = e({ color: a.color.dangerText }), f = e({
|
|
46
|
+
fontSize: a.textSize.sm,
|
|
47
|
+
color: a.color.textMuted
|
|
48
|
+
}), p = e({
|
|
49
|
+
fontSize: a.textSize.sm,
|
|
50
|
+
color: a.color.dangerText
|
|
51
|
+
});
|
|
52
|
+
function m({ id: e, description: t, error: n, "aria-describedby": a, "aria-invalid": o }) {
|
|
53
|
+
let s = i(), c = e ?? s, l = `${c}-description`, u = `${c}-error`, d = r(t), f = r(n);
|
|
54
|
+
return {
|
|
55
|
+
id: c,
|
|
56
|
+
descriptionId: l,
|
|
57
|
+
errorId: u,
|
|
58
|
+
describedBy: [
|
|
59
|
+
a,
|
|
60
|
+
d && l,
|
|
61
|
+
f && u
|
|
62
|
+
].filter(Boolean).join(" ") || void 0,
|
|
63
|
+
ariaInvalid: f ? !0 : o
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
function h({ "data-ui": e, className: n, sx: r, part: i, children: a }) {
|
|
67
|
+
let s = [n, i?.className].filter(Boolean).join(" ") || void 0;
|
|
68
|
+
return /* @__PURE__ */ o(t, {
|
|
69
|
+
className: s,
|
|
70
|
+
styles: [l, i?.css],
|
|
71
|
+
sx: r,
|
|
72
|
+
children: (t) => /* @__PURE__ */ o("div", {
|
|
73
|
+
"data-ui": e,
|
|
74
|
+
className: t,
|
|
75
|
+
children: a
|
|
76
|
+
})
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
function g({ htmlFor: e, required: t, part: n, children: i }) {
|
|
80
|
+
return r(i) ? /* @__PURE__ */ s("label", {
|
|
81
|
+
htmlFor: e,
|
|
82
|
+
className: n?.className,
|
|
83
|
+
css: [u, n?.css],
|
|
84
|
+
children: [i, t && /* @__PURE__ */ o("span", {
|
|
85
|
+
"aria-hidden": !0,
|
|
86
|
+
css: d,
|
|
87
|
+
children: " *"
|
|
88
|
+
})]
|
|
89
|
+
}) : null;
|
|
90
|
+
}
|
|
91
|
+
function _({ id: e, part: t, children: n }) {
|
|
92
|
+
return r(n) ? /* @__PURE__ */ o("span", {
|
|
93
|
+
id: e,
|
|
94
|
+
className: t?.className,
|
|
95
|
+
css: [f, t?.css],
|
|
96
|
+
children: n
|
|
97
|
+
}) : null;
|
|
98
|
+
}
|
|
99
|
+
function v({ id: e, part: t, children: n }) {
|
|
100
|
+
return r(n) ? /* @__PURE__ */ o("span", {
|
|
101
|
+
id: e,
|
|
102
|
+
role: "alert",
|
|
103
|
+
className: t?.className,
|
|
104
|
+
css: [p, t?.css],
|
|
105
|
+
children: n
|
|
106
|
+
}) : null;
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
export { m as a, h as i, v as n, c as o, g as r, _ as t };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { t as e } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { t } from "./layout-style-Cbd1Vilw.js";
|
|
4
|
+
import { jsx as n } from "@emotion/react/jsx-runtime";
|
|
5
|
+
//#region src/components/flex/flex.tsx
|
|
6
|
+
function r({ ref: r, direction: i, wrap: a, inline: o, align: s, justify: c, gap: l, className: u, sx: d, ...f }) {
|
|
7
|
+
return /* @__PURE__ */ n(e, {
|
|
8
|
+
className: u,
|
|
9
|
+
styles: t({
|
|
10
|
+
direction: i,
|
|
11
|
+
wrap: a,
|
|
12
|
+
inline: o,
|
|
13
|
+
align: s,
|
|
14
|
+
justify: c,
|
|
15
|
+
gap: l
|
|
16
|
+
}),
|
|
17
|
+
sx: d,
|
|
18
|
+
children: (e) => /* @__PURE__ */ n("div", {
|
|
19
|
+
...f,
|
|
20
|
+
ref: r,
|
|
21
|
+
"data-ui": "flex",
|
|
22
|
+
className: e
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
r.displayName = "Flex";
|
|
27
|
+
//#endregion
|
|
28
|
+
export { r as t };
|
package/dist/flex.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Flex } from "./flex-
|
|
2
|
+
export { t as Flex } from "./flex-Dh-_J5-U.js";
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,39 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { t as e } from "./accordion-
|
|
3
|
-
import { t } from "./alert-
|
|
4
|
-
import { t as n } from "./avatar-
|
|
5
|
-
import { t as r } from "./badge-
|
|
6
|
-
import { t as i } from "./breadcrumbs-
|
|
7
|
-
import { t as a } from "./button-
|
|
8
|
-
import { t as o } from "./calendar-
|
|
9
|
-
import { t as s } from "./card-
|
|
10
|
-
import { t as c } from "./checkbox-
|
|
11
|
-
import { t as l } from "./command-palette-
|
|
12
|
-
import { t as u } from "./text-field-
|
|
13
|
-
import { t as d } from "./combobox-
|
|
14
|
-
import { t as f } from "./container-
|
|
15
|
-
import { t as p } from "./date-picker-
|
|
16
|
-
import { t as m } from "./dialog-
|
|
17
|
-
import { t as h } from "./divider-
|
|
18
|
-
import { t as g } from "./flex-
|
|
19
|
-
import { t as _ } from "./kbd-
|
|
20
|
-
import { t as v } from "./menu-
|
|
21
|
-
import { t as y } from "./navigation-
|
|
22
|
-
import { t as b } from "./pagination-
|
|
23
|
-
import { t as x } from "./pill-
|
|
24
|
-
import { t as S } from "./popover-
|
|
25
|
-
import { t as C } from "./progress-
|
|
26
|
-
import { t as w } from "./radio-group-
|
|
27
|
-
import { t as T } from "./select-
|
|
28
|
-
import { t as E } from "./skeleton-
|
|
29
|
-
import { t as D } from "./spinner-
|
|
30
|
-
import { t as O } from "./stack-
|
|
31
|
-
import { t as k } from "./switch-
|
|
32
|
-
import { t as A } from "./tabs-
|
|
33
|
-
import { t as j } from "./textarea-
|
|
34
|
-
import {
|
|
35
|
-
import { n as
|
|
36
|
-
import { t as
|
|
37
|
-
import { t as
|
|
38
|
-
|
|
2
|
+
import { t as e } from "./accordion-Bd-j04hW.js";
|
|
3
|
+
import { t } from "./alert-BBqaKI4k.js";
|
|
4
|
+
import { t as n } from "./avatar-BahDVO9t.js";
|
|
5
|
+
import { t as r } from "./badge-B_sLygxU.js";
|
|
6
|
+
import { t as i } from "./breadcrumbs-DVAOxfvL.js";
|
|
7
|
+
import { t as a } from "./button-P2e7_44z.js";
|
|
8
|
+
import { t as o } from "./calendar-C9Yad_-w.js";
|
|
9
|
+
import { t as s } from "./card-D-aI2QHx.js";
|
|
10
|
+
import { t as c } from "./checkbox-COYG6L7d.js";
|
|
11
|
+
import { t as l } from "./command-palette-V_2pEay7.js";
|
|
12
|
+
import { t as u } from "./text-field-D60ok14S.js";
|
|
13
|
+
import { t as d } from "./combobox-DrmjBbo7.js";
|
|
14
|
+
import { t as f } from "./container-BOaSptJa.js";
|
|
15
|
+
import { t as p } from "./date-picker-ClUYBIBh.js";
|
|
16
|
+
import { t as m } from "./dialog-xaydbXl2.js";
|
|
17
|
+
import { t as h } from "./divider-DYoJf0I_.js";
|
|
18
|
+
import { t as g } from "./flex-Dh-_J5-U.js";
|
|
19
|
+
import { t as _ } from "./kbd-C3ACoMoE.js";
|
|
20
|
+
import { t as v } from "./menu-DU60SMdt.js";
|
|
21
|
+
import { t as y } from "./navigation-DhnKriOp.js";
|
|
22
|
+
import { t as b } from "./pagination-DYdwsxwe.js";
|
|
23
|
+
import { t as x } from "./pill-DO2gHzMb.js";
|
|
24
|
+
import { t as S } from "./popover-BtN_0ejj.js";
|
|
25
|
+
import { t as C } from "./progress-BpJswTG4.js";
|
|
26
|
+
import { t as w } from "./radio-group-Ce0_IWQr.js";
|
|
27
|
+
import { t as T } from "./select-BCS0-LVW.js";
|
|
28
|
+
import { t as E } from "./skeleton-OoFlOEXO.js";
|
|
29
|
+
import { t as D } from "./spinner-C2YDoiMn.js";
|
|
30
|
+
import { t as O } from "./stack-DC3IbtWk.js";
|
|
31
|
+
import { t as k } from "./switch-Dr-qjmT4.js";
|
|
32
|
+
import { t as A } from "./tabs-CK_g1RKa.js";
|
|
33
|
+
import { t as j } from "./textarea-DyfjtP0A.js";
|
|
34
|
+
import { i as M, n as N, r as P, t as F } from "./theme-root-BiXXvQvr.js";
|
|
35
|
+
import { n as I, t as L } from "./toast-iqelR-r0.js";
|
|
36
|
+
import { t as R } from "./toggle-group-CI0e7hFm.js";
|
|
37
|
+
import { t as z } from "./tooltip-CB-HC1js.js";
|
|
38
|
+
import B from "@emotion/styled";
|
|
39
|
+
export { e as Accordion, t as Alert, n as Avatar, r as Badge, i as Breadcrumbs, a as Button, o as Calendar, s as Card, c as Checkbox, d as Combobox, l as CommandPalette, f as Container, p as DatePicker, m as Dialog, h as Divider, g as Flex, _ as Kbd, v as Menu, y as Navigation, b as Pagination, x as Pill, S as Popover, C as Progress, w as RadioGroup, T as Select, E as Skeleton, D as Spinner, O as Stack, k as Switch, A as Tabs, u as TextField, j as Textarea, N as ThemeProvider, F as ThemeRoot, L as Toast, R as ToggleGroup, z as Tooltip, B as styled, M as theme, P as useTheme, I as useToast };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { Children as n, Fragment as r } from "react";
|
|
4
|
+
import { vars as i } from "@jfrader/tokens/vars";
|
|
5
|
+
import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
|
|
6
|
+
//#region src/components/kbd/kbd.tsx
|
|
7
|
+
var s = "+", c = e({
|
|
8
|
+
display: "inline-flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
boxSizing: "border-box",
|
|
11
|
+
paddingBlock: "2px",
|
|
12
|
+
paddingInline: "6px",
|
|
13
|
+
backgroundColor: i.color.surfaceHover,
|
|
14
|
+
border: `1px solid ${i.color.borderSubtle}`,
|
|
15
|
+
borderBlockEndColor: i.color.borderStrong,
|
|
16
|
+
borderBlockEndWidth: "2px",
|
|
17
|
+
borderRadius: i.radius.sm,
|
|
18
|
+
fontFamily: i.font.mono,
|
|
19
|
+
fontSize: i.textSize.xs,
|
|
20
|
+
fontWeight: i.fontWeight.medium,
|
|
21
|
+
lineHeight: i.lineHeight.tight,
|
|
22
|
+
color: i.color.text,
|
|
23
|
+
whiteSpace: "nowrap",
|
|
24
|
+
verticalAlign: "middle"
|
|
25
|
+
}), l = e({
|
|
26
|
+
display: "inline-flex",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
gap: i.space[1],
|
|
29
|
+
verticalAlign: "middle"
|
|
30
|
+
}), u = e({
|
|
31
|
+
fontFamily: i.font.sans,
|
|
32
|
+
fontSize: i.textSize.xs,
|
|
33
|
+
color: i.color.textMuted
|
|
34
|
+
});
|
|
35
|
+
function d({ ref: e, className: n, sx: r, ...i }) {
|
|
36
|
+
return /* @__PURE__ */ a(t, {
|
|
37
|
+
className: n,
|
|
38
|
+
styles: c,
|
|
39
|
+
sx: r,
|
|
40
|
+
children: (t) => /* @__PURE__ */ a("kbd", {
|
|
41
|
+
...i,
|
|
42
|
+
ref: e,
|
|
43
|
+
"data-ui": "kbd",
|
|
44
|
+
className: t
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
d.displayName = "Kbd";
|
|
49
|
+
function f({ ref: e, children: i, className: c, sx: d, ...f }) {
|
|
50
|
+
return /* @__PURE__ */ a(t, {
|
|
51
|
+
className: c,
|
|
52
|
+
styles: l,
|
|
53
|
+
sx: d,
|
|
54
|
+
children: (t) => /* @__PURE__ */ a("span", {
|
|
55
|
+
...f,
|
|
56
|
+
ref: e,
|
|
57
|
+
"data-ui": "kbd-group",
|
|
58
|
+
className: t,
|
|
59
|
+
children: n.toArray(i).map((e, t) => /* @__PURE__ */ o(r, { children: [t > 0 && /* @__PURE__ */ a("span", {
|
|
60
|
+
"aria-hidden": !0,
|
|
61
|
+
"data-ui": "kbd-separator",
|
|
62
|
+
css: u,
|
|
63
|
+
children: s
|
|
64
|
+
}), e] }, t))
|
|
65
|
+
})
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
f.displayName = "Kbd.Group";
|
|
69
|
+
var p = Object.assign(d, { Group: f });
|
|
70
|
+
//#endregion
|
|
71
|
+
export { p as t };
|
package/dist/kbd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Kbd } from "./kbd-
|
|
2
|
+
export { t as Kbd } from "./kbd-C3ACoMoE.js";
|