@dmsi/wedgekit-react 0.0.4

package/dist/chunk-XFCRKJRI.js

@@ -0,0 +1,261 @@
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/useMenuSystem.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+function useSubMenuSystem() {
+  const [activeMenus, setActiveMenus] = useState(
+    {}
+  );
+  const menuRootRef = useRef(null);
+  const subMenuRefs = useRef({});
+  const hoverTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
+  const toggleMenu = (menuId, level) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      if (newActiveMenus[level] === menuId) {
+        delete newActiveMenus[level];
+      } else {
+        newActiveMenus[level] = menuId;
+      }
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) > level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      return newActiveMenus;
+    });
+  };
+  const openMenu = (menuId, level) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      newActiveMenus[level] = menuId;
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) > level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      return newActiveMenus;
+    });
+  };
+  const openMenuWithDelay = (menuId, level, delay = 150) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = setTimeout(() => {
+      openMenu(menuId, level);
+    }, delay);
+  };
+  const closeMenuWithDelay = (level, delay = 300) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeSubMenuLevel(level);
+    }, delay);
+  };
+  const cancelCloseTimeout = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  };
+  const closeSubMenuLevel = (level) => {
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      delete newActiveMenus[level];
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) >= level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      return newActiveMenus;
+    });
+  };
+  const registerSubMenu = (id, element) => {
+    subMenuRefs.current[id] = element;
+  };
+  const isMenuActive = (menuId, level) => {
+    return activeMenus[level] === menuId;
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a;
+      if (Object.keys(activeMenus).length === 0) return;
+      const target = event.target;
+      if ((_a = menuRootRef.current) == null ? void 0 : _a.contains(target)) return;
+      const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
+        const submenuEl = subMenuRefs.current[id];
+        return submenuEl == null ? void 0 : submenuEl.contains(target);
+      });
+      if (!isInsideActiveSubmenu) {
+        setActiveMenus({});
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [activeMenus]);
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getAllFocusableMenuElements = () => {
+    const elements = [];
+    if (menuRootRef.current) {
+      elements.push(...Array.from(menuRootRef.current.children));
+    }
+    Object.values(activeMenus).forEach((menuId) => {
+      const submenuEl = subMenuRefs.current[menuId];
+      if (submenuEl) {
+        elements.push(...Array.from(submenuEl.children));
+      }
+    });
+    return elements;
+  };
+  const findCurrentMenuLevel = (element) => {
+    let current = element.parentElement;
+    while (current) {
+      const level = current.getAttribute("data-menu-level");
+      if (level !== null) {
+        return parseInt(level, 10);
+      }
+      current = current.parentElement;
+    }
+    return 0;
+  };
+  const getMenuElementsAtLevel = (level) => {
+    var _a;
+    if (level === 0 && menuRootRef.current) {
+      return Array.from(menuRootRef.current.children);
+    }
+    const menuId = (_a = Object.entries(activeMenus).find(([, id]) => {
+      const submenuEl = subMenuRefs.current[id];
+      return submenuEl && submenuEl.getAttribute("data-menu-level") === level.toString();
+    })) == null ? void 0 : _a[1];
+    if (menuId) {
+      const submenuEl = subMenuRefs.current[menuId];
+      if (submenuEl) {
+        return Array.from(submenuEl.children);
+      }
+    }
+    return [];
+  };
+  return {
+    menuRootRef,
+    activeMenus,
+    toggleMenu,
+    openMenu,
+    openMenuWithDelay,
+    closeMenuWithDelay,
+    cancelCloseTimeout,
+    isMenuActive,
+    registerSubMenu,
+    closeSubMenuLevel,
+    getAllFocusableMenuElements,
+    findCurrentMenuLevel,
+    getMenuElementsAtLevel
+  };
+}
+function useMenuPosition(elementRef, position = "bottom", options) {
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  });
+  const updatePosition = useCallback(() => {
+    var _a, _b;
+    if (!(elementRef == null ? void 0 : elementRef.current)) return;
+    const triggerRect = elementRef.current.getBoundingClientRect();
+    const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const menuWidth = (menuRect == null ? void 0 : menuRect.width) || triggerRect.width;
+    const topOffset = (options == null ? void 0 : options.noTopOffset) ? 0 : 4;
+    let top = 0;
+    let left = 0;
+    if (position === "bottom" || position === "bottom-right") {
+      top = triggerRect.top + window.scrollY + triggerRect.height + topOffset;
+    } else {
+      top = triggerRect.top + window.scrollY;
+    }
+    if (position === "bottom") {
+      left = triggerRect.left + window.scrollX;
+    } else if (position === "bottom-right") {
+      left = triggerRect.right + window.scrollX - menuWidth;
+    } else if (position === "right") {
+      left = triggerRect.right + window.scrollX + 4;
+    }
+    if (left + menuWidth > viewportWidth) {
+      left = Math.max(viewportWidth - menuWidth - 4, 0);
+    }
+    setMenuPosition({
+      top,
+      left,
+      minWidth: triggerRect.width
+    });
+  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.noTopOffset]);
+  useEffect(() => {
+    if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
+    const handleClickOutside = (event) => {
+      var _a, _b, _c, _d, _e;
+      const target = event.target;
+      if ((_a = elementRef.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(target)) return;
+      if ((_d = options.additionalRefs) == null ? void 0 : _d.some((ref) => {
+        var _a2;
+        return (_a2 = ref.current) == null ? void 0 : _a2.contains(target);
+      }))
+        return;
+      (_e = options.setIsOpen) == null ? void 0 : _e.call(options, false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [
+    options,
+    elementRef,
+    options == null ? void 0 : options.isOpen,
+    options == null ? void 0 : options.setIsOpen,
+    options == null ? void 0 : options.menuRef,
+    options == null ? void 0 : options.additionalRefs
+  ]);
+  useEffect(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (elementRef == null ? void 0 : elementRef.current) {
+      resizeObserver.observe(elementRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [elementRef, updatePosition]);
+  return { menuPosition, updatePosition };
+}
+
+export {
+  useSubMenuSystem,
+  useMenuPosition
+};

package/dist/chunk-XGKHSZ6E.js

@@ -0,0 +1,38 @@
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  Button
+} from "./chunk-FQVCRL3Z.js";
+
+// src/components/ModalButtons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalButtons = ({ onClose, onContinue }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
+        onClick: onClose,
+        className: "max-sm:w-full",
+        children: "Close"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
+        className: "max-sm:w-full",
+        onClick: onContinue,
+        children: "Continue"
+      }
+    )
+  ] });
+};
+ModalButtons.displayName = "ModalButtons";
+
+export {
+  ModalButtons
+};

