@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/input/input.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isString } from "lodash-es";
+import { getInputProps } from "./helpers.js";
+import classes from "./input.module.scss.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import EyeHidden from "../../assets/svg/eye-hidden.svg.js";
+import EyeVisible from "../../assets/svg/eye-show-visible.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+import { Icon } from "../icon/icon.js";
+import { cn } from "../../utils/stylesheet.js";
+const Input = forwardRef((_props, ref) => {
+  const {
+    type,
+    xs,
+    sm,
+    md,
+    lg,
+    prefix,
+    suffix,
+    containerProps,
+    mainProps,
+    className,
+    helperText,
+    error,
+    startIcon,
+    endIcon,
+    onChange: onChangeProp,
+    transform,
+    debounce = 0,
+    mode = "onChange",
+    value,
+    ...rest
+  } = getInputProps(_props);
+  const inputRef = useRef(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [typingValue, setTypingValue] = useState();
+  const timeoutFn = useRef(null);
+  const beforeChangeValue = useRef("");
+  const mergedRefs = useMergeRefs([ref, inputRef]);
+  const onChange = (e, force = false) => {
+    e.target.value = transform ? transform(e.target.value) : e.target.value;
+    if (timeoutFn.current) {
+      clearTimeout(timeoutFn.current);
+    }
+    const isFocused = document.activeElement === e.target;
+    if (force || !isFocused) {
+      onChangeProp == null ? void 0 : onChangeProp(e);
+      return;
+    }
+    if (mode === "onBlur") {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      return;
+    }
+    if (debounce > 0) {
+      if (isString(value)) {
+        setTypingValue(e.target.value);
+      }
+      timeoutFn.current = setTimeout(() => {
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      }, debounce);
+      return;
+    }
+    onChangeProp == null ? void 0 : onChangeProp(e);
+  };
+  const onFocus = (e) => {
+    var _a;
+    beforeChangeValue.current = e.target.value;
+    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+  };
+  const onBlur = (e) => {
+    var _a;
+    if (beforeChangeValue.current !== e.target.value) {
+      if (mode === "onBlur" || debounce > 0) {
+        onChange(e, true);
+      }
+    }
+    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
+    setTimeout(() => {
+      setTypingValue(void 0);
+    }, debounce);
+  };
+  const css = [
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  const toggleShowPassword = (e) => {
+    e.stopPropagation();
+    setShowPassword((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(classes.input__container, containerProps == null ? void 0 : containerProps.className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        css,
+        ...mainProps,
+        className: cn(
+          classes.input__main,
+          {
+            [classes.input__main_error]: error
+          },
+          mainProps == null ? void 0 : mainProps.className
+        ),
+        children: [
+          prefix,
+          !!startIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...startIcon,
+              xs: {
+                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+                ...startIcon.xs
+              },
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...startIcon.sm
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...startIcon.md
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...startIcon.lg
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-error": error,
+              type: type === "password" && showPassword ? "text" : type,
+              className: cn(classes.input__control, className),
+              ...rest,
+              value: typingValue ?? value,
+              ref: mergedRefs,
+              onChange,
+              onBlur,
+              onFocus
+            }
+          ),
+          !!endIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...endIcon,
+              xs: {
+                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+                ...endIcon.xs
+              },
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                ...endIcon.sm
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                ...endIcon.md
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                ...endIcon.lg
+              }
+            }
+          ),
+          suffix,
+          type === "password" && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              onClick: toggleShowPassword,
+              css: { cursor: "pointer" },
+              xs: {
+                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
+              },
+              sm: {
+                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+              },
+              md: {
+                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+              },
+              lg: {
+                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+              },
+              source: showPassword ? EyeVisible : EyeHidden
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+});
+const createStyle = ({ css } = {}) => {
+  return [css];
+};
+export {
+  Input
+};

package/dist/lib/input/input.module.scss.js

@@ -0,0 +1,17 @@
+const input__container = "_input__container_1129f_1";
+const input__main = "_input__main_1129f_8";
+const input__main_error = "_input__main_error_1129f_36";
+const input__control = "_input__control_1129f_40";
+const classes = {
+  input__container,
+  input__main,
+  input__main_error,
+  input__control
+};
+export {
+  classes as default,
+  input__container,
+  input__control,
+  input__main,
+  input__main_error
+};

package/dist/lib/input/types.d.ts

@@ -25,3 +25,4 @@ interface InputExtendedProps extends ResponsiveDesign<InputResponsiveProps> {
 }
 export type InputProps = ShallowMerge<JSX.IntrinsicElements['input'], InputExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,UAAU,kBAAmB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/lib/input-mask/helpers.d.ts

@@ -1,2 +1,3 @@
 import { InputMaskProps } from './types';
 export declare const getInputMaskProps: (extended: InputMaskProps) => InputMaskProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/input-mask/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAUzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,mBAEzD,CAAC"}

package/dist/lib/input-mask/helpers.js

@@ -1,9 +1,12 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getInputMaskProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getInputMaskProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getInputMaskProps
 };

package/dist/lib/input-mask/index.d.ts

@@ -1 +1,2 @@
 export * from './input-mask';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-mask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/lib/input-mask/input-mask.d.ts

@@ -3,3 +3,4 @@ import { InputMaskProps } from './types';
 declare const InputMask: <P extends HTMLProps<HTMLElement> = HTMLProps<HTMLElement>, E extends HTMLElement = HTMLElement>(_props: InputMaskProps<P, E>, ref?: React.ForwardedRef<E>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ForwardRefInputMask: typeof InputMask;
 export { ForwardRefInputMask as InputMask };
+//# sourceMappingURL=input-mask.d.ts.map

package/dist/lib/input-mask/input-mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-mask.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,cAAc,EAA4B,MAAM,SAAS,CAAC;AAQnE,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,CAAC,WAAW,CAAC,2BAA2B,CAAC,SAAS,WAAW,wBACzF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,QACtB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,qDAmF5B,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAuC,OAAO,SAAS,CAAC;AAEjF,OAAO,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC"}

package/dist/lib/input-mask/input-mask.js

@@ -0,0 +1,110 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import { getInputMaskProps } from "./helpers.js";
+import { mediaQuery } from "../../theme/screens.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { Primitive } from "../primitive/primitive.js";
+import { Icon } from "../icon/icon.js";
+const InputMask = (_props, ref) => {
+  const { prefix, suffix, children, xs, sm, md, startIcon, endIcon, lg, error, ...props } = getInputMaskProps(_props);
+  const css = [
+    {
+      display: "flex",
+      paddingTop: 2,
+      paddingBottom: 2,
+      alignItems: "center",
+      gap: 8,
+      overflow: "hidden",
+      width: "100%",
+      position: "relative",
+      borderRadius: 8,
+      ":after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        borderRadius: 8,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: error ? getColorVar("red.600") : void 0
+      }
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxs(Primitive, { css, ...props, ref, children: [
+    prefix,
+    !!startIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...startIcon,
+        xs: {
+          size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+          ...startIcon.xs
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...startIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...startIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...startIcon.lg
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Fragment, { children }),
+    !!endIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...endIcon,
+        xs: {
+          size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+          ...endIcon.xs
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...endIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...endIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...endIcon.lg
+        }
+      }
+    ),
+    suffix
+  ] });
+};
+const ForwardRefInputMask = forwardRef(InputMask);
+const createStyle = ({ size, css, outline } = {}) => {
+  const { inputSize, inputPaddingX } = getSizeVariantState(size);
+  return [
+    {
+      minHeight: inputSize,
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      ":after": {
+        borderTopWidth: outline == null ? void 0 : outline.top,
+        borderRightWidth: outline == null ? void 0 : outline.right,
+        borderBottomWidth: outline == null ? void 0 : outline.bottom,
+        borderLeftWidth: outline == null ? void 0 : outline.left
+      }
+    },
+    css
+  ];
+};
+export {
+  ForwardRefInputMask as InputMask
+};

package/dist/lib/input-mask/types.d.ts

@@ -18,3 +18,4 @@ export type InputMaskProps<P = HTMLProps<HTMLElement>, E = HTMLElement> = Shallo
     endIcon?: IconProps;
     error?: boolean;
 }> & ResponsiveDesign<InputMaskResponsiveProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-mask/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,WAAW,IAAI,YAAY,CACpF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EACpB;IACE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CACF,GACC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC"}

