@glob-ui/dialog 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/dialog
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A modal dialog on the native `<dialog>` element. Focus moves in, Escape closes it, and focus returns to the trigger. Build your own modal on the same behaviour with `DialogContentBase`.
+
+## Install
+
+```bash
+pnpm add @glob-ui/dialog
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Dialog](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/dialog.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,53 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Close when the backdrop is clicked. */
+    closeOnOutsideClick?: boolean;
+    children?: React.ReactNode;
+}
+declare function Dialog({ open, defaultOpen, onOpenChange, closeOnOutsideClick, children }: DialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const dialogVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogContentBaseProps = React.DialogHTMLAttributes<HTMLDialogElement>;
+/**
+ * The modal behaviour of Dialog with no styles and no layout: showModal, the shared scroll lock,
+ * Esc, backdrop click (see closeOnOutsideClick), focus return and aria-labelledby/describedby.
+ * Build your own modal on the same behaviour. Sheet and AlertDialog are built on it.
+ */
+declare const DialogContentBase: react.ForwardRefExoticComponent<DialogContentBaseProps & react.RefAttributes<HTMLDialogElement>>;
+type DialogCloseIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/** The X button in the top-right corner. Closes the surrounding Dialog, Sheet or AlertDialog. */
+declare const DialogCloseIcon: react.ForwardRefExoticComponent<DialogCloseIconProps & react.RefAttributes<HTMLButtonElement>>;
+interface DialogContentProps extends React.DialogHTMLAttributes<HTMLDialogElement>, VariantProps<typeof dialogVariants> {
+    /** Shows an X button in the top-right corner. */
+    showCloseButton?: boolean;
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDialogElement>>;
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Dialog, DialogClose, DialogCloseIcon, type DialogCloseIconProps, type DialogCloseProps, DialogContent, DialogContentBase, type DialogContentBaseProps, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, dialogVariants };

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Close when the backdrop is clicked. */
+    closeOnOutsideClick?: boolean;
+    children?: React.ReactNode;
+}
+declare function Dialog({ open, defaultOpen, onOpenChange, closeOnOutsideClick, children }: DialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const dialogVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogContentBaseProps = React.DialogHTMLAttributes<HTMLDialogElement>;
+/**
+ * The modal behaviour of Dialog with no styles and no layout: showModal, the shared scroll lock,
+ * Esc, backdrop click (see closeOnOutsideClick), focus return and aria-labelledby/describedby.
+ * Build your own modal on the same behaviour. Sheet and AlertDialog are built on it.
+ */
+declare const DialogContentBase: react.ForwardRefExoticComponent<DialogContentBaseProps & react.RefAttributes<HTMLDialogElement>>;
+type DialogCloseIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/** The X button in the top-right corner. Closes the surrounding Dialog, Sheet or AlertDialog. */
+declare const DialogCloseIcon: react.ForwardRefExoticComponent<DialogCloseIconProps & react.RefAttributes<HTMLButtonElement>>;
+interface DialogContentProps extends React.DialogHTMLAttributes<HTMLDialogElement>, VariantProps<typeof dialogVariants> {
+    /** Shows an X button in the top-right corner. */
+    showCloseButton?: boolean;
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDialogElement>>;
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Dialog, DialogClose, DialogCloseIcon, type DialogCloseIconProps, type DialogCloseProps, DialogContent, DialogContentBase, type DialogContentBaseProps, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, dialogVariants };

package/dist/index.js

@@ -0,0 +1,333 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogCloseIcon: () => DialogCloseIcon,
+  DialogContent: () => DialogContent,
+  DialogContentBase: () => DialogContentBase,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  dialogVariants: () => dialogVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/dialog.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@glob-ui/utils");
+var import_hooks = require("@glob-ui/hooks");
+var import_slot = require("@glob-ui/slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+var lockCount = 0;
+var savedStyles = null;
+function lockScroll() {
+  const html = document.documentElement;
+  if (lockCount === 0) {
+    const scrollbarWidth = window.innerWidth - html.clientWidth;
+    savedStyles = { overflow: html.style.overflow, paddingRight: html.style.paddingRight };
+    if (scrollbarWidth > 0) {
+      const current = parseFloat(getComputedStyle(html).paddingRight) || 0;
+      html.style.paddingRight = `${current + scrollbarWidth}px`;
+    }
+    html.style.overflow = "hidden";
+  }
+  lockCount++;
+  return () => {
+    lockCount--;
+    if (lockCount === 0 && savedStyles) {
+      html.style.overflow = savedStyles.overflow;
+      html.style.paddingRight = savedStyles.paddingRight;
+      savedStyles = null;
+    }
+  };
+}
+var DialogContext = (0, import_react.createContext)(null);
+function useDialogContext(part) {
+  const ctx = (0, import_react.useContext)(DialogContext);
+  if (!ctx) throw new Error(`${part} must be used inside Dialog, Sheet or AlertDialog`);
+  return ctx;
+}
+function Dialog({ open, defaultOpen = false, onOpenChange, closeOnOutsideClick = true, children }) {
+  const [isOpen, setOpen] = (0, import_hooks.useControllableState)(open, defaultOpen, onOpenChange);
+  const baseId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DialogContext.Provider,
+    {
+      value: {
+        open: isOpen,
+        setOpen,
+        contentId: `${baseId}-content`,
+        titleId: `${baseId}-title`,
+        descriptionId: `${baseId}-description`,
+        closeOnOutsideClick
+      },
+      children
+    }
+  );
+}
+Dialog.displayName = "Dialog";
+var DialogTrigger = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild = false, onClick } = _b, props = __objRest(_b, ["asChild", "onClick"]);
+    const ctx = useDialogContext("DialogTrigger");
+    const Comp = asChild ? import_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      __spreadValues({
+        ref,
+        type: asChild ? void 0 : "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.open ? ctx.contentId : void 0,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) ctx.setOpen(true);
+        }
+      }, props)
+    );
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+var dialogVariants = (0, import_class_variance_authority.cva)(
+  [
+    "m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] overflow-visible rounded-glob-lg border border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md",
+    // Enter/exit. @starting-style animates the entry; allow-discrete keeps display/overlay alive
+    // during the exit. Browsers without them open and close without animation.
+    "scale-95 opacity-0 transition-[opacity,scale,overlay,display] transition-discrete duration-200 ease-out",
+    "open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0",
+    "backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200",
+    "open:backdrop:opacity-100 starting:open:backdrop:opacity-0",
+    "motion-reduce:transition-none motion-reduce:backdrop:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-lg",
+        lg: "max-w-2xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var DialogContentBase = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, children, onCancel, onClose, onPointerDown, onClick } = _b, props = __objRest(_b, ["className", "children", "onCancel", "onClose", "onPointerDown", "onClick"]);
+    const ctx = useDialogContext("DialogContent");
+    const { open, setOpen, titleId, descriptionId, closeOnOutsideClick } = ctx;
+    const innerRef = (0, import_react.useRef)(null);
+    const previouslyFocused = (0, import_react.useRef)(null);
+    const pointerDownOnBackdrop = (0, import_react.useRef)(false);
+    const mergedRef = (0, import_react.useMemo)(() => (0, import_slot.composeRefs)(ref, innerRef), [ref]);
+    const hasOwnLabel = props["aria-labelledby"] !== void 0 || props["aria-label"] !== void 0;
+    const hasOwnDescription = props["aria-describedby"] !== void 0;
+    (0, import_react.useEffect)(() => {
+      const dialog = innerRef.current;
+      if (!dialog) return;
+      if (!open) {
+        if (dialog.open) dialog.close();
+        return;
+      }
+      if (!dialog.open) {
+        previouslyFocused.current = document.activeElement;
+        if (!hasOwnLabel) {
+          if (document.getElementById(titleId)) dialog.setAttribute("aria-labelledby", titleId);
+          else dialog.removeAttribute("aria-labelledby");
+        }
+        if (!hasOwnDescription) {
+          if (document.getElementById(descriptionId)) dialog.setAttribute("aria-describedby", descriptionId);
+          else dialog.removeAttribute("aria-describedby");
+        }
+        dialog.showModal();
+      }
+      return lockScroll();
+    }, [open, titleId, descriptionId, hasOwnLabel, hasOwnDescription]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "dialog",
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        id: ctx.contentId,
+        className: (0, import_utils.cn)(className),
+        onCancel: (e) => {
+          onCancel == null ? void 0 : onCancel(e);
+          e.preventDefault();
+          setOpen(false);
+        },
+        onClose: (e) => {
+          var _a2, _b2;
+          onClose == null ? void 0 : onClose(e);
+          if (open) setOpen(false);
+          const active = document.activeElement;
+          if (!active || active === document.body || ((_a2 = innerRef.current) == null ? void 0 : _a2.contains(active))) {
+            (_b2 = previouslyFocused.current) == null ? void 0 : _b2.focus();
+          }
+        },
+        onPointerDown: (e) => {
+          onPointerDown == null ? void 0 : onPointerDown(e);
+          pointerDownOnBackdrop.current = e.target === e.currentTarget;
+        },
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (e.defaultPrevented) return;
+          if (closeOnOutsideClick && pointerDownOnBackdrop.current && e.target === e.currentTarget) {
+            setOpen(false);
+          }
+        }
+      }, props), {
+        children
+      })
+    );
+  }
+);
+DialogContentBase.displayName = "DialogContentBase";
+var DialogCloseIcon = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
+  const ctx = useDialogContext("DialogCloseIcon");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      "aria-label": "Close",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (!e.defaultPrevented) ctx.setOpen(false);
+      },
+      className: (0, import_utils.cn)(
+        "absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-glob-sm text-glob-text-secondary transition-colors hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-4 w-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+    })
+  );
+});
+DialogCloseIcon.displayName = "DialogCloseIcon";
+var DialogContent = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, size, showCloseButton = true, children } = _b, props = __objRest(_b, ["className", "size", "showCloseButton", "children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentBase, __spreadProps(__spreadValues({ ref, className: (0, import_utils.cn)(dialogVariants({ size, className })) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex max-h-[calc(100dvh-2rem)] flex-col gap-4 overflow-y-auto p-6", children: [
+      children,
+      showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogCloseIcon, {})
+    ] }) }));
+  }
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", __spreadValues({ ref, className: (0, import_utils.cn)("flex flex-col gap-1.5 pr-8", className) }, props));
+});
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const ctx = useDialogContext("DialogTitle");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "h2",
+    __spreadValues({
+      ref,
+      id: ctx.titleId,
+      className: (0, import_utils.cn)("text-lg font-semibold leading-none tracking-tight", className)
+    }, props)
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    const ctx = useDialogContext("DialogDescription");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", __spreadValues({ ref, id: ctx.descriptionId, className: (0, import_utils.cn)("text-sm text-glob-text-secondary", className) }, props));
+  }
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogFooter = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", __spreadValues({ ref, className: (0, import_utils.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props));
+});
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { asChild = false, onClick } = _b, props = __objRest(_b, ["asChild", "onClick"]);
+  const ctx = useDialogContext("DialogClose");
+  const Comp = asChild ? import_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    __spreadValues({
+      ref,
+      type: asChild ? void 0 : "button",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (!e.defaultPrevented) ctx.setOpen(false);
+      }
+    }, props)
+  );
+});
+DialogClose.displayName = "DialogClose";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  DialogClose,
+  DialogCloseIcon,
+  DialogContent,
+  DialogContentBase,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  dialogVariants
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/dialog.tsx"],"sourcesContent":["export { Dialog, DialogTrigger, DialogContent, DialogContentBase, DialogCloseIcon, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, dialogVariants } from \"./dialog\"\nexport type { DialogProps, DialogTriggerProps, DialogContentProps, DialogContentBaseProps, DialogCloseIconProps, DialogHeaderProps, DialogTitleProps, DialogDescriptionProps, DialogFooterProps, DialogCloseProps } from \"./dialog\"\n","\"use client\"\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\nimport { Slot, composeRefs } from \"@glob-ui/slot\"\n\n// Scroll lock shared by every open dialog. Compensates the scrollbar width so the page does not shift.\nlet lockCount = 0\nlet savedStyles: { overflow: string; paddingRight: string } | null = null\n\nfunction lockScroll() {\n  const html = document.documentElement\n  if (lockCount === 0) {\n    const scrollbarWidth = window.innerWidth - html.clientWidth\n    savedStyles = { overflow: html.style.overflow, paddingRight: html.style.paddingRight }\n    if (scrollbarWidth > 0) {\n      const current = parseFloat(getComputedStyle(html).paddingRight) || 0\n      html.style.paddingRight = `${current + scrollbarWidth}px`\n    }\n    html.style.overflow = \"hidden\"\n  }\n  lockCount++\n  return () => {\n    lockCount--\n    if (lockCount === 0 && savedStyles) {\n      html.style.overflow = savedStyles.overflow\n      html.style.paddingRight = savedStyles.paddingRight\n      savedStyles = null\n    }\n  }\n}\n\ninterface DialogContextValue {\n  open: boolean\n  setOpen: (open: boolean) => void\n  contentId: string\n  titleId: string\n  descriptionId: string\n  closeOnOutsideClick: boolean\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null)\n\nfunction useDialogContext(part: string) {\n  const ctx = useContext(DialogContext)\n  if (!ctx) throw new Error(`${part} must be used inside Dialog, Sheet or AlertDialog`)\n  return ctx\n}\n\nexport interface DialogProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Close when the backdrop is clicked. */\n  closeOnOutsideClick?: boolean\n  children?: React.ReactNode\n}\n\nfunction Dialog({ open, defaultOpen = false, onOpenChange, closeOnOutsideClick = true, children }: DialogProps) {\n  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange)\n  const baseId = useId()\n\n  return (\n    <DialogContext.Provider\n      value={{\n        open: isOpen,\n        setOpen,\n        contentId: `${baseId}-content`,\n        titleId: `${baseId}-title`,\n        descriptionId: `${baseId}-description`,\n        closeOnOutsideClick,\n      }}\n    >\n      {children}\n    </DialogContext.Provider>\n  )\n}\nDialog.displayName = \"Dialog\"\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nconst DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild = false, onClick, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogTrigger\")\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : \"button\"}\n        aria-haspopup=\"dialog\"\n        aria-expanded={ctx.open}\n        aria-controls={ctx.open ? ctx.contentId : undefined}\n        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) ctx.setOpen(true)\n        }}\n        {...props}\n      />\n    )\n  }\n)\nDialogTrigger.displayName = \"DialogTrigger\"\n\nexport const dialogVariants = cva(\n  [\n    \"m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] overflow-visible rounded-glob-lg border border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md\",\n    // Enter/exit. @starting-style animates the entry; allow-discrete keeps display/overlay alive\n    // during the exit. Browsers without them open and close without animation.\n    \"scale-95 opacity-0 transition-[opacity,scale,overlay,display] transition-discrete duration-200 ease-out\",\n    \"open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0\",\n    \"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200\",\n    \"open:backdrop:opacity-100 starting:open:backdrop:opacity-0\",\n    \"motion-reduce:transition-none motion-reduce:backdrop:transition-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        md: \"max-w-lg\",\n        lg: \"max-w-2xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type DialogContentBaseProps = React.DialogHTMLAttributes<HTMLDialogElement>\n\n/**\n * The modal behaviour of Dialog with no styles and no layout: showModal, the shared scroll lock,\n * Esc, backdrop click (see closeOnOutsideClick), focus return and aria-labelledby/describedby.\n * Build your own modal on the same behaviour. Sheet and AlertDialog are built on it.\n */\nconst DialogContentBase = forwardRef<HTMLDialogElement, DialogContentBaseProps>(\n  ({ className, children, onCancel, onClose, onPointerDown, onClick, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogContent\")\n    const { open, setOpen, titleId, descriptionId, closeOnOutsideClick } = ctx\n    const innerRef = useRef<HTMLDialogElement>(null)\n    const previouslyFocused = useRef<HTMLElement | null>(null)\n    const pointerDownOnBackdrop = useRef(false)\n    const mergedRef = useMemo(() => composeRefs(ref, innerRef), [ref])\n    const hasOwnLabel = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined\n    const hasOwnDescription = props[\"aria-describedby\"] !== undefined\n\n    useEffect(() => {\n      const dialog = innerRef.current\n      if (!dialog) return\n      if (!open) {\n        if (dialog.open) dialog.close()\n        return\n      }\n      if (!dialog.open) {\n        previouslyFocused.current = document.activeElement as HTMLElement | null\n        // Point at Title/Description only if they are rendered, so the references never dangle.\n        if (!hasOwnLabel) {\n          if (document.getElementById(titleId)) dialog.setAttribute(\"aria-labelledby\", titleId)\n          else dialog.removeAttribute(\"aria-labelledby\")\n        }\n        if (!hasOwnDescription) {\n          if (document.getElementById(descriptionId)) dialog.setAttribute(\"aria-describedby\", descriptionId)\n          else dialog.removeAttribute(\"aria-describedby\")\n        }\n        dialog.showModal()\n      }\n      return lockScroll()\n    }, [open, titleId, descriptionId, hasOwnLabel, hasOwnDescription])\n\n    return (\n      <dialog\n        ref={mergedRef}\n        id={ctx.contentId}\n        className={cn(className)}\n        // Esc: keep React state as the source of truth (controlled dialogs may refuse to close).\n        onCancel={(e) => {\n          onCancel?.(e)\n          e.preventDefault()\n          setOpen(false)\n        }}\n        // Closed by the browser anyway (e.g. a repeated Esc that cannot be cancelled): sync state.\n        onClose={(e) => {\n          onClose?.(e)\n          if (open) setOpen(false)\n          const active = document.activeElement\n          if (!active || active === document.body || innerRef.current?.contains(active)) {\n            previouslyFocused.current?.focus()\n          }\n        }}\n        // A click lands on the <dialog> element itself only over the backdrop: content fills it.\n        onPointerDown={(e) => {\n          onPointerDown?.(e)\n          pointerDownOnBackdrop.current = e.target === e.currentTarget\n        }}\n        onClick={(e) => {\n          onClick?.(e)\n          if (e.defaultPrevented) return\n          if (closeOnOutsideClick && pointerDownOnBackdrop.current && e.target === e.currentTarget) {\n            setOpen(false)\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </dialog>\n    )\n  }\n)\nDialogContentBase.displayName = \"DialogContentBase\"\n\nexport type DialogCloseIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>\n\n/** The X button in the top-right corner. Closes the surrounding Dialog, Sheet or AlertDialog. */\nconst DialogCloseIcon = forwardRef<HTMLButtonElement, DialogCloseIconProps>(({ className, onClick, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogCloseIcon\")\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Close\"\n      onClick={(e) => {\n        onClick?.(e)\n        if (!e.defaultPrevented) ctx.setOpen(false)\n      }}\n      className={cn(\n        \"absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-glob-sm text-glob-text-secondary transition-colors hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\",\n        className\n      )}\n      {...props}\n    >\n      <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-4 w-4\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  )\n})\nDialogCloseIcon.displayName = \"DialogCloseIcon\"\n\nexport interface DialogContentProps\n  extends React.DialogHTMLAttributes<HTMLDialogElement>,\n    VariantProps<typeof dialogVariants> {\n  /** Shows an X button in the top-right corner. */\n  showCloseButton?: boolean\n}\n\nconst DialogContent = forwardRef<HTMLDialogElement, DialogContentProps>(\n  ({ className, size, showCloseButton = true, children, ...props }, ref) => (\n    <DialogContentBase ref={ref} className={cn(dialogVariants({ size, className }))} {...props}>\n      <div className=\"relative flex max-h-[calc(100dvh-2rem)] flex-col gap-4 overflow-y-auto p-6\">\n        {children}\n        {showCloseButton && <DialogCloseIcon />}\n      </div>\n    </DialogContentBase>\n  )\n)\nDialogContent.displayName = \"DialogContent\"\n\nexport type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>\n\nconst DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex flex-col gap-1.5 pr-8\", className)} {...props} />\n))\nDialogHeader.displayName = \"DialogHeader\"\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>\n\nconst DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(({ className, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogTitle\")\n  return (\n    <h2\n      ref={ref}\n      id={ctx.titleId}\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      {...props}\n    />\n  )\n})\nDialogTitle.displayName = \"DialogTitle\"\n\nexport type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>\n\nconst DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(\n  ({ className, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogDescription\")\n    return (\n      <p ref={ref} id={ctx.descriptionId} className={cn(\"text-sm text-glob-text-secondary\", className)} {...props} />\n    )\n  }\n)\nDialogDescription.displayName = \"DialogDescription\"\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>\n\nconst DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)} {...props} />\n))\nDialogFooter.displayName = \"DialogFooter\"\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nconst DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(({ asChild = false, onClick, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogClose\")\n  const Comp = asChild ? Slot : \"button\"\n  return (\n    <Comp\n      ref={ref}\n      type={asChild ? undefined : \"button\"}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e)\n        if (!e.defaultPrevented) ctx.setOpen(false)\n      }}\n      {...props}\n    />\n  )\n})\nDialogClose.displayName = \"DialogClose\"\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogContentBase,\n  DialogCloseIcon,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  DialogClose,\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/index.mjs

@@ -0,0 +1,307 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/dialog.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@glob-ui/utils";
+import { useControllableState } from "@glob-ui/hooks";
+import { Slot, composeRefs } from "@glob-ui/slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+var lockCount = 0;
+var savedStyles = null;
+function lockScroll() {
+  const html = document.documentElement;
+  if (lockCount === 0) {
+    const scrollbarWidth = window.innerWidth - html.clientWidth;
+    savedStyles = { overflow: html.style.overflow, paddingRight: html.style.paddingRight };
+    if (scrollbarWidth > 0) {
+      const current = parseFloat(getComputedStyle(html).paddingRight) || 0;
+      html.style.paddingRight = `${current + scrollbarWidth}px`;
+    }
+    html.style.overflow = "hidden";
+  }
+  lockCount++;
+  return () => {
+    lockCount--;
+    if (lockCount === 0 && savedStyles) {
+      html.style.overflow = savedStyles.overflow;
+      html.style.paddingRight = savedStyles.paddingRight;
+      savedStyles = null;
+    }
+  };
+}
+var DialogContext = createContext(null);
+function useDialogContext(part) {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error(`${part} must be used inside Dialog, Sheet or AlertDialog`);
+  return ctx;
+}
+function Dialog({ open, defaultOpen = false, onOpenChange, closeOnOutsideClick = true, children }) {
+  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
+  const baseId = useId();
+  return /* @__PURE__ */ jsx(
+    DialogContext.Provider,
+    {
+      value: {
+        open: isOpen,
+        setOpen,
+        contentId: `${baseId}-content`,
+        titleId: `${baseId}-title`,
+        descriptionId: `${baseId}-description`,
+        closeOnOutsideClick
+      },
+      children
+    }
+  );
+}
+Dialog.displayName = "Dialog";
+var DialogTrigger = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild = false, onClick } = _b, props = __objRest(_b, ["asChild", "onClick"]);
+    const ctx = useDialogContext("DialogTrigger");
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      __spreadValues({
+        ref,
+        type: asChild ? void 0 : "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.open ? ctx.contentId : void 0,
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (!e.defaultPrevented) ctx.setOpen(true);
+        }
+      }, props)
+    );
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+var dialogVariants = cva(
+  [
+    "m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] overflow-visible rounded-glob-lg border border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md",
+    // Enter/exit. @starting-style animates the entry; allow-discrete keeps display/overlay alive
+    // during the exit. Browsers without them open and close without animation.
+    "scale-95 opacity-0 transition-[opacity,scale,overlay,display] transition-discrete duration-200 ease-out",
+    "open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0",
+    "backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200",
+    "open:backdrop:opacity-100 starting:open:backdrop:opacity-0",
+    "motion-reduce:transition-none motion-reduce:backdrop:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-lg",
+        lg: "max-w-2xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var DialogContentBase = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, children, onCancel, onClose, onPointerDown, onClick } = _b, props = __objRest(_b, ["className", "children", "onCancel", "onClose", "onPointerDown", "onClick"]);
+    const ctx = useDialogContext("DialogContent");
+    const { open, setOpen, titleId, descriptionId, closeOnOutsideClick } = ctx;
+    const innerRef = useRef(null);
+    const previouslyFocused = useRef(null);
+    const pointerDownOnBackdrop = useRef(false);
+    const mergedRef = useMemo(() => composeRefs(ref, innerRef), [ref]);
+    const hasOwnLabel = props["aria-labelledby"] !== void 0 || props["aria-label"] !== void 0;
+    const hasOwnDescription = props["aria-describedby"] !== void 0;
+    useEffect(() => {
+      const dialog = innerRef.current;
+      if (!dialog) return;
+      if (!open) {
+        if (dialog.open) dialog.close();
+        return;
+      }
+      if (!dialog.open) {
+        previouslyFocused.current = document.activeElement;
+        if (!hasOwnLabel) {
+          if (document.getElementById(titleId)) dialog.setAttribute("aria-labelledby", titleId);
+          else dialog.removeAttribute("aria-labelledby");
+        }
+        if (!hasOwnDescription) {
+          if (document.getElementById(descriptionId)) dialog.setAttribute("aria-describedby", descriptionId);
+          else dialog.removeAttribute("aria-describedby");
+        }
+        dialog.showModal();
+      }
+      return lockScroll();
+    }, [open, titleId, descriptionId, hasOwnLabel, hasOwnDescription]);
+    return /* @__PURE__ */ jsx(
+      "dialog",
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        id: ctx.contentId,
+        className: cn(className),
+        onCancel: (e) => {
+          onCancel == null ? void 0 : onCancel(e);
+          e.preventDefault();
+          setOpen(false);
+        },
+        onClose: (e) => {
+          var _a2, _b2;
+          onClose == null ? void 0 : onClose(e);
+          if (open) setOpen(false);
+          const active = document.activeElement;
+          if (!active || active === document.body || ((_a2 = innerRef.current) == null ? void 0 : _a2.contains(active))) {
+            (_b2 = previouslyFocused.current) == null ? void 0 : _b2.focus();
+          }
+        },
+        onPointerDown: (e) => {
+          onPointerDown == null ? void 0 : onPointerDown(e);
+          pointerDownOnBackdrop.current = e.target === e.currentTarget;
+        },
+        onClick: (e) => {
+          onClick == null ? void 0 : onClick(e);
+          if (e.defaultPrevented) return;
+          if (closeOnOutsideClick && pointerDownOnBackdrop.current && e.target === e.currentTarget) {
+            setOpen(false);
+          }
+        }
+      }, props), {
+        children
+      })
+    );
+  }
+);
+DialogContentBase.displayName = "DialogContentBase";
+var DialogCloseIcon = forwardRef((_a, ref) => {
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
+  const ctx = useDialogContext("DialogCloseIcon");
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      "aria-label": "Close",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (!e.defaultPrevented) ctx.setOpen(false);
+      },
+      className: cn(
+        "absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-glob-sm text-glob-text-secondary transition-colors hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+    })
+  );
+});
+DialogCloseIcon.displayName = "DialogCloseIcon";
+var DialogContent = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, showCloseButton = true, children } = _b, props = __objRest(_b, ["className", "size", "showCloseButton", "children"]);
+    return /* @__PURE__ */ jsx(DialogContentBase, __spreadProps(__spreadValues({ ref, className: cn(dialogVariants({ size, className })) }, props), { children: /* @__PURE__ */ jsxs("div", { className: "relative flex max-h-[calc(100dvh-2rem)] flex-col gap-4 overflow-y-auto p-6", children: [
+      children,
+      showCloseButton && /* @__PURE__ */ jsx(DialogCloseIcon, {})
+    ] }) }));
+  }
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("flex flex-col gap-1.5 pr-8", className) }, props));
+});
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const ctx = useDialogContext("DialogTitle");
+  return /* @__PURE__ */ jsx(
+    "h2",
+    __spreadValues({
+      ref,
+      id: ctx.titleId,
+      className: cn("text-lg font-semibold leading-none tracking-tight", className)
+    }, props)
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    const ctx = useDialogContext("DialogDescription");
+    return /* @__PURE__ */ jsx("p", __spreadValues({ ref, id: ctx.descriptionId, className: cn("text-sm text-glob-text-secondary", className) }, props));
+  }
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogFooter = forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props));
+});
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = forwardRef((_a, ref) => {
+  var _b = _a, { asChild = false, onClick } = _b, props = __objRest(_b, ["asChild", "onClick"]);
+  const ctx = useDialogContext("DialogClose");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      ref,
+      type: asChild ? void 0 : "button",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (!e.defaultPrevented) ctx.setOpen(false);
+      }
+    }, props)
+  );
+});
+DialogClose.displayName = "DialogClose";
+export {
+  Dialog,
+  DialogClose,
+  DialogCloseIcon,
+  DialogContent,
+  DialogContentBase,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  dialogVariants
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\nimport { Slot, composeRefs } from \"@glob-ui/slot\"\n\n// Scroll lock shared by every open dialog. Compensates the scrollbar width so the page does not shift.\nlet lockCount = 0\nlet savedStyles: { overflow: string; paddingRight: string } | null = null\n\nfunction lockScroll() {\n  const html = document.documentElement\n  if (lockCount === 0) {\n    const scrollbarWidth = window.innerWidth - html.clientWidth\n    savedStyles = { overflow: html.style.overflow, paddingRight: html.style.paddingRight }\n    if (scrollbarWidth > 0) {\n      const current = parseFloat(getComputedStyle(html).paddingRight) || 0\n      html.style.paddingRight = `${current + scrollbarWidth}px`\n    }\n    html.style.overflow = \"hidden\"\n  }\n  lockCount++\n  return () => {\n    lockCount--\n    if (lockCount === 0 && savedStyles) {\n      html.style.overflow = savedStyles.overflow\n      html.style.paddingRight = savedStyles.paddingRight\n      savedStyles = null\n    }\n  }\n}\n\ninterface DialogContextValue {\n  open: boolean\n  setOpen: (open: boolean) => void\n  contentId: string\n  titleId: string\n  descriptionId: string\n  closeOnOutsideClick: boolean\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null)\n\nfunction useDialogContext(part: string) {\n  const ctx = useContext(DialogContext)\n  if (!ctx) throw new Error(`${part} must be used inside Dialog, Sheet or AlertDialog`)\n  return ctx\n}\n\nexport interface DialogProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Close when the backdrop is clicked. */\n  closeOnOutsideClick?: boolean\n  children?: React.ReactNode\n}\n\nfunction Dialog({ open, defaultOpen = false, onOpenChange, closeOnOutsideClick = true, children }: DialogProps) {\n  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange)\n  const baseId = useId()\n\n  return (\n    <DialogContext.Provider\n      value={{\n        open: isOpen,\n        setOpen,\n        contentId: `${baseId}-content`,\n        titleId: `${baseId}-title`,\n        descriptionId: `${baseId}-description`,\n        closeOnOutsideClick,\n      }}\n    >\n      {children}\n    </DialogContext.Provider>\n  )\n}\nDialog.displayName = \"Dialog\"\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nconst DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild = false, onClick, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogTrigger\")\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : \"button\"}\n        aria-haspopup=\"dialog\"\n        aria-expanded={ctx.open}\n        aria-controls={ctx.open ? ctx.contentId : undefined}\n        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) ctx.setOpen(true)\n        }}\n        {...props}\n      />\n    )\n  }\n)\nDialogTrigger.displayName = \"DialogTrigger\"\n\nexport const dialogVariants = cva(\n  [\n    \"m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] overflow-visible rounded-glob-lg border border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md\",\n    // Enter/exit. @starting-style animates the entry; allow-discrete keeps display/overlay alive\n    // during the exit. Browsers without them open and close without animation.\n    \"scale-95 opacity-0 transition-[opacity,scale,overlay,display] transition-discrete duration-200 ease-out\",\n    \"open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0\",\n    \"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200\",\n    \"open:backdrop:opacity-100 starting:open:backdrop:opacity-0\",\n    \"motion-reduce:transition-none motion-reduce:backdrop:transition-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        md: \"max-w-lg\",\n        lg: \"max-w-2xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type DialogContentBaseProps = React.DialogHTMLAttributes<HTMLDialogElement>\n\n/**\n * The modal behaviour of Dialog with no styles and no layout: showModal, the shared scroll lock,\n * Esc, backdrop click (see closeOnOutsideClick), focus return and aria-labelledby/describedby.\n * Build your own modal on the same behaviour. Sheet and AlertDialog are built on it.\n */\nconst DialogContentBase = forwardRef<HTMLDialogElement, DialogContentBaseProps>(\n  ({ className, children, onCancel, onClose, onPointerDown, onClick, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogContent\")\n    const { open, setOpen, titleId, descriptionId, closeOnOutsideClick } = ctx\n    const innerRef = useRef<HTMLDialogElement>(null)\n    const previouslyFocused = useRef<HTMLElement | null>(null)\n    const pointerDownOnBackdrop = useRef(false)\n    const mergedRef = useMemo(() => composeRefs(ref, innerRef), [ref])\n    const hasOwnLabel = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined\n    const hasOwnDescription = props[\"aria-describedby\"] !== undefined\n\n    useEffect(() => {\n      const dialog = innerRef.current\n      if (!dialog) return\n      if (!open) {\n        if (dialog.open) dialog.close()\n        return\n      }\n      if (!dialog.open) {\n        previouslyFocused.current = document.activeElement as HTMLElement | null\n        // Point at Title/Description only if they are rendered, so the references never dangle.\n        if (!hasOwnLabel) {\n          if (document.getElementById(titleId)) dialog.setAttribute(\"aria-labelledby\", titleId)\n          else dialog.removeAttribute(\"aria-labelledby\")\n        }\n        if (!hasOwnDescription) {\n          if (document.getElementById(descriptionId)) dialog.setAttribute(\"aria-describedby\", descriptionId)\n          else dialog.removeAttribute(\"aria-describedby\")\n        }\n        dialog.showModal()\n      }\n      return lockScroll()\n    }, [open, titleId, descriptionId, hasOwnLabel, hasOwnDescription])\n\n    return (\n      <dialog\n        ref={mergedRef}\n        id={ctx.contentId}\n        className={cn(className)}\n        // Esc: keep React state as the source of truth (controlled dialogs may refuse to close).\n        onCancel={(e) => {\n          onCancel?.(e)\n          e.preventDefault()\n          setOpen(false)\n        }}\n        // Closed by the browser anyway (e.g. a repeated Esc that cannot be cancelled): sync state.\n        onClose={(e) => {\n          onClose?.(e)\n          if (open) setOpen(false)\n          const active = document.activeElement\n          if (!active || active === document.body || innerRef.current?.contains(active)) {\n            previouslyFocused.current?.focus()\n          }\n        }}\n        // A click lands on the <dialog> element itself only over the backdrop: content fills it.\n        onPointerDown={(e) => {\n          onPointerDown?.(e)\n          pointerDownOnBackdrop.current = e.target === e.currentTarget\n        }}\n        onClick={(e) => {\n          onClick?.(e)\n          if (e.defaultPrevented) return\n          if (closeOnOutsideClick && pointerDownOnBackdrop.current && e.target === e.currentTarget) {\n            setOpen(false)\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </dialog>\n    )\n  }\n)\nDialogContentBase.displayName = \"DialogContentBase\"\n\nexport type DialogCloseIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>\n\n/** The X button in the top-right corner. Closes the surrounding Dialog, Sheet or AlertDialog. */\nconst DialogCloseIcon = forwardRef<HTMLButtonElement, DialogCloseIconProps>(({ className, onClick, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogCloseIcon\")\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Close\"\n      onClick={(e) => {\n        onClick?.(e)\n        if (!e.defaultPrevented) ctx.setOpen(false)\n      }}\n      className={cn(\n        \"absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-glob-sm text-glob-text-secondary transition-colors hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\",\n        className\n      )}\n      {...props}\n    >\n      <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-4 w-4\">\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  )\n})\nDialogCloseIcon.displayName = \"DialogCloseIcon\"\n\nexport interface DialogContentProps\n  extends React.DialogHTMLAttributes<HTMLDialogElement>,\n    VariantProps<typeof dialogVariants> {\n  /** Shows an X button in the top-right corner. */\n  showCloseButton?: boolean\n}\n\nconst DialogContent = forwardRef<HTMLDialogElement, DialogContentProps>(\n  ({ className, size, showCloseButton = true, children, ...props }, ref) => (\n    <DialogContentBase ref={ref} className={cn(dialogVariants({ size, className }))} {...props}>\n      <div className=\"relative flex max-h-[calc(100dvh-2rem)] flex-col gap-4 overflow-y-auto p-6\">\n        {children}\n        {showCloseButton && <DialogCloseIcon />}\n      </div>\n    </DialogContentBase>\n  )\n)\nDialogContent.displayName = \"DialogContent\"\n\nexport type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>\n\nconst DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex flex-col gap-1.5 pr-8\", className)} {...props} />\n))\nDialogHeader.displayName = \"DialogHeader\"\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>\n\nconst DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(({ className, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogTitle\")\n  return (\n    <h2\n      ref={ref}\n      id={ctx.titleId}\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      {...props}\n    />\n  )\n})\nDialogTitle.displayName = \"DialogTitle\"\n\nexport type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>\n\nconst DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(\n  ({ className, ...props }, ref) => {\n    const ctx = useDialogContext(\"DialogDescription\")\n    return (\n      <p ref={ref} id={ctx.descriptionId} className={cn(\"text-sm text-glob-text-secondary\", className)} {...props} />\n    )\n  }\n)\nDialogDescription.displayName = \"DialogDescription\"\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>\n\nconst DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)} {...props} />\n))\nDialogFooter.displayName = \"DialogFooter\"\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nconst DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(({ asChild = false, onClick, ...props }, ref) => {\n  const ctx = useDialogContext(\"DialogClose\")\n  const Comp = asChild ? Slot : \"button\"\n  return (\n    <Comp\n      ref={ref}\n      type={asChild ? undefined : \"button\"}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e)\n        if (!e.defaultPrevented) ctx.setOpen(false)\n      }}\n      {...props}\n    />\n  )\n})\nDialogClose.displayName = \"DialogClose\"\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogContentBase,\n  DialogCloseIcon,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  DialogClose,\n}\n"],"mappings":"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","names":["_a","_b"]}

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@glob-ui/dialog",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/hooks": "0.2.0",
+    "@glob-ui/slot": "0.2.0",
+    "@glob-ui/utils": "0.2.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A modal dialog on the native `<dialog>` element. Focus moves in, Escape closes it, and focus returns to the trigger. Build your own modal on the same behaviour with `DialogContentBase`.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "dialog"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/dialog"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }