@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/chunk-3B7FAEF7.js

@@ -1,38 +0,0 @@
-import {
-  Button
-} from "./chunk-O2KOOPL4.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.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-3FLOLZYP.js

@@ -1,21 +0,0 @@
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (!element || !(element instanceof Node)) {
-    return document.body;
-  }
-  var currentElement = element;
-  while (currentElement && currentElement.parentNode) {
-    if (currentElement.parentNode === document) {
-      return document.body;
-    } else if (currentElement.parentNode instanceof DocumentFragment) {
-      return currentElement.parentNode;
-    } else {
-      currentElement = currentElement.parentNode;
-    }
-  }
-  return document.body;
-}
-
-export {
-  findDocumentRoot
-};

package/dist/chunk-3IZWY2C7.js

@@ -1,221 +0,0 @@
-import {
-  useMenuPosition
-} from "./chunk-XFCRKJRI.js";
-import {
-  findDocumentRoot
-} from "./chunk-3FLOLZYP.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Menu.tsx
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var Menu = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    ref,
-    positionTo,
-    show,
-    setShow,
-    position = "bottom",
-    maxHeight: customMaxHeight,
-    noTopOffset = false
-  } = _b, props = __objRest(_b, [
-    "children",
-    "className",
-    "ref",
-    "positionTo",
-    "show",
-    "setShow",
-    "position",
-    "maxHeight",
-    "noTopOffset"
-  ]);
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = useState("180px");
-  const { menuPosition, updatePosition } = useMenuPosition(
-    positionTo,
-    position,
-    {
-      isOpen: show,
-      setIsOpen: setShow,
-      menuRef: internalRef,
-      noTopOffset
-    }
-  );
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
-        return;
-      }
-      if (actualRef.current.childElementCount > 4) {
-        let accumulatedHeight = 0;
-        Array.from(actualRef.current.children).forEach((child, index) => {
-          if (index >= 5) {
-            return;
-          }
-          accumulatedHeight += child.clientHeight;
-        });
-        accumulatedHeight = accumulatedHeight / 5 * 4.5;
-        setMaxHeight(`${accumulatedHeight}px`);
-      }
-    });
-    return () => {
-      cancelAnimationFrame(raf);
-    };
-  }, [actualRef, customMaxHeight]);
-  useEffect(() => {
-    if (!show) {
-      return;
-    }
-    initializeMenuFocus();
-    updatePosition();
-  }, [show, updatePosition]);
-  useEffect(() => {
-    if (!show || !setShow) {
-      return;
-    }
-    const handleEscapeKey = (event) => {
-      var _a2;
-      if (event.key !== "Escape") {
-        return;
-      }
-      setShow(false);
-      (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
-    };
-    document.addEventListener("keydown", handleEscapeKey);
-    return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [show, setShow, positionTo]);
-  return show && createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: setRefs,
-        className: clsx(
-          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
-          "absolute",
-          "z-50",
-          className
-        )
-      }, props), {
-        style: __spreadValues(__spreadProps(__spreadValues({}, props.style), {
-          maxHeight: customMaxHeight || maxHeight
-        }), menuPosition),
-        onKeyDown: handleKeydown,
-        onMouseDown: stopPropagation,
-        onMouseUp: stopPropagation,
-        onTouchStart: stopPropagation,
-        onTouchEnd: stopPropagation,
-        tabIndex: -1,
-        children
-      })
-    ),
-    findDocumentRoot(internalRef.current)
-  );
-  function handleKeydown(e) {
-    var _a2, _b2;
-    if (!internalRef.current) {
-      return;
-    }
-    if (e.key !== "Escape") {
-      e.stopPropagation();
-    }
-    const menuOptions = Array.from(
-      internalRef.current.querySelectorAll('[role="menuitem"]')
-    );
-    if (menuOptions.length === 0) {
-      return;
-    }
-    let currentIndex = -1;
-    const focusedElement = document.activeElement;
-    for (let i = 0; i < menuOptions.length; i++) {
-      if (menuOptions[i] === focusedElement) {
-        currentIndex = i;
-        break;
-      }
-    }
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
-        menuOptions[nextIndex].focus();
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
-        menuOptions[prevIndex].focus();
-        break;
-      }
-      case "Home":
-        e.preventDefault();
-        menuOptions[0].focus();
-        break;
-      case "End":
-        e.preventDefault();
-        menuOptions[menuOptions.length - 1].focus();
-        break;
-      case "Enter":
-      case " ":
-      case "ArrowRight":
-        e.preventDefault();
-        if (currentIndex >= 0) {
-          menuOptions[currentIndex].click();
-        }
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
-        (_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
-        break;
-    }
-  }
-  function initializeMenuFocus() {
-    var _a2, _b2, _c;
-    (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
-    const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
-      "[data-selected]"
-    );
-    const firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
-      '[role="menuitem"]'
-    );
-    const targetElement = selectedOption || firstMenuItem;
-    if (!targetElement) {
-      return;
-    }
-    targetElement.scrollIntoView({
-      block: "nearest",
-      behavior: "instant"
-    });
-    requestAnimationFrame(() => {
-      targetElement.focus();
-    });
-  }
-  function setRefs(node) {
-    internalRef.current = node;
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  }
-  function stopPropagation(e) {
-    e.stopPropagation();
-  }
-};
-Menu.displayName = "Menu";
-
-export {
-  Menu
-};

