@uni-design-system/uni-core 8.3.1 → 8.4.0

package/dist/esm/index.js

@@ -1125,6 +1125,43 @@ var BaseThicknesses = {
 	standard: 2,
 	thick: 4
 };
+/**
+* Shared motion timing, named by what moves rather than by how fast:
+* a small panel attached to a control snaps (`popup`), a larger free-floating
+* surface settles (`panel`), content growing in place eases at both ends
+* (`reveal`), a transient message arrives and leaves under its own steam
+* (`notification`), and a control answering a pointer should feel immediate
+* (`control`).
+*
+* Fast and linear is deliberate for `popup`. It is the timing every
+* trigger-anchored panel in the library uses — dropdown, menu, multi-select
+* and the combobox-style listboxes — so a form full of them opens uniformly;
+* at 100ms an easing curve is imperceptible anyway, and linear avoids the
+* lag a slow-in curve adds to something the user is waiting on.
+*/
+var BaseMotion = {
+	popup: {
+		duration: 100,
+		easing: "linear",
+		scale: .8
+	},
+	panel: {
+		duration: 250,
+		easing: "ease"
+	},
+	reveal: {
+		duration: 350,
+		easing: "ease-in-out"
+	},
+	notification: {
+		duration: 350,
+		easing: "ease-in-out"
+	},
+	control: {
+		duration: 300,
+		easing: "ease"
+	}
+};
 var BaseRadii = {
 	none: "none",
 	xxs: "4px",
@@ -1168,7 +1205,7 @@ var buildComponents = (c) => ({
 	alert: { options: {
 		topPosition: 40,
 		borderRadius: "sm",
-		transitionSpeed: .35,
+		motion: "notification",
 		elevation: "md"
 	} },
 	breadcrumb: { options: {
@@ -1274,7 +1311,7 @@ var buildComponents = (c) => ({
 		size: 20,
 		ringColor: "outline",
 		fillColor: "surface",
-		transitionSpeed: .3
+		motion: "control"
 	} },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1311,7 +1348,8 @@ var buildComponents = (c) => ({
 		border: "none",
 		borderRadius: "xxs",
 		color: "primary-surface",
-		shadow: "menu"
+		shadow: "menu",
+		motion: "popup"
 	} },
 	menu: { options: {
 		minWidth: 184,
@@ -1334,7 +1372,7 @@ var buildComponents = (c) => ({
 			textColor: void 0,
 			hoverColor: "primary-container",
 			activeSymbol: "check",
-			transitionSpeed: .35
+			motion: "control"
 		},
 		variants: { warn: {
 			color: c.warn,
@@ -1358,9 +1396,10 @@ var buildComponents = (c) => ({
 		headerTypeface: "title-small",
 		tooltipPadding: "4px 8px",
 		tooltipOpenDelay: 500,
-		tooltipCloseDelay: 150
+		tooltipCloseDelay: 150,
+		motion: "panel"
 	} },
-	expand: { options: { transitionSpeed: .35 } },
+	expand: { options: { motion: "reveal" } },
 	footer: { options: {
 		height: 52,
 		color: "primary",
@@ -1821,11 +1860,13 @@ var buildComponents = (c) => ({
 		borderRadius: "xs",
 		animation: "shimmer",
 		duration: 1.4,
+		direction: "ltr",
+		highlightWidth: 40,
 		gap: "sm"
 	} },
 	snackbar: { options: {
 		bottomPosition: 40,
-		transitionDelay: "0.35s",
+		motion: "notification",
 		autoCloseDelay: 35e3
 	} },
 	symbol: { options: {
@@ -1861,7 +1902,7 @@ var buildComponents = (c) => ({
 		spotlightPadding: 6,
 		spotlightRadius: "xs",
 		ringWidth: 2,
-		transitionMs: 250
+		motion: "panel"
 	} },
 	tour: { options: {
 		progressStyle: "dots",
@@ -1875,7 +1916,7 @@ var deepMerge = (base, override) => {
 	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
-var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, typography, borders, thicknesses, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, components }) => ({
 	id,
 	name,
 	colors,
@@ -1884,6 +1925,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	radii,
 	shadows,
 	spacing: BaseSpacing,
+	motion: {
+		...BaseMotion,
+		...motion
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses