@azmr/ui 0.1.0 → 0.3.0

package/dist/menu.d.ts

@@ -0,0 +1,105 @@
+import * as _base_ui_react_menu from '@base-ui/react/menu';
+import { Menu } from '@base-ui/react/menu';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import * as _base_ui_react_context_menu from '@base-ui/react/context-menu';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import { P as PositionProps } from './shared-Fkx-sjPt.js';
+import { BaseUIComponentProps, Orientation } from '../internals/types.mjs';
+
+interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+interface SeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+
+type WithClassName<T> = Omit<T, "className"> & {
+    className?: string;
+};
+interface MenuItemProps extends WithClassName<ComponentPropsWithoutRef<typeof Menu.Item>> {
+    /** `destructive` for an item that deletes or discards something. */
+    variant?: "default" | "destructive";
+}
+/** An action. Arrow keys move between items; Enter or Space runs it and closes the menu. */
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+/** A link in a menu. Renders an `<a>`, so it works with middle click and "open in new tab". */
+declare const MenuLinkItem: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuLinkItemProps, "ref"> & react.RefAttributes<Element>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLAnchorElement>>;
+/** An item that toggles on and off. It stays open when toggled; set `closeOnClick` to change that. */
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuCheckboxItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/** A group of radio items: exactly one is selected. */
+declare const MenuRadioGroup: react.NamedExoticComponent<Omit<_base_ui_react_menu.MenuRadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuRadioItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/** Groups items under a label, announced as a named group. */
+declare const MenuGroup: react.ForwardRefExoticComponent<Omit<_base_ui_react_menu.MenuGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuLabel: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/**
+ * A keyboard shortcut shown at the end of an item. It is a hint only: wiring the shortcut up is
+ * the app's job. Add `aria-keyshortcuts` to the item if it is real.
+ */
+declare function MenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+/** Wraps a nested menu: a `MenuSubTrigger` and its `MenuSubContent`. */
+declare const MenuSub: typeof Menu.SubmenuRoot;
+declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuSubmenuTriggerProps, "ref"> & react.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+type MenuSubContentProps = WithClassName<ComponentPropsWithoutRef<typeof Menu.Popup>> & PositionProps;
+declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & PositionProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A menu that opens at the pointer on right click (or long press on touch). It supports the same
+ * keys as `DropdownMenu` once it is open.
+ *
+ * Use it as an enhancement only. The trigger area is not focusable and a long press is easy to
+ * miss, so every action in it must also be reachable another way, for example a visible actions
+ * button that opens a `DropdownMenu` with the same items.
+ */
+declare const ContextMenu: typeof ContextMenu$1.Root;
+/** The area that responds to right click. Give it a size with `className`. */
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<Omit<_base_ui_react_context_menu.ContextMenuTriggerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type ContextMenuContentProps = Omit<ComponentPropsWithoutRef<typeof ContextMenu$1.Popup>, "className"> & PositionProps & {
+    className?: string;
+};
+declare const ContextMenuContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & PositionProps & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A menu of actions opened from a button.
+ *
+ * Keyboard: Enter, Space or ArrowDown on the trigger opens it on the first item (ArrowUp, on the
+ * last). Inside, ArrowDown and ArrowUp move between items and wrap, Home and End jump, typing
+ * letters jumps to the item that starts with them, Enter or Space runs the item, ArrowRight opens
+ * a submenu and ArrowLeft closes it, Escape closes (one level at a time) and returns focus to the
+ * trigger, and Tab closes it. Disabled items stay focusable (so they can be found) but cannot be run.
+ */
+declare const DropdownMenu: typeof Menu.Root;
+declare const DropdownMenuTrigger: Menu.Trigger;
+type DropdownMenuContentProps = Omit<ComponentPropsWithoutRef<typeof Menu.Popup>, "className"> & PositionProps & {
+    className?: string;
+};
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_menu.MenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & PositionProps & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { ContextMenu, MenuCheckboxItem as ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, MenuGroup as ContextMenuGroup, MenuItem as ContextMenuItem, MenuLabel as ContextMenuLabel, MenuLinkItem as ContextMenuLinkItem, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuShortcut as ContextMenuShortcut, MenuSub as ContextMenuSub, MenuSubContent as ContextMenuSubContent, MenuSubTrigger as ContextMenuSubTrigger, ContextMenuTrigger, DropdownMenu, MenuCheckboxItem as DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, MenuGroup as DropdownMenuGroup, MenuItem as DropdownMenuItem, MenuLabel as DropdownMenuLabel, MenuLinkItem as DropdownMenuLinkItem, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuSub as DropdownMenuSub, MenuSubContent as DropdownMenuSubContent, MenuSubTrigger as DropdownMenuSubTrigger, DropdownMenuTrigger, type MenuItemProps, type MenuSubContentProps };

