@janbox/storefront-ui 1.0.1 → 1.0.3

package/dist/lib/icon-button/icon-button.cjs

@@ -1,146 +0,0 @@
-"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 helpers = require("./helpers.cjs");
-const index = require("../../hooks/use-ripple-effect/index.cjs");
-const utils_index = require("../../utils/index.cjs");
-const loadingWaiting = require("../../assets/svg/loading-waiting.svg.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-const theme_palette = require("../../theme/palette.cjs");
-const common = require("../../utils/common.cjs");
-const icon = require("../icon/icon.cjs");
-const emotionHelpers = require("../../utils/emotion-helpers.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const IconButton = react.forwardRef((_props, ref) => {
-  var _a, _b, _c, _d;
-  const { color, variant, children, icon: icon$1, isLoading, ...rest } = helpers.getIconButtonProps(_props);
-  const {
-    dark,
-    light,
-    main,
-    contrastText,
-    placeholder: placeholderColor,
-    ariaDisabledSurface,
-    ariaDisabledText
-  } = utils_index.getColorShadesByVariant(color);
-  const buttonRef = react.useRef(null);
-  const { className } = index.useRippleEffect(buttonRef);
-  const mergedRef = react$1.useMergeRefs([ref, buttonRef]);
-  const createStyle = (screen) => {
-    const { css: css2 } = rest[screen] ?? {};
-    return [css2];
-  };
-  const css = [
-    {
-      display: "flex",
-      width: "fit-content",
-      height: "fit-content",
-      position: "relative",
-      justifyContent: "center",
-      alignItems: "center",
-      pointerEvents: common.ensureBoolean(rest["aria-disabled"]) ? "none" : void 0,
-      ":disabled": {
-        pointerEvents: "none"
-      }
-    },
-    isLoading && {
-      pointerEvents: "none",
-      "& > *:not([data-loading])": {
-        visibility: "hidden"
-      }
-    },
-    variant === "contained" && {
-      backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
-      ":hover": {
-        backgroundColor: dark
-      },
-      "&[aria-disabled=true]": {
-        backgroundColor: ariaDisabledSurface,
-        pointerEvents: "none"
-      }
-    },
-    variant === "outlined" && {
-      backgroundColor: "transparent",
-      color: isLoading ? placeholderColor : main,
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderColor: isLoading ? placeholderColor : main,
-      ":hover": {
-        backgroundColor: light
-      },
-      "&[aria-disabled=true]": {
-        color: ariaDisabledText,
-        pointerEvents: "none",
-        borderColor: "currentcolor"
-      }
-    },
-    variant === "text" && {
-      backgroundColor: "transparent",
-      color: isLoading ? placeholderColor : main,
-      ":hover": {
-        backgroundColor: light
-      },
-      "&[aria-disabled=true]": {
-        color: ariaDisabledText
-      }
-    },
-    {
-      ":disabled": {
-        color: theme_palette.getColorVar("neutral.500"),
-        backgroundColor: theme_palette.getColorVar("neutral.300")
-      }
-    },
-    rest["aria-disabled"] && {
-      pointerEvents: "none"
-    },
-    createStyle("xs"),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle("sm"),
-      [theme_screens.mediaQuery("md")]: createStyle("md")
-    }
-  ];
-  const onClick = (e) => {
-    var _a2;
-    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      css,
-      ...utils_index.omitResponsiveProps(rest),
-      className: stylesheet.cn(rest.className, className),
-      onClick,
-      ref: mergedRef,
-      children: [
-        !!icon$1 && /* @__PURE__ */ jsxRuntime.jsx(
-          icon.Icon,
-          {
-            ...icon$1,
-            xs: {
-              size: utils_index.getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
-              ...icon$1.xs
-            },
-            sm: {
-              size: utils_index.getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
-              ...icon$1.sm
-            },
-            md: {
-              size: utils_index.getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
-              ...icon$1.md
-            },
-            lg: {
-              size: utils_index.getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
-              ...icon$1.lg
-            }
-          }
-        ),
-        children,
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-loading": true, css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { css: emotionHelpers.animateSpin, source: loadingWaiting }) })
-      ]
-    }
-  );
-});
-exports.IconButton = IconButton;

package/dist/lib/image/helpers.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_index = require("../../utils/index.cjs");
-const defaultProps = {
-  loading: "lazy",
-  xs: {
-    css: {
-      objectFit: "cover"
-    }
-  }
-};
-const getImageProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getImageProps = getImageProps;

