@revikornmann/muka-ui 0.27.2 → 0.28.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/cjs/components/Avatar/Avatar.css +30 -7
- package/dist/cjs/components/Avatar/Avatar.js +4 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/DataPieChart/DataPieChart.css +4 -1
- package/dist/cjs/components/DataPieChart/DataPieChart.js +1 -1
- package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.css +3 -0
- package/dist/cjs/components/Dialog/Dialog.js +66 -3
- package/dist/cjs/components/Dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/Input/Input.css +21 -0
- package/dist/cjs/components/MediaViewer/MediaViewer.css +180 -0
- package/dist/cjs/components/MediaViewer/MediaViewer.js +271 -0
- package/dist/cjs/components/MediaViewer/MediaViewer.js.map +1 -0
- package/dist/cjs/components/MediaViewer/index.js +6 -0
- package/dist/cjs/components/MediaViewer/index.js.map +1 -0
- package/dist/cjs/components/MediaViewer/mediaViewerGestures.js +65 -0
- package/dist/cjs/components/MediaViewer/mediaViewerGestures.js.map +1 -0
- package/dist/cjs/components/Thumbnail/Thumbnail.css +11 -0
- package/dist/cjs/components/Thumbnail/Thumbnail.js +6 -2
- package/dist/cjs/components/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/cjs/components/index.js +3 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +30 -7
- package/dist/esm/components/Avatar/Avatar.js +4 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/DataPieChart/DataPieChart.css +4 -1
- package/dist/esm/components/DataPieChart/DataPieChart.js +1 -1
- package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.css +3 -0
- package/dist/esm/components/Dialog/Dialog.js +66 -3
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Input/Input.css +21 -0
- package/dist/esm/components/MediaViewer/MediaViewer.css +180 -0
- package/dist/esm/components/MediaViewer/MediaViewer.js +267 -0
- package/dist/esm/components/MediaViewer/MediaViewer.js.map +1 -0
- package/dist/esm/components/MediaViewer/index.js +2 -0
- package/dist/esm/components/MediaViewer/index.js.map +1 -0
- package/dist/esm/components/MediaViewer/mediaViewerGestures.js +58 -0
- package/dist/esm/components/MediaViewer/mediaViewerGestures.js.map +1 -0
- package/dist/esm/components/Thumbnail/Thumbnail.css +11 -0
- package/dist/esm/components/Thumbnail/Thumbnail.js +6 -2
- package/dist/esm/components/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/base.css +2 -0
- package/dist/styles/components/Avatar.css +30 -7
- package/dist/styles/components/DataPieChart.css +4 -1
- package/dist/styles/components/Dialog.css +3 -0
- package/dist/styles/components/Input.css +21 -0
- package/dist/styles/components/MediaViewer.css +180 -0
- package/dist/styles/components/Thumbnail.css +11 -0
- package/dist/styles/index.css +554 -301
- package/dist/styles/muka-dark.css +554 -301
- package/dist/styles/muka-light.css +554 -301
- package/dist/styles/tokens-bouwplan-dark.css +8 -1
- package/dist/styles/tokens-bouwplan-light.css +8 -1
- package/dist/styles/tokens-fscl-dark.css +8 -1
- package/dist/styles/tokens-fscl-light.css +8 -1
- package/dist/styles/tokens-grip-dark.css +8 -1
- package/dist/styles/tokens-grip-light.css +8 -1
- package/dist/styles/tokens-muka-dark.css +8 -1
- package/dist/styles/tokens-muka-light.css +8 -1
- package/dist/styles/tokens-wireframe-dark.css +8 -1
- package/dist/styles/tokens-wireframe-light.css +8 -1
- package/dist/styles/wireframe-dark.css +554 -301
- package/dist/styles/wireframe-light.css +554 -301
- package/dist/types/components/Avatar/Avatar.d.ts +4 -1
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/types/components/MediaViewer/MediaViewer.d.ts +86 -0
- package/dist/types/components/MediaViewer/MediaViewer.d.ts.map +1 -0
- package/dist/types/components/MediaViewer/index.d.ts +2 -0
- package/dist/types/components/MediaViewer/index.d.ts.map +1 -0
- package/dist/types/components/MediaViewer/mediaViewerGestures.d.ts +35 -0
- package/dist/types/components/MediaViewer/mediaViewerGestures.d.ts.map +1 -0
- package/dist/types/components/Thumbnail/Thumbnail.d.ts +21 -0
- package/dist/types/components/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/docs/consumers/brand.md +6 -2
- package/docs/consumers/setup-instructions.md +35 -3
- package/package.json +1 -1
- package/skills/setup-muka/SKILL.md +36 -3
- package/tokens/t4-components/avatar.json +33 -1
|
@@ -45,7 +45,10 @@ export interface AvatarProps {
|
|
|
45
45
|
* - Loading and error states
|
|
46
46
|
* - Clickable support
|
|
47
47
|
*
|
|
48
|
-
* @accessibility WCAG 2.1 AA
|
|
48
|
+
* @accessibility WCAG 2.1 AA, except initials contrast
|
|
49
|
+
* - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
|
|
50
|
+
* on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
|
|
51
|
+
* the accessible name comes from `name`, so always pass it
|
|
49
52
|
* - Requires alt text when using image
|
|
50
53
|
* - Uses role="img" with aria-label for non-image avatars
|
|
51
54
|
* - Status indicators include aria-label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAMzF,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IAEd,yFAAyF;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iFAAiF;IACjF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kEAAkE;IAClE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,iDAAiD;IACjD,aAAa,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IAE/C;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAEpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnC,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAMzF,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IAEd,yFAAyF;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iFAAiF;IACjF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kEAAkE;IAClE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,iDAAiD;IACjD,aAAa,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IAE/C;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAEpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnC,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0FD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2UxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './MediaViewer.css';
|
|
3
|
+
export interface MediaViewerItem {
|
|
4
|
+
/** Image source URL */
|
|
5
|
+
src: string;
|
|
6
|
+
/** Alt text for the image */
|
|
7
|
+
alt?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Stable identity for the item. Defaults to its position, which stays
|
|
10
|
+
* stable when items are appended (pagination) but not when they are
|
|
11
|
+
* inserted before the current one.
|
|
12
|
+
*/
|
|
13
|
+
id?: string;
|
|
14
|
+
}
|
|
15
|
+
export interface MediaViewerProps {
|
|
16
|
+
/** Whether the viewer is open */
|
|
17
|
+
open: boolean;
|
|
18
|
+
/** The images to page through, in order */
|
|
19
|
+
items: MediaViewerItem[];
|
|
20
|
+
/** Index of the image shown (controlled) */
|
|
21
|
+
index: number;
|
|
22
|
+
/** Called with the new index after a swipe, arrow key or prev/next button */
|
|
23
|
+
onIndexChange: (index: number) => void;
|
|
24
|
+
/** Called when the viewer should close: close button, Escape or swipe down */
|
|
25
|
+
onClose: () => void;
|
|
26
|
+
/**
|
|
27
|
+
* Caption under the image, e.g. sender, date and message text. Render it for
|
|
28
|
+
* the current `index`: the slots belong to the image on screen.
|
|
29
|
+
*/
|
|
30
|
+
caption?: React.ReactNode;
|
|
31
|
+
/** Status slot next to the caption, typically a `Badge` */
|
|
32
|
+
meta?: React.ReactNode;
|
|
33
|
+
/** Action buttons under the caption, e.g. share or "show in chat" */
|
|
34
|
+
actions?: React.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* Called when the viewer gets within `endReachedThreshold` items of the end,
|
|
37
|
+
* so the consumer can append the next page to `items`. Called once per
|
|
38
|
+
* `items.length`.
|
|
39
|
+
*/
|
|
40
|
+
onEndReached?: () => void;
|
|
41
|
+
/** How many items from the end `onEndReached` fires (default: 3) */
|
|
42
|
+
endReachedThreshold?: number;
|
|
43
|
+
/** Counter text, e.g. "3 / 24" (default) or "3 van 24" */
|
|
44
|
+
counterLabel?: (index: number, total: number) => string;
|
|
45
|
+
/** Accessible label of the close button (default: "Close") */
|
|
46
|
+
closeLabel?: string;
|
|
47
|
+
/** Accessible label of the previous button (default: "Previous") */
|
|
48
|
+
previousLabel?: string;
|
|
49
|
+
/** Accessible label of the next button (default: "Next") */
|
|
50
|
+
nextLabel?: string;
|
|
51
|
+
/** Accessible label of the viewer (default: "Media viewer") */
|
|
52
|
+
'aria-label'?: string;
|
|
53
|
+
/** Additional CSS classes */
|
|
54
|
+
className?: string;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* MediaViewer Component
|
|
58
|
+
*
|
|
59
|
+
* Full-screen viewer that shows a list of images one at a time.
|
|
60
|
+
*
|
|
61
|
+
* - **Touch:** swipe sideways to page; the image follows the finger and snaps
|
|
62
|
+
* to the next or previous image past a quarter of the width or on a flick.
|
|
63
|
+
* It doesn't move past the first or last image. Swipe down to close.
|
|
64
|
+
* - **Desktop:** previous/next buttons on hover or focus, and ← / →.
|
|
65
|
+
* - **Close:** the close button, Escape, or swiping down. A tap on the dark
|
|
66
|
+
* stage does not close it, so a mis-aimed tap can't swallow an action.
|
|
67
|
+
* - **Slots:** `caption`, `meta` (a `Badge`) and `actions` (buttons) render
|
|
68
|
+
* under the image for the current `index`.
|
|
69
|
+
* - **Pagination:** `onEndReached` fires near the end so more items can be
|
|
70
|
+
* appended; appending does not move the current image.
|
|
71
|
+
*
|
|
72
|
+
* The images either side of the current one are rendered (and so preloaded).
|
|
73
|
+
*
|
|
74
|
+
* @accessibility
|
|
75
|
+
* - Native modal `<dialog>`: focus is trapped and returns to the opener
|
|
76
|
+
* - The track is a carousel; each image is a labelled slide
|
|
77
|
+
* - The counter is announced in a polite live region
|
|
78
|
+
* - With reduced motion, images swap without the slide
|
|
79
|
+
*
|
|
80
|
+
* Tokens used: color-black-alpha-12, color-surface-level3,
|
|
81
|
+
* color-text-default-default, color-text-subtle-default, spacing-*,
|
|
82
|
+
* motion-duration-component, motion-easing-default, motion-easing-enter.
|
|
83
|
+
*/
|
|
84
|
+
export declare const MediaViewer: React.FC<MediaViewerProps>;
|
|
85
|
+
export default MediaViewer;
|
|
86
|
+
//# sourceMappingURL=MediaViewer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaViewer.d.ts","sourceRoot":"","sources":["../../../../components/MediaViewer/MediaViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAWzF,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IAEd,2CAA2C;IAC3C,KAAK,EAAE,eAAe,EAAE,CAAC;IAEzB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,8EAA8E;IAC9E,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAExD,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyVlD,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/MediaViewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pure gesture maths for `MediaViewer`, kept out of the component so the
|
|
3
|
+
* swipe and dismiss decisions are unit-testable without pointer events.
|
|
4
|
+
*/
|
|
5
|
+
/** Movement (px) before a drag commits to an axis. */
|
|
6
|
+
export declare const AXIS_LOCK_DISTANCE = 8;
|
|
7
|
+
/** Fraction of the stage width a slow horizontal drag must pass to page. */
|
|
8
|
+
export declare const SWIPE_DISTANCE_RATIO = 0.25;
|
|
9
|
+
/** Velocity (px/ms) that pages even on a short horizontal flick. */
|
|
10
|
+
export declare const SWIPE_VELOCITY = 0.5;
|
|
11
|
+
/** Minimum distance (px) a flick must travel to count. */
|
|
12
|
+
export declare const FLICK_MIN_DISTANCE = 20;
|
|
13
|
+
/** Downward distance (px) that dismisses on a slow drag. */
|
|
14
|
+
export declare const DISMISS_DISTANCE = 120;
|
|
15
|
+
/** Downward velocity (px/ms) that dismisses on a short flick. */
|
|
16
|
+
export declare const DISMISS_VELOCITY = 0.5;
|
|
17
|
+
export type DragAxis = 'x' | 'y';
|
|
18
|
+
/**
|
|
19
|
+
* Decide which axis a drag belongs to, or null while it is still within the
|
|
20
|
+
* lock distance. Horizontal wins ties so a diagonal flick still pages.
|
|
21
|
+
*/
|
|
22
|
+
export declare function lockAxis(dx: number, dy: number): DragAxis | null;
|
|
23
|
+
/**
|
|
24
|
+
* Clamp a horizontal drag so it cannot move past the first or last item:
|
|
25
|
+
* there is nothing to reveal there, so the image stays put (no rubber band).
|
|
26
|
+
*/
|
|
27
|
+
export declare function clampDragX(dx: number, hasPrevious: boolean, hasNext: boolean): number;
|
|
28
|
+
/**
|
|
29
|
+
* Where a released horizontal drag goes: `1` to the next item, `-1` to the
|
|
30
|
+
* previous one, `0` back to the current one. `dx` is already clamped.
|
|
31
|
+
*/
|
|
32
|
+
export declare function resolveSwipe(dx: number, velocityX: number, stageWidth: number): -1 | 0 | 1;
|
|
33
|
+
/** Whether a released downward drag dismisses the viewer. */
|
|
34
|
+
export declare function resolveDismiss(dy: number, velocityY: number): boolean;
|
|
35
|
+
//# sourceMappingURL=mediaViewerGestures.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mediaViewerGestures.d.ts","sourceRoot":"","sources":["../../../../components/MediaViewer/mediaViewerGestures.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AACtD,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,oEAAoE;AACpE,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,4DAA4D;AAC5D,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjC;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAGhE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIrF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAQ1F;AAED,6DAA6D;AAC7D,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAIrE"}
|
|
@@ -12,6 +12,24 @@ export interface ThumbnailProps extends Omit<React.HTMLAttributes<HTMLDivElement
|
|
|
12
12
|
* - `'ellipse'` — 120×120 circle
|
|
13
13
|
*/
|
|
14
14
|
shape?: 'ellipse' | '1:1' | '4:3';
|
|
15
|
+
/**
|
|
16
|
+
* When true the tile fills its parent's width and takes its height from the
|
|
17
|
+
* shape's aspect ratio, instead of the fixed 160×120 / 120×120 size. Use it
|
|
18
|
+
* for responsive grids, e.g. a 3-column photo gallery.
|
|
19
|
+
*/
|
|
20
|
+
fluid?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* When true the image is lazy loaded (`loading="lazy"`): the browser fetches
|
|
23
|
+
* it only as it nears the viewport. Until then the empty frame shows its
|
|
24
|
+
* neutral surface. Use it for long galleries.
|
|
25
|
+
*/
|
|
26
|
+
lazy?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Extra attributes for the `<img>`, e.g. `srcSet` and `sizes` to serve a small
|
|
29
|
+
* rendition, or `onError`. `src`, `alt` and `className` are set by the
|
|
30
|
+
* component.
|
|
31
|
+
*/
|
|
32
|
+
imgProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className'>;
|
|
15
33
|
/**
|
|
16
34
|
* When true the thumbnail shows an upload overlay with a progress donut.
|
|
17
35
|
* Interaction (hover zoom, click, remove) is suppressed while loading.
|
|
@@ -67,6 +85,9 @@ export interface ThumbnailProps extends Omit<React.HTMLAttributes<HTMLDivElement
|
|
|
67
85
|
* and clicking activates `onClick` (e.g. to enlarge in a dialog).
|
|
68
86
|
* - **removable** — a tertiary × button in the top-right corner calls
|
|
69
87
|
* `onRemove` to delete the photo.
|
|
88
|
+
* - **fluid** — fills its parent's width at the shape's aspect ratio, for
|
|
89
|
+
* responsive grids; **lazy** defers loading the image until it nears the
|
|
90
|
+
* viewport.
|
|
70
91
|
*
|
|
71
92
|
* Tokens used: border-radius-lg, color-black-alpha-3, dialog-color-backdrop,
|
|
72
93
|
* button-color-tertiary-*, alias-color-state-error-*, alert-color-error-accent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC7D,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;IAElC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC7D,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;IAElC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,CAAC,CAAC;IAExF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,uFAoHrB,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
|
@@ -88,6 +88,7 @@ export { LicensePlateInput, type LicensePlateInputProps, } from './LicensePlateI
|
|
|
88
88
|
export { SocialSignInButton, type SocialSignInButtonProps, type SocialSignInProvider, type SocialSignInColor, type SocialSignInSize, type SocialSignInLabel, } from './SocialSignInButton';
|
|
89
89
|
export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, } from './Accordion';
|
|
90
90
|
export { Thumbnail, type ThumbnailProps } from './Thumbnail';
|
|
91
|
+
export { MediaViewer, type MediaViewerProps, type MediaViewerItem, } from './MediaViewer';
|
|
91
92
|
export { PhotoUploader, type PhotoUploaderProps, } from './PhotoUploader';
|
|
92
93
|
export { TextLink, type TextLinkProps } from './TextLink';
|
|
93
94
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,YAAY,EACZ,mBAAmB,EACnB,KAAK,iBAAiB,GACvB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACzG,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACnG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,UAAU,EACV,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,aAAa,GACd,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,mBAAmB,GACzB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,gBAAgB,EAChB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,UAAU,GAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,cAAc,GACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,6BAA6B,GACnC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
|
package/docs/consumers/brand.md
CHANGED
|
@@ -214,8 +214,12 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
|
|
|
214
214
|
link.href = `/styles/tokens-acme-${mode}.css`;
|
|
215
215
|
```
|
|
216
216
|
|
|
217
|
-
|
|
218
|
-
|
|
217
|
+
Those hrefs need the generated CSS at a stable URL: have your token build write
|
|
218
|
+
or copy it into your static/public directory, as part of the same `build:tokens`
|
|
219
|
+
step described under [Keeping your brand current](#keeping-your-brand-current).
|
|
220
|
+
Don't keep a hand-made copy there — it stays frozen while the light stylesheet
|
|
221
|
+
moves on, and any token missing from the dark copy shows its light value in dark
|
|
222
|
+
mode. This is exactly how Muka's own Storybook switches between its ten themes.
|
|
219
223
|
|
|
220
224
|
## Keeping your brand current
|
|
221
225
|
|
|
@@ -71,9 +71,41 @@ document.getElementById('muka-theme').href =
|
|
|
71
71
|
`/styles/tokens-${brand}-${mode}.css`;
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
Those hrefs need the token CSS at a stable URL. Copy it from the installed
|
|
75
|
+
package **as part of every `dev` and `build`** (or let your bundler emit it), so
|
|
76
|
+
it always matches the Muka version you have installed:
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
// scripts/sync-theme-tokens.mjs
|
|
80
|
+
import { copyFileSync, mkdirSync } from 'node:fs';
|
|
81
|
+
import { createRequire } from 'node:module';
|
|
82
|
+
|
|
83
|
+
const require = createRequire(import.meta.url);
|
|
84
|
+
mkdirSync('public/styles', { recursive: true });
|
|
85
|
+
for (const mode of ['light', 'dark']) {
|
|
86
|
+
const file = `tokens-muka-${mode}.css`;
|
|
87
|
+
copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```json
|
|
92
|
+
"scripts": {
|
|
93
|
+
"sync:themes": "node scripts/sync-theme-tokens.mjs",
|
|
94
|
+
"dev": "npm run sync:themes && next dev",
|
|
95
|
+
"build": "npm run sync:themes && next build"
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
|
|
100
|
+
`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
|
|
101
|
+
scripts by default.
|
|
102
|
+
|
|
103
|
+
**Never commit a hand-made copy.** It is frozen at the version you copied, and
|
|
104
|
+
each Muka release adds tokens it lacks. A token missing from the dark copy keeps
|
|
105
|
+
the value from the light stylesheet, so new components show light colours in
|
|
106
|
+
dark mode (e.g. a white ring around grouped avatars).
|
|
107
|
+
|
|
108
|
+
Muka's own Storybook switches between all ten themes this way — see
|
|
77
109
|
`.storybook/ThemeDecorator.ts` in the repo.
|
|
78
110
|
|
|
79
111
|
### `data-layout`: the one attribute that does do something
|
package/package.json
CHANGED
|
@@ -82,9 +82,42 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
|
|
|
82
82
|
link.href = `/styles/tokens-${brand}-${mode}.css`;
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
Those hrefs need the brand's token CSS at a stable URL. Add a script that copies
|
|
86
|
+
it from the installed package into the app's static/public directory, run it
|
|
87
|
+
before `dev` and `build`, and gitignore the copies (or let the bundler emit the
|
|
88
|
+
CSS). Use the brand the app actually loads in place of `muka`:
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
// scripts/sync-theme-tokens.mjs
|
|
92
|
+
import { copyFileSync, mkdirSync } from 'node:fs';
|
|
93
|
+
import { createRequire } from 'node:module';
|
|
94
|
+
|
|
95
|
+
const require = createRequire(import.meta.url);
|
|
96
|
+
mkdirSync('public/styles', { recursive: true });
|
|
97
|
+
for (const mode of ['light', 'dark']) {
|
|
98
|
+
const file = `tokens-muka-${mode}.css`;
|
|
99
|
+
copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```json
|
|
104
|
+
"scripts": {
|
|
105
|
+
"sync:themes": "node scripts/sync-theme-tokens.mjs",
|
|
106
|
+
"dev": "npm run sync:themes && next dev",
|
|
107
|
+
"build": "npm run sync:themes && next build"
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
|
|
112
|
+
`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
|
|
113
|
+
scripts by default.
|
|
114
|
+
|
|
115
|
+
**Never commit a hand-made copy.** It is frozen at the version you copied, and
|
|
116
|
+
each Muka release adds tokens it lacks. A token missing from the dark copy keeps
|
|
117
|
+
the value from the light stylesheet, so new components show light colours in
|
|
118
|
+
dark mode (e.g. a white ring around grouped avatars).
|
|
119
|
+
|
|
120
|
+
This is exactly how Muka's own Storybook switches themes.
|
|
88
121
|
|
|
89
122
|
### Fonts come from Muka — do not load them yourself
|
|
90
123
|
|
|
@@ -38,6 +38,38 @@
|
|
|
38
38
|
"$value": "{size.10xl}"
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
|
+
"icon": {
|
|
42
|
+
"size": {
|
|
43
|
+
"3xs": {
|
|
44
|
+
"$type": "sizing",
|
|
45
|
+
"$value": "{size.md}"
|
|
46
|
+
},
|
|
47
|
+
"2xs": {
|
|
48
|
+
"$type": "sizing",
|
|
49
|
+
"$value": "{size.lg}"
|
|
50
|
+
},
|
|
51
|
+
"xs": {
|
|
52
|
+
"$type": "sizing",
|
|
53
|
+
"$value": "{size.xl}"
|
|
54
|
+
},
|
|
55
|
+
"sm": {
|
|
56
|
+
"$type": "sizing",
|
|
57
|
+
"$value": "{size.2xl}"
|
|
58
|
+
},
|
|
59
|
+
"md": {
|
|
60
|
+
"$type": "sizing",
|
|
61
|
+
"$value": "{size.3xl}"
|
|
62
|
+
},
|
|
63
|
+
"lg": {
|
|
64
|
+
"$type": "sizing",
|
|
65
|
+
"$value": "{size.4xl}"
|
|
66
|
+
},
|
|
67
|
+
"xl": {
|
|
68
|
+
"$type": "sizing",
|
|
69
|
+
"$value": "{size.6xl}"
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
},
|
|
41
73
|
"color": {
|
|
42
74
|
"background": {
|
|
43
75
|
"default": {
|
|
@@ -52,7 +84,7 @@
|
|
|
52
84
|
"foreground": {
|
|
53
85
|
"default": {
|
|
54
86
|
"$type": "color",
|
|
55
|
-
"$value": "{color.text.
|
|
87
|
+
"$value": "{color.text.subtle.default}"
|
|
56
88
|
},
|
|
57
89
|
"muted": {
|
|
58
90
|
"$type": "color",
|