package/dist/menu.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuLinkItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger
+} from "./chunk-EFHRRLAW.js";
+import "./chunk-LZMX27IZ.js";
+import "./chunk-XRZHP6BD.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ContextMenu,
+  MenuCheckboxItem as ContextMenuCheckboxItem,
+  ContextMenuContent,
+  MenuGroup as ContextMenuGroup,
+  MenuItem as ContextMenuItem,
+  MenuLabel as ContextMenuLabel,
+  MenuLinkItem as ContextMenuLinkItem,
+  MenuRadioGroup as ContextMenuRadioGroup,
+  MenuRadioItem as ContextMenuRadioItem,
+  MenuSeparator as ContextMenuSeparator,
+  MenuShortcut as ContextMenuShortcut,
+  MenuSub as ContextMenuSub,
+  MenuSubContent as ContextMenuSubContent,
+  MenuSubTrigger as ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  DropdownMenu,
+  MenuCheckboxItem as DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  MenuGroup as DropdownMenuGroup,
+  MenuItem as DropdownMenuItem,
+  MenuLabel as DropdownMenuLabel,
+  MenuLinkItem as DropdownMenuLinkItem,
+  MenuRadioGroup as DropdownMenuRadioGroup,
+  MenuRadioItem as DropdownMenuRadioItem,
+  MenuSeparator as DropdownMenuSeparator,
+  MenuShortcut as DropdownMenuShortcut,
+  MenuSub as DropdownMenuSub,
+  MenuSubContent as DropdownMenuSubContent,
+  MenuSubTrigger as DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};

package/dist/modal.d.ts

@@ -0,0 +1,105 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+
+/**
+ * A dialog that interrupts to ask for a decision, usually before something destructive. It is
+ * announced as an alert dialog, it is **not** closed by a click outside (the person must choose),
+ * and focus starts on `AlertDialogCancel`, the least destructive choice, so pressing Enter by
+ * reflex cannot delete anything. Escape still cancels.
+ */
+declare const AlertDialog: typeof AlertDialog$1.Root;
+declare const AlertDialogTrigger: AlertDialog$1.Trigger;
+type AlertDialogContentProps = Omit<ComponentPropsWithoutRef<typeof AlertDialog$1.Popup>, "className"> & {
+    className?: string;
+};
+declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLParagraphElement>>;
+/** The safe choice. It closes the dialog and receives focus first. */
+declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+interface AlertDialogActionProps extends Omit<ComponentPropsWithoutRef<typeof AlertDialog$1.Close>, "className"> {
+    className?: string;
+    /** `destructive` (default) for an irreversible action; `default` for a plain confirmation. */
+    tone?: "default" | "destructive";
+}
+/** The confirming choice. It runs `onClick`, then closes the dialog. */
+declare const AlertDialogAction: react.ForwardRefExoticComponent<AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * A modal dialog. While it is open focus is trapped inside it, the page behind is inert and
+ * does not scroll, and Escape or a click on the scrim closes it and returns focus to the trigger.
+ * Dialogs can be stacked: Escape closes only the top one.
+ *
+ * Name it with `DialogTitle` (required for accessibility) and describe it with
+ * `DialogDescription`.
+ */
+declare function Dialog(props: ComponentPropsWithoutRef<typeof Dialog$1.Root>): react.JSX.Element;
+declare const DialogTrigger: Dialog$1.Trigger;
+/** Closes the dialog. Put it inside `DialogContent`; use `render` to style it as a `Button`. */
+declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const sizes: {
+    readonly sm: "max-w-sm";
+    readonly md: "max-w-lg";
+    readonly lg: "max-w-2xl";
+    readonly xl: "max-w-4xl";
+    readonly full: "max-w-[calc(100vw-2rem)]";
+};
+interface DialogContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Popup>, "className"> {
+    className?: string;
+    /** Maximum width. Default `md`. All sizes stay inside the viewport on small screens. */
+    size?: keyof typeof sizes;
+    /** Show the corner close button (labelled "Close"). Default true. */
+    showClose?: boolean;
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+type DrawerSide = "top" | "right" | "bottom" | "left";
+interface DrawerProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Root>, "swipeDirection"> {
+    /** The edge it slides in from. Default `right`. It is dismissed by swiping back toward that edge. */
+    side?: DrawerSide;
+}
+/**
+ * A panel that slides in from an edge: a modal, like `Dialog` (focus trap, inert and scroll-locked
+ * page, Escape, return focus), plus swipe to dismiss on touch.
+ */
+declare function Drawer({ side, ...props }: DrawerProps): react.JSX.Element;
+declare const DrawerTrigger: Drawer$1.Trigger;
+declare const DrawerClose: Drawer$1.Close;
+interface DrawerContentProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Popup>, "className"> {
+    className?: string;
+    /** Show the corner close button (labelled "Close"). Default true. */
+    showClose?: boolean;
+}
+declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerTitleProps, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerDescriptionProps, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSide, DrawerTitle, DrawerTrigger };