package/dist/chunk-XJAQVF2E.js

@@ -0,0 +1,83 @@
+import {
+  Button
+} from "./chunk-56ORPWGF.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/NavigationTab.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var NavigationTab = (_a) => {
+  var _b = _a, {
+    label,
+    onClick,
+    selected = false,
+    className,
+    disabled = false,
+    href
+  } = _b, props = __objRest(_b, [
+    "label",
+    "onClick",
+    "selected",
+    "className",
+    "disabled",
+    "href"
+  ]);
+  const textClassName = clsx(
+    "!text-text-on-action-primary-hover",
+    "hover:!text-text-on-action-primary-hover",
+    "active:!text-text-on-action-primary-active",
+    "disabled:!text-text-on-action-primary-disabled"
+  );
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  );
+  const paddingClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  );
+  const unselectedClassName = clsx(
+    "!bg-background-on-action-primary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active",
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-background-on-action-secondary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({
+      variant: "tertiary-critical",
+      colorClassName: textClassName,
+      className: clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddingClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className
+      ),
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
+      onClick,
+      disabled
+    }, props), {
+      as: href ? "a" : void 0,
+      href,
+      children: label
+    })
+  );
+};
+NavigationTab.displayName = "NavigationTab";
+
+export {
+  NavigationTab
+};

package/dist/chunk-XQX7HSL5.js

