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

package/dist/chunks/chunk-CV4GMFWP.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+
+var toggleGroupVariants = classVarianceAuthority.cva("nexus-toggle-group", {
+  variants: {
+    variant: {
+      default: "nexus-toggle-group--default",
+      outline: "nexus-toggle-group--outline"
+    },
+    size: {
+      sm: "nexus-toggle-group--sm",
+      md: "nexus-toggle-group--md",
+      lg: "nexus-toggle-group--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var ToggleGroup = React__namespace.forwardRef(
+  ({ className, variant, size, items, disabled, ...props }, ref) => {
+    const rootRef = React__namespace.useRef(null);
+    const [animated, setAnimated] = React__namespace.useState(false);
+    const [pos, setPos] = React__namespace.useState(null);
+    const combinedRef = React__namespace.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const currentValue = props.type === "multiple" ? props.value ?? props.defaultValue : props.value ?? props.defaultValue;
+    const [trackedValue, setTrackedValue] = React__namespace.useState(currentValue);
+    React__namespace.useEffect(() => {
+      if (currentValue !== void 0) setTrackedValue(currentValue);
+    }, [currentValue]);
+    const isDefault = variant !== "outline";
+    React__namespace.useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root || !isDefault) return;
+      const activeVal = Array.isArray(trackedValue) ? trackedValue[0] : trackedValue;
+      if (!activeVal) {
+        setPos(null);
+        return;
+      }
+      const idx = items.findIndex((item) => item.value === activeVal);
+      if (idx === -1) {
+        setPos(null);
+        return;
+      }
+      const itemEls = root.querySelectorAll(
+        ".nexus-toggle-group__item"
+      );
+      const el = itemEls[idx];
+      if (!el) return;
+      const rootRect = root.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      setPos({
+        width: elRect.width,
+        height: elRect.height,
+        x: elRect.left - rootRect.left,
+        y: elRect.top - rootRect.top
+      });
+    }, [trackedValue, items, isDefault]);
+    React__namespace.useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimated(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }, []);
+    const handleSingleChange = React__namespace.useCallback(
+      (val) => {
+        setTrackedValue(val);
+        if (props.type !== "multiple") {
+          props.onValueChange?.(val);
+        }
+      },
+      [props.type, props.onValueChange]
+    );
+    const handleMultipleChange = React__namespace.useCallback(
+      (val) => {
+        setTrackedValue(val);
+        if (props.type === "multiple") {
+          props.onValueChange?.(val);
+        }
+      },
+      [props.type, props.onValueChange]
+    );
+    const rootProps = props.type === "multiple" ? {
+      type: "multiple",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onValueChange: handleMultipleChange
+    } : {
+      type: "single",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onValueChange: handleSingleChange
+    };
+    const indicatorStyle = pos ? {
+      width: pos.width,
+      height: pos.height,
+      transform: `translate(${pos.x}px, ${pos.y}px)`,
+      opacity: 1
+    } : { opacity: 0 };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ToggleGroupPrimitive__namespace.Root,
+      {
+        ref: combinedRef,
+        className: chunkCZC76ZD5_js.cn(toggleGroupVariants({ variant, size }), className),
+        disabled,
+        ...rootProps,
+        children: [
+          isDefault && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkCZC76ZD5_js.cn(
+                "nexus-toggle-group__indicator",
+                animated && "nexus-toggle-group__indicator--animated"
+              ),
+              style: indicatorStyle,
+              "aria-hidden": true
+            }
+          ),
+          items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            ToggleGroupPrimitive__namespace.Item,
+            {
+              value: item.value,
+              disabled: item.disabled,
+              className: "nexus-toggle-group__item",
+              children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-toggle-group__icon", children: item.icon }),
+                item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+              ]
+            },
+            item.value
+          ))
+        ]
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+exports.ToggleGroup = ToggleGroup;
+exports.toggleGroupVariants = toggleGroupVariants;

package/dist/chunks/{chunk-SXLMI7CZ.mjs → chunk-CWMLTXOH.mjs}

