@janbox/storefront-ui 1.0.0

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

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const lodashEs = require("lodash-es");
+const inputNumber_module = require("./input-number.module.scss.cjs");
+const input = require("../input/input.cjs");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+require("clsx");
+require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const minus = require("../../assets/svg/minus.svg.cjs");
+const plus = require("../../assets/svg/plus.svg.cjs");
+const iconButton = require("../icon-button/icon-button.cjs");
+const MAX_FRACTION_DIGITS = 10;
+const InputNumber = ({
+  value,
+  defaultValue,
+  className,
+  step = 0,
+  suffix,
+  prefix,
+  fractionDigits = 0,
+  max = Infinity,
+  min = 0,
+  ref,
+  ...props
+}) => {
+  const inputRef = react.useRef(null);
+  const [valueAsString, setValueAsString] = useControllableState.useControllableState({
+    value: value == null ? void 0 : value.toString(),
+    defaultValue: (defaultValue == null ? void 0 : defaultValue.toString()) ?? ""
+  });
+  const valueAsNumber = parseFloat(valueAsString);
+  const mergedRefs = react$1.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 (lodashEs.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 (lodashEs.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__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      ...props,
+      value: valueAsString,
+      onChange,
+      transform: transformFn,
+      className: stylesheet.cn(inputNumber_module.default.input_number__input, className),
+      onKeyDown,
+      suffix: suffix ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: step > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        iconButton.IconButton,
+        {
+          color: "neutral",
+          xs: {
+            size: "xs"
+          },
+          icon: { source: plus },
+          onClick: onPlus,
+          "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber >= max
+        }
+      ) }),
+      prefix: prefix ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: step > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        iconButton.IconButton,
+        {
+          color: "neutral",
+          xs: {
+            size: "xs"
+          },
+          icon: { source: minus },
+          onClick: onMinus,
+          "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber <= min
+        }
+      ) }),
+      type: "number",
+      ref: mergedRefs
+    }
+  );
+};
+exports.InputNumber = InputNumber;

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

@@ -0,0 +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,132 @@
+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 "clsx";
+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.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const input_number__input = "_input_number__input_2xvhv_1";
+const classes = {
+  input_number__input
+};
+exports.default = classes;
+exports.input_number__input = input_number__input;

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

@@ -0,0 +1,11 @@
+import { InputProps } from '../input/types';
+import { ShallowMerge } from '../../types';
+export type InputNumberProps = ShallowMerge<InputProps, {
+    min?: number;
+    max?: number;
+    fractionDigits?: number | 'auto';
+    value?: number | string;
+    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,aAAa,CAAC;AAE3C,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.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_index = require("../../utils/index.cjs");
+const defaultProps = {
+  xs: {
+    size: "md"
+  }
+};
+const getInputRangeProps = (extended) => {
+  return utils_index.mergeComponentProps(defaultProps, extended);
+};
+exports.getInputRangeProps = getInputRangeProps;

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

@@ -0,0 +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

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

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

@@ -0,0 +1,2 @@
+export * from './input-range';
+//# 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"}

package/dist/lib/input-range/input-range.cjs

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const helpers = require("./helpers.cjs");
+const inputRange_module = require("./input-range.module.scss.cjs");
+const utils_index = require("../../utils/index.cjs");
+const longArrowRight = require("../../assets/svg/long-arrow-right.svg.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const inputNumber = require("../input-number/input-number.cjs");
+const icon = require("../icon/icon.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const formHelperText = require("../form-helper-text/form-helper-text.cjs");
+const InputRange = (_props) => {
+  const {
+    error,
+    helperText,
+    inputs,
+    xs,
+    md,
+    sm,
+    lg,
+    className,
+    onChange,
+    prefix,
+    suffix,
+    startIcon,
+    endIcon,
+    ...props
+  } = helpers.getInputRangeProps(_props);
+  const containerRef = react.useRef(null);
+  const inputRefs = react.useRef([]);
+  const iconProps = {
+    xs: {
+      size: utils_index.getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
+    },
+    sm: {
+      size: utils_index.getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+    },
+    md: {
+      size: utils_index.getSizeVariantState(md == null ? void 0 : md.size).iconSize
+    },
+    lg: {
+      size: utils_index.getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+    }
+  };
+  const onInputFocus = (e) => {
+    var _a, _b;
+    e.target.select();
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, e);
+  };
+  const onInputChange = (e) => {
+    var _a, _b;
+    const edge = e.currentTarget.dataset.edge;
+    onChange == null ? void 0 : onChange(e, edge);
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, e);
+  };
+  const css = [
+    createStyle(xs),
+    {
+      [theme_screens.mediaQuery("sm")]: createStyle(sm),
+      [theme_screens.mediaQuery("md")]: createStyle(md),
+      [theme_screens.mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { css, className: stylesheet.cn(inputRange_module.default.input_range, className), ...props, ref: containerRef, children: [
+      prefix,
+      !!startIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        icon.Icon,
+        {
+          ...startIcon,
+          css: { flexShrink: 0 },
+          className: stylesheet.cn(startIcon.className),
+          xs: {
+            size: utils_index.getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...startIcon.xs
+          },
+          sm: {
+            size: utils_index.getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...startIcon.sm
+          },
+          md: {
+            size: utils_index.getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...startIcon.md
+          },
+          lg: {
+            size: utils_index.getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...startIcon.lg
+          }
+        }
+      ),
+      ["from", "to"].map((edge, index, array) => {
+        const inputProps = (inputs == null ? void 0 : inputs.at(index)) ?? {};
+        return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            inputNumber.InputNumber,
+            {
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              "data-edge": edge,
+              "data-index": index,
+              className: stylesheet.cn(inputProps.className),
+              css: { textAlign: "center" },
+              mainProps: {
+                style: {
+                  borderWidth: 0,
+                  boxShadow: "none",
+                  paddingLeft: 0,
+                  paddingRight: 0
+                }
+              },
+              mode: "onBlur",
+              ...inputProps,
+              onChange: onInputChange,
+              onFocus: onInputFocus,
+              xs: {
+                size: xs == null ? void 0 : xs.size,
+                ...inputProps.xs
+              },
+              sm: {
+                size: sm == null ? void 0 : sm.size,
+                ...inputProps.sm
+              },
+              md: {
+                size: md == null ? void 0 : md.size,
+                ...inputProps.md
+              },
+              lg: {
+                size: lg == null ? void 0 : lg.size,
+                ...inputProps.lg
+              }
+            },
+            index
+          ),
+          index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...iconProps, css: { flexShrink: 0 }, source: longArrowRight })
+        ] }, index);
+      }),
+      !!endIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        icon.Icon,
+        {
+          ...endIcon,
+          css: { flexShrink: 0 },
+          className: stylesheet.cn(endIcon.className),
+          xs: {
+            size: utils_index.getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...endIcon.xs
+          },
+          sm: {
+            size: utils_index.getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...endIcon.sm
+          },
+          md: {
+            size: utils_index.getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...endIcon.md
+          },
+          lg: {
+            size: utils_index.getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...endIcon.lg
+          }
+        }
+      ),
+      suffix
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ size } = {}) => {
+  const { inputPaddingX } = utils_index.getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX
+    }
+  ];
+};
+exports.InputRange = InputRange;

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

@@ -0,0 +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;AAarF,eAAO,MAAM,UAAU,WAAY,eAAe,qDAiKjD,CAAC"}