@ashwa-io/ui 0.0.4 → 0.0.6

package/dist/components/molecule/FilterMenu/FilterMenu.js

@@ -0,0 +1,131 @@
+import { Badge } from "../../atomic/Badge/Badge.js";
+import { Button } from "../../atomic/Button/Button.js";
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { FacetList } from "../FacetFilter/FacetList.js";
+import { Button as Button$1 } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, FilterIcon } from "lucide-react";
+import { useState } from "react";
+// src/components/molecule/FilterMenu/FilterMenu.tsx
+const FilterMenu = (props) => {
+	const { categories, value, onChange, label = "Filter", size = "sm", disabled = false, "data-testid": testId } = props;
+	const [query, setQuery] = useState("");
+	const [openId, setOpenId] = useState(null);
+	const selectedCount = (category) => category.options.filter((option) => value[category.id]?.includes(option.value)).length;
+	const activeCount = categories.filter((category) => selectedCount(category) > 0).length;
+	const look = buttonLook("outline", size, false);
+	const needle = query.trim().toLowerCase();
+	const visible = categories.filter((category) => category.label.toLowerCase().includes(needle));
+	const clearAll = () => onChange({
+		...value,
+		...Object.fromEntries(categories.map(({ id }) => [id, []]))
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: (open) => {
+			if (open) return;
+			setQuery("");
+			setOpenId(null);
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button$1, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [
+				/* @__PURE__ */ jsx(FilterIcon, {
+					"data-icon": "inline-start",
+					"aria-hidden": true
+				}),
+				label,
+				" ",
+				activeCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Badge, {
+					tone: "brand",
+					children: activeCount
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: " active"
+				})] })
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			"aria-label": label,
+			className: "w-60 gap-0 p-0",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "border-b p-1",
+					children: /* @__PURE__ */ jsx(Input, {
+						"aria-label": "Search filters",
+						placeholder: "Search",
+						value: query,
+						onChange: (event) => setQuery(event.target.value)
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "max-h-60 overflow-y-auto p-1",
+					children: [visible.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground py-2 text-center text-sm",
+						children: "No results"
+					}), visible.map((category) => {
+						const count = selectedCount(category);
+						const multiple = category.multiple !== false;
+						return /* @__PURE__ */ jsxs(Popover, {
+							open: openId === category.id,
+							onOpenChange: (open) => setOpenId(open ? category.id : null),
+							children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent data-popup-open:bg-accent data-popup-open:text-accent-foreground flex w-full cursor-default items-center gap-2 rounded-md px-1.5 py-1 text-sm outline-none"
+								}),
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate text-left",
+										children: category.label
+									}),
+									count > 0 && /* @__PURE__ */ jsx("span", {
+										className: "text-xs tabular-nums",
+										children: count
+									}),
+									/* @__PURE__ */ jsx(ChevronRightIcon, {
+										"aria-hidden": true,
+										className: "size-4 shrink-0"
+									})
+								]
+							}), /* @__PURE__ */ jsx(PopoverContent, {
+								side: "right",
+								align: "start",
+								"aria-label": category.label,
+								className: "w-60 gap-0 p-0",
+								children: /* @__PURE__ */ jsx(FacetList, {
+									label: category.label,
+									options: category.options,
+									value: value[category.id] ?? [],
+									onChange: (next) => onChange({
+										...value,
+										[category.id]: next
+									}),
+									multiple,
+									showSelectAll: multiple
+								})
+							})]
+						}, category.id);
+					})]
+				}),
+				activeCount > 0 && /* @__PURE__ */ jsx("div", {
+					className: "border-t p-1",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						fullWidth: true,
+						onClick: clearAll,
+						children: "Clear all"
+					})
+				})
+			]
+		})]
+	});
+};
+export { FilterMenu };

package/dist/components/molecule/FilterMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { FilterCategory, FilterMenu, FilterMenuProps, FilterMenuValue } from "./FilterMenu.js";
+export { type FilterCategory, FilterMenu, type FilterMenuProps, type FilterMenuValue };

