@dmsi/wedgekit-react 0.0.5 → 0.0.6

package/dist/chunk-27OSC5OM.js

@@ -1,68 +0,0 @@
-import {
-  Button
-} from "./chunk-ZRQZOT6X.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-2EHJFFX4.js

@@ -1,124 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-IJ6AAL4W.js";
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MenuOption.tsx
-import clsx from "clsx";
-import { useId, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuOption = ({
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  subMenuSystem,
-  menuLevel = 0
-}) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const hoverTimeout = useRef(null);
-  const hasSubMenu = typeof subMenu === "function";
-  const handleMouseEnter = () => {
-    if (disabled || !subMenuSystem || !hasSubMenu) return;
-    if (hoverTimeout.current) {
-      clearTimeout(hoverTimeout.current);
-      hoverTimeout.current = null;
-    }
-    subMenuSystem.toggleMenu(menuId.current, menuLevel + 1);
-  };
-  const handleMouseLeave = () => {
-    if (disabled || !subMenuSystem || !hasSubMenu) return;
-    if (hoverTimeout.current) {
-      clearTimeout(hoverTimeout.current);
-    }
-    hoverTimeout.current = setTimeout(() => {
-      subMenuSystem.closeSubMenuLevel(menuLevel + 1);
-    }, 200);
-  };
-  const additionalAttributes = {
-    "data-selected": selected || null
-  };
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && clsx(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && clsx(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
-  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: actualRef,
-        className: clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-        },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
-      }, additionalAttributes), {
-        tabIndex: -1,
-        children: [
-          before,
-          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
-          after
-        ]
-      })
-    ),
-    hasSubMenu && subMenuSystem ? subMenu(
-      menuId.current,
-      actualRef
-    ) : subMenu == null ? void 0 : subMenu(menuId.current, actualRef)
-  ] });
-};
-MenuOption.displayName = "MenuOption";
-
-export {
-  MenuOption
-};

package/dist/chunk-2GC2SPSS.js

@@ -1,130 +0,0 @@
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  Paragraph
-} from "./chunk-IJ6AAL4W.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MenuOption.tsx
-import clsx from "clsx";
-import { useId, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuOption = ({
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  onSubMenuHover,
-  onSubMenuLeave,
-  onSubMenuEnter,
-  subMenuLevel = 1
-}) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const handleMouseEnter = () => {
-    if (subMenu && onSubMenuHover && !disabled) {
-      onSubMenuHover(menuId.current, subMenuLevel);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
-    }
-  };
-  const handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
-    }
-  };
-  const additionalAttributes = {
-    "data-selected": selected || null
-  };
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && clsx(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && clsx(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
-  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: actualRef,
-        className: clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-        },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
-      }, additionalAttributes), {
-        tabIndex: -1,
-        role: "menuitem",
-        "aria-haspopup": subMenu ? "menu" : void 0,
-        children: [
-          before && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: before }),
-          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
-          after
-        ]
-      })
-    ),
-    subMenu && /* @__PURE__ */ jsx(
-      "div",
-      {
-        onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: handleMouseLeave,
-        "data-submenu-parent": menuId.current,
-        "data-menu-level": subMenuLevel + 1,
-        children: subMenu(menuId.current, actualRef)
-      }
-    )
-  ] });
-};
-MenuOption.displayName = "MenuOption";
-
-export {
-  MenuOption
-};

package/dist/chunk-2KLCMD2M.js

@@ -1,106 +0,0 @@
-import {
-  InputBase
-} from "./chunk-LRNZOITG.js";
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Select.tsx
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Select = (_a) => {
-  var _b = _a, {
-    label,
-    error,
-    children,
-    readOnly,
-    renderMenu,
-    onClick,
-    className,
-    wrapperClassName,
-    removeRoundness,
-    labelClassName
-  } = _b, props = __objRest(_b, [
-    "label",
-    "error",
-    "children",
-    "readOnly",
-    "renderMenu",
-    "onClick",
-    "className",
-    "wrapperClassName",
-    "removeRoundness",
-    "labelClassName"
-  ]);
-  const inputRef = useRef(null);
-  const inputContainerRef = useRef(null);
-  const preventFocusOnInitialRender = useRef(true);
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    var _a2;
-    if (preventFocusOnInitialRender.current) {
-      preventFocusOnInitialRender.current = false;
-      return;
-    }
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [props.value]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      InputBase,
-      __spreadValues({
-        inputContainerRef,
-        ref: inputRef,
-        label,
-        after: !readOnly && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
-              "contents"
-            ),
-            children: /* @__PURE__ */ jsx(Icon, { name: "keyboard_arrow_down" })
-          }
-        ),
-        maxLength: 0,
-        className: clsx("!caret-transparent !cursor-default", className),
-        wrapperClassName,
-        labelClassName,
-        onKeyDown: (e) => {
-          const openKeys = ["Enter", "Space", " "];
-          if (openKeys.includes(e.key)) {
-            e.target.click();
-          }
-        },
-        onClick: (e) => {
-          if (props.disabled || readOnly) {
-            return;
-          }
-          setShow(!show);
-          onClick == null ? void 0 : onClick(e);
-        },
-        error,
-        readOnly,
-        removeRoundness
-      }, props)
-    ),
-    renderMenu ? renderMenu({
-      positionTo: inputContainerRef,
-      show,
-      setShow
-    }) : children
-  ] });
-};
-Select.displayName = "Select";
-
-export {
-  Select
-};

package/dist/chunk-2TLQVCQQ.js

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