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

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Box_exports = {};
__export(Box_exports, {
  Box: () => Box
});
module.exports = __toCommonJS(Box_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react_native = require("react-native");
var import_styled = require("@crossed/styled");
var import_react = require("react");
var import_base = require("../styles/base");
var import_gap = require("../styles/gap");
var import_justifyContent = require("../styles/justifyContent");
var import_alignItems = require("../styles/alignItems");
const styleBox = (0, import_styled.createStyles)(
  () => ({
    root: {
      base: { display: "flex" },
      web: { base: { boxSizing: "border-box" } }
    },
    center: {
      base: { alignItems: "center", justifyContent: "center" }
    }
  })
);
const Box = (0, import_react.forwardRef)(
  ({
    style,
    space,
    center,
    justifyContent,
    alignItems,
    alignSelf,
    pressable,
    ...props
  }, ref) => {
    const styles = (0, import_react.useMemo)(() => {
      return (0, import_styled.composeStyles)(
        import_base.baseStyle.view,
        styleBox.root,
        import_justifyContent.justifyContentStyle[justifyContent],
        import_alignItems.alignItemsStyle[alignItems],
        import_alignItems.alignSelfStyle[alignSelf],
        center === true && styleBox.center,
        import_gap.gapStyles[space],
        style
      );
    }, [center, style, alignSelf, alignItems, justifyContent, space]);
    const handleStyles = (0, import_react.useCallback)(
      ({ pressed, hovered, focused }) => {
        return styles.rnw({
          active: pressed,
          hover: hovered,
          focus: focused
        }).style;
      },
      [styles]
    );
    const Comp = (0, import_react.useMemo)(() => {
      return pressable ? import_react_native.Pressable : import_react_native.View;
    }, [pressable]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Comp,
      {
        ref,
        ...props,
        style: pressable ? handleStyles : styles.rnw().style
      }
    );
  }
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Box
});
//# sourceMappingURL=Box.js.map