@dmsi/wedgekit-react 0.0.498 → 0.0.500

package/dist/components/Stepper.cjs

@@ -344,7 +344,7 @@ Button.displayName = "Button";
 
 // src/components/Input.tsx
 var import_react = require("react");
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 
 // src/components/Label.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
@@ -458,14 +458,68 @@ function formatCurrencyDisplay(value) {
   return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
 }
 
-// src/components/Input.tsx
+// src/components/Paragraph.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id",
+    "testid"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      className: (0, import_clsx5.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -489,6 +543,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -527,7 +582,7 @@ var InputBase = (_a) => {
       };
     }
   }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx5.default)(
+  const inputBaseClass = (0, import_clsx6.default)(
     fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
@@ -540,26 +595,26 @@ var InputBase = (_a) => {
     !removeBorder && "border border-border-primary-normal",
     "relative"
   );
-  const inputFocusClass = (0, import_clsx5.default)(
+  const inputFocusClass = (0, import_clsx6.default)(
     "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
   );
-  const inputDisabledClass = (0, import_clsx5.default)(
+  const inputDisabledClass = (0, import_clsx6.default)(
     "has-disabled:bg-background-action-secondary-disabled"
   );
-  const inputReadOnlyClass = (0, import_clsx5.default)(
+  const inputReadOnlyClass = (0, import_clsx6.default)(
     "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
   );
-  const inputInvalidClass = (0, import_clsx5.default)(
+  const inputInvalidClass = (0, import_clsx6.default)(
     "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "label",
     {
       id,
       "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "w-full flex flex-col",
         "block",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -567,30 +622,30 @@ var InputBase = (_a) => {
       ),
       style: __spreadValues({}, props.style),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Label,
             {
               id: id ? `${id}-label` : void 0,
               color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx5.default)(
+              className: (0, import_clsx6.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
               children: label
             }
           ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "span",
             {
-              className: (0, import_clsx5.default)(typography.label, "text-text-critical-normal"),
+              className: (0, import_clsx6.default)(typography.label, "text-text-critical-normal"),
               children: "*"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
-            className: (0, import_clsx5.default)(
+            className: (0, import_clsx6.default)(
               inputBaseClass,
               !props.disabled && inputInvalidClass,
               inputFocusClass,
@@ -605,7 +660,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -616,7 +671,7 @@ var InputBase = (_a) => {
                 }, props), attributes), {
                   id: inputId,
                   "data-testid": testid ? `${testid}-input` : void 0,
-                  className: (0, import_clsx5.default)(
+                  className: (0, import_clsx6.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",
                     "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
@@ -630,11 +685,12 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
+              rightAdornment
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             id: id ? `${id}-caption` : void 0,
@@ -657,7 +713,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -668,7 +725,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -690,7 +748,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
+  }, [variant, propValue, decimals]);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -727,9 +785,9 @@ var Input = (_a) => {
     if (props.before) return props.before;
     switch (variant) {
       case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" }) }) : null;
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "search" }) }) : null;
       case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "attach_money" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "attach_money" }) });
       default:
         return null;
     }
@@ -739,7 +797,7 @@ var Input = (_a) => {
     switch (variant) {
       case "search": {
         const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
@@ -751,11 +809,11 @@ var Input = (_a) => {
         ) : null;
       }
       case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" });
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "percent" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "percent" }) });
       default:
         return null;
     }
@@ -832,27 +890,28 @@ var Input = (_a) => {
     onBlur == null ? void 0 : onBlur(e);
   };
   const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     InputBase,
     __spreadProps(__spreadValues({}, inputProps), {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };
 Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
 var Currency = (props) => {
   var _a;
   const handleCurrencyChange = (e) => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Input,
     __spreadProps(__spreadValues({}, props), {
       variant: "currency",
@@ -861,15 +920,15 @@ var Currency = (props) => {
     })
   );
 };
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
 Finder.displayName = "Finder";
 UOM.displayName = "UOM";
 Currency.displayName = "Currency";
 Percentage.displayName = "Percentage";
 
 // src/components/Stepper.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Stepper = (_a) => {
   var _b = _a, {
     error,
@@ -898,36 +957,36 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx6.default)("flex items-center", componentGap),
+      className: (0, import_clsx7.default)("flex items-center", componentGap),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
           {
             id: id ? `${id}-decrease-button` : void 0,
             testid: testid ? `${testid}-decrease-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
-                className: (0, import_clsx6.default)(
+                className: (0, import_clsx7.default)(
                   !disabled || value > 0 && "text-icon-action-primary-normal",
                   disabled || value === 0 && "text-icon-action-primary-disabled",
                   "contents"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "remove" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "remove" })
               }
             ),
             onClick: handleDecrease,
             disabled: disabled || value === 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           InputBase,
           __spreadProps(__spreadValues({}, props), {
             id: id ? `${id}-input` : void 0,
@@ -941,22 +1000,22 @@ var Stepper = (_a) => {
             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"
           })
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
           {
             id: id ? `${id}-increase-button` : void 0,
             testid: testid ? `${testid}-increase-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
-                className: (0, import_clsx6.default)(
+                className: (0, import_clsx7.default)(
                   !disabled && "text-icon-action-primary-normal",
                   disabled && "text-icon-action-primary-disabled",
                   "contents"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "add" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "add" })
               }
             ),
             onClick: handleIncrease,

package/dist/components/Stepper.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   InputBase
-} from "../chunk-44TH3VC7.js";
+} from "../chunk-G4AWTFBQ.js";
 import "../chunk-AL5QIRY3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-ZSETMD4A.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";