radix-native-ui 0.1.2 → 0.1.4

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

@@ -3960,10 +3960,6 @@ 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.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, 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;
@@ -4077,7 +4073,7 @@ const Box = react.default.memo(react.default.forwardRef(({ asChild = false, chil
 		...rest,
 		children
 	});
-}), areEqual$12);
+}));
 Box.displayName = "Box";
 
 //#endregion
@@ -4127,10 +4123,6 @@ Slot.displayName = "Slot";
 
 //#endregion
 //#region src/components/layout/Flex.tsx
-const areEqual$11 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.direction === nextProps.direction && prevProps.align === nextProps.align && prevProps.justify === nextProps.justify && prevProps.wrap === nextProps.wrap && prevProps.gap === nextProps.gap && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.opacity === nextProps.opacity) return true;
-	return false;
-};
 const Flex = react.default.memo(react.default.forwardRef(({ asChild = false, children, style, direction = "row", align = "stretch", alignContent, justify = "flex-start", wrap = "nowrap", gap, flexGrow, flexShrink, flexBasis, flex, 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, columnGap, rowGap, backgroundColor, borderRadius, opacity, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const flexStyle = (0, react.useMemo)(() => ({
@@ -4228,15 +4220,11 @@ const Flex = react.default.memo(react.default.forwardRef(({ asChild = false, chi
 		...rest,
 		children
 	});
-}), areEqual$11);
+}));
 Flex.displayName = "Flex";
 
 //#endregion
 //#region src/components/layout/Grid.tsx
-const areEqual$10 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.columns === nextProps.columns && prevProps.gap === nextProps.gap && prevProps.rowGap === nextProps.rowGap && prevProps.columnGap === nextProps.columnGap && prevProps.align === nextProps.align && prevProps.justify === nextProps.justify && prevProps.columnWidth === nextProps.columnWidth) return true;
-	return false;
-};
 const Grid = react.default.memo(react.default.forwardRef(({ children, style = {}, columns = 1, gap, rowGap, columnGap, align = "stretch", justify = "flex-start", columnWidth, ...rest }, ref) => {
 	const theme = useTheme$1();
 	useThemeMode();
@@ -4272,7 +4260,7 @@ const Grid = react.default.memo(react.default.forwardRef(({ children, style = {}
 		...rest,
 		children: childrenWithWidth
 	});
-}), areEqual$10);
+}));
 Grid.displayName = "Grid";
 
 //#endregion
@@ -4283,10 +4271,6 @@ const containerMaxWidths = {
 	3: 640,
 	4: 896
 };
-const areEqual$9 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.size === nextProps.size && prevProps.responsive === nextProps.responsive) return true;
-	return false;
-};
 const Container = react.default.memo(react.default.forwardRef(({ children, style, size = 2, responsive = true, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const maxWidth = containerMaxWidths[size];
@@ -4305,7 +4289,7 @@ const Container = react.default.memo(react.default.forwardRef(({ children, style
 		...rest,
 		children
 	});
-}), areEqual$9);
+}));
 Container.displayName = "Container";
 
 //#endregion
@@ -4322,9 +4306,6 @@ const getPaddingStyles = (side, spacing) => {
 	};
 	return paddingMap[side] ?? paddingMap.all;
 };
-const areEqual$8 = (prevProps, nextProps) => {
-	return prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.side === nextProps.side && prevProps.p === nextProps.p && prevProps.clip === nextProps.clip && prevProps.asChild === nextProps.asChild;
-};
 const Inset = react.default.memo(react.default.forwardRef(({ asChild = false, children, style, side = "all", p: pProp, trim, clip, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const paddingSize = pProp ?? trim ?? 4;
@@ -4344,7 +4325,7 @@ const Inset = react.default.memo(react.default.forwardRef(({ asChild = false, ch
 		...rest,
 		children
 	});
-}), areEqual$8);
+}));
 Inset.displayName = "Inset";
 
 //#endregion
@@ -4512,21 +4493,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;
 	}, [
@@ -4540,8 +4520,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],
@@ -4725,10 +4704,6 @@ AbsoluteCenter.displayName = "AbsoluteCenter";
 
 //#endregion
 //#region src/components/typography/Text.tsx
