moduix 0.11.0 → 0.11.2

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,215 @@
+import { CheckIcon, ChevronRightIcon, PopupArrowIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import ContextMenu_module_default from "./ContextMenu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/components/ContextMenu/ContextMenu.tsx
+const CONTEXT_MENU_CONTENT_SIDE_OFFSET = 8;
+const ContextMenu$1 = ContextMenu.Root;
+const ContextMenuSubmenu = ContextMenu.SubmenuRoot;
+function ContextMenuTrigger({ className, render, ...props }) {
+	const triggerClassName = render ? className : mergeClassName(className, ContextMenu_module_default.trigger);
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		render,
+		className: triggerClassName,
+		...props
+	});
+}
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+function ContextMenuBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Backdrop, {
+		"data-slot": "context-menu-backdrop",
+		className: mergeClassName(className, ContextMenu_module_default.backdrop),
+		...props
+	});
+}
+function ContextMenuPositioner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		"data-slot": "context-menu-positioner",
+		className: mergeClassName(className, ContextMenu_module_default.positioner),
+		...props
+	});
+}
+function ContextMenuPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Popup, {
+		"data-slot": "context-menu-popup",
+		className: mergeClassName(className, ContextMenu_module_default.popup),
+		...props
+	});
+}
+function ContextMenuArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Arrow, {
+		"data-slot": "context-menu-arrow",
+		className: mergeClassName(className, ContextMenu_module_default.arrow),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowSvg, {})
+	});
+}
+function ContextMenuContent({ className, showArrow = false, children, sideOffset = CONTEXT_MENU_CONTENT_SIDE_OFFSET, side, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(ContextMenuPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		children: /* @__PURE__ */ jsxs(ContextMenuPopup, {
+			className,
+			...props,
+			children: [showArrow ? /* @__PURE__ */ jsx(ContextMenuArrow, {}) : null, children]
+		})
+	}) });
+}
+function ContextMenuSubmenuContent({ sideOffset = getSubmenuOffset, alignOffset = getSubmenuOffset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		sideOffset,
+		alignOffset,
+		...props
+	});
+}
+function ContextMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		className: mergeClassName(className, ContextMenu_module_default.item),
+		...props
+	});
+}
+function ContextMenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.LinkItem, {
+		"data-slot": "context-menu-link-item",
+		className: mergeClassName(className, ContextMenu_module_default.linkItem),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: mergeClassName(className, ContextMenu_module_default.separator),
+		...props
+	});
+}
+function ContextMenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		className: mergeClassName(className, ContextMenu_module_default.group),
+		...props
+	});
+}
+function ContextMenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		"data-slot": "context-menu-group-label",
+		className: mergeClassName(className, ContextMenu_module_default.groupLabel),
+		...props
+	});
+}
+function ContextMenuSubmenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-submenu-trigger",
+		className: mergeClassName(className, ContextMenu_module_default.submenuTrigger),
+		...props
+	});
+}
+function ContextMenuSubmenuTriggerIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-submenu-trigger-icon",
+		className: clsx(ContextMenu_module_default.submenuTriggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: ContextMenu_module_default.iconSvg })
+	});
+}
+function ContextMenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		className: mergeClassName(className, ContextMenu_module_default.radioGroup),
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-indicator-position": indicator,
+		className: mergeClassName(className, ContextMenu_module_default.radioItem),
+		...props
+	});
+}
+function ContextMenuRadioItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, {
+		"data-slot": "context-menu-radio-item-indicator",
+		className: mergeClassName(className, ContextMenu_module_default.radioItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { className: ContextMenu_module_default.itemIndicatorIcon })
+	});
+}
+function ContextMenuCheckboxItem({ className, indicator, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-indicator-position": indicator,
+		className: mergeClassName(className, ContextMenu_module_default.checkboxItem),
+		...props
+	});
+}
+function ContextMenuCheckboxItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, {
+		"data-slot": "context-menu-checkbox-item-indicator",
+		className: mergeClassName(className, ContextMenu_module_default.checkboxItemIndicator),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { className: ContextMenu_module_default.itemIndicatorIcon })
+	});
+}
+function ContextMenuItemText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-text",
+		className: clsx(ContextMenu_module_default.itemText, className),
+		...props
+	});
+}
+function ContextMenuItemTextContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-text-content",
+		className: clsx(ContextMenu_module_default.itemTextContent, className),
+		...props
+	});
+}
+function ContextMenuItemTextIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-text-icon",
+		className: clsx(ContextMenu_module_default.itemTextIcon, className),
+		...props
+	});
+}
+function ContextMenuItemTextLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-text-label",
+		className: clsx(ContextMenu_module_default.itemTextLabel, className),
+		...props
+	});
+}
+function ContextMenuItemShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-shortcut",
+		className: clsx(ContextMenu_module_default.itemShortcut, className),
+		...props
+	});
+}
+function getSubmenuOffset({ side }) {
+	return side === "top" || side === "bottom" ? 4 : -4;
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsx(PopupArrowIcon, {
+		fillClassName: ContextMenu_module_default.arrowFill,
+		outerStrokeClassName: ContextMenu_module_default.arrowOuterStroke,
+		innerStrokeClassName: ContextMenu_module_default.arrowInnerStroke,
+		...props
+	});
+}
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuItemShortcut, ContextMenuItemText, ContextMenuItemTextContent, ContextMenuItemTextIcon, ContextMenuItemTextLabel, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuSubmenu, ContextMenuSubmenuContent, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerIcon, ContextMenuTrigger };