package/dist/lib/image/image.cjs

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const lodashEs = require("lodash-es");
-const helpers = require("./helpers.cjs");
-const imagePlaceholder = require("../../assets/svg/image-placeholder.svg.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const Image = react.forwardRef((_props, ref) => {
-  const { xs, sm, md, lg, fallback = true, src, ...rest } = helpers.getImageProps(_props);
-  const fallbackSrc = react.useMemo(() => {
-    if (lodashEs.isString(fallback)) return fallback;
-    return fallback ? imagePlaceholder : void 0;
-  }, [fallback]);
-  const css = [
-    {
-      maxHeight: "100%"
-    },
-    xs == null ? void 0 : xs.css,
-    {
-      [theme_screens.mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [theme_screens.mediaQuery("md")]: md == null ? void 0 : md.css,
-      [theme_screens.mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
-  ];
-  const onError = (e) => {
-    var _a;
-    if (fallbackSrc) {
-      e.currentTarget.src = fallbackSrc;
-    }
-    (_a = rest.onError) == null ? void 0 : _a.call(rest, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: src || fallbackSrc, alt: "", css, ...rest, ref, onError });
-});
-exports.Image = Image;

package/dist/lib/input/helpers.cjs

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const utils_index = require("../../utils/index.cjs");
-const defaultProps = {
-  xs: {
-    size: "md"
-  }
-};
-const getInputCssBySize = (size) => {
-  const { inputPaddingX, inputSize, textVariant } = utils_index.getSizeVariantState(size);
-  return {
-    paddingLeft: inputPaddingX,
-    paddingRight: inputPaddingX,
-    height: inputSize,
-    fontSize: textVariant ? theme_typography.getTypographyVar(textVariant).fontSize : void 0,
-    lineHeight: textVariant ? theme_typography.getTypographyVar(textVariant).lineHeight : void 0
-  };
-};
-const getInputProps = (extended) => {
-  return utils_index.mergeComponentProps(
-    defaultProps,
-    extended,
-    ...theme_screens.screens.map((screen) => {
-      return (current) => {
-        var _a;
-        return {
-          [screen]: {
-            css: getInputCssBySize((_a = current[screen]) == null ? void 0 : _a.size)
-          }
-        };
-      };
-    })
-  );
-};
-exports.getInputProps = getInputProps;

package/dist/lib/input/input.cjs

@@ -1,205 +0,0 @@
-"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 helpers = require("./helpers.cjs");
-const input_module = require("./input.module.scss.cjs");
-const utils_index = require("../../utils/index.cjs");
-const eyeHidden = require("../../assets/svg/eye-hidden.svg.cjs");
-const eyeShowVisible = require("../../assets/svg/eye-show-visible.svg.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const formHelperText = require("../form-helper-text/form-helper-text.cjs");
-const icon = require("../icon/icon.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const Input = react.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
-  } = helpers.getInputProps(_props);
-  const inputRef = react.useRef(null);
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [typingValue, setTypingValue] = react.useState();
-  const timeoutFn = react.useRef(null);
-  const beforeChangeValue = react.useRef("");
-  const mergedRefs = react$1.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 (lodashEs.isString(value)) {
-        setTypingValue(e.target.value);
-      }
-      return;
-    }
-    if (debounce > 0) {
-      if (lodashEs.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),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md),
-      [theme_screens.mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  const toggleShowPassword = (e) => {
-    e.stopPropagation();
-    setShowPassword((prev) => !prev);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, className: stylesheet.cn(input_module.default.input__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        css,
-        ...mainProps,
-        className: stylesheet.cn(
-          input_module.default.input__main,
-          {
-            [input_module.default.input__main_error]: error
-          },
-          mainProps == null ? void 0 : mainProps.className
-        ),
-        children: [
-          prefix,
-          !!startIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            icon.Icon,
-            {
-              ...startIcon,
-              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
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              "data-error": error,
-              type: type === "password" && showPassword ? "text" : type,
-              className: stylesheet.cn(input_module.default.input__control, className),
-              ...rest,
-              value: typingValue ?? value,
-              ref: mergedRefs,
-              onChange,
-              onBlur,
-              onFocus
-            }
-          ),
-          !!endIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            icon.Icon,
-            {
-              ...endIcon,
-              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,
-          type === "password" && /* @__PURE__ */ jsxRuntime.jsx(
-            icon.Icon,
-            {
-              onClick: toggleShowPassword,
-              css: { cursor: "pointer" },
-              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
-              },
-              source: showPassword ? eyeShowVisible : eyeHidden
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
-  ] });
-});
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
-exports.Input = Input;

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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
-};
-exports.default = classes;
-exports.input__container = input__container;
-exports.input__control = input__control;
-exports.input__main = input__main;
-exports.input__main_error = input__main_error;

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

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

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

@@ -1,120 +0,0 @@
-"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 utils_index = require("../../utils/index.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-const theme_palette = require("../../theme/palette.cjs");
-const genericElement = require("../generic-element/generic-element.cjs");
-const icon = require("../icon/icon.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const InputMask = (_props, ref) => {
-  const { prefix, suffix, children, xs, sm, md, startIcon, endIcon, lg, className, error, ...props } = helpers.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 ? theme_palette.getColorVar("red.600") : void 0
-      }
-    },
-    createStyle(xs),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md),
-      [theme_screens.mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    genericElement.GenericElement,
-    {
-      className: stylesheet.cn(className),
-      css,
-      ...props,
-      ref,
-      children: [
-        prefix,
-        !!startIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          icon.Icon,
-          {
-            ...startIcon,
-            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
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children }),
-        !!endIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          icon.Icon,
-          {
-            ...endIcon,
-            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
-      ]
-    }
-  );
-};
-const ForwardRefInputMask = react.forwardRef(InputMask);
-const createStyle = ({ size, css, outline } = {}) => {
-  const { inputSize, inputPaddingX } = utils_index.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
-  ];
-};
-exports.InputMask = ForwardRefInputMask;