@vellira-ui/react-native 2.98.6 → 2.99.0

package/dist/index.js

@@ -4,6 +4,59 @@ import { createConsoleOverlayDiagnostics, createOverlayManagerStore, createOverl
 import { controlSizes, darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
+//#region src/theme/componentTokenOutput.ts
+const componentShadowLevels = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function hasExactKeys(candidate, expectedKeys) {
+	const actualKeys = Object.keys(candidate);
+	return actualKeys.length === expectedKeys.length && actualKeys.every((key) => expectedKeys.includes(key));
+}
+function isComponentPlatformIntent(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const candidate = value;
+	if (candidate.kind === "shadow") {
+		if (candidate.role === "focus-ring" || candidate.role === "none") return hasExactKeys(candidate, ["kind", "role"]);
+		return candidate.role === "elevation" && hasExactKeys(candidate, [
+			"kind",
+			"role",
+			"level"
+		]) && typeof candidate.level === "string" && componentShadowLevels.includes(candidate.level);
+	}
+	return candidate.kind === "viewport-height" && hasExactKeys(candidate, ["kind", "ratio"]) && typeof candidate.ratio === "number" && Number.isFinite(candidate.ratio) && candidate.ratio > 0 && candidate.ratio <= 1;
+}
+function formatPercentage(ratio) {
+	const percentage = ratio * 100;
+	return Number.isInteger(percentage) ? String(percentage) : String(Number(percentage.toFixed(4)));
+}
+function resolveIntentForWeb(theme, intent) {
+	if (intent.kind === "viewport-height") return `${formatPercentage(intent.ratio)}vh`;
+	if (intent.role === "focus-ring") return theme.semantic.focus.ring.shadow;
+	if (intent.role === "none") return "none";
+	return theme.semantic.shadow[intent.level];
+}
+function resolveIntentForReactNative(theme, intent) {
+	if (intent.kind === "viewport-height") return `${formatPercentage(intent.ratio)}%`;
+	if (intent.role === "focus-ring" || intent.role === "none") return null;
+	const nativeLevel = intent.level === "xl" ? "lg" : intent.level;
+	return theme.tokens.shadows[nativeLevel];
+}
+function adaptComponentTokenTree(value, resolveIntent) {
+	if (isComponentPlatformIntent(value)) return resolveIntent(value);
+	if (Array.isArray(value)) return value.map((entry) => adaptComponentTokenTree(entry, resolveIntent));
+	if (typeof value === "object" && value !== null) return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, adaptComponentTokenTree(entry, resolveIntent)]));
+	return value;
+}
+function resolveComponentTokenPlatformOutputs(theme, componentTokens) {
+	return {
+		web: adaptComponentTokenTree(componentTokens, (intent) => resolveIntentForWeb(theme, intent)),
+		reactNative: adaptComponentTokenTree(componentTokens, (intent) => resolveIntentForReactNative(theme, intent))
+	};
+}
+//#endregion
 //#region src/theme/fontWeight.ts
 const nativeFontWeights = /* @__PURE__ */ new Set([
 	"normal",
@@ -936,82 +989,88 @@ DropdownContext.displayName = "DropdownContext";
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
 const getDropdownBackdropBackgroundColor = (theme, presentation) => presentation === "popover" ? "transparent" : theme.semantic.overlay.backdrop;
-const createStyles$22 = (theme) => StyleSheet.create({
-	modalRoot: { flex: 1 },
-	sheet: { justifyContent: "flex-end" },
-	modal: {
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
-	popover: { flex: 1 },
-	backdrop: { ...StyleSheet.absoluteFill },
-	menu: {
-		maxHeight: "50%",
-		overflow: "hidden",
-		padding: theme.tokens.spacing[1],
-		backgroundColor: theme.components.dropdown.content.bg,
-		borderColor: theme.components.dropdown.content.border,
-		borderTopLeftRadius: theme.tokens.radius.lg,
-		borderTopRightRadius: theme.tokens.radius.lg,
-		borderWidth: 1,
-		...Platform.select({
-			web: { boxShadow: theme.components.dropdown.content.shadow },
-			default: {
-				shadowColor: theme.tokens.shadows.lg.color,
-				shadowOffset: {
-					width: theme.tokens.shadows.lg.x,
-					height: -theme.tokens.shadows.lg.y
-				},
-				shadowOpacity: theme.tokens.shadows.lg.opacity,
-				shadowRadius: theme.tokens.shadows.lg.blur,
-				elevation: theme.tokens.shadows.lg.elevation
-			}
-		})
-	},
-	sheetMenu: {
-		width: "100%",
-		maxHeight: "70%",
-		borderTopLeftRadius: theme.tokens.radius.lg,
-		borderTopRightRadius: theme.tokens.radius.lg
-	},
-	modalMenu: {
-		width: "100%",
-		maxWidth: 420,
-		maxHeight: "70%",
-		borderRadius: theme.tokens.radius.lg
-	},
-	popoverMenu: {
-		width: "100%",
-		maxWidth: 360,
-		maxHeight: "60%",
-		borderRadius: theme.tokens.radius.md
-	},
-	searchWrap: {
-		minHeight: 40,
-		flexDirection: "row",
-		alignItems: "center",
-		gap: theme.tokens.spacing[2],
-		paddingHorizontal: theme.tokens.spacing[3],
-		borderBottomWidth: 1,
-		borderBottomColor: theme.components.dropdown.separator.bg
-	},
-	searchIcon: {
-		width: 16,
-		height: 16,
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	searchInput: {
-		flex: 1,
-		minWidth: 0,
-		paddingVertical: theme.tokens.spacing[2],
-		color: theme.components.dropdown.content.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.sm,
-		lineHeight: theme.tokens.typography.lineHeight.sm
-	}
-});
+const createStyles$22 = (theme) => {
+	const canonical = theme.components.dropdown.content;
+	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
+	const nativeShadow = output.reactNative.shadow;
+	if (nativeShadow === null || typeof nativeShadow === "string") throw new Error("Dropdown content shadow must resolve to a structured React Native shadow.");
+	return StyleSheet.create({
+		modalRoot: { flex: 1 },
+		sheet: { justifyContent: "flex-end" },
+		modal: {
+			alignItems: "center",
+			justifyContent: "center",
+			padding: theme.tokens.spacing[4]
+		},
+		popover: { flex: 1 },
+		backdrop: { ...StyleSheet.absoluteFill },
+		menu: {
+			maxHeight: "50%",
+			overflow: "hidden",
+			padding: theme.tokens.spacing[1],
+			backgroundColor: canonical.bg,
+			borderColor: canonical.border,
+			borderTopLeftRadius: theme.tokens.radius.lg,
+			borderTopRightRadius: theme.tokens.radius.lg,
+			borderWidth: 1,
+			...Platform.select({
+				web: { boxShadow: output.web.shadow },
+				default: {
+					shadowColor: nativeShadow.color,
+					shadowOffset: {
+						width: nativeShadow.x,
+						height: -nativeShadow.y
+					},
+					shadowOpacity: nativeShadow.opacity,
+					shadowRadius: nativeShadow.blur,
+					elevation: nativeShadow.elevation
+				}
+			})
+		},
+		sheetMenu: {
+			width: "100%",
+			maxHeight: "70%",
+			borderTopLeftRadius: theme.tokens.radius.lg,
+			borderTopRightRadius: theme.tokens.radius.lg
+		},
+		modalMenu: {
+			width: "100%",
+			maxWidth: 420,
+			maxHeight: "70%",
+			borderRadius: theme.tokens.radius.lg
+		},
+		popoverMenu: {
+			width: "100%",
+			maxWidth: 360,
+			maxHeight: "60%",
+			borderRadius: theme.tokens.radius.md
+		},
+		searchWrap: {
+			minHeight: 40,
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.tokens.spacing[2],
+			paddingHorizontal: theme.tokens.spacing[3],
+			borderBottomWidth: 1,
+			borderBottomColor: theme.components.dropdown.separator.bg
+		},
+		searchIcon: {
+			width: 16,
+			height: 16,
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		searchInput: {
+			flex: 1,
+			minWidth: 0,
+			paddingVertical: theme.tokens.spacing[2],
+			color: theme.components.dropdown.content.fg,
+			fontFamily: theme.tokens.typography.family.regular,
+			fontSize: theme.tokens.typography.size.sm,
+			lineHeight: theme.tokens.typography.lineHeight.sm
+		}
+	});
+};
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.tsx
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
@@ -2201,30 +2260,38 @@ const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) =>
 ModalClose.displayName = "Modal.Close";
 //#endregion
 //#region src/components/Modal/Content/ModalContent.styles.ts
-const createStyles$14 = (theme) => StyleSheet.create({ content: {
-	width: "100%",
-	maxWidth: theme.components.modal.content.size.md,
-	maxHeight: theme.components.modal.content.nativeMaxHeight,
-	padding: theme.components.modal.content.padding,
-	gap: theme.components.modal.content.gap,
-	backgroundColor: theme.components.modal.content.bg,
-	borderColor: theme.components.modal.content.border,
-	borderRadius: theme.components.modal.content.radius,
-	borderWidth: theme.components.modal.content.borderWidth,
-	...Platform.select({
-		web: { boxShadow: theme.components.modal.content.shadow },
-		default: {
-			shadowColor: theme.tokens.shadows.lg.color,
-			shadowOffset: {
-				width: theme.tokens.shadows.lg.x,
-				height: theme.tokens.shadows.lg.y
-			},
-			shadowOpacity: theme.tokens.shadows.lg.opacity,
-			shadowRadius: theme.tokens.shadows.lg.blur,
-			elevation: theme.tokens.shadows.lg.elevation
-		}
-	})
-} });
+const createStyles$14 = (theme) => {
+	const canonical = theme.components.modal.content;
+	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
+	const nativeShadow = output.reactNative.shadow;
+	return StyleSheet.create({ content: {
+		width: "100%",
+		maxWidth: canonical.size.md,
+		maxHeight: Platform.select({
+			web: output.web.maxHeight,
+			default: output.reactNative.maxHeight
+		}),
+		padding: canonical.padding,
+		gap: canonical.gap,
+		backgroundColor: canonical.bg,
+		borderColor: canonical.border,
+		borderRadius: canonical.radius,
+		borderWidth: canonical.borderWidth,
+		...Platform.select({
+			web: { boxShadow: output.web.shadow },
+			default: {
+				shadowColor: nativeShadow.color,
+				shadowOffset: {
+					width: nativeShadow.x,
+					height: nativeShadow.y
+				},
+				shadowOpacity: nativeShadow.opacity,
+				shadowRadius: nativeShadow.blur,
+				elevation: nativeShadow.elevation
+			}
+		})
+	} });
+};
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
 const ModalContent = ({ children, style }) => {
@@ -2701,26 +2768,27 @@ const styles = StyleSheet.create({
 	content: { position: "absolute" }
 });
 function createPopoverContentStyles(theme) {
-	const tokens = theme.components.popover.content;
-	const shadow = tokens.shadow.native;
+	const canonical = theme.components.popover.content;
+	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
+	const nativeShadow = output.reactNative.shadow;
 	return StyleSheet.create({ content: {
-		minWidth: tokens.minWidth,
-		maxWidth: tokens.maxWidth,
-		padding: tokens.padding,
-		gap: tokens.gap,
-		backgroundColor: tokens.bg,
-		borderColor: tokens.border,
-		borderWidth: tokens.borderWidth,
-		borderRadius: tokens.radius,
-		...Platform.OS === "web" ? { boxShadow: tokens.shadow.web } : {
-			shadowColor: shadow.color,
-			shadowOpacity: shadow.opacity,
-			shadowRadius: shadow.blur,
+		minWidth: canonical.minWidth,
+		maxWidth: canonical.maxWidth,
+		padding: canonical.padding,
+		gap: canonical.gap,
+		backgroundColor: canonical.bg,
+		borderColor: canonical.border,
+		borderWidth: canonical.borderWidth,
+		borderRadius: canonical.radius,
+		...Platform.OS === "web" ? { boxShadow: output.web.shadow } : {
+			shadowColor: nativeShadow.color,
+			shadowOpacity: nativeShadow.opacity,
+			shadowRadius: nativeShadow.blur,
 			shadowOffset: {
-				width: shadow.x,
-				height: shadow.y
+				width: nativeShadow.x,
+				height: nativeShadow.y
 			},
-			elevation: shadow.elevation
+			elevation: nativeShadow.elevation
 		}
 	} });
 }
@@ -3991,87 +4059,93 @@ const SelectLoadingState = () => {
 SelectLoadingState.displayName = "Select.LoadingState";
 //#endregion
 //#region src/components/Select/Presentation/SelectPresentation.styles.ts
-const createPresentationStyles = (theme) => StyleSheet.create({
-	modalRoot: { flex: 1 },
-	sheetRoot: { justifyContent: "flex-end" },
-	modalPresentationRoot: {
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
-	backdrop: {
-		...StyleSheet.absoluteFill,
-		backgroundColor: theme.semantic.overlay.backdrop
-	},
-	content: {
-		overflow: "hidden",
-		backgroundColor: theme.components.select.dropdown.bg,
-		borderColor: theme.components.select.dropdown.border,
-		borderWidth: 1
-	},
-	surface: { ...Platform.select({
-		web: { boxShadow: theme.components.select.dropdown.shadow },
-		default: {
-			shadowColor: theme.tokens.shadows.lg.color,
-			shadowOffset: {
-				width: theme.tokens.shadows.lg.x,
-				height: theme.tokens.shadows.lg.y
-			},
-			shadowOpacity: theme.tokens.shadows.lg.opacity,
-			shadowRadius: theme.tokens.shadows.lg.blur,
-			elevation: theme.tokens.shadows.lg.elevation
-		}
-	}) },
-	sheetSurface: {
-		borderTopLeftRadius: theme.tokens.radius.lg,
-		borderTopRightRadius: theme.tokens.radius.lg,
-		...Platform.select({
-			web: { boxShadow: `0 -${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px color-mix(in srgb, ${theme.tokens.shadows.lg.color} ${theme.tokens.shadows.lg.opacity * 100}%, transparent)` },
+const createPresentationStyles = (theme) => {
+	const canonical = theme.components.select.dropdown;
+	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
+	const nativeShadow = output.reactNative.shadow;
+	if (nativeShadow === null || typeof nativeShadow === "string") throw new Error("Select dropdown shadow must resolve to a structured React Native shadow.");
+	return StyleSheet.create({
+		modalRoot: { flex: 1 },
+		sheetRoot: { justifyContent: "flex-end" },
+		modalPresentationRoot: {
+			alignItems: "center",
+			justifyContent: "center",
+			padding: theme.tokens.spacing[4]
+		},
+		backdrop: {
+			...StyleSheet.absoluteFill,
+			backgroundColor: theme.semantic.overlay.backdrop
+		},
+		content: {
+			overflow: "hidden",
+			backgroundColor: canonical.bg,
+			borderColor: canonical.border,
+			borderWidth: 1
+		},
+		surface: { ...Platform.select({
+			web: { boxShadow: output.web.shadow },
 			default: {
-				shadowColor: theme.tokens.shadows.lg.color,
+				shadowColor: nativeShadow.color,
 				shadowOffset: {
-					width: theme.tokens.shadows.lg.x,
-					height: -theme.tokens.shadows.lg.y
+					width: nativeShadow.x,
+					height: nativeShadow.y
 				},
-				shadowOpacity: theme.tokens.shadows.lg.opacity,
-				shadowRadius: theme.tokens.shadows.lg.blur,
-				elevation: theme.tokens.shadows.lg.elevation
+				shadowOpacity: nativeShadow.opacity,
+				shadowRadius: nativeShadow.blur,
+				elevation: nativeShadow.elevation
 			}
-		})
-	},
-	modalSurface: {
-		width: "100%",
-		maxWidth: 420,
-		borderRadius: theme.tokens.radius.lg
-	},
-	popoverSurface: { borderRadius: theme.tokens.radius.lg },
-	sheet: {
-		maxHeight: "74%",
-		borderTopLeftRadius: theme.tokens.radius.lg,
-		borderTopRightRadius: theme.tokens.radius.lg,
-		borderBottomWidth: 0
-	},
-	modalPresentation: {
-		width: "100%",
-		maxWidth: 420,
-		maxHeight: "74%",
-		borderRadius: theme.tokens.radius.lg
-	},
-	popover: {
-		maxHeight: "60%",
-		borderRadius: theme.tokens.radius.lg
-	},
-	handleWrap: {
-		alignItems: "center",
-		paddingTop: theme.tokens.spacing[3]
-	},
-	handle: {
-		width: 44,
-		height: 4,
-		borderRadius: 999,
-		backgroundColor: theme.semantic.border.muted
-	}
-});
+		}) },
+		sheetSurface: {
+			borderTopLeftRadius: theme.tokens.radius.lg,
+			borderTopRightRadius: theme.tokens.radius.lg,
+			...Platform.select({
+				web: { boxShadow: `0 -${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px color-mix(in srgb, ${theme.tokens.shadows.lg.color} ${theme.tokens.shadows.lg.opacity * 100}%, transparent)` },
+				default: {
+					shadowColor: theme.tokens.shadows.lg.color,
+					shadowOffset: {
+						width: theme.tokens.shadows.lg.x,
+						height: -theme.tokens.shadows.lg.y
+					},
+					shadowOpacity: theme.tokens.shadows.lg.opacity,
+					shadowRadius: theme.tokens.shadows.lg.blur,
+					elevation: theme.tokens.shadows.lg.elevation
+				}
+			})
+		},
+		modalSurface: {
+			width: "100%",
+			maxWidth: 420,
+			borderRadius: theme.tokens.radius.lg
+		},
+		popoverSurface: { borderRadius: theme.tokens.radius.lg },
+		sheet: {
+			maxHeight: "74%",
+			borderTopLeftRadius: theme.tokens.radius.lg,
+			borderTopRightRadius: theme.tokens.radius.lg,
+			borderBottomWidth: 0
+		},
+		modalPresentation: {
+			width: "100%",
+			maxWidth: 420,
+			maxHeight: "74%",
+			borderRadius: theme.tokens.radius.lg
+		},
+		popover: {
+			maxHeight: "60%",
+			borderRadius: theme.tokens.radius.lg
+		},
+		handleWrap: {
+			alignItems: "center",
+			paddingTop: theme.tokens.spacing[3]
+		},
+		handle: {
+			width: 44,
+			height: 4,
+			borderRadius: 999,
+			backgroundColor: theme.semantic.border.muted
+		}
+	});
+};
 //#endregion
 //#region src/components/Select/Presentation/SelectBackdrop.tsx
 const SelectBackdrop = ({ outsidePressProps }) => {
@@ -6112,44 +6186,49 @@ function TooltipArrow() {
 }
 //#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
-const createStyles$4 = (theme) => StyleSheet.create({
-	root: { alignSelf: Platform.select({
-		web: "auto",
-		default: "flex-start"
-	}) },
-	overlay: { ...StyleSheet.absoluteFill },
-	bubble: {
-		position: "absolute",
-		maxWidth: theme.components.tooltip.content.maxWidth,
-		paddingHorizontal: theme.components.tooltip.content.paddingX,
-		paddingVertical: theme.components.tooltip.content.paddingY,
-		backgroundColor: theme.components.tooltip.content.bg,
-		borderColor: theme.components.tooltip.content.border,
-		borderRadius: theme.components.tooltip.content.radius,
-		borderWidth: theme.components.tooltip.content.borderWidth,
-		...Platform.select({
-			web: { boxShadow: theme.components.tooltip.content.shadow },
-			default: {
-				shadowColor: theme.tokens.shadows.md.color,
-				shadowOffset: {
-					width: theme.tokens.shadows.md.x,
-					height: theme.tokens.shadows.md.y
-				},
-				shadowOpacity: theme.tokens.shadows.md.opacity,
-				shadowRadius: theme.tokens.shadows.md.blur,
-				elevation: theme.tokens.shadows.md.elevation
-			}
-		})
-	},
-	text: {
-		flexShrink: 1,
-		color: theme.components.tooltip.content.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.components.tooltip.content.fontSize,
-		lineHeight: theme.components.tooltip.content.lineHeight,
-		textAlign: "center"
-	}
-});
+const createStyles$4 = (theme) => {
+	const canonical = theme.components.tooltip.content;
+	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
+	const nativeShadow = output.reactNative.shadow;
+	return StyleSheet.create({
+		root: { alignSelf: Platform.select({
+			web: "auto",
+			default: "flex-start"
+		}) },
+		overlay: { ...StyleSheet.absoluteFill },
+		bubble: {
+			position: "absolute",
+			maxWidth: canonical.maxWidth,
+			paddingHorizontal: canonical.paddingX,
+			paddingVertical: canonical.paddingY,
+			backgroundColor: canonical.bg,
+			borderColor: canonical.border,
+			borderRadius: canonical.radius,
+			borderWidth: canonical.borderWidth,
+			...Platform.select({
+				web: { boxShadow: output.web.shadow },
+				default: {
+					shadowColor: nativeShadow.color,
+					shadowOffset: {
+						width: nativeShadow.x,
+						height: nativeShadow.y
+					},
+					shadowOpacity: nativeShadow.opacity,
+					shadowRadius: nativeShadow.blur,
+					elevation: nativeShadow.elevation
+				}
+			})
+		},
+		text: {
+			flexShrink: 1,
+			color: canonical.fg,
+			fontFamily: theme.tokens.typography.family.regular,
+			fontSize: canonical.fontSize,
+			lineHeight: canonical.lineHeight,
+			textAlign: "center"
+		}
+	});
+};
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
 const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.98.6",
+  "version": "2.99.0",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",