@jfrader/ui 0.1.2 → 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/README.md +1 -1
- package/dist/accordion-Bd-j04hW.js +198 -0
- package/dist/accordion.js +1 -1
- package/dist/{alert-CA9ZlIZp.js → alert-BBqaKI4k.js} +57 -52
- package/dist/alert.js +1 -1
- package/dist/{avatar-IUW4yJl0.js → avatar-BahDVO9t.js} +40 -33
- package/dist/avatar.js +1 -1
- package/dist/{badge-Bru30HEn.js → badge-B_sLygxU.js} +32 -27
- package/dist/badge.js +1 -1
- package/dist/breadcrumbs-DVAOxfvL.js +141 -0
- package/dist/breadcrumbs.js +1 -1
- package/dist/{button-Cmixur4Q.js → button-P2e7_44z.js} +65 -53
- 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-DrHJMt2p.js → date-picker-ClUYBIBh.js} +69 -59
- 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-B03_qIwQ.js → kbd-C3ACoMoE.js} +36 -21
- 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-CrVqffKM.js → pill-DO2gHzMb.js} +16 -10
- 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-gJ4ImO5u.js → skeleton-OoFlOEXO.js} +24 -18
- 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-2hm2WnWt.js → switch-Dr-qjmT4.js} +63 -57
- 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-D60ok14S.js +76 -0
- package/dist/text-field.js +1 -1
- package/dist/textarea-DyfjtP0A.js +86 -0
- package/dist/textarea.js +1 -1
- package/dist/theme-root-BiXXvQvr.js +42 -0
- package/dist/theme-root.js +1 -1
- package/dist/{toast-D3Y6OAsg.js → toast-iqelR-r0.js} +41 -30
- 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 +14 -9
- package/dist/types/components/alert/alert.d.ts +7 -3
- package/dist/types/components/avatar/avatar.d.ts +7 -3
- package/dist/types/components/badge/badge.d.ts +7 -3
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +9 -5
- package/dist/types/components/button/button.d.ts +7 -3
- package/dist/types/components/calendar/calendar.d.ts +12 -7
- package/dist/types/components/card/card.d.ts +21 -13
- package/dist/types/components/checkbox/checkbox.d.ts +7 -3
- package/dist/types/components/combobox/combobox.d.ts +13 -8
- package/dist/types/components/command-palette/command-palette.d.ts +23 -15
- package/dist/types/components/container/container.d.ts +7 -3
- package/dist/types/components/date-picker/date-picker.d.ts +7 -4
- package/dist/types/components/dialog/dialog.d.ts +17 -11
- package/dist/types/components/divider/divider.d.ts +7 -3
- package/dist/types/components/field/field-anatomy.d.ts +3 -2
- package/dist/types/components/flex/flex.d.ts +7 -3
- package/dist/types/components/kbd/kbd.d.ts +9 -5
- package/dist/types/components/menu/menu.d.ts +14 -9
- package/dist/types/components/navigation/navigation.d.ts +12 -7
- package/dist/types/components/pagination/pagination.d.ts +7 -3
- package/dist/types/components/pill/pill.d.ts +7 -3
- package/dist/types/components/popover/popover.d.ts +8 -5
- package/dist/types/components/progress/progress.d.ts +7 -3
- package/dist/types/components/radio-group/radio-group.d.ts +9 -5
- package/dist/types/components/select/select.d.ts +14 -9
- package/dist/types/components/skeleton/skeleton.d.ts +7 -3
- package/dist/types/components/spinner/spinner.d.ts +7 -3
- package/dist/types/components/stack/stack.d.ts +4 -1
- package/dist/types/components/switch/switch.d.ts +7 -3
- package/dist/types/components/tabs/tabs.d.ts +15 -9
- package/dist/types/components/text-field/text-field.d.ts +7 -3
- package/dist/types/components/textarea/textarea.d.ts +7 -3
- package/dist/types/components/theme-provider/theme-provider.d.ts +11 -0
- package/dist/types/components/theme-root/theme-root.d.ts +7 -3
- package/dist/types/components/toast/toast.d.ts +7 -4
- package/dist/types/components/toggle-group/toggle-group.d.ts +8 -5
- package/dist/types/components/tooltip/tooltip.d.ts +8 -5
- package/dist/types/index.d.ts +4 -0
- package/dist/types/overlay/use-native-dialog.d.ts +2 -2
- 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 +5 -4
- package/dist/accordion-C3YbYFBi.js +0 -169
- package/dist/breadcrumbs-CQaviWRc.js +0 -126
- package/dist/calendar-DUgS0xmp.js +0 -373
- package/dist/card-D9CHtouU.js +0 -121
- package/dist/checkbox-DKa5BCdy.js +0 -135
- package/dist/combobox-Dq3V88Zt.js +0 -302
- package/dist/command-palette-6c158eH1.js +0 -329
- package/dist/container-xUEIoZzj.js +0 -35
- package/dist/css-Cgj6sCHn.js +0 -2
- package/dist/dialog-C2NSOOP-.js +0 -176
- package/dist/divider-yF5EmhhT.js +0 -77
- package/dist/field-anatomy-BzGw1Ch9.js +0 -105
- package/dist/flex-5-NI5SSy.js +0 -22
- package/dist/menu-bvKRJOhJ.js +0 -187
- package/dist/navigation-xPoqh_Iz.js +0 -175
- package/dist/pagination-BIKYsxK1.js +0 -149
- package/dist/popover-CVAZ_C1a.js +0 -98
- package/dist/progress-C8bgujFI.js +0 -84
- package/dist/radio-group-CvQ4x8ii.js +0 -131
- package/dist/select-CNNiUhKB.js +0 -257
- package/dist/spinner-CSFiP0Oi.js +0 -50
- package/dist/stack-mEAryjKz.js +0 -21
- package/dist/tabs-GBppQabg.js +0 -174
- package/dist/text-field-DDPqQu29.js +0 -74
- package/dist/textarea-OP8_3IUR.js +0 -84
- package/dist/theme-root-eLka0ZP1.js +0 -21
- package/dist/toggle-group-BxzJ-6Cp.js +0 -151
- package/dist/tooltip-CVl8HS4S.js +0 -93
package/README.md
CHANGED
|
@@ -58,7 +58,7 @@ import { Dialog } from '@jfrader/ui/dialog';
|
|
|
58
58
|
import { ThemeRoot } from '@jfrader/ui/theme-root';
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
`react` and `react-dom` (
|
|
61
|
+
`react` and `react-dom` (`^19.0.0`) are peer dependencies.
|
|
62
62
|
|
|
63
63
|
Next.js App Router: see [Next.js App Router](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router) for the required Emotion registry.
|
|
64
64
|
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { t as n } from "./disclosure-caret-C5T3fcl6.js";
|
|
4
|
+
import { t as r } from "./focus-ring-BK5W5_NY.js";
|
|
5
|
+
import { n as i } from "./media-D_eA_I-e.js";
|
|
6
|
+
import { n as a } from "./roving-focus-CYlo_Kf8.js";
|
|
7
|
+
import { t as o } from "./use-controlled-state-CVXDa-qM.js";
|
|
8
|
+
import { createContext as s, useContext as c, useId as l, useMemo as u } from "react";
|
|
9
|
+
import { vars as d } from "@jfrader/tokens/vars";
|
|
10
|
+
import { jsx as f } from "@emotion/react/jsx-runtime";
|
|
11
|
+
//#region src/components/accordion/accordion.tsx
|
|
12
|
+
var p = s(null), m = s(null);
|
|
13
|
+
function h(e) {
|
|
14
|
+
let t = c(p);
|
|
15
|
+
if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
|
|
16
|
+
return t;
|
|
17
|
+
}
|
|
18
|
+
function g(e) {
|
|
19
|
+
let t = c(m);
|
|
20
|
+
if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
|
|
21
|
+
return t;
|
|
22
|
+
}
|
|
23
|
+
var _ = "", v = {
|
|
24
|
+
itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
|
|
25
|
+
ownerSelector: "[data-ui=\"accordion\"]"
|
|
26
|
+
}, y = (e, t) => {
|
|
27
|
+
if (t === "multiple" && Array.isArray(e)) return e;
|
|
28
|
+
let n = Array.isArray(e) ? e[0] : e;
|
|
29
|
+
return n === void 0 || n === _ ? [] : [n];
|
|
30
|
+
}, b = e({
|
|
31
|
+
borderBlockEnd: `1px solid ${d.color.border}`,
|
|
32
|
+
"&:first-of-type": { borderBlockStart: `1px solid ${d.color.border}` }
|
|
33
|
+
}), x = e({
|
|
34
|
+
margin: 0,
|
|
35
|
+
font: "inherit"
|
|
36
|
+
}), S = e({
|
|
37
|
+
appearance: "none",
|
|
38
|
+
display: "flex",
|
|
39
|
+
alignItems: "center",
|
|
40
|
+
justifyContent: "space-between",
|
|
41
|
+
gap: d.space[3],
|
|
42
|
+
inlineSize: "100%",
|
|
43
|
+
border: 0,
|
|
44
|
+
background: "transparent",
|
|
45
|
+
cursor: "pointer",
|
|
46
|
+
paddingBlock: d.space[3],
|
|
47
|
+
paddingInline: d.space[4],
|
|
48
|
+
font: "inherit",
|
|
49
|
+
fontSize: d.textSize.sm,
|
|
50
|
+
fontWeight: d.fontWeight.medium,
|
|
51
|
+
color: d.color.text,
|
|
52
|
+
textAlign: "start",
|
|
53
|
+
transitionProperty: "background-color",
|
|
54
|
+
transitionDuration: d.motion.duration.fast,
|
|
55
|
+
transitionTimingFunction: d.motion.easeStandard,
|
|
56
|
+
"&::after": { ...n },
|
|
57
|
+
"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
|
|
58
|
+
"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
|
|
59
|
+
"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: d.color.surfaceHover },
|
|
60
|
+
"&[aria-disabled=\"true\"]": { cursor: "default" },
|
|
61
|
+
"&:disabled": {
|
|
62
|
+
opacity: .55,
|
|
63
|
+
cursor: "not-allowed"
|
|
64
|
+
},
|
|
65
|
+
"&:focus-visible": { ...r },
|
|
66
|
+
[i]: {
|
|
67
|
+
transitionDuration: "0s",
|
|
68
|
+
"&::after": { transitionDuration: "0s" }
|
|
69
|
+
}
|
|
70
|
+
}), C = e({
|
|
71
|
+
paddingBlock: d.space[3],
|
|
72
|
+
paddingInline: d.space[4],
|
|
73
|
+
color: d.color.textMuted,
|
|
74
|
+
lineHeight: d.lineHeight.relaxed,
|
|
75
|
+
"&[hidden]": { display: "none" }
|
|
76
|
+
});
|
|
77
|
+
function w({ ref: e, value: n, defaultValue: r, onValueChange: i, type: s = "single", collapsible: c = !0, onKeyDown: l, className: d, sx: m, ...h }) {
|
|
78
|
+
let [g, b] = o(n, r, i), x = u(() => {
|
|
79
|
+
let e = y(g, s), t = c || e.length > 1;
|
|
80
|
+
return {
|
|
81
|
+
openValues: e,
|
|
82
|
+
toggle: (n) => {
|
|
83
|
+
let r = e.includes(n);
|
|
84
|
+
(!r || t) && b(s === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? _ : n);
|
|
85
|
+
},
|
|
86
|
+
canCollapse: t
|
|
87
|
+
};
|
|
88
|
+
}, [
|
|
89
|
+
g,
|
|
90
|
+
b,
|
|
91
|
+
s,
|
|
92
|
+
c
|
|
93
|
+
]), S = (e) => {
|
|
94
|
+
l?.(e), !e.defaultPrevented && a(e, e.currentTarget, "vertical", v);
|
|
95
|
+
};
|
|
96
|
+
return /* @__PURE__ */ f(p.Provider, {
|
|
97
|
+
value: x,
|
|
98
|
+
children: /* @__PURE__ */ f(t, {
|
|
99
|
+
className: d,
|
|
100
|
+
sx: m,
|
|
101
|
+
children: (t) => /* @__PURE__ */ f("div", {
|
|
102
|
+
...h,
|
|
103
|
+
ref: e,
|
|
104
|
+
"data-ui": "accordion",
|
|
105
|
+
onKeyDown: S,
|
|
106
|
+
className: t
|
|
107
|
+
})
|
|
108
|
+
})
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
w.displayName = "Accordion";
|
|
112
|
+
function T({ ref: e, value: n, disabled: r = !1, className: i, sx: a, ...o }) {
|
|
113
|
+
let { openValues: s } = h("Item"), c = l(), d = s.includes(n), p = u(() => ({
|
|
114
|
+
value: n,
|
|
115
|
+
disabled: r,
|
|
116
|
+
expanded: d,
|
|
117
|
+
triggerId: `${c}-trigger`,
|
|
118
|
+
panelId: `${c}-panel`
|
|
119
|
+
}), [
|
|
120
|
+
n,
|
|
121
|
+
r,
|
|
122
|
+
d,
|
|
123
|
+
c
|
|
124
|
+
]);
|
|
125
|
+
return /* @__PURE__ */ f(m.Provider, {
|
|
126
|
+
value: p,
|
|
127
|
+
children: /* @__PURE__ */ f(t, {
|
|
128
|
+
className: i,
|
|
129
|
+
styles: b,
|
|
130
|
+
sx: a,
|
|
131
|
+
children: (t) => /* @__PURE__ */ f("div", {
|
|
132
|
+
...o,
|
|
133
|
+
ref: e,
|
|
134
|
+
"data-ui": "accordion-item",
|
|
135
|
+
"data-state": d ? "open" : "closed",
|
|
136
|
+
"data-disabled": r ? "" : void 0,
|
|
137
|
+
className: t
|
|
138
|
+
})
|
|
139
|
+
})
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
T.displayName = "Accordion.Item";
|
|
143
|
+
function E({ ref: e, onClick: n, disabled: r, className: i, sx: a, ...o }) {
|
|
144
|
+
let { toggle: s, canCollapse: c } = h("Trigger"), { value: l, disabled: u, expanded: d, triggerId: p, panelId: m } = g("Trigger"), _ = d && !c, v = (e) => {
|
|
145
|
+
n?.(e), !e.defaultPrevented && s(l);
|
|
146
|
+
};
|
|
147
|
+
return /* @__PURE__ */ f("h3", {
|
|
148
|
+
"data-ui": "accordion-heading",
|
|
149
|
+
css: x,
|
|
150
|
+
children: /* @__PURE__ */ f(t, {
|
|
151
|
+
className: i,
|
|
152
|
+
styles: S,
|
|
153
|
+
sx: a,
|
|
154
|
+
children: (t) => /* @__PURE__ */ f("button", {
|
|
155
|
+
...o,
|
|
156
|
+
ref: e,
|
|
157
|
+
type: "button",
|
|
158
|
+
id: p,
|
|
159
|
+
"data-ui": "accordion-trigger",
|
|
160
|
+
"data-state": d ? "open" : "closed",
|
|
161
|
+
"aria-expanded": d,
|
|
162
|
+
"aria-controls": m,
|
|
163
|
+
"aria-disabled": _ || void 0,
|
|
164
|
+
disabled: u || r,
|
|
165
|
+
onClick: v,
|
|
166
|
+
className: t
|
|
167
|
+
})
|
|
168
|
+
})
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
E.displayName = "Accordion.Trigger";
|
|
172
|
+
function D({ ref: e, "aria-labelledby": n, className: r, sx: i, ...a }) {
|
|
173
|
+
let { expanded: o, triggerId: s, panelId: c } = g("Panel"), l = [n, s].filter(Boolean).join(" ");
|
|
174
|
+
return /* @__PURE__ */ f(t, {
|
|
175
|
+
className: r,
|
|
176
|
+
styles: C,
|
|
177
|
+
sx: i,
|
|
178
|
+
children: (t) => /* @__PURE__ */ f("div", {
|
|
179
|
+
...a,
|
|
180
|
+
ref: e,
|
|
181
|
+
role: "region",
|
|
182
|
+
id: c,
|
|
183
|
+
"aria-labelledby": l,
|
|
184
|
+
hidden: !o,
|
|
185
|
+
"data-ui": "accordion-panel",
|
|
186
|
+
"data-state": o ? "open" : "closed",
|
|
187
|
+
className: t
|
|
188
|
+
})
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
D.displayName = "Accordion.Panel";
|
|
192
|
+
var O = Object.assign(w, {
|
|
193
|
+
Item: T,
|
|
194
|
+
Trigger: E,
|
|
195
|
+
Panel: D
|
|
196
|
+
});
|
|
197
|
+
//#endregion
|
|
198
|
+
export { O as t };
|
package/dist/accordion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Accordion } from "./accordion-
|
|
2
|
+
export { t as Accordion } from "./accordion-Bd-j04hW.js";
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
3
|
-
import { n
|
|
4
|
-
import { n } from "./media-D_eA_I-e.js";
|
|
5
|
-
import { t as
|
|
6
|
-
import { t as
|
|
7
|
-
import { forwardRef as a } from "react";
|
|
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 "./visually-hidden-BJdvqqvn.js";
|
|
6
|
+
import { t as a } from "./renderable-DzcIj1Lo.js";
|
|
8
7
|
import { vars as o } from "@jfrader/tokens/vars";
|
|
9
8
|
import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
|
|
10
9
|
//#region src/components/alert/alert.tsx
|
|
@@ -76,55 +75,61 @@ var l = {
|
|
|
76
75
|
backgroundColor: o.color.surfaceHover,
|
|
77
76
|
color: o.color.text
|
|
78
77
|
},
|
|
79
|
-
"&:focus-visible": { ...
|
|
80
|
-
[
|
|
81
|
-
})
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"data-tone": e,
|
|
88
|
-
className: [y, v?.root?.className].filter(Boolean).join(" ") || void 0,
|
|
89
|
-
css: [
|
|
78
|
+
"&:focus-visible": { ...n },
|
|
79
|
+
[r]: { transitionDuration: "0s" }
|
|
80
|
+
});
|
|
81
|
+
function _({ ref: e, tone: n = "info", toneLabel: r = l[n], title: o, children: _, onDismiss: v, dismissLabel: y = "Dismiss", slotProps: b, className: x, sx: S, ...C }) {
|
|
82
|
+
let w = v !== void 0;
|
|
83
|
+
return /* @__PURE__ */ s(t, {
|
|
84
|
+
className: [x, b?.root?.className].filter(Boolean).join(" ") || void 0,
|
|
85
|
+
styles: [
|
|
90
86
|
u,
|
|
91
|
-
p[
|
|
92
|
-
|
|
93
|
-
|
|
87
|
+
p[n],
|
|
88
|
+
w && d,
|
|
89
|
+
b?.root?.css
|
|
94
90
|
],
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
91
|
+
sx: S,
|
|
92
|
+
children: (t) => /* @__PURE__ */ c("div", {
|
|
93
|
+
...C,
|
|
94
|
+
ref: e,
|
|
95
|
+
"data-ui": "alert",
|
|
96
|
+
"data-tone": n,
|
|
97
|
+
className: t,
|
|
98
|
+
children: [/* @__PURE__ */ c("div", {
|
|
99
|
+
role: n === "danger" ? "alert" : "status",
|
|
100
|
+
"aria-atomic": "true",
|
|
101
|
+
css: f,
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ s("span", {
|
|
104
|
+
css: i,
|
|
105
|
+
children: r
|
|
106
|
+
}),
|
|
107
|
+
a(o) && /* @__PURE__ */ s("div", {
|
|
108
|
+
className: b?.title?.className,
|
|
109
|
+
css: [m, b?.title?.css],
|
|
110
|
+
children: o
|
|
111
|
+
}),
|
|
112
|
+
a(_) && /* @__PURE__ */ s("div", {
|
|
113
|
+
className: b?.body?.className,
|
|
114
|
+
css: [h, b?.body?.css],
|
|
115
|
+
children: _
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
}), w && /* @__PURE__ */ s("button", {
|
|
119
|
+
type: "button",
|
|
120
|
+
"data-ui": "alert-dismiss",
|
|
121
|
+
"aria-label": y,
|
|
122
|
+
onClick: () => v?.(),
|
|
123
|
+
className: b?.dismiss?.className,
|
|
124
|
+
css: [g, b?.dismiss?.css],
|
|
125
|
+
children: /* @__PURE__ */ s("span", {
|
|
126
|
+
"aria-hidden": !0,
|
|
127
|
+
children: "×"
|
|
113
128
|
})
|
|
114
|
-
]
|
|
115
|
-
})
|
|
116
|
-
type: "button",
|
|
117
|
-
"data-ui": "alert-dismiss",
|
|
118
|
-
"aria-label": _,
|
|
119
|
-
onClick: () => o?.(),
|
|
120
|
-
className: v?.dismiss?.className,
|
|
121
|
-
css: [g, v?.dismiss?.css],
|
|
122
|
-
children: /* @__PURE__ */ s("span", {
|
|
123
|
-
"aria-hidden": !0,
|
|
124
|
-
children: "×"
|
|
125
|
-
})
|
|
126
|
-
})]
|
|
129
|
+
})]
|
|
130
|
+
})
|
|
127
131
|
});
|
|
128
|
-
}
|
|
132
|
+
}
|
|
133
|
+
_.displayName = "Alert";
|
|
129
134
|
//#endregion
|
|
130
135
|
export { _ as t };
|
package/dist/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Alert } from "./alert-
|
|
2
|
+
export { t as Alert } from "./alert-BBqaKI4k.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
3
|
+
import { useState as n } from "react";
|
|
4
4
|
import { vars as r } from "@jfrader/tokens/vars";
|
|
5
5
|
import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
|
|
6
6
|
//#region src/components/avatar/avatar.tsx
|
|
@@ -89,37 +89,44 @@ var u = e({
|
|
|
89
89
|
insetBlockStart: "20%",
|
|
90
90
|
insetInlineStart: "20%"
|
|
91
91
|
} })
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
"
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
className:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
c
|
|
120
|
-
|
|
121
|
-
|
|
92
|
+
};
|
|
93
|
+
function h({ ref: e, name: r, src: o, size: s = "md", status: c, statusLabel: h, slotProps: g, className: _, sx: v, ...y }) {
|
|
94
|
+
let [b, x] = n(), S = o !== void 0 && o !== "" && o !== b, C = c === void 0 ? r : `${r}, ${h ?? c}`;
|
|
95
|
+
return /* @__PURE__ */ i(t, {
|
|
96
|
+
className: _,
|
|
97
|
+
styles: [u, d[s]],
|
|
98
|
+
sx: v,
|
|
99
|
+
children: (t) => /* @__PURE__ */ a("span", {
|
|
100
|
+
...y,
|
|
101
|
+
ref: e,
|
|
102
|
+
"data-ui": "avatar",
|
|
103
|
+
role: "img",
|
|
104
|
+
"aria-label": C,
|
|
105
|
+
className: t,
|
|
106
|
+
children: [S ? /* @__PURE__ */ i("img", {
|
|
107
|
+
src: o,
|
|
108
|
+
alt: "",
|
|
109
|
+
onError: () => x(o),
|
|
110
|
+
className: g?.image?.className,
|
|
111
|
+
css: [f, g?.image?.css]
|
|
112
|
+
}) : /* @__PURE__ */ i("span", {
|
|
113
|
+
"aria-hidden": "true",
|
|
114
|
+
className: g?.fallback?.className,
|
|
115
|
+
css: g?.fallback?.css,
|
|
116
|
+
children: l(r)
|
|
117
|
+
}), c !== void 0 && /* @__PURE__ */ i("span", {
|
|
118
|
+
"aria-hidden": "true",
|
|
119
|
+
"data-status": c,
|
|
120
|
+
className: g?.status?.className,
|
|
121
|
+
css: [
|
|
122
|
+
p,
|
|
123
|
+
m[c],
|
|
124
|
+
g?.status?.css
|
|
125
|
+
]
|
|
126
|
+
})]
|
|
127
|
+
})
|
|
122
128
|
});
|
|
123
|
-
}
|
|
129
|
+
}
|
|
130
|
+
h.displayName = "Avatar";
|
|
124
131
|
//#endregion
|
|
125
132
|
export { h as t };
|
package/dist/avatar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Avatar } from "./avatar-
|
|
2
|
+
export { t as Avatar } from "./avatar-BahDVO9t.js";
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
3
|
-
import { forwardRef as t } from "react";
|
|
2
|
+
import { r as e, t } from "./sx-Dx9JUKp5.js";
|
|
4
3
|
import { vars as n } from "@jfrader/tokens/vars";
|
|
5
4
|
import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
|
|
6
5
|
//#region src/components/badge/badge.tsx
|
|
@@ -73,31 +72,37 @@ var a = 99, o = e({
|
|
|
73
72
|
backgroundColor: n.color.textMuted,
|
|
74
73
|
color: n.color.bg
|
|
75
74
|
})
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"data-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
75
|
+
};
|
|
76
|
+
function f({ ref: e, children: n, badgeContent: f, max: p = a, showZero: m = !1, invisible: h = !1, variant: g = "standard", tone: _ = "accent", anchor: v, overlap: y = "rectangular", slotProps: b, className: x, sx: S, ...C }) {
|
|
77
|
+
let w = g === "dot", T = h || g !== "dot" && (f == null || f === !1 || f === 0 && !m), E = typeof f == "number" && f > p ? `${p}+` : f, D = `${v?.vertical ?? "top"}-${v?.horizontal ?? "end"}`, O = [x, b?.root?.className].filter(Boolean).join(" ") || void 0;
|
|
78
|
+
return /* @__PURE__ */ r(t, {
|
|
79
|
+
className: O,
|
|
80
|
+
styles: [o, b?.root?.css],
|
|
81
|
+
sx: S,
|
|
82
|
+
children: (t) => /* @__PURE__ */ i("span", {
|
|
83
|
+
...C,
|
|
84
|
+
ref: e,
|
|
85
|
+
"data-ui": "badge",
|
|
86
|
+
className: t,
|
|
87
|
+
children: [n, !T && /* @__PURE__ */ r("span", {
|
|
88
|
+
"data-ui": "badge-marker",
|
|
89
|
+
"data-variant": g,
|
|
90
|
+
"data-tone": _,
|
|
91
|
+
"aria-hidden": w ? "true" : void 0,
|
|
92
|
+
className: b?.badge?.className,
|
|
93
|
+
css: [
|
|
94
|
+
s,
|
|
95
|
+
c[g],
|
|
96
|
+
!w && l[y],
|
|
97
|
+
u[D],
|
|
98
|
+
d[_],
|
|
99
|
+
b?.badge?.css
|
|
100
|
+
],
|
|
101
|
+
children: w ? null : E
|
|
102
|
+
})]
|
|
103
|
+
})
|
|
100
104
|
});
|
|
101
|
-
}
|
|
105
|
+
}
|
|
106
|
+
f.displayName = "Badge";
|
|
102
107
|
//#endregion
|
|
103
108
|
export { f as t };
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Badge } from "./badge-
|
|
2
|
+
export { t as Badge } from "./badge-B_sLygxU.js";
|
|
@@ -0,0 +1,141 @@
|
|
|
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 { createContext as i, useCallback as a, useContext as o, useId as s, useImperativeHandle as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
6
|
+
import { vars as p } from "@jfrader/tokens/vars";
|
|
7
|
+
import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
|
|
8
|
+
//#region src/components/breadcrumbs/breadcrumbs.tsx
|
|
9
|
+
var g = i(null);
|
|
10
|
+
function _(e) {
|
|
11
|
+
let t = o(g);
|
|
12
|
+
if (!t) throw Error(`Breadcrumbs.${e} must be rendered inside <Breadcrumbs>.`);
|
|
13
|
+
return t;
|
|
14
|
+
}
|
|
15
|
+
var v = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1, y = e({
|
|
16
|
+
display: "flex",
|
|
17
|
+
flexWrap: "wrap",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
gap: p.space[2],
|
|
20
|
+
margin: 0,
|
|
21
|
+
padding: 0,
|
|
22
|
+
listStyle: "none",
|
|
23
|
+
fontFamily: p.font.sans,
|
|
24
|
+
fontSize: p.textSize.sm,
|
|
25
|
+
lineHeight: p.lineHeight.tight
|
|
26
|
+
}), b = e({
|
|
27
|
+
display: "inline-flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
gap: p.space[2],
|
|
30
|
+
color: p.color.textMuted,
|
|
31
|
+
"&:first-of-type > [data-ui=\"breadcrumbs-separator\"]": { display: "none" }
|
|
32
|
+
}), x = e({ display: "inline-flex" }), S = e({
|
|
33
|
+
display: "inline-flex",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
gap: p.space[1],
|
|
36
|
+
minBlockSize: "24px",
|
|
37
|
+
borderRadius: p.radius.sm,
|
|
38
|
+
color: "inherit",
|
|
39
|
+
"& svg": {
|
|
40
|
+
inlineSize: "1em",
|
|
41
|
+
blockSize: "1em",
|
|
42
|
+
flexShrink: 0
|
|
43
|
+
},
|
|
44
|
+
"&[aria-current=\"page\"]": {
|
|
45
|
+
color: p.color.text,
|
|
46
|
+
fontWeight: p.fontWeight.medium
|
|
47
|
+
}
|
|
48
|
+
}), C = e({
|
|
49
|
+
textDecoration: "underline",
|
|
50
|
+
textDecorationColor: "transparent",
|
|
51
|
+
textUnderlineOffset: "0.2em",
|
|
52
|
+
transitionProperty: "color, text-decoration-color",
|
|
53
|
+
transitionDuration: p.motion.duration.fast,
|
|
54
|
+
transitionTimingFunction: p.motion.easeStandard,
|
|
55
|
+
"&:hover": {
|
|
56
|
+
color: p.color.text,
|
|
57
|
+
textDecorationColor: "currentColor"
|
|
58
|
+
},
|
|
59
|
+
"&:focus-visible": { ...n },
|
|
60
|
+
[r]: { transitionDuration: "0s" }
|
|
61
|
+
});
|
|
62
|
+
function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, className: o, sx: s, ...c }) {
|
|
63
|
+
let l = d(/* @__PURE__ */ new Map()), [p, h] = f(null), _ = d(null), b = a(() => {
|
|
64
|
+
let e = Array.from(l.current).sort(v), t = e.some(([, e]) => e.current === !0) ? null : e.at(-1)?.[0] ?? null;
|
|
65
|
+
_.current !== t && (_.current = t, h(t));
|
|
66
|
+
}, []), x = a((e, t) => {
|
|
67
|
+
l.current.set(e, t), b();
|
|
68
|
+
}, [b]), S = a((e) => {
|
|
69
|
+
l.current.delete(e), b();
|
|
70
|
+
}, [b]), C = u(() => ({
|
|
71
|
+
separator: r,
|
|
72
|
+
autoCurrentId: p,
|
|
73
|
+
register: x,
|
|
74
|
+
unregister: S
|
|
75
|
+
}), [
|
|
76
|
+
r,
|
|
77
|
+
p,
|
|
78
|
+
x,
|
|
79
|
+
S
|
|
80
|
+
]);
|
|
81
|
+
return /* @__PURE__ */ m(g.Provider, {
|
|
82
|
+
value: C,
|
|
83
|
+
children: /* @__PURE__ */ m(t, {
|
|
84
|
+
className: o,
|
|
85
|
+
sx: s,
|
|
86
|
+
children: (t) => /* @__PURE__ */ m("nav", {
|
|
87
|
+
...c,
|
|
88
|
+
ref: e,
|
|
89
|
+
"aria-label": n,
|
|
90
|
+
"data-ui": "breadcrumbs",
|
|
91
|
+
className: t,
|
|
92
|
+
children: /* @__PURE__ */ m("ol", {
|
|
93
|
+
css: y,
|
|
94
|
+
children: i
|
|
95
|
+
})
|
|
96
|
+
})
|
|
97
|
+
})
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
w.displayName = "Breadcrumbs";
|
|
101
|
+
function T({ ref: e, href: n, current: r, children: i, className: a, sx: o, ...u }) {
|
|
102
|
+
let { separator: f, autoCurrentId: p, register: g, unregister: v } = _("Item"), y = s(), w = d(null);
|
|
103
|
+
c(e, () => w.current, []), l(() => {
|
|
104
|
+
let e = w.current;
|
|
105
|
+
e && g(y, {
|
|
106
|
+
node: e,
|
|
107
|
+
current: r
|
|
108
|
+
});
|
|
109
|
+
}), l(() => () => v(y), [y, v]);
|
|
110
|
+
let T = r ?? p === y ? "page" : void 0;
|
|
111
|
+
return /* @__PURE__ */ m(t, {
|
|
112
|
+
className: a,
|
|
113
|
+
styles: b,
|
|
114
|
+
sx: o,
|
|
115
|
+
children: (e) => /* @__PURE__ */ h("li", {
|
|
116
|
+
...u,
|
|
117
|
+
ref: w,
|
|
118
|
+
"data-ui": "breadcrumbs-item",
|
|
119
|
+
className: e,
|
|
120
|
+
children: [/* @__PURE__ */ m("span", {
|
|
121
|
+
"aria-hidden": "true",
|
|
122
|
+
"data-ui": "breadcrumbs-separator",
|
|
123
|
+
css: x,
|
|
124
|
+
children: f
|
|
125
|
+
}), n === void 0 ? /* @__PURE__ */ m("span", {
|
|
126
|
+
"aria-current": T,
|
|
127
|
+
css: S,
|
|
128
|
+
children: i
|
|
129
|
+
}) : /* @__PURE__ */ m("a", {
|
|
130
|
+
href: n,
|
|
131
|
+
"aria-current": T,
|
|
132
|
+
css: [S, C],
|
|
133
|
+
children: i
|
|
134
|
+
})]
|
|
135
|
+
})
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
T.displayName = "Breadcrumbs.Item";
|
|
139
|
+
var E = Object.assign(w, { Item: T });
|
|
140
|
+
//#endregion
|
|
141
|
+
export { E as t };
|
package/dist/breadcrumbs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
export { t as Breadcrumbs } from "./breadcrumbs-
|
|
2
|
+
export { t as Breadcrumbs } from "./breadcrumbs-DVAOxfvL.js";
|