@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/dist/components/Swatch.js

@@ -1,16 +1,16 @@
 import {
   Heading2,
   Heading3
-} from "../chunk-J6LETUNM.js";
+} from "../chunk-AZ7LVLOK.js";
 import {
   Display1
-} from "../chunk-AY7ELVQY.js";
+} from "../chunk-EUXB3XKL.js";
 import {
   Stack
-} from "../chunk-EO3JJWFW.js";
+} from "../chunk-N6JVLYEE.js";
 import {
   Paragraph
-} from "../chunk-VG4EPHJA.js";
+} from "../chunk-HVI3CL7Y.js";
 import {
   typography
 } from "../chunk-RDLEIAQU.js";

package/dist/components/Textarea.cjs

@@ -215,11 +215,13 @@ var textareaReadOnlyClass = (0, import_clsx2.default)(
 var Textarea = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     caption
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "caption"
@@ -254,6 +256,7 @@ var Textarea = (_a) => {
           "textarea",
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
             id,
+            "data-testid": testid,
             className: (0, import_clsx2.default)(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -265,7 +268,7 @@ var Textarea = (_a) => {
             )
           })
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );

package/dist/components/Textarea.js

@@ -36,11 +36,13 @@ var textareaReadOnlyClass = clsx(
 var Textarea = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     caption
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "caption"
@@ -75,6 +77,7 @@ var Textarea = (_a) => {
           "textarea",
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
             id,
+            "data-testid": testid,
             className: clsx(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -86,7 +89,7 @@ var Textarea = (_a) => {
             )
           })
         ),
-        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );

package/dist/components/Theme.cjs

@@ -28,12 +28,14 @@ function Theme({
   theme,
   children,
   id,
+  testid,
   ref
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: "contents",
       "data-theme": theme,
       ref: (e) => {

package/dist/components/Theme.js

@@ -1,6 +1,6 @@
 import {
   Theme
-} from "../chunk-6DONKNDT.js";
+} from "../chunk-EWGHVZL5.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Theme

package/dist/components/Time.cjs

@@ -204,20 +204,23 @@ var Label = (_a) => {
     className,
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -242,17 +245,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,
@@ -305,6 +311,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -323,6 +330,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -387,6 +395,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
@@ -439,6 +448,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx4.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -456,7 +466,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -471,7 +481,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -481,30 +492,30 @@ var Input = (_a) => {
     "onChange",
     "onBlur",
     "onClear",
-    "id"
+    "id",
+    "testid"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
     var _a2;
     const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (variant === "currency") {
-      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
     }
-  }, [propValue, decimals, variant]);
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
+    }
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -557,6 +568,7 @@ var Input = (_a) => {
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
+            testid: testid ? `${testid}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -588,14 +600,6 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -632,6 +636,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -656,7 +663,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -773,7 +781,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -809,14 +818,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -882,7 +893,7 @@ var Stack = (_a) => {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 var Time = (_a) => {
-  var _b = _a, { onChange, format = "12h", id } = _b, props = __objRest(_b, ["onChange", "format", "id"]);
+  var _b = _a, { onChange, format = "12h", id, testid } = _b, props = __objRest(_b, ["onChange", "format", "id", "testid"]);
   const [showTimePicker, setShowTimePicker] = (0, import_react2.useState)(false);
   const [hasInteracted, setHasInteracted] = (0, import_react2.useState)(false);
   const inputRef = (0, import_react2.useRef)(null);
@@ -1091,6 +1102,7 @@ var Time = (_a) => {
       TimeCell,
       {
         id: id ? `${id}-${type}-${val}` : void 0,
+        testid: testid ? `${testid}-${type}-${val}` : void 0,
         selected: isSelected,
         ref: isSelected ? (el) => {
           selectedRefs[type].current = el;
@@ -1107,6 +1119,7 @@ var Time = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({}, props), {
         id,
+        testid,
         ref: inputRef,
         inputContainerRef,
         value: inputValue,
@@ -1162,6 +1175,7 @@ var Time = (_a) => {
 function TimeCell(_a) {
   var _b = _a, {
     id,
+    testid,
     selected = false,
     start = false,
     intermediate = false,
@@ -1176,6 +1190,7 @@ function TimeCell(_a) {
     ref
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "selected",
     "start",
     "intermediate",
@@ -1195,6 +1210,7 @@ function TimeCell(_a) {
     "button",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       onPointerOver: onHover,
       onClick,
       onKeyDown,

package/dist/components/Time.js

@@ -3,15 +3,15 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-R5TLUWDD.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-S5K22XTH.js";
+import "../chunk-JWCT72WR.js";
 import {
   Stack
-} from "../chunk-EO3JJWFW.js";
+} from "../chunk-N6JVLYEE.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import {
   typography
 } from "../chunk-RDLEIAQU.js";
@@ -28,7 +28,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 var Time = (_a) => {
-  var _b = _a, { onChange, format = "12h", id } = _b, props = __objRest(_b, ["onChange", "format", "id"]);
+  var _b = _a, { onChange, format = "12h", id, testid } = _b, props = __objRest(_b, ["onChange", "format", "id", "testid"]);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef(null);
@@ -237,6 +237,7 @@ var Time = (_a) => {
       TimeCell,
       {
         id: id ? `${id}-${type}-${val}` : void 0,
+        testid: testid ? `${testid}-${type}-${val}` : void 0,
         selected: isSelected,
         ref: isSelected ? (el) => {
           selectedRefs[type].current = el;
@@ -253,6 +254,7 @@ var Time = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({}, props), {
         id,
+        testid,
         ref: inputRef,
         inputContainerRef,
         value: inputValue,
@@ -308,6 +310,7 @@ var Time = (_a) => {
 function TimeCell(_a) {
   var _b = _a, {
     id,
+    testid,
     selected = false,
     start = false,
     intermediate = false,
@@ -322,6 +325,7 @@ function TimeCell(_a) {
     ref
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "selected",
     "start",
     "intermediate",
@@ -341,6 +345,7 @@ function TimeCell(_a) {
     "button",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       onPointerOver: onHover,
       onClick,
       onKeyDown,

package/dist/components/Toast.cjs

@@ -206,7 +206,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -214,7 +215,8 @@ var Heading = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
@@ -222,6 +224,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -258,7 +261,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -268,13 +272,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
@@ -302,17 +308,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "icon",
         `icon-${size}`,
@@ -344,7 +353,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -358,7 +368,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx5.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -446,6 +457,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -455,7 +467,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -532,6 +544,7 @@ function getToastRoot() {
 var Toast = (_a) => {
   var _b = _a, {
     id,
+    testid,
     variant = "success",
     title,
     message,
@@ -542,6 +555,7 @@ var Toast = (_a) => {
     showViewButton = false
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "variant",
     "title",
     "message",
@@ -612,6 +626,7 @@ var Toast = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       ref: toastElementRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -627,13 +642,14 @@ var Toast = (_a) => {
         iconElement,
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", layoutGroupGap), children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex flex-col w-68", componentGap), children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-title` : void 0, children: title }),
-            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { id: id ? `${id}-message` : void 0, children: message })
+            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { testid: testid ? `${testid}-title` : void 0, id: id ? `${id}-title` : void 0, children: title }),
+            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { testid: testid ? `${testid}-message` : void 0, id: id ? `${id}-message` : void 0, children: message })
           ] }),
           showViewButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Button,
             {
               id: id ? `${id}-view-button` : void 0,
+              testid: testid ? `${testid}-view-button` : void 0,
               variant: "tertiary",
               href: viewButtonLink,
               children: "View"
@@ -659,6 +675,7 @@ function createToast(config) {
       Toast,
       {
         id: config.id,
+        testid: config.testid,
         show: true,
         onClose: handleClose,
         variant: config.variant,

package/dist/components/Toast.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Heading3
-} from "../chunk-J6LETUNM.js";
+} from "../chunk-AZ7LVLOK.js";
 import {
   Paragraph
-} from "../chunk-VG4EPHJA.js";
+} from "../chunk-HVI3CL7Y.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import {
   componentGap,
   componentPadding,