@@ -0,0 +1,38 @@
+import {
+  Button
+} from "./chunk-6Q5NNY5V.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+
+// src/components/ModalButtons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalButtons = ({ onClose, onContinue }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
+        onClick: onClose,
+        className: "max-sm:w-full",
+        children: "Close"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
+        className: "max-sm:w-full",
+        onClick: onContinue,
+        children: "Continue"
+      }
+    )
+  ] });
+};
+ModalButtons.displayName = "ModalButtons";
+
+export {
+  ModalButtons
+};

package/dist/chunk-XTP3ODBD.js

@@ -0,0 +1,56 @@
+import {
+  typography
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Subheader.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Subheader = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    colorClassName,
+    align,
+    color,
+    tall
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "colorClassName",
+    "align",
+    "color",
+    "tall"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.subheader,
+        className,
+        (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Subheader.displayName = "Subheader";
+
+export {
+  Subheader
+};

package/dist/chunk-XWF3ZJCZ.js

@@ -0,0 +1,97 @@
+import {
+  Button
+} from "./chunk-4TH2SUHQ.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/NavigationTab.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var NavigationTab = (_a) => {
+  var _b = _a, {
+    label,
+    onClick,
+    selected = false,
+    className,
+    disabled = false,
+    colorPrimitives = "dmsi"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "onClick",
+    "selected",
+    "className",
+    "disabled",
+    "colorPrimitives"
+  ]);
+  const textClassName = clsx(
+    "!text-text-on-action-primary-normal",
+    "hover:!text-text-on-action-primary-hover",
+    "active:!text-text-on-action-primary-active",
+    "disabled:!text-text-on-action-primary-disabled"
+  );
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  );
+  const paddigClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  );
+  const unselectedClassName = clsx(
+    "!bg-background-on-action-primary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active",
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-background-on-action-secondary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active"
+  );
+  const tokenOverrides = colorPrimitives === "dmsi" ? {
+    "--color-text-on-action-primary-normal": "var(--color-brand-500)",
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  } : {
+    "--color-background-on-action-primary-normal": "#D0DDE4",
+    "--color-text-on-action-primary-normal": "#002131",
+    "--color-text-on-action-primary-hover": "#002131",
+    "--color-text-on-action-primary-active": "#1a6280"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: tokenOverrides,
+      children: /* @__PURE__ */ jsx(
+        Button,
+        __spreadProps(__spreadValues({
+          variant: "tertiary-critical",
+          className: clsx(
+            "!border-0 !rounded-b-none h-10 min-w-20 relative",
+            paddigClassName,
+            textClassName,
+            disabledClassName,
+            !selected && unselectedClassName,
+            selected && selectedClassName,
+            className
+          ),
+          classNameLabel: "px-1",
+          rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
+          onClick,
+          disabled
+        }, props), {
+          children: label
+        })
+      )
+    }
+  );
+};
+NavigationTab.displayName = "NavigationTab";
+
+export {
+  NavigationTab
+};

package/dist/chunk-XX3GHFG5.js

@@ -0,0 +1,121 @@
+import {
+  typography
+} from "./chunk-6XDXJ3Z3.js";
+
+// src/components/Tooltip.tsx
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8
+}) => {
+  const ref = useRef(null);
+  const tooltipRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = useState(false);
+  const [removeOpacity, setRemoveOpacity] = useState(false);
+  useEffect(() => {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        setIsTruncated(paragraph.scrollWidth > paragraph.clientWidth);
+      }
+    }
+  }, [showOnTruncation]);
+  const shouldShowTooltip = !showOnTruncation || showOnTruncation && isTruncated;
+  const updatePosition = () => {
+    if (!ref.current || !tooltipRef.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = rect.top - tooltipRect.height - offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.right + offset;
+        break;
+    }
+    setTooltipPosition({ top, left });
+    requestAnimationFrame(() => {
+      setRemoveOpacity(true);
+    });
+  };
+  const handleMouseEnter = () => {
+    if (shouldShowTooltip) {
+      setIsVisible(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+    setRemoveOpacity(false);
+  };
+  useEffect(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isVisible]);
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        isVisible && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: tooltipRef,
+              style: {
+                position: "fixed",
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                zIndex: 9999
+              },
+              className: clsx(
+                typography.caption,
+                "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                !removeOpacity && "opacity-0"
+              ),
+              children: message
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+export {
+  Tooltip
+};