@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/chunk-LIQIMUDD.js

@@ -1,270 +0,0 @@
-import {
-  Label
-} from "./chunk-S4IHG5J6.js";
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinusBorder,
-  componentPaddingXUsingComponentGap,
-  typography
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Input.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var inputBaseClass = clsx(
-  "w-full",
-  "flex flex-row items-center",
-  "rounded-base border border-border-primary-normal bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
-  componentGap,
-  baseTransition,
-  "outline-transparent outline-2",
-  componentPaddingMinusBorder
-);
-var inputFocusClass = clsx(
-  "focus-within:border-transparent focus-within:outline-border-primary-focus"
-);
-var inputDisabledClass = clsx(
-  "has-disabled:bg-background-action-secondary-disabled"
-);
-var inputReadOnlyClass = clsx(
-  "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
-);
-var inputInvalidClass = clsx(
-  "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
-);
-var InputBase = (_a) => {
-  var _b = _a, {
-    before,
-    after,
-    type,
-    label,
-    error,
-    className,
-    align = "left",
-    caption,
-    required,
-    wrapperClassName,
-    inputContainerRef
-  } = _b, props = __objRest(_b, [
-    "before",
-    "after",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "wrapperClassName",
-    "inputContainerRef"
-  ]);
-  const attributes = {
-    "data-error": error || null
-  };
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      ref: inputContainerRef,
-      className: clsx(
-        "w-full flex flex-col",
-        "block",
-        "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        !props.disabled && "has-[[data-error]]:text-text-primary-error",
-        componentGap
-      ),
-      children: [
-        label && /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", componentGap), children: [
-          /* @__PURE__ */ jsx(
-            Label,
-            {
-              colorClassName: "text-inherit",
-              className: clsx(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            children: [
-              before,
-              /* @__PURE__ */ jsx(
-                "input",
-                __spreadProps(__spreadValues(__spreadValues({
-                  type,
-                  required
-                }, props), attributes), {
-                  id: props.id,
-                  className: clsx(
-                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
-                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
-                    align === "right" && "text-right",
-                    align === "center" && "text-center",
-                    componentPaddingXUsingComponentGap,
-                    typography.paragraph,
-                    className,
-                    props.readOnly && !props.disabled && "!px-0"
-                  )
-                })
-              ),
-              after
-            ]
-          }
-        ),
-        caption
-      ]
-    }
-  );
-};
-var Input = (_a) => {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(InputBase, __spreadValues({}, props));
-};
-Input.displayName = "Input";
-var Finder = (_a) => {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(InputBase, __spreadProps(__spreadValues({}, props), { after: /* @__PURE__ */ jsx(Icon, { name: "search" }) }));
-};
-Finder.displayName = "Finder";
-var Search = (_a) => {
-  var props = __objRest(_a, []);
-  var _a2;
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues({}, props), {
-      placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
-      before: /* @__PURE__ */ jsx(Icon, { name: "search" }),
-      after: /* @__PURE__ */ jsx(Icon, { name: "close" })
-    })
-  );
-};
-Search.displayName = "Search";
-var UOM = (_a) => {
-  var _b = _a, {
-    uom,
-    decimals
-  } = _b, props = __objRest(_b, [
-    "uom",
-    "decimals"
-  ]);
-  const handleBlur = (e) => {
-    var _a2;
-    const formattedValue = formatDecimalValue(e.target.value, decimals);
-    e.target.value = formattedValue;
-    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
-      type: "number",
-      align: "right",
-      after: /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom }),
-      onBlur: handleBlur
-    })
-  );
-};
-UOM.displayName = "UOM";
-var Currency = (_a) => {
-  var _b = _a, {
-    decimals
-  } = _b, props = __objRest(_b, [
-    "decimals"
-  ]);
-  const handleBlur = (e) => {
-    var _a2;
-    const formattedValue = formatDecimalValue(e.target.value, decimals);
-    e.target.value = formattedValue;
-    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
-      align: "right",
-      type: "number",
-      before: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) }),
-      onBlur: handleBlur
-    })
-  );
-};
-Currency.displayName = "Currency";
-var Percentage = (_a) => {
-  var _b = _a, {
-    decimals
-  } = _b, props = __objRest(_b, [
-    "decimals"
-  ]);
-  const handleBlur = (e) => {
-    var _a2;
-    const formattedValue = formatDecimalValue(e.target.value, decimals);
-    e.target.value = formattedValue;
-    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ jsx(
-    InputBase,
-    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
-      align: "right",
-      type: "number",
-      after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) }),
-      onBlur: handleBlur
-    })
-  );
-};
-Percentage.displayName = "Percentage";
-function getDecimalPlaceholder(decimals) {
-  if (!decimals || decimals <= 0) {
-    return {};
-  }
-  return {
-    placeholder: `0.${"0".repeat(decimals)}`
-  };
-}
-function formatDecimalValue(value, decimals) {
-  if (!value || value === "") {
-    return "";
-  }
-  const numValue = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(numValue)) {
-    return "";
-  }
-  if (!decimals || decimals <= 0) {
-    return String(Math.round(numValue));
-  }
-  return numValue.toFixed(decimals);
-}
-
-export {
-  InputBase,
-  Input,
-  Finder,
-  Search,
-  UOM,
-  Currency,
-  Percentage
-};

