radix-native-ui 0.1.1 → 0.1.3

package/README.md

@@ -313,7 +313,7 @@ If you're familiar with Radix Themes for web, here are the key differences for R
 |------------------|-------------------------------|
 | `css={{ p: '$4' }}` | `padding={4}` |
 | `variant="solid"` | `variant="solid"` (same) |
-| `size="2"` | `size={2}` (number, not string) |
+| `size="2"` | `size={2}` (number is canonical; strings also accepted) |
 | `onClick` | `onPress` |
 | `color="red"` | `color="red"` (same) |
 

package/dist/index.cjs

@@ -3961,10 +3961,10 @@ AnimatedPressable.displayName = "AnimatedPressable";
 //#endregion
 //#region src/components/layout/Box.tsx
 const areEqual$12 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
+	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.flex === nextProps.flex && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
 	return false;
 };
-const Box = react.default.memo(react.default.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
+const Box = react.default.memo(react.default.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flex, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = theme.colors.gray;
 	const radii = theme.radii;
@@ -3988,6 +3988,7 @@ const Box = react.default.memo(react.default.forwardRef(({ asChild = false, chil
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -4030,6 +4031,7 @@ const Box = react.default.memo(react.default.forwardRef(({ asChild = false, chil
 		justifyContent,
 		alignItems,
 		flexWrap,
+		flex,
 		flexGrow,
 		flexShrink,
 		flexBasis,
@@ -4510,21 +4512,20 @@ Separator.displayName = "Separator";
 * </Stack>
 */
 const Stack = react.default.memo(({ children, direction = "vertical", gap, align, justify, wrap = "nowrap", asChild = false, style, width, height, flexGrow, flexShrink, padding, backgroundColor }) => {
-	const theme = useTheme$1();
 	const stackStyle = (0, react.useMemo)(() => {
 		const baseStyle = {
 			display: "flex",
 			flexDirection: direction === "horizontal" ? "row" : "column",
 			flexWrap: wrap
 		};
-		if (gap !== void 0) baseStyle.gap = theme.space[gap];
+		if (gap !== void 0) baseStyle.gap = gap;
 		if (align !== void 0) baseStyle.alignItems = align;
 		if (justify !== void 0) baseStyle.justifyContent = justify;
 		if (width !== void 0) baseStyle.width = width;
 		if (height !== void 0) baseStyle.height = height;
 		if (flexGrow !== void 0) baseStyle.flexGrow = flexGrow;
 		if (flexShrink !== void 0) baseStyle.flexShrink = flexShrink;
-		if (padding !== void 0) baseStyle.padding = theme.space[padding];
+		if (padding !== void 0) baseStyle.padding = padding;
 		if (backgroundColor !== void 0) baseStyle.backgroundColor = backgroundColor;
 		return baseStyle;
 	}, [
@@ -4538,8 +4539,7 @@ const Stack = react.default.memo(({ children, direction = "vertical", gap, align
 		flexGrow,
 		flexShrink,
 		padding,
-		backgroundColor,
-		theme.space
+		backgroundColor
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : RnView, {
 		style: [stackStyle, style],
@@ -5411,8 +5411,8 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 	const variantColors = getVariantColors(theme, activeColor, mode, variant || "outline", highContrast || false);
 	const [isFocused, setIsFocused] = react.default.useState(false);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				fontSize: theme.typography.fontSizes[4].fontSize,
 				paddingVertical: theme.space[2],
 				paddingHorizontal: theme.space[3],
@@ -5420,7 +5420,7 @@ const TextFieldRoot = react.default.forwardRef(({ children, ...props }, ref) =>
 				height: multiline ? void 0 : 36,
 				slotPadding: theme.space[1]
 			};
-			case "3": return {
+			case 3: return {
 				fontSize: theme.typography.fontSizes[6].fontSize,
 				paddingVertical: theme.space[4],
 				paddingHorizontal: theme.space[4],
@@ -5683,13 +5683,13 @@ const TextAreaRoot = react.default.forwardRef(({ children, ...props }, ref) => {
 	const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
 	const accentColorScale = getColorScale(theme, activeColor, mode);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				fontSize: theme.typography.fontSizes[4].fontSize,
 				padding: theme.space[2],
 				height: 100
 			};
-			case "3": return {
+			case 3: return {
 				fontSize: theme.typography.fontSizes[6].fontSize,
 				padding: theme.space[4],
 				height: 140
@@ -5853,8 +5853,8 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 	getContrast(theme, activeColor, mode, highContrast);
 	const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				boxSize: 20,
 				iconSize: 11,
 				fontSize: theme.typography.fontSizes[1].fontSize,
@@ -5862,7 +5862,7 @@ const Checkbox = react.default.forwardRef(({ checked, defaultChecked = false, on
 				borderWidth: 1,
 				height: 2.5
 			};
-			case "3": return {
+			case 3: return {
 				boxSize: 28,
 				iconSize: 16,
 				fontSize: theme.typography.fontSizes[3].fontSize,
@@ -6079,15 +6079,15 @@ const CheckboxCardsItem = react.default.forwardRef(({ value, side: itemSide, dis
 	getAccentColor(theme, mode);
 	const variantColors = getVariantColors(theme, color || theme.accentColor, mode, variant, highContrast);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				padding: theme.space[3],
 				indicatorSize: 18,
 				innerIndicatorSize: 6,
 				borderWidth: 1,
 				checkHeight: 2.2
 			};
-			case "3": return {
+			case 3: return {
 				padding: theme.space[5],
 				indicatorSize: 26,
 				innerIndicatorSize: 10,
@@ -6186,15 +6186,15 @@ const Radio = react.default.forwardRef(({ defaultChecked, value, selected, onSel
 	const [isInternallySelected, setIsInternallySelected] = react.default.useState(defaultChecked ?? false);
 	const isSelected = selected !== void 0 ? selected : isInternallySelected;
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				boxSize: 18,
 				innerSize: 6,
 				iconSize: 8,
 				fontSize: theme.typography.fontSizes[1].fontSize,
 				gap: theme.space[1]
 			};
-			case "3": return {
+			case 3: return {
 				boxSize: 28,
 				innerSize: 12,
 				iconSize: 16,
@@ -6417,14 +6417,14 @@ const RadioCardsItem = react.default.forwardRef(({ value, side: itemSide, disabl
 	getAccentColor(theme, mode);
 	const variantColors = getVariantColors(theme, color || theme.accentColor, mode, variant, highContrast);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				padding: theme.space[3],
 				indicatorSize: 18,
 				innerIndicatorSize: 8,
 				borderWidth: 1
 			};
-			case "3": return {
+			case 3: return {
 				padding: theme.space[5],
 				indicatorSize: 26,
 				innerIndicatorSize: 12,
@@ -6552,15 +6552,15 @@ const Switch = react.default.forwardRef(({ defaultChecked, checked, onCheckedCha
 		}).start();
 	}, [isChecked]);
 	const getSizeValues = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				trackWidth: 32,
 				trackHeight: 20,
 				thumbSize: 14,
 				gap: theme.space[1],
 				fontSize: theme.typography.fontSizes[1].fontSize
 			};
-			case "3": return {
+			case 3: return {
 				trackWidth: 58,
 				trackHeight: 32,
 				thumbSize: 26,
@@ -7603,18 +7603,18 @@ const Slider = react.default.forwardRef(({ value: controlledValue, defaultValue,
 	};
 	const thumbAnimations = (0, react.useRef)(values.map((v) => new react_native.Animated.Value(getInitialPosition(v)))).current;
 	const sizeValues = (0, react.useMemo)(() => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				trackHeight: 4,
 				thumbSize: 16,
 				fontSize: theme.typography.fontSizes[1].fontSize
 			};
-			case "3": return {
+			case 3: return {
 				trackHeight: 8,
 				thumbSize: 28,
 				fontSize: theme.typography.fontSizes[3].fontSize
 			};
-			case "4": return {
+			case 4: return {
 				trackHeight: 10,
 				thumbSize: 34,
 				fontSize: theme.typography.fontSizes[4].fontSize
@@ -11946,7 +11946,7 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	const backgroundColor = isDark ? grayAlpha["2"] : grayAlpha["1"];
 	const defaultKeyExtractor = (item, index) => {
 		if (keyExtractor) return keyExtractor(item, index);
-		if ("id" in item) return String(item.id);
+		if (item && typeof item === "object" && "id" in item) return String(item.id);
 		return String(index);
 	};
 	const renderListItem = (info) => {
@@ -12202,11 +12202,9 @@ const PULSE_ANIMATION = {
 	duration: 1e3,
 	useNativeDriver: true
 };
-const SKELEON_COLORS = {
-	light: "#E5E7EB",
-	dark: "#D1D5DB"
-};
 const Skeleton = react.default.forwardRef(({ children, loading = true, style, textStyle, width, height, accessibilityLabel = "Loading", testID }, ref) => {
+	const theme = useTheme$1();
+	const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const pulseAnim = (0, react.useRef)(new react_native.Animated.Value(0)).current;
 	(0, react.useEffect)(() => {
 		const animation = react_native.Animated.loop(react_native.Animated.sequence([react_native.Animated.timing(pulseAnim, {
@@ -12223,7 +12221,7 @@ const Skeleton = react.default.forwardRef(({ children, loading = true, style, te
 	}, [pulseAnim]);
 	const pulseStyle = { backgroundColor: pulseAnim.interpolate({
 		inputRange: [0, 1],
-		outputRange: [SKELEON_COLORS.light, SKELEON_COLORS.dark]
+		outputRange: [grayScale[3], grayScale[5]]
 	}) };
 	if (!loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
 	if (!react.default.isValidElement(children) && typeof children === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.Text, {
@@ -12369,12 +12367,12 @@ const TableColumnHeaderCell = react.default.forwardRef(({ children, width, align
 	const theme = useTheme$1();
 	const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const getSizePadding = () => {
-		switch (context.size) {
-			case "1": return {
+		switch (Number(context.size)) {
+			case 1: return {
 				paddingVertical: theme.space[2],
 				paddingHorizontal: theme.space[3]
 			};
-			case "3": return {
+			case 3: return {
 				paddingVertical: theme.space[4],
 				paddingHorizontal: theme.space[5]
 			};
@@ -12385,9 +12383,9 @@ const TableColumnHeaderCell = react.default.forwardRef(({ children, width, align
 		}
 	};
 	const getSizeFont = () => {
-		switch (context.size) {
-			case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
-			case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
+		switch (Number(context.size)) {
+			case 1: return { fontSize: theme.typography.fontSizes[1].fontSize };
+			case 3: return { fontSize: theme.typography.fontSizes[3].fontSize };
 			default: return { fontSize: theme.typography.fontSizes[2].fontSize };
 		}
 	};
@@ -12424,12 +12422,12 @@ const TableCell = react.default.forwardRef(({ children, align = "left", style },
 	const theme = useTheme$1();
 	const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
 	const getSizePadding = () => {
-		switch (context.size) {
-			case "1": return {
+		switch (Number(context.size)) {
+			case 1: return {
 				paddingVertical: theme.space[2],
 				paddingHorizontal: theme.space[3]
 			};
-			case "3": return {
+			case 3: return {
 				paddingVertical: theme.space[4],
 				paddingHorizontal: theme.space[5]
 			};
@@ -12440,9 +12438,9 @@ const TableCell = react.default.forwardRef(({ children, align = "left", style },
 		}
 	};
 	const getSizeFont = () => {
-		switch (context.size) {
-			case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
-			case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
+		switch (Number(context.size)) {
+			case 1: return { fontSize: theme.typography.fontSizes[1].fontSize };
+			case 3: return { fontSize: theme.typography.fontSizes[3].fontSize };
 			default: return { fontSize: theme.typography.fontSizes[2].fontSize };
 		}
 	};
@@ -13110,15 +13108,15 @@ const AccordionTrigger = react.default.forwardRef(({ children, style, icon, hapt
 		}).start();
 	}, [open, rotationAnim]);
 	const getSizeStyles = () => {
-		switch (size) {
-			case "1": return {
+		switch (Number(size)) {
+			case 1: return {
 				paddingVertical: theme.space[2],
 				paddingHorizontal: theme.space[3],
 				fontSize: theme.typography.fontSizes[1].fontSize,
 				lineHeight: theme.typography.fontSizes[1].lineHeight,
 				iconSize: 14
 			};
-			case "3": return {
+			case 3: return {
 				paddingVertical: theme.space[4],
 				paddingHorizontal: theme.space[5],
 				fontSize: theme.typography.fontSizes[4].fontSize,
@@ -13224,9 +13222,9 @@ const AccordionContent = react.default.forwardRef(({ children, style }, ref) =>
 	const heightAnim = (0, react.useRef)(new react_native.Animated.Value(0)).current;
 	const opacityAnim = (0, react.useRef)(new react_native.Animated.Value(0)).current;
 	const getContentPadding = () => {
-		switch (size) {
-			case "1": return theme.space[2];
-			case "3": return theme.space[5];
+		switch (Number(size)) {
+			case 1: return theme.space[2];
+			case 3: return theme.space[5];
 			default: return theme.space[4];
 		}
 	};
@@ -13352,6 +13350,15 @@ const useResponsive = (breakpoints = defaultBreakpoints) => {
 	return getResponsiveInfo(window, breakpoints);
 };
 
+//#endregion
+//#region src/utils/size.ts
+/**
+* Normalize a SizeInput to its canonical numeric form.
+* Returns the value unchanged when already numeric, the parsed number for
+* legacy string inputs, or `undefined` when absent.
+*/
+const toNumericSize = (size) => size === void 0 ? void 0 : Number(size);
+
 //#endregion
 exports.AbsoluteCenter = AbsoluteCenter;
 exports.Accordion = Accordion;
@@ -13558,6 +13565,7 @@ exports.slateAlpha = slateAlpha;
 exports.space = space;
 exports.teal = teal;
 exports.tealAlpha = tealAlpha;
+exports.toNumericSize = toNumericSize;
 exports.tomato = tomato;
 exports.tomatoAlpha = tomatoAlpha;
 exports.typography = typography;