package/dist/modal.js

@@ -0,0 +1,273 @@
+"use client";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  buttonVariants
+} from "./chunk-C2HKIPLQ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/modal/alert-dialog.tsx
+import { forwardRef as forwardRef2, useCallback, useRef } from "react";
+
+// src/primitives/alert-dialog.ts
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+
+// src/components/modal/shared.tsx
+import { X } from "lucide-react";
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var BACKDROP = "fixed inset-0 z-(--z-overlay) bg-scrim transition-opacity duration-(--motion-duration-base) ease-standard data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+var HEADER = "flex flex-col gap-1.5 pr-8 text-left";
+var FOOTER = "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end";
+var TITLE = "text-lg font-semibold leading-none tracking-tight";
+var DESCRIPTION = "text-sm text-muted-foreground";
+var ModalHeader = forwardRef(
+  function ModalHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(HEADER, className), ...props });
+  }
+);
+var ModalFooter = forwardRef(
+  function ModalFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(FOOTER, className), ...props });
+  }
+);
+var CLOSE_BUTTON = cn(
+  buttonVariants({ variant: "ghost", size: "icon" }),
+  "absolute right-2 top-2 size-8"
+);
+function CornerClose({
+  as: Close
+}) {
+  return /* @__PURE__ */ jsx(Close, { "aria-label": "Close", className: CLOSE_BUTTON, children: /* @__PURE__ */ jsx(Icon, { icon: X }) });
+}
+var ModalFlag = createContext(true);
+function ModalScope({
+  modal,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ModalFlag.Provider, { value: modal !== false, children });
+}
+function useAriaModal() {
+  return useContext(ModalFlag) ? { "aria-modal": true } : {};
+}
+
+// src/components/modal/alert-dialog.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AlertDialog2 = AlertDialog.Root;
+var AlertDialogTrigger = AlertDialog.Trigger;
+var AlertDialogContent = forwardRef2(
+  function AlertDialogContent2({ className, initialFocus, children, ...props }, ref) {
+    const popup = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        popup.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+      /* @__PURE__ */ jsx2(AlertDialog.Backdrop, { "data-azmr-backdrop": "", className: BACKDROP }),
+      /* @__PURE__ */ jsx2(AlertDialog.Viewport, { className: "fixed inset-0 z-(--z-modal) flex overflow-y-auto overscroll-contain p-4", children: /* @__PURE__ */ jsx2(
+        AlertDialog.Popup,
+        {
+          ref: setRef,
+          "aria-modal": true,
+          initialFocus: initialFocus ?? (() => popup.current?.querySelector("[data-azmr-cancel]") ?? true),
+          className: cn(
+            "relative mx-auto my-auto grid w-full max-w-md gap-4 rounded-lg border border-border bg-background p-6 text-foreground shadow-elevation-4 outline-none",
+            "transition-[opacity,scale] duration-(--motion-duration-base) ease-standard data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+            className
+          ),
+          ...props,
+          children
+        }
+      ) })
+    ] });
+  }
+);
+var AlertDialogHeader = ModalHeader;
+var AlertDialogFooter = ModalFooter;
+var AlertDialogTitle = forwardRef2(function AlertDialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(AlertDialog.Title, { ref, className: cn(TITLE, className), ...props });
+});
+var AlertDialogDescription = forwardRef2(function AlertDialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(AlertDialog.Description, { ref, className: cn(DESCRIPTION, className), ...props });
+});
+var AlertDialogCancel = forwardRef2(function AlertDialogCancel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    AlertDialog.Close,
+    {
+      ref,
+      "data-azmr-cancel": "",
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+});
+var AlertDialogAction = forwardRef2(
+  function AlertDialogAction2({ tone = "destructive", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx2(
+      AlertDialog.Close,
+      {
+        ref,
+        className: cn(
+          buttonVariants({ variant: tone === "destructive" ? "destructive" : "default" }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/modal/dialog.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/primitives/dialog.ts
+import { Dialog } from "@base-ui/react/dialog";
+
+// src/components/modal/dialog.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Dialog2(props) {
+  return /* @__PURE__ */ jsx3(ModalScope, { modal: props.modal, children: /* @__PURE__ */ jsx3(Dialog.Root, { ...props }) });
+}
+var DialogTrigger = Dialog.Trigger;
+var DialogClose = Dialog.Close;
+var sizes = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100vw-2rem)]"
+};
+var DialogContent = forwardRef3(function DialogContent2({ size = "md", showClose = true, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs2(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx3(Dialog.Backdrop, { "data-azmr-backdrop": "", className: BACKDROP }),
+    /* @__PURE__ */ jsx3(Dialog.Viewport, { className: "fixed inset-0 z-(--z-modal) flex overflow-y-auto overscroll-contain p-4", children: /* @__PURE__ */ jsxs2(
+      Dialog.Popup,
+      {
+        ref,
+        ...useAriaModal(),
+        className: cn(
+          "relative mx-auto my-auto grid w-full gap-4 rounded-lg border border-border bg-background p-6 text-foreground shadow-elevation-4 outline-none",
+          "transition-[opacity,scale] duration-(--motion-duration-base) ease-standard data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+          sizes[size],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx3(CornerClose, { as: Dialog.Close })
+        ]
+      }
+    ) })
+  ] });
+});
+var DialogHeader = ModalHeader;
+var DialogFooter = ModalFooter;
+var DialogTitle = forwardRef3(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(Dialog.Title, { ref, className: cn(TITLE, className), ...props });
+});
+var DialogDescription = forwardRef3(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(Dialog.Description, { ref, className: cn(DESCRIPTION, className), ...props });
+});
+
+// src/components/modal/drawer.tsx
+import { createContext as createContext2, forwardRef as forwardRef4, useContext as useContext2 } from "react";
+
+// src/primitives/drawer.ts
+import { Drawer } from "@base-ui/react/drawer";
+
+// src/components/modal/drawer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SWIPE = { right: "right", left: "left", top: "up", bottom: "down" };
+var SideContext = createContext2("right");
+function Drawer2({ side = "right", ...props }) {
+  return /* @__PURE__ */ jsx4(SideContext.Provider, { value: side, children: /* @__PURE__ */ jsx4(ModalScope, { modal: props.modal, children: /* @__PURE__ */ jsx4(Drawer.Root, { swipeDirection: SWIPE[side], ...props }) }) });
+}
+var DrawerTrigger = Drawer.Trigger;
+var DrawerClose = Drawer.Close;
+var edges = {
+  right: "inset-y-0 right-0 h-full w-80 max-w-[calc(100vw-3rem)] border-l translate-x-(--drawer-swipe-movement-x) data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+  left: "inset-y-0 left-0 h-full w-80 max-w-[calc(100vw-3rem)] border-r translate-x-(--drawer-swipe-movement-x) data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+  top: "inset-x-0 top-0 max-h-[85dvh] w-full rounded-b-xl border-b translate-y-(--drawer-swipe-movement-y) data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
+  bottom: "inset-x-0 bottom-0 max-h-[85dvh] w-full rounded-t-xl border-t translate-y-(--drawer-swipe-movement-y) data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full"
+};
+var DrawerContent = forwardRef4(function DrawerContent2({ showClose = true, className, children, ...props }, ref) {
+  const side = useContext2(SideContext);
+  return /* @__PURE__ */ jsxs3(Drawer.Portal, { children: [
+    /* @__PURE__ */ jsx4(
+      Drawer.Backdrop,
+      {
+        "data-azmr-backdrop": "",
+        className: cn(
+          BACKDROP,
+          // The scrim fades out as the drawer is swiped away; no easing while the finger is down.
+          "opacity-[calc(1-var(--drawer-swipe-progress,0))] duration-(--motion-duration-slow) data-[swiping]:transition-none"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx4(Drawer.Viewport, { className: "fixed inset-0 z-(--z-modal)", children: /* @__PURE__ */ jsxs3(
+      Drawer.Popup,
+      {
+        ref,
+        ...useAriaModal(),
+        className: cn(
+          "fixed flex flex-col overflow-y-auto overscroll-contain border-border bg-background p-6 text-foreground shadow-elevation-4 outline-none",
+          // Follows the finger exactly while swiping, then finishes on the motion tokens.
+          "transition-[translate] duration-(--motion-duration-slow) ease-standard data-[swiping]:transition-none",
+          edges[side],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx4(Drawer.Content, { className: "grid gap-4", children }),
+          showClose && /* @__PURE__ */ jsx4(CornerClose, { as: Drawer.Close })
+        ]
+      }
+    ) })
+  ] });
+});
+var DrawerHeader = ModalHeader;
+var DrawerFooter = ModalFooter;
+var DrawerTitle = forwardRef4(function DrawerTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx4(Drawer.Title, { ref, className: cn(TITLE, className), ...props });
+});
+var DrawerDescription = forwardRef4(function DrawerDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx4(Drawer.Description, { ref, className: cn(DESCRIPTION, className), ...props });
+});
+export {
+  AlertDialog2 as AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Dialog2 as Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Drawer2 as Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+};