@vela-ui/react/dist/chunk-X5L2I7AV.mjs

Vela UI React components

import {
  DialogCloseIcon,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "./chunk-X5RETTH3.mjs";

// src/components/drawer.tsx
import {
  Modal as AriaModal,
  ModalOverlay as AriaModalOverlay,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var drawerOverlayVariants = tv({
  base: "fixed top-0 left-0 isolate z-50 flex w-full items-center justify-center bg-black/50",
  variants: {
    isEntering: {
      true: "animate-in fade-in-0 duration-300"
    },
    isExiting: {
      true: "animate-out fade-out-0 duration-200"
    }
  }
});
var drawerVariants = tv({
  base: "bg-background fixed z-50 flex h-auto flex-col shadow-lg transition",
  variants: {
    placement: {
      top: "data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top inset-x-0 top-0 border-b",
      bottom: "data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom inset-x-0 bottom-0 border-t",
      left: "data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
      right: "data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
    },
    isEntering: {
      true: "animate-in duration-300"
    },
    isExiting: {
      true: "animate-out duration-200"
    }
  },
  defaultVariants: {
    placement: "right"
  }
});
var Drawer = ({
  className,
  overlayClassName,
  isDismissable = true,
  placement,
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    AriaModalOverlay,
    {
      "data-slot": "drawer-overlay",
      style: {
        height: "var(--visual-viewport-height)"
      },
      isDismissable,
      className: composeRenderProps(
        overlayClassName,
        (className2, renderProps) => drawerOverlayVariants({ ...renderProps, className: className2 })
      ),
      ...props,
      children: /* @__PURE__ */ jsx(
        AriaModal,
        {
          "data-slot": "drawer",
          isDismissable,
          className: composeRenderProps(
            className,
            (className2, renderProps) => drawerVariants({ ...renderProps, placement, className: className2 })
          ),
          ...props
        }
      )
    }
  );
};
var DrawerTrigger = DialogTrigger;
var DrawerContent = DialogContent;
var DrawerHeader = DialogHeader;
var DrawerFooter = DialogFooter;
var DrawerTitle = DialogTitle;
var DrawerDescription = DialogDescription;
var DrawerCloseIcon = DialogCloseIcon;

export {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
  DrawerCloseIcon
};