@kopexa/dialog 10.0.9 → 11.0.0

package/dist/{chunk-5S6NCDGO.mjs → chunk-A2AV2YZH.mjs}

@@ -1,12 +1,12 @@
 "use client";
 
 // src/dialog.tsx
+import { Dialog as DialogPrimitive } from "@base-ui-components/react/dialog";
 import { CloseIcon } from "@kopexa/icons";
 import { createContext } from "@kopexa/react-utils";
 import { cn } from "@kopexa/shared-utils";
 import { dialog } from "@kopexa/theme";
 import { useControllableState } from "@kopexa/use-controllable-state";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { jsx, jsxs } from "react/jsx-runtime";
 var [DialogProvider, useDialogContext] = createContext();
 var DialogRoot = (props) => {
@@ -29,7 +29,7 @@ var DialogRoot = (props) => {
     {
       "data-slot": "dialog",
       open,
-      onOpenChange: setOpen,
+      onOpenChange: (open2) => setOpen(open2),
       ...restProps
     }
   ) });
@@ -46,12 +46,10 @@ function DialogClose({ ...props }) {
 function DialogOverlay({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    DialogPrimitive.Backdrop,
     {
       "data-slot": "dialog-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: cn(styles.overlay(), className),
       ...props
     }
   );
@@ -66,7 +64,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      DialogPrimitive.Popup,
       {
         "data-slot": "dialog-content",
         className: cn(styles.content(), className),
@@ -128,7 +126,7 @@ function DialogTitle({ className, ...props }) {
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
-      className: styles.title({ className }),
+      className: cn(styles.title(), className),
       ...props
     }
   );
@@ -142,7 +140,7 @@ function DialogDescription({
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: styles.description({ className }),
+      className: cn(styles.description(), className),
       ...props
     }
   );
@@ -156,7 +154,7 @@ function DialogCloseTrigger({
     DialogPrimitive.Close,
     {
       "data-slot": "dialog-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: cn(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/dialog.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog } from '@base-ui-components/react/dialog';
 import { dialog, DialogVariantProps } from '@kopexa/theme';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { ComponentProps } from 'react';
 
 type DialogContextValue = {
@@ -12,17 +12,19 @@ type DialogContextValue = {
 };
 declare const useDialogContext: () => DialogContextValue;
 
-type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & DialogVariantProps;
+type DialogRootProps = Omit<ComponentProps<typeof Dialog.Root>, "onOpenChange"> & DialogVariantProps & {
+    onOpenChange?: (open: boolean) => void;
+};
 declare const DialogRoot: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
-type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+type DialogTriggerProps = ComponentProps<typeof Dialog.Trigger>;
 declare function DialogTrigger({ ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
-type DialogPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+type DialogPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare function DialogPortal({ ...props }: DialogPortalProps): react_jsx_runtime.JSX.Element;
-type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DialogCloseProps = ComponentProps<typeof Dialog.Close>;
 declare function DialogClose({ ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
-type DialogOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+type DialogOverlayProps = ComponentProps<typeof Dialog.Backdrop>;
 declare function DialogOverlay({ className, ...props }: DialogOverlayProps): react_jsx_runtime.JSX.Element;
-type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+type DialogContentProps = ComponentProps<typeof Dialog.Popup> & {
     showCloseButton?: boolean;
 };
 declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
@@ -32,11 +34,11 @@ type DialogFooterProps = ComponentProps<"div">;
 declare function DialogFooter({ className, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
 type DialogBodyProps = ComponentProps<"div">;
 declare function DialogBody({ className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
-type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type DialogTitleProps = ComponentProps<typeof Dialog.Title>;
 declare function DialogTitle({ className, ...props }: DialogTitleProps): react_jsx_runtime.JSX.Element;
-type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+type DialogDescriptionProps = ComponentProps<typeof Dialog.Description>;
 declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
-type DialogCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DialogCloseTriggerProps = ComponentProps<typeof Dialog.Close>;
 declare function DialogCloseTrigger({ className, ...props }: DialogCloseTriggerProps): react_jsx_runtime.JSX.Element;
 
 export { DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, useDialogContext };

package/dist/dialog.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog } from '@base-ui-components/react/dialog';
 import { dialog, DialogVariantProps } from '@kopexa/theme';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { ComponentProps } from 'react';
 
 type DialogContextValue = {
@@ -12,17 +12,19 @@ type DialogContextValue = {
 };
 declare const useDialogContext: () => DialogContextValue;
 
-type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & DialogVariantProps;
+type DialogRootProps = Omit<ComponentProps<typeof Dialog.Root>, "onOpenChange"> & DialogVariantProps & {
+    onOpenChange?: (open: boolean) => void;
+};
 declare const DialogRoot: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
-type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+type DialogTriggerProps = ComponentProps<typeof Dialog.Trigger>;
 declare function DialogTrigger({ ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
-type DialogPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+type DialogPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare function DialogPortal({ ...props }: DialogPortalProps): react_jsx_runtime.JSX.Element;
-type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DialogCloseProps = ComponentProps<typeof Dialog.Close>;
 declare function DialogClose({ ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
-type DialogOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+type DialogOverlayProps = ComponentProps<typeof Dialog.Backdrop>;
 declare function DialogOverlay({ className, ...props }: DialogOverlayProps): react_jsx_runtime.JSX.Element;
-type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+type DialogContentProps = ComponentProps<typeof Dialog.Popup> & {
     showCloseButton?: boolean;
 };
 declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
@@ -32,11 +34,11 @@ type DialogFooterProps = ComponentProps<"div">;
 declare function DialogFooter({ className, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
 type DialogBodyProps = ComponentProps<"div">;
 declare function DialogBody({ className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
-type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type DialogTitleProps = ComponentProps<typeof Dialog.Title>;
 declare function DialogTitle({ className, ...props }: DialogTitleProps): react_jsx_runtime.JSX.Element;
-type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+type DialogDescriptionProps = ComponentProps<typeof Dialog.Description>;
 declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
-type DialogCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DialogCloseTriggerProps = ComponentProps<typeof Dialog.Close>;
 declare function DialogCloseTrigger({ className, ...props }: DialogCloseTriggerProps): react_jsx_runtime.JSX.Element;
 
 export { DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, useDialogContext };

package/dist/dialog.js

@@ -1,10 +1,8 @@
 "use client";
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/dialog.tsx
@@ -46,12 +36,12 @@ __export(dialog_exports, {
   useDialogContext: () => useDialogContext
 });
 module.exports = __toCommonJS(dialog_exports);
+var import_dialog = require("@base-ui-components/react/dialog");
 var import_icons = require("@kopexa/icons");
 var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
 var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
 var DialogRoot = (props) => {
@@ -70,33 +60,31 @@ var DialogRoot = (props) => {
   });
   const styles = (0, import_theme.dialog)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
-      onOpenChange: setOpen,
+      onOpenChange: (open2) => setOpen(open2),
       ...restProps
     }
   ) });
 };
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "dialog-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -111,7 +99,7 @@ function DialogContent({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "dialog-content",
         className: (0, import_shared_utils.cn)(styles.content(), className),
@@ -119,7 +107,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -170,10 +158,10 @@ function DialogBody({ className, ...props }) {
 function DialogTitle({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "dialog-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -184,10 +172,10 @@ function DialogDescription({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "dialog-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -198,10 +186,10 @@ function DialogCloseTrigger({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "dialog-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/dialog.mjs

@@ -13,8 +13,7 @@ import {
   DialogTitle,
   DialogTrigger,
   useDialogContext
-} from "./chunk-5S6NCDGO.mjs";
-import "./chunk-C7GZJJIK.mjs";
+} from "./chunk-A2AV2YZH.mjs";
 export {
   DialogBody,
   DialogClose,

package/dist/index.d.mts

@@ -1,6 +1,22 @@
-export { DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTrigger, DialogCloseTriggerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogRoot, DialogRootProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, useDialogContext } from './dialog.mjs';
-export { n as Dialog } from './namespace.mjs';
-import 'react/jsx-runtime';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DialogRootProps, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './dialog.mjs';
+export { DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTriggerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogPortalProps, DialogRoot, DialogTitleProps, DialogTriggerProps, useDialogContext } from './dialog.mjs';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 import 'react';
+
+declare const Dialog: ((props: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
+    Body: typeof DialogBody;
+    CloseTrigger: typeof DialogCloseTrigger;
+    Content: typeof DialogContent;
+    Description: typeof DialogDescription;
+    Footer: typeof DialogFooter;
+    Header: typeof DialogHeader;
+    Overlay: typeof DialogOverlay;
+    Portal: typeof DialogPortal;
+    Title: typeof DialogTitle;
+    Trigger: typeof DialogTrigger;
+};
+
+export { Dialog, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRootProps, DialogTitle, DialogTrigger };

package/dist/index.d.ts

@@ -1,6 +1,22 @@
-export { DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTrigger, DialogCloseTriggerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogRoot, DialogRootProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, useDialogContext } from './dialog.js';
-export { n as Dialog } from './namespace.js';
-import 'react/jsx-runtime';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DialogRootProps, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './dialog.js';
+export { DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTriggerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogPortalProps, DialogRoot, DialogTitleProps, DialogTriggerProps, useDialogContext } from './dialog.js';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 import 'react';
+
+declare const Dialog: ((props: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
+    Body: typeof DialogBody;
+    CloseTrigger: typeof DialogCloseTrigger;
+    Content: typeof DialogContent;
+    Description: typeof DialogDescription;
+    Footer: typeof DialogFooter;
+    Header: typeof DialogHeader;
+    Overlay: typeof DialogOverlay;
+    Portal: typeof DialogPortal;
+    Title: typeof DialogTitle;
+    Trigger: typeof DialogTrigger;
+};
+
+export { Dialog, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRootProps, DialogTitle, DialogTrigger };

package/dist/index.js

@@ -1,10 +1,8 @@
 "use client";
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,20 +16,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Dialog: () => namespace_exports,
+  Dialog: () => Dialog,
   DialogBody: () => DialogBody,
   DialogClose: () => DialogClose,
   DialogCloseTrigger: () => DialogCloseTrigger,
@@ -49,12 +39,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/dialog.tsx
+var import_dialog = require("@base-ui-components/react/dialog");
 var import_icons = require("@kopexa/icons");
 var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
 var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
 var DialogRoot = (props) => {
@@ -73,33 +63,31 @@ var DialogRoot = (props) => {
   });
   const styles = (0, import_theme.dialog)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
-      onOpenChange: setOpen,
+      onOpenChange: (open2) => setOpen(open2),
       ...restProps
     }
   ) });
 };
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "dialog-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -114,7 +102,7 @@ function DialogContent({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "dialog-content",
         className: (0, import_shared_utils.cn)(styles.content(), className),
@@ -122,7 +110,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -173,10 +161,10 @@ function DialogBody({ className, ...props }) {
 function DialogTitle({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "dialog-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -187,10 +175,10 @@ function DialogDescription({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "dialog-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -201,30 +189,28 @@ function DialogCloseTrigger({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "dialog-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );
 }
 
-// src/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
-  Body: () => DialogBody,
-  Close: () => DialogClose,
-  CloseTrigger: () => DialogCloseTrigger,
-  Content: () => DialogContent,
-  Description: () => DialogDescription,
-  Footer: () => DialogFooter,
-  Header: () => DialogHeader,
-  Overlay: () => DialogOverlay,
-  Portal: () => DialogPortal,
-  Root: () => DialogRoot,
-  Title: () => DialogTitle,
-  Trigger: () => DialogTrigger
+// src/index.ts
+var Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Body: DialogBody,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Overlay: DialogOverlay,
+  Portal: DialogPortal,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,7 +1,4 @@
 "use client";
-import {
-  namespace_exports
-} from "./chunk-SUPSWH6D.mjs";
 import {
   DialogBody,
   DialogClose,
@@ -16,10 +13,24 @@ import {
   DialogTitle,
   DialogTrigger,
   useDialogContext
-} from "./chunk-5S6NCDGO.mjs";
-import "./chunk-C7GZJJIK.mjs";
+} from "./chunk-A2AV2YZH.mjs";
+
+// src/index.ts
+var Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Body: DialogBody,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Overlay: DialogOverlay,
+  Portal: DialogPortal,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
 export {
-  namespace_exports as Dialog,
+  Dialog,
   DialogBody,
   DialogClose,
   DialogCloseTrigger,

package/dist/namespace.d.mts

@@ -1,11 +1,5 @@
-import { DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTrigger, DialogCloseTriggerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogRoot, DialogRootProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from './dialog.mjs';
+export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps } from './dialog.mjs';
 import 'react/jsx-runtime';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 import 'react';
-
-declare namespace namespace {
-  export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps };
-}
-
-export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps, namespace as n };

package/dist/namespace.d.ts

@@ -1,11 +1,5 @@
-import { DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogCloseTrigger, DialogCloseTriggerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogRoot, DialogRootProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from './dialog.js';
+export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps } from './dialog.js';
 import 'react/jsx-runtime';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 import 'react';
-
-declare namespace namespace {
-  export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps };
-}
-
-export { DialogBody as Body, DialogBodyProps as BodyProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogCloseTrigger as CloseTrigger, DialogCloseTriggerProps as CloseTriggerProps, DialogContent as Content, DialogContentProps as ContentProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogFooter as Footer, DialogFooterProps as FooterProps, DialogHeader as Header, DialogHeaderProps as HeaderProps, DialogOverlay as Overlay, DialogOverlayProps as OverlayProps, DialogPortal as Portal, DialogPortalProps as PortalProps, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps, namespace as n };

package/dist/namespace.js

@@ -1,10 +1,8 @@
 "use client";
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/namespace.ts
@@ -47,12 +37,12 @@ __export(namespace_exports, {
 module.exports = __toCommonJS(namespace_exports);
 
 // src/dialog.tsx
+var import_dialog = require("@base-ui-components/react/dialog");
 var import_icons = require("@kopexa/icons");
 var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
 var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
 var DialogRoot = (props) => {
@@ -71,33 +61,31 @@ var DialogRoot = (props) => {
   });
   const styles = (0, import_theme.dialog)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
-      onOpenChange: setOpen,
+      onOpenChange: (open2) => setOpen(open2),
       ...restProps
     }
   ) });
 };
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "dialog-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -112,7 +100,7 @@ function DialogContent({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "dialog-content",
         className: (0, import_shared_utils.cn)(styles.content(), className),
@@ -120,7 +108,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -171,10 +159,10 @@ function DialogBody({ className, ...props }) {
 function DialogTitle({ className, ...props }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "dialog-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -185,10 +173,10 @@ function DialogDescription({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "dialog-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -199,10 +187,10 @@ function DialogCloseTrigger({
 }) {
   const { styles } = useDialogContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "dialog-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/namespace.mjs

@@ -1,5 +1,4 @@
 "use client";
-import "./chunk-SUPSWH6D.mjs";
 import {
   DialogBody,
   DialogClose,
@@ -13,8 +12,7 @@ import {
   DialogRoot,
   DialogTitle,
   DialogTrigger
-} from "./chunk-5S6NCDGO.mjs";
-import "./chunk-C7GZJJIK.mjs";
+} from "./chunk-A2AV2YZH.mjs";
 export {
   DialogBody as Body,
   DialogClose as Close,

package/dist/transition.mjs

@@ -1,5 +1,4 @@
 "use client";
-import "./chunk-C7GZJJIK.mjs";
 
 // src/transition.ts
 import { TRANSITION_EASINGS } from "@kopexa/motion-utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/dialog",
-  "version": "10.0.9",
+  "version": "11.0.0",
   "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
   "keywords": [
     "dialog"
@@ -27,15 +27,16 @@
   "peerDependencies": {
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "1.7.6"
+    "@kopexa/theme": "2.0.0"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.3",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@kopexa/icons": "10.0.9",
-    "@kopexa/react-utils": "2.0.8",
-    "@kopexa/shared-utils": "1.1.7",
-    "@kopexa/motion-utils": "10.0.6",
-    "@kopexa/use-controllable-state": "1.1.3"
+    "@kopexa/icons": "11.0.0",
+    "@kopexa/motion-utils": "11.0.0",
+    "@kopexa/react-utils": "3.0.0",
+    "@kopexa/shared-utils": "2.0.0",
+    "@kopexa/use-controllable-state": "2.0.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/chunk-C7GZJJIK.mjs

@@ -1,10 +0,0 @@
-"use client";
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-export {
-  __export
-};

package/dist/chunk-SUPSWH6D.mjs

@@ -1,39 +0,0 @@
-"use client";
-import {
-  DialogBody,
-  DialogClose,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from "./chunk-5S6NCDGO.mjs";
-import {
-  __export
-} from "./chunk-C7GZJJIK.mjs";
-
-// src/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
-  Body: () => DialogBody,
-  Close: () => DialogClose,
-  CloseTrigger: () => DialogCloseTrigger,
-  Content: () => DialogContent,
-  Description: () => DialogDescription,
-  Footer: () => DialogFooter,
-  Header: () => DialogHeader,
-  Overlay: () => DialogOverlay,
-  Portal: () => DialogPortal,
-  Root: () => DialogRoot,
-  Title: () => DialogTitle,
-  Trigger: () => DialogTrigger
-});
-
-export {
-  namespace_exports
-};