@dmsi/wedgekit-react 0.0.4

package/dist/chunk-BDYWCYRG.js

@@ -0,0 +1,263 @@
+import {
+  Menu
+} from "./chunk-YN7MUHAZ.js";
+import {
+  useSubMenuSystem
+} from "./chunk-MUQHKNFV.js";
+import {
+  MenuOption
+} from "./chunk-OULD24TE.js";
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  Search
+} from "./chunk-ZCFOYW2U.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.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 { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataGridCell = (_a) => {
+  var _b = _a, {
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick,
+    onRightClick,
+    error,
+    warning
+  } = _b, props = __objRest(_b, [
+    "type",
+    "component",
+    "children",
+    "className",
+    "locked",
+    "noPadding",
+    "paddedLeft",
+    "style",
+    "onClick",
+    "onRightClick",
+    "error",
+    "warning"
+  ]);
+  const Element = type === "header" ? "th" : "td";
+  const timerRef = useRef(null);
+  const [isGrabbing, setIsGrabbing] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const handlePointerDown = (_event) => {
+    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) {
+      onClick(event);
+    }
+    if (rightClick && onRightClick) {
+      onRightClick();
+    }
+    setIsGrabbing(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 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative",
+    "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" && "justify-center"
+  );
+  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cellClasses,
+      style,
+      onMouseDown: handlePointerDown,
+      onMouseUp: handlePointerUp,
+      onMouseLeave: handlePointerLeave,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onTouchCancel: handlePointerLeave,
+      onContextMenu: (e) => e.preventDefault(),
+      children
+    }
+  ) }));
+};
+DataGridCell.displayName = "DataGridCell";
+function DraggableTableHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
+    id: header.column.id
+  });
+  const [showMenu, setShowMenu] = useState(false);
+  const {
+    menuRootRef,
+    toggleMenu,
+    isMenuActive,
+    registerSubMenu
+  } = useSubMenuSystem();
+  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
+  };
+  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) => {
+              var _a2;
+              return /* @__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) => {
+                          header.column.setFilterValue(event.target.value);
+                        },
+                        value: (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
+                      }
+                    ) }),
+                    /* @__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 _a2;
+    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((_a2 = header.column.getFilterValue()) != null ? _a2 : "");
+  }
+}
+DraggableTableHeader.displayName = "DraggableTableHeader";
+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,
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+export {
+  DataGridCell,
+  DraggableTableHeader,
+  DragAlongCell
+};

package/dist/chunk-BENTHNAQ.js

@@ -0,0 +1,51 @@
+import {
+  componentPaddingXUsingComponentGap,
+  typography
+} from "./chunk-6XDXJ3Z3.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-BGPBLXQ5.js

@@ -0,0 +1,131 @@
+import {
+  Paragraph
+} from "./chunk-IJ6AAL4W.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Checkbox.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = clsx(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = clsx(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = clsx(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = clsx(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = clsx(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = clsx(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = clsx(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadValues({
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              id: props.id,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ jsx("div", { className: clsx("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx(
+          Paragraph,
+          {
+            padded: true,
+            className: clsx(
+              "text-nowrap",
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/chunk-BKC5DNOX.js

@@ -0,0 +1,162 @@
+import {
+  CSS
+} from "./chunk-WVUIIBRR.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/DataGridCell.tsx
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { jsx } from "react/jsx-runtime";
+var DataGridCell = (_a) => {
+  var _b = _a, {
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "type",
+    "component",
+    "children",
+    "className",
+    "locked",
+    "noPadding",
+    "paddedLeft",
+    "style",
+    "onClick"
+  ]);
+  const Element = type === "header" ? "th" : "td";
+  const timerRef = useRef(null);
+  const longPressTriggered = useRef(false);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const handlePointerDown = (_event) => {
+    longPressTriggered.current = false;
+    timerRef.current = window.setTimeout(() => {
+      longPressTriggered.current = true;
+    }, 500);
+  };
+  const handlePointerUp = (event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (!longPressTriggered.current && onClick) {
+      onClick(event);
+    }
+  };
+  const handlePointerLeave = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const headerBgStyles = type === "header" && !locked && "bg-brand-400 border-brand-200";
+  const lockedHeaderBgStyles = locked && "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 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative",
+    !["button", "icon"].includes(component) && !noPadding && "p-2",
+    paddedLeft && "pl-2"
+  );
+  return /* @__PURE__ */ jsx(Element, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cellClasses,
+      style,
+      onMouseDown: handlePointerDown,
+      onMouseUp: handlePointerUp,
+      onMouseLeave: handlePointerLeave,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onTouchCancel: handlePointerLeave,
+      children
+    }
+  ) }));
+};
+DataGridCell.displayName = "DataGridCell";
+function DraggableTableHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
+    id: header.column.id
+  });
+  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
+  };
+  return /* @__PURE__ */ jsx(
+    DataGridCell,
+    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      locked,
+      type: "header",
+      component: "header",
+      ref: setNodeRef,
+      colSpan: header.colSpan,
+      style
+    }, props), {
+      onClick: header.column.getToggleSortingHandler()
+    }), locked ? {} : attributes), locked ? {} : listeners), {
+      children
+    })
+  );
+}
+DraggableTableHeader.displayName = "DraggableTableHeader";
+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",
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ jsx(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+export {
+  DataGridCell,
+  DraggableTableHeader,
+  DragAlongCell
+};

package/dist/chunk-BMGYSXYW.js

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