package/dist/lib/input-number/index.d.ts

@@ -1 +1,2 @@
 export * from './input-number';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/lib/input-number/input-number.d.ts

@@ -1,2 +1,3 @@
 import { InputNumberProps } from './types';
 export declare const InputNumber: ({ value, defaultValue, className, step, suffix, prefix, fractionDigits, max, min, ref, ...props }: InputNumberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-number.d.ts.map

package/dist/lib/input-number/input-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAY3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,qDAuHlB,CAAC"}

package/dist/lib/input-number/input-number.js

@@ -0,0 +1,131 @@
+import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isNil } from "lodash-es";
+import classes from "./input-number.module.scss.js";
+import { Input } from "../input/input.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
+import MinusIcon from "../../assets/svg/minus.svg.js";
+import PlusIcon from "../../assets/svg/plus.svg.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const MAX_FRACTION_DIGITS = 10;
+const InputNumber = ({
+  value,
+  defaultValue,
+  className,
+  step = 0,
+  suffix,
+  prefix,
+  fractionDigits = 0,
+  max = Infinity,
+  min = 0,
+  ref,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  const [valueAsString, setValueAsString] = useControllableState({
+    value: value == null ? void 0 : value.toString(),
+    defaultValue: (defaultValue == null ? void 0 : defaultValue.toString()) ?? ""
+  });
+  const valueAsNumber = parseFloat(valueAsString);
+  const mergedRefs = useMergeRefs([ref, inputRef]);
+  const fractionDigitsInNumber = typeof fractionDigits === "number" ? fractionDigits : MAX_FRACTION_DIGITS;
+  const transformFn = (value2) => {
+    var _a, _b;
+    value2 = value2.replace(/e|E/g, "");
+    if (min >= 0) {
+      value2 = value2.replace(/^-/, "");
+    }
+    if (fractionDigits === 0) {
+      value2 = value2.replace(/\.\d+$/, "");
+    } else {
+      const parts = value2.split(".");
+      if (parts.length > 1) {
+        const decimalPart = (_a = parts.at(1)) == null ? void 0 : _a.slice(0, Math.min(fractionDigitsInNumber, MAX_FRACTION_DIGITS));
+        value2 = `${parts.at(0)}.${decimalPart}`;
+      }
+    }
+    return ((_b = props.transform) == null ? void 0 : _b.call(props, value2)) ?? value2;
+  };
+  const onChange = (e) => {
+    var _a;
+    if (props.mode === "onBlur" && e.target.valueAsNumber < min) {
+      e.target.value = min.toString();
+    }
+    setValueAsString(e.target.value);
+    (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+  };
+  const onKeyDown = (e) => {
+    var _a;
+    if (e.key === "e" || e.key === "E") {
+      e.preventDefault();
+    }
+    (_a = props.onKeyDown) == null ? void 0 : _a.call(props, e);
+  };
+  const dispatchChange = (nextValue) => {
+    var _a;
+    if (!inputRef.current) return;
+    const nativeInputValueSetter = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a.set;
+    nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(inputRef.current, nextValue);
+    const event = new Event("input", { bubbles: true });
+    inputRef.current.dispatchEvent(event);
+  };
+  const onPlus = (_e) => {
+    const inputEl = inputRef.current;
+    if (isNil(inputEl)) return;
+    const currentValueAsNumber = inputEl.valueAsNumber;
+    const nextValueAsNumber = Math.min(isNaN(currentValueAsNumber) ? step : currentValueAsNumber + step, max);
+    if (currentValueAsNumber === nextValueAsNumber) return;
+    dispatchChange(nextValueAsNumber.toString());
+  };
+  const onMinus = (_e) => {
+    const inputEl = inputRef.current;
+    if (isNil(inputEl)) return;
+    const currentValueAsNumber = inputEl.valueAsNumber;
+    const nextValueAsNumber = Math.max(isNaN(currentValueAsNumber) ? step : currentValueAsNumber - step, min);
+    if (currentValueAsNumber === nextValueAsNumber) return;
+    dispatchChange(nextValueAsNumber.toString());
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      value: valueAsString,
+      onChange,
+      transform: transformFn,
+      className: cn(classes.input_number__input, className),
+      onKeyDown,
+      suffix: suffix ?? /* @__PURE__ */ jsx(Fragment, { children: step > 0 && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          color: "neutral",
+          xs: {
+            size: "xs"
+          },
+          icon: { source: PlusIcon },
+          onClick: onPlus,
+          "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber >= max
+        }
+      ) }),
+      prefix: prefix ?? /* @__PURE__ */ jsx(Fragment, { children: step > 0 && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          color: "neutral",
+          xs: {
+            size: "xs"
+          },
+          icon: { source: MinusIcon },
+          onClick: onMinus,
+          "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber <= min
+        }
+      ) }),
+      type: "number",
+      ref: mergedRefs
+    }
+  );
+};
+export {
+  InputNumber
+};