-const areEqual$7 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.size === nextProps.size && prevProps.weight === nextProps.weight && prevProps.align === nextProps.align && prevProps.color === nextProps.color && prevProps.truncate === nextProps.truncate && prevProps.numberOfLines === nextProps.numberOfLines && prevProps.fontFamily === nextProps.fontFamily && prevProps.fontStyle === nextProps.fontStyle && prevProps.lineHeight === nextProps.lineHeight && prevProps.letterSpacing === nextProps.letterSpacing && prevProps.textDecorationLine === nextProps.textDecorationLine && prevProps.opacity === nextProps.opacity) return true;
-	return false;
-};
 const TextComponent = react.default.memo(react.default.forwardRef(({ asChild = false, children, style, size = 3, weight, align, color, truncate, numberOfLines, fontFamily, fontStyle, lineHeight, letterSpacing, textDecorationLine, opacity, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4765,15 +4740,11 @@ const TextComponent = react.default.memo(react.default.forwardRef(({ asChild = f
 		...rest,
 		children
 	});
-}), areEqual$7);
+}));
 TextComponent.displayName = "Text";
 
 //#endregion
 //#region src/components/typography/Heading.tsx
-const areEqual$6 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.size === nextProps.size && prevProps.weight === nextProps.weight && prevProps.align === nextProps.align && prevProps.color === nextProps.color && prevProps.truncate === nextProps.truncate && prevProps.numberOfLines === nextProps.numberOfLines && prevProps.fontFamily === nextProps.fontFamily && prevProps.opacity === nextProps.opacity) return true;
-	return false;
-};
 const Heading = react.default.memo(react.default.forwardRef(({ asChild = false, children, style = {}, size = 4, weight = "bold", align, color, truncate, numberOfLines, fontFamily, opacity, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4816,15 +4787,11 @@ const Heading = react.default.memo(react.default.forwardRef(({ asChild = false,
 		...rest,
 		children
 	});
-}), areEqual$6);
+}));
 Heading.displayName = "Heading";
 
 //#endregion
 //#region src/components/typography/Strong.tsx
-const areEqual$5 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.color === nextProps.color) return true;
-	return false;
-};
 const Strong = react.default.memo(react.default.forwardRef(({ children, style = {}, color, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4844,15 +4811,11 @@ const Strong = react.default.memo(react.default.forwardRef(({ children, style =
 		...rest,
 		children
 	});
-}), areEqual$5);
+}));
 Strong.displayName = "Strong";
 
 //#endregion
 //#region src/components/typography/Em.tsx
-const areEqual$4 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.color === nextProps.color) return true;
-	return false;
-};
 const Em = react.default.memo(react.default.forwardRef(({ children, style = {}, color, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4872,15 +4835,11 @@ const Em = react.default.memo(react.default.forwardRef(({ children, style = {},
 		...rest,
 		children
 	});
-}), areEqual$4);
+}));
 Em.displayName = "Em";
 
 //#endregion
 //#region src/components/typography/Code.tsx
-const areEqual$3 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.size === nextProps.size && prevProps.color === nextProps.color && prevProps.backgroundColor === nextProps.backgroundColor) return true;
-	return false;
-};
 const Code = react.default.memo(react.default.forwardRef(({ children, style = {}, size = 2, color, backgroundColor, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
@@ -4909,15 +4868,11 @@ const Code = react.default.memo(react.default.forwardRef(({ children, style = {}
 		...rest,
 		children
 	});
-}), areEqual$3);
+}));
 Code.displayName = "Code";
 
 //#endregion
 //#region src/components/typography/Kbd.tsx
-const areEqual$2 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.color === nextProps.color && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.size === nextProps.size) return true;
-	return false;
-};
 const Kbd = react.default.memo(react.default.forwardRef(({ children, style = {}, color, backgroundColor, size = 1, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
@@ -4963,7 +4918,7 @@ const Kbd = react.default.memo(react.default.forwardRef(({ children, style = {},
 			children
 		})
 	});
-}), areEqual$2);
+}));
 Kbd.displayName = "Kbd";
 
 //#endregion
@@ -5001,10 +4956,6 @@ Link.displayName = "Link";
 
 //#endregion
 //#region src/components/typography/Blockquote.tsx
-const areEqual$1 = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.textStyle === nextProps.textStyle && prevProps.color === nextProps.color && prevProps.borderColor === nextProps.borderColor && prevProps.quoteColor === nextProps.quoteColor) return true;
-	return false;
-};
 const Blockquote = react.default.memo(react.default.forwardRef(({ children, style, textStyle = {}, color, borderColor, quoteColor, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -5058,7 +5009,7 @@ const Blockquote = react.default.memo(react.default.forwardRef(({ children, styl
 			]
 		})
 	});
-}), areEqual$1);
+}));
 Blockquote.displayName = "Blockquote";
 
 //#endregion
