@dmsi/wedgekit-react 0.0.4

package/dist/components/Time.cjs

@@ -0,0 +1,1059 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Time.tsx
+var Time_exports = {};
+__export(Time_exports, {
+  Time: () => Time
+});
+module.exports = __toCommonJS(Time_exports);
+var import_react2 = require("react");
+
+// src/components/Input.tsx
+var import_react = require("react");
+var import_clsx4 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "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: (0, import_clsx.default)(
+    "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: (0, import_clsx.default)(
+    "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: (0, import_clsx.default)(
+    "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: (0, import_clsx.default)(
+    "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: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "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 = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "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 = (0, import_clsx.default)(
+  "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 = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Label.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.default)(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+// src/components/Icon.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx3.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// 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
+var import_jsx_runtime3 = require("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 = (0, import_react.useRef)(null);
+  (0, import_react.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 = (0, import_clsx4.default)(
+    "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 = (0, import_clsx4.default)(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
+  );
+  const inputDisabledClass = (0, import_clsx4.default)(
+    "has-disabled:bg-background-action-secondary-disabled"
+  );
+  const inputReadOnlyClass = (0, import_clsx4.default)(
+    "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 = (0, import_clsx4.default)(
+    "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__ */ (0, import_jsx_runtime3.jsxs)(
+    "label",
+    {
+      ref: inputContainerRef,
+      className: (0, import_clsx4.default)(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        componentGap
+      ),
+      style: __spreadValues({}, props.style),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx4.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Label,
+            {
+              className: (0, import_clsx4.default)(
+                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: label
+            }
+          ),
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: (0, import_clsx4.default)(typography.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx4.default)(
+              inputBaseClass,
+              !props.disabled && inputInvalidClass,
+              inputFocusClass,
+              inputDisabledClass,
+              inputReadOnlyClass,
+              wrapperClassName
+            ),
+            children: [
+              before,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                __spreadProps(__spreadValues(__spreadValues({
+                  ref: (el) => {
+                    inputRef.current = el;
+                  },
+                  type,
+                  required
+                }, props), attributes), {
+                  id: props.id,
+                  className: (0, import_clsx4.default)(
+                    "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,
+    onClear
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur",
+    "onClear"
+  ]);
+  const [internalValue, setInternalValue] = (0, import_react.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react.useState)("");
+  (0, import_react.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: "!mr-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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" }) }) : null;
+      case "currency":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+          Icon,
+          {
+            name: "close",
+            onClick: handleSearchReset,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      }
+      case "finder":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+      case "percentage":
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
+      default:
+        return null;
+    }
+  };
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+    onClear == null ? void 0 : onClear();
+  };
+  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__ */ (0, import_jsx_runtime3.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur
+    })
+  );
+};
+Input.displayName = "Input";
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
+  );
+};
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+Finder.displayName = "Finder";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";
+
+// src/components/Surface.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Surface = (_a) => {
+  var _b = _a, {
+    className,
+    elevation = 0,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "elevation",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx5.default)(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
+
+// src/components/Time.tsx
+var import_react_dom = require("react-dom");
+var import_clsx6 = __toESM(require("clsx"), 1);
+
+// src/utils.ts
+function findDocumentRoot(element) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment."
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.document.body;
+  }
+  var currentElement = element;
+  while (currentElement && currentElement.parentNode) {
+    if (currentElement.parentNode === document) {
+      return document.body;
+    } else if (currentElement.parentNode instanceof DocumentFragment) {
+      return currentElement.parentNode;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return window.document.body;
+}
+
+// src/components/Time.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
+var Time = (_a) => {
+  var _b = _a, { onChange, format = "12h" } = _b, props = __objRest(_b, ["onChange", "format"]);
+  const [showTimePicker, setShowTimePicker] = (0, import_react2.useState)(false);
+  const [hasInteracted, setHasInteracted] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
+  const timeRef = (0, import_react2.useRef)(null);
+  const [timePosition, setTimePosition] = (0, import_react2.useState)({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [hour, setHour] = (0, import_react2.useState)(null);
+  const [minute, setMinute] = (0, import_react2.useState)(null);
+  const [meridiem, setMeridiem] = (0, import_react2.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react2.useState)("");
+  const is12HourFormat = format === "12h";
+  const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
+  const updatePosition = () => {
+    if (inputRef.current) {
+      requestAnimationFrame(() => {
+        const parent = inputRef.current ? inputRef.current.parentElement : null;
+        const rect = parent == null ? void 0 : parent.getBoundingClientRect();
+        if (rect) {
+          setTimePosition({
+            top: rect.bottom + window.scrollY + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width
+          });
+        }
+      });
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (inputRef.current) {
+      resizeObserver.observe(inputRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
+        setShowTimePicker(false);
+      }
+    };
+    if (showTimePicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showTimePicker]);
+  (0, import_react2.useEffect)(() => {
+    if (formattedTime && hasInteracted) {
+      setInputValue(formattedTime);
+      onChange == null ? void 0 : onChange({
+        target: { value: formattedTime }
+      });
+    }
+  }, [formattedTime, hasInteracted, onChange]);
+  const handleFocus = () => {
+    if (!props.disabled && !props.readOnly) {
+      setHasInteracted(true);
+      setShowTimePicker(true);
+      if (is12HourFormat && meridiem === null) {
+        setMeridiem("AM");
+      }
+    }
+  };
+  const handleSelect = (type, value) => {
+    if (type === "hour") setHour(value);
+    if (type === "minute") setMinute(value);
+    if (type === "meridiem") setMeridiem(value);
+    setTimeout(() => {
+      const allSet = (type === "hour" ? value : hour) && (type === "minute" ? value : minute) && (is12HourFormat ? type === "meridiem" ? value : meridiem : true);
+      if (allSet) {
+        setShowTimePicker(false);
+      }
+    }, 100);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!showTimePicker && formattedTime) {
+      setInputValue(formattedTime);
+    }
+  }, [showTimePicker, formattedTime]);
+  const handleInputChange = (e) => {
+    const value = e.target.value.toUpperCase().replace(/[^0-9:APM ]/gi, "").trim();
+    setInputValue(value);
+    if (value === "") {
+      setHour(null);
+      setMinute(null);
+      setMeridiem(null);
+      setShowTimePicker(true);
+    }
+    const match = value.match(
+      is12HourFormat ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/ : /^(\d{1,2}):(\d{2})$/
+    );
+    if (match) {
+      const [, hRaw, mRaw, mer] = match;
+      const h = parseInt(hRaw, 10);
+      const m = parseInt(mRaw, 10);
+      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+        let hStr;
+        const mStr = m.toString().padStart(2, "0");
+        let meridiemValue = mer;
+        if (is12HourFormat) {
+          hStr = (h % 12 || 12).toString().padStart(2, "0");
+          if (h > 12) {
+            meridiemValue = "PM";
+          }
+          setHour(hStr);
+          setMinute(mStr);
+          if (meridiemValue) {
+            setMeridiem(meridiemValue);
+          }
+        } else {
+          hStr = h.toString().padStart(2, "0");
+          setHour(hStr);
+          setMinute(mStr);
+        }
+      }
+    }
+    onChange == null ? void 0 : onChange(e);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      setShowTimePicker(false);
+      return;
+    }
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+    e.preventDefault();
+    let h;
+    let m;
+    let mer;
+    if (hour === null || minute === null || is12HourFormat && meridiem === null) {
+      const now = /* @__PURE__ */ new Date();
+      h = now.getHours();
+      m = Math.round(now.getMinutes() / 5) * 5;
+      if (m === 60) {
+        m = 0;
+        h += 1;
+      }
+      if (is12HourFormat) {
+        mer = h >= 12 ? "PM" : "AM";
+        h = h % 12 || 12;
+      } else {
+        mer = "AM";
+      }
+    } else {
+      h = parseInt(hour, 10);
+      m = parseInt(minute, 10);
+      mer = meridiem || "AM";
+    }
+    const step = 5;
+    const remainder = m % step;
+    m += e.key === "ArrowDown" ? remainder === 0 ? step : step - remainder : -(remainder === 0 ? step : remainder);
+    if (m >= 60) {
+      m -= 60;
+      h += 1;
+    } else if (m < 0) {
+      m += 60;
+      h -= 1;
+    }
+    if (is12HourFormat) {
+      if (h > 12) {
+        h = 1;
+        mer = mer === "AM" ? "PM" : "AM";
+      } else if (h <= 0) {
+        h = 12;
+        mer = mer === "AM" ? "PM" : "AM";
+      }
+    } else {
+      h = (h + 24) % 24;
+    }
+    setHour(h.toString().padStart(2, "0"));
+    setMinute(m.toString().padStart(2, "0"));
+    if (is12HourFormat) setMeridiem(mer);
+  };
+  const selectedRefs = {
+    hour: (0, import_react2.useRef)(null),
+    minute: (0, import_react2.useRef)(null),
+    meridiem: (0, import_react2.useRef)(null)
+  };
+  (0, import_react2.useEffect)(() => {
+    var _a2, _b2, _c;
+    if (showTimePicker) {
+      (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
+        block: "center",
+        behavior: "instant"
+      });
+      (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
+        block: "center",
+        behavior: "instant"
+      });
+      if (is12HourFormat) {
+        (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
+          block: "center",
+          behavior: "instant"
+        });
+      }
+    }
+  }, [
+    showTimePicker,
+    hour,
+    minute,
+    meridiem,
+    is12HourFormat,
+    selectedRefs.hour,
+    selectedRefs.minute,
+    selectedRefs.meridiem
+  ]);
+  const renderOptions = (items, type) => items.map((val) => {
+    const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      TimeCell,
+      {
+        selected: isSelected,
+        ref: isSelected ? (el) => {
+          selectedRefs[type].current = el;
+        } : null,
+        onClick: () => handleSelect(type, val),
+        className: (0, import_clsx6.default)("!size-10 cursor-pointer", typography.caption),
+        children: val
+      },
+      val
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative max-w-38", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      InputBase,
+      __spreadProps(__spreadValues({}, props), {
+        ref: inputRef,
+        value: inputValue,
+        placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
+        after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "schedule" }) }),
+        onFocus: handleFocus,
+        caption: props.caption,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        type: "text"
+      })
+    ),
+    showTimePicker && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Surface,
+        {
+          elevation: 4,
+          className: "absolute z-50 bg-background-grouped-primary-normal h-60 overflow-hidden",
+          style: {
+            top: `${timePosition.top}px`,
+            left: `${timePosition.left}px`,
+            minWidth: `${timePosition.width}px`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: timeRef, className: "px-4 flex h-60", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
+              Array.from(
+                { length: is12HourFormat ? 12 : 24 },
+                (_, i) => (i + 1).toString().padStart(2, "0")
+              ),
+              "hour"
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
+              Array.from(
+                { length: 12 },
+                (_, i) => (i * 5).toString().padStart(2, "0")
+              ),
+              "minute"
+            ) }),
+            is12HourFormat && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
+          ] })
+        }
+      ),
+      findDocumentRoot(timeRef.current)
+    )
+  ] });
+};
+function TimeCell(_a) {
+  var _b = _a, {
+    selected = false,
+    start = false,
+    intermediate = false,
+    end = false,
+    today = false,
+    disabled = false,
+    onClick,
+    onHover,
+    onKeyDown,
+    children,
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "start",
+    "intermediate",
+    "end",
+    "today",
+    "disabled",
+    "onClick",
+    "onHover",
+    "onKeyDown",
+    "children",
+    "className",
+    "ref"
+  ]);
+  const isDefault = !selected && !start && !intermediate && !end && !today;
+  const isToday = today && !selected && !start && !intermediate && !end;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      onPointerOver: onHover,
+      onClick,
+      onKeyDown,
+      disabled,
+      ref,
+      className: (0, import_clsx6.default)(
+        "w-full h-full aspect-square flex items-center justify-center ",
+        isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
+        isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
+        selected && "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
+        start && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
+        end && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
+        intermediate && "bg-action-100 border-y border-action-400",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Time
+});