@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/Textarea.cjs

@@ -214,10 +214,12 @@ var textareaReadOnlyClass = (0, import_clsx2.default)(
 );
 var Textarea = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     caption
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "caption"
@@ -228,6 +230,7 @@ var Textarea = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "label",
     {
+      htmlFor: id,
       className: (0, import_clsx2.default)(
         "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -250,7 +253,7 @@ var Textarea = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "textarea",
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
-            id: props.id,
+            id,
             className: (0, import_clsx2.default)(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -262,7 +265,7 @@ var Textarea = (_a) => {
             )
           })
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );

package/dist/components/Textarea.js

@@ -35,10 +35,12 @@ var textareaReadOnlyClass = clsx(
 );
 var Textarea = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     caption
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "caption"
@@ -49,6 +51,7 @@ var Textarea = (_a) => {
   return /* @__PURE__ */ jsxs(
     "label",
     {
+      htmlFor: id,
       className: clsx(
         "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -71,7 +74,7 @@ var Textarea = (_a) => {
         /* @__PURE__ */ jsx(
           "textarea",
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
-            id: props.id,
+            id,
             className: clsx(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -83,7 +86,7 @@ var Textarea = (_a) => {
             )
           })
         ),
-        caption
+        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );

package/dist/components/Theme.cjs

@@ -26,9 +26,10 @@ module.exports = __toCommonJS(Theme_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Theme({
   theme,
-  children
+  children,
+  id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "contents", "data-theme": theme, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, className: "contents", "data-theme": theme, children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/Theme.js

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

package/dist/components/Time.cjs

@@ -203,18 +203,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_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -301,6 +304,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -317,6 +321,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -338,6 +343,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;
@@ -378,6 +384,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
         "w-full flex flex-col",
@@ -391,6 +399,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -427,7 +436,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   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",
@@ -445,7 +454,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -459,7 +468,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -468,7 +478,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -494,7 +505,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) {
@@ -541,6 +554,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.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"
@@ -713,38 +727,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
   justify === "between" && "justify-between",
   justify === "around" && "justify-around"
 );
-var Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left
-}) => {
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id"
+  ]);
   const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
@@ -792,7 +838,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -800,7 +846,7 @@ var Stack = ({
 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" } = _b, props = __objRest(_b, ["onChange", "format"]);
+  var _b = _a, { onChange, format = "12h", id } = _b, props = __objRest(_b, ["onChange", "format", "id"]);
   const [showTimePicker, setShowTimePicker] = (0, import_react2.useState)(false);
   const [hasInteracted, setHasInteracted] = (0, import_react2.useState)(false);
   const inputRef = (0, import_react2.useRef)(null);
@@ -996,12 +1042,19 @@ var Time = (_a) => {
         }
       }, 0);
     }