package/dist/components/molecule/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Names the dialog (required). */
+  title: string;
+  description?: string;
+  /** Body. */
+  children: React.ReactNode;
+  /** e.g. Cancel + Save buttons, right-aligned. */
+  footer?: React.ReactNode;
+  size?: ModalSize;
+  /** Fixed height (min(40rem, 85dvh)): the body scrolls, header and footer stay put. */
+  fixedHeight?: boolean;
+  /** Body without padding, for lists and tables that run edge to edge. */
+  flush?: boolean;
+  /** false: no close button; Escape and outside clicks do nothing (blocking flows). */
+  closable?: boolean;
+  'data-testid'?: string;
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/molecule/Modal/Modal.js

@@ -0,0 +1,48 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+// src/components/molecule/Modal/Modal.tsx
+const SIZE = {
+	sm: "sm:max-w-md",
+	md: "sm:max-w-lg",
+	lg: "sm:max-w-xl",
+	xl: "sm:max-w-2xl",
+	"2xl": "sm:max-w-3xl"
+};
+const FOCUSABLE = "a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])";
+const Modal = (props) => {
+	const { open, onClose, title, description, children, footer, size = "md", fixedHeight = false, flush = false, closable = true, "data-testid": testId } = props;
+	const [needsTabStop, setNeedsTabStop] = useState(false);
+	const bodyRef = useCallback((body) => {
+		if (!body) return void 0;
+		const check = () => setNeedsTabStop(body.scrollHeight > body.clientHeight && !body.querySelector(FOCUSABLE));
+		const observer = new ResizeObserver(check);
+		observer.observe(body);
+		Array.from(body.children).forEach((child) => observer.observe(child));
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next && closable) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: closable,
+			"data-testid": testId,
+			className: cn("flex max-h-[85dvh] flex-col", SIZE[size], fixedHeight && "h-[min(40rem,85dvh)]"),
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				/* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					"data-slot": "modal-body",
+					tabIndex: needsTabStop ? 0 : void 0,
+					className: cn("min-h-0 flex-1 overflow-y-auto", flush ? "-m-4" : "-m-1 p-1"),
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+};
+export { Modal };

package/dist/components/molecule/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal, ModalProps, ModalSize } from "./Modal.js";
+export { Modal, type ModalProps, type ModalSize };

package/dist/components/molecule/Popover/Popover.d.ts

@@ -0,0 +1,24 @@
+import "../../atomic/Button/index.js";
+import { ButtonVariant } from "../../atomic/Button/buttonVariant.js";
+import { IconComponent, OverlayAlign, OverlaySide, Size } from "../../../lib/types.js";
+import React from "react";
+export type PopoverWidth = 'sm' | 'md' | 'lg';
+export interface PopoverProps {
+  /** Trigger text (the trigger's aria-label when iconOnly); also names the popup. */
+  label: string;
+  icon?: IconComponent;
+  iconOnly?: boolean;
+  /** Trigger look. */
+  variant?: ButtonVariant;
+  size?: Size;
+  children: React.ReactNode;
+  /** Pass with onOpenChange to control it; otherwise it manages itself. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: OverlaySide;
+  align?: OverlayAlign;
+  width?: PopoverWidth;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/molecule/Popover/Popover.js

@@ -0,0 +1,38 @@
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { Button } from "../../ui/button.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/Popover/Popover.tsx
+const WIDTH = {
+	sm: "w-56",
+	md: "w-72",
+	lg: "w-96"
+};
+const Popover = (props) => {
+	const { label, icon: Icon, iconOnly = false, variant = "outline", size = "md", children, open, onOpenChange, side = "bottom", align = "start", width = "md", disabled = false, "data-testid": testId } = props;
+	const look = buttonLook(variant, size, iconOnly);
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"aria-label": iconOnly ? label : void 0,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				"data-icon": iconOnly ? void 0 : "inline-start",
+				"aria-hidden": true
+			}), !iconOnly && label]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side,
+			align,
+			"aria-label": label,
+			className: WIDTH[width],
+			children
+		})]
+	});
+};
+export { Popover };

package/dist/components/molecule/Popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverProps, PopoverWidth } from "./Popover.js";
+export { Popover, type PopoverProps, type PopoverWidth };

package/dist/components/molecule/Toaster/Toaster.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+/** Mount once at the app root. */
+export declare const Toaster: React.FC;

package/dist/components/molecule/Toaster/Toaster.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+// src/components/molecule/Toaster/Toaster.tsx
+const TOKENS = {
+	"--normal-bg": "var(--popover)",
+	"--normal-text": "var(--popover-foreground)",
+	"--normal-border": "var(--border)",
+	"--border-radius": "var(--radius)"
+};
+/** Mount once at the app root. */
+const Toaster$1 = () => /* @__PURE__ */ jsx(Toaster, {
+	position: "bottom-right",
+	style: TOKENS,
+	toastOptions: { classNames: {
+		toast: "font-sans",
+		description: "text-muted-foreground!"
+	} }
+});
+export { Toaster$1 as Toaster };

package/dist/components/molecule/Toaster/index.d.ts

@@ -0,0 +1,3 @@
+import { ToastOptions, toast } from "./toast.js";
+import { Toaster } from "./Toaster.js";
+export { type ToastOptions, Toaster, toast };

package/dist/components/molecule/Toaster/toast.d.ts

@@ -0,0 +1,13 @@
+export interface ToastOptions {
+  description?: string;
+  duration?: number;
+}
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+export declare const toast: {
+  message: (message: string, options?: ToastOptions) => string | number;
+  success: (message: string, options?: ToastOptions) => string | number;
+  error: (message: string, options?: ToastOptions) => string | number;
+  info: (message: string, options?: ToastOptions) => string | number;
+  warning: (message: string, options?: ToastOptions) => string | number;
+  dismiss: (id?: string | number) => void;
+};

package/dist/components/molecule/Toaster/toast.js

@@ -0,0 +1,18 @@
+import { toast } from "sonner";
+// src/components/molecule/Toaster/toast.ts
+const show = (notify) => (message, options) => notify(message, {
+	description: options?.description,
+	duration: options?.duration
+});
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+const toast$1 = {
+	message: show(toast.message),
+	success: show(toast.success),
+	error: show(toast.error),
+	info: show(toast.info),
+	warning: show(toast.warning),
+	dismiss: (id) => {
+		toast.dismiss(id);
+	}
+};
+export { toast$1 as toast };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,61 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/ui/alert-dialog.tsx
+const AlertDialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+};
+const AlertDialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+};
+const AlertDialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const AlertDialogContent = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", className),
+		...props
+	})] });
+};
+const AlertDialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+};
+const AlertDialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+};
+const AlertDialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+};
+const AlertDialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { AlertDialog$1 as AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle };

