@nexus-cross/design-system 1.0.4-beta.1 → 1.0.4

package/dist/chunks/{chunk-DDMZSNTG.js → chunk-HFBTS42N.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkHHXDOKXY_js = require('./chunk-HHXDOKXY.js');
-var chunkNHDGKOAM_js = require('./chunk-NHDGKOAM.js');
 var chunkT2IY2TSR_js = require('./chunk-T2IY2TSR.js');
 var chunkXEHFB62A_js = require('./chunk-XEHFB62A.js');
 var chunkINP2AH3B_js = require('./chunk-INP2AH3B.js');
 var chunkHUPAHDJ7_js = require('./chunk-HUPAHDJ7.js');
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkHHXDOKXY_js = require('./chunk-HHXDOKXY.js');
+var chunkNHDGKOAM_js = require('./chunk-NHDGKOAM.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
@@ -125,28 +125,17 @@ var ModalComponent = React.forwardRef(
       close
     }));
     const getModalClassName = () => {
-      const baseClasses = ["nx:opacity-0"];
+      const baseClasses = ["nexus-modal-component"];
       if (modal.props.portalId) {
-        baseClasses.push("nx:relative");
+        baseClasses.push("nexus-modal-component--portal");
       }
       if (["enter", "enter-done", "leave"].includes(status)) {
-        baseClasses.push("nx:opacity-100");
+        baseClasses.push("nexus-modal-component--visible");
       }
       if (status === "enter") {
-        baseClasses.push(
-          "nx:[&_.modal-inner]:[animation-direction:var(--modal-animation-direction)]",
-          "nx:[&_.modal-inner]:[animation-duration:var(--modal-animation-duration)]",
-          "nx:[&_.modal-inner]:[animation-name:var(--modal-animation-name)]",
-          "nx:[&_.modal-inner]:[animation-timing-function:var(--modal-animation-timing-function)]"
-        );
+        baseClasses.push("nexus-modal-component--enter");
       } else if (status === "leave") {
-        baseClasses.push(
-          "nx:[&_.modal-inner]:[animation-direction:reverse]",
-          "nx:[&_.modal-inner]:[animation-duration:var(--modal-animation-duration)]",
-          "nx:[&_.modal-inner]:[animation-fill-mode:var(--modal-animation-fill-mode)]",
-          "nx:[&_.modal-inner]:[animation-name:var(--modal-animation-name)]",
-          "nx:[&_.modal-inner]:[animation-timing-function:var(--modal-animation-timing-function)]"
-        );
+        baseClasses.push("nexus-modal-component--leave");
       }
       if (className) {
         baseClasses.push(className);
@@ -248,248 +237,154 @@ var ModalContainer = ({ className = "", breakPoints, ...defaultOption }) => {
 };
 var ModalContainer_default = ModalContainer;
 var ModalPortalTarget = ({ id, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: `nx:absolute nx:z-[9999] ${className || ""}` });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: chunkCZC76ZD5_js.cn("nexus-modal-portal-target", className) });
 };
 var ModalPortalTarget_default = ModalPortalTarget;
-var modalWrapVariants = classVarianceAuthority.cva(
-  "modal-wrap nx:pointer-events-none nx:fixed nx:inset-0 nx:z-[99999] nx:flex nx:h-full nx:items-center nx:justify-center nx:text-text-primary",
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:items-end",
-        "slide-left": "nx:h-full nx:justify-start",
-        "slide-right": "nx:h-full nx:justify-end",
-        "full-page": "nx:h-full nx:justify-start",
-        "full-page-reverse": "nx:h-full nx:justify-start",
-        draggable: ""
-      }
-    },
-    defaultVariants: {
-      layout: "default"
+var modalWrapVariants = classVarianceAuthority.cva("nexus-modal-wrap", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-wrap--bottom-sheet",
+      "slide-left": "nexus-modal-wrap--slide-left",
+      "slide-right": "nexus-modal-wrap--slide-right",
+      "full-page": "nexus-modal-wrap--full-page",
+      "full-page-reverse": "nexus-modal-wrap--full-page-reverse",
+      draggable: ""
     }
+  },
+  defaultVariants: {
+    layout: "default"
   }
