@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/Breadcrumbs.js

@@ -12,25 +12,35 @@ import "../chunk-ORMEWXMH.js";
 import React, { useLayoutEffect, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Breadcrumb = ({ href, children, onClick }) => {
+var Breadcrumb = ({
+  href,
+  children,
+  onClick,
+  id
+}) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
     "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
     "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
     "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
-  return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Link, { className: linkPadding, href, onClick, children }) }, href);
+  return /* @__PURE__ */ jsx("li", { id, className: "flex items-center", children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      id: id ? `${id}-link` : void 0,
+      className: linkPadding,
+      href,
+      onClick,
+      children
+    }
+  ) }, href);
 };
-var Chevron = () => /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 16 }) });
-var Breadcrumbs = ({
-  asCardStyle,
-  crumbs
-}) => {
+var Chevron = () => /* @__PURE__ */ jsx("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 16 }) });
+var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
   const scrollableElement = React.useRef(null);
   const [isOverflow, setIsOverflow] = useState(false);
   useLayoutEffect(() => {
     var _a, _b, _c;
-    console.log(scrollableElement.current);
     (_c = scrollableElement.current) == null ? void 0 : _c.scrollTo({
       left: (_b = (_a = scrollableElement.current) == null ? void 0 : _a.scrollWidth) != null ? _b : 0,
       behavior: "instant"
@@ -46,6 +56,7 @@ var Breadcrumbs = ({
   return /* @__PURE__ */ jsxs(
     "nav",
     {
+      id,
       className: clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -67,6 +78,7 @@ var Breadcrumbs = ({
         /* @__PURE__ */ jsx(
           "ol",
           {
+            id: id ? `${id}-list` : void 0,
             className: "flex items-center overflow-x-scroll",
             style: { scrollbarWidth: "none" },
             onScroll: updateOverflow,
@@ -77,7 +89,15 @@ var Breadcrumbs = ({
               const { href, children, onClick } = crumb;
               return /* @__PURE__ */ jsxs(React.Fragment, { children: [
                 index > 0 && /* @__PURE__ */ jsx(Chevron, {}),
-                /* @__PURE__ */ jsx(Breadcrumb, { href, onClick, children })
+                /* @__PURE__ */ jsx(
+                  Breadcrumb,
+                  {
+                    href,
+                    onClick,
+                    id: id ? `${id}-crumb-${index}` : void 0,
+                    children
+                  }
+                )
               ] }, index);
             })
           }

package/dist/components/Button.cjs

@@ -205,7 +205,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -218,7 +219,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",
@@ -308,6 +310,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -315,7 +318,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
       ]
     })

package/dist/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-T6HZARR7.js";
+} from "../chunk-MZJS2ZAU.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/CalendarRange.cjs

@@ -245,7 +245,8 @@ function DateCell(_a) {
     onMouseEnter,
     onMouseLeave,
     cellPadding = "",
-    isRangeDisabled = false
+    isRangeDisabled = false,
+    id
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -259,11 +260,13 @@ function DateCell(_a) {
     "onMouseEnter",
     "onMouseLeave",
     "cellPadding",
-    "isRangeDisabled"
+    "isRangeDisabled",
+    "id"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      id,
       className: (0, import_clsx3.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -309,7 +312,8 @@ function CalendarRange({
   isDateAvailable,
   mode = "double",
   cardStyle = false,
-  disableRange = false
+  disableRange = false,
+  id
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -378,6 +382,7 @@ function CalendarRange({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx3.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -417,6 +422,7 @@ function CalendarRange({
                           idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx3.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -434,6 +440,7 @@ function CalendarRange({
                           (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
+                              id: id ? `${id}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx3.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -476,6 +483,7 @@ function CalendarRange({
                       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         DateCell,
                         {
+                          id: id ? `${id}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,

package/dist/components/CalendarRange.js

@@ -2,7 +2,7 @@ import {
   CalendarRange,
   CalendarRange_default,
   isWeekend
-} from "../chunk-OUTEIXV4.js";
+} from "../chunk-OUSNH76S.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Caption.cjs

@@ -231,21 +231,32 @@ var Caption = (_a) => {
     as = "span",
     style = "default",
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "style",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WhichIcon, { style, size: 16, className: "mt-[3px] desktop:mt-0" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, className: "flex gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      WhichIcon,
+      {
+        id,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Element,
       __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
         className: (0, import_clsx3.default)(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") && "text-text-secondary-normal",
@@ -269,19 +280,52 @@ var Caption = (_a) => {
 var WhichIcon = ({
   style,
   size,
-  className
+  className,
+  id
 }) => {
   if (style === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className, name: "check_circle", size }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
   }
   if (style === "warning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className, name: "warning", size }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
   }
   if (style === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className, name: "info", size }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
   }
   if (style === "info") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className, name: "info", size }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
   }
   return null;
 };

package/dist/components/Caption.js

@@ -20,21 +20,32 @@ var Caption = (_a) => {
     as = "span",
     style = "default",
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "style",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-    /* @__PURE__ */ jsx(WhichIcon, { style, size: 16, className: "mt-[3px] desktop:mt-0" }),
+  return /* @__PURE__ */ jsxs("div", { id, className: "flex gap-1", children: [
+    /* @__PURE__ */ jsx(
+      WhichIcon,
+      {
+        id,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
     /* @__PURE__ */ jsx(
       Element,
       __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
         className: clsx(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") && "text-text-secondary-normal",
@@ -58,19 +69,52 @@ var Caption = (_a) => {
 var WhichIcon = ({
   style,
   size,
-  className
+  className,
+  id
 }) => {
   if (style === "success") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(Icon, { className, name: "check_circle", size }) });
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
   }
   if (style === "warning") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(Icon, { className, name: "warning", size }) });
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
   }
   if (style === "error") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(Icon, { className, name: "info", size }) });
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
   }
   if (style === "info") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { className, name: "info", size }) });
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
   }
   return null;
 };

package/dist/components/Checkbox.cjs

@@ -235,7 +235,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -244,12 +245,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,
@@ -280,7 +284,8 @@ var Checkbox = (_a) => {
     checked,
     onChange,
     indeterminate,
-    paragraphClassName
+    paragraphClassName,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -289,7 +294,8 @@ var Checkbox = (_a) => {
     "checked",
     "onChange",
     "indeterminate",
-    "paragraphClassName"
+    "paragraphClassName",
+    "id"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx4.default)(
@@ -317,6 +323,8 @@ var Checkbox = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: `${id}-input`,
       className: (0, import_clsx4.default)(
         "flex items-center",
         componentGap,
@@ -328,12 +336,12 @@ var Checkbox = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "input",
             __spreadValues({
+              id: id ? `${id}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
               checked: selected,
               onChange: handleOnChange,
-              id: props.id,
               "data-indeterminate": indeterminate
             }, props)
           ),
@@ -359,6 +367,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Paragraph,
           {
+            id: id ? `${id}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx4.default)(

package/dist/components/Checkbox.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-N32PXOA5.js";
-import "../chunk-UIQ733QP.js";
+} from "../chunk-UT7XCBZF.js";
+import "../chunk-VG4EPHJA.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/ContentTab.cjs

@@ -210,7 +210,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -223,7 +224,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",
@@ -313,6 +315,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -320,7 +323,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
       ]
     })
@@ -337,14 +340,16 @@ var ContentTab = (_a) => {
     className,
     disabled = false,
     onClick,
-    ref
+    ref,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "selected",
     "className",
     "disabled",
     "onClick",
-    "ref"
+    "ref",
+    "id"
   ]);
   const [active, setActive] = (0, import_react.useState)(false);
   const handleClick = (0, import_react.useCallback)(
@@ -364,10 +369,11 @@ var ContentTab = (_a) => {
     !active && disabled && "bg-text-action-primary-disabled",
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Button,
       __spreadProps(__spreadValues({
+        id: id ? `${id}-button` : void 0,
         ref,
         variant: "tertiary",
         disabled,
@@ -381,7 +387,14 @@ var ContentTab = (_a) => {
         children: label
       })
     ),
-    selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: computedClassName, children: " " })
+    selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        id: id ? `${id}-indicator` : void 0,
+        className: computedClassName,
+        children: " "
+      }
+    )
   ] });
 };
 ContentTab.displayName = "ContentTab";

package/dist/components/ContentTab.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-5TLFMKSR.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-INYI65WW.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {