@dmsi/wedgekit-react 0.0.4

package/dist/chunk-YD462QK7.js

@@ -0,0 +1,346 @@
+import {
+  Search
+} from "./chunk-TBHTISFW.js";
+import {
+  Menu
+} from "./chunk-CABAANHQ.js";
+import {
+  useSubMenuSystem
+} from "./chunk-Z4UCFUF7.js";
+import {
+  MenuOption
+} from "./chunk-E5ALT5W7.js";
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  paddingUsingComponentGap
+} from "./chunk-KX3O6GJ6.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,
+    isMenuActive,
+    registerSubMenu,
+    listeners: subMenuListeners,
+    mobileHide
+  } = useSubMenuSystem(node);
+  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,
+            mobileHide,
+            children: /* @__PURE__ */ jsx(
+              MenuOption,
+              __spreadProps(__spreadValues({}, subMenuListeners), {
+                subMenu: (_b2) => {
+                  var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
+                  return /* @__PURE__ */ jsxs(
+                    Menu,
+                    __spreadProps(__spreadValues({}, props2), {
+                      show: isMenuActive(menuId, subMenuLevel),
+                      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-YELD6VJI.js

@@ -0,0 +1,68 @@
+import {
+  Button
+} from "./chunk-4TH2SUHQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ContentTab.tsx
+import clsx from "clsx";
+import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContentTab = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, selected = false, className, disabled = false, onClick } = _b, props = __objRest(_b, ["label", "selected", "className", "disabled", "onClick"]);
+    const localRef = useRef(null);
+    const [active, setActive] = useState(false);
+    useImperativeHandle(ref, () => localRef.current, []);
+    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: localRef,
+          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-YHPZ5T3W.js

@@ -0,0 +1,91 @@
+import {
+  baseTransition,
+  componentPaddingY,
+  typography
+} from "./chunk-JDHZQIFC.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
+};

package/dist/chunk-YJV7JCIC.js

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