@crossed/ui/lib/module/layout/Box.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { Pressable, View } from "react-native";
import {
  composeStyles,
  createStyles
} from "@crossed/styled";
import { forwardRef, useCallback, useMemo } from "react";
import { baseStyle } from "../styles/base";
import { gapStyles } from "../styles/gap";
import { justifyContentStyle } from "../styles/justifyContent";
import { alignItemsStyle, alignSelfStyle } from "../styles/alignItems";
const styleBox = createStyles(
  () => ({
    root: {
      base: { display: "flex" },
      web: { base: { boxSizing: "border-box" } }
    },
    center: {
      base: { alignItems: "center", justifyContent: "center" }
    }
  })
);
const Box = forwardRef(
  ({
    style,
    space,
    center,
    justifyContent,
    alignItems,
    alignSelf,
    pressable,
    ...props
  }, ref) => {
    const styles = useMemo(() => {
      return composeStyles(
        baseStyle.view,
        styleBox.root,
        justifyContentStyle[justifyContent],
        alignItemsStyle[alignItems],
        alignSelfStyle[alignSelf],
        center === true && styleBox.center,
        gapStyles[space],
        style
      );
    }, [center, style, alignSelf, alignItems, justifyContent, space]);
    const handleStyles = useCallback(
      ({ pressed, hovered, focused }) => {
        return styles.rnw({
          active: pressed,
          hover: hovered,
          focus: focused
        }).style;
      },
      [styles]
    );
    const Comp = useMemo(() => {
      return pressable ? Pressable : View;
    }, [pressable]);
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        ...props,
        style: pressable ? handleStyles : styles.rnw().style
      }
    );
  }
);
export {
  Box
};
//# sourceMappingURL=Box.js.map