@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/chunk-SHQVFIVR.js

@@ -1,122 +0,0 @@
-import {
-  Button
-} from "./chunk-4M7CJVTZ.js";
-import {
-  Label
-} from "./chunk-S4IHG5J6.js";
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding,
-  componentPaddingMinusBorder,
-  componentPaddingYUsingComponentGap
-} from "./chunk-6XDXJ3Z3.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",
-        componentGap,
-        baseTransition,
-        classNames,
-        className,
-        textColor
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          Label,
-          {
-            colorClassName: "text-inherit",
-            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
-};

package/dist/chunk-SPV52UKB.js

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

package/dist/chunk-SSBZHFHQ.js

@@ -1,123 +0,0 @@
-import {
-  typography
-} from "./chunk-LJ2W2FEG.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 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 = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      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) {
-        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
-        setIsTruncated(isTruncated2);
-        return isTruncated2;
-      }
-    }
-    return false;
-  }
-};
-Tooltip.displayName = "Tooltip";
-
-export {
-  Tooltip
-};

package/dist/chunk-STVC6SBJ.js

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

@@ -1,148 +0,0 @@
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinus2pxBorder,
-  componentPaddingXUsingComponentGap,
-  paddingUsingComponentGap,
-  typography
-} from "./chunk-LJ2W2FEG.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Button.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = (_a) => {
-  var _b = _a, {
-    variant = "primary",
-    as = "button",
-    block,
-    leftIcon,
-    rightIcon,
-    className,
-    classNameLabel,
-    disabled = false,
-    children,
-    iconOnly = false,
-    colorClassName,
-    href
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children",
-    "iconOnly",
-    "colorClassName",
-    "href"
-  ]);
-  const primaryVariantStyles = variant === "primary" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-primary-normal border-background-action-primary-normal",
-    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
-    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
-    "active:bg-background-action-primary-active active:border-background-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryVariantStyles = variant === "secondary" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-background-action-secondary-normal border-border-action-normal",
-    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
-  );
-  const tertiaryVariantStyles = variant === "tertiary" && clsx(
-    "bg-transparent border-transparent",
-    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-transparent border-transparent",
-    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
-  );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
-    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
-    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
-    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
-    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
-    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
-  );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-transparent border-transparent text-text-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
-  );
-  const navigationVarianStyles = variant === "navigation" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-text-on-action-primary-hover",
-    "focus:bg-background-on-action-secondary-hover focus:text-text-on-action-primary-hover focus:outline-0",
-    "active:bg-background-on-action-secondary-active active:text-text-on-action-primary-active",
-    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-    "flex-col",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = clsx(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className
-  );
-  const labelClasses = clsx(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = href ? "a" : as;
-  return /* @__PURE__ */ jsxs(
-    Element,
-    __spreadProps(__spreadValues({
-      type: Element === "button" ? "button" : void 0,
-      className: buttonClasses
-    }, props), {
-      disabled,
-      href,
-      children: [
-        leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-export {
-  Button
-};