@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
package/dist/kit/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAY,CAAC;AAKjD,MAAM,KAAK,GAAyC;IAClD,EAAE,EAAE,GAAG,CAAA,mDAAmD;IAC1D,EAAE,EAAE,GAAG,CAAA,iDAAiD;IACxD,EAAE,EAAE,GAAG,CAAA,mDAAmD;CAC3D,CAAC;AAEF,8EAA8E;AAC9E,8EAA8E;AAC9E,WAAW;AACX,MAAM,EAAE,GAAG,6CAA6C,CAAC;AAEzD,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAiE;WAChF,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;mBAK1B,CAAC,CAAC,IAAI;;;;;;IAMrB,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;YACb,EAAE;;;IAGV,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,MAAM;IACrB,GAAG,CAAA;oBACa,CAAC,CAAC,IAAI;eACX,CAAC,CAAC,OAAO;qCACa,CAAC,CAAC,OAAO;eAC/B,EAAE;KACZ;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,OAAO;IACtB,GAAG,CAAA;sBACe,CAAC,CAAC,KAAK;oBACT,CAAC,CAAC,OAAO;eACd,CAAC,CAAC,IAAI;eACN,EAAE,oBAAoB,CAAC,CAAC,OAAO;KACzC;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,OAAO;IACtB,GAAG,CAAA;oBACa,CAAC,CAAC,KAAK;eACZ,CAAC,CAAC,IAAI;eACN,EAAE,kBAAkB,CAAC,CAAC,OAAO;KACvC;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,QAAQ;IACvB,GAAG,CAAA;oBACa,CAAC,CAAC,QAAQ;eACf,CAAC,CAAC,MAAM;eACR,EAAE,8CAA8C,CAAC,CAAC,MAAM;KAClE;CACJ,CAAC;AAqBF,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAkB;IACjI,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,CACX,8BACG,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,SAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,EAC3E,QAAQ,IACR,CACJ,CAAC;IACF,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;QACZ,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,wEAAwE;QACxE,yEAAyE;QACzE,uEAAuE;QACvE,oBAAoB;QACpB,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC;YACtF,MAAM,OAAO,GAAG,CAAC,CAAmB,EAAE,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC,CAAC;YACF,OAAO,CACL,KAAC,IAAI,gBAAW,OAAO,WAAS,IAAI,WAAS,SAAS,KAAM,QAAQ,mBAAgB,MAAM,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,YAC3I,IAAI,GACA,CACR,CAAC;QACJ,CAAC;QACD,OAAO,CACL,KAAC,IAAI,gBAAW,OAAO,WAAS,IAAI,WAAS,SAAS,KAAM,IAAI,YAC7D,IAAI,GACA,CACR,CAAC;IACJ,CAAC;IACD,wEAAwE;IACxE,4EAA4E;IAC5E,2EAA2E;IAC3E,uEAAuE;IACvE,0CAA0C;IAC1C,OAAO,CACL,KAAC,IAAI,gBAAW,OAAO,WAAS,IAAI,WAAS,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAM,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,YACzG,IAAI,GACA,CACR,CAAC;AACJ,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Chip.d.ts
CHANGED
|
@@ -14,6 +14,12 @@ export declare function FilterField({ label, wide, width, children }: {
|
|
|
14
14
|
width?: number | undefined;
|
|
15
15
|
children: ReactNode;
|
|
16
16
|
}): import("react").JSX.Element;
|
|
17
|
+
/** the chip look; exported for DatePicker's chip variant, not from the package */
|
|
18
|
+
export declare const chipCss: import("styled-components").RuleSet<NoInfer<{
|
|
19
|
+
$on?: boolean | undefined;
|
|
20
|
+
$mono?: boolean | undefined;
|
|
21
|
+
$dot?: string | undefined;
|
|
22
|
+
}>>;
|
|
17
23
|
/** Chip: a toggle (filters, presets, multi-select). `dot` is a leading dot in
|
|
18
24
|
* a colour the product chose, for values that carry one — a label, a tag. */
|
|
19
25
|
export declare function Chip({ on, onToggle, mono, count, dot, disabled, children, ...rest }: {
|
package/dist/kit/Chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/kit/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;yEAEyE;AACzE,eAAO,MAAM,SAAS;;;cAA0B,OAAO,GAAG,SAAS;YAOlE,CAAC;AAQF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA;
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/kit/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;yEAEyE;AACzE,eAAO,MAAM,SAAS;;;cAA0B,OAAO,GAAG,SAAS;YAOlE,CAAC;AAQF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAOA;AAED,kFAAkF;AAClF,eAAO,MAAM,OAAO;UAAe,OAAO,GAAG,SAAS;YAAU,OAAO,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;GA6B7G,CAAC;AAKF;8EAC8E;AAC9E,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE;IACpF,EAAE,EAAE,OAAO,CAAC;IACZ,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,+BAOA;AAYD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAmB,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,+BAOA"}
|
package/dist/kit/Chip.js
CHANGED
|
@@ -25,7 +25,8 @@ const FieldWrap = styled.div `
|
|
|
25
25
|
export function FilterField({ label, wide, width, children }) {
|
|
26
26
|
return (_jsxs(FieldWrap, { "$wide": wide, "$width": width, children: [_jsx(MicroLabel, { children: label }), children] }));
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
/** the chip look; exported for DatePicker's chip variant, not from the package */
|
|
29
|
+
export const chipCss = css `
|
|
29
30
|
display: inline-flex;
|
|
30
31
|
align-items: center;
|
|
31
32
|
gap: 6px;
|
package/dist/kit/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/kit/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAa,CAAC;AAEzC,yEAAyE;AACzE,kEAAkE;AAElE;;yEAEyE;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAmC;;iBAErD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;;SAElD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;mBACzB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;CAEtD,CAAC;AAEF;qDACqD;AACrD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8D;;IAEtF,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA,oCAAoC,CAAC,CAAC,CAAC,GAAG,CAAA,UAAU,CAAC,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC;CACjG,CAAC;AACF,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAMzD;IACC,OAAO,CACL,MAAC,SAAS,aAAQ,IAAI,YAAU,KAAK,aACnC,KAAC,UAAU,cAAE,KAAK,GAAc,EAC/B,QAAQ,IACC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,GAAG,GAAG,CAAuF;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/kit/Chip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { type KeyboardEvent, type ReactNode, type Ref } from "react";
|
|
2
|
+
import { type IconName } from "./Icon.tsx";
|
|
3
|
+
import { type AnchoredAlign, type AnchoredSide } from "./Anchored.tsx";
|
|
4
|
+
/**
|
|
5
|
+
* ColorSwatch: a round well filled with a colour — a button. `icon` draws
|
|
6
|
+
* what the colour paints (a stroke, a fill, text) on top of it, in `ink`.
|
|
7
|
+
* On its own it is the trigger a product hangs its own picker from; in a row
|
|
8
|
+
* of them, `selected` marks the chosen one.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ColorSwatch({ color, label, icon, ink, size, selected, disabled, onClick, ...rest }: {
|
|
11
|
+
/** the colour shown: any CSS colour the product holds (a stored hex, a token) */
|
|
12
|
+
color: string;
|
|
13
|
+
/** accessible name — what it is the colour of ("Stroke colour"), or the colour's name */
|
|
14
|
+
label: string;
|
|
15
|
+
icon?: IconName | (string & {}) | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* The icon's colour on the swatch. Default: derived from the swatch —
|
|
18
|
+
* black on a light colour, white on a dark one — so it stays legible on
|
|
19
|
+
* whatever colour the person picked (the page's text colour in a browser
|
|
20
|
+
* without CSS relative colours).
|
|
21
|
+
*/
|
|
22
|
+
ink?: string | undefined;
|
|
23
|
+
/** px (default 26) */
|
|
24
|
+
size?: number | undefined;
|
|
25
|
+
selected?: boolean | undefined;
|
|
26
|
+
disabled?: boolean | undefined;
|
|
27
|
+
onClick?: (() => void) | undefined;
|
|
28
|
+
"aria-haspopup"?: "dialog" | "listbox" | undefined;
|
|
29
|
+
"aria-expanded"?: boolean | undefined;
|
|
30
|
+
"aria-selected"?: boolean | undefined;
|
|
31
|
+
role?: string | undefined;
|
|
32
|
+
ref?: Ref<HTMLButtonElement> | undefined;
|
|
33
|
+
tabIndex?: number | undefined;
|
|
34
|
+
onKeyDown?: ((e: KeyboardEvent<HTMLButtonElement>) => void) | undefined;
|
|
35
|
+
}): import("react").JSX.Element;
|
|
36
|
+
export interface ColorPickerProps {
|
|
37
|
+
/** the chosen colour */
|
|
38
|
+
value: string;
|
|
39
|
+
onChange: (color: string) => void;
|
|
40
|
+
/** the palette offered, as CSS colours; a `{ value, label }` names one for assistive tech */
|
|
41
|
+
colors: (string | {
|
|
42
|
+
value: string;
|
|
43
|
+
label: string;
|
|
44
|
+
})[];
|
|
45
|
+
/** accessible name of the trigger ("Stroke colour") */
|
|
46
|
+
label: string;
|
|
47
|
+
/** what the colour paints, drawn on the trigger */
|
|
48
|
+
icon?: IconName | (string & {}) | undefined;
|
|
49
|
+
ink?: string | undefined;
|
|
50
|
+
/** also offer the browser's own colour dialog, for a colour outside the palette (hex values only) */
|
|
51
|
+
custom?: boolean | undefined;
|
|
52
|
+
/** caption beside the custom well (default "Custom…") */
|
|
53
|
+
customLabel?: ReactNode | undefined;
|
|
54
|
+
/** swatches per row (default 6) */
|
|
55
|
+
columns?: number | undefined;
|
|
56
|
+
/** trigger size, px */
|
|
57
|
+
size?: number | undefined;
|
|
58
|
+
disabled?: boolean | undefined;
|
|
59
|
+
side?: AnchoredSide | undefined;
|
|
60
|
+
align?: AnchoredAlign | undefined;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* ColorPicker: a ColorSwatch that opens a palette. Arrow keys move through
|
|
64
|
+
* the palette, Enter picks, Escape closes (before any modal it sits in), and
|
|
65
|
+
* the list portals so a toolbar cannot clip it. `custom` adds the browser's
|
|
66
|
+
* colour dialog under the palette for anything else.
|
|
67
|
+
*/
|
|
68
|
+
export declare function ColorPicker({ value, onChange, colors, label, icon, ink, custom, customLabel, columns, size, disabled, side, align, }: ColorPickerProps): import("react").JSX.Element;
|
|
69
|
+
//# sourceMappingURL=Color.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/kit/Color.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import styled, { css } from "styled-components";
|
|
4
|
+
import { v } from "../theme/tokens.js";
|
|
5
|
+
import { Icon } from "./Icon.js";
|
|
6
|
+
import { Anchored } from "./Anchored.js";
|
|
7
|
+
import { useEscapeLayer } from "./layers.js";
|
|
8
|
+
// A colour the person chooses — a pen in an image editor, a label's colour.
|
|
9
|
+
// Added for the upl.im dashboard (1.4), whose editor toolbar had drawn its own
|
|
10
|
+
// colour well. The colour is data, not chrome: it comes from the caller (a
|
|
11
|
+
// value the product stores), never from a literal in the kit.
|
|
12
|
+
const Well = styled.button `
|
|
13
|
+
position: relative;
|
|
14
|
+
flex: none;
|
|
15
|
+
width: ${(p) => p.$size}px;
|
|
16
|
+
height: ${(p) => p.$size}px;
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
display: inline-grid;
|
|
19
|
+
place-items: center;
|
|
20
|
+
border: 1px solid ${v.line2};
|
|
21
|
+
font-size: ${(p) => Math.round(p.$size * 0.4)}px;
|
|
22
|
+
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
23
|
+
/* the colour is the caller's; the ring between it and the selection mark is the surface */
|
|
24
|
+
${(p) => p.$selected && css `box-shadow: 0 0 0 2px ${v.surface}, 0 0 0 4px ${v.brand};`}
|
|
25
|
+
&:hover:not(:disabled) { transform: scale(1.06); }
|
|
26
|
+
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
27
|
+
&:focus-visible { border-radius: 50%; }
|
|
28
|
+
> svg { filter: drop-shadow(0 0 1px ${v.scrim}); }
|
|
29
|
+
/* The default ink is derived from the swatch itself: black on a light
|
|
30
|
+
colour, white on a dark one (OKLCH lightness thresholded at 0.62). A
|
|
31
|
+
browser without relative colour syntax keeps the text colour above. */
|
|
32
|
+
background: var(--x-swatch);
|
|
33
|
+
color: ${v.text};
|
|
34
|
+
color: oklch(from var(--x-swatch) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
35
|
+
`;
|
|
36
|
+
/**
|
|
37
|
+
* ColorSwatch: a round well filled with a colour — a button. `icon` draws
|
|
38
|
+
* what the colour paints (a stroke, a fill, text) on top of it, in `ink`.
|
|
39
|
+
* On its own it is the trigger a product hangs its own picker from; in a row
|
|
40
|
+
* of them, `selected` marks the chosen one.
|
|
41
|
+
*/
|
|
42
|
+
export function ColorSwatch({ color, label, icon, ink, size = 26, selected, disabled, onClick, ...rest }) {
|
|
43
|
+
return (_jsx(Well, { type: "button", "aria-label": label, title: label, "$size": size, "$selected": !!selected, disabled: disabled, onClick: onClick, style: { "--x-swatch": color, ...(ink ? { color: ink } : {}) }, ...rest, children: icon ? _jsx(Icon, { name: icon }) : null }));
|
|
44
|
+
}
|
|
45
|
+
const Panel = styled.div `
|
|
46
|
+
padding: 10px;
|
|
47
|
+
background: ${v.surface};
|
|
48
|
+
border: 1px solid ${v.line2};
|
|
49
|
+
border-radius: ${v.rCard};
|
|
50
|
+
box-shadow: ${v.elev};
|
|
51
|
+
> .grid { display: grid; gap: 8px; }
|
|
52
|
+
> .custom {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
margin-top: 10px;
|
|
57
|
+
padding-top: 10px;
|
|
58
|
+
border-top: 1px solid ${v.line};
|
|
59
|
+
font-size: 11.5px;
|
|
60
|
+
color: ${v.muted};
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
input[type="color"] {
|
|
63
|
+
width: 26px;
|
|
64
|
+
height: 26px;
|
|
65
|
+
padding: 0;
|
|
66
|
+
border: 1px solid ${v.line2};
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
background: none;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
}
|
|
72
|
+
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
|
|
73
|
+
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
|
|
74
|
+
input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
/**
|
|
78
|
+
* ColorPicker: a ColorSwatch that opens a palette. Arrow keys move through
|
|
79
|
+
* the palette, Enter picks, Escape closes (before any modal it sits in), and
|
|
80
|
+
* the list portals so a toolbar cannot clip it. `custom` adds the browser's
|
|
81
|
+
* colour dialog under the palette for anything else.
|
|
82
|
+
*/
|
|
83
|
+
export function ColorPicker({ value, onChange, colors, label, icon, ink, custom, customLabel = "Custom…", columns = 6, size, disabled, side, align = "left", }) {
|
|
84
|
+
const [open, setOpen] = useState(false);
|
|
85
|
+
const wrap = useRef(null);
|
|
86
|
+
const layer = useRef(null);
|
|
87
|
+
const cells = useRef([]);
|
|
88
|
+
const list = colors.map((c) => (typeof c === "string" ? { value: c, label: c } : c));
|
|
89
|
+
const chosen = list.findIndex((c) => c.value.toLowerCase() === value.toLowerCase());
|
|
90
|
+
const [active, setActive] = useState(0);
|
|
91
|
+
const close = (refocus) => {
|
|
92
|
+
setOpen(false);
|
|
93
|
+
if (refocus)
|
|
94
|
+
wrap.current?.querySelector("button")?.focus();
|
|
95
|
+
};
|
|
96
|
+
useEscapeLayer(open, () => close(true));
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
if (!open)
|
|
99
|
+
return;
|
|
100
|
+
const onDown = (e) => {
|
|
101
|
+
const t = e.target;
|
|
102
|
+
if (!wrap.current?.contains(t) && !layer.current?.contains(t))
|
|
103
|
+
setOpen(false);
|
|
104
|
+
};
|
|
105
|
+
document.addEventListener("mousedown", onDown, true);
|
|
106
|
+
return () => document.removeEventListener("mousedown", onDown, true);
|
|
107
|
+
}, [open]);
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
if (open)
|
|
110
|
+
cells.current[active]?.focus();
|
|
111
|
+
}, [open, active]);
|
|
112
|
+
const pick = (c) => {
|
|
113
|
+
onChange(c);
|
|
114
|
+
close(true);
|
|
115
|
+
};
|
|
116
|
+
const onKey = (e) => {
|
|
117
|
+
const n = list.length;
|
|
118
|
+
const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: columns, ArrowUp: -columns };
|
|
119
|
+
if (e.key in step) {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
setActive((a) => Math.max(0, Math.min(n - 1, a + step[e.key])));
|
|
122
|
+
}
|
|
123
|
+
else if (e.key === "Home") {
|
|
124
|
+
e.preventDefault();
|
|
125
|
+
setActive(0);
|
|
126
|
+
}
|
|
127
|
+
else if (e.key === "End") {
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
setActive(n - 1);
|
|
130
|
+
}
|
|
131
|
+
else if (e.key === "Tab" && !custom)
|
|
132
|
+
close(false);
|
|
133
|
+
};
|
|
134
|
+
const hex = /^#[0-9a-f]{6}$/i.test(value) ? value : undefined;
|
|
135
|
+
return (_jsxs("span", { ref: wrap, style: { display: "inline-flex" }, children: [_jsx(ColorSwatch, { color: value, label: label, icon: icon, ink: ink, size: size, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => {
|
|
136
|
+
if (open) {
|
|
137
|
+
close(false);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
setActive(chosen >= 0 ? chosen : 0);
|
|
141
|
+
setOpen(true);
|
|
142
|
+
}, onKeyDown: (e) => {
|
|
143
|
+
if (e.key === "ArrowDown" && !open) {
|
|
144
|
+
e.preventDefault();
|
|
145
|
+
setActive(chosen >= 0 ? chosen : 0);
|
|
146
|
+
setOpen(true);
|
|
147
|
+
}
|
|
148
|
+
} }), open ? (_jsx(Anchored, { anchor: wrap, align: align, side: side, gap: 6, layerRef: layer, children: _jsxs(Panel, { children: [_jsx("div", { className: "grid", role: "listbox", "aria-label": label, style: { gridTemplateColumns: `repeat(${columns}, 24px)` }, onKeyDown: onKey, children: list.map((c, i) => (_jsx(ColorSwatch, { color: c.value, label: c.label, size: 24, ref: (n) => { cells.current[i] = n; }, role: "option", "aria-selected": i === chosen, selected: i === chosen, tabIndex: i === active ? 0 : -1, onClick: () => pick(c.value) }, `${c.value}-${i}`))) }), custom ? (_jsxs("label", { className: "custom", children: [_jsx("input", { type: "color", ...(hex ? { value: hex } : {}), onChange: (e) => onChange(e.target.value), "aria-label": `${label}: custom` }, hex ? "hex" : "none"), customLabel] })) : null] }) })) : null] }));
|
|
149
|
+
}
|
|
150
|
+
//# sourceMappingURL=Color.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../src/kit/Color.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Combobox.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
+
import type { IconName } from "./Icon.tsx";
|
|
2
3
|
export interface ComboOption<T> {
|
|
3
4
|
key: string;
|
|
4
5
|
value: T;
|
|
@@ -9,7 +10,7 @@ export interface ComboOption<T> {
|
|
|
9
10
|
* query (so it can debounce and hit whichever RPC it needs) — this only owns
|
|
10
11
|
* the open/highlight/keyboard behaviour.
|
|
11
12
|
*/
|
|
12
|
-
export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }: {
|
|
13
|
+
export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty, icon, disabled }: {
|
|
13
14
|
value: string;
|
|
14
15
|
onQueryChange: (q: string) => void;
|
|
15
16
|
options: ComboOption<T>[];
|
|
@@ -36,5 +37,8 @@ export declare function Combobox<T>({ value, onQueryChange, options, onPick, pla
|
|
|
36
37
|
* Every chip input does this (it drops the last chip) and fingers expect it.
|
|
37
38
|
*/
|
|
38
39
|
onBackspaceWhenEmpty?: (() => void) | undefined;
|
|
40
|
+
/** a leading glyph inside the box — `search` for a people or entity finder */
|
|
41
|
+
icon?: IconName | (string & {}) | undefined;
|
|
42
|
+
disabled?: boolean | undefined;
|
|
39
43
|
}): import("react").JSX.Element;
|
|
40
44
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAiD3C,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAChD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,+BAoFA"}
|
package/dist/kit/Combobox.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { v } from "../theme/tokens.js";
|
|
5
5
|
import { Input } from "./Form.js";
|
|
6
6
|
import { Icon } from "./Icon.js";
|
|
7
7
|
import { Anchored } from "./Anchored.js";
|
|
8
|
+
import { InputGroup } from "./Controls.js";
|
|
9
|
+
import { useEscapeLayer } from "./layers.js";
|
|
8
10
|
const Wrap = styled.div `position: relative;`;
|
|
9
11
|
const List = styled.div `
|
|
10
12
|
max-height: 300px;
|
|
@@ -41,12 +43,17 @@ const Spin = styled.span `
|
|
|
41
43
|
color: ${v.faint};
|
|
42
44
|
font-size: 11px;
|
|
43
45
|
`;
|
|
46
|
+
const EndSpin = styled.span `
|
|
47
|
+
margin-right: 6px;
|
|
48
|
+
color: ${v.faint};
|
|
49
|
+
font-size: 11px;
|
|
50
|
+
`;
|
|
44
51
|
/**
|
|
45
52
|
* Combobox: typeahead over a caller-supplied option list. The caller owns the
|
|
46
53
|
* query (so it can debounce and hit whichever RPC it needs) — this only owns
|
|
47
54
|
* the open/highlight/keyboard behaviour.
|
|
48
55
|
*/
|
|
49
|
-
export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }) {
|
|
56
|
+
export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty, icon, disabled }) {
|
|
50
57
|
const [open, setOpen] = useState(false);
|
|
51
58
|
const [active, setActive] = useState(0);
|
|
52
59
|
const ref = useRef(null);
|
|
@@ -69,6 +76,10 @@ export function Combobox({ value, onQueryChange, options, onPick, placeholder, l
|
|
|
69
76
|
document.addEventListener("mousedown", onDown);
|
|
70
77
|
return () => document.removeEventListener("mousedown", onDown);
|
|
71
78
|
}, [open]);
|
|
79
|
+
const shown = open && !disabled && (options.length > 0 || !!emptyNote);
|
|
80
|
+
// Escape closes the list (while there is one to see) before any drawer or
|
|
81
|
+
// modal it sits in (CON-59)
|
|
82
|
+
useEscapeLayer(shown, () => setOpen(false));
|
|
72
83
|
const pick = (i) => {
|
|
73
84
|
const opt = options[i];
|
|
74
85
|
if (!opt)
|
|
@@ -76,31 +87,31 @@ export function Combobox({ value, onQueryChange, options, onPick, placeholder, l
|
|
|
76
87
|
onPick(opt.value, opt.key);
|
|
77
88
|
setOpen(false);
|
|
78
89
|
};
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
90
|
+
const input = (_jsx(Input, { value: value, autoFocus: autoFocus, disabled: disabled, placeholder: placeholder, "aria-label": label ?? placeholder, autoComplete: "off", onChange: (e) => { onQueryChange(e.target.value); setOpen(true); }, onFocus: () => setOpen(true), onKeyDown: (e) => {
|
|
91
|
+
if (e.key === "ArrowDown") {
|
|
92
|
+
e.preventDefault();
|
|
93
|
+
setOpen(true);
|
|
94
|
+
setActive((a) => Math.min(a + 1, options.length - 1));
|
|
95
|
+
}
|
|
96
|
+
else if (e.key === "ArrowUp") {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
setActive((a) => Math.max(a - 1, 0));
|
|
99
|
+
}
|
|
100
|
+
else if (e.key === "Enter") {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
if (open && options.length)
|
|
103
|
+
pick(active);
|
|
104
|
+
else if (onSubmit && value.trim()) {
|
|
105
|
+
onSubmit(value.trim());
|
|
106
|
+
setOpen(false);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
else if (e.key === "Backspace" && value === "" && onBackspaceWhenEmpty) {
|
|
110
|
+
e.preventDefault();
|
|
111
|
+
onBackspaceWhenEmpty();
|
|
112
|
+
}
|
|
113
|
+
} }));
|
|
114
|
+
const spinner = _jsx(Icon, { name: "spinner", spin: true });
|
|
115
|
+
return (_jsxs(Wrap, { ref: ref, children: [icon ? (_jsx(InputGroup, { icon: icon, disabled: disabled, end: loading ? _jsx(EndSpin, { children: spinner }) : undefined, children: input })) : (_jsxs(_Fragment, { children: [input, loading ? _jsx(Spin, { children: spinner }) : null] })), shown ? (_jsx(Anchored, { anchor: ref, align: "stretch", gap: 5, layerRef: layer, children: _jsxs(List, { role: "listbox", children: [options.map((o, i) => (_jsx(Option, { type: "button", role: "option", "aria-selected": i === active, "$on": i === active, onMouseEnter: () => setActive(i), onMouseDown: (e) => e.preventDefault(), onClick: () => pick(i), children: o.render }, o.key))), options.length === 0 && emptyNote ? _jsx(Note, { children: emptyNote }) : null] }) })) : null] }));
|
|
105
116
|
}
|
|
106
117
|
//# sourceMappingURL=Combobox.js.map
|
package/dist/kit/Combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"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"}
|