package/dist/chunk-LJ2W2FEG.js

@@ -1,134 +0,0 @@
-// src/classNames.ts
-import clsx from "clsx";
-var typography = {
-  display1: clsx(
-    "font-sans font-semibold",
-    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
-    "leading-display-1-mobile desktop:leading-display-1-desktop"
-  ),
-  display2: clsx(
-    "font-sans font-bold",
-    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
-    "leading-display-2-mobile desktop:leading-display-2-desktop"
-  ),
-  heading1: clsx(
-    "font-sans font-semibold",
-    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
-    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
-  ),
-  heading2: clsx(
-    "font-sans font-normal",
-    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
-    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
-  ),
-  heading3: clsx(
-    "font-sans font-semibold",
-    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
-    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
-  ),
-  subheader: clsx(
-    "font-sans font-semibold",
-    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
-    "leading-subheader-mobile desktop:leading-subheader-desktop"
-  ),
-  link: clsx(
-    "font-sans font-normal",
-    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
-    "leading-link-mobile desktop:leading-link-desktop"
-  ),
-  buttonLabel: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  label: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  paragraph: clsx(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
-  ),
-  caption: clsx(
-    "font-sans font-normal",
-    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
-    "leading-caption-mobile desktop:leading-caption-desktop"
-  )
-};
-var baseTransition = clsx(
-  "transition-colors duration-100 ease-in-out"
-);
-var componentGap = clsx(
-  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
-);
-var paddingUsingComponentGap = clsx(
-  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
-);
-var paddingYUsingLayoutGroupGap = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var componentPadding = clsx(
-  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-);
-var componentPaddingBottom = clsx(
-  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
-);
-var componentPaddingY = clsx(
-  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
-);
-var componentPaddingXUsingComponentGap = clsx(
-  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap = clsx(
-  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingMinusBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
-);
-var componentPaddingMinus2pxBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
-);
-var layoutPaddingBottom = clsx(
-  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
-);
-var containerPaddingX = clsx(
-  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
-);
-var containerPaddingY = clsx(
-  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
-);
-var layoutGroupGapPaddingY = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var layoutGroupGap = clsx(
-  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
-);
-var layoutGap = clsx(
-  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
-);
-var gapUsingContainerPadding = clsx(
-  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
-);
-
-export {
-  typography,
-  baseTransition,
-  componentGap,
-  paddingUsingComponentGap,
-  paddingYUsingLayoutGroupGap,
-  componentPadding,
-  componentPaddingBottom,
-  componentPaddingY,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
-  componentPaddingMinusBorder,
-  componentPaddingMinus2pxBorder,
-  layoutPaddingBottom,
-  containerPaddingX,
-  layoutGroupGapPaddingY,
-  layoutGroupGap,
-  layoutGap,
-  gapUsingContainerPadding
-};

package/dist/chunk-LJGUNBDS.js

