@dmsi/wedgekit-react 0.0.4

package/dist/chunk-BNHSAFMP.js

@@ -0,0 +1,93 @@
+import {
+  Button
+} from "./chunk-KENSVWOY.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/NavigationTab.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var NavigationTab = (_a) => {
+  var _b = _a, {
+    label,
+    onClick,
+    selected = false,
+    className,
+    disabled = false,
+    href
+  } = _b, props = __objRest(_b, [
+    "label",
+    "onClick",
+    "selected",
+    "className",
+    "disabled",
+    "href"
+  ]);
+  const textClassName = clsx(
+    // "!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-text-on-action-primary-disabled"
+  );
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  );
+  const paddingClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  );
+  const unselectedClassName = clsx(
+    "!bg-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active"
+  );
+  const tokenOverrides = {
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({
+      variant: "tertiary-critical",
+      colorClassName: textClassName,
+      className: clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddingClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className
+      ),
+      style: tokenOverrides,
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
+      onClick,
+      disabled
+    }, props), {
+      as: href ? "a" : void 0,
+      href,
+      children: label
+    })
+  );
+};
+NavigationTab.displayName = "NavigationTab";
+
+export {
+  NavigationTab
+};

package/dist/chunk-BNOE4DGB.js

@@ -0,0 +1,79 @@
+import {
+  Button
+} from "./chunk-F2YQE6G5.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/NavigationTab.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var NavigationTab = (_a) => {
+  var _b = _a, {
+    label,
+    onClick,
+    selected = false,
+    className,
+    disabled = false
+  } = _b, props = __objRest(_b, [
+    "label",
+    "onClick",
+    "selected",
+    "className",
+    "disabled"
+  ]);
+  const textClassName = clsx(
+    "!text-text-on-action-primary-normal",
+    "hover:!text-text-on-action-primary-hover",
+    "active:!text-text-on-action-primary-active",
+    "disabled:!text-text-on-action-primary-disabled"
+  );
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  );
+  const paddigClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  );
+  const unselectedClassName = clsx(
+    "!bg-background-on-action-primary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active",
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-background-on-action-secondary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({
+      variant: "tertiary-critical",
+      className: clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddigClassName,
+        textClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className
+      ),
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
+      onClick,
+      disabled
+    }, props), {
+      children: label
+    })
+  );
+};
+NavigationTab.displayName = "NavigationTab";
+
+export {
+  NavigationTab
+};

package/dist/chunk-BQMI4NKT.js

@@ -0,0 +1,103 @@
+import {
+  InputBase
+} from "./chunk-II6HWGH6.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 { jsx, jsxs } from "react/jsx-runtime";
+var Select = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  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("div", { className: "relative w-full", 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,
+        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-BSBXTPTA.js

@@ -0,0 +1,84 @@
+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",
+    size = "medium",
+    disabled = false,
+    color,
+    paddedY,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "className",
+    "variant",
+    "size",
+    "disabled",
+    "color",
+    "paddedY",
+    "align"
+  ]);
+  const Component = as;
+  const primaryStateStyles = variant === "primary" && clsx(
+    "text-text-link-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const secondaryStateStyles = variant === "secondary" && clsx(
+    "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const criticalStateStyles = variant === "critical" && 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");
+  const paddingY = paddedY && componentPaddingY;
+  return /* @__PURE__ */ jsx(
+    Component,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        "cursor-pointer",
+        "underline decoration-transparent decoration-[10%] underline-offset-[32%]",
+        "hover:decoration-current",
+        "active:decoration-transparent",
+        "flex flex-col items-center justify-center",
+        baseTransition,
+        primaryStateStyles,
+        secondaryStateStyles,
+        criticalStateStyles,
+        criticalStateDisabledStyles,
+        disabledStateStyles,
+        disabledStyles,
+        size === "small" && typography.caption,
+        size === "medium" && 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
+      })
+    })
+  );
+};
+Link.displayName = "Link";
+
+export {
+  Link
+};

package/dist/chunk-BYNATA7V.js

@@ -0,0 +1,114 @@
+import {
+  Label
+} from "./chunk-PY6MF2II.js";
+import {
+  Button
+} from "./chunk-T23U4LBM.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding,
+  componentPaddingMinusBorder,
+  componentPaddingYUsingComponentGap
+} from "./chunk-LJ2W2FEG.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 -outline-offset-2",
+        componentGap,
+        baseTransition,
+        classNames,
+        className,
+        textColor
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Label, { 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-BZFVPEG3.js

@@ -0,0 +1,98 @@
+import {
+  Paragraph
+} from "./chunk-QBXVAKCM.js";
+import {
+  Label
+} from "./chunk-HBD6NLMB.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding
+} from "./chunk-2TLQVCQQ.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
+}) => {
+  const uniqueId = useId();
+  const internalRef = useRef(null);
+  const actualRef = ref || internalRef;
+  const menuId = useRef(`menu-${uniqueId}`);
+  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);
+        }
+      }, additionalAttributes), {
+        tabIndex: -1,
+        children: [
+          before,
+          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
+          after
+        ]
+      })
+    ),
+    subMenu == null ? void 0 : subMenu(menuId.current, actualRef)
+  ] });
+};
+MenuOption.displayName = "MenuOption";
+
+export {
+  MenuOption
+};