radix-native-ui 0.1.3 → 0.1.4

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
@@ -4723,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;
@@ -4763,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;
@@ -4814,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;
@@ -4842,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;
@@ -4870,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";
@@ -4907,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";
@@ -4961,7 +4918,7 @@ const Kbd = react.default.memo(react.default.forwardRef(({ children, style = {},
 			children
 		})
 	});
-}), areEqual$2);
+}));
 Kbd.displayName = "Kbd";
 
 //#endregion
@@ -4999,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;
@@ -5056,7 +5009,7 @@ const Blockquote = react.default.memo(react.default.forwardRef(({ children, styl
 			]
 		})
 	});
-}), areEqual$1);
+}));
 Blockquote.displayName = "Blockquote";
 
 //#endregion
@@ -5090,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();
@@ -5274,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;
@@ -11937,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;
@@ -11990,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,
@@ -12219,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: [grayScale[3], grayScale[5]]
+		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",
@@ -12241,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,

package/dist/index.d.cts

@@ -5210,6 +5210,22 @@ interface FancyListProps<T = any> {
    * Footer component
    */
   ListFooterComponent?: any;
+  /**
+   * Virtualized list implementation used as the backend.
+   * Defaults to React Native's FlatList. Any FlatList-compatible
+   * component (e.g. LegendList, FlashList v2) can be supplied to
+   * gain true cell recycling at scale — the styling, dividers, and
+   * renderItem contract stay identical. Ignored when `scrollable`
+   * is false (that branch renders no virtualization layer).
+   */
+  ListBackend?: React$1.ComponentType<any>;
+  /**
+   * Extra props forwarded to the list backend (e.g. `estimatedItemSize`
+   * for LegendList/FlashList). Applied before FancyList's own wiring,
+   * so `data`, `renderItem`, `keyExtractor`, and separators cannot be
+   * clobbered by mistake.
+   */
+  backendProps?: Record<string, unknown>;
 }
 declare const FancyList: {
   <T extends unknown>({
@@ -5222,7 +5238,9 @@ declare const FancyList: {
     itemPadding,
     ListEmptyComponent,
     ListHeaderComponent,
-    ListFooterComponent
+    ListFooterComponent,
+    ListBackend: Backend,
+    backendProps
   }: FancyListProps<T>): React$1.JSX.Element;
   displayName: string;
 };

package/dist/index.d.mts

@@ -5210,6 +5210,22 @@ interface FancyListProps<T = any> {
    * Footer component
    */
   ListFooterComponent?: any;
+  /**
+   * Virtualized list implementation used as the backend.
+   * Defaults to React Native's FlatList. Any FlatList-compatible
+   * component (e.g. LegendList, FlashList v2) can be supplied to
+   * gain true cell recycling at scale — the styling, dividers, and
+   * renderItem contract stay identical. Ignored when `scrollable`
+   * is false (that branch renders no virtualization layer).
+   */
+  ListBackend?: React$1.ComponentType<any>;
+  /**
+   * Extra props forwarded to the list backend (e.g. `estimatedItemSize`
+   * for LegendList/FlashList). Applied before FancyList's own wiring,
+   * so `data`, `renderItem`, `keyExtractor`, and separators cannot be
+   * clobbered by mistake.
+   */
+  backendProps?: Record<string, unknown>;
 }
 declare const FancyList: {
   <T extends unknown>({
@@ -5222,7 +5238,9 @@ declare const FancyList: {
     itemPadding,
     ListEmptyComponent,
     ListHeaderComponent,
-    ListFooterComponent
+    ListFooterComponent,
+    ListBackend: Backend,
+    backendProps
   }: FancyListProps<T>): React$1.JSX.Element;
   displayName: string;
 };

package/dist/index.mjs

@@ -3931,10 +3931,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.memo(React.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;
@@ -4048,7 +4044,7 @@ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, bac
 		...rest,
 		children
 	});
-}), areEqual$12);
+}));
 Box.displayName = "Box";
 
 //#endregion
