@kopexa/drawer 10.0.10 → 12.0.0

package/dist/{chunk-QUOFOYOZ.mjs → chunk-4DCIRIDK.mjs}

@@ -13,7 +13,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
   __export
-} from "./chunk-ZHAZ2QI3.mjs";
+} from "./chunk-PI2WIR3H.mjs";
 
 // src/namespace.ts
 var namespace_exports = {};

package/dist/{chunk-ZHAZ2QI3.mjs → chunk-PI2WIR3H.mjs}

@@ -6,10 +6,11 @@ var __export = (target, all) => {
 };
 
 // src/drawer.tsx
+import { Dialog as SheetPrimitive } from "@base-ui-components/react/dialog";
 import { CloseIcon } from "@kopexa/icons";
 import { createContext } from "@kopexa/react-utils";
+import { cn } from "@kopexa/shared-utils";
 import { drawer } from "@kopexa/theme";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 // ../../hooks/use-callback-ref/src/index.ts
 import { useCallback, useInsertionEffect, useRef } from "react";
@@ -76,7 +77,7 @@ var DrawerRoot = (props) => {
   });
   const styles = drawer({ size, radius, placement });
   return /* @__PURE__ */ jsx(DrawerProvider, { value: { styles, open, placement }, children: /* @__PURE__ */ jsx(
-    DialogPrimitive.Root,
+    SheetPrimitive.Root,
     {
       "data-slot": "dialog",
       open,
@@ -85,24 +86,34 @@ var DrawerRoot = (props) => {
     }
   ) });
 };
-function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+function DrawerTrigger({
+  asChild = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Trigger,
+    {
+      "data-slot": "drawer-trigger",
+      render: asChild ? children : void 0,
+      ...props,
+      children: !asChild && children
+    }
+  );
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    SheetPrimitive.Backdrop,
     {
       "data-slot": "drawer-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: cn(styles.overlay(), className),
       ...props
     }
   );
@@ -113,15 +124,15 @@ var DrawerContent = (props) => {
   return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      SheetPrimitive.Popup,
       {
         "data-slot": "drawer-content",
-        className: styles.content({ className }),
+        className: cn(styles.content(), className),
         ...rest,
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(
-            DialogPrimitive.Close,
+            SheetPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -142,7 +153,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: styles.header({ className }),
+      className: cn(styles.header(), className),
       ...props
     }
   );
@@ -153,7 +164,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: styles.footer({ className }),
+      className: cn(styles.footer(), className),
       ...props
     }
   );
@@ -164,7 +175,7 @@ function DrawerBody({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-body",
-      className: styles.body({ className }),
+      className: cn(styles.body(), className),
       ...props
     }
   );
