@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/chunk-XZ6AMNDQ.js

@@ -1,290 +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 { useEffect, useRef } from "react";
-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,
-    selectOnFocus,
-    wrapperClassName,
-    inputContainerRef
-  } = _b, props = __objRest(_b, [
-    "before",
-    "after",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "wrapperClassName",
-    "inputContainerRef"
-  ]);
-  const attributes = {
-    "data-error": error || null
-  };
-  const inputRef = useRef(null);
-  useEffect(() => {
-    var _a2;
-    const input = inputRef.current;
-    const focusHandler = () => {
-      input == null ? void 0 : input.select();
-    };
-    if (selectOnFocus) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
-      return () => {
-        input == null ? void 0 : input.removeEventListener("focus", focusHandler);
-      };
-    }
-  }, [selectOnFocus]);
-  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({
-                  ref: (el) => {
-                    inputRef.current = el;
-                  },
-                  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-Y2LOHSZL.js

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

@@ -1,122 +0,0 @@
-import {
-  typography
-} from "./chunk-2TLQVCQQ.js";
-
-// src/components/Tooltip.tsx
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Tooltip = ({
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8
-}) => {
-  const ref = useRef(null);
-  const tooltipRef = useRef(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = useState(false);
-  const [removeOpacity, setRemoveOpacity] = useState(false);
-  const shouldShowTooltip = !showOnTruncation || showOnTruncation && isTruncated;
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-  const handleMouseEnter = () => {
-    checkForTextTruncation();
-    if (shouldShowTooltip) {
-      setIsVisible(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-  useEffect(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-  useEffect(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        isVisible && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: tooltipRef,
-              style: {
-                position: "fixed",
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                zIndex: 9999
-              },
-              className: clsx(
-                typography.caption,
-                "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-                !removeOpacity && "opacity-0"
-              ),
-              children: message
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const paragraph = ref.current.querySelector("p");
-      if (paragraph) {
-        setIsTruncated(paragraph.scrollWidth > paragraph.clientWidth);
-      }
-    }
-  }
-};
-Tooltip.displayName = "Tooltip";
-
-export {
-  Tooltip
-};

package/dist/chunk-YELD6VJI.js

@@ -1,68 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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
-};