@@ -1,238 +0,0 @@
-import {
-  useMenuPosition,
-  useSubMenuSystem
-} from "./chunk-MUQHKNFV.js";
-import {
-  findDocumentRoot
-} from "./chunk-3FLOLZYP.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Menu.tsx
-import clsx from "clsx";
-import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var Menu = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    ref,
-    positionTo,
-    show,
-    setShow,
-    position = "bottom",
-    maxHeight: customMaxHeight,
-    noTopOffset = false
-  } = _b, props = __objRest(_b, [
-    "children",
-    "className",
-    "ref",
-    "positionTo",
-    "show",
-    "setShow",
-    "position",
-    "maxHeight",
-    "noTopOffset"
-  ]);
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = useState("180px");
-  const { menuPosition, updatePosition } = useMenuPosition(
-    positionTo,
-    position,
-    {
-      isOpen: show,
-      setIsOpen: setShow,
-      menuRef: internalRef,
-      noTopOffset
-    }
-  );
-  const subMenuSystem = useSubMenuSystem();
-  function hasDisplayName(type) {
-    return typeof type === "function" && Boolean(type.displayName);
-  }
-  const renderChildrenWithSubMenu = (children2, menuLevel = 0) => React.Children.map(children2, (child) => {
-    if (!React.isValidElement(child)) return child;
-    if (hasDisplayName(child.type) && child.type.displayName === "MenuOption") {
-      return React.cloneElement(child, {
-        subMenuSystem,
-        menuLevel
-      });
-    }
-    if (child.props && Object.prototype.hasOwnProperty.call(child.props, "children")) {
-      return React.cloneElement(child, {
-        children: renderChildrenWithSubMenu(child.props.children, menuLevel)
-      });
-    }
-    return child;
-  });
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => {
-      if (!actualRef || !actualRef.current || customMaxHeight) {
-        return;
-      }
-      if (actualRef.current.childElementCount > 4) {
-        let accumulatedHeight = 0;
-        Array.from(actualRef.current.children).forEach((child, index) => {
-          if (index >= 5) {
-            return;
-          }
-          accumulatedHeight += child.clientHeight;
-        });
-        accumulatedHeight = accumulatedHeight / 5 * 4.5;
-        setMaxHeight(`${accumulatedHeight}px`);
-      }
-    });
-    return () => {
-      cancelAnimationFrame(raf);
-    };
-  }, [actualRef, customMaxHeight]);
-  useEffect(() => {
-    if (!show) {
-      return;
-    }
-    initializeMenuFocus();
-    updatePosition();
-  }, [show, updatePosition]);
-  useEffect(() => {
-    if (!show || !setShow) {
-      return;
-    }
-    const handleEscapeKey = (event) => {
-      var _a2;
-      if (event.key !== "Escape") {
-        return;
-      }
-      setShow(false);
-      (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
-    };
-    document.addEventListener("keydown", handleEscapeKey);
-    return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [show, setShow, positionTo]);
-  return show && createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: setRefs,
-        className: clsx(
-          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
-          "absolute",
-          "z-50",
-          className
-        )
-      }, props), {
-        style: __spreadValues(__spreadProps(__spreadValues({}, props.style), {
-          maxHeight: customMaxHeight || maxHeight
-        }), menuPosition),
-        onKeyDown: handleKeydown,
-        onMouseDown: stopPropagation,
-        onMouseUp: stopPropagation,
-        onTouchStart: stopPropagation,
-        onTouchEnd: stopPropagation,
-        tabIndex: -1,
-        children: renderChildrenWithSubMenu(children, 0)
-      })
-    ),
-    findDocumentRoot(internalRef.current)
-  );
-  function handleKeydown(e) {
-    var _a2, _b2;
-    if (!internalRef.current) {
-      return;
-    }
-    if (e.key !== "Escape") {
-      e.stopPropagation();
-    }
-    const menuOptions = Array.from(
-      internalRef.current.children
-    );
-    if (menuOptions.length === 0) {
-      return;
-    }
-    let currentIndex = -1;
-    const focusedElement = document.activeElement;
-    for (let i = 0; i < menuOptions.length; i++) {
-      if (menuOptions[i] === focusedElement) {
-        currentIndex = i;
-        break;
-      }
-    }
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
-        menuOptions[nextIndex].focus();
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
-        menuOptions[prevIndex].focus();
-        break;
-      }
-      case "Home":
-        e.preventDefault();
-        menuOptions[0].focus();
-        break;
-      case "End":
-        e.preventDefault();
-        menuOptions[menuOptions.length - 1].focus();
-        break;
-      case "Enter":
-      case " ":
-      case "ArrowRight":
-        e.preventDefault();
-        if (currentIndex >= 0) {
-          menuOptions[currentIndex].click();
-        }
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
-        (_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
-        break;
-    }
-  }
-  function initializeMenuFocus() {
-    var _a2, _b2, _c;
-    (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
-    const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
-      "[data-selected]"
-    );
-    const targetElement = selectedOption || ((_c = internalRef.current) == null ? void 0 : _c.children[0]);
-    if (!targetElement) {
-      return;
-    }
-    targetElement.scrollIntoView({
-      block: "nearest",
-      behavior: "instant"
-    });
-    requestAnimationFrame(() => {
-      targetElement.focus();
-    });
-  }
-  function setRefs(node) {
-    internalRef.current = node;
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  }
-  function stopPropagation(e) {
-    e.stopPropagation();
-  }
-};
-Menu.displayName = "Menu";
-
-export {
-  Menu
-};

package/dist/chunk-LK6UNOMX.js

@@ -1,24 +0,0 @@
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return null;
-  }
-  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
-};