@@ -1,10 +1,10 @@
-import { useDraggableBottomSheet } from './chunk-U56AGSLE.mjs';
-import { useDraggableWindow } from './chunk-4J3GCZ7W.mjs';
 import { scrollRelease, scrollFreeze } from './chunk-54IA2P2Z.mjs';
 import { useCheckDevice_default } from './chunk-YEWKPWK3.mjs';
 import { useClickOutside_default } from './chunk-OTGS6BDQ.mjs';
 import { Modal_default } from './chunk-6H7V2I3X.mjs';
-import { cn } from './chunk-XALPBGSC.mjs';
+import { useDraggableBottomSheet } from './chunk-U56AGSLE.mjs';
+import { useDraggableWindow } from './chunk-4J3GCZ7W.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import React, { forwardRef, useState, useMemo, useCallback, useEffect, useImperativeHandle, useRef, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -119,28 +119,17 @@ var ModalComponent = 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);
@@ -242,248 +231,154 @@ var ModalContainer = ({ className = "", breakPoints, ...defaultOption }) => {
 };
 var ModalContainer_default = ModalContainer;
 var ModalPortalTarget = ({ id, className }) => {
-  return /* @__PURE__ */ jsx("div", { id, className: `nx:absolute nx:z-[9999] ${className || ""}` });
+  return /* @__PURE__ */ jsx("div", { id, className: cn("nexus-modal-portal-target", className) });
 };
 var ModalPortalTarget_default = ModalPortalTarget;
-var modalWrapVariants = 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 = 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 = 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 = 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 = cva("modal-header nx:relative nx:px-5 nx:pt-6", {
+});
+var modalHeaderVariants = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = cva("nexus-modal-dim", {
+  variants: {
+    visible: {
+      true: "",
+      false: "nexus-modal-dim--hidden"
     }
+  },
+  defaultVariants: {
+    visible: true
   }
-);
+});
 var CloseIcon = () => /* @__PURE__ */ 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",
@@ -558,6 +453,37 @@ var ModalTemplate = forwardRef(
       }
     }, []);
     useImperativeHandle(ref, () => elRef.current);
+    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 = {};
@@ -610,10 +536,7 @@ var ModalTemplate = forwardRef(
               tabIndex: -1,
               role: "button",
               "aria-label": "modal-dim",
-              className: 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: cn("nexus-modal-dim nexus-modal-dim--draggable", dimClassName),
               onClick: closeModal2
             }
           ),
@@ -621,14 +544,17 @@ var ModalTemplate = forwardRef(
             "div",
             {
               ref: innerRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": typeof title === "string" ? title : void 0,
               className: cn(
                 modalInnerVariants({ layout, hasFooter }),
                 innerClassName
               ),
               style: innerStyle,
               children: [
-                isBottomSheet && /* @__PURE__ */ jsx("span", { className: "nx:flex nx:w-full nx:justify-center nx:pt-3 nx:pb-2", children: /* @__PURE__ */ jsx("span", { className: "nx:bg-border-default nx:h-1.5 nx:w-16 nx:rounded-full" }) }),
-                /* @__PURE__ */ jsxs("div", { className: "nx:contents", children: [
+                isBottomSheet && /* @__PURE__ */ jsx("span", { className: "nexus-modal-bottom-sheet-handle", children: /* @__PURE__ */ jsx("span", { className: "nexus-modal-bottom-sheet-bar" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "nexus-contents", children: [
                   hasHeader && /* @__PURE__ */ jsxs(
                     "header",
                     {
@@ -639,14 +565,16 @@ var ModalTemplate = forwardRef(
                         /* @__PURE__ */ jsx(
                           "button",
                           {
+                            type: "button",
                             className: modalCloseButtonVariants({ layout }),
                             onClick: () => close(),
+                            "aria-label": "Close",
                             children: /* @__PURE__ */ jsx(CloseIcon, {})
                           }
                         ),
                         /* @__PURE__ */ jsxs("div", { className: "modal-header-inner", children: [
                           title && /* @__PURE__ */ jsx("h1", { className: modalTitleVariants({ layout }), children: title }),
-                          desc && /* @__PURE__ */ jsx("p", { className: "modal-desc nx:text-text-muted nx:text-xs nx:mt-1", children: desc })
+                          desc && /* @__PURE__ */ jsx("p", { className: "nexus-modal-desc", children: desc })
                         ] })
                       ]
                     }

package/dist/chunks/chunk-CZC76ZD5.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var clsx = require('clsx');
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx.clsx(inputs);
+}
+
+exports.cn = cn;