@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/view/index.js

@@ -1,1361 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useBorderRadiusStyles,
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/view/container/container.tsx
-import React from "react";
-import { View, Pressable } from "react-native";
-
-// src/components/view/container/container.utils.ts
-var resolveEdgeInsets = (value, prefix) => {
-  if (typeof value === "number") {
-    return prefix === "padding" ? { padding: value } : { margin: value };
-  }
-  const style = {};
-  if (prefix === "padding") {
-    if (value.horizontal !== void 0) style.paddingHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.paddingVertical = value.vertical;
-    if (value.top !== void 0) style.paddingTop = value.top;
-    if (value.bottom !== void 0) style.paddingBottom = value.bottom;
-    if (value.left !== void 0) style.paddingLeft = value.left;
-    if (value.right !== void 0) style.paddingRight = value.right;
-  } else {
-    if (value.horizontal !== void 0) style.marginHorizontal = value.horizontal;
-    if (value.vertical !== void 0) style.marginVertical = value.vertical;
-    if (value.top !== void 0) style.marginTop = value.top;
-    if (value.bottom !== void 0) style.marginBottom = value.bottom;
-    if (value.left !== void 0) style.marginLeft = value.left;
-    if (value.right !== void 0) style.marginRight = value.right;
-  }
-  return style;
-};
-var ALIGNMENT_MAP = {
-  topLeft: { justifyContent: "flex-start", alignItems: "flex-start" },
-  topCenter: { justifyContent: "flex-start", alignItems: "center" },
-  topRight: { justifyContent: "flex-start", alignItems: "flex-end" },
-  centerLeft: { justifyContent: "center", alignItems: "flex-start" },
-  center: { justifyContent: "center", alignItems: "center" },
-  centerRight: { justifyContent: "center", alignItems: "flex-end" },
-  bottomLeft: { justifyContent: "flex-end", alignItems: "flex-start" },
-  bottomCenter: { justifyContent: "flex-end", alignItems: "center" },
-  bottomRight: { justifyContent: "flex-end", alignItems: "flex-end" }
-};
-var toFlexPosition = (v) => {
-  if (v <= 0) return "flex-start";
-  if (v >= 1) return "flex-end";
-  return "center";
-};
-var resolveAlignment = (value) => {
-  if (typeof value === "object") {
-    return {
-      justifyContent: toFlexPosition(value.y),
-      alignItems: toFlexPosition(value.x)
-    };
-  }
-  return ALIGNMENT_MAP[value] ?? {
-    justifyContent: "flex-start",
-    alignItems: "flex-start"
-  };
-};
-var resolveBorderRadius = (value) => {
-  if (typeof value === "number") {
-    return { borderRadius: value };
-  }
-  const style = {};
-  if (value.topLeft !== void 0) style.borderTopLeftRadius = value.topLeft;
-  if (value.topRight !== void 0) style.borderTopRightRadius = value.topRight;
-  if (value.bottomLeft !== void 0) style.borderBottomLeftRadius = value.bottomLeft;
-  if (value.bottomRight !== void 0)
-    style.borderBottomRightRadius = value.bottomRight;
-  return style;
-};
-var resolveBorderSide = (side, position) => {
-  const style = {};
-  if (position === "") {
-    if (side.width !== void 0) style.borderWidth = side.width;
-    if (side.color !== void 0) style.borderColor = side.color;
-    if (side.style !== void 0) style.borderStyle = side.style;
-    return style;
-  }
-  if (position === "Top") {
-    if (side.width !== void 0) style.borderTopWidth = side.width;
-    if (side.color !== void 0) style.borderTopColor = side.color;
-  } else if (position === "Bottom") {
-    if (side.width !== void 0) style.borderBottomWidth = side.width;
-    if (side.color !== void 0) style.borderBottomColor = side.color;
-  } else if (position === "Left") {
-    if (side.width !== void 0) style.borderLeftWidth = side.width;
-    if (side.color !== void 0) style.borderLeftColor = side.color;
-  } else {
-    if (side.width !== void 0) style.borderRightWidth = side.width;
-    if (side.color !== void 0) style.borderRightColor = side.color;
-  }
-  return style;
-};
-var resolveBorder = (value) => {
-  const dir = value;
-  if (dir.top !== void 0 || dir.bottom !== void 0 || dir.left !== void 0 || dir.right !== void 0) {
-    return {
-      ...dir.top ? resolveBorderSide(dir.top, "Top") : {},
-      ...dir.bottom ? resolveBorderSide(dir.bottom, "Bottom") : {},
-      ...dir.left ? resolveBorderSide(dir.left, "Left") : {},
-      ...dir.right ? resolveBorderSide(dir.right, "Right") : {}
-    };
-  }
-  return resolveBorderSide(value, "");
-};
-var resolveShadow = (value) => ({
-  shadowColor: value.color ?? "#000000",
-  shadowOffset: {
-    width: value.offset?.x ?? 0,
-    height: value.offset?.y ?? 4
-  },
-  shadowOpacity: value.opacity ?? 0.1,
-  shadowRadius: value.blur ?? 4,
-  elevation: value.elevation ?? 2
-});
-var resolveTransform = (value) => {
-  const transforms = [];
-  if (value.rotate !== void 0) transforms.push({ rotate: value.rotate });
-  if (value.rotateX !== void 0) transforms.push({ rotateX: value.rotateX });
-  if (value.rotateY !== void 0) transforms.push({ rotateY: value.rotateY });
-  if (value.scale !== void 0) transforms.push({ scale: value.scale });
-  if (value.scaleX !== void 0) transforms.push({ scaleX: value.scaleX });
-  if (value.scaleY !== void 0) transforms.push({ scaleY: value.scaleY });
-  if (value.translateX !== void 0)
-    transforms.push({ translateX: value.translateX });
-  if (value.translateY !== void 0)
-    transforms.push({ translateY: value.translateY });
-  if (value.skewX !== void 0) transforms.push({ skewX: value.skewX });
-  if (value.skewY !== void 0) transforms.push({ skewY: value.skewY });
-  return transforms;
-};
-
-// src/components/view/container/container.tsx
-var buildStyle = (props) => ({
-  ...props.width !== void 0 && { width: props.width },
-  ...props.height !== void 0 && { height: props.height },
-  ...props.minWidth !== void 0 && { minWidth: props.minWidth },
-  ...props.maxWidth !== void 0 && { maxWidth: props.maxWidth },
-  ...props.minHeight !== void 0 && { minHeight: props.minHeight },
-  ...props.maxHeight !== void 0 && { maxHeight: props.maxHeight },
-  ...props.aspectRatio !== void 0 && { aspectRatio: props.aspectRatio },
-  ...props.flex !== void 0 && { flex: props.flex },
-  ...props.color !== void 0 && { backgroundColor: props.color },
-  ...props.clip && { overflow: "hidden" },
-  ...props.opacity !== void 0 && { opacity: props.opacity },
-  ...props.padding !== void 0 && resolveEdgeInsets(props.padding, "padding"),
-  ...props.margin !== void 0 && resolveEdgeInsets(props.margin, "margin"),
-  ...props.alignment !== void 0 && resolveAlignment(props.alignment),
-  ...props.borderRadius !== void 0 && resolveBorderRadius(props.borderRadius),
-  ...props.border !== void 0 && resolveBorder(props.border),
-  ...props.shadow !== void 0 && resolveShadow(props.shadow),
-  ...props.transform !== void 0 && {
-    transform: resolveTransform(props.transform)
-  }
-});
-var Container = (props) => {
-  const {
-    children,
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    disabled = false,
-    accessibilityLabel,
-    accessibilityRole,
-    accessibilityState,
-    accessible,
-    testID,
-    style
-  } = props;
-  const containerStyle = buildStyle(props);
-  const isInteractive = !!(onPress ?? onLongPress ?? onPressIn ?? onPressOut);
-  if (isInteractive) {
-    return /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        onPress: disabled ? void 0 : onPress,
-        onLongPress: disabled ? void 0 : onLongPress,
-        onPressIn: disabled ? void 0 : onPressIn,
-        onPressOut: disabled ? void 0 : onPressOut,
-        disabled,
-        accessibilityLabel,
-        accessibilityRole,
-        accessibilityState,
-        accessible,
-        testID,
-        style: [containerStyle, style]
-      },
-      children
-    );
-  }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      accessibilityLabel,
-      accessibilityRole,
-      accessibilityState,
-      accessible,
-      testID,
-      style: [containerStyle, style]
-    },
-    children
-  );
-};
-Container.displayName = "Container";
-
-// src/components/view/flex/flex.tsx
-import React2 from "react";
-import { View as View2 } from "react-native";
-
-// src/components/view/layout-utils.ts
-var MAIN_AXIS_JUSTIFY_MAP = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  spaceBetween: "space-between",
-  spaceAround: "space-around",
-  spaceEvenly: "space-evenly"
-};
-var CROSS_AXIS_ALIGN_MAP = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch"
-};
-var resolveMainAxisAlignment = (alignment) => MAIN_AXIS_JUSTIFY_MAP[alignment ?? "start"];
-var resolveCrossAxisAlignment = (alignment) => CROSS_AXIS_ALIGN_MAP[alignment ?? "center"];
-var resolveMainAxisSize = (size = "max", direction) => {
-  if (size === "min") return {};
-  return direction === "vertical" ? { flex: 1 } : { width: "100%" };
-};
-
-// src/components/view/flex/flex.tsx
-var Flex = ({
-  children,
-  direction,
-  mainAxisAlignment,
-  crossAxisAlignment,
-  mainAxisSize,
-  wrap = false,
-  gap,
-  reversed = false,
-  flex,
-  style,
-  testID
-}) => {
-  const flexDir = direction === "horizontal" ? reversed ? "row-reverse" : "row" : reversed ? "column-reverse" : "column";
-  return /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      testID,
-      style: [
-        resolveMainAxisSize(mainAxisSize, direction),
-        {
-          flexDirection: flexDir,
-          justifyContent: resolveMainAxisAlignment(mainAxisAlignment),
-          alignItems: resolveCrossAxisAlignment(crossAxisAlignment),
-          flexWrap: wrap ? "wrap" : "nowrap",
-          ...gap !== void 0 && { gap },
-          ...flex !== void 0 && { flex }
-        },
-        style
-      ]
-    },
-    children
-  );
-};
-Flex.displayName = "Flex";
-
-// src/components/view/column/column.tsx
-import React3 from "react";
-var Column = (props) => /* @__PURE__ */ React3.createElement(Flex, { ...props, direction: "vertical" });
-Column.displayName = "Column";
-
-// src/components/view/row/row.tsx
-import React4 from "react";
-var Row = (props) => /* @__PURE__ */ React4.createElement(Flex, { ...props, direction: "horizontal" });
-Row.displayName = "Row";
-
-// src/components/view/expanded/expanded.tsx
-import React5 from "react";
-import { View as View3 } from "react-native";
-var Expanded = ({
-  children,
-  flex = 1,
-  style,
-  testID
-}) => /* @__PURE__ */ React5.createElement(View3, { testID, style: [{ flex }, style] }, children);
-Expanded.displayName = "Expanded";
-
-// src/components/view/flexible/flexible.tsx
-import React6 from "react";
-import { View as View4 } from "react-native";
-var Flexible = ({
-  children,
-  flex = 1,
-  fit = "loose",
-  style,
-  testID
-}) => /* @__PURE__ */ React6.createElement(
-  View4,
-  {
-    testID,
-    style: [
-      fit === "tight" ? { flex } : { flexGrow: flex, flexShrink: 1, flexBasis: "auto" },
-      style
-    ]
-  },
-  children
-);
-Flexible.displayName = "Flexible";
-
-// src/components/view/spacer/spacer.tsx
-import React7 from "react";
-import { View as View5 } from "react-native";
-var Spacer = ({ flex = 1, style }) => {
-  return /* @__PURE__ */ React7.createElement(
-    View5,
-    {
-      style: [
-        {
-          flexGrow: flex,
-          flexShrink: 1,
-          flexBasis: 0
-        },
-        style
-      ]
-    }
-  );
-};
-Spacer.displayName = "Spacer";
-
-// src/components/view/wrap/wrap.tsx
-import React8 from "react";
-import { View as View6 } from "react-native";
-var Wrap = ({
-  children,
-  direction = "horizontal",
-  alignment,
-  runAlignment,
-  spacing = 0,
-  runSpacing = 0,
-  style,
-  testID
-}) => /* @__PURE__ */ React8.createElement(
-  View6,
-  {
-    testID,
-    style: [
-      {
-        flexDirection: direction === "horizontal" ? "row" : "column",
-        flexWrap: "wrap",
-        justifyContent: resolveMainAxisAlignment(alignment),
-        alignContent: resolveMainAxisAlignment(runAlignment),
-        gap: spacing,
-        rowGap: direction === "horizontal" ? runSpacing : spacing,
-        columnGap: direction === "horizontal" ? spacing : runSpacing
-      },
-      style
-    ]
-  },
-  children
-);
-Wrap.displayName = "Wrap";
-
-// src/components/view/padding/padding.tsx
-import React9 from "react";
-import { View as View7 } from "react-native";
-var Padding = ({ children, padding, style }) => /* @__PURE__ */ React9.createElement(View7, { style: [resolveEdgeInsets(padding, "padding"), style] }, children);
-Padding.displayName = "Padding";
-
-// src/components/view/margin/margin.tsx
-import React10 from "react";
-import { View as View8 } from "react-native";
-var Margin = ({ children, margin, style }) => /* @__PURE__ */ React10.createElement(View8, { style: [resolveEdgeInsets(margin, "margin"), style] }, children);
-Margin.displayName = "Margin";
-
-// src/components/view/sized-box/sized-box.tsx
-import React11 from "react";
-import { View as View9 } from "react-native";
-var SizedBox = ({
-  children,
-  width,
-  height,
-  expand,
-  shrink,
-  style,
-  testID
-}) => {
-  if (shrink) {
-    return /* @__PURE__ */ React11.createElement(
-      View9,
-      {
-        testID,
-        style: [{ width: 0, height: 0, overflow: "hidden" }, style]
-      },
-      children
-    );
-  }
-  if (expand) {
-    return /* @__PURE__ */ React11.createElement(View9, { testID, style: [{ flex: 1, alignSelf: "stretch" }, style] }, children);
-  }
-  return /* @__PURE__ */ React11.createElement(View9, { testID, style: [{ width, height }, style] }, children);
-};
-SizedBox.displayName = "SizedBox";
-
-// src/components/view/constrained-box/constrained-box.tsx
-import React12 from "react";
-import { View as View10 } from "react-native";
-var ConstrainedBox = ({
-  children,
-  constraints,
-  style,
-  testID
-}) => /* @__PURE__ */ React12.createElement(
-  View10,
-  {
-    testID,
-    style: [
-      {
-        minWidth: constraints.minWidth,
-        maxWidth: constraints.maxWidth,
-        minHeight: constraints.minHeight,
-        maxHeight: constraints.maxHeight
-      },
-      style
-    ]
-  },
-  children
-);
-ConstrainedBox.displayName = "ConstrainedBox";
-
-// src/components/view/fractionally-sized-box/fractionally-sized-box.tsx
-import React13 from "react";
-import { View as View11 } from "react-native";
-var FractionallySizedBox = ({
-  children,
-  widthFactor,
-  heightFactor,
-  alignment,
-  style,
-  testID
-}) => {
-  const sizedStyle = {};
-  if (widthFactor !== void 0) sizedStyle.width = `${widthFactor * 100}%`;
-  if (heightFactor !== void 0) sizedStyle.height = `${heightFactor * 100}%`;
-  const alignStyle = alignment ? resolveAlignment(alignment) : {};
-  return /* @__PURE__ */ React13.createElement(View11, { testID, style: [sizedStyle, alignStyle, style] }, children);
-};
-FractionallySizedBox.displayName = "FractionallySizedBox";
-
-// src/components/view/positioned-view/positioned-view.tsx
-import React14 from "react";
-import { View as View12 } from "react-native";
-var PositionedView = ({
-  children,
-  top,
-  right,
-  bottom,
-  left,
-  zIndex,
-  style
-}) => {
-  return /* @__PURE__ */ React14.createElement(
-    View12,
-    {
-      style: [
-        {
-          position: "absolute",
-          top,
-          right,
-          bottom,
-          left,
-          zIndex
-        },
-        style
-      ]
-    },
-    children
-  );
-};
-PositionedView.displayName = "PositionedView";
-
-// src/components/view/blur-view/blur-view.tsx
-import React15, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View as View13 } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    position: "relative"
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject
-  }
-});
-var BlurView = ({
-  children,
-  unlockable = false,
-  intensity = 0.6,
-  overlayColor = "rgba(0, 0, 0, 0.12)",
-  style
-}) => {
-  const overlayOpacity = Math.min(1, Math.max(0, intensity));
-  const overlayAnim = useRef(
-    new Animated.Value(unlockable ? 0 : overlayOpacity)
-  ).current;
-  const scaleAnim = useRef(new Animated.Value(unlockable ? 1 : 0.98)).current;
-  useEffect(() => {
-    if (unlockable) {
-      Animated.parallel([
-        Animated.timing(overlayAnim, {
-          toValue: 0,
-          duration: 220,
-          useNativeDriver: true
-        }),
-        Animated.timing(scaleAnim, {
-          toValue: 1,
-          duration: 220,
-          useNativeDriver: true
-        })
-      ]).start();
-      return;
-    }
-    overlayAnim.setValue(overlayOpacity);
-    scaleAnim.setValue(0.98);
-  }, [overlayAnim, overlayOpacity, scaleAnim, unlockable]);
-  return /* @__PURE__ */ React15.createElement(View13, { style: [styles.container, style] }, /* @__PURE__ */ React15.createElement(Animated.View, { style: { transform: [{ scale: scaleAnim }] } }, children), /* @__PURE__ */ React15.createElement(
-    Animated.View,
-    {
-      pointerEvents: unlockable ? "none" : "auto",
-      style: [styles.overlay, { opacity: overlayAnim }]
-    },
-    /* @__PURE__ */ React15.createElement(View13, { style: [styles.overlay, { backgroundColor: overlayColor }] })
-  ));
-};
-BlurView.displayName = "BlurView";
-
-// src/components/view/rounded-view/rounded-view.tsx
-import React16 from "react";
-import { View as View14 } from "react-native";
-
-// src/components/view/rounded-view/rounded-view.hook.ts
-import { useMemo } from "react";
-var useRoundedViewStyle = (props) => {
-  const {
-    all = 0,
-    top,
-    bottom,
-    left,
-    right,
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = props;
-  return useMemo(() => {
-    return {
-      borderTopLeftRadius: topLeft ?? top ?? left ?? all,
-      borderTopRightRadius: topRight ?? top ?? right ?? all,
-      borderBottomLeftRadius: bottomLeft ?? bottom ?? left ?? all,
-      borderBottomRightRadius: bottomRight ?? bottom ?? right ?? all
-    };
-  }, [all, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight]);
-};
-
-// src/components/view/rounded-view/rounded-view.tsx
-var RoundedView = ({
-  children,
-  all,
-  top,
-  bottom,
-  left,
-  right,
-  topLeft,
-  topRight,
-  bottomLeft,
-  bottomRight,
-  fullWidth = false,
-  backgroundColor,
-  style,
-  noGrowth = false
-}) => {
-  const borderRadiusStyle = useRoundedViewStyle({
-    all,
-    top,
-    bottom,
-    left,
-    right,
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  });
-  return /* @__PURE__ */ React16.createElement(
-    View14,
-    {
-      style: [
-        borderRadiusStyle,
-        fullWidth && { width: "100%" },
-        noGrowth ? void 0 : { flex: 1 },
-        backgroundColor && { backgroundColor },
-        style
-      ]
-    },
-    children
-  );
-};
-
-// src/components/view/aspect-ratio/aspect-ratio.tsx
-import React17 from "react";
-import { View as View15 } from "react-native";
-var AspectRatio = ({
-  children,
-  ratio,
-  alignment,
-  clip,
-  style,
-  testID
-}) => {
-  const alignStyle = alignment ? resolveAlignment(alignment) : {};
-  return /* @__PURE__ */ React17.createElement(
-    View15,
-    {
-      testID,
-      style: [
-        {
-          aspectRatio: ratio,
-          overflow: clip ? "hidden" : "visible"
-        },
-        alignStyle,
-        style
-      ]
-    },
-    children
-  );
-};
-AspectRatio.displayName = "AspectRatio";
-
-// src/components/view/surface/surface.tsx
-import React18 from "react";
-import { View as View16 } from "react-native";
-import { getSafeThemeColor } from "@xaui/core";
-var resolveBackgroundColor = (color, theme) => {
-  if (color === "background" || color === "foreground") {
-    return theme.colors[color];
-  }
-  const safeColor = getSafeThemeColor(color);
-  return theme.colors[safeColor].container;
-};
-var Surface = ({
-  children,
-  themeColor = "background",
-  padding,
-  radius = "none",
-  fullWidth = false,
-  style
-}) => {
-  const theme = useXUITheme();
-  const radiusStyle = useBorderRadiusStyles(radius);
-  const background = resolveBackgroundColor(themeColor, theme);
-  return /* @__PURE__ */ React18.createElement(
-    View16,
-    {
-      style: [
-        radiusStyle,
-        fullWidth && { flexShrink: 1, flexBasis: "auto", width: "100%" },
-        {
-          backgroundColor: background,
-          padding
-        },
-        style
-      ]
-    },
-    children
-  );
-};
-Surface.displayName = "Surface";
-
-// src/components/view/screen/screen.tsx
-import React19 from "react";
-import { View as View17 } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-var Screen = ({
-  children,
-  padding,
-  backgroundColor,
-  safeArea = false,
-  style
-}) => {
-  const theme = useXUITheme();
-  const resolvedBackgroundColor = backgroundColor ?? theme.colors.background;
-  const containerStyle = [
-    { flex: 1, backgroundColor: resolvedBackgroundColor, padding },
-    style
-  ];
-  if (safeArea) {
-    return /* @__PURE__ */ React19.createElement(SafeAreaView, { style: containerStyle }, children);
-  }
-  return /* @__PURE__ */ React19.createElement(View17, { style: containerStyle }, children);
-};
-Screen.displayName = "Screen";
-
-// src/components/view/align/align.tsx
-import React20 from "react";
-import { View as View18 } from "react-native";
-var Align = ({ children, alignment, style }) => /* @__PURE__ */ React20.createElement(View18, { style: [{ flex: 1 }, resolveAlignment(alignment), style] }, children);
-Align.displayName = "Align";
-
-// src/components/view/center/center.tsx
-import React21 from "react";
-var Center = ({ children, style }) => /* @__PURE__ */ React21.createElement(Align, { alignment: "center", style }, children);
-Center.displayName = "Center";
-
-// src/components/view/grid/grid.tsx
-import React23, { useMemo as useMemo2, useState } from "react";
-import {
-  View as View20
-} from "react-native";
-
-// src/components/view/grid/grid-item.tsx
-import React22 from "react";
-import { View as View19 } from "react-native";
-var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React22.createElement(View19, { style }, children);
-};
-GridItem.displayName = "GridItem";
-
-// src/components/view/grid/grid.tsx
-var getSafeColumns = (columns) => {
-  if (!columns || columns <= 0) return 1;
-  return Math.floor(columns);
-};
-var getSafeSpan = (span, columns) => {
-  if (!span || span <= 0) return 1;
-  return Math.min(Math.floor(span), columns);
-};
-var isGridItemElement = (child) => {
-  if (!React23.isValidElement(child)) return false;
-  if (child.type === GridItem) return true;
-  const displayName = child.type.displayName;
-  return displayName === "GridItem";
-};
-var Grid = ({
-  children,
-  columns = 2,
-  spacing,
-  rowSpacing,
-  columnSpacing,
-  style,
-  itemStyle
-}) => {
-  const [containerWidth, setContainerWidth] = useState();
-  const safeColumns = getSafeColumns(columns);
-  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
-  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
-  const itemWidth = `${100 / safeColumns}%`;
-  const items = React23.Children.toArray(children);
-  const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
-  const baseItemWidth = useMemo2(() => {
-    if (!containerWidth) return void 0;
-    return (containerWidth - totalColumnGap) / safeColumns;
-  }, [containerWidth, safeColumns, totalColumnGap]);
-  let currentColumn = 0;
-  return /* @__PURE__ */ React23.createElement(
-    View20,
-    {
-      style: [
-        {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          rowGap: resolvedRowSpacing
-        },
-        style
-      ],
-      onLayout: (event) => {
-        const nextWidth = event.nativeEvent.layout.width;
-        if (!nextWidth || nextWidth === containerWidth) return;
-        setContainerWidth(nextWidth);
-      }
-    },
-    items.map((child, index) => {
-      const key = React23.isValidElement(child) && child.key ? child.key : `grid-${index}`;
-      const span = isGridItemElement(child) ? getSafeSpan(child.props.span, safeColumns) : 1;
-      const spanWidth = baseItemWidth === void 0 ? `${100 / safeColumns * span}%` : baseItemWidth * span + resolvedColumnSpacing * (span - 1);
-      if (currentColumn + span > safeColumns) {
-        currentColumn = 0;
-      }
-      const isEndOfRow = currentColumn + span >= safeColumns;
-      const marginRight = isEndOfRow ? 0 : resolvedColumnSpacing;
-      if (isGridItemElement(child)) {
-        const mergedStyle = [
-          {
-            flexBasis: spanWidth,
-            maxWidth: spanWidth,
-            flexGrow: 0,
-            flexShrink: 0,
-            marginRight
-          },
-          itemStyle,
-          child.props.style
-        ];
-        const element2 = React23.cloneElement(child, {
-          key,
-          style: mergedStyle
-        });
-        currentColumn = isEndOfRow ? 0 : currentColumn + span;
-        return element2;
-      }
-      const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React23.createElement(
-        View20,
-        {
-          key,
-          style: [
-            {
-              flexBasis: defaultItemWidth,
-              maxWidth: defaultItemWidth,
-              flexGrow: 0,
-              flexShrink: 0,
-              marginRight
-            },
-            itemStyle
-          ]
-        },
-        child
-      );
-      currentColumn = isEndOfRow ? 0 : currentColumn + span;
-      return element;
-    })
-  );
-};
-
-// src/components/view/grid/grid-builder.tsx
-import React24, { useMemo as useMemo3 } from "react";
-import {
-  FlatList,
-  StyleSheet as StyleSheet2,
-  View as View21
-} from "react-native";
-var getSafeColumns2 = (columns) => {
-  if (!columns || columns <= 0) return 1;
-  return Math.floor(columns);
-};
-var resolveGridData = (data, itemCount) => {
-  if (data) return data;
-  if (!itemCount || itemCount <= 0) return [];
-  return Array.from({ length: itemCount }, (_, index) => index);
-};
-var GridBuilder = ({
-  data,
-  itemCount,
-  renderItem,
-  itemBuilder,
-  keyExtractor,
-  columns = 2,
-  spacing,
-  rowSpacing,
-  columnSpacing,
-  style,
-  itemStyle,
-  scrollEnabled,
-  onEndReached,
-  onEndReachedThreshold = 0.1,
-  contentContainerStyle,
-  header,
-  footer
-}) => {
-  const safeColumns = getSafeColumns2(columns);
-  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
-  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
-  const resolvedData = useMemo3(
-    () => resolveGridData(data, itemCount),
-    [data, itemCount]
-  );
-  const paddedData = useMemo3(() => {
-    const remainder = resolvedData.length % safeColumns;
-    const placeholders = remainder === 0 ? 0 : safeColumns - remainder;
-    if (placeholders === 0)
-      return resolvedData.map((item, index) => ({
-        type: "data",
-        item,
-        index
-      }));
-    return [
-      ...resolvedData.map((item, index) => ({
-        type: "data",
-        item,
-        index
-      })),
-      ...Array.from({ length: placeholders }, (_, index) => ({
-        type: "placeholder",
-        key: `placeholder-${resolvedData.length + index}`
-      }))
-    ];
-  }, [resolvedData, safeColumns]);
-  const resolvedKeyExtractor = useMemo3(() => {
-    if (keyExtractor)
-      return (item, index) => item.type === "data" ? keyExtractor(item.item, item.index) : item.key ?? `placeholder-${index}`;
-    return (item, index) => item.type === "data" ? `grid-${item.index}` : item.key ?? `placeholder-${index}`;
-  }, [keyExtractor]);
-  const resolvedRenderer = useMemo3(() => {
-    if (renderItem) return renderItem;
-    if (itemBuilder)
-      return ({ item, index }) => itemBuilder({ item, index });
-    return void 0;
-  }, [renderItem, itemBuilder]);
-  if (!resolvedRenderer) return null;
-  const renderGridItem = ({
-    item,
-    index
-  }) => {
-    if (item.type === "placeholder") {
-      const isLastColumn2 = (index + 1) % safeColumns === 0;
-      const totalItems2 = paddedData.length;
-      const lastRowStart2 = totalItems2 === 0 ? 0 : totalItems2 - (totalItems2 % safeColumns || safeColumns);
-      const isLastRow2 = index >= lastRowStart2;
-      const placeholderStyle = [
-        {
-          flex: 1,
-          marginRight: isLastColumn2 ? 0 : resolvedColumnSpacing,
-          marginBottom: isLastRow2 ? 0 : resolvedRowSpacing
-        },
-        itemStyle
-      ];
-      return /* @__PURE__ */ React24.createElement(View21, { style: placeholderStyle, pointerEvents: "none" });
-    }
-    const element = resolvedRenderer({ item: item.item, index: item.index });
-    if (element === null) return null;
-    const isLastColumn = (index + 1) % safeColumns === 0;
-    const totalItems = paddedData.length;
-    const lastRowStart = totalItems === 0 ? 0 : totalItems - (totalItems % safeColumns || safeColumns);
-    const isLastRow = index >= lastRowStart;
-    const wrapperStyle = [
-      {
-        flex: 1,
-        marginRight: isLastColumn ? 0 : resolvedColumnSpacing,
-        marginBottom: isLastRow ? 0 : resolvedRowSpacing
-      },
-      itemStyle
-    ];
-    return /* @__PURE__ */ React24.createElement(View21, { style: wrapperStyle }, element);
-  };
-  const flattenedStyle = StyleSheet2.flatten(style) ?? {};
-  const {
-    alignItems,
-    justifyContent,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    ...restStyle
-  } = flattenedStyle;
-  const layoutStyle = {
-    ...alignItems !== void 0 ? { alignItems } : {},
-    ...justifyContent !== void 0 ? { justifyContent } : {},
-    ...alignContent !== void 0 ? { alignContent } : {},
-    ...gap !== void 0 ? { gap } : {},
-    ...rowGap !== void 0 ? { rowGap } : {},
-    ...columnGap !== void 0 ? { columnGap } : {}
-  };
-  const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React24.createElement(
-    FlatList,
-    {
-      data: paddedData,
-      renderItem: renderGridItem,
-      keyExtractor: resolvedKeyExtractor,
-      numColumns: safeColumns,
-      scrollEnabled,
-      onEndReached,
-      onEndReachedThreshold,
-      contentContainerStyle: hasLayoutStyle ? [contentContainerStyle, layoutStyle] : contentContainerStyle,
-      ListHeaderComponent: header,
-      ListFooterComponent: footer,
-      style: Object.keys(restStyle).length > 0 ? restStyle : void 0
-    }
-  );
-};
-GridBuilder.displayName = "GridBuilder";
-
-// src/components/view/conditional/conditional-view.tsx
-import React25, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
-import { Animated as Animated3 } from "react-native";
-
-// src/components/view/conditional/conditional-view.utils.ts
-var FINAL_VALUES = {
-  opacity: 1,
-  scale: 1,
-  translateX: 0,
-  translateY: 0
-};
-var getInitialValues = (animation) => {
-  switch (animation) {
-    case "fade":
-      return { opacity: 0.5, scale: 1, translateX: 0, translateY: 0 };
-    case "scale":
-    default:
-      return { opacity: 1, scale: 0.5, translateX: 0, translateY: 0 };
-  }
-};
-var getExitValues = (animation) => {
-  switch (animation) {
-    case "fade":
-      return { opacity: 0.5, scale: 1, translateX: 0, translateY: 0 };
-    case "scale":
-    default:
-      return getInitialValues(animation);
-  }
-};
-
-// src/components/view/conditional/conditional-view.animation.ts
-import { Animated as Animated2, Easing } from "react-native";
-var runConditionalViewAnimation = ({
-  opacity,
-  scale,
-  translateX,
-  translateY,
-  toValues,
-  onComplete
-}) => {
-  const easing = Easing.out(Easing.cubic);
-  const animation = Animated2.parallel([
-    Animated2.timing(opacity, {
-      toValue: toValues.opacity,
-      duration: 800,
-      easing,
-      useNativeDriver: true
-    }),
-    Animated2.timing(scale, {
-      toValue: toValues.scale,
-      duration: 800,
-      easing,
-      useNativeDriver: true
-    }),
-    Animated2.timing(translateX, {
-      toValue: toValues.translateX,
-      duration: 800,
-      easing,
-      useNativeDriver: true
-    }),
-    Animated2.timing(translateY, {
-      toValue: toValues.translateY,
-      duration: 800,
-      easing,
-      useNativeDriver: true
-    })
-  ]);
-  animation.start(({ finished }) => {
-    if (finished) {
-      onComplete?.();
-    }
-  });
-  return animation;
-};
-
-// src/components/view/conditional/conditional-view.tsx
-var ConditionalView = ({
-  isVisible,
-  children,
-  animation = "fade",
-  disableAnimation = false
-}) => {
-  const [shouldRender, setShouldRender] = useState2(isVisible);
-  const animationRef = useRef2(null);
-  const initialValues = useMemo4(() => getInitialValues(animation), [animation]);
-  const exitValues = useMemo4(() => getExitValues(animation), [animation]);
-  const opacity = useRef2(
-    new Animated3.Value(
-      disableAnimation ? FINAL_VALUES.opacity : initialValues.opacity
-    )
-  ).current;
-  const scale = useRef2(
-    new Animated3.Value(disableAnimation ? FINAL_VALUES.scale : initialValues.scale)
-  ).current;
-  const translateX = useRef2(
-    new Animated3.Value(
-      disableAnimation ? FINAL_VALUES.translateX : initialValues.translateX
-    )
-  ).current;
-  const translateY = useRef2(
-    new Animated3.Value(
-      disableAnimation ? FINAL_VALUES.translateY : initialValues.translateY
-    )
-  ).current;
-  useEffect2(() => {
-    if (isVisible) {
-      setShouldRender(true);
-    }
-  }, [isVisible]);
-  useEffect2(() => {
-    if (!shouldRender) return;
-    const startValues = isVisible ? disableAnimation ? FINAL_VALUES : initialValues : FINAL_VALUES;
-    const targetValues = isVisible ? FINAL_VALUES : exitValues;
-    opacity.setValue(startValues.opacity);
-    scale.setValue(startValues.scale);
-    translateX.setValue(startValues.translateX);
-    translateY.setValue(startValues.translateY);
-    if (disableAnimation) {
-      if (!isVisible) {
-        setShouldRender(false);
-      }
-      return;
-    }
-    animationRef.current?.stop();
-    animationRef.current = runConditionalViewAnimation({
-      opacity,
-      scale,
-      translateX,
-      translateY,
-      toValues: targetValues,
-      onComplete: !isVisible ? () => setShouldRender(false) : void 0
-    });
-  }, [
-    isVisible,
-    shouldRender,
-    disableAnimation,
-    initialValues,
-    exitValues,
-    opacity,
-    scale,
-    translateX,
-    translateY
-  ]);
-  const animatedStyle = useMemo4(
-    () => ({
-      opacity,
-      transform: [{ translateX }, { translateY }, { scale }]
-    }),
-    [opacity, scale, translateX, translateY]
-  );
-  if (!shouldRender) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(Animated3.View, { style: animatedStyle }, children);
-};
-
-// src/components/view/masonry-grid/masonry-grid.tsx
-import React26, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View22 } from "react-native";
-var getSafeColumns3 = (columns) => {
-  if (!columns || columns <= 0) return 1;
-  return Math.floor(columns);
-};
-var getItemKey = (child, index) => {
-  return React26.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
-};
-var MasonryGrid = ({
-  children,
-  columns = 2,
-  spacing,
-  rowSpacing,
-  columnSpacing,
-  style,
-  columnStyle
-}) => {
-  const [containerWidth, setContainerWidth] = useState3();
-  const heightMapRef = useRef3({});
-  const [layoutVersion, setLayoutVersion] = useState3(0);
-  const safeColumns = getSafeColumns3(columns);
-  const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
-  const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
-  const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
-  const columnWidth = useMemo5(() => {
-    if (!containerWidth) return void 0;
-    return (containerWidth - totalColumnGap) / safeColumns;
-  }, [containerWidth, safeColumns, totalColumnGap]);
-  const items = useMemo5(
-    () => React26.Children.toArray(children).map((child, index) => ({
-      key: getItemKey(child, index),
-      element: child
-    })),
-    [children]
-  );
-  const columnsItems = useMemo5(() => {
-    const buckets = Array.from({ length: safeColumns }, () => []);
-    const heights = new Array(safeColumns).fill(0);
-    items.forEach((item) => {
-      const height = heightMapRef.current[item.key];
-      const targetIndex = heights.indexOf(Math.min(...heights));
-      buckets[targetIndex].push(item);
-      heights[targetIndex] += (height ?? 0) + resolvedRowSpacing;
-    });
-    return buckets;
-  }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React26.createElement(
-    View22,
-    {
-      style: [
-        {
-          flexDirection: "row"
-        },
-        style
-      ],
-      onLayout: (event) => {
-        const nextWidth = event.nativeEvent.layout.width;
-        if (!nextWidth || nextWidth === containerWidth) return;
-        setContainerWidth(nextWidth);
-      }
-    },
-    columnsItems.map((column, columnIndex) => {
-      const isLastColumn = columnIndex === columnsItems.length - 1;
-      const columnStyles = [
-        {
-          width: columnWidth,
-          marginRight: isLastColumn ? 0 : resolvedColumnSpacing
-        },
-        columnStyle
-      ];
-      return /* @__PURE__ */ React26.createElement(View22, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
-        const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React26.createElement(
-          View22,
-          {
-            key: item.key,
-            style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
-            onLayout: (event) => {
-              const nextHeight = event.nativeEvent.layout.height;
-              if (heightMapRef.current[item.key] === nextHeight) return;
-              heightMapRef.current[item.key] = nextHeight;
-              setLayoutVersion((value) => value + 1);
-            }
-          },
-          item.element
-        );
-      }));
-    })
-  );
-};
-
-// src/components/view/masonry-grid/masonry-grid-item.tsx
-import React27 from "react";
-import { View as View23 } from "react-native";
-var MasonryGridItem = ({
-  children,
-  style
-}) => {
-  return /* @__PURE__ */ React27.createElement(View23, { style }, children);
-};
-MasonryGridItem.displayName = "MasonryGridItem";
-
-// src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React28, { useMemo as useMemo6, useRef as useRef4 } from "react";
-import {
-  ScrollView
-} from "react-native";
-var resolveMasonryData = (data, itemCount) => {
-  if (data) return data;
-  if (!itemCount || itemCount <= 0) return [];
-  return Array.from({ length: itemCount }, (_, index) => index);
-};
-var MasonryGridBuilder = ({
-  data,
-  itemCount,
-  renderItem,
-  itemBuilder,
-  keyExtractor,
-  columns = 2,
-  spacing,
-  rowSpacing,
-  columnSpacing,
-  style,
-  columnStyle,
-  onEndReached,
-  onEndReachedThreshold = 0.1,
-  header,
-  footer,
-  scrollEnabled,
-  contentContainerStyle,
-  showsVerticalScrollIndicator,
-  showsHorizontalScrollIndicator,
-  bounces,
-  onScroll
-}) => {
-  const resolvedData = useMemo6(
-    () => resolveMasonryData(data, itemCount),
-    [data, itemCount]
-  );
-  const resolvedKeyExtractor = useMemo6(() => {
-    if (keyExtractor) return keyExtractor;
-    return (_, index) => `masonry-${index}`;
-  }, [keyExtractor]);
-  const resolvedRenderer = useMemo6(() => {
-    if (renderItem) return renderItem;
-    if (itemBuilder)
-      return ({ item, index }) => itemBuilder({ item, index });
-    return void 0;
-  }, [renderItem, itemBuilder]);
-  const lastEndReachedHeight = useRef4(0);
-  if (!resolvedRenderer) return null;
-  const handleScroll = (event) => {
-    onScroll?.(event);
-    if (!onEndReached) return;
-    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
-    if (!layoutMeasurement?.height) return;
-    const distanceFromEnd = contentSize.height - (layoutMeasurement.height + contentOffset.y);
-    const threshold = onEndReachedThreshold * layoutMeasurement.height;
-    if (distanceFromEnd <= threshold && contentSize.height !== lastEndReachedHeight.current) {
-      lastEndReachedHeight.current = contentSize.height;
-      onEndReached();
-    }
-  };
-  return /* @__PURE__ */ React28.createElement(
-    ScrollView,
-    {
-      scrollEventThrottle: 16,
-      scrollEnabled,
-      contentContainerStyle,
-      showsVerticalScrollIndicator,
-      showsHorizontalScrollIndicator,
-      bounces,
-      onScroll: handleScroll
-    },
-    header,
-    /* @__PURE__ */ React28.createElement(
-      MasonryGrid,
-      {
-        columns,
-        spacing,
-        rowSpacing,
-        columnSpacing,
-        style: [{ width: "100%" }, style],
-        columnStyle
-      },
-      resolvedData.map((item, index) => /* @__PURE__ */ React28.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
-    ),
-    footer
-  );
-};
-MasonryGridBuilder.displayName = "MasonryGridBuilder";
-export {
-  Align,
-  AspectRatio,
-  BlurView,
-  Center,
-  Column,
-  ConditionalView,
-  ConstrainedBox,
-  Container,
-  Expanded,
-  Flex,
-  Flexible,
-  FractionallySizedBox,
-  Grid,
-  GridBuilder,
-  GridItem,
-  Margin,
-  MasonryGrid,
-  MasonryGridBuilder,
-  MasonryGridItem,
-  Padding,
-  PositionedView,
-  RoundedView,
-  Row,
-  Screen,
-  SizedBox,
-  Spacer,
-  Surface,
-  Wrap
-};