@dmsi/wedgekit-react 0.0.4

package/dist/chunk-ORMEWXMH.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/chunk-ORW5CX24.js

@@ -0,0 +1,316 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  Icon
+} from "./chunk-5K3U4IUW.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 InputBase = (_a) => {
+  var _b = _a, {
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    selectOnFocus,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName"
+  ]);
+  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]);
+  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({
+                  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 _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-OUHI4UBN.js

@@ -0,0 +1,38 @@
+import {
+  Button
+} from "./chunk-ZRQZOT6X.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
+};

package/dist/chunk-OULD24TE.js

@@ -0,0 +1,98 @@
+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
+}) => {
+  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
+};

package/dist/chunk-P66A67NV.js

@@ -0,0 +1,30 @@
+// src/components/ModalScrim.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var ModalScrim = ({
+  className,
+  show = false,
+  children,
+  onClick,
+  ref
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed",
+        !show && " pointer-events-none",
+        className,
+        "inset-0 z-50"
+      ),
+      onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+export {
+  ModalScrim
+};