@dmsi/wedgekit-react 0.0.2

package/dist/components/Toast.js

@@ -0,0 +1,218 @@
+"use client";
+import {
+  Heading3
+} from "../chunk-TYI74BSP.js";
+import {
+  Button
+} from "../chunk-KENSVWOY.js";
+import {
+  Paragraph
+} from "../chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/Toast.tsx
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variants = {
+  success: {
+    className: "border-success-400",
+    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check_circle", size: 24 }) })
+  },
+  warning: {
+    className: "border-warning-400",
+    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 24 }) })
+  },
+  error: {
+    className: "border-critical-400",
+    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "error", size: 24 }) })
+  },
+  info: {
+    className: "border-action-400",
+    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "info", size: 24 }) })
+  }
+};
+var slideInFromBottomAnimation = (element, displayDuration = 8e3, inDuration = 50, outDuration = 50) => {
+  const totalDuration = inDuration + displayDuration + outDuration;
+  const rect = element.getBoundingClientRect();
+  const slideDistance = window.innerHeight - rect.bottom + 16;
+  return element.animate(
+    [
+      {
+        opacity: 0,
+        transform: `translateY(${slideDistance}px)`,
+        offset: 0
+      },
+      {
+        opacity: 1,
+        transform: "translateY(0)",
+        offset: inDuration / totalDuration
+      },
+      {
+        opacity: 1,
+        transform: "translateY(0)",
+        offset: (inDuration + displayDuration) / totalDuration
+      },
+      {
+        opacity: 0,
+        transform: `translateY(${slideDistance}px)`,
+        offset: 1
+      }
+    ],
+    {
+      duration: totalDuration,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      fill: "both"
+    }
+  );
+};
+var TOAST_ROOT_ID = "toast-root";
+function getToastRoot() {
+  let root = document.getElementById(TOAST_ROOT_ID);
+  if (!root) {
+    root = document.createElement("div");
+    root.id = TOAST_ROOT_ID;
+    root.className = "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 pointer-events-none";
+    document.body.appendChild(root);
+  }
+  return root;
+}
+var Toast = (_a) => {
+  var _b = _a, {
+    variant = "success",
+    title,
+    message,
+    show = false,
+    showToast = false,
+    onClose: onClose,
+    viewButtonLink,
+    showViewButton = false
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "title",
+    "message",
+    "show",
+    "showToast",
+    // deprecated
+    "onClose",
+    "viewButtonLink",
+    "showViewButton"
+  ]);
+  var _a2;
+  const toastElementRef = useRef(null);
+  const animationRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  useEffect(() => {
+    if (show && !showToast) {
+      if (toastElementRef.current) {
+        const animation = slideInFromBottomAnimation(
+          toastElementRef.current
+        );
+        animationRef.current = animation;
+        animation.onfinish = () => {
+          onClose == null ? void 0 : onClose();
+        };
+      }
+      return () => {
+        if (animationRef.current) {
+          animationRef.current.cancel();
+        }
+      };
+    }
+  }, [show, showToast, onClose]);
+  useEffect(() => {
+    if (animationRef.current) {
+      if (isHovered) {
+        animationRef.current.pause();
+      } else {
+        animationRef.current.play();
+      }
+    }
+  }, [isHovered]);
+  useEffect(() => {
+    const handleAnimationEnd = () => {
+      if (!isHovered) {
+        onClose == null ? void 0 : onClose();
+      }
+    };
+    if (animationRef.current) {
+      animationRef.current.addEventListener("finish", handleAnimationEnd);
+      return () => {
+        if (animationRef.current) {
+          animationRef.current.removeEventListener("finish", handleAnimationEnd);
+        }
+      };
+    }
+  }, [isHovered, onClose]);
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    if (animationRef.current && animationRef.current.playState === "paused") {
+      animationRef.current.play();
+    }
+  };
+  const { className, icon: iconElement } = (_a2 = variants[variant]) != null ? _a2 : variants.success;
+  if (!show) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: toastElementRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: clsx(
+        "flex items-start gap-desktop-component-gap p-desktop-component-padding border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        className
+      )
+    }, props), {
+      style: props.style,
+      children: [
+        iconElement,
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-layout-group-gap items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-desktop-component-gap w-68", children: [
+            title && /* @__PURE__ */ jsx(Heading3, { children: title }),
+            message && /* @__PURE__ */ jsx(Paragraph, { children: message })
+          ] }),
+          showViewButton && /* @__PURE__ */ jsx(Button, { variant: "tertiary", href: viewButtonLink, children: "View" })
+        ] })
+      ]
+    })
+  );
+};
+Toast.displayName = "Toast";
+function createToast(config) {
+  const toastRoot = getToastRoot();
+  const toastContainer = document.createElement("div");
+  toastRoot.appendChild(toastContainer);
+  const root = createRoot(toastContainer);
+  const handleClose = () => {
+    root.unmount();
+    toastContainer.remove();
+  };
+  root.render(
+    /* @__PURE__ */ jsx(
+      Toast,
+      {
+        show: true,
+        onClose: handleClose,
+        variant: config.variant,
+        title: config.title,
+        message: config.message,
+        showViewButton: config.showViewButton,
+        viewButtonLink: config.viewButtonLink
+      }
+    )
+  );
+}
+export {
+  Toast,
+  createToast
+};

package/dist/components/Tooltip.cjs

@@ -0,0 +1,273 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Tooltip.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const tooltipRef = (0, import_react.useRef)(null);
+  const [isTruncated, setIsTruncated] = (0, import_react.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react.useState)(false);
+  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 (!showOnTruncation || checkForTextTruncation()) {
+      setIsVisible(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+    setRemoveOpacity(false);
+  };
+  (0, import_react.useEffect)(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isVisible]);
+  (0, import_react.useEffect)(() => {
+    if (isVisible) {
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        isVisible && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: tooltipRef,
+              style: {
+                position: "fixed",
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                zIndex: 9999
+              },
+              className: (0, import_clsx2.default)(
+                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
+        )
+      ]
+    }
+  );
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
+        setIsTruncated(isTruncated2);
+        return isTruncated2;
+      }
+    }
+    return false;
+  }
+};
+Tooltip.displayName = "Tooltip";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});

package/dist/components/Tooltip.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Tooltip
+} from "../chunk-2G2E2JMA.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+export {
+  Tooltip
+};