-);
-var modalInnerVariants = classVarianceAuthority.cva(
-  [
-    "modal-inner",
-    "nx:relative nx:z-[2] nx:min-h-[200px] nx:w-full nx:overflow-hidden",
-    "nx:pointer-events-auto nx:rounded-corner-lg nx:border nx:border-border-default nx:bg-surface-default nx:text-text-primary",
-    "nx:sm:w-[480px] nx:sm:min-h-auto",
-    "nx:[&>div]:contents"
-  ],
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:mx-0 nx:my-0 nx:w-full nx:rounded-t-2xl nx:rounded-b-none nx:border-t nx:border-border-default nx:px-4 nx:pt-6",
-        "slide-left": "nx:h-full nx:rounded-none",
-        "slide-right": "nx:h-full nx:rounded-none",
-        "full-page": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
-        "full-page-reverse": "nx:h-full nx:w-full nx:sm:w-full nx:rounded-none nx:border-transparent",
-        draggable: "nx:min-w-[320px] nx:overflow-visible"
-      },
-      hasFooter: {
-        true: "",
-        false: ""
-      }
+});
+var modalInnerVariants = classVarianceAuthority.cva("nexus-modal-inner", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-inner--bottom-sheet",
+      "slide-left": "nexus-modal-inner--slide-left",
+      "slide-right": "nexus-modal-inner--slide-right",
+      "full-page": "nexus-modal-inner--full-page",
+      "full-page-reverse": "nexus-modal-inner--full-page-reverse",
+      draggable: "nexus-modal-inner--draggable"
     },
-    compoundVariants: [
-      { layout: "default", hasFooter: true, class: "nx:pb-[88px]" },
-      { layout: "bottom-sheet", hasFooter: true, class: "nx:pb-20" }
-    ],
-    defaultVariants: {
-      layout: "default",
-      hasFooter: false
+    hasFooter: {
+      true: "nexus-modal-inner--has-footer",
+      false: ""
     }
+  },
+  compoundVariants: [
+    { layout: "bottom-sheet", hasFooter: true, class: "nexus-modal-inner--bottom-sheet nexus-modal-inner--has-footer" }
+  ],
+  defaultVariants: {
+    layout: "default",
+    hasFooter: false
   }
-);
-var modalHeaderVariants = classVarianceAuthority.cva("modal-header nx:relative nx:px-5 nx:pt-6", {
+});
+var modalHeaderVariants = classVarianceAuthority.cva("nexus-modal-header", {
   variants: {
     layout: {
       default: "",
-      "bottom-sheet": "nx:p-0",
+      "bottom-sheet": "nexus-modal-header--bottom-sheet",
       "slide-left": "",
       "slide-right": "",
       "full-page": "",
       "full-page-reverse": "",
-      draggable: "nx:cursor-grab nx:active:cursor-grabbing nx:select-none"
+      draggable: "nexus-modal-header--draggable"
     }
   },
   defaultVariants: {
     layout: "default"
   }
 });
-var modalCloseButtonVariants = classVarianceAuthority.cva(
-  "btn-close nx:absolute nx:top-6 nx:right-5 nx:z-[1] nx:ml-auto nx:flex nx:cursor-pointer nx:items-center nx:justify-end",
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:relative nx:top-0 nx:right-0",
-        "slide-left": "",
-        "slide-right": "",
-        "full-page": "",
-        "full-page-reverse": "",
-        draggable: ""
-      }
-    },
-    defaultVariants: {
-      layout: "default"
+var modalCloseButtonVariants = classVarianceAuthority.cva("nexus-modal-close-btn", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-close-btn--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: ""
     }
+  },
+  defaultVariants: {
+    layout: "default"
   }
-);
-var modalTitleVariants = classVarianceAuthority.cva(
-  "modal-title nx:m-0 nx:pr-[42px] nx:text-text-lg nx:font-semibold nx:leading-[26px] nx:tracking-[-0.002em] nx:text-text-primary",
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:pt-1.5 nx:leading-7 nx:tracking-[-0.012em]",
-        "slide-left": "",
-        "slide-right": "",
-        "full-page": "",
-        "full-page-reverse": "",
-        draggable: ""
-      }
-    },
-    defaultVariants: {
-      layout: "default"
+});
+var modalTitleVariants = classVarianceAuthority.cva("nexus-modal-title", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-title--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: ""
     }
+  },
+  defaultVariants: {
+    layout: "default"
   }
-);
-var modalBodyVariants = classVarianceAuthority.cva(
-  ["modal-body", "nx:relative nx:overflow-y-auto nx:px-5 nx:pt-6", "nx:scrollbar-none"],
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:mt-6 nx:max-h-[calc(100vh-108px)] nx:p-0 nx:pb-6",
-        "slide-left": "nx:h-full nx:max-h-full nx:overflow-y-auto",
-        "slide-right": "nx:h-full nx:max-h-full nx:overflow-y-auto",
-        "full-page": "nx:h-full nx:max-h-full nx:overflow-y-auto nx:pb-0",
-        "full-page-reverse": "nx:h-full nx:max-h-full nx:overflow-y-auto nx:pb-0",
-        draggable: ""
-      },
-      hasHeader: {
-        true: "",
-        false: ""
-      },
-      hasFooter: {
-        true: "",
-        false: "nx:pb-6"
-      }
+});
+var modalBodyVariants = classVarianceAuthority.cva("nexus-modal-body", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-body--bottom-sheet",
+      "slide-left": "nexus-modal-body--slide",
+      "slide-right": "nexus-modal-body--slide",
+      "full-page": "nexus-modal-body--full-page",
+      "full-page-reverse": "nexus-modal-body--full-page",
+      draggable: ""
     },
