@nexxtmove/ui 1.3.0 → 1.3.1

package/dist/index.js

@@ -3484,7 +3484,9 @@ var ar = /* @__PURE__ */ p({
 			md: "max-w-3xl",
 			lg: "max-w-5xl",
 			xl: "max-w-7xl"
-		}, p = i(() => e.customWidth ? `max-w-[${/^\d+$/.test(e.customWidth) ? `${e.customWidth}px` : e.customWidth}]` : u[e.size]);
+		}, p = i(() => {
+			if (e.customWidth) return /^\d+$/.test(e.customWidth) ? `${e.customWidth}px` : e.customWidth;
+		}), m = i(() => p.value ? void 0 : u[e.size]), h = i(() => p.value ? { maxWidth: p.value } : void 0);
 		return (i, u) => (w(), a(A(De), {
 			open: t.value,
 			"onUpdate:open": l
@@ -3509,7 +3511,8 @@ var ar = /* @__PURE__ */ p({
 				}, {
 					default: R(() => [t.value ? (w(), a(A(Ce), {
 						key: 0,
-						class: y(["pointer-events-auto relative z-10 flex max-h-[85vh] w-full flex-col overflow-x-auto rounded-3xl bg-white shadow-lg", p.value]),
+						class: y(["pointer-events-auto relative z-10 flex max-h-[85vh] w-full flex-col overflow-x-auto rounded-3xl bg-white shadow-lg", m.value]),
+						style: x(h.value),
 						"aria-describedby": r.value ? void 0 : "undefined",
 						onPointerDownOutside: u[0] ||= (t) => !e.dismissible && t.preventDefault(),
 						onInteractOutside: u[1] ||= (t) => !e.dismissible && t.preventDefault(),
@@ -3549,7 +3552,11 @@ var ar = /* @__PURE__ */ p({
 							i.$slots.footer ? (w(), s("div", Wr, [D(i.$slots, "footer")])) : o("", !0)
 						]),
 						_: 3
-					}, 8, ["class", "aria-describedby"])) : o("", !0)]),
+					}, 8, [
+						"class",
+						"style",
+						"aria-describedby"
+					])) : o("", !0)]),
 					_: 3
 				})])]),
 				_: 3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Modal/Modal.vue

@@ -54,12 +54,18 @@ const sizeClasses = {
   xl: 'max-w-7xl',
 }
 
-const dialogClass = computed(() => {
-  if (!customWidth) return sizeClasses[size]
-
-  const normalized = /^\d+$/.test(customWidth) ? `${customWidth}px` : customWidth
-  return `max-w-[${normalized}]`
+// A bare number is treated as pixels; anything carrying its own unit (`90vw`,
+// `42rem`) is passed through untouched.
+const customMaxWidth = computed(() => {
+  if (!customWidth) return undefined
+  return /^\d+$/.test(customWidth) ? `${customWidth}px` : customWidth
 })
+
+const dialogClass = computed(() => (customMaxWidth.value ? undefined : sizeClasses[size]))
+
+const dialogStyle = computed(() =>
+  customMaxWidth.value ? { maxWidth: customMaxWidth.value } : undefined,
+)
 </script>
 
 <template>
@@ -89,6 +95,7 @@ const dialogClass = computed(() => {
               'pointer-events-auto relative z-10 flex max-h-[85vh] w-full flex-col overflow-x-auto rounded-3xl bg-white shadow-lg',
               dialogClass,
             ]"
+            :style="dialogStyle"
             :aria-describedby="description ? undefined : 'undefined'"
             @pointer-down-outside="!dismissible && $event.preventDefault()"
             @interact-outside="!dismissible && $event.preventDefault()"