@crossed/demo/lib/commonjs/primitive/createSheet/simple.js

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

"use strict";
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 simple_exports = {};
__export(simple_exports, {
  CreateSheetSimpleDemo: () => CreateSheetSimpleDemo
});
module.exports = __toCommonJS(simple_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_primitive = require("@crossed/primitive");
var import_ui = require("@crossed/ui");
var import_react = require("react");
var import_portal = require("@gorhom/portal");
var import_react_native = require("react-native");
var import_styled = require("@crossed/styled");
const Sheet = (0, import_primitive.createSheet)({
  Content: (0, import_styled.styled)(import_react_native.View, {
    className: [
      "bg-neutral-800 z-20 flex flex-col",
      "border border-neutral-700 rounded-md px-5 py-4 m-auto",
      "fixed left-0 right-0 bottom-0",
      "gap-2 max-h-full"
    ]
  }),
  Portal: import_portal.Portal,
  Root: import_react.Fragment,
  Trigger: (0, import_styled.styled)(import_react_native.Pressable, { className: ["cursor-pointer"] }),
  Overlay: (0, import_styled.styled)(import_react_native.Pressable, {
    className: ["absolute inset-0 bg-neutral-800/50 z-20", "cursor-default"]
  }),
  Handle: (0, import_styled.styled)(import_react_native.Pressable, {
    className: ["bg-neutral-900/70 rounded-lg w-1/3 mx-auto", "h-2"],
    props: { role: "button" }
  })
});
const CreateSheetSimpleDemo = () => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Sheet, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sheet.Trigger, { "aria-label": "Open sheet", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { children: "Open" }) }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Sheet.Portal, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sheet.Overlay, {}),
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Sheet.Content, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sheet.Handle, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.TextInput, {}),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet dapibus metus, vel fringilla eros imperdiet id. Maecenas fermentum lorem gravida massa sagittis, vel ultricies risus convallis. Ut sodales dui sit amet velit laoreet cursus. Mauris vel sapien non lorem sodales facilisis. Fusce ut enim et ante tristique placerat eget eget massa. Maecenas erat libero, commodo id urna eu, convallis auctor mi. Pellentesque eleifend nibh vitae lacinia sagittis. Nullam et consectetur lacus, quis porttitor ipsum. Nullam sed purus id libero elementum auctor vel sit amet nulla. Nulla placerat elit at dignissim egestas. Quisque sed sagittis ante, et ultrices diam. In at efficitur diam. Pellentesque quis molestie lorem. Vestibulum volutpat volutpat luctus. Donec massa arcu, suscipit quis magna non, congue scelerisque nisl. Duis ligula lorem, ullamcorper et consectetur vitae, consequat ac sem." })
      ] })
    ] })
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CreateSheetSimpleDemo
});
//# sourceMappingURL=simple.js.map