import { Dimensions } from "react-native-web";
import { ScrollView, Dialog as TDialog, View, XStack, YStack, styled, useThemeName } from "tamagui";
import { Dialog } from "./Dialog.mjs";
import { Divider } from "./Divider.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { createElement } from "react";
function SideSheet({
  open,
  onOpenChange,
  children,
  title,
  Action,
  width = 400,
  ...props
}) {
  const theme = useThemeName();
  return /* @__PURE__ */jsx(Dialog, {
    open,
    onOpenChange,
    children: /* @__PURE__ */jsxs(Dialog.Portal, {
      children: [/* @__PURE__ */jsx(Dialog.Overlay, {}, "overlay"), /* @__PURE__ */createElement(Container, {
        ...props,
        theme,
        width,
        key: "sheet-container",
        enterStyle: {
          x: width
        },
        exitStyle: {
          x: width
        }
      }, /* @__PURE__ */jsxs(YStack, {
        pt: 24,
        pl: 16,
        pr: 24,
        h: "100%",
        gap: 8,
        fg: 1,
        children: [/* @__PURE__ */jsx(ScrollView, {
          showsVerticalScrollIndicator: !1,
          children
        }), /* @__PURE__ */jsx(View, {
          fg: 1
        }), Action && /* @__PURE__ */jsxs(View, {
          ml: -16,
          mr: -24,
          children: [/* @__PURE__ */jsx(Divider, {
            w: "100%",
            mb: 4
          }), /* @__PURE__ */jsx(XStack, {
            bottom: 0,
            justifyContent: "flex-end",
            px: 24,
            py: 16,
            children: Action
          })]
        })]
      }))]
    }, "portal")
  });
}
const {
    height: HEIGHT
  } = Dimensions.get("window"),
  Container = styled(TDialog.Content, {
    name: "SideSheetContainer",
    elevate: !0,
    animateOnly: ["width"],
    bblr: "$shape.corner_l",
    btlr: "$shape.corner_l",
    btrr: 0,
    bbrr: 0,
    style: {
      position: "fixed"
    },
    right: 0,
    top: 0,
    height: HEIGHT,
    maxHeight: HEIGHT,
    backgroundColor: "$surface",
    animation: "medium",
    overflow: "hidden",
    enterStyle: {
      x: 400
    },
    exitStyle: {
      x: 800
    }
  });
export { SideSheet };
//# sourceMappingURL=SideSheet.mjs.map