@@ -4098,10 +4094,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.memo(React.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 = useMemo(() => ({
@@ -4199,15 +4191,11 @@ const Flex = React.memo(React.forwardRef(({ asChild = false, children, style, di
 		...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.memo(React.forwardRef(({ children, style = {}, columns = 1, gap, rowGap, columnGap, align = "stretch", justify = "flex-start", columnWidth, ...rest }, ref) => {
 	const theme = useTheme$1();
 	useThemeMode();
@@ -4243,7 +4231,7 @@ const Grid = React.memo(React.forwardRef(({ children, style = {}, columns = 1, g
 		...rest,
 		children: childrenWithWidth
 	});
-}), areEqual$10);
+}));
 Grid.displayName = "Grid";
 
 //#endregion
@@ -4254,10 +4242,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.memo(React.forwardRef(({ children, style, size = 2, responsive = true, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const maxWidth = containerMaxWidths[size];
@@ -4276,7 +4260,7 @@ const Container = React.memo(React.forwardRef(({ children, style, size = 2, resp
 		...rest,
 		children
 	});
-}), areEqual$9);
+}));
 Container.displayName = "Container";
 
 //#endregion
@@ -4293,9 +4277,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.memo(React.forwardRef(({ asChild = false, children, style, side = "all", p: pProp, trim, clip, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const paddingSize = pProp ?? trim ?? 4;
@@ -4315,7 +4296,7 @@ const Inset = React.memo(React.forwardRef(({ asChild = false, children, style, s
 		...rest,
 		children
 	});
-}), areEqual$8);
+}));
 Inset.displayName = "Inset";
 
 //#endregion
@@ -4694,10 +4675,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.memo(React.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;
@@ -4734,15 +4711,11 @@ const TextComponent = React.memo(React.forwardRef(({ asChild = false, children,
 		...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.memo(React.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;
@@ -4785,15 +4758,11 @@ const Heading = React.memo(React.forwardRef(({ asChild = false, children, style
 		...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.memo(React.forwardRef(({ children, style = {}, color, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4813,15 +4782,11 @@ const Strong = React.memo(React.forwardRef(({ children, style = {}, color, ...re
 		...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.memo(React.forwardRef(({ children, style = {}, color, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const colors = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
@@ -4841,15 +4806,11 @@ const Em = React.memo(React.forwardRef(({ children, style = {}, color, ...rest }
 		...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.memo(React.forwardRef(({ children, style = {}, size = 2, color, backgroundColor, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
@@ -4878,15 +4839,11 @@ const Code = React.memo(React.forwardRef(({ children, style = {}, size = 2, colo
 		...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.memo(React.forwardRef(({ children, style = {}, color, backgroundColor, size = 1, ...rest }, ref) => {
 	const theme = useTheme$1();
 	const isDark = useThemeMode$1() === "dark";
@@ -4932,7 +4889,7 @@ const Kbd = React.memo(React.forwardRef(({ children, style = {}, color, backgrou
 			children
 		})
 	});
-}), areEqual$2);
+}));
 Kbd.displayName = "Kbd";
 
 //#endregion
@@ -4970,10 +4927,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.memo(React.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;
@@ -5027,7 +4980,7 @@ const Blockquote = React.memo(React.forwardRef(({ children, style, textStyle = {
 			]
 		})
 	});
-}), areEqual$1);
+}));
 Blockquote.displayName = "Blockquote";
 
 //#endregion
@@ -5061,10 +5014,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.memo(React.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();
@@ -5245,7 +5194,7 @@ const Button = React.memo(React.forwardRef(({ children, style, variant = "solid"
 			rightIcons.map((icon, index) => renderIcon(icon, index))
 		] })
 	});
-}), areEqual);
+}));
 Button.displayName = "Button";
 Button.Icon = ButtonIcon;
 Button.Label = ButtonLabel;
@@ -11908,7 +11857,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;
@@ -11961,7 +11910,8 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
 	});
 	return /* @__PURE__ */ jsx(RnView, {
 		style: [styles$9.container, style],
-		children: /* @__PURE__ */ jsx(RnFlatList, {
+		children: /* @__PURE__ */ jsx(Backend, {
+			...backendProps,
 			data,
 			renderItem: renderListItem,
 			keyExtractor: defaultKeyExtractor,
@@ -12190,18 +12140,21 @@ const Skeleton = React.forwardRef(({ children, loading = true, style, textStyle,
 			animation.stop();
 		};
 	}, [pulseAnim]);
-	const pulseStyle = { backgroundColor: pulseAnim.interpolate({
+	const pulseStyle = { opacity: pulseAnim.interpolate({
 		inputRange: [0, 1],
-		outputRange: [grayScale[3], grayScale[5]]
+		outputRange: [.55, 1]
 	}) };
+	const skeletonBackground = { backgroundColor: grayScale[3] };
 	if (!loading) return /* @__PURE__ */ jsx(Fragment, { children });
 	if (!React.isValidElement(children) && typeof children === "string") return /* @__PURE__ */ jsx(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",
@@ -12212,6 +12165,7 @@ const Skeleton = React.forwardRef(({ children, loading = true, style, textStyle,
 		ref,
 		style: [
 			styles$6.blockContainer,
+			skeletonBackground,
 			pulseStyle,
 			width !== void 0 ? { width } : void 0,
 			height !== void 0 ? { height } : void 0,

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "radix-native-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A React Native component library inspired by the Radix Themes design system",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
+  "sideEffects": false,
   "types": "dist/index.d.mts",
   "type": "module",
   "exports": {