@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/OptionPill.cjs

@@ -206,7 +206,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -219,7 +220,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",
@@ -309,6 +311,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -316,7 +319,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
       ]
     })
@@ -333,18 +336,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",
@@ -398,6 +404,7 @@ function Icon(_a) {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var OptionPill = (_a) => {
   var _b = _a, {
+    id,
     selected = false,
     onClick,
     onRemove,
@@ -406,6 +413,7 @@ var OptionPill = (_a) => {
     children,
     className
   } = _b, props = __objRest(_b, [
+    "id",
     "selected",
     "onClick",
     "onRemove",
@@ -436,6 +444,7 @@ var OptionPill = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     __spreadProps(__spreadValues(__spreadValues({
+      id,
       onClick: handleOnClick
     }, props), additionalAttributes), {
       className: (0, import_clsx5.default)(
@@ -449,10 +458,19 @@ var OptionPill = (_a) => {
         textColor
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Label,
+          {
+            id: id ? `${id}-label` : void 0,
+            padded: true,
+            className: componentPaddingYUsingComponentGap,
+            children
+          }
+        ),
         removable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
+            id: id ? `${id}-remove-button` : void 0,
             onClick: handleOnRemove,
             disabled,
             className: (0, import_clsx5.default)(

package/dist/components/OptionPill.js

@@ -1,8 +1,8 @@
 import {
   OptionPill
-} from "../chunk-Z2LOGSGE.js";
-import "../chunk-S7R37IUP.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-4N2PED4P.js";
+import "../chunk-S5K22XTH.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Paragraph.cjs

@@ -201,7 +201,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -210,12 +211,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx2.default)(
         typography.paragraph,
         className,

package/dist/components/Paragraph.js

@@ -1,6 +1,6 @@
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Password.cjs

@@ -204,18 +204,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",
@@ -302,6 +305,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -318,6 +322,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -339,6 +344,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;
@@ -379,6 +385,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",
@@ -392,6 +400,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"
               ),
@@ -428,7 +437,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",
@@ -446,7 +455,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -460,7 +469,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -469,7 +479,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -495,7 +506,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) {
@@ -542,6 +555,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"
@@ -672,21 +686,28 @@ Percentage.displayName = "Percentage";
 // src/components/Password.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Password = (_a) => {
-  var props = __objRest(_a, []);
+  var _b = _a, {
+    id
+  } = _b, props = __objRest(_b, [
+    "id"
+  ]);
   const [show, setShow] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     InputBase,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       type: show ? "text" : "password",
-      after: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhichIcon, { show, setShow })
+      after: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhichIcon, { id, show, setShow })
     })
   );
 };
-var WhichIcon = ({ show, setShow }) => {
+var WhichIcon = ({ id, show, setShow }) => {
   if (show) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Icon,
       {
+        id: id ? `${id}-toggle-visibility` : void 0,
         name: "visibility_off",
         className: "cursor-pointer",
         onClick: () => setShow(false)
@@ -696,6 +717,7 @@ var WhichIcon = ({ show, setShow }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Icon,
     {
+      id: id ? `${id}-toggle-visibility` : void 0,
       name: "visibility",
       className: "cursor-pointer",
       onClick: () => setShow(true)

package/dist/components/Password.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   InputBase
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -17,21 +17,28 @@ import {
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var Password = (_a) => {
-  var props = __objRest(_a, []);
+  var _b = _a, {
+    id
+  } = _b, props = __objRest(_b, [
+    "id"
+  ]);
   const [show, setShow] = useState(false);
   return /* @__PURE__ */ jsx(
     InputBase,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       type: show ? "text" : "password",
-      after: /* @__PURE__ */ jsx(WhichIcon, { show, setShow })
+      after: /* @__PURE__ */ jsx(WhichIcon, { id, show, setShow })
     })
   );
 };
-var WhichIcon = ({ show, setShow }) => {
+var WhichIcon = ({ id, show, setShow }) => {
   if (show) {
     return /* @__PURE__ */ jsx(
       Icon,
       {
+        id: id ? `${id}-toggle-visibility` : void 0,
         name: "visibility_off",
         className: "cursor-pointer",
         onClick: () => setShow(false)
@@ -41,6 +48,7 @@ var WhichIcon = ({ show, setShow }) => {
   return /* @__PURE__ */ jsx(
     Icon,
     {
+      id: id ? `${id}-toggle-visibility` : void 0,
       name: "visibility",
       className: "cursor-pointer",
       onClick: () => setShow(true)

package/dist/components/ProjectBar.cjs

@@ -205,7 +205,8 @@ var ProjectBar = ({
   left,
   right,
   mobileLeft,
-  mobileRight
+  mobileRight,
+  id
 }) => {
   const isMobile = useMatchesMobile();
   const tokenOverrides = isMobile ? {
@@ -227,6 +228,7 @@ var ProjectBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      id,
       style: __spreadValues({}, tokenOverrides),
       className: (0, import_clsx2.default)(
         "flex items-center justify-between",

package/dist/components/ProjectBar.js

@@ -18,7 +18,8 @@ var ProjectBar = ({
   left,
   right,
   mobileLeft,
-  mobileRight
+  mobileRight,
+  id
 }) => {
   const isMobile = useMatchesMobile();
   const tokenOverrides = isMobile ? {
@@ -40,6 +41,7 @@ var ProjectBar = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       style: __spreadValues({}, tokenOverrides),
       className: clsx(
         "flex items-center justify-between",

package/dist/components/Radio.cjs

@@ -203,7 +203,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -212,12 +213,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx2.default)(
         typography.paragraph,
         className,
@@ -246,16 +250,18 @@ var Radio = (_a) => {
     error,
     disabled,
     checked,
-    readOnly
+    readOnly,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "label",
     "error",
     "disabled",
     "checked",
-    "readOnly"
+    "readOnly",
+    "id"
   ]);
-  const radioId = props.id;
+  const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
   const defaultClassName = (0, import_clsx3.default)(
     !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
@@ -318,7 +324,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Paragraph, { padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
       ]
     }
   );

package/dist/components/Radio.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import {
   baseTransition,
   componentGap
@@ -21,16 +21,18 @@ var Radio = (_a) => {
     error,
     disabled,
     checked,
-    readOnly
+    readOnly,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "label",
     "error",
     "disabled",
     "checked",
-    "readOnly"
+    "readOnly",
+    "id"
   ]);
-  const radioId = props.id;
+  const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
   const defaultClassName = clsx(
     !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
@@ -93,7 +95,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ jsx(Paragraph, { padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ jsx(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
       ]
     }
   );

package/dist/components/Search.cjs

@@ -204,18 +204,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",
@@ -302,6 +305,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -318,6 +322,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -339,6 +344,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;
@@ -379,6 +385,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",
@@ -392,6 +400,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"
               ),
@@ -428,7 +437,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",
@@ -446,7 +455,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -460,7 +469,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -469,7 +479,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -495,7 +506,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) {
@@ -542,6 +555,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"
@@ -673,23 +687,23 @@ Percentage.displayName = "Percentage";
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
     readOnly,
     renderMenu,
     onClick,
-    className,
     wrapperClassName,
     removeRoundness
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
     "readOnly",
     "renderMenu",
     "onClick",
-    "className",
     "wrapperClassName",
     "removeRoundness"
   ]);
@@ -712,6 +726,7 @@ var Search = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Input,
       __spreadValues({
+        id,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -735,10 +750,14 @@ var Search = (_a) => {
           setShow(true);
           if (["ArrowUp", "ArrowDown"].includes(e.key)) {
             e.preventDefault();
-            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const menu = document.querySelector(
+              `[data-menu="${searchMenuName}"]`
+            );
             const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
             if (selectedMenuOption) {
-              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const allMenuOptions = Array.from(
+                (menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
+              );
               const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
               let targetOption;
               if (e.key === "ArrowDown") {
@@ -748,7 +767,9 @@ var Search = (_a) => {
               }
               targetOption == null ? void 0 : targetOption.focus();
             } else {
-              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
+                '[role="menuitem"]:last-child'
+              );
               toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
             }
           }
@@ -760,6 +781,7 @@ var Search = (_a) => {
       }, props)
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,