-    compoundVariants: [
-      {
-        layout: "default",
-        hasHeader: true,
-        class: "nx:max-h-[calc(90vh-var(--hd-height,60px))]"
-      },
-      {
-        layout: "default",
-        hasHeader: true,
-        hasFooter: true,
-        class: "nx:max-h-[calc(90vh-var(--ft-height,88px)-var(--hd-height,60px))]"
-      },
-      {
-        layout: "default",
-        hasFooter: true,
-        hasHeader: false,
-        class: "nx:max-h-[calc(90vh-var(--ft-height,88px))]"
-      },
-      {
-        layout: "bottom-sheet",
-        hasHeader: true,
-        class: "nx:max-h-[calc(100vh-var(--hd-height,60px)-124px)] nx:pb-0"
-      },
-      {
-        layout: "bottom-sheet",
-        hasHeader: true,
-        hasFooter: true,
-        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px)-100px)]"
-      },
-      {
-        layout: "full-page",
-        hasHeader: true,
-        class: "nx:max-h-[calc(100vh-var(--hd-height,60px))] nx:pb-0"
-      },
-      {
-        layout: "full-page",
-        hasHeader: true,
-        hasFooter: true,
-        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px))]"
-      },
-      {
-        layout: "full-page-reverse",
-        hasHeader: true,
-        class: "nx:max-h-[calc(100vh-var(--hd-height,60px))] nx:pb-0"
-      },
-      {
-        layout: "full-page-reverse",
-        hasHeader: true,
-        hasFooter: true,
-        class: "nx:max-h-[calc(100vh-var(--ft-height,88px)-var(--hd-height,60px))]"
-      },
-      {
-        layout: "slide-left",
-        hasHeader: true,
-        class: "nx:max-h-[calc(100%-var(--hd-height,60px))]"
-      },
-      {
-        layout: "slide-right",
-        hasHeader: true,
-        class: "nx:max-h-[calc(100%-var(--hd-height,60px))]"
-      }
-    ],
-    defaultVariants: {
-      layout: "default",
-      hasHeader: false,
-      hasFooter: false
+    hasHeader: {
+      true: "",
+      false: ""
+    },
+    hasFooter: {
+      true: "",
+      false: "nexus-modal-body--no-footer"
     }
+  },
+  defaultVariants: {
+    layout: "default",
+    hasHeader: false,
+    hasFooter: false
   }
-);
-var modalFooterVariants = classVarianceAuthority.cva(
-  [
-    "modal-footer",
-    "nx:absolute nx:bottom-0 nx:left-0 nx:z-[2] nx:flex nx:w-full nx:px-5 nx:py-6 nx:pb-5",
-    "nx:[&_button]:h-12 nx:[&_button]:flex-1"
-  ],
-  {
-    variants: {
-      layout: {
-        default: "",
-        "bottom-sheet": "nx:px-4 nx:py-3 nx:pb-6",
-        "slide-left": "",
-        "slide-right": "",
-        "full-page": "",
-        "full-page-reverse": "",
-        draggable: "nx:relative"
-      }
-    },
-    defaultVariants: {
-      layout: "default"
+});
+var modalFooterVariants = classVarianceAuthority.cva("nexus-modal-footer", {
+  variants: {
+    layout: {
+      default: "",
+      "bottom-sheet": "nexus-modal-footer--bottom-sheet",
+      "slide-left": "",
+      "slide-right": "",
+      "full-page": "",
+      "full-page-reverse": "",
+      draggable: "nexus-modal-footer--draggable"
     }
+  },
+  defaultVariants: {
+    layout: "default"
   }
-);
-var modalDimVariants = classVarianceAuthority.cva(
-  "dim nx:pointer-events-auto nx:fixed nx:inset-0 nx:z-[1] nx:block nx:h-screen nx:w-screen nx:bg-static-black/75",
-  {
-    variants: {
-      visible: {
-        true: "",
-        false: "nx:hidden"
-      }
-    },
-    defaultVariants: {
-      visible: true
+});
+var modalDimVariants = classVarianceAuthority.cva("nexus-modal-dim", {
+  variants: {
+    visible: {
+      true: "",
+      false: "nexus-modal-dim--hidden"
     }
+  },
+  defaultVariants: {
+    visible: true
   }
-);
+});
 var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
-    className: "nx:w-5 nx:h-5 nx:text-text-muted",
+    className: "nexus-modal-close-icon",
     fill: "none",
     stroke: "currentColor",
     viewBox: "0 0 24 24",
@@ -564,6 +459,37 @@ var ModalTemplate = React.forwardRef(
       }
     }, []);
     React.useImperativeHandle(ref, () => elRef.current);
