UNPKG

@sikka/hawa

Version:

Modern UI Kit made with Tailwind

84 lines (81 loc) 2.49 kB
"use client"; // elements/popover/Popover.tsx import * as React from "react"; import * as PopoverPrimitive from "@radix-ui/react-popover"; // util/index.ts import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs) { return twMerge(clsx(inputs)); } // elements/popover/Popover.tsx var PopoverContent = React.forwardRef( ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React.createElement( PopoverPrimitive.Content, { ref, align, sideOffset, className: cn( "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2", className ), ...props } )) ); PopoverContent.displayName = PopoverPrimitive.Content.displayName; var Popover = ({ trigger, children, className, align = "center", side, sideOffset = 4, open, width = "default", disableTrigger, contentProps, triggerProps, ...props }) => { let widthStyles = { trigger: "var(--radix-popover-trigger-width)", default: "auto" }; return /* @__PURE__ */ React.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React.createElement( PopoverPrimitive.Trigger, { className: "hawa-w-full", disabled: disableTrigger, ...triggerProps }, trigger ), /* @__PURE__ */ React.createElement( PopoverContent, { side, className, align, sideOffset, style: { width: widthStyles[width], maxWidth: "var(--radix-popover-content-available-width)", maxHeight: "var(--radix-popover-content-available-height)" }, ...contentProps }, children )); }; var PopoverTrigger = PopoverPrimitive.Trigger; var PopoverPortal = PopoverPrimitive.Portal; var PopoverRoot = PopoverPrimitive.Root; export { Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger }; //# sourceMappingURL=index.mjs.map