@dmsi/wedgekit-react 0.0.4

package/dist/chunk-Z64CLA4J.js

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

package/dist/chunk-ZCFOYW2U.js

@@ -0,0 +1,296 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.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 clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputBase = (_a) => {
+  var _b = _a, {
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName"
+  ]);
+  const attributes = {
+    "data-error": error || null
+  };
+  const inputBaseClass = clsx(
+    "w-full",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    componentGap,
+    baseTransition,
+    "outline-transparent outline-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal"
+  );
+  const inputFocusClass = clsx(
+    "focus-within:border-transparent focus-within:outline-border-primary-focus"
+  );
+  const inputDisabledClass = clsx(
+    "has-disabled:bg-background-action-secondary-disabled"
+  );
+  const 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"
+  );
+  const 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"
+  );
+  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
+      ),
+      style: __spreadValues({}, props.style),
+      children: [
+        label && /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", componentGap), children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              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({
+                  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 _b = _a, {
+    removeSearchIcon
+  } = _b, props = __objRest(_b, [
+    "removeSearchIcon"
+  ]);
+  var _a2;
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues({}, props), {
+      placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+      before: !removeSearchIcon && /* @__PURE__ */ jsx(Icon, { name: "search" }),
+      after: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "close",
+          onClick: handleReset,
+          className: clsx(!props.value ? "text-transparent" : "cursor-pointer")
+        }
+      )
+    })
+  );
+  function handleReset() {
+    if (!props.value || !props.onChange) {
+      return;
+    }
+    const event = __spreadProps(__spreadValues({}, props), {
+      target: { value: "" }
+    });
+    props.onChange(event);
+  }
+};
+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-ZEYZVUG5.js

@@ -0,0 +1,53 @@
+import {
+  typography
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Heading3.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Heading3 = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "h3",
+    colorClassName,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "colorClassName",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsx(
+    Element,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        typography.heading3,
+        className,
+        (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+        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
+    })
+  );
+};
+Heading3.displayName = "Heading3";
+
+export {
+  Heading3
+};

package/dist/chunk-ZHRZMJA3.js

@@ -0,0 +1,31 @@
+import {
+  Heading2
+} from "./chunk-AEQYZFXI.js";
+import {
+  Button
+} from "./chunk-O2KOOPL4.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+
+// src/components/ModalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({ title, onClose }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
+    title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        iconOnly: true,
+        variant: "tertiary",
+        onClick: onClose,
+        leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
+      }
+    )
+  ] });
+};
+ModalHeader.displayName = "ModalHeader";
+
+export {
+  ModalHeader
+};

package/dist/chunk-ZJQAMKIP.js

@@ -0,0 +1,113 @@
+import {
+  Label
+} from "./chunk-S4IHG5J6.js";
+import {
+  Button
+} from "./chunk-4TH2SUHQ.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
+            ),
+            variant: "icon-only",
+            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-ZRQZOT6X.js

@@ -0,0 +1,141 @@
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingMinus2pxBorder,
+  componentPaddingXUsingComponentGap,
+  paddingUsingComponentGap,
+  typography
+} from "./chunk-6XDXJ3Z3.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
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children"
+  ]);
+  const primaryVariantStyles = variant === "primary" && clsx(
+    "bg-background-action-primary-normal border-background-action-primary-normal text-text-on-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(
+    "bg-background-action-secondary-normal border-border-action-normal text-text-action-primary-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 text-text-action-primary-normal",
+    "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(
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal text-text-on-action-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(
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal text-text-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(
+    "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 iconOnlyVariantStyles = variant === "icon-only" && clsx(
+    "bg-transparent border-transparent text-icon-action-primary-normal",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-icon-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-icon-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-background-action-secondary-active active:text-icon-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-icon-action-primary-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && clsx(
+    "bg-transparent text-text-on-action-primary-normal",
+    "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,
+    iconOnlyVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = clsx(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = as;
+  return /* @__PURE__ */ jsxs(
+    Element,
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: buttonClasses
+    }, props), {
+      disabled,
+      children: [
+        leftIcon && leftIcon,
+        variant !== "icon-only" && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+export {
+  Button
+};