@@ -93,6 +93,7 @@ function getToastRoot() {
 var Toast = (_a) => {
   var _b = _a, {
     id,
+    testid,
     variant = "success",
     title,
     message,
@@ -103,6 +104,7 @@ var Toast = (_a) => {
     showViewButton = false
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "variant",
     "title",
     "message",
@@ -173,6 +175,7 @@ var Toast = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       ref: toastElementRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -188,13 +191,14 @@ var Toast = (_a) => {
         iconElement,
         /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
           /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col w-68", componentGap), children: [
-            title && /* @__PURE__ */ jsx(Heading3, { id: id ? `${id}-title` : void 0, children: title }),
-            message && /* @__PURE__ */ jsx(Paragraph, { id: id ? `${id}-message` : void 0, children: message })
+            title && /* @__PURE__ */ jsx(Heading3, { testid: testid ? `${testid}-title` : void 0, id: id ? `${id}-title` : void 0, children: title }),
+            message && /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-message` : void 0, id: id ? `${id}-message` : void 0, children: message })
           ] }),
           showViewButton && /* @__PURE__ */ jsx(
             Button,
             {
               id: id ? `${id}-view-button` : void 0,
+              testid: testid ? `${testid}-view-button` : void 0,
               variant: "tertiary",
               href: viewButtonLink,
               children: "View"
@@ -220,6 +224,7 @@ function createToast(config) {
       Toast,
       {
         id: config.id,
+        testid: config.testid,
         show: true,
         onClose: handleClose,
         variant: config.variant,

package/dist/components/Tooltip.cjs

@@ -168,6 +168,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tooltip = ({
   id,
+  testid,
   message,
   position = "top",
   children,
@@ -234,6 +235,7 @@ var Tooltip = ({
     "div",
     {
       id,
+      "data-testid": testid,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -245,6 +247,7 @@ var Tooltip = ({
             "div",
             {
               id: id ? `${id}-message` : void 0,
+              "data-testid": testid ? `${testid}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",