@xeonr/platform-ui 1.3.0 → 1.4.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/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +22 -0
- package/dist/index.js.map +1 -1
- package/dist/kit/Anchored.d.ts +13 -2
- package/dist/kit/Anchored.d.ts.map +1 -1
- package/dist/kit/Anchored.js +47 -18
- package/dist/kit/Anchored.js.map +1 -1
- package/dist/kit/Badge.d.ts +1 -0
- package/dist/kit/Badge.d.ts.map +1 -1
- package/dist/kit/Badge.js +14 -0
- package/dist/kit/Badge.js.map +1 -1
- package/dist/kit/Blocks.d.ts.map +1 -1
- package/dist/kit/Blocks.js +4 -2
- package/dist/kit/Blocks.js.map +1 -1
- package/dist/kit/Button.d.ts +8 -2
- package/dist/kit/Button.d.ts.map +1 -1
- package/dist/kit/Button.js +17 -3
- package/dist/kit/Button.js.map +1 -1
- package/dist/kit/Chip.d.ts +6 -0
- package/dist/kit/Chip.d.ts.map +1 -1
- package/dist/kit/Chip.js +2 -1
- package/dist/kit/Chip.js.map +1 -1
- package/dist/kit/Color.d.ts +69 -0
- package/dist/kit/Color.d.ts.map +1 -0
- package/dist/kit/Color.js +150 -0
- package/dist/kit/Color.js.map +1 -0
- package/dist/kit/Combobox.d.ts +5 -1
- package/dist/kit/Combobox.d.ts.map +1 -1
- package/dist/kit/Combobox.js +39 -28
- package/dist/kit/Combobox.js.map +1 -1
- package/dist/kit/Controls.d.ts +184 -0
- package/dist/kit/Controls.d.ts.map +1 -0
- package/dist/kit/Controls.js +344 -0
- package/dist/kit/Controls.js.map +1 -0
- package/dist/kit/DatePicker.d.ts +125 -0
- package/dist/kit/DatePicker.d.ts.map +1 -0
- package/dist/kit/DatePicker.js +438 -0
- package/dist/kit/DatePicker.js.map +1 -0
- package/dist/kit/Dropzone.d.ts +41 -0
- package/dist/kit/Dropzone.d.ts.map +1 -0
- package/dist/kit/Dropzone.js +118 -0
- package/dist/kit/Dropzone.js.map +1 -0
- package/dist/kit/Form.d.ts +86 -13
- package/dist/kit/Form.d.ts.map +1 -1
- package/dist/kit/Form.js +124 -13
- package/dist/kit/Form.js.map +1 -1
- package/dist/kit/Icon.d.ts +4 -0
- package/dist/kit/Icon.d.ts.map +1 -1
- package/dist/kit/Icon.js +5 -1
- package/dist/kit/Icon.js.map +1 -1
- package/dist/kit/List.d.ts +55 -8
- package/dist/kit/List.d.ts.map +1 -1
- package/dist/kit/List.js +43 -6
- package/dist/kit/List.js.map +1 -1
- package/dist/kit/Menu.d.ts +71 -9
- package/dist/kit/Menu.d.ts.map +1 -1
- package/dist/kit/Menu.js +119 -21
- package/dist/kit/Menu.js.map +1 -1
- package/dist/kit/Modal.d.ts +37 -4
- package/dist/kit/Modal.d.ts.map +1 -1
- package/dist/kit/Modal.js +42 -14
- package/dist/kit/Modal.js.map +1 -1
- package/dist/kit/MultiCombobox.d.ts +48 -1
- package/dist/kit/MultiCombobox.d.ts.map +1 -1
- package/dist/kit/MultiCombobox.js +100 -27
- package/dist/kit/MultiCombobox.js.map +1 -1
- package/dist/kit/Picker.d.ts +6 -1
- package/dist/kit/Picker.d.ts.map +1 -1
- package/dist/kit/Picker.js +10 -5
- package/dist/kit/Picker.js.map +1 -1
- package/dist/kit/Popover.d.ts +13 -1
- package/dist/kit/Popover.d.ts.map +1 -1
- package/dist/kit/Popover.js +31 -9
- package/dist/kit/Popover.js.map +1 -1
- package/dist/kit/Skeleton.d.ts +44 -3
- package/dist/kit/Skeleton.d.ts.map +1 -1
- package/dist/kit/Skeleton.js +39 -1
- package/dist/kit/Skeleton.js.map +1 -1
- package/dist/kit/Stepper.d.ts +33 -0
- package/dist/kit/Stepper.d.ts.map +1 -0
- package/dist/kit/Stepper.js +97 -0
- package/dist/kit/Stepper.js.map +1 -0
- package/dist/kit/TabStrip.d.ts.map +1 -1
- package/dist/kit/TabStrip.js +7 -2
- package/dist/kit/TabStrip.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CrF,eAAO,MAAM,WAAW;;WAgBvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;aAAyB,OAAO,GAAG,SAAS;YAMnE,CAAC;AAEF,eAAO,MAAM,WAAW;;WAKvB,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,YAAY;;WAIxB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAW,EAAE,IAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,+
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CrF,eAAO,MAAM,WAAW;;WAgBvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;aAAyB,OAAO,GAAG,SAAS;YAMnE,CAAC;AAEF,eAAO,MAAM,WAAW;;WAKvB,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,YAAY;;WAIxB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAW,EAAE,IAAW,EAAE,KAAK,EAAE,IAAe,EAAE,KAAe,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAiE5I"}
|
package/dist/kit/Popover.js
CHANGED
|
@@ -73,7 +73,7 @@ export const PopoverGroup = styled.div `
|
|
|
73
73
|
border-bottom: 1px solid ${v.line};
|
|
74
74
|
&:last-child { border-bottom: none; }
|
|
75
75
|
`;
|
|
76
|
-
export function Popover({ anchor, onClose, label, width = 268, flip = true, sheet, children }) {
|
|
76
|
+
export function Popover({ anchor, onClose, label, width = 268, flip = true, sheet, side = "bottom", align = "start", children }) {
|
|
77
77
|
const ref = useRef(null);
|
|
78
78
|
const [pos, setPos] = useState({ top: anchor.bottom + 4, left: anchor.left });
|
|
79
79
|
// Escape closes this before any drawer or modal it sits in (CON-59)
|
|
@@ -86,16 +86,38 @@ export function Popover({ anchor, onClose, label, width = 268, flip = true, shee
|
|
|
86
86
|
const box = ref.current?.getBoundingClientRect();
|
|
87
87
|
if (!box)
|
|
88
88
|
return;
|
|
89
|
-
const
|
|
89
|
+
const vw = window.innerWidth;
|
|
90
|
+
const vh = window.innerHeight;
|
|
91
|
+
const E = 8;
|
|
92
|
+
const clampX = (x) => Math.max(E, Math.min(x, vw - box.width - E));
|
|
93
|
+
const clampY = (y) => Math.max(E, Math.min(y, vh - box.height - E));
|
|
94
|
+
if (side === "right" || side === "left") {
|
|
95
|
+
const right = anchor.right + 4;
|
|
96
|
+
const left = anchor.left - box.width - 4;
|
|
97
|
+
const fitsRight = right + box.width <= vw - E;
|
|
98
|
+
const fitsLeft = left >= E;
|
|
99
|
+
const x = side === "right" ? (fitsRight || !flip || !fitsLeft ? right : left) : (fitsLeft || !flip || !fitsRight ? left : right);
|
|
100
|
+
const y = align === "end" ? anchor.bottom - box.height : align === "center" ? anchor.top + anchor.height / 2 - box.height / 2 : anchor.top;
|
|
101
|
+
setPos({ top: clampY(y), left: clampX(x) });
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
// Kept on screen: anchored near the right edge it would otherwise hang off
|
|
105
|
+
// it, and near the bottom it would be cut in half.
|
|
106
|
+
const x = align === "end" ? anchor.right - box.width : align === "center" ? anchor.left + anchor.width / 2 - box.width / 2 : anchor.left;
|
|
107
|
+
const left = clampX(x);
|
|
90
108
|
const below = anchor.bottom + 4;
|
|
91
|
-
const
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
: below;
|
|
109
|
+
const above = anchor.top - box.height - 4;
|
|
110
|
+
const fitsBelow = below + box.height <= vh - E;
|
|
111
|
+
const fitsAbove = above >= E;
|
|
112
|
+
let top;
|
|
113
|
+
if (side === "top") {
|
|
114
|
+
top = fitsAbove ? above : flip && fitsBelow ? below : flip ? Math.max(E, above) : clampY(above);
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
top = fitsBelow ? below : flip ? Math.max(E, above) : clampY(below);
|
|
118
|
+
}
|
|
97
119
|
setPos({ top, left });
|
|
98
|
-
}, [anchor, flip]);
|
|
120
|
+
}, [anchor, flip, side, align]);
|
|
99
121
|
useEffect(() => {
|
|
100
122
|
const onDown = (e) => {
|
|
101
123
|
if (!ref.current?.contains(e.target))
|
package/dist/kit/Popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,0EAA0E;AAC1E,yEAAyE;AACzE,2EAA2E;AAC3E,yCAAyC;AACzC,EAAE;AACF,6EAA6E;AAC7E,0EAA0E;AAC1E,8BAA8B;AAE9B,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAiF;;;aAG5F,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;WACvD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;;;;mBAIP,CAAC,CAAC,KAAK;sBACJ,CAAC,CAAC,KAAK;gBACb,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,IAAI;;;;IAIlB,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,MAAM;IACR;;;;;uBAKmB,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK;;GAEtC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;6BAKR,CAAC,CAAC,IAAI;iBAClB,CAAC,CAAC,IAAI;;WAEZ,CAAC,CAAC,IAAI;;;;mBAIE,CAAC,CAAC,IAAI;;aAEZ,CAAC,CAAC,KAAK;;CAEnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAkC;;aAE1D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;;;SAG7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;0BAIX,CAAC,CAAC,IAAI;CAC/B,CAAC;AAEF,+EAA+E;AAC/E,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;6BAET,CAAC,CAAC,IAAI;;CAElC,CAAC;
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Skeleton.d.ts
CHANGED
|
@@ -1,18 +1,59 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
1
2
|
/** Skeleton: sits at the exact final geometry and breathes; no spinners for known shapes. */
|
|
2
3
|
export declare const Skeleton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
|
|
3
|
-
style?:
|
|
4
|
+
style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
4
5
|
}, {
|
|
5
6
|
$w?: string | undefined;
|
|
6
7
|
$h?: string | undefined;
|
|
7
8
|
$r?: string | undefined;
|
|
8
9
|
}>> & string;
|
|
9
10
|
export declare const SkeletonRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
10
|
-
style?:
|
|
11
|
+
style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
11
12
|
}> & string;
|
|
12
13
|
/** Spinner: an indeterminate wait of unknown length. */
|
|
13
14
|
export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
|
|
14
|
-
style?:
|
|
15
|
+
style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
15
16
|
}, {
|
|
16
17
|
$size?: number | undefined;
|
|
17
18
|
}>> & string;
|
|
19
|
+
/** what a busy region's veil is: the scrim (content shows through, blurred), the surface (lighter), or the page canvas (opaque — a frame that is not ready to show anything) */
|
|
20
|
+
export type BusyVeil = "scrim" | "surface" | "canvas";
|
|
21
|
+
/**
|
|
22
|
+
* BusyOverlay: the veil alone, covering its nearest positioned ancestor —
|
|
23
|
+
* for a host that is already `position: relative` (a preview frame, a card).
|
|
24
|
+
* Otherwise wrap the region in BusyRegion.
|
|
25
|
+
*/
|
|
26
|
+
export declare function BusyOverlay({ label, veil, radius, inset, spinner }: {
|
|
27
|
+
/** what it is waiting for ("Waiting for authentication"); shown, and the accessible name */
|
|
28
|
+
label?: ReactNode | undefined;
|
|
29
|
+
veil?: BusyVeil | undefined;
|
|
30
|
+
/** corner radius of the veil — a CSS length, or px (default: the host's) */
|
|
31
|
+
radius?: string | number | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* px between the veil and the host's edges (default 0). Negative overhangs
|
|
34
|
+
* the host — a veil that should also cover a card's padding or border.
|
|
35
|
+
*/
|
|
36
|
+
inset?: number | undefined;
|
|
37
|
+
/** show the spinner (default true) */
|
|
38
|
+
spinner?: boolean | undefined;
|
|
39
|
+
}): import("react").JSX.Element;
|
|
40
|
+
/**
|
|
41
|
+
* BusyRegion: a region that keeps its content in place while it waits — a
|
|
42
|
+
* form waiting on a token, a list reloading under a filter — under a veil
|
|
43
|
+
* with a Spinner and a label. The content is inert while busy (no clicks, no
|
|
44
|
+
* focus) and the region says `aria-busy`. Not for a first load of known shape:
|
|
45
|
+
* that is a Skeleton.
|
|
46
|
+
*/
|
|
47
|
+
export declare function BusyRegion({ busy, label, veil, radius, inset, children, style, className }: {
|
|
48
|
+
busy: boolean;
|
|
49
|
+
label?: ReactNode | undefined;
|
|
50
|
+
veil?: BusyVeil | undefined;
|
|
51
|
+
/** the veil's corner radius (see BusyOverlay; default: the region's) */
|
|
52
|
+
radius?: string | number | undefined;
|
|
53
|
+
/** px between the veil and the region's edges; negative overhangs it (see BusyOverlay) */
|
|
54
|
+
inset?: number | undefined;
|
|
55
|
+
children: ReactNode;
|
|
56
|
+
style?: CSSProperties | undefined;
|
|
57
|
+
className?: string | undefined;
|
|
58
|
+
}): import("react").JSX.Element;
|
|
18
59
|
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,6FAA6F;AAC7F,eAAO,MAAM,QAAQ;;;SAAsB,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;YAO9G,CAAC;AAEF,eAAO,MAAM,WAAW;;WAOvB,CAAC;AAOF,wDAAwD;AACxD,eAAO,MAAM,OAAO;;;YAAyB,MAAM,GAAG,SAAS;YAS9D,CAAC;AAOF,gLAAgL;AAChL,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAuBtD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAc,EAAE,MAAM,EAAE,KAAS,EAAE,OAAc,EAAE,EAAE;IACxF,4FAA4F;IAC5F,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BAOA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAgB,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IACvG,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,+BAOA"}
|
package/dist/kit/Skeleton.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled, { css, keyframes } from "styled-components";
|
|
2
3
|
import { v } from "../theme/tokens.js";
|
|
3
4
|
const shimmer = keyframes `50% { opacity: 0.45; }`;
|
|
4
5
|
/** Skeleton: sits at the exact final geometry and breathes; no spinners for known shapes. */
|
|
@@ -33,4 +34,41 @@ export const Spinner = styled.span `
|
|
|
33
34
|
border-radius: 50%;
|
|
34
35
|
animation: ${spin} 0.8s linear infinite;
|
|
35
36
|
`;
|
|
37
|
+
const fade = keyframes `from { opacity: 0; }`;
|
|
38
|
+
const Veil = styled.div `
|
|
39
|
+
position: absolute;
|
|
40
|
+
inset: ${(p) => p.$inset}px;
|
|
41
|
+
z-index: 2;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
gap: 10px;
|
|
47
|
+
border-radius: ${(p) => p.$radius ?? "inherit"};
|
|
48
|
+
color: ${v.muted};
|
|
49
|
+
font-size: 12px;
|
|
50
|
+
text-align: center;
|
|
51
|
+
animation: ${fade} 0.18s ease;
|
|
52
|
+
${(p) => p.$veil === "scrim" && css `background: ${v.scrim}; backdrop-filter: blur(2px); color: ${v.text};`}
|
|
53
|
+
${(p) => p.$veil === "surface" && css `background: color-mix(in srgb, ${v.surface} 72%, transparent); backdrop-filter: blur(1px);`}
|
|
54
|
+
${(p) => p.$veil === "canvas" && css `background: ${v.canvas};`}
|
|
55
|
+
`;
|
|
56
|
+
/**
|
|
57
|
+
* BusyOverlay: the veil alone, covering its nearest positioned ancestor —
|
|
58
|
+
* for a host that is already `position: relative` (a preview frame, a card).
|
|
59
|
+
* Otherwise wrap the region in BusyRegion.
|
|
60
|
+
*/
|
|
61
|
+
export function BusyOverlay({ label, veil = "scrim", radius, inset = 0, spinner = true }) {
|
|
62
|
+
return (_jsxs(Veil, { "$veil": veil, "$radius": typeof radius === "number" ? `${radius}px` : radius, "$inset": inset, role: "status", "aria-live": "polite", children: [spinner ? _jsx(Spinner, { "aria-hidden": true }) : null, label ? _jsx("span", { children: label }) : _jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Loading" })] }));
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* BusyRegion: a region that keeps its content in place while it waits — a
|
|
66
|
+
* form waiting on a token, a list reloading under a filter — under a veil
|
|
67
|
+
* with a Spinner and a label. The content is inert while busy (no clicks, no
|
|
68
|
+
* focus) and the region says `aria-busy`. Not for a first load of known shape:
|
|
69
|
+
* that is a Skeleton.
|
|
70
|
+
*/
|
|
71
|
+
export function BusyRegion({ busy, label, veil = "surface", radius, inset, children, style, className }) {
|
|
72
|
+
return (_jsxs("div", { style: { position: "relative", minWidth: 0, ...style }, className: className, "aria-busy": busy || undefined, children: [_jsx("div", { inert: busy || undefined, style: { display: "contents" }, children: children }), busy ? _jsx(BusyOverlay, { label: label, veil: veil, radius: radius, inset: inset }) : null] }));
|
|
73
|
+
}
|
|
36
74
|
//# sourceMappingURL=Skeleton.js.map
|
package/dist/kit/Skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type StepState = "done" | "current" | "pending" | "error";
|
|
3
|
+
export interface StepperStep {
|
|
4
|
+
id: string;
|
|
5
|
+
title: ReactNode;
|
|
6
|
+
/** a line under the title — what the step asks for */
|
|
7
|
+
description?: ReactNode | undefined;
|
|
8
|
+
/** override the state the position implies — `error` for a step whose fields are refused */
|
|
9
|
+
state?: StepState | undefined;
|
|
10
|
+
/** cannot be clicked to, even with `onStep` */
|
|
11
|
+
disabled?: boolean | undefined;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Stepper: where you are in an ordered sequence of steps — done, current,
|
|
15
|
+
* still to come — with titles and an optional line each. With `onStep`, a
|
|
16
|
+
* step is a button that goes back to it (any step not `disabled`; disable the
|
|
17
|
+
* ones ahead that the current step must be completed to reach). Without it,
|
|
18
|
+
* the strip is a read-only indicator. `orientation="vertical"` for a rail
|
|
19
|
+
* beside a long form. The current step carries `aria-current="step"`.
|
|
20
|
+
*/
|
|
21
|
+
export declare function Stepper({ steps, current, onStep, orientation, label, numbered }: {
|
|
22
|
+
steps: StepperStep[];
|
|
23
|
+
/** the current step's id */
|
|
24
|
+
current: string;
|
|
25
|
+
/** a step was clicked; omit for a read-only strip */
|
|
26
|
+
onStep?: ((id: string) => void) | undefined;
|
|
27
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
28
|
+
/** accessible name of the list (default "Progress") */
|
|
29
|
+
label?: string | undefined;
|
|
30
|
+
/** show the step's number in its marker (default true); done steps show a tick either way */
|
|
31
|
+
numbered?: boolean | undefined;
|
|
32
|
+
}): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/kit/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AA+ED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,WAA0B,EAAE,KAAkB,EAAE,QAAe,EAAE,EAAE;IACnH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,+BAiCA"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled, { css } from "styled-components";
|
|
3
|
+
import { v } from "../theme/tokens.js";
|
|
4
|
+
import { Icon } from "./Icon.js";
|
|
5
|
+
const Strip = styled.ol `
|
|
6
|
+
list-style: none;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: ${(p) => (p.$vertical ? "column" : "row")};
|
|
11
|
+
gap: ${(p) => (p.$vertical ? "4px" : "0")};
|
|
12
|
+
min-width: 0;
|
|
13
|
+
`;
|
|
14
|
+
const Item = styled.li `
|
|
15
|
+
position: relative;
|
|
16
|
+
flex: ${(p) => (p.$vertical ? "none" : "1 1 0")};
|
|
17
|
+
min-width: 0;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: flex-start;
|
|
20
|
+
/* the connector to the next step */
|
|
21
|
+
${(p) => !p.$vertical &&
|
|
22
|
+
css `
|
|
23
|
+
&:not(:last-child)::after {
|
|
24
|
+
content: "";
|
|
25
|
+
flex: 1 1 auto;
|
|
26
|
+
height: 2px;
|
|
27
|
+
min-width: 16px;
|
|
28
|
+
margin: 13px 10px 0;
|
|
29
|
+
border-radius: 2px;
|
|
30
|
+
background: ${p.$state === "done" ? v.brand55 : v.line2};
|
|
31
|
+
}
|
|
32
|
+
`}
|
|
33
|
+
`;
|
|
34
|
+
const Btn = styled.button `
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
gap: 10px;
|
|
38
|
+
min-width: 0;
|
|
39
|
+
padding: 2px 4px 2px 2px;
|
|
40
|
+
border-radius: ${v.rCtl};
|
|
41
|
+
text-align: left;
|
|
42
|
+
cursor: ${(p) => (p.$clickable ? "pointer" : "default")};
|
|
43
|
+
${(p) => p.$clickable && css `&:hover .t { color: ${v.text}; } &:hover .n { border-color: ${v.brand55}; }`}
|
|
44
|
+
|
|
45
|
+
.n {
|
|
46
|
+
flex: none;
|
|
47
|
+
width: 26px;
|
|
48
|
+
height: 26px;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
display: grid;
|
|
51
|
+
place-items: center;
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
font-variant-numeric: tabular-nums;
|
|
55
|
+
border: 1.5px solid ${v.line2};
|
|
56
|
+
color: ${v.muted};
|
|
57
|
+
background: ${v.surface};
|
|
58
|
+
transition: border-color 0.14s ease, background 0.14s ease;
|
|
59
|
+
svg { font-size: 11px; }
|
|
60
|
+
}
|
|
61
|
+
.txt { min-width: 0; padding-top: 3px; }
|
|
62
|
+
.t { display: block; font-size: 12.5px; font-weight: 600; color: ${v.muted}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
63
|
+
.d { display: block; margin-top: 1px; font-size: 11px; color: ${v.faint}; line-height: 1.4; }
|
|
64
|
+
|
|
65
|
+
${(p) => p.$state === "current" && css `
|
|
66
|
+
.n { border-color: transparent; background: ${v.grad}; color: ${v.onBrand}; }
|
|
67
|
+
.t { color: ${v.text}; }
|
|
68
|
+
`}
|
|
69
|
+
${(p) => p.$state === "done" && css `
|
|
70
|
+
.n { border-color: ${v.brand55}; background: ${v.brand12}; color: ${v.brand}; }
|
|
71
|
+
.t { color: ${v.text}; }
|
|
72
|
+
`}
|
|
73
|
+
${(p) => p.$state === "error" && css `
|
|
74
|
+
.n { border-color: ${v.danger}; background: ${v.dangerBg}; color: ${v.danger}; }
|
|
75
|
+
.t { color: ${v.danger}; }
|
|
76
|
+
`}
|
|
77
|
+
`;
|
|
78
|
+
/**
|
|
79
|
+
* Stepper: where you are in an ordered sequence of steps — done, current,
|
|
80
|
+
* still to come — with titles and an optional line each. With `onStep`, a
|
|
81
|
+
* step is a button that goes back to it (any step not `disabled`; disable the
|
|
82
|
+
* ones ahead that the current step must be completed to reach). Without it,
|
|
83
|
+
* the strip is a read-only indicator. `orientation="vertical"` for a rail
|
|
84
|
+
* beside a long form. The current step carries `aria-current="step"`.
|
|
85
|
+
*/
|
|
86
|
+
export function Stepper({ steps, current, onStep, orientation = "horizontal", label = "Progress", numbered = true }) {
|
|
87
|
+
const at = Math.max(0, steps.findIndex((s) => s.id === current));
|
|
88
|
+
const vertical = orientation === "vertical";
|
|
89
|
+
return (_jsx(Strip, { "aria-label": label, "$vertical": vertical, children: steps.map((s, i) => {
|
|
90
|
+
const state = s.state ?? (i < at ? "done" : i === at ? "current" : "pending");
|
|
91
|
+
const clickable = !!onStep && !s.disabled && i !== at;
|
|
92
|
+
return (_jsx(Item, { "$vertical": vertical, "$state": state, children: _jsxs(Btn
|
|
93
|
+
// a step that cannot be gone to is not a button at all
|
|
94
|
+
, { ...(clickable ? { type: "button", onClick: () => onStep(s.id) } : { as: "div" }), "$state": state, "$clickable": clickable, "aria-current": i === at ? "step" : undefined, children: [_jsx("span", { className: "n", "aria-hidden": true, children: state === "done" ? _jsx(Icon, { name: "check" }) : state === "error" ? _jsx(Icon, { name: "warn" }) : numbered ? i + 1 : null }), _jsxs("span", { className: "txt", children: [_jsx("span", { className: "t", children: s.title }), s.description ? _jsx("span", { className: "d", children: s.description }) : null] }), _jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: state === "done" ? " (done)" : state === "error" ? " (has errors)" : "" })] }) }, s.id));
|
|
95
|
+
}) }));
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=Stepper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/kit/Stepper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabStrip.d.ts","sourceRoot":"","sources":["../../src/kit/TabStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TabStrip.d.ts","sourceRoot":"","sources":["../../src/kit/TabStrip.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/TabStrip.js
CHANGED
|
@@ -20,7 +20,9 @@ import { v } from "../theme/tokens.js";
|
|
|
20
20
|
const Strip = styled.div `
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: flex-end;
|
|
23
|
-
border
|
|
23
|
+
/* the rule is an inset shadow, not a border: the tabs' underline paints
|
|
24
|
+
over it from inside the strip, so no tab has to hang below its scroller */
|
|
25
|
+
box-shadow: inset 0 -1px 0 ${v.line};
|
|
24
26
|
${(p) => p.$track && css `background: ${v.surface2}; border-radius: ${v.rCtl} ${v.rCtl} 0 0; padding: 0 4px;`}
|
|
25
27
|
margin: 14px 0 0;
|
|
26
28
|
> .actions { margin-left: auto; padding: 0 0 6px 12px; display: inline-flex; align-items: center; gap: 8px; flex: none; }
|
|
@@ -36,7 +38,10 @@ const Scroll = styled.div `
|
|
|
36
38
|
gap: 2px;
|
|
37
39
|
flex: 1 1 auto;
|
|
38
40
|
min-width: 0;
|
|
41
|
+
/* overflow-x alone makes overflow-y auto as well, and then a stray pixel of
|
|
42
|
+
height lets the tabs scroll up and down under a trackpad */
|
|
39
43
|
overflow-x: auto;
|
|
44
|
+
overflow-y: hidden;
|
|
40
45
|
`;
|
|
41
46
|
/** Scroll the selected tab into the strip's view on mount and on change, without moving the page. */
|
|
42
47
|
function useActiveInView(dep) {
|
|
@@ -61,7 +66,6 @@ const tabText = css `
|
|
|
61
66
|
font-weight: 500;
|
|
62
67
|
color: ${v.faint};
|
|
63
68
|
border-bottom: 2px solid transparent;
|
|
64
|
-
margin-bottom: -1px;
|
|
65
69
|
white-space: nowrap;
|
|
66
70
|
text-decoration: none;
|
|
67
71
|
display: inline-flex; align-items: center; gap: 6px;
|
|
@@ -88,6 +92,7 @@ const Boxed = styled.div `
|
|
|
88
92
|
background: ${v.field};
|
|
89
93
|
max-width: 100%;
|
|
90
94
|
overflow-x: auto;
|
|
95
|
+
overflow-y: hidden;
|
|
91
96
|
> .after { margin-left: 8px; font-size: 10.5px; color: ${v.faint}; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
|
|
92
97
|
`;
|
|
93
98
|
const BoxTab = styled.button `
|
package/dist/kit/TabStrip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabStrip.js","sourceRoot":"","sources":["../../src/kit/TabStrip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,oBAAoB,EAAkB,MAAM,OAAO,CAAC;AAChF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,qEAAqE;AACrE,EAAE;AACF,2EAA2E;AAC3E,yEAAyE;AACzE,2EAA2E;AAC3E,0EAA0E;AAC1E,4BAA4B;AAC5B,0EAA0E;AAC1E,4EAA4E;AAC5E,EAAE;AACF,0DAA0D;AAE1D,4EAA4E;AAC5E,6EAA6E;AAC7E,iEAAiE;AACjE,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAkC
|
|
1
|
+
{"version":3,"file":"TabStrip.js","sourceRoot":"","sources":["../../src/kit/TabStrip.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED