@underverse-ui/underverse 1.0.43 → 1.0.45

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "sourceEntry": "src/index.ts",
   "totalExports": 238,
   "exports": [

package/dist/index.cjs

@@ -1722,6 +1722,7 @@ var Input = (0, import_react3.forwardRef)(
     type = "text",
     value,
     maxLength,
+    rightAddon,
     ...rest
   }, ref) => {
     const [localError, setLocalError] = (0, import_react3.useState)(error);
@@ -1811,6 +1812,7 @@ var Input = (0, import_react3.forwardRef)(
       onClear: _onClear,
       hint: _hint,
       counter: _counter,
+      rightAddon: _rightAddon,
       ...restInput
     } = rest;
     const handleFocus = (e) => {
@@ -1953,6 +1955,7 @@ var Input = (0, import_react3.forwardRef)(
             }
           )
         ] }),
+        rightAddon,
         variant === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
@@ -2098,80 +2101,89 @@ var NumberInput = (0, import_react3.forwardRef)(
         onChange({ target: { value: newValue.toString() } });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
+    const inputSize = props.size || "md";
+    const stepperSizeStyles = {
+      sm: { width: "w-7", icon: { width: 8, height: 5, path: { up: "M4 1L7 4H1L4 1Z", down: "M4 4L1 1H7L4 4Z" } } },
+      md: { width: "w-9", icon: { width: 10, height: 6, path: { up: "M5 1L9 5H1L5 1Z", down: "M5 5L1 1H9L5 5Z" } } },
+      lg: { width: "w-11", icon: { width: 12, height: 7, path: { up: "M6 1L11 6H1L6 1Z", down: "M6 6L1 1H11L6 6Z" } } }
+    };
+    const ss = stepperSizeStyles[inputSize];
+    const stepperAddon = showSteppers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("absolute right-0 inset-y-0 flex flex-col border-l border-border rounded-r-full overflow-hidden", ss.width), children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Input,
+        "button",
         {
-          ref,
-          type: formatThousands ? "text" : "number",
-          min,
-          max,
-          step,
-          rightIcon: showSteppers ? void 0 : props.rightIcon,
-          value: displayValue,
-          onChange: (e) => {
-            if (!onChange) return;
-            if (!formatThousands) return onChange(e);
-            const raw = e.target.value;
-            const parsed = parse(raw);
-            if (Number.isNaN(parsed)) {
-              setDisplayValue("");
-              onChange({ target: { value: "" } });
-            } else {
-              const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
-              setDisplayValue(format(bounded));
-              onChange({ target: { value: bounded.toString() } });
-            }
-          },
-          ...props,
+          type: "button",
+          onClick: handleIncrement,
+          disabled: max !== void 0 && currentValue >= max,
           className: cn(
-            showSteppers && [
-              "pr-12",
-              // Hide native browser steppers
-              "[&::-webkit-outer-spin-button]:appearance-none",
-              "[&::-webkit-inner-spin-button]:appearance-none",
-              "[&::-webkit-inner-spin-button]:m-0",
-              "appearance-none"
-            ],
-            props.className
-          )
+            "flex-1 flex items-center justify-center transition-colors",
+            "hover:bg-accent active:bg-accent/80",
+            "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": "Increase value",
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: ss.icon.width, height: ss.icon.height, viewBox: `0 0 ${ss.icon.width} ${ss.icon.height}`, fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: ss.icon.path.up, fill: "currentColor" }) })
         }
       ),
-      showSteppers && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "absolute right-4 top-1/2 -translate-y-1/7 flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: handleIncrement,
-            disabled: max !== void 0 && currentValue >= max,
-            className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
-              "hover:bg-accent focus:outline-none focus:bg-accent",
-              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "text-muted-foreground hover:text-foreground"
-            ),
-            "aria-label": "Increase value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: handleDecrement,
-            disabled: min !== void 0 && currentValue <= min,
-            className: cn(
-              "flex items-center justify-center w-4 h-4 rounded-md transition-colors",
-              "hover:bg-accent focus:outline-none focus:bg-accent",
-              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-              "text-muted-foreground hover:text-foreground"
-            ),
-            "aria-label": "Decrease value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-px bg-border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleDecrement,
+          disabled: min !== void 0 && currentValue <= min,
+          className: cn(
+            "flex-1 flex items-center justify-center transition-colors",
+            "hover:bg-accent active:bg-accent/80",
+            "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": "Decrease value",
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: ss.icon.width, height: ss.icon.height, viewBox: `0 0 ${ss.icon.width} ${ss.icon.height}`, fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: ss.icon.path.down, fill: "currentColor" }) })
+        }
+      )
+    ] }) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Input,
+      {
+        ref,
+        type: formatThousands ? "text" : "number",
+        min,
+        max,
+        step,
+        rightIcon: showSteppers ? void 0 : props.rightIcon,
+        rightAddon: stepperAddon,
+        value: displayValue,
+        onChange: (e) => {
+          if (!onChange) return;
+          if (!formatThousands) return onChange(e);
+          const raw = e.target.value;
+          const parsed = parse(raw);
+          if (Number.isNaN(parsed)) {
+            setDisplayValue("");
+            onChange({ target: { value: "" } });
+          } else {
+            const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
+            setDisplayValue(format(bounded));
+            onChange({ target: { value: bounded.toString() } });
           }
+        },
+        ...props,
+        className: cn(
+          showSteppers && [
+            "pr-12",
+            // Hide native browser steppers
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:m-0",
+            "appearance-none"
+          ],
+          props.className
         )
-      ] })
-    ] });
+      }
+    );
   }
 );
 NumberInput.displayName = "NumberInput";
@@ -3389,10 +3401,10 @@ var import_react_dom = require("react-dom");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var sizeStyles3 = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl",
   full: "max-w-full"
 };
 var Modal = ({
@@ -3499,7 +3511,7 @@ var Modal = ({
   const modalContent = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      className: cn("fixed inset-0 z-9999 flex items-center justify-center p-4 md:p-6", overlayClassName),
       style: { overscrollBehavior: "contain" },
       onMouseDown: handleOverlayMouseDown,
       onMouseUp: handleOverlayMouseUp,