@financedistrict/apps-ui 0.1.0

package/dist/dialog.cjs

@@ -0,0 +1,441 @@
+'use strict';
+
+var React2 = require('react');
+var reactDom = require('react-dom');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/dialog/Dialog.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var scrollbarVariants = classVarianceAuthority.cva(
+  [
+    // Firefox (approximate): thin themed scrollbar over a transparent track.
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:var(--color-card-foreground-muted)_transparent]",
+    // WebKit gutter — 12px, both axes so the utility is axis-agnostic.
+    "[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar]:h-3",
+    // WebKit thumb — 4px pill: a 4px transparent border + content-box clip
+    // leaves a 4px-wide fill centred in the 12px gutter.
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent",
+    "[&::-webkit-scrollbar-thumb]:bg-clip-content",
+    "[&::-webkit-scrollbar-thumb]:bg-card-foreground-muted",
+    // WebKit track — transparent by default (stroke is the `stroke` variant).
+    "[&::-webkit-scrollbar-track]:bg-transparent"
+  ],
+  {
+    variants: {
+      stroke: {
+        // 1px leading-edge track stroke (Figma `stroke`, on by default).
+        true: "[&::-webkit-scrollbar-track]:border-l [&::-webkit-scrollbar-track]:border-card-border",
+        false: ""
+      }
+    },
+    defaultVariants: { stroke: true }
+  }
+);
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  );
+}
+function useFocusTrap({
+  active,
+  containerRef
+}) {
+  React2__namespace.useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const initial = getFocusableElements(container)[0] ?? container;
+    initial.focus();
+    const body = document.body;
+    const previousOverflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const activeEl = document.activeElement;
+      if (event.shiftKey) {
+        if (activeEl === first || !container.contains(activeEl)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (activeEl === last || !container.contains(activeEl)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      body.style.overflow = previousOverflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [active, containerRef]);
+}
+var dialogOverlayVariants = classVarianceAuthority.cva([
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+  "bg-overlay"
+]);
+var dialogContentVariants = classVarianceAuthority.cva([
+  "relative flex w-[438px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] flex-col gap-6",
+  "rounded-md border border-border bg-card-background p-6 shadow-s",
+  // Programmatic-focus fallback target (no visible ring when focused as a last
+  // resort by the focus trap — the card is not an interactive control).
+  "outline-none"
+]);
+var dialogHeaderVariants = classVarianceAuthority.cva([
+  "flex shrink-0 flex-col items-start gap-4"
+]);
+var dialogHeaderIconVariants = classVarianceAuthority.cva([
+  "flex items-center text-foreground [&_svg]:size-8 [&_svg]:shrink-0"
+]);
+var dialogHeaderTextVariants = classVarianceAuthority.cva(["flex w-full flex-col gap-2"]);
+var dialogCloseButtonVariants = classVarianceAuthority.cva([
+  "absolute right-6 top-6 flex cursor-pointer items-center justify-center rounded-xs",
+  "text-foreground-muted transition-colors hover:text-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  // TW4 needs `outline-solid` to render a solid ring (a bare `outline` won't).
+  "outline-none focus-visible:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var dialogBodyVariants = classVarianceAuthority.cva([
+  "min-h-0 flex-1 overflow-y-auto text-foreground"
+]);
+var dialogFooterVariants = classVarianceAuthority.cva([
+  "flex w-full shrink-0 gap-2 [&>*]:flex-1 [&_button]:w-full"
+]);
+var DialogContext = React2__namespace.createContext(null);
+function useDialogContext(part) {
+  const context = React2__namespace.useContext(DialogContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Dialog.Root>`);
+  }
+  return context;
+}
+function DialogRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React2__namespace.useState(defaultOpen);
+  const [hasDescription, setHasDescription] = React2__namespace.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const reactId = React2__namespace.useId();
+  const titleId = `${reactId}-title`;
+  const descriptionId = `${reactId}-description`;
+  const setOpen = React2__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const value = {
+    open,
+    setOpen,
+    dismissable,
+    titleId,
+    descriptionId,
+    hasDescription,
+    setHasDescription
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value, children });
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TriggerLike({
+  asChild = false,
+  onActivate,
+  dataSlot,
+  children,
+  className,
+  type,
+  ...props
+}) {
+  if (asChild) {
+    if (!React2__namespace.isValidElement(children)) {
+      throw new Error(
+        `${dataSlot}: \`asChild\` requires a single React element child`
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    return React2__namespace.cloneElement(child, {
+      ...props,
+      ...childProps,
+      "data-slot": dataSlot,
+      onClick: (event) => {
+        childOnClick?.(event);
+        if (!event.defaultPrevented) onActivate();
+      },
+      className: cn(className, childProps.className),
+      ref: (node) => {
+        setRef(childProps.ref, node);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: type ?? "button",
+      "data-slot": dataSlot,
+      className,
+      onClick: () => onActivate(),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTrigger({ asChild = false, ...props }) {
+  const { open, setOpen } = useDialogContext("Dialog.Trigger");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-trigger",
+      onActivate: () => setOpen(true),
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      ...props
+    }
+  );
+}
+function DialogClose({ asChild = false, ...props }) {
+  const { setOpen } = useDialogContext("Dialog.Close");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-close",
+      onActivate: () => setOpen(false),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ref,
+  onKeyDown,
+  ...props
+}) {
+  const { open, setOpen, dismissable, titleId, descriptionId, hasDescription } = useDialogContext("Dialog.Content");
+  const cardRef = React2__namespace.useRef(null);
+  useFocusTrap({ active: open, containerRef: cardRef });
+  React2__namespace.useEffect(() => {
+    if (!open || !dismissable) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, dismissable, setOpen]);
+  if (!open) return null;
+  const setCardRef = (node) => {
+    cardRef.current = node;
+    setRef(ref, node);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "dialog-overlay",
+        className: dialogOverlayVariants(),
+        onClick: (event) => {
+          if (dismissable && event.target === event.currentTarget) {
+            setOpen(false);
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setCardRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": hasDescription ? descriptionId : void 0,
+            tabIndex: -1,
+            "data-slot": "dialog-content",
+            className: cn(dialogContentVariants(), className),
+            onKeyDown,
+            ...props,
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DialogHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  className,
+  ref,
+  ...props
+}) {
+  const { titleId, descriptionId, setHasDescription, setOpen } = useDialogContext("Dialog.Header");
+  const hasDescription = description != null;
+  React2__namespace.useEffect(() => {
+    if (!hasDescription) return;
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [hasDescription, setHasDescription]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-header",
+      className: cn(dialogHeaderVariants(), className),
+      ...props,
+      children: [
+        icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "dialog-header-icon",
+            "aria-hidden": "true",
+            className: dialogHeaderIconVariants(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.IconContext.Provider, { value: { weight: "fill" }, children: icon })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              dialogHeaderTextVariants(),
+              // Reserve right space for the corner X only when it would collide: an
+              // icon-less header puts the title on the X's row. With an icon the
+              // title sits below the X, so no reservation is needed.
+              showClose && icon == null && "pr-8"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "display-04 text-foreground", children: title }),
+              hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descriptionId, className: "body-03 text-foreground-muted", children: description })
+            ]
+          }
+        ),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "dialog-header-close",
+            "aria-label": "Close",
+            className: dialogCloseButtonVariants(),
+            onClick: () => setOpen(false),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DialogBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-body",
+      className: cn(dialogBodyVariants(), scrollbarVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function DialogFooter({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-footer",
+      className: cn(dialogFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose
+};
+
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogRoot = DialogRoot;
+exports.DialogTrigger = DialogTrigger;
+exports.dialogBodyVariants = dialogBodyVariants;
+exports.dialogCloseButtonVariants = dialogCloseButtonVariants;
+exports.dialogContentVariants = dialogContentVariants;
+exports.dialogFooterVariants = dialogFooterVariants;
+exports.dialogHeaderIconVariants = dialogHeaderIconVariants;
+exports.dialogHeaderTextVariants = dialogHeaderTextVariants;
+exports.dialogHeaderVariants = dialogHeaderVariants;
+exports.dialogOverlayVariants = dialogOverlayVariants;
+exports.getFocusableElements = getFocusableElements;
+exports.useFocusTrap = useFocusTrap;

package/dist/dialog.d.cts

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface DialogRootProps {
+    /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Ignored if `open` is provided. */
+    defaultOpen?: boolean;
+    /** Called with the next open state from trigger/close/Escape/backdrop. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether Escape and a backdrop click dismiss the dialog. `false` forces the
+     * user through an explicit control (a footer button / the header X, which
+     * always close). Default `true`.
+     */
+    dismissable?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * State owner + context provider for the compound `Dialog`. Renders no DOM of
+ * its own. Controlled via `open`/`onOpenChange`, or uncontrolled via
+ * `defaultOpen`. Generates the `aria-labelledby`/`aria-describedby` ids that
+ * `Dialog.Header` and `Dialog.Content` share, so the wiring cannot drift.
+ */
+declare function DialogRoot({ open: openProp, defaultOpen, onOpenChange, dismissable, children, }: DialogRootProps): React.JSX.Element;
+interface TriggerLikeProps extends Omit<React.ComponentProps<"button">, "onClick"> {
+    /** Render the single child element as the root instead of a `<button>`. */
+    asChild?: boolean;
+}
+interface DialogTriggerProps extends TriggerLikeProps {
+}
+/**
+ * Optional button that opens the dialog. `asChild` adopts a passed element
+ * (e.g. `<Button>`). Wires `aria-haspopup="dialog"` + `aria-expanded`. Skip it
+ * for pure controlled usage.
+ */
+declare function DialogTrigger({ asChild, ...props }: DialogTriggerProps): React.JSX.Element;
+interface DialogCloseProps extends TriggerLikeProps {
+}
+/**
+ * Optional button that closes the dialog (e.g. wrapping a footer Cancel
+ * button). `asChild` adopts a passed element. Always closes, independent of
+ * `dismissable` (that only gates Escape + backdrop).
+ */
+declare function DialogClose({ asChild, ...props }: DialogCloseProps): React.JSX.Element;
+interface DialogContentProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The portaled overlay layer — mounts via `createPortal` → `document.body`
+ * (escaping `overflow`/stacking ancestors, like `SelectListbox`) only while
+ * open. Renders the backdrop + the centred card, and owns the dialog semantics
+ * (`role="dialog"`, `aria-modal`, `aria-labelledby`/`aria-describedby`), the
+ * focus trap + return + scroll lock (`useFocusTrap`), Escape, and backdrop
+ * dismiss. Forwards `ref` to the card element.
+ */
+declare function DialogContent({ className, children, ref, onKeyDown, ...props }: DialogContentProps): React.ReactPortal | null;
+interface DialogHeaderProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /**
+     * Decorative 32px icon (rendered `aria-hidden`). Hidden when omitted.
+     *
+     * **Rule: use a filled icon here.** The slot defaults Phosphor icons to
+     * `weight="fill"` via `IconContext`, so a plain `<SomeIcon />` renders filled
+     * with no per-call weight needed — matching the dialog's visual language. An
+     * explicit `weight` on the passed icon still wins, but line/regular weights are
+     * off-pattern for this slot. The top-right close (X) button is the sole
+     * exception and stays a regular-weight line icon.
+     */
+    icon?: React.ReactNode;
+    /** Title — becomes the dialog's `aria-labelledby` target (`display-04`). */
+    title: React.ReactNode;
+    /** Optional description — becomes `aria-describedby` (`body-03`, muted). */
+    description?: React.ReactNode;
+    /**
+     * Show the X close button, positioned against the card at 24px from its top and
+     * right (absolute — independent of the icon). Shown by **default**; pass
+     * `false` to hide it. Always closes, independent of `dismissable`.
+     */
+    showClose?: boolean;
+}
+/**
+ * Header block: an optional decorative icon, the title (registers the
+ * `aria-labelledby` id), an optional description (registers `aria-describedby`),
+ * and an optional X close button. Ids come from `Dialog.Root` context so the
+ * ARIA wiring stays in lock-step with `Dialog.Content`.
+ */
+declare function DialogHeader({ icon, title, description, showClose, className, ref, ...props }: DialogHeaderProps): React.JSX.Element;
+interface DialogBodyProps extends React.ComponentProps<"div"> {
+}
+/**
+ * Flexible content slot — inputs or any composition. Sizes to content and, in
+ * the card's bounded flex column, becomes the internal scroll region so the
+ * dialog never exceeds the viewport (custom scrollbar via `scrollbarVariants`).
+ */
+declare function DialogBody({ className, children, ref, ...props }: DialogBodyProps): React.JSX.Element;
+interface DialogFooterProps extends React.ComponentProps<"div"> {
+}
+/**
+ * Action-row slot — a full-width flex row (`gap-2`) whose children stretch to
+ * equal width (Figma's two-button layout). Apps pass `Button`s; a destructive
+ * dialog uses `Button variation="destructive"` here.
+ */
+declare function DialogFooter({ className, children, ref, ...props }: DialogFooterProps): React.JSX.Element;
+/**
+ * Compound modal dialog. Assemble from its namespaced parts:
+ *
+ * ```tsx
+ * <Dialog.Root open={open} onOpenChange={setOpen}>
+ *   <Dialog.Trigger asChild><Button>Open</Button></Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header icon={<Icon />} title="Title" description="…" showClose />
+ *     <Dialog.Body>{/* content *\/}</Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild><Button variation="secondary">Cancel</Button></Dialog.Close>
+ *       <Button>Confirm</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Dialog: {
+    Root: typeof DialogRoot;
+    Trigger: typeof DialogTrigger;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    Close: typeof DialogClose;
+};
+
+/**
+ * All tabbable descendants of `container`, in DOM order.
+ *
+ * Deliberately does NOT filter by visibility (`offsetParent`/rects): jsdom
+ * performs no layout, so a visibility filter would drop every element under
+ * test. A modal's card rarely contains hidden-but-matching focusables, and the
+ * trap only ever cycles among what it returns, so the DOM-order set is
+ * sufficient. Kept pure (no React) so it is unit-testable in isolation.
+ */
+declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+interface UseFocusTrapOptions {
+    /** Whether the trap is engaged (the dialog is open). */
+    active: boolean;
+    /** Ref to the element that focus is confined within (the dialog card). */
+    containerRef: React.RefObject<HTMLElement | null>;
+}
+/**
+ * Modal focus machinery for `Dialog.Content` — the piece ADR-0013 #2 explicitly
+ * deferred for `Select` (which kept focus on its trigger via
+ * `aria-activedescendant`). Dialog is a true modal, so on open it:
+ *
+ * 1. remembers the element that had focus (typically the trigger),
+ * 2. moves focus into the container (first focusable, else the container
+ *    itself — give it `tabIndex={-1}` for that fallback),
+ * 3. locks body scroll, and
+ * 4. traps `Tab` / `Shift+Tab` so focus cycles within the container and cannot
+ *    escape to the page behind the backdrop.
+ *
+ * On close/unmount it releases the scroll lock and restores focus to the
+ * remembered element. Dependency-free per ADR-0013 (no focus-trap library).
+ */
+declare function useFocusTrap({ active, containerRef, }: UseFocusTrapOptions): void;
+
+/**
+ * Dialog styling — the Figma `Dialog` card (nodes `4985:12074` / `4988:1882`)
+ * plus the overlay plumbing the library owns. Binds ONLY to the semantic token
+ * layer (never primitives, never the mode plumbing); theme switching is
+ * automatic via the `.dark` class, so no `dark:` variants are needed.
+ *
+ * Dialog is presentation-neutral: there is no `variation` prop (see the design
+ * spec / ADR-0022). The "basic" vs "destructive" Figma looks come entirely from
+ * the app-supplied header icon and footer `Button variation`, so these tables
+ * carry no variant axes — they are static class sets composed with `cn`.
+ */
+/**
+ * The full-viewport backdrop. Fixed over everything, flex-centres the card, and
+ * paints the `--overlay` semantic token (a derived-alpha value, ADR-0005 — never
+ * an ad-hoc `bg-black/50`). `p-4` (1rem each side = 2rem total) reserves the
+ * viewport gutter the card's `max-w`/`max-h` calc subtract, so the card never
+ * touches an edge.
+ */
+declare const dialogOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The centred card. `w-[438px]` is the Figma-exact default width; there is no
+ * container token at 438px (closest is `--container-md` = 448px) and no width is
+ * expressible on the 4px spacing grid, so an arbitrary value is used
+ * deliberately (same posture as `scrollbarVariants`) and is `className`-
+ * overridable. `max-w`/`max-h` are viewport calcs (no token can express
+ * `100vw − gutter`) that keep the card inside the `p-4` overlay gutter; combined
+ * with the flex column below they let `Dialog.Body` scroll internally rather
+ * than let the card exceed the viewport.
+ */
+declare const dialogContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Header block: a stacked 32px decorative icon above the title/description
+ * column. `gap-4` (16px) between them, `items-start` left-aligns children.
+ * `shrink-0` keeps it fixed while the body scrolls. NOT `relative` on purpose —
+ * the close button positions against the card (`Dialog.Content`), so the header
+ * must not become the positioning anchor.
+ */
+declare const dialogHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Decorative 32px icon slot (`aria-hidden` on the element in `Dialog.Header`). */
+declare const dialogHeaderIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Title + description column: `gap-2` (8px) between the two, `w-full` so both
+ * span the header width. When the close X is shown on an icon-less header the
+ * component adds `pr-8` here so a long title clears the corner button (with an
+ * icon the title sits below the X, so no reservation is needed).
+ */
+declare const dialogHeaderTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The 16px muted X close button. Absolutely positioned against the card
+ * (`Dialog.Content` is the `relative` anchor) at `top-6 right-6` — always 24px
+ * from the card's top and right regardless of whether the header has an icon, so
+ * it never shifts with header content. Focus ring per ADR-0010.
+ */
+declare const dialogCloseButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Body slot: sizes to content and, inside the card's bounded flex column,
+ * becomes the scroll region (`min-h-0 flex-1 overflow-y-auto`) so overflowing
+ * content scrolls internally and the dialog never exceeds the viewport. Custom
+ * scrollbar is composed in via `scrollbarVariants` in the component.
+ */
+declare const dialogBodyVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Footer action row: full width, `gap-2`, children stretched to equal width
+ * (Figma's two-button layout — each button is `flex: 1 0 0`). `shrink-0` keeps
+ * it pinned while the body scrolls.
+ *
+ * Two-level stretch: `[&>*]:flex-1` grows each direct child equally, but a cut-
+ * corner `Button` renders an `inline-block` wrapper span around its `<button>`,
+ * so the span fills the flex track while the inner button would stay content-
+ * width. `[&_button]:w-full` stretches that inner button to fill the track (a
+ * ghost button, which is the direct flex child, keeps its `flex:1 1 0%` basis).
+ * Targets the element, not `[data-slot=button]`, because a `Dialog.Close asChild`
+ * wrapper overrides the inner button's `data-slot` to `dialog-close`. The
+ * button's own `justify-center` then centers the label, matching Figma.
+ */
+declare const dialogFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogRoot, type DialogRootProps, DialogTrigger, type DialogTriggerProps, type UseFocusTrapOptions, dialogBodyVariants, dialogCloseButtonVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderIconVariants, dialogHeaderTextVariants, dialogHeaderVariants, dialogOverlayVariants, getFocusableElements, useFocusTrap };