@dmsi/wedgekit-react 0.0.4

package/dist/chunk-MGJ3GO6Z.js

@@ -0,0 +1,284 @@
+import {
+  MenuOption
+} from "./chunk-2GC2SPSS.js";
+import {
+  Menu
+} from "./chunk-G3AYBQ2Y.js";
+import {
+  useSubMenuSystem
+} from "./chunk-IDAZ53A4.js";
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  Search
+} from "./chunk-GPIG2QUB.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  paddingUsingComponentGap
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/DataGridCell.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import clsx from "clsx";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataGridCell = memo((_a) => {
+  var _b = _a, {
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick,
+    onRightClick,
+    error,
+    warning,
+    center,
+    width
+  } = _b, props = __objRest(_b, [
+    "type",
+    "component",
+    "children",
+    "className",
+    "locked",
+    "noPadding",
+    "paddedLeft",
+    "style",
+    "onClick",
+    "onRightClick",
+    "error",
+    "warning",
+    "center",
+    "width"
+  ]);
+  const Element = type === "header" ? "th" : "td";
+  const timerRef = useRef(null);
+  const [isGrabbing, setIsGrabbing] = useState(false);
+  const [isPointerPressed, setIsPointerPressed] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const handlePointerDown = (_event) => {
+    setIsPointerPressed(true);
+    timerRef.current = window.setTimeout(() => {
+      setIsGrabbing(true);
+    }, 500);
+  };
+  const handlePointerUp = (event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    const rightClick = event.nativeEvent instanceof MouseEvent && event.nativeEvent.button === 2;
+    if (!isGrabbing && onClick && !rightClick && isPointerPressed) {
+      onClick(event);
+    }
+    if (rightClick && onRightClick) {
+      onRightClick();
+    }
+    setIsGrabbing(false);
+    setIsPointerPressed(false);
+  };
+  const handlePointerLeave = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
+  const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
+  const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && clsx("border-r");
+  const buttonComponentStyles = component === "button" && clsx("border-r border-b border-border-primary-normal");
+  const iconComponentStyles = component === "icon" && clsx("border-l");
+  const cellClasses = clsx(
+    headerTypeStyles,
+    buttonComponentStyles,
+    headerBgStyles,
+    lockedHeaderBgStyles,
+    iconComponentStyles,
+    className,
+    "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+    "focus-within:!z-10",
+    component === "input" && "border",
+    component === "input" && !error && !warning && "border-border-primary-normal",
+    component === "input" && error && "border-border-primary-error",
+    component === "input" && warning && "border-background-warning-normal",
+    !["button", "icon"].includes(component) && !noPadding && "p-2",
+    paddedLeft && "pl-2",
+    component === "icon" && "border-l",
+    isGrabbing && "!cursor-grabbing",
+    component === "checkbox" || center && "justify-center"
+  );
+  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({ className: clsx("flex", !width && "flex-1"), style: { width } }, props), { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cellClasses,
+      style: __spreadValues({}, style),
+      onMouseDown: handlePointerDown,
+      onMouseUp: handlePointerUp,
+      onMouseLeave: handlePointerLeave,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onTouchCancel: handlePointerLeave,
+      onContextMenu: (e) => e.preventDefault(),
+      children
+    }
+  ) }));
+});
+DataGridCell.displayName = "DataGridCell";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  var _a2;
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
+    id: header.column.id
+  });
+  const [showMenu, setShowMenu] = useState(false);
+  const [filter, setFilter] = useState((_a2 = header.column.getFilterValue()) != null ? _a2 : "");
+  const {
+    menuRootRef,
+    toggleMenu,
+    isMenuActive,
+    registerSubMenu
+  } = useSubMenuSystem();
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      header.column.setFilterValue(filter);
+    }, 500);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [filter]);
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+    "--color-text-primary-normal": "var(--color-neutral-000)"
+  };
+  return /* @__PURE__ */ jsxs(
+    DataGridCell,
+    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      locked,
+      type: "header",
+      component: "header",
+      ref: setNodeRef,
+      colSpan: header.colSpan,
+      style
+    }, props), {
+      onClick: header.column.getToggleSortingHandler(),
+      onRightClick: () => setShowMenu(!showMenu)
+    }), locked ? {} : attributes), locked ? {} : listeners), {
+      children: [
+        children,
+        header.column.getCanFilter() && /* @__PURE__ */ jsx(Menu, { ref: menuRootRef, positionTo: node, show: showMenu, setShow: setShowMenu, children: /* @__PURE__ */ jsx(
+          MenuOption,
+          {
+            after: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
+            onClick: (menuId) => toggleMenu(menuId, 0),
+            subMenu: (menuId, menuOptionRef) => /* @__PURE__ */ jsxs(
+              Menu,
+              {
+                positionTo: menuOptionRef,
+                position: "right",
+                show: isMenuActive(menuId, 0),
+                ref: (el) => {
+                  registerSubMenu(menuId, el);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      onChange: (event) => {
+                        setFilter(event.target.value);
+                      },
+                      onKeyDown: (event) => {
+                        if ([" ", "Space"].includes(event.key)) {
+                          event.stopPropagation();
+                        }
+                      },
+                      value: filter != null ? filter : ""
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("includesString"), children: "Contains" }),
+                  /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("startsWith"), children: "Starts with" }),
+                  /* @__PURE__ */ jsx(MenuOption, { onClick: handleFilterFnChange, before: menuOptionIcon("endsWith"), children: "Ends with" })
+                ]
+              }
+            ),
+            children: "Filter"
+          }
+        ) })
+      ]
+    })
+  );
+  function menuOptionIcon(value) {
+    return /* @__PURE__ */ jsx(Icon, { name: "check", className: clsx(header.column.columnDef.filterFn !== value && "text-transparent") });
+  }
+  function handleFilterFnChange(_id, value) {
+    var _a3;
+    let filterFn = "includesString";
+    const currentFilterFn = header.column.columnDef.filterFn;
+    if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
+      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "ends with") {
+      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "contains") {
+      filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
+    }
+    header.column.columnDef.filterFn = filterFn;
+    header.column.setFilterValue((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
+  }
+}
+DraggableCellHeader.displayName = "DraggableCellHeader";
+function DragAlongCell(_a) {
+  var _b = _a, { cell, children } = _b, props = __objRest(_b, ["cell", "children"]);
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: isDragging ? 1 : 0,
+    width: cell.column.getSize(),
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+export {
+  DataGridCell,
+  DraggableCellHeader,
+  DragAlongCell
+};

package/dist/chunk-MIMYQH75.js

@@ -0,0 +1,91 @@
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  Button
+} from "./chunk-FQVCRL3Z.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-MKIVQLZW.js

@@ -0,0 +1,122 @@
+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);
+  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 = () => {
+    checkForTextTruncation();
+    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
+        )
+      ]
+    }
+  );
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        setIsTruncated(paragraph.scrollWidth > paragraph.clientWidth);
+      }
+    }
+  }
+};
+Tooltip.displayName = "Tooltip";
+
+export {
+  Tooltip
+};

package/dist/chunk-MLQQU3ZN.js

@@ -0,0 +1,31 @@
+import {
+  Heading2
+} from "./chunk-AEQYZFXI.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  Button
+} from "./chunk-4M7CJVTZ.js";
+
+// src/components/ModalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({ title, onClose }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4", children: [
+    title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title }),
+    /* @__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-MLTOT73W.js

@@ -0,0 +1,38 @@
+import {
+  Button
+} from "./chunk-F2YQE6G5.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-MM2YBW7A.js

@@ -0,0 +1,31 @@
+import {
+  Heading2
+} from "./chunk-AEQYZFXI.js";
+import {
+  Button
+} from "./chunk-FQVCRL3Z.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+
+// src/components/ModalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({ title, onClose }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4", children: [
+    title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title }),
+    /* @__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-MMHTKJ7Z.js

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