package/dist/components/ContextMenu/ContextMenu.module.js

@@ -0,0 +1,33 @@
+import './ContextMenu.css';
+//#region src/components/ContextMenu/ContextMenu.module.css
+var ContextMenu_module_default = {
+	"arrow": "_di0eq_arrow",
+	"arrowFill": "_di0eq_arrowFill",
+	"arrowInnerStroke": "_di0eq_arrowInnerStroke",
+	"arrowOuterStroke": "_di0eq_arrowOuterStroke",
+	"backdrop": "_di0eq_backdrop",
+	"checkboxItem": "_di0eq_checkboxItem",
+	"checkboxItemIndicator": "_di0eq_checkboxItemIndicator",
+	"group": "_di0eq_group",
+	"groupLabel": "_di0eq_groupLabel",
+	"iconSvg": "_di0eq_iconSvg",
+	"item": "_di0eq_item",
+	"itemIndicatorIcon": "_di0eq_itemIndicatorIcon",
+	"itemShortcut": "_di0eq_itemShortcut",
+	"itemText": "_di0eq_itemText",
+	"itemTextContent": "_di0eq_itemTextContent",
+	"itemTextIcon": "_di0eq_itemTextIcon",
+	"itemTextLabel": "_di0eq_itemTextLabel",
+	"linkItem": "_di0eq_linkItem",
+	"popup": "_di0eq_popup",
+	"positioner": "_di0eq_positioner",
+	"radioGroup": "_di0eq_radioGroup",
+	"radioItem": "_di0eq_radioItem",
+	"radioItemIndicator": "_di0eq_radioItemIndicator",
+	"separator": "_di0eq_separator",
+	"submenuTrigger": "_di0eq_submenuTrigger",
+	"submenuTriggerIcon": "_di0eq_submenuTriggerIcon",
+	"trigger": "_di0eq_trigger"
+};
+//#endregion
+export { ContextMenu_module_default as default };

package/dist/components/ContextMenu/index.d.ts

@@ -1,2 +1 @@
-export { ContextMenu, ContextMenuSubmenu, ContextMenuTrigger, ContextMenuPortal, ContextMenuBackdrop, ContextMenuPositioner, ContextMenuPopup, ContextMenuArrow, ContextMenuContent, ContextMenuSubmenuContent, ContextMenuItem, ContextMenuLinkItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerIcon, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuItemText, ContextMenuItemTextContent, ContextMenuItemTextIcon, ContextMenuItemTextLabel, ContextMenuItemShortcut, } from './ContextMenu';
-export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuIndicatorPosition, ContextMenuPositionerProps, ContextMenuRadioItemProps, } from './ContextMenu';
+import { ContextMenu, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuIndicatorPosition, ContextMenuItem, ContextMenuItemShortcut, ContextMenuItemText, ContextMenuItemTextContent, ContextMenuItemTextIcon, ContextMenuItemTextLabel, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuPositionerProps, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSubmenu, ContextMenuSubmenuContent, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerIcon, ContextMenuTrigger } from "./ContextMenu.js";

package/dist/components/CopyButton/CopyButton.css

@@ -0,0 +1,14 @@
+@layer ui.components {
+  .-gYQUq_announcer {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/components/CopyButton/CopyButton.d.ts

@@ -1,15 +1,16 @@
-import { ButtonProps } from '../Button';
+import { ButtonProps } from "../Button/Button.js";
+//#region src/components/CopyButton/CopyButton.d.ts
 type CopyButtonProps = Omit<ButtonProps, 'onClick'> & {
-    copiedDuration?: number;
-    copyLabels?: {
-        copy: string;
-        copied: string;
-    };
-    onClick?: ButtonProps['onClick'];
-    onCopy?: (value: string) => void;
-    onCopyError?: (error: unknown) => void;
-    value: string;
+  copiedDuration?: number;
+  copyLabels?: {
+    copy: string;
+    copied: string;
+  };
+  onClick?: ButtonProps['onClick'];
+  onCopy?: (value: string) => void;
+  onCopyError?: (error: unknown) => void;
+  value: string;
 };
-declare const CopyButton: import('react').ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { CopyButton };
-export type { CopyButtonProps };
+declare const CopyButton: import("react").ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { CopyButton, type CopyButtonProps };

package/dist/components/CopyButton/CopyButton.js

@@ -0,0 +1,66 @@
+import { CheckIcon, CopyIcon } from "../../icons/ui/Icons.js";
+import { Button } from "../Button/Button.js";
+import CopyButton_module_default from "./CopyButton.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+//#region src/components/CopyButton/CopyButton.tsx
+const DEFAULT_COPIED_DURATION = 2e3;
+const DEFAULT_COPY_LABELS = {
+	copy: "Copy",
+	copied: "Copied"
+};
+const CopyButton = forwardRef(function CopyButton({ children, copiedDuration = DEFAULT_COPIED_DURATION, copyLabels = DEFAULT_COPY_LABELS, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled, onClick, onCopy, onCopyError, size, type = "button", value, ...props }, ref) {
+	const [copied, setCopied] = useState(false);
+	const [announcement, setAnnouncement] = useState("");
+	const copiedTimeoutRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			if (copiedTimeoutRef.current) clearTimeout(copiedTimeoutRef.current);
+		};
+	}, []);
+	const handleCopy = async () => {
+		try {
+			if (!navigator.clipboard) throw new Error("Clipboard API is not available in this environment.");
+			await navigator.clipboard.writeText(value);
+			if (copiedTimeoutRef.current) clearTimeout(copiedTimeoutRef.current);
+			setCopied(true);
+			setAnnouncement(copyLabels.copied);
+			onCopy?.(value);
+			copiedTimeoutRef.current = setTimeout(() => {
+				setCopied(false);
+				setAnnouncement("");
+			}, copiedDuration);
+		} catch (error) {
+			onCopyError?.(error);
+			if (!onCopyError) queueMicrotask(() => {
+				throw error;
+			});
+		}
+	};
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || disabled) return;
+		handleCopy();
+	};
+	const renderedChildren = copied && (typeof children === "string" || typeof children === "number") ? copyLabels.copied : children;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		ref,
+		"aria-label": ariaLabel ?? (children == null && ariaLabelledBy == null ? copied ? copyLabels.copied : copyLabels.copy : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		"data-copied": copied ? "" : void 0,
+		"data-slot": "copy-button",
+		disabled,
+		onClick: handleClick,
+		size: size ?? (children == null ? "icon-md" : "md"),
+		type,
+		...props,
+		children: renderedChildren ?? (copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}))
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className: CopyButton_module_default.announcer,
+		children: announcement
+	})] });
+});
+//#endregion
+export { CopyButton };

package/dist/components/CopyButton/CopyButton.module.js

@@ -0,0 +1,5 @@
+import './CopyButton.css';
+//#region src/components/CopyButton/CopyButton.module.css
+var CopyButton_module_default = { "announcer": "-gYQUq_announcer" };
+//#endregion
+export { CopyButton_module_default as default };

package/dist/components/CopyButton/index.d.ts

@@ -1,2 +1 @@
-export { CopyButton } from './CopyButton';
-export type { CopyButtonProps } from './CopyButton';
+import { CopyButton, CopyButtonProps } from "./CopyButton.js";

package/dist/components/Dialog/Dialog.css