+    React.useEffect(() => {
+      const inner = innerRef.current;
+      if (!inner) return;
+      const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+      const handleKeyDown = (e) => {
+        if (e.key !== "Tab") return;
+        const focusable = inner.querySelectorAll(focusableSelector);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+      inner.addEventListener("keydown", handleKeyDown);
+      const prev = document.activeElement;
+      const firstFocusable = inner.querySelector(focusableSelector);
+      firstFocusable?.focus();
+      return () => {
+        inner.removeEventListener("keydown", handleKeyDown);
+        prev?.focus();
+      };
+    }, []);
     const hasHeader = !hideHeader;
     const hasFooter = !hideFooter;
     const wrapStyle = {};
@@ -587,7 +513,7 @@ var ModalTemplate = React.forwardRef(
       "div",
       {
         ref: elRef,
-        className: chunkQJNQCLMV_js.cn(modalWrapVariants({ layout }), className),
+        className: chunkCZC76ZD5_js.cn(modalWrapVariants({ layout }), className),
         style: wrapStyle,
         onTouchStart: isBottomSheet ? dragHandlers.onTouchStart : void 0,
         onTouchMove: isBottomSheet ? dragHandlers.onTouchMove : void 0,
@@ -599,7 +525,7 @@ var ModalTemplate = React.forwardRef(
               tabIndex: -1,
               role: "button",
               "aria-label": "modal-dim",
-              className: chunkQJNQCLMV_js.cn(modalDimVariants({ visible: showDim }), dimClassName),
+              className: chunkCZC76ZD5_js.cn(modalDimVariants({ visible: showDim }), dimClassName),
               style: isBottomSheet ? {
                 opacity: dragHandlers.dimOpacity,
                 transition: dragHandlers.isAnimating ? "opacity 250ms ease-out" : void 0
@@ -616,10 +542,7 @@ var ModalTemplate = React.forwardRef(
               tabIndex: -1,
               role: "button",
               "aria-label": "modal-dim",
-              className: chunkQJNQCLMV_js.cn(
-                "dim nx:pointer-events-auto nx:fixed nx:inset-0 nx:z-[1] nx:block nx:h-screen nx:w-screen nx:bg-static-black/30",
-                dimClassName
-              ),
+              className: chunkCZC76ZD5_js.cn("nexus-modal-dim nexus-modal-dim--draggable", dimClassName),
               onClick: closeModal2
             }
           ),
@@ -627,32 +550,37 @@ var ModalTemplate = React.forwardRef(
             "div",
             {
               ref: innerRef,
-              className: chunkQJNQCLMV_js.cn(
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": typeof title === "string" ? title : void 0,
+              className: chunkCZC76ZD5_js.cn(
                 modalInnerVariants({ layout, hasFooter }),
                 innerClassName
               ),
               style: innerStyle,
               children: [
-                isBottomSheet && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nx:flex nx:w-full nx:justify-center nx:pt-3 nx:pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nx:bg-border-default nx:h-1.5 nx:w-16 nx:rounded-full" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nx:contents", children: [
+                isBottomSheet && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-modal-bottom-sheet-handle", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-modal-bottom-sheet-bar" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-contents", children: [
                   hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
                     "header",
                     {
-                      className: chunkQJNQCLMV_js.cn(modalHeaderVariants({ layout }), headerClassName),
+                      className: chunkCZC76ZD5_js.cn(modalHeaderVariants({ layout }), headerClassName),
                       ref: modalHeaderRef,
                       onMouseDown: isDraggable && enableDrag ? windowDrag.handleMouseDown : void 0,
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
+                            type: "button",
                             className: modalCloseButtonVariants({ layout }),
                             onClick: () => close(),
+                            "aria-label": "Close",
                             children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-header-inner", children: [
                           title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: modalTitleVariants({ layout }), children: title }),
-                          desc && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "modal-desc nx:text-text-muted nx:text-xs nx:mt-1", children: desc })
+                          desc && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-modal-desc", children: desc })
                         ] })
                       ]
                     }
@@ -660,7 +588,7 @@ var ModalTemplate = React.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "section",
                     {
-                      className: chunkQJNQCLMV_js.cn(
+                      className: chunkCZC76ZD5_js.cn(
                         modalBodyVariants({ layout, hasHeader, hasFooter }),
                         bodyClassName
                       ),
@@ -671,7 +599,7 @@ var ModalTemplate = React.forwardRef(
                     "footer",
                     {
                       ref: modalFooterRef,
-                      className: chunkQJNQCLMV_js.cn(modalFooterVariants({ layout }), footerClassName),
+                      className: chunkCZC76ZD5_js.cn(modalFooterVariants({ layout }), footerClassName),
                       children: footer
                     }
                   )