@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/components/ContentTabs.cjs

@@ -214,7 +214,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -227,7 +228,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",
@@ -317,6 +319,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -324,7 +327,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
       ]
     })
@@ -341,14 +344,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)(
@@ -368,10 +373,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,
@@ -385,7 +391,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";
@@ -393,16 +406,16 @@ ContentTab.displayName = "ContentTab";
 // src/components/ContentTabs.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
-var ContentTabs = ({ tabs, onTabChange }) => {
+var ContentTabs = ({ tabs, onTabChange, id }) => {
   var _a, _b;
   const [selectedTab, setSelectedTab] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
   const [focusedTabIndex, setFocusedTabIndex] = (0, import_react2.useState)(0);
   const tabRefs = (0, import_react2.useRef)([]);
   const handleTabClick = (0, import_react2.useCallback)(
-    (id, index) => {
-      setSelectedTab(id);
+    (id2, index) => {
+      setSelectedTab(id2);
       setFocusedTabIndex(index);
-      onTabChange == null ? void 0 : onTabChange(id);
+      onTabChange == null ? void 0 : onTabChange(id2);
     },
     [onTabChange]
   );
@@ -418,17 +431,18 @@ var ContentTabs = ({ tabs, onTabChange }) => {
     } else {
       return;
     }
-    const id = tabs[newIndex].id;
-    setSelectedTab(id);
-    onTabChange == null ? void 0 : onTabChange(id);
+    const tabId = tabs[newIndex].id;
+    setSelectedTab(tabId);
+    onTabChange == null ? void 0 : onTabChange(tabId);
     (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
     setFocusedTabIndex(newIndex);
   };
   const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
+        id: id ? `${id}-tablist` : void 0,
         role: "tablist",
         "aria-orientation": "horizontal",
         className: (0, import_clsx4.default)("flex relative", afterClasses),
@@ -438,7 +452,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
           return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             ContentTab,
             {
-              id: `tab-${tab.id}`,
+              id: id ? `${id}-tab-${tab.id}` : void 0,
               label: tab.label,
               selected: isSelected,
               onClick: () => handleTabClick(tab.id, index),
@@ -450,7 +464,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
               className: (0, import_clsx4.default)(!isSelected && afterClasses),
               role: "tab",
               "aria-selected": isSelected,
-              "aria-controls": `panel-${tab.id}`,
+              "aria-controls": `${id}-panel-${tab.id}`,
               tabIndex: isSelected ? 0 : -1,
               ref: (el) => {
                 tabRefs.current[index] = el;
@@ -464,7 +478,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
     selectedContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        id: `panel-${selectedTab}`,
+        id: (id ? `${id}-` : "") + `panel-${selectedTab}`,
         className: "mt-2",
         role: "tabpanel",
         "aria-labelledby": `tab-${selectedTab}`,

package/dist/components/ContentTabs.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";
 
@@ -11,16 +11,16 @@ import clsx from "clsx";
 import { useState, useRef, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
-var ContentTabs = ({ tabs, onTabChange }) => {
+var ContentTabs = ({ tabs, onTabChange, id }) => {
   var _a, _b;
   const [selectedTab, setSelectedTab] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState(0);
   const tabRefs = useRef([]);
   const handleTabClick = useCallback(
-    (id, index) => {
-      setSelectedTab(id);
+    (id2, index) => {
+      setSelectedTab(id2);
       setFocusedTabIndex(index);
-      onTabChange == null ? void 0 : onTabChange(id);
+      onTabChange == null ? void 0 : onTabChange(id2);
     },
     [onTabChange]
   );
@@ -36,17 +36,18 @@ var ContentTabs = ({ tabs, onTabChange }) => {
     } else {
       return;
     }
-    const id = tabs[newIndex].id;
-    setSelectedTab(id);
-    onTabChange == null ? void 0 : onTabChange(id);
+    const tabId = tabs[newIndex].id;
+    setSelectedTab(tabId);
+    onTabChange == null ? void 0 : onTabChange(tabId);
     (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
     setFocusedTabIndex(newIndex);
   };
   const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { id, children: [
     /* @__PURE__ */ jsx("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ jsx(
       "div",
       {
+        id: id ? `${id}-tablist` : void 0,
         role: "tablist",
         "aria-orientation": "horizontal",
         className: clsx("flex relative", afterClasses),
@@ -56,7 +57,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
           return /* @__PURE__ */ jsx(
             ContentTab,
             {
-              id: `tab-${tab.id}`,
+              id: id ? `${id}-tab-${tab.id}` : void 0,
               label: tab.label,
               selected: isSelected,
               onClick: () => handleTabClick(tab.id, index),
@@ -68,7 +69,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
               className: clsx(!isSelected && afterClasses),
               role: "tab",
               "aria-selected": isSelected,
-              "aria-controls": `panel-${tab.id}`,
+              "aria-controls": `${id}-panel-${tab.id}`,
               tabIndex: isSelected ? 0 : -1,
               ref: (el) => {
                 tabRefs.current[index] = el;
@@ -82,7 +83,7 @@ var ContentTabs = ({ tabs, onTabChange }) => {
     selectedContent && /* @__PURE__ */ jsx(
       "div",
       {
-        id: `panel-${selectedTab}`,
+        id: (id ? `${id}-` : "") + `panel-${selectedTab}`,
         className: "mt-2",
         role: "tabpanel",
         "aria-labelledby": `tab-${selectedTab}`,

package/dist/components/DMSiLogo.cjs

@@ -1,8 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,15 +41,16 @@ __export(DMSiLogo_exports, {
 });
 module.exports = __toCommonJS(DMSiLogo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function DMSiLogo() {
+function DMSiLogo(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       width: "107",
       height: "24",
       viewBox: "0 0 107 24",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
@@ -70,7 +88,7 @@ function DMSiLogo() {
           }
         )
       ]
-    }
+    })
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/DMSiLogo.js

@@ -1,16 +1,20 @@
-import "../chunk-ORMEWXMH.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/DMSiLogo.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function DMSiLogo() {
+function DMSiLogo(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       width: "107",
       height: "24",
       viewBox: "0 0 107 24",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -48,7 +52,7 @@ function DMSiLogo() {
           }
         )
       ]
-    }
+    })
   );
 }
 export {