@@ -0,0 +1,186 @@
+@layer ui.components {
+  .u1ogVa_trigger, .u1ogVa_close {
+    box-sizing: border-box;
+    min-height: var(--dialog-control-height, var(--size-lg));
+    padding: var(--dialog-control-padding-y, .5rem) var(--dialog-control-padding-x, .875rem);
+    border: var(--dialog-control-border-width, var(--border-width-sm)) solid
+      var(--dialog-control-border-color, var(--color-border));
+    border-radius: var(--dialog-control-radius, var(--radius-md));
+    background-color: var(--dialog-control-bg, var(--color-background));
+    color: var(--dialog-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--dialog-control-font-size, var(--text-md));
+    line-height: var(--dialog-control-line-height, var(--line-height-text-md));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--dialog-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--dialog-focus-ring-width, var(--dialog-control-border-width, var(--border-width-sm)))
+        solid var(--dialog-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--dialog-focus-ring-width, var(--dialog-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--opacity-disabled);
+    }
+  }
+
+  .u1ogVa_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--dialog-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--dialog-backdrop-blur, 4px)));
+    transition: opacity var(--dialog-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--dialog-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+
+    &[data-nested] {
+      z-index: calc(var(--z-backdrop) + 1);
+    }
+  }
+
+  .u1ogVa_viewport {
+    box-sizing: border-box;
+    z-index: var(--z-modal);
+    overscroll-behavior: contain;
+    padding: var(--dialog-viewport-padding, var(--spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow-y: auto;
+
+    &[data-nested] {
+      z-index: calc(var(--z-modal) + 1);
+    }
+  }
+
+  .u1ogVa_viewportNonBlocking {
+    pointer-events: none;
+
+    & > [data-slot="dialog-popup"] {
+      pointer-events: auto;
+    }
+  }
+
+  .u1ogVa_popup {
+    box-sizing: border-box;
+    width: min(var(--dialog-width, 28rem),
+      var(--dialog-max-width, calc(100vw - var(--spacing-8, 2rem))),
+      var(--available-width, calc(100vw - var(--spacing-8, 2rem))));
+    max-width: 100%;
+    padding: var(--dialog-padding, var(--spacing-6));
+    border: var(--dialog-border-width, var(--border-width-sm)) solid
+      var(--dialog-border-color, var(--color-border));
+    border-radius: var(--dialog-radius, var(--radius-lg));
+    background-color: var(--dialog-bg, var(--color-popover));
+    color: var(--dialog-color, var(--color-popover-foreground));
+    box-shadow: var(--dialog-shadow, var(--shadow-lg));
+    translate: 0 calc(var(--dialog-nested-offset-y, 1.25rem) * var(--nested-dialogs, 0));
+    transform: scale(calc(1 - var(--dialog-nested-scale-step, .1) * var(--nested-dialogs, 0)));
+    transition: opacity var(--dialog-transition, var(--transition-default)),
+      transform var(--dialog-transition, var(--transition-default)),
+      translate var(--dialog-transition, var(--transition-default));
+    position: relative;
+
+    &[data-nested-dialog-open] {
+      &:after {
+        content: "";
+        border-radius: inherit;
+        background-color: var(--dialog-nested-overlay-bg, #0000000d);
+        position: absolute;
+        inset: 0;
+      }
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(calc((1 - var(--dialog-nested-scale-step, .1) * var(--nested-dialogs, 0)) *
+            var(--dialog-scale, var(--scale-popup))));
+    }
+  }
+
+  .u1ogVa_header {
+    align-items: start;
+    gap: var(--dialog-header-gap, var(--spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+
+    & > [data-slot="dialog-title"] {
+      grid-column: 1;
+    }
+
+    & > [data-slot="dialog-close"], & > [data-slot="dialog-close-icon"] {
+      grid-column: 2;
+      justify-self: end;
+    }
+
+    & > [data-slot="dialog-description"] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .u1ogVa_title {
+    color: var(--dialog-title-color, var(--dialog-color, var(--color-popover-foreground)));
+    font-size: var(--dialog-title-font-size, var(--text-lg));
+    font-weight: var(--dialog-title-font-weight, var(--weight-semibold));
+    line-height: var(--dialog-title-line-height, var(--line-height-text-lg));
+    margin: 0;
+  }
+
+  .u1ogVa_description {
+    color: var(--dialog-description-color, var(--dialog-muted-color, var(--color-muted-foreground)));
+    font-size: var(--dialog-description-font-size, var(--text-md));
+    line-height: var(--dialog-description-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  .u1ogVa_footer {
+    justify-content: flex-end;
+    gap: var(--dialog-footer-gap, var(--spacing-2));
+    margin-top: var(--dialog-footer-margin-top, var(--spacing-6));
+    display: flex;
+  }
+
+  .u1ogVa_closeIcon {
+    --close-button-size: var(--dialog-close-icon-size, 1.75rem);
+    --close-button-radius: var(--dialog-close-icon-radius, var(--radius-md));
+    --close-button-color: var(--dialog-close-icon-color, var(--dialog-muted-color, var(--color-muted-foreground)));
+    --close-button-color-hover: var(--dialog-close-icon-color-hover, var(--dialog-close-icon-color, var(--dialog-color, var(--color-popover-foreground))));
+    --close-button-bg: var(--dialog-close-icon-bg, transparent);
+    --close-button-bg-hover: var(--dialog-close-icon-bg-hover, var(--color-accent));
+    --close-button-focus-ring-color: var(--dialog-close-icon-focus-ring-color, var(--dialog-focus-ring-color, var(--color-ring)));
+    --close-button-icon-size: var(--dialog-close-icon-glyph-size, .75rem);
+    border: 0;
+    min-height: auto;
+    padding: 0;
+  }
+
+  .u1ogVa_body {
+    margin: var(--dialog-content-margin, var(--spacing-4) 0 0);
+    color: var(--dialog-description-color, var(--dialog-muted-color, var(--color-muted-foreground)));
+    font-size: var(--dialog-description-font-size, var(--text-md));
+    line-height: var(--dialog-description-line-height, var(--line-height-text-md));
+  }
+}

package/dist/components/Dialog/Dialog.d.ts

@@ -1,18 +1,68 @@
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import { ComponentProps } from 'react';
-declare const createDialogHandle: typeof DialogPrimitive.createHandle;
-declare function Dialog<Payload = unknown>({ modal, ...props }: DialogPrimitive.Root.Props<Payload>): import("react").JSX.Element;
-declare function DialogTrigger({ className, render, ...props }: DialogPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function DialogPortal({ className, ...props }: DialogPrimitive.Portal.Props): import("react").JSX.Element;
-declare function DialogBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props): import("react").JSX.Element;
-declare function DialogPopup({ className, ...props }: DialogPrimitive.Popup.Props): import("react").JSX.Element;
-declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react").JSX.Element;
-declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react").JSX.Element;
-declare function DialogClose({ className, ...props }: DialogPrimitive.Close.Props): import("react").JSX.Element;
-declare function DialogCloseIcon({ className, children, 'aria-label': ariaLabel, render, ...props }: DialogPrimitive.Close.Props): import("react").JSX.Element;
-declare function DialogContent({ className, children, ...props }: DialogPrimitive.Popup.Props): import("react").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export { Dialog, createDialogHandle, DialogTrigger, DialogPortal, DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogDescription, DialogClose, DialogCloseIcon, DialogContent, DialogHeader, DialogBody, DialogFooter, };
+import { ComponentProps } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/Dialog/Dialog.d.ts
+declare const createDialogHandle: typeof Dialog.createHandle;
+declare function Dialog$1<Payload = unknown>({
+  modal,
+  ...props
+}: Dialog.Root.Props<Payload>): import("react").JSX.Element;
+declare function DialogTrigger({
+  className,
+  render,
+  ...props
+}: Dialog.Trigger.Props): import("react").JSX.Element;
+declare function DialogPortal({
+  className,
+  ...props
+}: Dialog.Portal.Props): import("react").JSX.Element;
+declare function DialogBackdrop({
+  className,
+  ...props
+}: Dialog.Backdrop.Props): import("react").JSX.Element;
+declare function DialogViewport({
+  className,
+  ...props
+}: Dialog.Viewport.Props): import("react").JSX.Element;
+declare function DialogPopup({
+  className,
+  ...props
+}: Dialog.Popup.Props): import("react").JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: Dialog.Title.Props): import("react").JSX.Element;
+declare function DialogDescription({
+  className,
+  ...props
+}: Dialog.Description.Props): import("react").JSX.Element;
+declare function DialogClose({
+  className,
+  ...props
+}: Dialog.Close.Props): import("react").JSX.Element;
+declare function DialogCloseIcon({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  render,
+  ...props
+}: Dialog.Close.Props): import("react").JSX.Element;
+declare function DialogContent({
+  className,
+  children,
+  ...props
+}: Dialog.Popup.Props): import("react").JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogBody, DialogClose, DialogCloseIcon, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, createDialogHandle };