@dmsi/wedgekit-react 0.0.4

package/dist/chunk-V3HXUE6V.js

@@ -0,0 +1,221 @@
+import {
+  useMenuPosition
+} from "./chunk-IDAZ53A4.js";
+import {
+  findDocumentRoot
+} from "./chunk-3FLOLZYP.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Menu.tsx
+import clsx from "clsx";
+import { 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,
+    topOffset
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "ref",
+    "positionTo",
+    "show",
+    "setShow",
+    "position",
+    "maxHeight",
+    "topOffset"
+  ]);
+  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,
+      topOffset
+    }
+  );
+  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
+      })
+    ),
+    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.querySelectorAll('[role="menuitem"]')
+    );
+    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 firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
+      '[role="menuitem"]'
+    );
+    const targetElement = selectedOption || firstMenuItem;
+    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-V6UMVJGA.js

@@ -0,0 +1,53 @@
+import {
+  typography
+} from "./chunk-2TLQVCQQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Subheader.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Subheader = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    align,
+    color,
+    tall
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "align",
+    "color",
+    "tall"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.subheader,
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Subheader.displayName = "Subheader";
+
+export {
+  Subheader
+};

package/dist/chunk-V7C6DTJ6.js

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

@@ -0,0 +1,131 @@
+import {
+  Paragraph
+} from "./chunk-K3IKUSZW.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap
+} from "./chunk-KX3O6GJ6.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-VHWB6H64.js

@@ -0,0 +1,75 @@
+// src/components/Stack.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Stack = ({
+  children,
+  items,
+  justify,
+  padding,
+  horizontal,
+  horizontalMobile,
+  elevation = 0,
+  rounded,
+  centered,
+  width,
+  maxWidth,
+  height,
+  maxHeight,
+  borderColor,
+  backgroundColor,
+  sizing = "none",
+  overflowY = "auto"
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 ? `${width}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0
+      },
+      className: clsx(
+        "scrollbar-thin",
+        "w-full",
+        "flex",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        items === "start" && "items-start",
+        items === "center" && "items-center",
+        items === "end" && "items-end",
+        items === "start-center" && "items-start desktop:items-center",
+        justify === "start" && "justify-start",
+        justify === "center" && "justify-center",
+        justify === "end" && "justify-end",
+        justify === "end" && "justify-end",
+        justify === "between" && "justify-between",
+        justify === "around" && "justify-around",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    }
+  );
+};
+
+export {
+  Stack
+};