@dmsi/wedgekit-react 0.0.4

package/dist/chunk-GPIG2QUB.js

@@ -0,0 +1,437 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.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,
+  useState
+} from "react";
+import clsx from "clsx";
+
+// src/utils/formatting.tsx
+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);
+}
+function formatCurrencyDisplay(value) {
+  if (!value || value === "") {
+    return "";
+  }
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+}
+
+// src/components/Input.tsx
+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,
+    focus
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName",
+    "focus"
+  ]);
+  const attributes = {
+    "data-error": error && !focus || null,
+    "data-focus": focus || 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 -outline-offset-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal",
+    "relative"
+  );
+  const inputFocusClass = clsx(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus 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",
+        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 _b = _a, {
+    variant = "default",
+    decimals,
+    uom,
+    removeSearchIcon,
+    value: propValue,
+    onChange,
+    onBlur
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur"
+  ]);
+  const [internalValue, setInternalValue] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+  useEffect(() => {
+    var _a2;
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (variant === "currency") {
+      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
+        setInternalValue("");
+        setDisplayValue("");
+      } else {
+        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
+        if (!isNaN(numValue)) {
+          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
+          setInternalValue(formatted);
+          setDisplayValue(formatCurrencyDisplay(formatted));
+        }
+      }
+    } else {
+      setInternalValue(stringValue);
+      setDisplayValue(stringValue);
+    }
+  }, [propValue, decimals, variant]);
+  const getInputProps = () => {
+    var _a2;
+    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    switch (variant) {
+      case "search":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+          className: "!pr-6",
+          value: displayValue
+        });
+      case "finder":
+        return baseProps;
+      case "currency":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          align: "right",
+          type: "text",
+          value: displayValue
+        });
+      case "percentage":
+      case "uom":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          type: "number",
+          align: "right"
+        });
+      default:
+        return baseProps;
+    }
+  };
+  const getBeforeElement = () => {
+    if (props.before) return props.before;
+    switch (variant) {
+      case "search":
+        return !removeSearchIcon ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "search" }) }) : null;
+      case "currency":
+        return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) });
+      default:
+        return null;
+    }
+  };
+  const getAfterElement = () => {
+    if (props.after) return props.after;
+    switch (variant) {
+      case "search": {
+        const hasValue = displayValue.length > 0;
+        return hasValue && !props.readOnly ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "close",
+            onClick: handleSearchReset,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      }
+      case "finder":
+        return /* @__PURE__ */ jsx(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+      case "percentage":
+        return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) });
+      default:
+        return null;
+    }
+  };
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+  };
+  const handleChange = (e) => {
+    const rawValue = e.target.value;
+    if (variant === "search") {
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+    if (variant === "currency") {
+      const raw = rawValue.replace(/,/g, "");
+      if (raw === "") {
+        setInternalValue("");
+        setDisplayValue("");
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      const regex = /^\d*\.?\d*$/;
+      if (!regex.test(raw)) return;
+      const parts = raw.split(".");
+      const currentDecimals = decimals != null ? decimals : 2;
+      if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      setInternalValue(raw);
+      setDisplayValue(formatCurrencyDisplay(raw));
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+      return;
+    }
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    if (variant === "currency") {
+      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
+      setInternalValue(formatted);
+      setDisplayValue(formatCurrencyDisplay(formatted));
+      const asNumber = Number(formatted);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur
+    })
+  );
+};
+Input.displayName = "Input";
+var Finder = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var Search = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "search" }));
+var UOM = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Currency = (props) => {
+  var _a;
+  const handleCurrencyChange = (e) => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
+  );
+};
+var Percentage = (props) => /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+Finder.displayName = "Finder";
+Search.displayName = "Search";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";
+
+export {
+  InputBase,
+  Input,
+  Finder,
+  Search,
+  UOM,
+  Currency,
+  Percentage
+};

package/dist/chunk-GV63QYC5.js

@@ -0,0 +1,130 @@
+import {
+  Paragraph
+} from "./chunk-IJ6AAL4W.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Checkbox.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = clsx(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = clsx(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = clsx(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = clsx(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = clsx(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = clsx(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = clsx(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadValues({
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              id: props.id,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ jsx("div", { className: clsx("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx(
+          Paragraph,
+          {
+            padded: true,
+            className: clsx(
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};