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

package/dist/esm/index.js

@@ -59,183 +59,6 @@ var collapseFadeOut = {
 	}
 };
 //#endregion
-//#region src/concepts/color/color.records.ts
-/**
-* @deprecated HSL saturation ranges are superseded by the perceptual OKLCH
-* chroma model inside `concepts/generation` (see `generateThemes`). Kept for
-* legacy callers of `uniColor`; removal follows the changeset major process.
-*/
-var CategorySaturation = {
-	jewel: {
-		low: 73,
-		high: 83
-	},
-	pastel: {
-		low: 14,
-		high: 21
-	},
-	earth: {
-		low: 36,
-		high: 41
-	},
-	neutral: {
-		low: 1,
-		high: 10
-	},
-	florescent: {
-		low: 63,
-		high: 100
-	},
-	shades: {
-		low: 0,
-		high: 0
-	}
-};
-/**
-* @deprecated HSL lightness ranges are superseded by the perceptual OKLCH
-* tone slots inside `concepts/generation` (see `generateThemes`).
-*/
-var CategoryLightness = {
-	jewel: {
-		low: 56,
-		high: 76
-	},
-	pastel: {
-		low: 89,
-		high: 96
-	},
-	earth: {
-		low: 36,
-		high: 77
-	},
-	neutral: {
-		low: 70,
-		high: 99
-	},
-	florescent: {
-		low: 82,
-		high: 100
-	},
-	shades: {
-		low: 0,
-		high: 100
-	}
-};
-var RoleHues = {
-	primary: {
-		low: 73,
-		high: 83,
-		default: 0
-	},
-	secondary: {
-		low: 14,
-		high: 21,
-		default: 0
-	},
-	tertiary: {
-		low: 36,
-		high: 41,
-		default: 0
-	},
-	inverse: {
-		low: 63,
-		high: 100,
-		default: 0
-	},
-	ghost: {
-		low: 0,
-		high: 0,
-		default: 0
-	},
-	warn: {
-		low: 320,
-		high: 20,
-		default: 0
-	},
-	alert: {
-		low: 40,
-		high: 70,
-		default: 60
-	},
-	success: {
-		low: 90,
-		high: 150,
-		default: 120
-	},
-	info: {
-		low: 200,
-		high: 260,
-		default: 240
-	}
-};
-//#endregion
-//#region src/concepts/color/color.utils.ts
-/**
-* @deprecated Randomized generation is superseded by the deterministic OKLCH
-* engine in `concepts/generation` — same input, same theme. Seeded "surprise
-* me" behavior belongs in the consumer (playground), not the engine.
-*/
-var randomRangeValue = ({ low, high }) => {
-	low = Math.ceil(low);
-	high = Math.floor(high);
-	return Math.floor(Math.random() * (high - low + 1)) + low;
-};
-var cycle = (angle) => {
-	if (angle > 360) return angle - 360;
-	if (angle < 0) return angle + 360;
-	return angle;
-};
-var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
-var getComplimentaryHue = (hue) => cycle(hue + 180);
-var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
-var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
-/**
-* Derive the primary/secondary/tertiary hues from a seed hue using the color
-* wheel relationships in {@link ColorScheme}. Pure angle math — works in any
-* hue space (HSL historically, OKLCH in the generation engine).
-*/
-var schemeHues = (hue, scheme) => {
-	switch (scheme) {
-		case "monochromatic": return {
-			primary: hue,
-			secondary: hue,
-			tertiary: hue
-		};
-		case "analogous": {
-			const [a, b] = getAnalogousHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-		case "complimentary": {
-			const [a] = getAnalogousHues(hue);
-			return {
-				primary: hue,
-				secondary: getComplimentaryHue(hue),
-				tertiary: a
-			};
-		}
-		case "splitComplimentary": {
-			const [a, b] = getSplitComplimentaryHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-		case "triadic": {
-			const [a, b] = getTriadicHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-	}
-};
-//#endregion
 //#region src/concepts/color/color.helper.ts
 function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
 	return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
@@ -243,19 +66,6 @@ function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
 function RGBToString({ red, green, blue }) {
 	return `rgb(${red}, ${green}, ${blue})`;
 }
-/**
-* @deprecated Random HSL generation produces non-deterministic, perceptually
-* uneven colors. Use the OKLCH engine (`generateThemes` in
-* `concepts/generation`) or `generatePalette` instead.
-*/
-function uniColor({ role, category, alpha = 1 }) {
-	return HSLAToString({
-		hue: randomRangeValue(RoleHues[role]),
-		saturation: randomRangeValue(CategorySaturation[category]),
-		lightness: randomRangeValue(CategoryLightness[category]),
-		alpha
-	});
-}
 var RGBToHSL = ({ red, green, blue }) => {
 	red /= 255;
 	green /= 255;
@@ -339,6 +149,63 @@ var contrastRatio = (a, b) => {
 	return (hi + .05) / (lo + .05);
 };
 //#endregion
+//#region src/concepts/color/color.utils.ts
+var cycle = (angle) => {
+	if (angle > 360) return angle - 360;
+	if (angle < 0) return angle + 360;
+	return angle;
+};
+var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
+var getComplimentaryHue = (hue) => cycle(hue + 180);
+var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
+var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
+/**
+* Derive the primary/secondary/tertiary hues from a seed hue using the color
+* wheel relationships in {@link ColorScheme}. Pure angle math — works in any
+* hue space (HSL historically, OKLCH in the generation engine).
+*/
+var schemeHues = (hue, scheme) => {
+	switch (scheme) {
+		case "monochromatic": return {
+			primary: hue,
+			secondary: hue,
+			tertiary: hue
+		};
+		case "analogous": {
+			const [a, b] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "complimentary": {
+			const [a] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: getComplimentaryHue(hue),
+				tertiary: a
+			};
+		}
+		case "splitComplimentary": {
+			const [a, b] = getSplitComplimentaryHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "triadic": {
+			const [a, b] = getTriadicHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+	}
+};
+//#endregion
 //#region src/concepts/generation/oklch.helper.ts
 var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 var srgbToLinear = (channel) => channel <= .04045 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
@@ -1118,13 +985,51 @@ var BaseSpacing = {
 	sm: "8px",
 	md: "16px",
 	lg: "32px",
-	xl: "64px"
+	xl: "64px",
+	xxl: "128px"
 };
 var BaseThicknesses = {
 	thin: 1,
 	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 +1073,7 @@ var buildComponents = (c) => ({
 	alert: { options: {
 		topPosition: 40,
 		borderRadius: "sm",
-		transitionSpeed: .35,
+		motion: "notification",
 		elevation: "md"
 	} },
 	breadcrumb: { options: {
@@ -1274,7 +1179,7 @@ var buildComponents = (c) => ({
 		size: 20,
 		ringColor: "outline",
 		fillColor: "surface",
-		transitionSpeed: .3
+		motion: "control"
 	} },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1311,7 +1216,8 @@ var buildComponents = (c) => ({
 		border: "none",
 		borderRadius: "xxs",
 		color: "primary-surface",
-		shadow: "menu"
+		shadow: "menu",
+		motion: "popup"
 	} },
 	menu: { options: {
 		minWidth: 184,
@@ -1334,7 +1240,7 @@ var buildComponents = (c) => ({
 			textColor: void 0,
 			hoverColor: "primary-container",
 			activeSymbol: "check",
-			transitionSpeed: .35
+			motion: "control"
 		},
 		variants: { warn: {
 			color: c.warn,
@@ -1358,9 +1264,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 +1728,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 +1770,7 @@ var buildComponents = (c) => ({
 		spotlightPadding: 6,
 		spotlightRadius: "xs",
 		ringWidth: 2,
-		transitionMs: 250
+		motion: "panel"
 	} },
 	tour: { options: {
 		progressStyle: "dots",
@@ -1875,7 +1784,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, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1883,7 +1792,14 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	borders: deepMerge(buildBorders(colors), borders),
 	radii,
 	shadows,
-	spacing: BaseSpacing,
+	spacing: {
+		...BaseSpacing,
+		...spacing
+	},
+	motion: {
+		...BaseMotion,
+		...motion
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses
@@ -2132,6 +2048,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
 	`  shadows: ${shadowsConst},`,
 	"  icons,",
 	...radii ? ["  radii,"] : [],
+	"  spacing,",
 	"});"
 ].join("\n");
 /**
@@ -2187,6 +2104,7 @@ var emitThemeFile = (input) => {
 			"  type ComponentThemes,",
 			"  type Icons,",
 			"  type Shadows,",
+			"  type Spacing,",
 			"  type UniTheme,",
 			"} from '@uni-design-system/uni-core';",
 			"",
@@ -2223,6 +2141,15 @@ var emitThemeFile = (input) => {
 			" */",
 			"const icons: Icons = {};",
 			"",
+			"/**",
+			" * Spacing steps, merged over the base scale",
+			" * (none: 0, xxs: 2px, xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px, xxl: 128px).",
+			" * Restate a named step to retune the rhythm, and add your own names for the",
+			" * gaps your design actually uses — every extra key is then a valid `padding`,",
+			" * `gap` or `marginInline` value: `<div stack-layout gap='tight'>`.",
+			" */",
+			"const spacing: Spacing = {};",
+			"",
 			...radii ? [
 				`/** Shape language: '${input.shape}'. */`,
 				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
@@ -2726,6 +2653,6 @@ var debounce = (callback, timeout) => {
 	};
 };
 //#endregion
-export { BASE_PALETTE_CONFIG, BaseIcons, BaseTheme, CategoryChroma, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, EXPAND_DEFAULT_SPEED, EXPAND_MAX_DURATION, EXPAND_MIN_DURATION, EXPAND_REFERENCE_HEIGHT, FontWeightMap, HOVER_OR_KEYBOARD_FOCUS, HSLAToString, HSLToHex, HSLToRGB, LightTheme, REQUIRED_COLOR_TOKENS, REQUIRED_RADII_SIZES, REQUIRED_SHADOWS, REQUIRED_SPACING_SIZES, REQUIRED_TEXT_ROLES, REQUIRED_THICKNESSES, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, assertTheme, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, dehydrateTheme, emitDtcgTokens, emitThemeFile, expandDuration, expandFadeIn, fadeIn, fadeOut, formatThemeIssues, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, hydrateTheme, inferCategory, isUniTheme, lightColors, oklchToHex, parseTheme, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, summarizeContrast, svgToIconUri, toTypeface, toTypefaces, uniColor };
+export { BASE_PALETTE_CONFIG, BaseIcons, BaseTheme, CategoryChroma, DarkTheme, DefaultThemeId, EXPAND_DEFAULT_SPEED, EXPAND_MAX_DURATION, EXPAND_MIN_DURATION, EXPAND_REFERENCE_HEIGHT, FontWeightMap, HOVER_OR_KEYBOARD_FOCUS, HSLAToString, HSLToHex, HSLToRGB, LightTheme, REQUIRED_COLOR_TOKENS, REQUIRED_RADII_SIZES, REQUIRED_SHADOWS, REQUIRED_SPACING_SIZES, REQUIRED_TEXT_ROLES, REQUIRED_THICKNESSES, RGBToHSL, RGBToString, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, assertTheme, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, dehydrateTheme, emitDtcgTokens, emitThemeFile, expandDuration, expandFadeIn, fadeIn, fadeOut, formatThemeIssues, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, hydrateTheme, inferCategory, isUniTheme, lightColors, oklchToHex, parseTheme, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, summarizeContrast, svgToIconUri, toTypeface, toTypefaces };
 
 //# sourceMappingURL=index.js.map