@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/Stepper.cjs

@@ -208,7 +208,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -221,7 +222,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -311,6 +313,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -318,7 +321,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -339,18 +342,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx3.default)(
         typography.label,
         align === "left" && "text-left",
@@ -437,6 +443,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -453,6 +460,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -474,6 +482,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -514,6 +523,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx5.default)(
         "w-full flex flex-col",
@@ -527,6 +538,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx5.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -563,7 +575,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx5.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",
@@ -581,7 +593,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -595,7 +607,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -604,7 +617,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -630,7 +644,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -677,6 +693,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -814,14 +831,16 @@ var Stepper = (_a) => {
     value,
     setValue,
     onDecrease,
-    onIncrease
+    onIncrease,
+    id
   } = _b, props = __objRest(_b, [
     "error",
     "disabled",
     "value",
     "setValue",
     "onDecrease",
-    "onIncrease"
+    "onIncrease",
+    "id"
   ]);
   function handleIncrease() {
     setValue((prevVal) => prevVal + 1);
@@ -831,13 +850,11 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)(
-    "flex items-center",
-    componentGap
-  ), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Button,
       {
+        id: id ? `${id}-decrease-button` : void 0,
         iconOnly: true,
         variant: "tertiary",
         leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -858,7 +875,7 @@ var Stepper = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
       __spreadProps(__spreadValues({}, props), {
-        id: props.id,
+        id: id ? `${id}-input` : void 0,
         type: "number",
         align: "center",
         value,
@@ -871,6 +888,7 @@ var Stepper = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Button,
       {
+        id: id ? `${id}-increase-button` : void 0,
         iconOnly: true,
         variant: "tertiary",
         leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(

package/dist/components/Stepper.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   InputBase
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import {
   Button
-} from "../chunk-T6HZARR7.js";
+} from "../chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -28,14 +28,16 @@ var Stepper = (_a) => {
     value,
     setValue,
     onDecrease,
-    onIncrease
+    onIncrease,
+    id
   } = _b, props = __objRest(_b, [
     "error",
     "disabled",
     "value",
     "setValue",
     "onDecrease",
-    "onIncrease"
+    "onIncrease",
+    "id"
   ]);
   function handleIncrease() {
     setValue((prevVal) => prevVal + 1);
@@ -45,13 +47,11 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx(
-    "flex items-center",
-    componentGap
-  ), children: [
+  return /* @__PURE__ */ jsxs("div", { id, className: clsx("flex items-center", componentGap), children: [
     /* @__PURE__ */ jsx(
       Button,
       {
+        id: id ? `${id}-decrease-button` : void 0,
         iconOnly: true,
         variant: "tertiary",
         leftIcon: /* @__PURE__ */ jsx(
@@ -72,7 +72,7 @@ var Stepper = (_a) => {
     /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
       InputBase,
       __spreadProps(__spreadValues({}, props), {
-        id: props.id,
+        id: id ? `${id}-input` : void 0,
         type: "number",
         align: "center",
         value,
@@ -85,6 +85,7 @@ var Stepper = (_a) => {
     /* @__PURE__ */ jsx(
       Button,
       {
+        id: id ? `${id}-increase-button` : void 0,
         iconOnly: true,
         variant: "tertiary",
         leftIcon: /* @__PURE__ */ jsx(

package/dist/components/Subheader.cjs

@@ -199,19 +199,22 @@ var Subheader = (_a) => {
     as = "span",
     align,
     color,
-    tall
+    tall,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "align",
     "color",
-    "tall"
+    "tall",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.subheader,
         className,

package/dist/components/Subheader.js

@@ -1,6 +1,6 @@
 import {
   Subheader
-} from "../chunk-ZCBSLV7U.js";
+} from "../chunk-O4M2GISS.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Surface.cjs

@@ -68,15 +68,18 @@ var Surface = (_a) => {
   var _b = _a, {
     children,
     className,
-    elevation = 0
+    elevation = 0,
+    id
   } = _b, props = __objRest(_b, [
     "children",
     "className",
-    "elevation"
+    "elevation",
+    "id"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx.default)(
         "rounded-base",
         {

package/dist/components/Surface.js

@@ -11,15 +11,18 @@ var Surface = (_a) => {
   var _b = _a, {
     children,
     className,
-    elevation = 0
+    elevation = 0,
+    id
   } = _b, props = __objRest(_b, [
     "children",
     "className",
-    "elevation"
+    "elevation",
+    "id"
   ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         "rounded-base",
         {