package/dist/components/ui/combobox.js

@@ -0,0 +1,78 @@
+"use client";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import "react";
+import { Combobox } from "@base-ui/react";
+// src/components/ui/combobox.tsx
+const Combobox$1 = Combobox.Root;
+const ComboboxTrigger = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })]
+	});
+};
+const ComboboxClear = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+};
+const ComboboxInput = ({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) => {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+};
+const ComboboxList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		...props
+	});
+};
+const ComboboxItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+};
+const ComboboxEmpty = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
+		...props
+	});
+};
+export { Combobox$1 as Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger };

package/dist/components/ui/dialog.js

@@ -0,0 +1,78 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import "react";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/ui/dialog.tsx
+const Dialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+};
+const DialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+};
+const DialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const DialogContent = ({ className, children, showCloseButton = true, ...props }) => {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "dialog-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+const DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+};
+const DialogFooter = ({ className, showCloseButton = false, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			children: "Close"
+		})]
+	});
+};
+const DialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("font-heading text-base leading-none font-medium", className),
+		...props
+	});
+};
+const DialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { Dialog$1 as Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,42 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "lucide-react";
+import "react";
+import { Menu } from "@base-ui/react/menu";
+// src/components/ui/dropdown-menu.tsx
+const DropdownMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+const DropdownMenuTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+const DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden", className),
+			...props
+		})
+	}) });
+};
+const DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };