97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import * as React from "react";
|
|
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
import { cva } from "class-variance-authority";
|
|
import { X } from "lucide-react";
|
|
import { c as cn } from "./utils-DLCPGU0v.js";
|
|
const Sheet = SheetPrimitive.Root;
|
|
const SheetTrigger = SheetPrimitive.Trigger;
|
|
const SheetPortal = SheetPrimitive.Portal;
|
|
const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
SheetPrimitive.Overlay,
|
|
{
|
|
className: cn(
|
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
className
|
|
),
|
|
...props,
|
|
ref
|
|
}
|
|
));
|
|
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
const sheetVariants = cva(
|
|
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
{
|
|
variants: {
|
|
side: {
|
|
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
side: "right"
|
|
}
|
|
}
|
|
);
|
|
const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
/* @__PURE__ */ jsxs(
|
|
SheetPrimitive.Content,
|
|
{
|
|
ref,
|
|
className: cn(sheetVariants({ side }), className),
|
|
...props,
|
|
children: [
|
|
/* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
|
|
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
] }),
|
|
children
|
|
]
|
|
}
|
|
)
|
|
] }));
|
|
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
const SheetHeader = ({
|
|
className,
|
|
...props
|
|
}) => /* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"flex flex-col space-y-2 text-center sm:text-left",
|
|
className
|
|
),
|
|
...props
|
|
}
|
|
);
|
|
SheetHeader.displayName = "SheetHeader";
|
|
const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
SheetPrimitive.Title,
|
|
{
|
|
ref,
|
|
className: cn("text-lg font-semibold text-foreground", className),
|
|
...props
|
|
}
|
|
));
|
|
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
SheetPrimitive.Description,
|
|
{
|
|
ref,
|
|
className: cn("text-sm text-muted-foreground", className),
|
|
...props
|
|
}
|
|
));
|
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
export {
|
|
Sheet as S,
|
|
SheetTrigger as a,
|
|
SheetContent as b,
|
|
SheetHeader as c,
|
|
SheetTitle as d,
|
|
SheetDescription as e
|
|
};
|