@scaleflex/ui-tw 0.0.147 → 0.0.149

package/color-picker/color-picker.component.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { Button } from '@scaleflex/ui-tw/button';
 import { ColorPalette } from '@scaleflex/ui-tw/color-palette';
-import { Dialog, DialogFormBody, DialogFormContent, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogTrigger } from '@scaleflex/ui-tw/dialog';
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from '@scaleflex/ui-tw/dialog';
 import { inputVariants } from '@scaleflex/ui-tw/input';
 import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -73,10 +73,11 @@ function ColorPicker(_ref) {
       backgroundColor: value
     },
     "aria-label": "Open color picker"
-  })), /*#__PURE__*/React.createElement(DialogFormContent, {
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    variant: "centered",
     className: cn('w-[316px]', className),
     overlayClassName: overlayClassName
-  }, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogFormBody, {
+  }, /*#__PURE__*/React.createElement(DialogHeader, null, /*#__PURE__*/React.createElement(DialogIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogBody, {
     className: "space-y-4"
   }, /*#__PURE__*/React.createElement(HexColorPicker, {
     color: tempValue,
@@ -100,7 +101,7 @@ function ColorPicker(_ref) {
     value: tempValue,
     colors: presetColors,
     onSelect: setTempValue
-  })), /*#__PURE__*/React.createElement(DialogFormFooter, null, /*#__PURE__*/React.createElement(DialogTrigger, {
+  })), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(DialogTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "outline",

package/command/command.component.js

@@ -16,7 +16,7 @@ var _excluded = ["className"],
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
 import { Checkbox } from '@scaleflex/ui-tw/checkbox';
-import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
@@ -46,11 +46,12 @@ function CommandDialog(_ref2) {
     description = _ref2$description === void 0 ? 'Search for a command to run...' : _ref2$description,
     children = _ref2.children,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Dialog, props, /*#__PURE__*/React.createElement(DialogFormHeader, {
-    className: "sr-only"
-  }, /*#__PURE__*/React.createElement(DialogFormTitle, null, title), /*#__PURE__*/React.createElement(DialogFormDescription, null, description)), /*#__PURE__*/React.createElement(DialogWideContent, {
+  return /*#__PURE__*/React.createElement(Dialog, props, /*#__PURE__*/React.createElement(DialogContent, {
+    maxWidth: "5xl",
     className: "overflow-hidden p-0"
-  }, /*#__PURE__*/React.createElement(Command, {
+  }, /*#__PURE__*/React.createElement(DialogHeader, {
+    className: "sr-only"
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogDescription, null, description)), /*#__PURE__*/React.createElement(Command, {
     className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
   }, children)));
 }

package/confirm-dialog/confirm-dialog.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ConfirmDialogProps } from './confirm-dialog.types';
+declare function ConfirmDialog({ open, onOpenChange, title, description, body, variant, confirmLabel, cancelLabel, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+export { ConfirmDialog };

package/confirm-dialog/confirm-dialog.component.js

@@ -0,0 +1,44 @@
+import { Button } from '@scaleflex/ui-tw/button';
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogTitle, DialogWarningIcon } from '@scaleflex/ui-tw/dialog';
+import React from 'react';
+function ConfirmDialog(_ref) {
+  var open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    title = _ref.title,
+    description = _ref.description,
+    body = _ref.body,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'warning' : _ref$variant,
+    _ref$confirmLabel = _ref.confirmLabel,
+    confirmLabel = _ref$confirmLabel === void 0 ? 'Confirm' : _ref$confirmLabel,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? 'Cancel' : _ref$cancelLabel,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel;
+  var handleCancel = function handleCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+  };
+  var handleConfirm = function handleConfirm() {
+    onConfirm === null || onConfirm === void 0 || onConfirm();
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+  };
+  var buttonVariant = variant === 'destructive' ? 'error-primary' : variant === 'warning' ? 'warning-primary' : 'primary';
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: open,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(DialogContent, {
+    variant: "centered"
+  }, /*#__PURE__*/React.createElement(DialogHeader, null, variant === 'destructive' && /*#__PURE__*/React.createElement(DialogErrorIcon, null), variant === 'warning' && /*#__PURE__*/React.createElement(DialogWarningIcon, null), /*#__PURE__*/React.createElement(DialogTitle, null, title), description && /*#__PURE__*/React.createElement(DialogDescription, null, description)), body && /*#__PURE__*/React.createElement(DialogBody, {
+    className: "text-center"
+  }, body), /*#__PURE__*/React.createElement(DialogFooter, null, /*#__PURE__*/React.createElement(Button, {
+    className: "flex-1",
+    variant: "outline",
+    onClick: handleCancel
+  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+    className: "flex-1",
+    variant: buttonVariant,
+    onClick: handleConfirm
+  }, confirmLabel))));
+}
+export { ConfirmDialog };

package/confirm-dialog/confirm-dialog.types.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+export type ConfirmDialogVariant = 'default' | 'warning' | 'destructive';
+export interface ConfirmDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    body?: React.ReactNode;
+    variant?: ConfirmDialogVariant;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}

package/confirm-dialog/confirm-dialog.types.js

@@ -0,0 +1 @@
+export {};

package/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './confirm-dialog.component';
+export type { ConfirmDialogProps, ConfirmDialogVariant } from './confirm-dialog.types';

package/confirm-dialog/index.js

@@ -0,0 +1 @@
+export { ConfirmDialog } from './confirm-dialog.component';

package/dialog/dialog.component.d.ts

@@ -1,23 +1,46 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogFormContentProps, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps } from './dialog.types';
+import type { DialogContentProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
 declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogWideContent({ className, children, overlayClassName, headerSize, maxWidth, ...props }: DialogWideContentProps): React.JSX.Element;
-declare function DialogFormContent({ className, children, overlayClassName, maxWidth, ...props }: DialogFormContentProps): React.JSX.Element;
-declare function DialogWideHeader({ className, size, ...props }: DialogWideHeaderProps): React.JSX.Element;
-declare function DialogFormHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideTitle({ className, size, align, ...props }: DialogWideTitleProps): React.JSX.Element;
-declare function DialogFormTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
-declare function DialogFormDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
-declare function DialogFormIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormWarningIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormErrorIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogFormFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, };
+declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
+declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWarningIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogErrorIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogContent>` (variant defaults to `'default'`) */
+declare function DialogWideContent(props: DialogContentProps): React.JSX.Element;
+/** @deprecated Use `<DialogContent variant="centered">` */
+declare function DialogFormContent(props: DialogContentProps): React.JSX.Element;
+/** @deprecated Use `<DialogHeader>` */
+declare function DialogWideHeader(props: DialogHeaderProps): React.JSX.Element;
+/** @deprecated Use `<DialogHeader>` inside `<DialogContent variant="centered">` */
+declare function DialogFormHeader(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogTitle>` */
+declare function DialogWideTitle(props: DialogTitleProps): React.JSX.Element;
+/** @deprecated Use `<DialogTitle>` inside `<DialogContent variant="centered">` */
+declare function DialogFormTitle(props: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+/** @deprecated Use `<DialogDescription>` */
+declare function DialogFormDescription(props: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+/** @deprecated Use `<DialogBody>` */
+declare function DialogWideBody(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogBody>` inside `<DialogContent variant="centered">` */
+declare function DialogFormBody(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogFooter>` */
+declare function DialogWideFooter(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogFooter>` inside `<DialogContent variant="centered">` */
+declare function DialogFormFooter(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogIcon>` */
+declare function DialogFormIcon(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogWarningIcon>` */
+declare function DialogFormWarningIcon(props: ComponentProps<'div'>): React.JSX.Element;
+/** @deprecated Use `<DialogErrorIcon>` */
+declare function DialogFormErrorIcon(props: ComponentProps<'div'>): React.JSX.Element;
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, };

package/dialog/dialog.component.js

@@ -2,27 +2,39 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
-  _excluded2 = ["className", "children", "overlayClassName", "headerSize", "maxWidth"],
-  _excluded3 = ["className", "children", "overlayClassName", "maxWidth"],
-  _excluded4 = ["className", "size"],
+  _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth"],
+  _excluded3 = ["className", "size"],
+  _excluded4 = ["className", "size", "align"],
   _excluded5 = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
-  _excluded8 = ["className", "size", "align"],
+  _excluded8 = ["className"],
   _excluded9 = ["className"],
-  _excluded10 = ["className"],
-  _excluded11 = ["className"],
-  _excluded12 = ["className"],
-  _excluded13 = ["className"],
-  _excluded14 = ["className"],
-  _excluded15 = ["className"];
+  _excluded10 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { CircleAlertIcon, XIcon } from 'lucide-react';
-import React from 'react';
-import { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+import React, { createContext, useContext } from 'react';
+import { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants } from './dialog.constants';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+var DialogVariantContext = /*#__PURE__*/createContext({
+  variant: 'default',
+  headerSize: 'md'
+});
+function useDialogVariant() {
+  return useContext(DialogVariantContext);
+}
+
+// ---------------------------------------------------------------------------
+// Primitives (unchanged)
+// ---------------------------------------------------------------------------
+
 function Dialog(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
@@ -55,28 +67,41 @@ function DialogOverlay(_ref5) {
     className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className)
   }, props));
 }
-function DialogWideContent(_ref6) {
+
+// ---------------------------------------------------------------------------
+// Unified components
+// ---------------------------------------------------------------------------
+
+function DialogContent(_ref6) {
   var className = _ref6.className,
     children = _ref6.children,
     overlayClassName = _ref6.overlayClassName,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
     _ref6$headerSize = _ref6.headerSize,
     headerSize = _ref6$headerSize === void 0 ? 'md' : _ref6$headerSize,
-    _ref6$maxWidth = _ref6.maxWidth,
-    maxWidth = _ref6$maxWidth === void 0 ? '2xl' : _ref6$maxWidth,
+    maxWidth = _ref6.maxWidth,
     props = _objectWithoutProperties(_ref6, _excluded2);
-  return /*#__PURE__*/React.createElement(DialogPortal, {
+  var resolvedMaxWidth = maxWidth === 'none' ? undefined : maxWidth !== null && maxWidth !== void 0 ? maxWidth : variant === 'centered' ? 'md' : '4xl';
+  var isCentered = variant === 'centered';
+  return /*#__PURE__*/React.createElement(DialogVariantContext.Provider, {
+    value: {
+      variant: variant,
+      headerSize: headerSize
+    }
+  }, /*#__PURE__*/React.createElement(DialogPortal, {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, {
     className: overlayClassName
   }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
-      maxWidth: maxWidth
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', resolvedMaxWidth && dialogContentWidthVariants({
+      maxWidth: resolvedMaxWidth
     }), className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", dialogCloseButtonPositionVariants({
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", isCentered ? 'top-3' : dialogCloseButtonPositionVariants({
       headerSize: headerSize
     }), focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
@@ -84,141 +109,221 @@ function DialogWideContent(_ref6) {
     size: "icon-sm"
   }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Close")))));
+  }, "Close"))))));
 }
-function DialogFormContent(_ref7) {
+function DialogHeader(_ref7) {
   var className = _ref7.className,
-    children = _ref7.children,
-    overlayClassName = _ref7.overlayClassName,
-    _ref7$maxWidth = _ref7.maxWidth,
-    maxWidth = _ref7$maxWidth === void 0 ? 'md' : _ref7$maxWidth,
+    size = _ref7.size,
     props = _objectWithoutProperties(_ref7, _excluded3);
-  return /*#__PURE__*/React.createElement(DialogPortal, {
-    "data-slot": "dialog-portal"
-  }, /*#__PURE__*/React.createElement(DialogOverlay, {
-    className: overlayClassName
-  }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
-    "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
-      maxWidth: maxWidth
+  var _useDialogVariant = useDialogVariant(),
+    variant = _useDialogVariant.variant,
+    headerSize = _useDialogVariant.headerSize;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-slot": "dialog-header",
+      className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+    }, props));
+  }
+  var resolvedSize = size !== null && size !== void 0 ? size : headerSize;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-header",
+    className: cn(dialogHeaderDefaultVariants({
+      size: resolvedSize
     }), className)
-  }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
-    "data-state": "open",
-    asChild: true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", focusRingClassNames)
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost-secondary",
-    size: "icon-sm"
-  }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
-    className: "sr-only"
-  }, "Close")))));
+  }, props));
 }
-function DialogWideHeader(_ref8) {
+function DialogTitle(_ref8) {
   var className = _ref8.className,
-    _ref8$size = _ref8.size,
-    size = _ref8$size === void 0 ? 'md' : _ref8$size,
+    size = _ref8.size,
+    align = _ref8.align,
     props = _objectWithoutProperties(_ref8, _excluded4);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-header",
-    className: cn(dialogWideHeaderVariants({
-      size: size
+  var _useDialogVariant2 = useDialogVariant(),
+    variant = _useDialogVariant2.variant,
+    headerSize = _useDialogVariant2.headerSize;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
+      "data-slot": "dialog-title",
+      className: cn('text-foreground text-lg leading-7 font-medium', className)
+    }, props));
+  }
+  var resolvedSize = size !== null && size !== void 0 ? size : headerSize;
+  var resolvedAlign = align !== null && align !== void 0 ? align : 'center';
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
+    "data-slot": "dialog-title",
+    className: cn(dialogTitleDefaultVariants({
+      size: resolvedSize,
+      align: resolvedAlign
     }), className)
   }, props));
 }
-function DialogFormHeader(_ref9) {
+function DialogDescription(_ref9) {
   var className = _ref9.className,
     props = _objectWithoutProperties(_ref9, _excluded5);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-header",
-    className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
+    "data-slot": "dialog-description",
+    className: cn('text-muted-foreground text-sm', className)
   }, props));
 }
-function DialogWideBody(_ref10) {
+function DialogBody(_ref10) {
   var className = _ref10.className,
     props = _objectWithoutProperties(_ref10, _excluded6);
+  var _useDialogVariant3 = useDialogVariant(),
+    variant = _useDialogVariant3.variant;
+  var isCentered = variant === 'centered';
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-body",
-    className: cn('p-6', className)
+    className: cn(isCentered ? 'px-6' : 'p-6', className)
   }, props));
 }
-function DialogFormBody(_ref11) {
+function DialogFooter(_ref11) {
   var className = _ref11.className,
     props = _objectWithoutProperties(_ref11, _excluded7);
+  var _useDialogVariant4 = useDialogVariant(),
+    variant = _useDialogVariant4.variant;
+  var isCentered = variant === 'centered';
+  if (isCentered) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-slot": "dialog-footer",
+      className: cn('flex justify-end gap-3 p-6', className)
+    }, props));
+  }
   return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-body",
-    className: cn('px-6', className)
+    "data-slot": "dialog-footer",
+    className: cn('border-border flex flex-col-reverse gap-3 border-t p-6 sm:flex-row sm:justify-end', className)
   }, props));
 }
-function DialogWideTitle(_ref12) {
+function DialogIcon(_ref12) {
   var className = _ref12.className,
-    _ref12$size = _ref12.size,
-    size = _ref12$size === void 0 ? 'md' : _ref12$size,
-    _ref12$align = _ref12.align,
-    align = _ref12$align === void 0 ? 'center' : _ref12$align,
     props = _objectWithoutProperties(_ref12, _excluded8);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
-    "data-slot": "dialog-title",
-    className: cn(dialogWideTitleVariants({
-      size: size,
-      align: align
-    }), className)
-  }, props));
-}
-function DialogFormTitle(_ref13) {
-  var className = _ref13.className,
-    props = _objectWithoutProperties(_ref13, _excluded9);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
-    "data-slot": "dialog-title",
-    className: cn('text-foreground text-lg leading-7 font-medium', className)
-  }, props));
-}
-function DialogFormDescription(_ref14) {
-  var className = _ref14.className,
-    props = _objectWithoutProperties(_ref14, _excluded10);
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
-    "data-slot": "dialog-description",
-    className: cn('text-muted-foreground text-sm', className)
-  }, props));
-}
-function DialogFormIcon(_ref15) {
-  var className = _ref15.className,
-    props = _objectWithoutProperties(_ref15, _excluded11);
   return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-icon",
     className: cn('bg-accent mb-2 flex h-16 w-16 items-center justify-center rounded-full', "[&_svg:not([class*='text-'])]:text-primary [&_svg:not([class*='size-'])]:size-9", className)
   }, props));
 }
-function DialogFormWarningIcon(_ref16) {
-  var className = _ref16.className,
-    props = _objectWithoutProperties(_ref16, _excluded12);
-  return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
+function DialogWarningIcon(_ref13) {
+  var className = _ref13.className,
+    props = _objectWithoutProperties(_ref13, _excluded9);
+  return /*#__PURE__*/React.createElement(DialogIcon, _extends({
     className: cn(className, 'bg-warning-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-warning"
   }));
 }
-function DialogFormErrorIcon(_ref17) {
-  var className = _ref17.className,
-    props = _objectWithoutProperties(_ref17, _excluded13);
-  return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
+function DialogErrorIcon(_ref14) {
+  var className = _ref14.className,
+    props = _objectWithoutProperties(_ref14, _excluded10);
+  return /*#__PURE__*/React.createElement(DialogIcon, _extends({
     className: cn(className, 'bg-destructive-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-destructive"
   }));
 }
-function DialogWideFooter(_ref18) {
-  var className = _ref18.className,
-    props = _objectWithoutProperties(_ref18, _excluded14);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-footer",
-    className: cn('border-border flex flex-col-reverse gap-3 border-t p-6 sm:flex-row sm:justify-end', className)
-  }, props));
+
+// ---------------------------------------------------------------------------
+// Deprecated wrappers
+// ---------------------------------------------------------------------------
+
+var warnedComponents = new Set();
+function warnOnce(name, message) {
+  if (process.env.NODE_ENV !== 'production' && !warnedComponents.has(name)) {
+    warnedComponents.add(name);
+    console.warn("[Dialog] ".concat(name, " is deprecated. ").concat(message));
+  }
 }
-function DialogFormFooter(_ref19) {
-  var className = _ref19.className,
-    props = _objectWithoutProperties(_ref19, _excluded15);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-slot": "dialog-footer",
-    className: cn('flex justify-end gap-3 p-6', className)
-  }, props));
+
+/** @deprecated Use `<DialogContent>` (variant defaults to `'default'`) */
+function DialogWideContent(props) {
+  warnOnce('DialogWideContent', 'Use <DialogContent> instead.');
+  return /*#__PURE__*/React.createElement(DialogContent, _extends({
+    maxWidth: "5xl"
+  }, props, {
+    variant: "default"
+  }));
+}
+
+/** @deprecated Use `<DialogContent variant="centered">` */
+function DialogFormContent(props) {
+  warnOnce('DialogFormContent', 'Use <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogContent, _extends({}, props, {
+    variant: "centered"
+  }));
+}
+
+/** @deprecated Use `<DialogHeader>` */
+function DialogWideHeader(props) {
+  warnOnce('DialogWideHeader', 'Use <DialogHeader> instead.');
+  return /*#__PURE__*/React.createElement(DialogHeader, props);
+}
+
+/** @deprecated Use `<DialogHeader>` inside `<DialogContent variant="centered">` */
+function DialogFormHeader(props) {
+  warnOnce('DialogFormHeader', 'Use <DialogHeader> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogHeader, props);
+}
+
+/** @deprecated Use `<DialogTitle>` */
+function DialogWideTitle(props) {
+  warnOnce('DialogWideTitle', 'Use <DialogTitle> instead.');
+  return /*#__PURE__*/React.createElement(DialogTitle, props);
+}
+
+/** @deprecated Use `<DialogTitle>` inside `<DialogContent variant="centered">` */
+function DialogFormTitle(props) {
+  warnOnce('DialogFormTitle', 'Use <DialogTitle> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogTitle, props);
+}
+
+/** @deprecated Use `<DialogDescription>` */
+function DialogFormDescription(props) {
+  warnOnce('DialogFormDescription', 'Use <DialogDescription> instead.');
+  return /*#__PURE__*/React.createElement(DialogDescription, props);
+}
+
+/** @deprecated Use `<DialogBody>` */
+function DialogWideBody(props) {
+  warnOnce('DialogWideBody', 'Use <DialogBody> instead.');
+  return /*#__PURE__*/React.createElement(DialogBody, props);
+}
+
+/** @deprecated Use `<DialogBody>` inside `<DialogContent variant="centered">` */
+function DialogFormBody(props) {
+  warnOnce('DialogFormBody', 'Use <DialogBody> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogBody, props);
+}
+
+/** @deprecated Use `<DialogFooter>` */
+function DialogWideFooter(props) {
+  warnOnce('DialogWideFooter', 'Use <DialogFooter> instead.');
+  return /*#__PURE__*/React.createElement(DialogFooter, props);
+}
+
+/** @deprecated Use `<DialogFooter>` inside `<DialogContent variant="centered">` */
+function DialogFormFooter(props) {
+  warnOnce('DialogFormFooter', 'Use <DialogFooter> inside <DialogContent variant="centered"> instead.');
+  return /*#__PURE__*/React.createElement(DialogFooter, props);
+}
+
+/** @deprecated Use `<DialogIcon>` */
+function DialogFormIcon(props) {
+  warnOnce('DialogFormIcon', 'Use <DialogIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogIcon, props);
+}
+
+/** @deprecated Use `<DialogWarningIcon>` */
+function DialogFormWarningIcon(props) {
+  warnOnce('DialogFormWarningIcon', 'Use <DialogWarningIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogWarningIcon, props);
+}
+
+/** @deprecated Use `<DialogErrorIcon>` */
+function DialogFormErrorIcon(props) {
+  warnOnce('DialogFormErrorIcon', 'Use <DialogErrorIcon> instead.');
+  return /*#__PURE__*/React.createElement(DialogErrorIcon, props);
 }
-export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter };
+export {
+// Unified API
+Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon,
+// Deprecated
+DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle };