@geomak/ui 6.15.0 → 6.16.0

package/dist/index.cjs

@@ -782,9 +782,16 @@ var Button = React20__default.default.forwardRef(function Button2({
 });
 Button.displayName = "Button";
 var Button_default = Button;
+var SIZE_MAP = {
+  sm: 400,
+  md: 600,
+  lg: 800,
+  xl: 1e3,
+  full: "calc(100vw - 2rem)"
+};
 function Modal({
   width,
-  size,
+  size = "md",
   isOpen = false,
   onClose,
   onOk,
@@ -797,7 +804,7 @@ function Modal({
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const maxWidth = width ?? size?.[0] ?? 600;
+  const maxWidth = width ?? SIZE_MAP[size];
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
@@ -865,12 +872,20 @@ function Modal({
     ) }) })
   ] }) });
 }
+var SIZE_MAP2 = {
+  sm: 280,
+  md: 320,
+  lg: 480,
+  xl: 640,
+  full: "calc(100vw - 1rem)"
+};
 function Drawer({
   isOpen = false,
   onClose,
   hasFooter = true,
   placement = "right",
-  width = 320,
+  size = "md",
+  width,
   okText = "Ok",
   cancelText = "Cancel",
   onOk,
@@ -882,6 +897,8 @@ function Drawer({
   const reduced = framerMotion.useReducedMotion();
   const isRight = placement === "right";
   const hiddenX = isRight ? "100%" : "-100%";
+  const resolvedWidth = width ?? SIZE_MAP2[size];
+  const widthCss = typeof resolvedWidth === "number" ? `${resolvedWidth}px` : resolvedWidth;
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
     if (!open) onClose?.();
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
@@ -899,7 +916,7 @@ function Drawer({
       framerMotion.motion.div,
       {
         className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
-        style: { width: `min(calc(100vw - 1rem), ${width}px)` },
+        style: { width: `min(calc(100vw - 1rem), ${widthCss})` },
         initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
         animate: { x: 0, opacity: 1 },
         exit: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
@@ -2481,7 +2498,7 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
-var SIZE_MAP = {
+var SIZE_MAP3 = {
   // xs is sized to fit beside button text (~14px) — async AutoComplete,
   // Button loading prop, inline status badges, etc.
   xs: { outer: "w-3.5 h-3.5", inner: "w-1.5 h-1.5", dot: "w-0.5 h-0.5", stroke: "border-[1.5px]", text: "text-[10px]" },
@@ -2498,7 +2515,7 @@ var letterVariants = {
   visible: { opacity: 1, y: 0, transition: { duration: 0.22, ease: "easeOut" } }
 };
 function SpinnerCore({ size, color }) {
-  const dims = SIZE_MAP[size];
+  const dims = SIZE_MAP3[size];
   const ringColor = color ?? "var(--color-accent)";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", style: { color: ringColor }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2537,7 +2554,7 @@ function LoadingSpinner({
 }) {
   const reduced = framerMotion.useReducedMotion();
   const letters = prompt ? Array.from(prompt) : [];
-  const dims = SIZE_MAP[size];
+  const dims = SIZE_MAP3[size];
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SpinnerCore, { size, color: spinnerColor }),
     letters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(