@@ -5092,10 +5043,6 @@ const getIconSize = (size) => {
 		default: return 20;
 	}
 };
-const areEqual = (prevProps, nextProps) => {
-	if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.variant === nextProps.variant && prevProps.color === nextProps.color && prevProps.radius === nextProps.radius && prevProps.size === nextProps.size && prevProps.disabled === nextProps.disabled && prevProps.loading === nextProps.loading && prevProps.onPress === nextProps.onPress && prevProps.onLongPress === nextProps.onLongPress && prevProps.delayLongPress === nextProps.delayLongPress && prevProps.width === nextProps.width && prevProps.highContrast === nextProps.highContrast) return true;
-	return false;
-};
 const Button = react.default.memo(react.default.forwardRef(({ children, style, variant = "solid", color, radius, size = 2, disabled, loading, onPress, accessibilityLabel, width, highContrast, hapticFeedback, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const mode = useThemeMode$1();
@@ -5276,7 +5223,7 @@ const Button = react.default.memo(react.default.forwardRef(({ children, style, v
 			rightIcons.map((icon, index) => renderIcon(icon, index))
 		] })
 	});
-}), areEqual);
+}));
 Button.displayName = "Button";
 Button.Icon = ButtonIcon;
 Button.Label = ButtonLabel;
@@ -5413,8 +5360,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],
@@ -5422,7 +5369,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],
@@ -5685,13 +5632,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
@@ -5855,8 +5802,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,
@@ -5864,7 +5811,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,
@@ -6081,15 +6028,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,
@@ -6188,15 +6135,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,
@@ -6419,14 +6366,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,
@@ -6554,15 +6501,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,
@@ -7605,18 +7552,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
@@ -11939,7 +11886,7 @@ const DataList = {
 
 //#endregion
 //#region src/components/data-display/FancyList.tsx
-const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true, scrollable = true, itemPadding, ListEmptyComponent, ListHeaderComponent, ListFooterComponent }) => {
+const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true, scrollable = true, itemPadding, ListEmptyComponent, ListHeaderComponent, ListFooterComponent, ListBackend: Backend = RnFlatList, backendProps }) => {
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
 	isDark ? theme.colors.gray.dark : theme.colors.gray;
@@ -11992,7 +11939,8 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnView, {
 		style: [styles$9.container, style],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RnFlatList, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Backend, {
+			...backendProps,
 			data,
 			renderItem: renderListItem,
 			keyExtractor: defaultKeyExtractor,
@@ -12204,11 +12152,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,18 +12169,21 @@ const Skeleton = react.default.forwardRef(({ children, loading = true, style, te
 			animation.stop();
 		};
 	}, [pulseAnim]);
-	const pulseStyle = { backgroundColor: pulseAnim.interpolate({
+	const pulseStyle = { opacity: pulseAnim.interpolate({
 		inputRange: [0, 1],
-		outputRange: [SKELEON_COLORS.light, SKELEON_COLORS.dark]
+		outputRange: [.55, 1]
 	}) };
+	const skeletonBackground = { backgroundColor: grayScale[3] };
 	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, {
 		ref,
 		style: [
-			textStyle,
+			styles$6.inlineText,
+			skeletonBackground,
 			pulseStyle,
 			width !== void 0 ? { width } : void 0,
-			height !== void 0 ? { height } : void 0
+			height !== void 0 ? { height } : void 0,
+			textStyle
 		],
 		accessibilityLabel,
 		accessibilityRole: "progressbar",
@@ -12245,6 +12194,7 @@ const Skeleton = react.default.forwardRef(({ children, loading = true, style, te
 		ref,
 		style: [
 			styles$6.blockContainer,
+			skeletonBackground,
 			pulseStyle,
 			width !== void 0 ? { width } : void 0,
 			height !== void 0 ? { height } : void 0,
@@ -12371,12 +12321,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]
 			};
@@ -12387,9 +12337,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 };
 		}
 	};
@@ -12426,12 +12376,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]
 			};
@@ -12442,9 +12392,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 };
 		}
 	};
@@ -13112,15 +13062,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,
@@ -13226,9 +13176,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];
 		}
 	};
@@ -13354,6 +13304,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;
@@ -13560,6 +13519,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;