@dmsi/wedgekit-react 0.0.922 → 0.0.986

package/dist/components/Stepper.cjs

@@ -63,6 +63,7 @@ __export(Stepper_exports, {
   Stepper: () => Stepper
 });
 module.exports = __toCommonJS(Stepper_exports);
+var import_react8 = require("react");
 
 // src/components/Button.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -255,7 +256,8 @@ var Button = (_a) => {
     href,
     id,
     testid,
-    isLoading
+    isLoading,
+    fontNormal = false
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -271,7 +273,8 @@ var Button = (_a) => {
     "href",
     "id",
     "testid",
-    "isLoading"
+    "isLoading",
+    "fontNormal"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -298,6 +301,15 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
   );
+  const quarternaryOutlinedVariantStyles = variant === "quarternary-outlined" && (0, import_clsx2.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-transparent hover:border-border-primary-normal hover:text-text-primary-normal",
+    "focus:bg-transparent focus:border-border-primary-normal focus:text-text-primary-normal focus:outline-0",
+    "active:bg-transparent active:border-transparent active:text-text-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
   const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
@@ -341,6 +353,7 @@ var Button = (_a) => {
     primaryVariantStyles,
     secondaryVariantStyles,
     tertiaryVariantStyles,
+    quarternaryOutlinedVariantStyles,
     primaryCriticalVariantStyles,
     secondaryCriticalVariantStyles,
     tertiaryCriticalVariantStyles,
@@ -351,6 +364,7 @@ var Button = (_a) => {
   const labelClasses = (0, import_clsx2.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
+    fontNormal && "font-normal!",
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );
@@ -1042,12 +1056,15 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout/useTableLayout.ts
+var import_react5 = require("react");
+
 // src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.4`;
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
 
-// src/hooks/useTableLayout.ts
-var import_react5 = require("react");
-var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
+// src/hooks/useTableLayout/storage.ts
+var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
+var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/hooks/useEditCell.tsx
 var import_react6 = require("react");
@@ -1183,10 +1200,12 @@ var Stepper = (_a) => {
     setValue,
     onDecrease,
     onIncrease,
+    onBlur,
     id,
     testid,
     min,
-    max
+    max,
+    step = 1
   } = _b, props = __objRest(_b, [
     "error",
     "disabled",
@@ -1195,23 +1214,32 @@ var Stepper = (_a) => {
     "setValue",
     "onDecrease",
     "onIncrease",
+    "onBlur",
     "id",
     "testid",
     "min",
-    "max"
+    "max",
+    "step"
   ]);
+  const [isEditing, setIsEditing] = (0, import_react8.useState)(false);
+  const [displayValue, setDisplayValue] = (0, import_react8.useState)(String(value));
+  (0, import_react8.useEffect)(() => {
+    if (!isEditing) {
+      setDisplayValue(String(value));
+    }
+  }, [value, isEditing]);
   function handleIncrease() {
     if (max != null && value >= max) {
       return;
     }
-    setValue((prevVal) => prevVal + 1);
+    setValue((prevVal) => Math.min(prevVal + step, max != null ? max : Infinity));
     onIncrease == null ? void 0 : onIncrease();
   }
   function handleDecrease() {
     if (min != null && value <= min) {
       return;
     }
-    setValue((prevVal) => prevVal - 1);
+    setValue((prevVal) => Math.max(prevVal - step, min != null ? min : -Infinity));
     onDecrease == null ? void 0 : onDecrease();
   }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -1255,18 +1283,36 @@ var Stepper = (_a) => {
           __spreadProps(__spreadValues({}, props), {
             id: id ? `${id}-input` : void 0,
             testid: testid ? `${testid}-input` : void 0,
-            type: "number",
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
             align: "center",
-            value,
+            value: displayValue,
+            onFocus: () => setIsEditing(true),
             onChange: (e) => {
-              const nextValue = +e.target.value;
-              const lessThanMinimum = min != null && nextValue < min;
+              const rawValue = e.target.value;
+              if (rawValue === "") {
+                setDisplayValue("");
+                setValue(0);
+                return;
+              }
+              if (!/^\d*$/.test(rawValue)) {
+                return;
+              }
+              const cleanedValue = rawValue.replace(/^0+/, "") || "0";
+              const nextValue = parseInt(cleanedValue, 10);
               const greaterThanMaximum = max != null && nextValue > max;
-              if (lessThanMinimum || greaterThanMaximum) {
+              if (greaterThanMaximum) {
                 return;
               }
+              setDisplayValue(cleanedValue);
               setValue(nextValue);
             },
+            onBlur: () => {
+              setIsEditing(false);
+              setDisplayValue(String(value));
+              onBlur == null ? void 0 : onBlur();
+            },
             error,
             disabled,
             className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"

package/dist/components/Stepper.js

@@ -6,14 +6,14 @@ import {
   InputBase
 } from "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
-import "../chunk-WOWPMA26.js";
+import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-F7F5BKW5.js";
+import "../chunk-TBZ243DS.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Button
-} from "../chunk-BMAZBFUU.js";
+} from "../chunk-ZMTHWJ7F.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-WMPWWFUJ.js";
 import {
@@ -29,6 +29,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 
 // src/components/Stepper.tsx
+import { useState, useEffect } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Stepper = (_a) => {
@@ -40,10 +41,12 @@ var Stepper = (_a) => {
     setValue,
     onDecrease,
     onIncrease,
+    onBlur,
     id,
     testid,
     min,
-    max
+    max,
+    step = 1
   } = _b, props = __objRest(_b, [
     "error",
     "disabled",
@@ -52,23 +55,32 @@ var Stepper = (_a) => {
     "setValue",
     "onDecrease",
     "onIncrease",
+    "onBlur",
     "id",
     "testid",
     "min",
-    "max"
+    "max",
+    "step"
   ]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [displayValue, setDisplayValue] = useState(String(value));
+  useEffect(() => {
+    if (!isEditing) {
+      setDisplayValue(String(value));
+    }
+  }, [value, isEditing]);
   function handleIncrease() {
     if (max != null && value >= max) {
       return;
     }
-    setValue((prevVal) => prevVal + 1);
+    setValue((prevVal) => Math.min(prevVal + step, max != null ? max : Infinity));
     onIncrease == null ? void 0 : onIncrease();
   }
   function handleDecrease() {
     if (min != null && value <= min) {
       return;
     }
-    setValue((prevVal) => prevVal - 1);
+    setValue((prevVal) => Math.max(prevVal - step, min != null ? min : -Infinity));
     onDecrease == null ? void 0 : onDecrease();
   }
   return /* @__PURE__ */ jsxs(
@@ -112,18 +124,36 @@ var Stepper = (_a) => {
           __spreadProps(__spreadValues({}, props), {
             id: id ? `${id}-input` : void 0,
             testid: testid ? `${testid}-input` : void 0,
-            type: "number",
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
             align: "center",
-            value,
+            value: displayValue,
+            onFocus: () => setIsEditing(true),
             onChange: (e) => {
-              const nextValue = +e.target.value;
-              const lessThanMinimum = min != null && nextValue < min;
+              const rawValue = e.target.value;
+              if (rawValue === "") {
+                setDisplayValue("");
+                setValue(0);
+                return;
+              }
+              if (!/^\d*$/.test(rawValue)) {
+                return;
+              }
+              const cleanedValue = rawValue.replace(/^0+/, "") || "0";
+              const nextValue = parseInt(cleanedValue, 10);
               const greaterThanMaximum = max != null && nextValue > max;
-              if (lessThanMinimum || greaterThanMaximum) {
+              if (greaterThanMaximum) {
                 return;
               }
+              setDisplayValue(cleanedValue);
               setValue(nextValue);
             },
+            onBlur: () => {
+              setIsEditing(false);
+              setDisplayValue(String(value));
+              onBlur == null ? void 0 : onBlur();
+            },
             error,
             disabled,
             className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"

package/dist/components/Time.js

@@ -5,7 +5,7 @@ import "../chunk-HXGJVYGQ.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
-import "../chunk-F7F5BKW5.js";
+import "../chunk-TBZ243DS.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Stack

package/dist/components/Toast.cjs

@@ -401,7 +401,8 @@ var Button = (_a) => {
     href,
     id,
     testid,
-    isLoading
+    isLoading,
+    fontNormal = false
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -417,7 +418,8 @@ var Button = (_a) => {
     "href",
     "id",
     "testid",
-    "isLoading"
+    "isLoading",
+    "fontNormal"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx5.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -444,6 +446,15 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
   );
+  const quarternaryOutlinedVariantStyles = variant === "quarternary-outlined" && (0, import_clsx5.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-transparent hover:border-border-primary-normal hover:text-text-primary-normal",
+    "focus:bg-transparent focus:border-border-primary-normal focus:text-text-primary-normal focus:outline-0",
+    "active:bg-transparent active:border-transparent active:text-text-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
   const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx5.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
@@ -487,6 +498,7 @@ var Button = (_a) => {
     primaryVariantStyles,
     secondaryVariantStyles,
     tertiaryVariantStyles,
+    quarternaryOutlinedVariantStyles,
     primaryCriticalVariantStyles,
     secondaryCriticalVariantStyles,
     tertiaryCriticalVariantStyles,
@@ -497,6 +509,7 @@ var Button = (_a) => {
   const labelClasses = (0, import_clsx5.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
+    fontNormal && "font-normal!",
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );

package/dist/components/Toast.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-MXSJF6TW.js";
 import {
   Button
-} from "../chunk-BMAZBFUU.js";
+} from "../chunk-ZMTHWJ7F.js";
 import "../chunk-SBRRNFOP.js";
 import {
   Paragraph

package/dist/components/Tooltip.cjs

@@ -199,12 +199,15 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout/useTableLayout.ts
+var import_react4 = require("react");
+
 // src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.4`;
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
 
-// src/hooks/useTableLayout.ts
-var import_react4 = require("react");
-var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
+// src/hooks/useTableLayout/storage.ts
+var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
+var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/hooks/useEditCell.tsx
 var import_react5 = require("react");

package/dist/components/Tooltip.js

@@ -2,10 +2,10 @@
 import {
   Tooltip
 } from "../chunk-HT57FLRW.js";
-import "../chunk-WOWPMA26.js";
+import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-F7F5BKW5.js";
+import "../chunk-TBZ243DS.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Upload.cjs

@@ -344,7 +344,8 @@ var Button = (_a) => {
     href,
     id,
     testid,
-    isLoading
+    isLoading,
+    fontNormal = false
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -360,7 +361,8 @@ var Button = (_a) => {
     "href",
     "id",
     "testid",
-    "isLoading"
+    "isLoading",
+    "fontNormal"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx4.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -387,6 +389,15 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
   );
+  const quarternaryOutlinedVariantStyles = variant === "quarternary-outlined" && (0, import_clsx4.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-transparent hover:border-border-primary-normal hover:text-text-primary-normal",
+    "focus:bg-transparent focus:border-border-primary-normal focus:text-text-primary-normal focus:outline-0",
+    "active:bg-transparent active:border-transparent active:text-text-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
   const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx4.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
@@ -430,6 +441,7 @@ var Button = (_a) => {
     primaryVariantStyles,
     secondaryVariantStyles,
     tertiaryVariantStyles,
+    quarternaryOutlinedVariantStyles,
     primaryCriticalVariantStyles,
     secondaryCriticalVariantStyles,
     tertiaryCriticalVariantStyles,
@@ -440,6 +452,7 @@ var Button = (_a) => {
   const labelClasses = (0, import_clsx4.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
+    fontNormal && "font-normal!",
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );

package/dist/components/Upload.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-BMAZBFUU.js";
+} from "../chunk-ZMTHWJ7F.js";
 import {
   Spinner
 } from "../chunk-SBRRNFOP.js";