@dmsi/wedgekit-react 0.0.2

package/dist/chunk-SY3HT54E.js

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

@@ -0,0 +1,346 @@
+import {
+  Menu
+} from "./chunk-L4UM372R.js";
+import {
+  useSubMenuSystem
+} from "./chunk-Z4UCFUF7.js";
+import {
+  MenuOption
+} from "./chunk-E5ALT5W7.js";
+import {
+  Search
+} from "./chunk-GTCSRHPF.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-TRUPPHBQ.js

@@ -0,0 +1,109 @@
+import {
+  InputBase
+} from "./chunk-BWRHL2AG.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Select.tsx
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Select = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness,
+    displayValue,
+    value
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness",
+    "displayValue",
+    "value"
+  ]);
+  const inputRef = useRef(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [value]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputBase,
+      __spreadProps(__spreadValues({
+        inputContainerRef,
+        ref: inputRef,
+        label,
+        after: !readOnly && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
+              "contents"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { name: "keyboard_arrow_down" })
+          }
+        ),
+        maxLength: 0,
+        className: clsx("!caret-transparent !cursor-default", className),
+        wrapperClassName,
+        onKeyDown: (e) => {
+          const openKeys = ["Enter", "Space", " "];
+          if (openKeys.includes(e.key)) {
+            e.preventDefault();
+            e.target.click();
+          }
+        },
+        onClick: (e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+          setShow(!show);
+          onClick == null ? void 0 : onClick(e);
+        },
+        error,
+        readOnly,
+        removeRoundness,
+        focus: show
+      }, props), {
+        value: displayValue != null ? displayValue : value
+      })
+    ),
+    renderMenu ? renderMenu({
+      positionTo: inputContainerRef,
+      show,
+      setShow,
+      topOffset: props.caption ? -16 : null
+    }) : children
+  ] });
+};
+Select.displayName = "Select";
+
+export {
+  Select
+};

package/dist/chunk-TU55CHXU.js

@@ -0,0 +1,30 @@
+// src/components/ModalScrim.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var ModalScrim = ({
+  show = false,
+  size = "small",
+  children,
+  onClick,
+  ref
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+        size === "small" && "p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+export {
+  ModalScrim
+};

package/dist/chunk-TWZZB4WO.js

@@ -0,0 +1,114 @@
+import {
+  Label
+} from "./chunk-4C66DLIJ.js";
+import {
+  Button
+} from "./chunk-KENSVWOY.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding,
+  componentPaddingMinusBorder,
+  componentPaddingYUsingComponentGap
+} from "./chunk-KX3O6GJ6.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/OptionPill.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OptionPill = (_a) => {
+  var _b = _a, {
+    selected = false,
+    onClick,
+    onRemove,
+    removable = false,
+    disabled = false,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onClick",
+    "onRemove",
+    "removable",
+    "disabled",
+    "children",
+    "className"
+  ]);
+  const additionalAttributes = {
+    "data-disabled": disabled || null,
+    "data-selected": selected || null
+  };
+  const classNames = clsx(
+    {
+      "hover:border-border-action-hover active:border-border-action-active": !disabled,
+      "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
+      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
+      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
+    },
+    !removable && componentPadding,
+    removable && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
+  );
+  const textColor = clsx(
+    !disabled && "text-text-primary-normal",
+    disabled && !selected && "text-text-primary-disabled",
+    disabled && selected && "text-text-on-action-primary-disabled"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      onClick: handleOnClick
+    }, props), additionalAttributes), {
+      className: clsx(
+        "flex items-center justify-between cursor-pointer w-max",
+        "border border-border-primary-normal rounded-base",
+        "outline-2 outline-transparent -outline-offset-2",
+        componentGap,
+        baseTransition,
+        classNames,
+        className,
+        textColor
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        removable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleOnRemove,
+            disabled,
+            className: clsx(
+              "mx-0 h-full w-10 !border-0",
+              componentPaddingMinusBorder
+            ),
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close" })
+          }
+        )
+      ]
+    })
+  );
+  function handleOnClick() {
+    if (disabled) {
+      return;
+    }
+    onClick == null ? void 0 : onClick();
+  }
+  function handleOnRemove() {
+    if (!removable || !onRemove) {
+      return;
+    }
+    onRemove();
+  }
+};
+OptionPill.displayName = "OptionPill";
+
+export {
+  OptionPill
+};