-  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
+  }, [
+    showTimePicker,
+    is12HourFormat,
+    selectedRefs.hour,
+    selectedRefs.minute,
+    selectedRefs.meridiem
+  ]);
   const renderOptions = (items, type) => items.map((val) => {
     const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       TimeCell,
       {
+        id: id ? `${id}-${type}-${val}` : void 0,
         selected: isSelected,
         ref: isSelected ? (el) => {
           selectedRefs[type].current = el;
@@ -1017,6 +1070,7 @@ var Time = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
       __spreadProps(__spreadValues({}, props), {
+        id,
         ref: inputRef,
         inputContainerRef,
         value: inputValue,
@@ -1033,6 +1087,7 @@ var Time = (_a) => {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Stack,
         {
+          id: id ? `${id}-timepicker` : void 0,
           elevation: 4,
           height: 240,
           position: "absolute",
@@ -1049,7 +1104,7 @@ var Time = (_a) => {
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
               Array.from(
                 { length: is12HourFormat ? 12 : 24 },
-                (_, i) => (i + 1).toString().padStart(2, "0")
+                (_, i) => (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0")
               ),
               "hour"
             ) }),
@@ -1070,6 +1125,7 @@ var Time = (_a) => {
 };
 function TimeCell(_a) {
   var _b = _a, {
+    id,
     selected = false,
     start = false,
     intermediate = false,
@@ -1083,6 +1139,7 @@ function TimeCell(_a) {
     className,
     ref
   } = _b, props = __objRest(_b, [
+    "id",
     "selected",
     "start",
     "intermediate",
@@ -1101,6 +1158,7 @@ function TimeCell(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     __spreadProps(__spreadValues({
+      id,
       onPointerOver: onHover,
       onClick,
       onKeyDown,

package/dist/components/Time.js

@@ -1,13 +1,13 @@
 import {
   Stack
-} from "../chunk-U42SKNR6.js";
+} from "../chunk-57WRM337.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -27,7 +27,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" } = _b, props = __objRest(_b, ["onChange", "format"]);
+  var _b = _a, { onChange, format = "12h", id } = _b, props = __objRest(_b, ["onChange", "format", "id"]);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef(null);
@@ -223,12 +223,19 @@ var Time = (_a) => {
         }
       }, 0);
     }
-  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
+  }, [
+    showTimePicker,
+    is12HourFormat,
+    selectedRefs.hour,
+    selectedRefs.minute,
+    selectedRefs.meridiem
+  ]);
   const renderOptions = (items, type) => items.map((val) => {
     const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
     return /* @__PURE__ */ jsx(
       TimeCell,
       {
+        id: id ? `${id}-${type}-${val}` : void 0,
         selected: isSelected,
         ref: isSelected ? (el) => {
           selectedRefs[type].current = el;
@@ -244,6 +251,7 @@ var Time = (_a) => {
     /* @__PURE__ */ jsx(
       InputBase,
       __spreadProps(__spreadValues({}, props), {
+        id,
         ref: inputRef,
         inputContainerRef,
         value: inputValue,
@@ -260,6 +268,7 @@ var Time = (_a) => {
       /* @__PURE__ */ jsx(
         Stack,
         {
+          id: id ? `${id}-timepicker` : void 0,
           elevation: 4,
           height: 240,
           position: "absolute",
@@ -276,7 +285,7 @@ var Time = (_a) => {
             /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
               Array.from(
                 { length: is12HourFormat ? 12 : 24 },
-                (_, i) => (i + 1).toString().padStart(2, "0")
+                (_, i) => (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0")
               ),
               "hour"
             ) }),
@@ -297,6 +306,7 @@ var Time = (_a) => {
 };
 function TimeCell(_a) {
   var _b = _a, {
+    id,
     selected = false,
     start = false,
     intermediate = false,
@@ -310,6 +320,7 @@ function TimeCell(_a) {
     className,
     ref
   } = _b, props = __objRest(_b, [
+    "id",
     "selected",
     "start",
     "intermediate",
@@ -328,6 +339,7 @@ function TimeCell(_a) {
   return /* @__PURE__ */ jsx(
     "button",
     __spreadProps(__spreadValues({
+      id,
       onPointerOver: onHover,
       onClick,
       onKeyDown,

package/dist/components/Toast.cjs

@@ -205,20 +205,23 @@ var Heading = (_a) => {
     as,
     color,
     align,
-    variant = "heading1"
+    variant = "heading1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -254,7 +257,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -263,12 +267,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
         className,
@@ -336,7 +343,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -349,7 +357,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx5.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -439,6 +448,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -446,7 +456,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -522,6 +532,7 @@ function getToastRoot() {
 }
 var Toast = (_a) => {
   var _b = _a, {
+    id,
     variant = "success",
     title,
     message,
@@ -531,6 +542,7 @@ var Toast = (_a) => {
     viewButtonLink,
     showViewButton = false
   } = _b, props = __objRest(_b, [
+    "id",
     "variant",
     "title",
     "message",
@@ -548,9 +560,7 @@ var Toast = (_a) => {
   (0, import_react.useEffect)(() => {
     if (show && !showToast) {
       if (toastElementRef.current) {
-        const animation = slideInFromBottomAnimation(
-          toastElementRef.current
-        );
+        const animation = slideInFromBottomAnimation(toastElementRef.current);
         animationRef.current = animation;
         animation.onfinish = () => {
           onClose == null ? void 0 : onClose();
@@ -582,7 +592,10 @@ var Toast = (_a) => {
       animationRef.current.addEventListener("finish", handleAnimationEnd);
       return () => {
         if (animationRef.current) {
-          animationRef.current.removeEventListener("finish", handleAnimationEnd);
+          animationRef.current.removeEventListener(
+            "finish",
+            handleAnimationEnd
+          );
         }
       };
     }
@@ -599,6 +612,7 @@ var Toast = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     __spreadProps(__spreadValues({
+      id,
       ref: toastElementRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -614,10 +628,18 @@ 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, { children: title }),
-            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { children: message })
+            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 })
           ] }),
-          showViewButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "tertiary", href: viewButtonLink, children: "View" })
+          showViewButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              id: id ? `${id}-view-button` : void 0,
+              variant: "tertiary",
+              href: viewButtonLink,
+              children: "View"
+            }
+          )
         ] })
       ]
     })
@@ -637,6 +659,7 @@ function createToast(config) {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Toast,
       {
+        id: config.id,
         show: true,
         onClose: handleClose,
         variant: config.variant,