@revikornmann/muka-ui 0.6.0 → 0.8.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/Alert/Alert.css +7 -0
- package/dist/cjs/components/DataPieChart/DataPieChart.css +29 -0
- package/dist/cjs/components/DataPieChart/DataPieChart.js +20 -3
- package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.js +64 -7
- package/dist/cjs/components/Dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/NavigationTransition/NavigationTransition.js +25 -8
- package/dist/cjs/components/NavigationTransition/NavigationTransition.js.map +1 -1
- package/dist/cjs/components/PhotoUploader/PhotoUploader.css +125 -0
- package/dist/cjs/components/PhotoUploader/PhotoUploader.js +257 -0
- package/dist/cjs/components/PhotoUploader/PhotoUploader.js.map +1 -0
- package/dist/cjs/components/PhotoUploader/index.js +6 -0
- package/dist/cjs/components/PhotoUploader/index.js.map +1 -0
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +32 -2
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +13 -2
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/cjs/components/SpecList/SpecList.css +34 -21
- package/dist/cjs/components/SpecList/SpecList.js +9 -3
- package/dist/cjs/components/SpecList/SpecList.js.map +1 -1
- package/dist/cjs/components/Thumbnail/Thumbnail.css +171 -0
- package/dist/cjs/components/Thumbnail/Thumbnail.js +55 -0
- package/dist/cjs/components/Thumbnail/Thumbnail.js.map +1 -0
- package/dist/cjs/components/Thumbnail/index.js +6 -0
- package/dist/cjs/components/Thumbnail/index.js.map +1 -0
- package/dist/cjs/components/index.js +5 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/Alert/Alert.css +7 -0
- package/dist/esm/components/DataPieChart/DataPieChart.css +29 -0
- package/dist/esm/components/DataPieChart/DataPieChart.js +20 -3
- package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +31 -7
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/NavigationTransition/NavigationTransition.js +25 -8
- package/dist/esm/components/NavigationTransition/NavigationTransition.js.map +1 -1
- package/dist/esm/components/PhotoUploader/PhotoUploader.css +125 -0
- package/dist/esm/components/PhotoUploader/PhotoUploader.js +254 -0
- package/dist/esm/components/PhotoUploader/PhotoUploader.js.map +1 -0
- package/dist/esm/components/PhotoUploader/index.js +2 -0
- package/dist/esm/components/PhotoUploader/index.js.map +1 -0
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +32 -2
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +13 -2
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/esm/components/SpecList/SpecList.css +34 -21
- package/dist/esm/components/SpecList/SpecList.js +9 -3
- package/dist/esm/components/SpecList/SpecList.js.map +1 -1
- package/dist/esm/components/Thumbnail/Thumbnail.css +171 -0
- package/dist/esm/components/Thumbnail/Thumbnail.js +52 -0
- package/dist/esm/components/Thumbnail/Thumbnail.js.map +1 -0
- package/dist/esm/components/Thumbnail/index.js +2 -0
- package/dist/esm/components/Thumbnail/index.js.map +1 -0
- package/dist/esm/components/index.js +2 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/Alert.css +7 -0
- package/dist/styles/components/DataPieChart.css +29 -0
- package/dist/styles/components/PhotoUploader.css +125 -0
- package/dist/styles/components/ProgressAccordeon.css +32 -2
- package/dist/styles/components/SpecList.css +34 -21
- package/dist/styles/components/Thumbnail.css +171 -0
- package/dist/styles/index.css +867 -449
- package/dist/styles/muka-dark.css +867 -449
- package/dist/styles/muka-light.css +867 -449
- package/dist/styles/tokens-bouwplan-dark.css +37 -0
- package/dist/styles/tokens-bouwplan-light.css +37 -0
- package/dist/styles/tokens-fscl-dark.css +37 -0
- package/dist/styles/tokens-fscl-light.css +37 -0
- package/dist/styles/tokens-grip-dark.css +37 -0
- package/dist/styles/tokens-grip-light.css +37 -0
- package/dist/styles/tokens-muka-dark.css +37 -0
- package/dist/styles/tokens-muka-light.css +37 -0
- package/dist/styles/tokens-wireframe-dark.css +37 -0
- package/dist/styles/tokens-wireframe-light.css +37 -0
- package/dist/styles/wireframe-dark.css +867 -449
- package/dist/styles/wireframe-light.css +867 -449
- package/dist/types/components/DataPieChart/DataPieChart.d.ts +7 -0
- package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
- package/dist/types/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/types/components/FileUpload/FileUpload.d.ts +1 -1
- package/dist/types/components/FileUpload/FileUpload.d.ts.map +1 -1
- package/dist/types/components/FileUpload/FileUploadItem.d.ts +1 -1
- package/dist/types/components/FileUpload/FileUploadItem.d.ts.map +1 -1
- package/dist/types/components/NavigationTransition/NavigationTransition.d.ts +3 -1
- package/dist/types/components/NavigationTransition/NavigationTransition.d.ts.map +1 -1
- package/dist/types/components/PhotoUploader/PhotoUploader.d.ts +71 -0
- package/dist/types/components/PhotoUploader/PhotoUploader.d.ts.map +1 -0
- package/dist/types/components/PhotoUploader/index.d.ts +2 -0
- package/dist/types/components/PhotoUploader/index.d.ts.map +1 -0
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -1
- package/dist/types/components/SpecList/SpecList.d.ts +13 -5
- package/dist/types/components/SpecList/SpecList.d.ts.map +1 -1
- package/dist/types/components/Thumbnail/Thumbnail.d.ts +77 -0
- package/dist/types/components/Thumbnail/Thumbnail.d.ts.map +1 -0
- package/dist/types/components/Thumbnail/index.d.ts +2 -0
- package/dist/types/components/Thumbnail/index.d.ts.map +1 -0
- package/dist/types/components/index.d.ts +2 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/scripts/build-tokens.js +12 -1
- package/tokens/t1-primitives/motion.json +21 -0
- package/tokens/t2-alias/base.json +17 -0
- package/tokens/t3-semantics/ui.json +12 -0
|
@@ -109,6 +109,13 @@
|
|
|
109
109
|
height: 100%;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
/* The leading icon and the dismiss (×) icon inherit the variant accent set on
|
|
113
|
+
their container, overriding the Icon component's default color. */
|
|
114
|
+
.muka-alert__icon .muka-icon,
|
|
115
|
+
.muka-alert__dismiss .muka-icon {
|
|
116
|
+
color: inherit;
|
|
117
|
+
}
|
|
118
|
+
|
|
112
119
|
/* Content */
|
|
113
120
|
.muka-alert__content {
|
|
114
121
|
flex: 1;
|
|
@@ -27,6 +27,35 @@
|
|
|
27
27
|
transition: stroke-dasharray 0.3s ease;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/* ─── Indeterminate (spinner) ─────────────────────────── */
|
|
31
|
+
/* A masked ring filled with an angular (conic) gradient that rotates. The mask
|
|
32
|
+
band matches the donut geometry (r=40, strokeWidth=16 → 64%–96% of radius) so
|
|
33
|
+
it swaps seamlessly with the value-based progress donut. */
|
|
34
|
+
.muka-data-pie-chart__spinner-track,
|
|
35
|
+
.muka-data-pie-chart__spinner {
|
|
36
|
+
position: absolute;
|
|
37
|
+
inset: 0;
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
-webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
|
|
40
|
+
mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.muka-data-pie-chart__spinner {
|
|
44
|
+
animation: muka-data-pie-chart-spin 0.9s linear infinite;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes muka-data-pie-chart-spin {
|
|
48
|
+
to {
|
|
49
|
+
transform: rotate(360deg);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (prefers-reduced-motion: reduce) {
|
|
54
|
+
.muka-data-pie-chart__spinner {
|
|
55
|
+
animation-duration: 2.5s;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
30
59
|
.muka-data-pie-chart__value {
|
|
31
60
|
position: absolute;
|
|
32
61
|
inset: 0;
|
|
@@ -17,9 +17,14 @@ const GEOMETRY = {
|
|
|
17
17
|
*
|
|
18
18
|
* Variants: donut (default), pie
|
|
19
19
|
*/
|
|
20
|
-
const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color
|
|
20
|
+
const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color, trackColor = 'var(--color-surface-level0)', showValue = false, indeterminate = false, className = '', 'aria-label': ariaLabel, ...props }) => {
|
|
21
21
|
const { radius, strokeWidth } = GEOMETRY[variant];
|
|
22
22
|
const circumference = 2 * Math.PI * radius;
|
|
23
|
+
// Indeterminate is a donut-only spinner; ignore it for the pie variant.
|
|
24
|
+
const spinning = indeterminate && variant === 'donut';
|
|
25
|
+
// The determinate arc defaults to the accent; the indeterminate spinner
|
|
26
|
+
// defaults to a subtle grey (its angular gradient fades to this colour).
|
|
27
|
+
const resolvedColor = color ?? (spinning ? 'var(--color-icon-subtle-default)' : 'var(--color-action-default)');
|
|
23
28
|
const safeMax = max > 0 ? max : 1;
|
|
24
29
|
const fraction = Math.min(1, Math.max(0, value / safeMax));
|
|
25
30
|
const percent = Math.round(fraction * 100);
|
|
@@ -27,12 +32,24 @@ const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color =
|
|
|
27
32
|
const chartClasses = [
|
|
28
33
|
'muka-data-pie-chart',
|
|
29
34
|
`muka-data-pie-chart--${variant}`,
|
|
35
|
+
spinning && 'muka-data-pie-chart--indeterminate',
|
|
30
36
|
className,
|
|
31
37
|
]
|
|
32
38
|
.filter(Boolean)
|
|
33
39
|
.join(' ');
|
|
34
|
-
const label = ariaLabel ??
|
|
35
|
-
|
|
40
|
+
const label = ariaLabel ??
|
|
41
|
+
(spinning
|
|
42
|
+
? 'Loading'
|
|
43
|
+
: `${variant === 'donut' ? 'Donut' : 'Pie'} chart: ${percent}%`);
|
|
44
|
+
// Indeterminate spinner: a masked ring with an angular (conic) gradient that
|
|
45
|
+
// fades from the track colour round to `resolvedColor`, rotating. Shares the
|
|
46
|
+
// donut footprint so it swaps seamlessly with a progress donut of the same size.
|
|
47
|
+
if (spinning) {
|
|
48
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: chartClasses, style: { width: size, height: size }, role: "img", "aria-label": label, ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-data-pie-chart__spinner-track", "aria-hidden": "true", style: { background: trackColor } }), (0, jsx_runtime_1.jsx)("span", { className: "muka-data-pie-chart__spinner", "aria-hidden": "true", style: {
|
|
49
|
+
background: `conic-gradient(from 0deg, ${trackColor} 0deg, ${resolvedColor} 340deg, ${resolvedColor} 360deg)`,
|
|
50
|
+
} })] }));
|
|
51
|
+
}
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: chartClasses, style: { width: size, height: size }, role: "img", "aria-label": label, ...props, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "muka-data-pie-chart__svg", viewBox: "0 0 100 100", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "muka-data-pie-chart__track", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, stroke: trackColor }), fraction > 0 && ((0, jsx_runtime_1.jsx)("circle", { className: "muka-data-pie-chart__segment", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, stroke: resolvedColor, strokeDasharray: `${arcLength} ${circumference - arcLength}`, strokeDashoffset: 0 }))] }), showValue && variant === 'donut' && ((0, jsx_runtime_1.jsxs)("span", { className: "muka-data-pie-chart__value", "aria-hidden": "true", children: [percent, "%"] }))] }));
|
|
36
53
|
};
|
|
37
54
|
exports.DataPieChart = DataPieChart;
|
|
38
55
|
exports.default = exports.DataPieChart;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";;;;AACA,8BAA4B;
|
|
1
|
+
{"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,42 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use client';
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
3
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
37
|
exports.Dialog = void 0;
|
|
5
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_1 = require("react");
|
|
39
|
+
const react_1 = __importStar(require("react"));
|
|
7
40
|
const TopBar_1 = require("../TopBar");
|
|
8
41
|
const BottomBar_1 = require("../BottomBar");
|
|
9
42
|
const Button_1 = require("../Button");
|
|
@@ -19,6 +52,25 @@ function getNearestSnap(height) {
|
|
|
19
52
|
const snaps = [SNAP_SM, SNAP_MD, snapLg];
|
|
20
53
|
return snaps.reduce((prev, curr) => Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev);
|
|
21
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* Clone the Dialog's action Buttons (including those wrapped in a Fragment) to
|
|
57
|
+
* force a size, so the TopBar/BottomBar buttons always match the design regardless
|
|
58
|
+
* of the size a consumer passes. Non-Button nodes are left untouched.
|
|
59
|
+
*/
|
|
60
|
+
function withButtonSize(node, size) {
|
|
61
|
+
return react_1.default.Children.map(node, (child) => {
|
|
62
|
+
if (!react_1.default.isValidElement(child))
|
|
63
|
+
return child;
|
|
64
|
+
if (child.type === react_1.default.Fragment) {
|
|
65
|
+
const fragment = child;
|
|
66
|
+
return react_1.default.cloneElement(fragment, {}, withButtonSize(fragment.props.children, size));
|
|
67
|
+
}
|
|
68
|
+
if (child.type === Button_1.Button) {
|
|
69
|
+
return react_1.default.cloneElement(child, { size });
|
|
70
|
+
}
|
|
71
|
+
return child;
|
|
72
|
+
});
|
|
73
|
+
}
|
|
22
74
|
const Dialog = ({ open, onClose, children, size = 'sm', mobileHeight = 'full', modal = true, title, leading, trailing, footerActions, footerVariant = 'actions', mobileLeadingLabel, mobileTrailingLabel, onMobileLeadingClick, onMobileTrailingClick, 'aria-label': ariaLabel, surfaceLevel = 3, 'aria-describedby': ariaDescribedBy, className = '', }) => {
|
|
23
75
|
const dialogRef = (0, react_1.useRef)(null);
|
|
24
76
|
const surfaceRef = (0, react_1.useRef)(null);
|
|
@@ -158,17 +210,22 @@ const Dialog = ({ open, onClose, children, size = 'sm', mobileHeight = 'full', m
|
|
|
158
210
|
].filter(Boolean).join(' ');
|
|
159
211
|
// Non-modal on mobile gets drag handle via TopBar variant
|
|
160
212
|
const topBarVariant = !modal ? 'draggable' : 'default';
|
|
161
|
-
// Compute leading/trailing for TopBar — avoid always-truthy fragments
|
|
213
|
+
// Compute leading/trailing for TopBar — avoid always-truthy fragments.
|
|
214
|
+
// Per design, TopBar action buttons are `lg` on every viewport.
|
|
162
215
|
const topBarLeading = !modal
|
|
163
|
-
? leading
|
|
216
|
+
? withButtonSize(leading, 'lg')
|
|
164
217
|
: (mobileLeadingLabel && hasInputs)
|
|
165
|
-
? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dialog__mobile-only", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", size: "
|
|
218
|
+
? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dialog__mobile-only", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", size: "lg", onClick: onMobileLeadingClick, children: mobileLeadingLabel }) }))
|
|
166
219
|
: undefined;
|
|
167
220
|
const topBarTrailing = !modal
|
|
168
|
-
? trailing
|
|
221
|
+
? withButtonSize(trailing, 'lg')
|
|
169
222
|
: (mobileTrailingLabel && hasInputs)
|
|
170
|
-
? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dialog__mobile-only", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "
|
|
223
|
+
? ((0, jsx_runtime_1.jsx)("span", { className: "muka-dialog__mobile-only", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "lg", onClick: onMobileTrailingClick || onClose, children: mobileTrailingLabel }) }))
|
|
171
224
|
: undefined;
|
|
225
|
+
// Per design, BottomBar action buttons are `lg`.
|
|
226
|
+
const sizedFooterActions = footerActions
|
|
227
|
+
? withButtonSize(footerActions, 'lg')
|
|
228
|
+
: undefined;
|
|
172
229
|
// Surface inline style for drag/snap
|
|
173
230
|
const surfaceStyle = isDragging && dragHeight !== null
|
|
174
231
|
? { height: `${dragHeight}px`, transition: 'none' }
|
|
@@ -179,7 +236,7 @@ const Dialog = ({ open, onClose, children, size = 'sm', mobileHeight = 'full', m
|
|
|
179
236
|
return (
|
|
180
237
|
// Native <dialog> is interactive and handles Escape natively; click handler closes on backdrop click.
|
|
181
238
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
182
|
-
(0, jsx_runtime_1.jsx)("dialog", { ref: dialogRef, className: dialogClasses, onClick: handleBackdropClick, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsxs)("div", { ref: surfaceRef, className: "muka-dialog__surface", style: surfaceStyle, tabIndex: -1, children: [!modal ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-dialog__drag-area", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, style: { touchAction: 'none' }, children: topBar })) : (topBar), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "muka-dialog__body", children: children }),
|
|
239
|
+
(0, jsx_runtime_1.jsx)("dialog", { ref: dialogRef, className: dialogClasses, onClick: handleBackdropClick, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsxs)("div", { ref: surfaceRef, className: "muka-dialog__surface", style: surfaceStyle, tabIndex: -1, children: [!modal ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-dialog__drag-area", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, style: { touchAction: 'none' }, children: topBar })) : (topBar), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "muka-dialog__body", children: children }), sizedFooterActions && ((0, jsx_runtime_1.jsx)("div", { className: "muka-dialog__footer", children: (0, jsx_runtime_1.jsx)(BottomBar_1.BottomBar, { variant: footerVariant, size: "lg", bordered: false, children: sizedFooterActions }) }))] }) }));
|
|
183
240
|
};
|
|
184
241
|
exports.Dialog = Dialog;
|
|
185
242
|
exports.default = exports.Dialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,12 +5,26 @@ exports.NavigationTransition = void 0;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
require("./NavigationTransition.css");
|
|
8
|
-
const
|
|
9
|
-
const
|
|
8
|
+
const DURATION_FALLBACK = 300;
|
|
9
|
+
const EASING_FALLBACK = 'cubic-bezier(0.16, 1, 0.3, 1)';
|
|
10
|
+
function getResolvedDuration(durationProp, el) {
|
|
11
|
+
if (durationProp !== undefined)
|
|
12
|
+
return durationProp;
|
|
13
|
+
if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
|
|
14
|
+
return 0;
|
|
15
|
+
if (el) {
|
|
16
|
+
const raw = getComputedStyle(el).getPropertyValue('--motion-duration-view').trim();
|
|
17
|
+
if (raw)
|
|
18
|
+
return parseInt(raw, 10);
|
|
19
|
+
}
|
|
20
|
+
return DURATION_FALLBACK;
|
|
21
|
+
}
|
|
22
|
+
const NavigationTransition = ({ activeView, activeKey, direction, duration, easing, className = '', }) => {
|
|
10
23
|
const [transition, setTransition] = (0, react_1.useState)(null);
|
|
11
24
|
const prevViewRef = (0, react_1.useRef)(activeView);
|
|
12
25
|
const prevKeyRef = (0, react_1.useRef)(activeKey);
|
|
13
26
|
const timerRef = (0, react_1.useRef)();
|
|
27
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
14
28
|
const topRef = (0, react_1.useRef)(null);
|
|
15
29
|
const bottomRef = (0, react_1.useRef)(null);
|
|
16
30
|
// Detect key change synchronously during render (React's "store previous value" pattern)
|
|
@@ -25,9 +39,11 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
|
|
|
25
39
|
(0, react_1.useLayoutEffect)(() => {
|
|
26
40
|
if (!transition || !topRef.current || !bottomRef.current)
|
|
27
41
|
return;
|
|
42
|
+
const resolvedDuration = getResolvedDuration(duration, containerRef.current);
|
|
43
|
+
const resolvedEasing = easing ?? EASING_FALLBACK;
|
|
28
44
|
const options = {
|
|
29
|
-
duration,
|
|
30
|
-
easing:
|
|
45
|
+
duration: resolvedDuration,
|
|
46
|
+
easing: resolvedEasing,
|
|
31
47
|
fill: 'forwards',
|
|
32
48
|
};
|
|
33
49
|
if (transition.direction === 'forward') {
|
|
@@ -38,7 +54,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
|
|
|
38
54
|
topRef.current.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }], options);
|
|
39
55
|
bottomRef.current.animate([{ transform: 'translateX(-30%)' }, { transform: 'translateX(0)' }], options);
|
|
40
56
|
}
|
|
41
|
-
}, [transition, duration]);
|
|
57
|
+
}, [transition, duration, easing]);
|
|
42
58
|
// Keep the previous view ref up-to-date when not transitioning
|
|
43
59
|
(0, react_1.useEffect)(() => {
|
|
44
60
|
if (!transition) {
|
|
@@ -49,9 +65,10 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
|
|
|
49
65
|
// End the transition after the animation duration
|
|
50
66
|
(0, react_1.useEffect)(() => {
|
|
51
67
|
if (transition) {
|
|
68
|
+
const resolvedDuration = getResolvedDuration(duration, containerRef.current);
|
|
52
69
|
timerRef.current = window.setTimeout(() => {
|
|
53
70
|
setTransition(null);
|
|
54
|
-
},
|
|
71
|
+
}, resolvedDuration);
|
|
55
72
|
return () => clearTimeout(timerRef.current);
|
|
56
73
|
}
|
|
57
74
|
}, [transition, duration]);
|
|
@@ -60,7 +77,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
|
|
|
60
77
|
return () => clearTimeout(timerRef.current);
|
|
61
78
|
}, []);
|
|
62
79
|
if (!transition) {
|
|
63
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: `muka-nav-transition ${className}`.trim(), children: activeView }));
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: `muka-nav-transition ${className}`.trim(), children: activeView }));
|
|
64
81
|
}
|
|
65
82
|
const isForward = transition.direction === 'forward';
|
|
66
83
|
const enteringView = activeView;
|
|
@@ -69,7 +86,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
|
|
|
69
86
|
// Back: exiting view on top (slides away), entering below
|
|
70
87
|
const topView = isForward ? enteringView : exitingView;
|
|
71
88
|
const bottomView = isForward ? exitingView : enteringView;
|
|
72
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [(0, jsx_runtime_1.jsx)("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), (0, jsx_runtime_1.jsx)("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [(0, jsx_runtime_1.jsx)("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), (0, jsx_runtime_1.jsx)("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
|
|
73
90
|
};
|
|
74
91
|
exports.NavigationTransition = NavigationTransition;
|
|
75
92
|
exports.default = exports.NavigationTransition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationTransition.js","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAA4E;AAC5E,sCAAoC;AAEpC,MAAM,mBAAmB,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"NavigationTransition.js","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/* PhotoUploader Component Styles - Using Muka Design Tokens */
|
|
2
|
+
|
|
3
|
+
.muka-photo-uploader {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: flex-start;
|
|
7
|
+
gap: var(--spacing-4);
|
|
8
|
+
width: 100%;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Visually-hidden native file input */
|
|
12
|
+
.muka-photo-uploader__input {
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: 1px;
|
|
15
|
+
height: 1px;
|
|
16
|
+
padding: 0;
|
|
17
|
+
margin: -1px;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
clip: rect(0, 0, 0, 0);
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
border: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ─── Error feedback alert ────────────────────────────── */
|
|
25
|
+
.muka-photo-uploader__alert {
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* ─── Thumbnail grid ──────────────────────────────────── */
|
|
30
|
+
.muka-photo-uploader__grid {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-wrap: wrap;
|
|
33
|
+
gap: var(--spacing-3);
|
|
34
|
+
width: 100%;
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
list-style: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.muka-photo-uploader__grid-item {
|
|
41
|
+
margin: 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* ─── Drop zone card ──────────────────────────────────── */
|
|
46
|
+
.muka-photo-uploader__dropzone {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
gap: var(--spacing-4);
|
|
52
|
+
width: 100%;
|
|
53
|
+
padding: var(--card-padding-lg);
|
|
54
|
+
background-color: var(--card-color-default-background);
|
|
55
|
+
border: var(--border-width-regular, 1px) solid var(--card-color-default-border);
|
|
56
|
+
border-radius: var(--border-radius-lg);
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
text-align: center;
|
|
59
|
+
transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
|
|
60
|
+
border-color var(--motion-duration-micro) var(--motion-easing-enter);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.muka-photo-uploader__dropzone:hover,
|
|
64
|
+
.muka-photo-uploader__dropzone--active {
|
|
65
|
+
border-color: var(--color-border-focus);
|
|
66
|
+
background-color: var(--color-surface-level1);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.muka-photo-uploader__dropzone:focus-visible {
|
|
70
|
+
outline: 2px solid var(--color-border-focus);
|
|
71
|
+
outline-offset: 2px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.muka-photo-uploader__dropzone-icon {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
color: var(--color-icon-subtle-default);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.muka-photo-uploader__dropzone-text {
|
|
82
|
+
font-family: var(--text-body-md-regular-fontFamily);
|
|
83
|
+
font-size: var(--text-body-md-regular-fontSize);
|
|
84
|
+
font-weight: var(--text-body-md-regular-fontWeight);
|
|
85
|
+
line-height: var(--text-body-md-regular-lineHeight);
|
|
86
|
+
color: var(--color-text-subtle-default);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ─── Disabled ────────────────────────────────────────── */
|
|
90
|
+
.muka-photo-uploader--disabled .muka-photo-uploader__dropzone {
|
|
91
|
+
cursor: not-allowed;
|
|
92
|
+
opacity: 0.6;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.muka-photo-uploader--disabled .muka-photo-uploader__dropzone:hover {
|
|
96
|
+
border-color: var(--card-color-default-border);
|
|
97
|
+
background-color: var(--card-color-default-background);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* ─── Enlarged photo dialog ───────────────────────────── */
|
|
101
|
+
.muka-photo-uploader__preview {
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
width: 100%;
|
|
106
|
+
height: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Fits the dialog while preserving the photo's original aspect ratio. */
|
|
110
|
+
.muka-photo-uploader__preview-image {
|
|
111
|
+
display: block;
|
|
112
|
+
max-width: 100%;
|
|
113
|
+
max-height: 100%;
|
|
114
|
+
width: auto;
|
|
115
|
+
height: auto;
|
|
116
|
+
object-fit: contain;
|
|
117
|
+
border-radius: var(--border-radius-lg);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ─── Reduced motion ──────────────────────────────────── */
|
|
121
|
+
@media (prefers-reduced-motion: reduce) {
|
|
122
|
+
.muka-photo-uploader__dropzone {
|
|
123
|
+
transition: none;
|
|
124
|
+
}
|
|
125
|
+
}
|