@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
61 lines (60 loc) • 2.86 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Drawer } from "vaul";
import { cn } from "../../lib/utilities.js";
const drawer_Drawer = ({ shouldScaleBackground = true, ...props })=>/*#__PURE__*/ jsx(Drawer.Root, {
shouldScaleBackground: shouldScaleBackground,
...props
});
drawer_Drawer.displayName = "Drawer";
const DrawerTrigger = Drawer.Trigger;
const DrawerPortal = Drawer.Portal;
const DrawerClose = Drawer.Close;
const DrawerOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Overlay, {
ref: ref,
className: cn("fixed inset-0 z-50 bg-black/80", className),
...props
}));
DrawerOverlay.displayName = Drawer.Overlay.displayName;
const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(DrawerPortal, {
children: [
/*#__PURE__*/ jsx(DrawerOverlay, {}),
/*#__PURE__*/ jsxs(Drawer.Content, {
ref: ref,
className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950", className),
...props,
children: [
/*#__PURE__*/ jsx("div", {
className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-neutral-100 dark:bg-neutral-800"
}),
children
]
})
]
}));
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
...props
});
DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
className: cn("mt-auto flex flex-col gap-2 p-4", className),
...props
});
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Title, {
ref: ref,
className: cn("text-lg leading-none font-semibold tracking-tight", className),
...props
}));
DrawerTitle.displayName = Drawer.Title.displayName;
const DrawerDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Description, {
ref: ref,
className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
...props
}));
DrawerDescription.displayName = Drawer.Description.displayName;
export { drawer_Drawer as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
//# sourceMappingURL=drawer.js.map