@dmsi/wedgekit-react 0.0.2

package/README.md

@@ -0,0 +1,35 @@
+# DMSi Global Design System
+
+This package provides a set of react components that implement the DMSi Global Design System.
+
+## Installation
+
+`npm install @dmsi/wedgekit-react`
+
+## Usage
+
+To use a component import it from the design system
+
+```js
+
+import { Button } from '@dmsi/wedgekit-react/components/Button`;
+
+const MyComponent = () => <Button variant="primary">Action</Button>;
+
+```
+
+The CSS for styles and fonts will be required for the components to display correctly an needs to be included in the application.
+
+```js
+import "@dmsi/wedgekit-react/styles.css";
+import "@dmsi/wedgekit-react/fonts.css";
+```
+
+```html
+<link rel="stylesheet" href="/node_modules/@dmsi/wedgekit-react/styles.css" />
+<link rel="stylesheet" href="/node_modules/@dmsi/wedgekit-react/fonts.css" />
+```
+
+## Documentation
+
+The components and their options can be seen in the Global Design System storybook. TBD (currently at [https://dev-dmsi-storybook.soda.dev](https://dev-dmsi-storybook.soda.dev)).

package/dist/chunk-27KIIUAR.js

@@ -0,0 +1,59 @@
+import {
+  typography
+} from "./chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Display.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Display = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "display1"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant"
+  ]);
+  const defaultElement = variant === "display1" ? "h1" : "h2";
+  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
+    })
+  );
+};
+Display.displayName = "Display";
+var Display1 = (props) => /* @__PURE__ */ jsx(Display, __spreadProps(__spreadValues({}, props), { variant: "display1" }));
+var Display2 = (props) => /* @__PURE__ */ jsx(Display, __spreadProps(__spreadValues({}, props), { variant: "display2" }));
+Display1.displayName = "Display1";
+Display2.displayName = "Display2";
+
+export {
+  Display,
+  Display1,
+  Display2
+};

package/dist/chunk-2G2E2JMA.js

@@ -0,0 +1,123 @@
+import {
+  typography
+} from "./chunk-KX3O6GJ6.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);
+  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);
+  };
+  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
+        )
+      ]
+    }
+  );
+  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";
+
+export {
+  Tooltip
+};

package/dist/chunk-4C66DLIJ.js

@@ -0,0 +1,51 @@
+import {
+  componentPaddingXUsingComponentGap,
+  typography
+} from "./chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Label.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+export {
+  Label
+};

package/dist/chunk-4RD5ZF2V.js

@@ -0,0 +1,55 @@
+// src/components/LogoDMSiTopBar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function LogoDMSiTopBar() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "106",
+      height: "24",
+      viewBox: "0 0 106 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.32182 5.86849H21.4356C23.2074 5.86849 24.3938 5.79786 25.426 7.25511C26.3235 8.60827 26.5931 9.79786 26.3851 11.4335C26.1771 13.0692 25.7342 14.2291 24.6672 15.6529C24.1742 16.3295 23.5541 16.8648 22.803 17.2551C21.7823 17.7533 21.1275 17.6826 20.0952 17.6826H7.87355V17.638L7.18024 23.2588H19.945C23.4501 23.2588 26.8242 22.5228 29.6553 19.9949C32.2745 17.6826 33.819 14.8127 34.2235 11.612C34.6664 8.125 33.8152 5.72351 31.4695 3.30344C29.0621 0.775554 26.0539 0.362915 22.4024 0.362915H10.0074L9.32182 5.92797V5.86849Z",
+            fill: "#55585A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M44.8888 0.960416L44.5229 3.92324L44.6115 3.64071C46.1021 1.46599 48.4517 0.618408 51.0516 0.618408C53.7787 0.618408 55.5312 1.62213 56.5828 3.91952C58.4008 1.53662 60.7273 0.618408 63.6277 0.618408C65.4881 0.618408 67.1289 1.16116 68.2613 2.45856C69.6595 4.04592 69.3937 6.13514 69.1087 8.39164L67.1828 23.2355H59.7451L61.5207 9.28012C61.6979 7.90094 61.6787 6.35447 59.6873 6.35447C57.2607 6.35447 56.7831 8.52919 56.5635 10.2392L54.9111 23.2318H47.3771L49.1527 9.2764C49.3222 7.93811 49.1643 6.22436 47.3 6.22436C45.2663 6.22436 44.6153 7.68904 44.4112 9.2764L42.6355 23.2318H34.5199L37.3817 0.960416H44.8888Z",
+            fill: "#55585A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M96.5979 0.336548L95.8699 6.39231H102.649L95.4501 9.54101L93.6821 23.2734H102.429L105.349 0.336548H96.5979Z",
+            fill: "#55585A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M90.2045 10.4126C88.529 9.34573 85.7827 9.04833 83.7837 8.79182C83.0903 8.70632 82.3084 8.49814 81.5804 8.29368C81.3031 8.23792 81.045 8.16729 80.8062 8.07807C80.7176 8.05204 80.6175 8.02231 80.5328 8C80.3363 7.95539 80.1206 7.81041 79.928 7.61338C79.5275 7.30855 79.2886 6.94424 79.2886 6.54647C79.2886 6.35688 79.358 6.17844 79.4581 6.00372C79.4697 5.98513 79.4774 5.97026 79.4889 5.95167C79.9666 5.20446 81.2993 4.66543 82.8862 4.66543C84.8005 4.66543 86.3566 5.44981 86.4645 6.43866H93.9138C92.9316 2.34572 88.2517 0 84.0071 0C81.488 0 78.2949 0.342007 75.9184 1.66171C73.6343 2.94052 71.9973 4.66914 71.6814 7.14126C70.9419 12.9405 76.369 14.026 81.0181 14.6654C81.2762 14.6952 81.7807 14.8141 82.3315 15.0037C83.7721 15.2974 84.7928 16.026 84.7928 16.8848C84.7928 17.8773 83.4254 18.6989 81.6267 18.8699C81.4187 18.9145 81.2338 18.9368 81.0913 18.9368C79.9434 18.9368 79.1615 18.8625 78.5876 18.487C77.8635 18.197 77.3358 17.777 77.1471 17.29H69.3395C70.3795 22.3234 75.0132 24 79.7085 24C84.789 24 91.8492 22.2491 92.6157 16.2342C92.8546 14.3494 92.1844 11.7286 90.2123 10.4089L90.2045 10.4126Z",
+            fill: "#55585A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1.03227 9.54944H16.0773L0 16.9175L1.03227 9.54944Z",
+            fill: "#DF4405"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  LogoDMSiTopBar
+};

package/dist/chunk-4RJKB7LC.js

@@ -0,0 +1,14 @@
+// src/components/useMounted.tsx
+import { useEffect, useState } from "react";
+var useMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  return isMounted;
+};
+
+export {
+  useMounted
+};

package/dist/chunk-4T7F5BZZ.js

@@ -0,0 +1,26 @@
+// src/utils.ts
+function findDocumentRoot(element) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment."
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.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 window.document.body;
+}
+
+export {
+  findDocumentRoot
+};

package/dist/chunk-5GOBP2JS.js

@@ -0,0 +1,53 @@
+import {
+  typography
+} from "./chunk-KX3O6GJ6.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",
+    align,
+    color,
+    tall
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "align",
+    "color",
+    "tall"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.subheader,
+        className,
+        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-6ZY524ID.js

@@ -0,0 +1,42 @@
+import {
+  Button
+} from "./chunk-KENSVWOY.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+
+// src/components/ModalButtons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { 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-AWQSSKCK.js

@@ -0,0 +1,32 @@
+// src/components/useInfiniteScroll.tsx
+import { useEffect } from "react";
+function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true
+  // ✅ Add this
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleScroll = () => {
+      const el2 = containerRef.current;
+      if (!el2 || isLoading) return;
+      const { scrollTop, scrollHeight, clientHeight } = el2;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
+}
+
+export {
+  useInfiniteScroll
+};

package/dist/chunk-BNHSAFMP.js

@@ -0,0 +1,93 @@
+import {
+  Button
+} from "./chunk-KENSVWOY.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", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-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-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active"
+  );
+  const tokenOverrides = {
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  };
+  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
+      ),
+      style: tokenOverrides,
+      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
+};