@@ -172,10 +183,10 @@ function DrawerBody({ className, ...props }) {
 function DrawerTitle({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    SheetPrimitive.Title,
     {
       "data-slot": "drawer-title",
-      className: styles.title({ className }),
+      className: cn(styles.title(), className),
       ...props
     }
   );
@@ -186,10 +197,10 @@ function DrawerDescription({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    SheetPrimitive.Description,
     {
       "data-slot": "drawer-description",
-      className: styles.description({ className }),
+      className: cn(styles.description(), className),
       ...props
     }
   );
@@ -200,10 +211,10 @@ function DrawerCloseTrigger({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Close,
+    SheetPrimitive.Close,
     {
       "data-slot": "drawer-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: cn(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/drawer.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps } from 'react';
+import { Dialog } from '@base-ui-components/react/dialog';
 import { drawer, DrawerVariantProps } from '@kopexa/theme';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 type DrawerContextValue = {
     styles: ReturnType<typeof drawer>;
@@ -12,17 +12,26 @@ type DrawerContextValue = {
 declare const DrawerProvider: react.Provider<DrawerContextValue>;
 declare const useDrawerContext: () => DrawerContextValue;
 
-type DrawerRootProps = ComponentProps<typeof DialogPrimitive.Root> & DrawerVariantProps;
+type DrawerRootProps = Omit<ComponentProps<typeof Dialog.Root>, "onOpenChange"> & DrawerVariantProps & {
+    onOpenChange?: (open: boolean) => void;
+};
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
-type DrawerTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
-declare function DrawerTrigger({ ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
-type DrawerPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+type DrawerTriggerProps = ComponentProps<typeof Dialog.Trigger> & {
+    /**
+     * If true, the child element will be used as the trigger element.
+     * You should use render={} instead of asChild going forward.
+     * @deprecated please use render={}
+     */
+    asChild?: boolean;
+};
+declare function DrawerTrigger({ asChild, children, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare function DrawerPortal({ ...props }: DrawerPortalProps): react_jsx_runtime.JSX.Element;
-type DrawerCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DrawerCloseProps = ComponentProps<typeof Dialog.Close>;
 declare function DrawerClose({ ...props }: DrawerCloseProps): react_jsx_runtime.JSX.Element;
-type DrawerOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+type DrawerOverlayProps = ComponentProps<typeof Dialog.Backdrop>;
 declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
-type DrawerContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+type DrawerContentProps = ComponentProps<typeof Dialog.Popup> & {
     showCloseButton?: boolean;
 };
 declare const DrawerContent: (props: DrawerContentProps) => react_jsx_runtime.JSX.Element;
@@ -32,11 +41,11 @@ type DrawerFooterProps = ComponentProps<"div">;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
 type DrawerBodyProps = ComponentProps<"div">;
 declare function DrawerBody({ className, ...props }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
-type DrawerTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type DrawerTitleProps = ComponentProps<typeof Dialog.Title>;
 declare function DrawerTitle({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
-type DrawerDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+type DrawerDescriptionProps = ComponentProps<typeof Dialog.Description>;
 declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
-type DrawerCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DrawerCloseTriggerProps = ComponentProps<typeof Dialog.Close>;
 declare function DrawerCloseTrigger({ className, ...props }: DrawerCloseTriggerProps): react_jsx_runtime.JSX.Element;
 
 export { DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerCloseTrigger, type DrawerCloseTriggerProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerPortalProps, DrawerProvider, DrawerRoot, type DrawerRootProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, useDrawerContext };

package/dist/drawer.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps } from 'react';
+import { Dialog } from '@base-ui-components/react/dialog';
 import { drawer, DrawerVariantProps } from '@kopexa/theme';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 type DrawerContextValue = {
     styles: ReturnType<typeof drawer>;
@@ -12,17 +12,26 @@ type DrawerContextValue = {
 declare const DrawerProvider: react.Provider<DrawerContextValue>;
 declare const useDrawerContext: () => DrawerContextValue;
 
-type DrawerRootProps = ComponentProps<typeof DialogPrimitive.Root> & DrawerVariantProps;
+type DrawerRootProps = Omit<ComponentProps<typeof Dialog.Root>, "onOpenChange"> & DrawerVariantProps & {
+    onOpenChange?: (open: boolean) => void;
+};
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
-type DrawerTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
-declare function DrawerTrigger({ ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
-type DrawerPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+type DrawerTriggerProps = ComponentProps<typeof Dialog.Trigger> & {
+    /**
+     * If true, the child element will be used as the trigger element.
+     * You should use render={} instead of asChild going forward.
+     * @deprecated please use render={}
+     */
+    asChild?: boolean;
+};
+declare function DrawerTrigger({ asChild, children, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare function DrawerPortal({ ...props }: DrawerPortalProps): react_jsx_runtime.JSX.Element;
-type DrawerCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DrawerCloseProps = ComponentProps<typeof Dialog.Close>;
 declare function DrawerClose({ ...props }: DrawerCloseProps): react_jsx_runtime.JSX.Element;
-type DrawerOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+type DrawerOverlayProps = ComponentProps<typeof Dialog.Backdrop>;
 declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
-type DrawerContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+type DrawerContentProps = ComponentProps<typeof Dialog.Popup> & {
     showCloseButton?: boolean;
 };
 declare const DrawerContent: (props: DrawerContentProps) => react_jsx_runtime.JSX.Element;
@@ -32,11 +41,11 @@ type DrawerFooterProps = ComponentProps<"div">;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
 type DrawerBodyProps = ComponentProps<"div">;
 declare function DrawerBody({ className, ...props }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
-type DrawerTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+type DrawerTitleProps = ComponentProps<typeof Dialog.Title>;
 declare function DrawerTitle({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
-type DrawerDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+type DrawerDescriptionProps = ComponentProps<typeof Dialog.Description>;
 declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
-type DrawerCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
+type DrawerCloseTriggerProps = ComponentProps<typeof Dialog.Close>;
 declare function DrawerCloseTrigger({ className, ...props }: DrawerCloseTriggerProps): react_jsx_runtime.JSX.Element;
 
 export { DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerCloseTrigger, type DrawerCloseTriggerProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerPortalProps, DrawerProvider, DrawerRoot, type DrawerRootProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, useDrawerContext };

package/dist/drawer.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/drawer.tsx
@@ -47,10 +37,11 @@ __export(drawer_exports, {
   useDrawerContext: () => useDrawerContext
 });
 module.exports = __toCommonJS(drawer_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 DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 
 // ../../hooks/use-callback-ref/src/index.ts
 var import_react = require("react");
@@ -117,7 +108,7 @@ var DrawerRoot = (props) => {
   });
   const styles = (0, import_theme.drawer)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerProvider, { value: { styles, open, placement }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
@@ -126,24 +117,34 @@ var DrawerRoot = (props) => {
     }
   ) });
 };
-function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+function DrawerTrigger({
+  asChild = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Trigger,
+    {
+      "data-slot": "drawer-trigger",
+      render: asChild ? children : void 0,
+      ...props,
+      children: !asChild && children
+    }
+  );
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "drawer-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -154,15 +155,15 @@ var DrawerContent = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "drawer-content",
-        className: styles.content({ className }),
+        className: (0, import_shared_utils.cn)(styles.content(), className),
         ...rest,
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -183,7 +184,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: styles.header({ className }),
+      className: (0, import_shared_utils.cn)(styles.header(), className),
       ...props
     }
   );
@@ -194,7 +195,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: styles.footer({ className }),
+      className: (0, import_shared_utils.cn)(styles.footer(), className),
       ...props
     }
   );
@@ -205,7 +206,7 @@ function DrawerBody({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-body",
-      className: styles.body({ className }),
+      className: (0, import_shared_utils.cn)(styles.body(), className),
       ...props
     }
   );
@@ -213,10 +214,10 @@ function DrawerBody({ className, ...props }) {
 function DrawerTitle({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "drawer-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -227,10 +228,10 @@ function DrawerDescription({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "drawer-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -241,10 +242,10 @@ function DrawerCloseTrigger({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "drawer-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/drawer.mjs

@@ -14,7 +14,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
   useDrawerContext
-} from "./chunk-ZHAZ2QI3.mjs";
+} from "./chunk-PI2WIR3H.mjs";
 export {
   DrawerBody,
   DrawerClose,

package/dist/index.d.mts

@@ -2,5 +2,5 @@ export { useDrawerContext } from './drawer.mjs';
 export { n as Drawer } from './namespace.mjs';
 import 'react/jsx-runtime';
 import 'react';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { useDrawerContext } from './drawer.js';
 export { n as Drawer } from './namespace.js';
 import 'react/jsx-runtime';
 import 'react';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';

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,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/index.ts
@@ -37,10 +27,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/drawer.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 DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 
 // ../../hooks/use-callback-ref/src/index.ts
 var import_react = require("react");
@@ -107,7 +98,7 @@ var DrawerRoot = (props) => {
   });
   const styles = (0, import_theme.drawer)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerProvider, { value: { styles, open, placement }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
@@ -116,24 +107,34 @@ var DrawerRoot = (props) => {
     }
   ) });
 };
-function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+function DrawerTrigger({
+  asChild = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Trigger,
+    {
+      "data-slot": "drawer-trigger",
+      render: asChild ? children : void 0,
+      ...props,
+      children: !asChild && children
+    }
+  );
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "drawer-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -144,15 +145,15 @@ var DrawerContent = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "drawer-content",
-        className: styles.content({ className }),
+        className: (0, import_shared_utils.cn)(styles.content(), className),
         ...rest,
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -173,7 +174,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: styles.header({ className }),
+      className: (0, import_shared_utils.cn)(styles.header(), className),
       ...props
     }
   );
@@ -184,7 +185,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: styles.footer({ className }),
+      className: (0, import_shared_utils.cn)(styles.footer(), className),
       ...props
     }
   );
@@ -195,7 +196,7 @@ function DrawerBody({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-body",
-      className: styles.body({ className }),
+      className: (0, import_shared_utils.cn)(styles.body(), className),
       ...props
     }
   );
@@ -203,10 +204,10 @@ function DrawerBody({ className, ...props }) {
 function DrawerTitle({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "drawer-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -217,10 +218,10 @@ function DrawerDescription({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "drawer-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -231,10 +232,10 @@ function DrawerCloseTrigger({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "drawer-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   namespace_exports
-} from "./chunk-QUOFOYOZ.mjs";
+} from "./chunk-4DCIRIDK.mjs";
 import {
   useDrawerContext
-} from "./chunk-ZHAZ2QI3.mjs";
+} from "./chunk-PI2WIR3H.mjs";
 export {
   namespace_exports as Drawer,
   useDrawerContext

package/dist/namespace.d.mts

@@ -1,8 +1,8 @@
 import { DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerCloseTrigger, DrawerCloseTriggerProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerPortal, DrawerPortalProps, DrawerRoot, DrawerRootProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from './drawer.mjs';
 import 'react/jsx-runtime';
 import 'react';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 
 declare namespace namespace {
   export { DrawerBody as Body, DrawerBodyProps as BodyProps, DrawerClose as Close, DrawerCloseProps as CloseProps, DrawerCloseTrigger as CloseTrigger, DrawerCloseTriggerProps as CloseTriggerProps, DrawerContent as Content, DrawerContentProps as ContentProps, DrawerDescription as Description, DrawerDescriptionProps as DescriptionProps, DrawerFooter as Footer, DrawerFooterProps as FooterProps, DrawerHeader as Header, DrawerHeaderProps as HeaderProps, DrawerOverlay as Overlay, DrawerOverlayProps as OverlayProps, DrawerPortal as Portal, DrawerPortalProps as PortalProps, DrawerRoot as Root, DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTitleProps as TitleProps, DrawerTrigger as Trigger, DrawerTriggerProps as TriggerProps };

package/dist/namespace.d.ts

@@ -1,8 +1,8 @@
 import { DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerCloseTrigger, DrawerCloseTriggerProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerPortal, DrawerPortalProps, DrawerRoot, DrawerRootProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from './drawer.js';
 import 'react/jsx-runtime';
 import 'react';
+import '@base-ui-components/react/dialog';
 import '@kopexa/theme';
-import '@radix-ui/react-dialog';
 
 declare namespace namespace {
   export { DrawerBody as Body, DrawerBodyProps as BodyProps, DrawerClose as Close, DrawerCloseProps as CloseProps, DrawerCloseTrigger as CloseTrigger, DrawerCloseTriggerProps as CloseTriggerProps, DrawerContent as Content, DrawerContentProps as ContentProps, DrawerDescription as Description, DrawerDescriptionProps as DescriptionProps, DrawerFooter as Footer, DrawerFooterProps as FooterProps, DrawerHeader as Header, DrawerHeaderProps as HeaderProps, DrawerOverlay as Overlay, DrawerOverlayProps as OverlayProps, DrawerPortal as Portal, DrawerPortalProps as PortalProps, DrawerRoot as Root, DrawerRootProps as RootProps, DrawerTitle as Title, DrawerTitleProps as TitleProps, DrawerTrigger as Trigger, DrawerTriggerProps as TriggerProps };

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,10 +37,11 @@ __export(namespace_exports, {
 module.exports = __toCommonJS(namespace_exports);
 
 // src/drawer.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 DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 
 // ../../hooks/use-callback-ref/src/index.ts
 var import_react = require("react");
@@ -117,7 +108,7 @@ var DrawerRoot = (props) => {
   });
   const styles = (0, import_theme.drawer)({ size, radius, placement });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerProvider, { value: { styles, open, placement }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Root,
+    import_dialog.Dialog.Root,
     {
       "data-slot": "dialog",
       open,
@@ -126,24 +117,34 @@ var DrawerRoot = (props) => {
     }
   ) });
 };
-function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+function DrawerTrigger({
+  asChild = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Trigger,
+    {
+      "data-slot": "drawer-trigger",
+      render: asChild ? children : void 0,
+      ...props,
+      children: !asChild && children
+    }
+  );
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Overlay,
+    import_dialog.Dialog.Backdrop,
     {
       "data-slot": "drawer-overlay",
-      className: styles.overlay({
-        className
-      }),
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
       ...props
     }
   );
@@ -154,15 +155,15 @@ var DrawerContent = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      DialogPrimitive.Content,
+      import_dialog.Dialog.Popup,
       {
         "data-slot": "drawer-content",
-        className: styles.content({ className }),
+        className: (0, import_shared_utils.cn)(styles.content(), className),
         ...rest,
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            DialogPrimitive.Close,
+            import_dialog.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: styles.close(),
@@ -183,7 +184,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: styles.header({ className }),
+      className: (0, import_shared_utils.cn)(styles.header(), className),
       ...props
     }
   );
@@ -194,7 +195,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: styles.footer({ className }),
+      className: (0, import_shared_utils.cn)(styles.footer(), className),
       ...props
     }
   );
@@ -205,7 +206,7 @@ function DrawerBody({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-body",
-      className: styles.body({ className }),
+      className: (0, import_shared_utils.cn)(styles.body(), className),
       ...props
     }
   );
@@ -213,10 +214,10 @@ function DrawerBody({ className, ...props }) {
 function DrawerTitle({ className, ...props }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Title,
+    import_dialog.Dialog.Title,
     {
       "data-slot": "drawer-title",
-      className: styles.title({ className }),
+      className: (0, import_shared_utils.cn)(styles.title(), className),
       ...props
     }
   );
@@ -227,10 +228,10 @@ function DrawerDescription({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Description,
+    import_dialog.Dialog.Description,
     {
       "data-slot": "drawer-description",
-      className: styles.description({ className }),
+      className: (0, import_shared_utils.cn)(styles.description(), className),
       ...props
     }
   );
@@ -241,10 +242,10 @@ function DrawerCloseTrigger({
 }) {
   const { styles } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DialogPrimitive.Close,
+    import_dialog.Dialog.Close,
     {
       "data-slot": "drawer-close-trigger",
-      className: styles.closeTrigger({ className }),
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
       ...props
     }
   );

package/dist/namespace.mjs

@@ -1,5 +1,5 @@
 "use client";
-import "./chunk-QUOFOYOZ.mjs";
+import "./chunk-4DCIRIDK.mjs";
 import {
   DrawerBody,
   DrawerClose,
@@ -13,7 +13,7 @@ import {
   DrawerRoot,
   DrawerTitle,
   DrawerTrigger
-} from "./chunk-ZHAZ2QI3.mjs";
+} from "./chunk-PI2WIR3H.mjs";
 export {
   DrawerBody as Body,
   DrawerClose as Close,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/drawer",
-  "version": "10.0.10",
+  "version": "12.0.0",
   "description": "A drawer for kopexa",
   "keywords": [
     "drawer"
@@ -27,15 +27,15 @@
   "peerDependencies": {
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "1.7.7"
+    "@kopexa/theme": "2.1.0"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@kopexa/react-utils": "2.0.8",
-    "@kopexa/shared-utils": "1.1.7",
-    "@kopexa/icons": "10.0.10",
-    "@kopexa/use-controllable-state": "1.1.3",
-    "@kopexa/motion-utils": "10.0.7"
+    "@base-ui-components/react": "1.0.0-beta.3",
+    "@kopexa/icons": "12.0.0",
+    "@kopexa/motion-utils": "12.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",