package/dist/chunk-3NGYDV56.js

@@ -1,38 +0,0 @@
-import {
-  Button
-} from "./chunk-56ORPWGF.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.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-3NLKVKFR.js

@@ -1,72 +0,0 @@
-import {
-  Button
-} from "./chunk-T23U4LBM.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-3R7YVBRL.js

@@ -1,135 +0,0 @@
-import {
-  useSubMenuSystemContext
-} from "./chunk-YRTR6KJN.js";
-import {
-  Paragraph
-} from "./chunk-IJ6AAL4W.js";
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MenuOption.tsx
-import clsx from "clsx";
-import { useId, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuOption = ({
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  // Accepts menuLevel for nested menus (default 0)
-  menuLevel = 0
-}) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const { openSubMenu, closeSubMenu, isMenuActive } = useSubMenuSystemContext();
-  const additionalAttributes = {
-    "data-selected": selected || null
-  };
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && clsx(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && clsx(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
-  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
-  const handleMouseEnter = () => {
-    if (subMenu && !disabled) {
-      openSubMenu(menuId.current, menuLevel + 1);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (subMenu && !disabled) {
-      closeSubMenu(menuId.current, menuLevel + 1);
-    }
-  };
-  function withSubMenuHover(submenu, menuId2, menuLevel2, openSubMenu2, closeSubMenu2) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        onMouseEnter: () => openSubMenu2(menuId2, menuLevel2),
-        onMouseLeave: () => closeSubMenu2(menuId2, menuLevel2),
-        style: { position: "absolute", top: 0, left: "100%" },
-        children: submenu
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: actualRef,
-        className: clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-        }
-      }, additionalAttributes), {
-        tabIndex: -1,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        "aria-haspopup": !!subMenu,
-        "aria-expanded": subMenu ? isMenuActive(menuId.current, menuLevel + 1) : void 0,
-        children: [
-          before,
-          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
-          after
-        ]
-      })
-    ),
-    subMenu && isMenuActive(menuId.current, menuLevel + 1) ? withSubMenuHover(
-      subMenu(menuId.current, actualRef),
-      menuId.current,
-      menuLevel + 1,
-      openSubMenu,
-      closeSubMenu
-    ) : null
-  ] });
-};
-MenuOption.displayName = "MenuOption";
-
-export {
-  MenuOption
-};

package/dist/chunk-3RDFNEVD.js

@@ -1,91 +0,0 @@
-import {
-  baseTransition,
-  componentPaddingY,
-  typography
-} from "./chunk-LJ2W2FEG.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Link.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Link = (_a) => {
-  var _b = _a, {
-    as = "a",
-    className,
-    variant = "primary",
-    typographyStyle = "paragraph",
-    disabled = false,
-    color,
-    paddedY,
-    align,
-    underline = false
-  } = _b, props = __objRest(_b, [
-    "as",
-    "className",
-    "variant",
-    "typographyStyle",
-    "disabled",
-    "color",
-    "paddedY",
-    "align",
-    "underline"
-  ]);
-  const Component = as;
-  const primaryStateStyles = variant === "primary" && !disabled && clsx(
-    "text-text-link-normal hover:text-text-link-hover active:text-text-link-active"
-  );
-  const secondaryStateStyles = variant === "secondary" && !disabled && clsx(
-    "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active"
-  );
-  const criticalStateStyles = variant === "critical" && !disabled && clsx(
-    "text-text-action-critical-normal hover:text-text-action-critical-hover active:text-text-action-critical-active"
-  );
-  const criticalStateDisabledStyles = disabled && variant === "critical" && clsx("text-text-action-critical-disabled");
-  const disabledStateStyles = disabled && ["primary", "secondary"].includes(variant) && clsx("text-text-link-disabled");
-  const disabledStyles = disabled && clsx("pointer-events-none cursor-default");
-  const underlineStyles = underline ? "decoration-current" : "decoration-transparent";
-  const paddingY = paddedY && componentPaddingY;
-  return /* @__PURE__ */ jsx(
-    Component,
-    __spreadProps(__spreadValues({
-      className: clsx(
-        "inline",
-        disabled ? "cursor-default" : "cursor-pointer",
-        "underline decoration-[10%] underline-offset-[32%]",
-        !disabled && "hover:decoration-current",
-        !disabled && "active:decoration-transparent",
-        "flex flex-col items-center justify-center",
-        baseTransition,
-        primaryStateStyles,
-        secondaryStateStyles,
-        criticalStateStyles,
-        criticalStateDisabledStyles,
-        disabledStateStyles,
-        disabledStyles,
-        underlineStyles,
-        typographyStyle === "caption" && typography.caption,
-        typographyStyle === "paragraph" && typography.paragraph,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        paddingY,
-        className
-      )
-    }, props), {
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      }),
-      "aria-disabled": disabled,
-      tabIndex: disabled ? -1 : void 0
-    })
-  );
-};
-Link.displayName = "Link";
-
-export {
-  Link
-};