@dmsi/wedgekit-react 0.0.2

package/dist/chunk-TYI74BSP.js

@@ -0,0 +1,62 @@
+import {
+  typography
+} from "./chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Heading.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Heading = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "heading1"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant"
+  ]);
+  const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
+  const Element = as != null ? as : defaultElement;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Heading.displayName = "Heading";
+var Heading1 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+Heading1.displayName = "Heading1";
+Heading2.displayName = "Heading2";
+Heading3.displayName = "Heading3";
+
+export {
+  Heading,
+  Heading1,
+  Heading2,
+  Heading3
+};

package/dist/chunk-U42SKNR6.js

@@ -0,0 +1,104 @@
+// src/components/Stack.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var useFlexClassNames = ({ items, justify, grow }) => clsx(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  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
+}) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: clsx(
+        "scrollbar-thin",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    }
+  );
+};
+
+export {
+  Stack
+};

package/dist/chunk-UU3FA6LV.js

@@ -0,0 +1,72 @@
+import {
+  Button
+} from "./chunk-KENSVWOY.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ContentTab.tsx
+import clsx from "clsx";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContentTab = (_a) => {
+  var _b = _a, {
+    label,
+    selected = false,
+    className,
+    disabled = false,
+    onClick,
+    ref
+  } = _b, props = __objRest(_b, [
+    "label",
+    "selected",
+    "className",
+    "disabled",
+    "onClick",
+    "ref"
+  ]);
+  const [active, setActive] = useState(false);
+  const handleClick = useCallback(
+    (e) => {
+      if (!disabled) {
+        onClick == null ? void 0 : onClick(e);
+      }
+    },
+    [onClick, disabled]
+  );
+  const computedClassName = clsx(
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out hover:bg-border-action-hover z-10",
+    "rounded-px",
+    "h-0.5",
+    active && "bg-text-action-primary-active",
+    !active && !disabled && "bg-text-action-primary-normal",
+    !active && disabled && "bg-text-action-primary-disabled",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        ref,
+        variant: "tertiary",
+        disabled,
+        onMouseDown: () => setActive(true),
+        onMouseLeave: () => setActive(false),
+        onMouseUp: () => setActive(false),
+        onClick: handleClick,
+        role: "tab",
+        "aria-selected": selected
+      }, props), {
+        children: label
+      })
+    ),
+    selected && /* @__PURE__ */ jsx("div", { className: computedClassName, children: " " })
+  ] });
+};
+ContentTab.displayName = "ContentTab";
+
+export {
+  ContentTab
+};

package/dist/chunk-WVUIIBRR.js

@@ -0,0 +1,51 @@
+// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
+import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from "react";
+var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+
+export {
+  CSS
+};

package/dist/chunk-XUIPGYP5.js

@@ -0,0 +1,39 @@
+import {
+  Heading2
+} from "./chunk-TYI74BSP.js";
+import {
+  Button
+} from "./chunk-KENSVWOY.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+
+// src/components/ModalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      headerIcon,
+      title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title })
+    ] }),
+    !hideCloseIcon && /* @__PURE__ */ jsx(
+      Button,
+      {
+        iconOnly: true,
+        variant: "tertiary",
+        onClick: onClose,
+        leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
+      }
+    )
+  ] });
+};
+ModalHeader.displayName = "ModalHeader";
+
+export {
+  ModalHeader
+};

package/dist/chunk-Z4UCFUF7.js

@@ -0,0 +1,299 @@
+import {
+  useMatchesMobile
+} from "./chunk-SEKKGFM6.js";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/useMenuSystem.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+function useSubMenuSystem(mobilePositionTo) {
+  const [activeMenus, setActiveMenus] = useState(
+    {}
+  );
+  const [activeMenu, setActiveMenu] = useState("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState(null);
+  const menuRootRef = useRef(null);
+  const subMenuRefs = useRef({});
+  const hoverTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
+  const isMobile = useMatchesMobile();
+  const toggleMenu = (menuId, level) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setActiveMenu(menuId);
+    setCurrentSubMenuLevel(level);
+    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 (isMobile) {
+      return;
+    }
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = setTimeout(() => {
+      openMenu(menuId, level);
+    }, delay);
+  };
+  const closeMenuWithDelay = (level, delay = 500) => {
+    if (isMobile) {
+      return;
+    }
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeSubMenuLevel(level);
+    }, delay);
+  };
+  const cancelCloseTimeout = () => {
+    if (isMobile) {
+      return;
+    }
+    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)];
+        }
+      });
+      if (isMobile) {
+        const newSubMenuLevel = level - 1;
+        setCurrentSubMenuLevel(newSubMenuLevel);
+        const newActiveMenu = newActiveMenus[newSubMenuLevel];
+        if (Object.keys(newActiveMenus).length > 0 && newActiveMenu) {
+          setActiveMenu(newActiveMenu);
+        }
+      }
+      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,
+    openMenu,
+    isMenuActive,
+    registerSubMenu,
+    closeSubMenuLevel,
+    getAllFocusableMenuElements,
+    findCurrentMenuLevel,
+    getMenuElementsAtLevel,
+    mobileHide: isMobile && Object.keys(activeMenus).length > 0,
+    listeners: {
+      onSubMenuHover: openMenuWithDelay,
+      onSubMenuLeave: closeMenuWithDelay,
+      onSubMenuEnter: cancelCloseTimeout,
+      toggleMenu,
+      mobilePositionTo,
+      activeMenu,
+      currentSubMenuLevel,
+      closeSubMenuLevel
+    }
+  };
+}
+function useMenuPosition(elementRef, position = "bottom", options) {
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  });
+  const isMobile = useMatchesMobile();
+  const updatePosition = useCallback(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    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 = (_c = options == null ? void 0 : options.topOffset) != null ? _c : 4;
+    let top = 0;
+    let left = 0;
+    if (position === "bottom" || position === "bottom-right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
+    } else {
+      top = triggerRect.top;
+    }
+    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;
+    }
+    const overflowsLeftViewport = left + menuWidth > viewportWidth;
+    if (overflowsLeftViewport) {
+      left = triggerRect.left - menuWidth;
+    }
+    if (isMobile) {
+      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
+      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    }
+    setMenuPosition({
+      top,
+      left,
+      minWidth: triggerRect.width
+    });
+  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
+  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
+};