package/dist/lib/input-number/input-number.module.scss.js

@@ -0,0 +1,8 @@
+const input_number__input = "_input_number__input_2xvhv_1";
+const classes = {
+  input_number__input
+};
+export {
+  classes as default,
+  input_number__input
+};

package/dist/lib/input-number/types.d.ts

@@ -8,3 +8,4 @@ export type InputNumberProps = ShallowMerge<InputProps, {
     defaultValue?: number;
     step?: number;
 }>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-number/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,YAAY,CACzC,UAAU,EACV;IACE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CACF,CAAC"}

package/dist/lib/input-range/helpers.d.ts

@@ -1,2 +1,3 @@
 import { InputRangeProps } from './types';
 export declare const getInputRangeProps: (extended: InputRangeProps) => InputRangeProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/input-range/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}

package/dist/lib/input-range/helpers.js

@@ -1,9 +1,12 @@
-import { mergeComponentProps } from '../../utils';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getInputRangeProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getInputRangeProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getInputRangeProps
 };

package/dist/lib/input-range/index.d.ts

@@ -1,2 +1,3 @@
 export * from './input-range';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/input-range/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/lib/input-range/input-range.d.ts

@@ -1,2 +1,3 @@
 import { InputRangeProps } from './types';
 export declare const InputRange: (_props: InputRangeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-range.d.ts.map

package/dist/lib/input-range/input-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/input-range.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,eAAe,EAA6B,MAAM,SAAS,CAAC;AAYrF,eAAO,MAAM,UAAU,WAAY,eAAe,qDA4JjD,CAAC"}