@uni-design-system/uni-core 5.1.0 → 5.2.0

package/dist/esm/index.js

@@ -761,6 +761,28 @@ var Z_INDEX = {
 	overlay: 1080
 };
 //#endregion
+//#region src/concepts/generation/dtcg.emitter.ts
+var dimensionEntries = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => value !== void 0 && value !== "none").map(([key, value]) => [key, {
+	$value: String(value),
+	$type: "dimension"
+}]));
+/**
+* Render one theme mode's tokens as W3C DTCG JSON for external pipelines
+* (Style Dictionary etc.). Token names are exactly Uni's `ColorToken` strings —
+* one vocabulary everywhere. The native `UniTheme` object remains the primary,
+* lossless output; this is the interop layer.
+*/
+var emitDtcgTokens = (input) => ({
+	color: Object.fromEntries(Object.entries(input.colors).filter(([, value]) => value !== void 0).map(([key, value]) => [key, {
+		$value: value,
+		$type: "color"
+	}])),
+	size: {
+		radius: dimensionEntries(input.radii),
+		spacing: dimensionEntries(input.spacing)
+	}
+});
+//#endregion
 //#region src/concepts/generation/shadow.generator.ts
 var rgba = (hex, alpha) => {
 	const { red, green, blue } = hexToRgb(hex);
@@ -995,6 +1017,90 @@ var buildComponents = (c) => ({
 		transitionSpeed: .35,
 		elevation: "md"
 	} },
+	breadcrumb: { options: {
+		typeface: "label",
+		color: "on-background-variant",
+		currentColor: "on-background",
+		separatorSymbol: "chevron_right",
+		gap: "xs"
+	} },
+	appBar: { options: {
+		color: "surface",
+		height: 56,
+		divider: "light",
+		typeface: "title-large",
+		padding: "md",
+		gap: "md",
+		elevation: void 0
+	} },
+	drawer: { options: {
+		color: "surface",
+		width: 280,
+		divider: "light",
+		elevation: "menu",
+		padding: "md",
+		backdrop: { background: "rgba(0, 0, 0, 0.4)" }
+	} },
+	avatar: {
+		options: {
+			borderRadius: "max",
+			typeface: "subtitle-2",
+			fallbackSymbol: "person"
+		},
+		variants: {
+			primary: {
+				backgroundColor: c["primary-container"],
+				color: c["on-primary-container"]
+			},
+			secondary: {
+				backgroundColor: c["secondary-container"],
+				color: c["on-secondary-container"]
+			},
+			tertiary: {
+				backgroundColor: c["tertiary-container"],
+				color: c["on-tertiary-container"]
+			},
+			quaternary: {
+				backgroundColor: c["surface-variant"],
+				color: c["on-surface-variant"]
+			},
+			warn: {
+				backgroundColor: c["warn-container"],
+				color: c["on-warn-container"]
+			},
+			success: {
+				backgroundColor: c["success-container"],
+				color: c["on-success-container"]
+			}
+		},
+		sizes: {
+			sm: {
+				height: 24,
+				width: 24,
+				fontSize: 10
+			},
+			md: {
+				height: 32,
+				width: 32,
+				fontSize: 13
+			},
+			lg: {
+				height: 40,
+				width: 40,
+				fontSize: 16
+			},
+			xl: {
+				height: 56,
+				width: 56,
+				fontSize: 22
+			}
+		}
+	},
+	avatarGroup: { options: {
+		overlap: "sm",
+		ringColor: "surface",
+		ringWidth: 2
+	} },
 	checkbox: { options: { size: 20 } },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1043,6 +1149,22 @@ var buildComponents = (c) => ({
 		focusOutline: `2px solid ${c.primary}`,
 		focusOutlineOffset: 2
 	} },
+	textarea: { options: {
+		rows: 3,
+		resize: "vertical"
+	} },
+	tabs: { options: {
+		typeface: "title-small",
+		textColor: "on-surface-variant",
+		activeTextColor: "primary",
+		indicatorColor: "primary",
+		indicatorThickness: "standard",
+		divider: "light",
+		gap: "sm",
+		borderRadius: "none",
+		padding: "md",
+		activeColor: void 0
+	} },
 	multiSelectDropdown: { options: {
 		textRole: "input",
 		textColor: "on-primary-surface",
@@ -1054,13 +1176,16 @@ var buildComponents = (c) => ({
 	} },
 	badge: { options: { borderRadius: "xxs" } },
 	button: {
+		options: {
+			borderRadius: "max",
+			typeface: "button"
+		},
 		fixed: {
 			position: "relative",
 			overflow: "hidden",
 			outline: "0",
 			border: "0",
 			cursor: "pointer",
-			fontFamily: "Euphemia, sans-serif",
 			transition: "all 0.28s ease"
 		},
 		variants: {
@@ -1111,33 +1236,29 @@ var buildComponents = (c) => ({
 		sizes: {
 			sm: {
 				height: 22,
-				borderRadius: 11,
 				fontSize: 12,
 				padding: "0 12px",
-				fontFamily: "Euphemia Bold, sans-serif",
 				fontWeight: 600
 			},
 			md: {
 				height: 26,
-				borderRadius: 13,
 				fontSize: 16,
 				padding: "0 16px"
 			},
 			lg: {
 				height: 36,
-				borderRadius: 18,
 				fontSize: 18,
 				padding: "0 18px"
 			},
 			xl: {
 				height: 48,
-				borderRadius: 24,
 				fontSize: 24,
 				padding: "0 22px"
 			}
 		}
 	},
 	iconButton: {
+		options: { borderRadius: "max" },
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -1203,23 +1324,23 @@ var buildComponents = (c) => ({
 		fixed: { textFill: c["on-background"] },
 		variants: {
 			primary: {
-				backgroundColor: "#b3d4ea",
+				backgroundColor: c["primary-container"],
 				color: c.primary
 			},
 			secondary: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["secondary-container"],
 				color: c.secondary
 			},
 			tertiary: {
-				backgroundColor: "#ffe2b3",
+				backgroundColor: c["tertiary-container"],
 				color: c.tertiary
 			},
 			warn: {
-				backgroundColor: "#ffc2b3",
+				backgroundColor: c["warn-container"],
 				color: c.warn
 			},
 			success: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["success-container"],
 				color: c.success
 			}
 		},
@@ -1231,33 +1352,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	card: {
+		options: { borderRadius: "xs" },
 		fixed: {
-			borderStyle: "solid",
-			borderWidth: "1px",
-			borderRadius: "8px",
-			overflow: "hidden"
-		},
-		variants: {
-			primary: {
-				borderColor: c.primary,
-				backgroundColor: c.background
-			},
-			secondary: {
-				borderColor: c.secondary,
-				backgroundColor: c.background
-			},
-			tertiary: {
-				borderColor: c.tertiary,
-				backgroundColor: c.background
-			},
-			warn: {
-				borderColor: c.warn,
-				backgroundColor: c.background
-			},
-			success: {
-				borderColor: c.success,
-				backgroundColor: c.background
-			}
+			overflow: "hidden",
+			backgroundColor: c.background
 		}
 	},
 	cardHeader: {
@@ -1328,6 +1426,21 @@ var buildComponents = (c) => ({
 		currentPageBorder: "light",
 		currentPageBorderRadius: "xs"
 	} },
+	slider: { options: {
+		color: "primary",
+		trackColor: "surface-variant",
+		borderRadius: "max",
+		trackHeight: 4,
+		thumbSize: 16
+	} },
+	skeleton: { options: {
+		color: "surface-variant",
+		highlightColor: "surface",
+		borderRadius: "xs",
+		animation: "shimmer",
+		duration: 1.4,
+		gap: "sm"
+	} },
 	snackbar: { options: {
 		bottomPosition: 40,
 		transitionDelay: "0.35s",
@@ -1379,6 +1492,7 @@ var createThemeFromPalette = (config) => {
 		id: config.id ?? "CustomTheme",
 		name: config.name ?? "Custom Theme",
 		colors,
+		radii: config.radii,
 		shadows: generateShadows(colors, config.mode ?? "light"),
 		icons: config.icons
 	});
@@ -1850,6 +1964,6 @@ var debounce = (callback, timeout) => {
 	};
 };
 //#endregion
-export { BASE_PALETTE_CONFIG, BaseTheme, CategoryChroma, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, FontWeightMap, HSLAToString, HSLToHex, HSLToRGB, LightTheme, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, emitThemeFile, expandFadeIn, fadeIn, fadeOut, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, inferCategory, lightColors, oklchToHex, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, toTypeface, toTypefaces, uniColor };
+export { BASE_PALETTE_CONFIG, BaseTheme, CategoryChroma, CategoryLightness, CategorySaturation, DarkTheme, DefaultThemeId, FontWeightMap, HSLAToString, HSLToHex, HSLToRGB, LightTheme, RGBToHSL, RGBToString, RoleHues, ShadowCssMap, ShadowMap, ShapeRadii, UniThemes, Z_INDEX, classifyScheme, collapseFadeOut, contrastRatio, createTheme, createThemeFromPalette, cycle, darkColors, debounce, emitDtcgTokens, emitThemeFile, expandFadeIn, fadeIn, fadeOut, generateColors, generatePalette, generateShadows, generateThemes, generateUniThemes, getAnalogousHues, getComplimentaryHue, getDeviceOrientation, getDeviceSize, getSplitComplimentaryHues, getTriadicHues, getValue, gradient, hexToHSL, hexToOklch, hexToRgb, inferCategory, lightColors, oklchToHex, randomRangeValue, relativeLuminance, removeInputPlatformStyling, rgbToHex, schemeHues, toTypeface, toTypefaces, uniColor };
 
 //# sourceMappingURL=index.js.map