@janbox/storefront-ui 1.0.1 → 1.0.3

package/dist/lib/accordion/accordion-summary/types.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var AccordionSummaryVariant = /* @__PURE__ */ ((AccordionSummaryVariant2) => {
-  AccordionSummaryVariant2["EndArrow"] = "end-arrow";
-  AccordionSummaryVariant2["EndPlusMinus"] = "end-plus-minus";
-  return AccordionSummaryVariant2;
-})(AccordionSummaryVariant || {});
-exports.AccordionSummaryVariant = AccordionSummaryVariant;

package/dist/lib/badge/badge.cjs

@@ -1,42 +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 utils_index = require("../../utils/index.cjs");
-const Badge = react.forwardRef((_props, ref) => {
-  const { children, badgeContent, color = "primary", ...rest } = helpers.getBadgeProps(_props);
-  const { main } = utils_index.getColorShadesByVariant(color);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { position: "relative", display: "inline-block" }, ...rest, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        css: {
-          backgroundColor: main,
-          width: "1.25rem",
-          height: "1.25rem",
-          zIndex: 10,
-          display: "flex",
-          opacity: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: "9999px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: "#FFFFFF",
-          color: "#FFFFFF",
-          fontSize: "0.75rem",
-          lineHeight: "1rem",
-          fontWeight: 400,
-          position: "absolute",
-          top: 0,
-          right: 0
-        },
-        children: lodashEs.isNumber(badgeContent) ? badgeContent > 9 ? "9+" : badgeContent : badgeContent
-      }
-    ),
-    children
-  ] });
-});
-exports.Badge = Badge;

package/dist/lib/badge/helpers.cjs

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

package/dist/lib/box/box.cjs

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const helpers = require("./helpers.cjs");
-require("react");
-require("clsx");
-require("lodash-es");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const Box = ({ children, container, ref, ..._props }) => {
-  const { xs, sm, md, lg, className, ...rest } = helpers.getBoxProps(_props);
-  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.jsx(
-    "div",
-    {
-      css,
-      className: stylesheet.cn(
-        {
-          container
-        },
-        className
-      ),
-      ...rest,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          css: {
-            width: "100%",
-            height: "100%"
-          },
-          children
-        }
-      )
-    }
-  );
-};
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
-  return [
-    {
-      width,
-      height,
-      "& > *": css
-    }
-  ];
-};
-exports.Box = Box;

package/dist/lib/box/helpers.cjs

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

package/dist/lib/breadcrumbs/breadcrumb-item/breadcrumb-item.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-require("clsx");
-require("lodash-es");
-require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const link = require("../../link/link.cjs");
-const icon = require("../../icon/icon.cjs");
-const BreadcrumbItem = react.forwardRef(
-  ({ children, className, icon: icon$1, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      link.Link,
-      {
-        css: { display: "flex", width: "fit-content", alignItems: "center", gap: "0.375rem" },
-        className: stylesheet.cn(className),
-        ref,
-        ...props,
-        children: [
-          icon$1 && /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...icon$1 }),
-          children
-        ]
-      }
-    );
-  }
-);
-exports.BreadcrumbItem = BreadcrumbItem;

package/dist/lib/breadcrumbs/breadcrumbs/breadcrumbs.cjs

@@ -1,44 +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 utils_index = require("../../../utils/index.cjs");
-const theme_palette = require("../../../theme/palette.cjs");
-const icon = require("../../icon/icon.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const Breadcrumbs = react.forwardRef(
-  ({ separator = ">", children, color = "primary", className, ...props }, ref) => {
-    const flattenedChildren = utils_index.flattenChildren(children);
-    const { main } = utils_index.getColorShadesByVariant(color);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        css: { display: "inline-flex", flexWrap: "wrap", gap: "0.5rem" },
-        className: stylesheet.cn(className),
-        ref,
-        ...props,
-        children: flattenedChildren.map((child, index, array) => {
-          const isLast = index === array.length - 1;
-          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                css: {
-                  display: "contents",
-                  color: theme_palette.getColorVar("neutral.500"),
-                  ":hover": {
-                    color: main
-                  }
-                },
-                children: child
-              }
-            ),
-            !isLast && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isString(separator) ? /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.500") }, children: separator }) : /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...separator }) })
-          ] }, index);
-        })
-      }
-    );
-  }
-);
-exports.Breadcrumbs = Breadcrumbs;

package/dist/lib/button/button.cjs

@@ -1,235 +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 reactRouter = require("react-router");
-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 emotionHelpers = require("../../utils/emotion-helpers.cjs");
-const icon = require("../icon/icon.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const Button = ({ children, ref, ..._props }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const buttonRef = react.useRef(null);
-  const { className } = index.useRippleEffect(buttonRef);
-  const mergedRef = react$1.useMergeRefs([ref, buttonRef]);
-  const {
-    color,
-    variant,
-    anchor,
-    translation,
-    prefix,
-    suffix,
-    isLoading,
-    disabled,
-    startIcon,
-    endIcon,
-    dangerouslySetInnerHTML,
-    ...rest
-  } = helpers.getButtonProps(_props);
-  const navigate = reactRouter.useNavigate();
-  const {
-    dark,
-    light,
-    main,
-    contrastText,
-    placeholder: placeholderColor,
-    ariaDisabledSurface,
-    ariaDisabledText
-  } = utils_index.getColorShadesByVariant(color);
-  const createStyle = (screen) => {
-    const { css: css2 } = rest[screen] ?? {};
-    return {
-      ...css2
-    };
-  };
-  const css = [
-    {
-      display: "flex",
-      maxWidth: "100%",
-      width: "fit-content",
-      position: "relative",
-      justifyContent: "center",
-      alignItems: "center",
-      whiteSpace: "nowrap",
-      "& > *:not([data-loading])": {
-        visibility: isLoading ? "hidden" : void 0
-      },
-      pointerEvents: isLoading ? "none" : void 0
-    },
-    variant === "contained" && {
-      backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
-      ":hover": {
-        backgroundColor: dark
-      },
-      ":disabled": {
-        backgroundColor: theme_palette.getColorVar("neutral.300"),
-        color: theme_palette.getColorVar("neutral.500")
-      },
-      "&[aria-disabled=true]": {
-        backgroundColor: ariaDisabledSurface,
-        pointerEvents: "none"
-      }
-    },
-    variant === "outlined" && {
-      backgroundColor: theme_palette.getColorVar("surface.default"),
-      color: isLoading ? placeholderColor : main,
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderColor: isLoading ? placeholderColor : main,
-      ":hover": {
-        backgroundColor: light
-      },
-      ":disabled": {
-        color: theme_palette.getColorVar("neutral.500"),
-        backgroundColor: theme_palette.getColorVar("neutral.300"),
-        borderColor: theme_palette.getColorVar("neutral.300")
-      },
-      "&[aria-disabled=true]": {
-        color: ariaDisabledText,
-        pointerEvents: "none",
-        borderColor: "currentcolor"
-      }
-    },
-    variant === "text" && {
-      backgroundColor: "transparent",
-      color: isLoading ? placeholderColor : main,
-      ":hover": {
-        backgroundColor: light
-      },
-      ":disabled": {
-        color: theme_palette.getColorVar("neutral.500"),
-        backgroundColor: theme_palette.getColorVar("neutral.300")
-      },
-      "&[aria-disabled=true]": {
-        color: ariaDisabledText
-      }
-    },
-    rest["aria-disabled"] && {
-      pointerEvents: "none"
-    },
-    createStyle("xs"),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle("sm"),
-      [theme_screens.mediaQuery("md")]: createStyle("md"),
-      [theme_screens.mediaQuery("lg")]: createStyle("lg")
-    }
-  ];
-  const onClick = (e) => {
-    var _a2;
-    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
-    if (e.defaultPrevented) {
-      return;
-    }
-    if (lodashEs.isNil(anchor == null ? void 0 : anchor.to)) {
-      return;
-    }
-    const { to, target, ...otherOptions } = anchor;
-    const href = lodashEs.isString(to) ? to : reactRouter.createPath(to);
-    if (target === "_blank") {
-      window.open(href, target);
-    } else {
-      try {
-        const url = new URL(href);
-        window.location.href = url.toString();
-      } catch (error) {
-        navigate(href, otherOptions);
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      css,
-      disabled,
-      ...utils_index.omitResponsiveProps(rest),
-      onClick,
-      className: stylesheet.cn(rest.className, className),
-      ref: mergedRef,
-      children: [
-        prefix,
-        !!startIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          icon.Icon,
-          {
-            ...startIcon,
-            css: {
-              flexShrink: 0
-            },
-            xs: {
-              size: utils_index.getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
-              ...startIcon.xs
-            },
-            sm: {
-              size: utils_index.getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
-              ...startIcon.sm
-            },
-            md: {
-              size: utils_index.getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
-              ...startIcon.md
-            },
-            lg: {
-              size: utils_index.getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
-              ...startIcon.lg
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            dangerouslySetInnerHTML,
-            css: emotionHelpers.truncate,
-            children
-          }
-        ) }) }),
-        !!endIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          icon.Icon,
-          {
-            ...endIcon,
-            css: {
-              flexShrink: 0
-            },
-            xs: {
-              size: utils_index.getSizeVariantState((_e = rest.xs) == null ? void 0 : _e.size).iconSize,
-              ...endIcon.xs
-            },
-            sm: {
-              size: utils_index.getSizeVariantState((_f = rest.sm) == null ? void 0 : _f.size).iconSize,
-              ...endIcon.sm
-            },
-            md: {
-              size: utils_index.getSizeVariantState((_g = rest.md) == null ? void 0 : _g.size).iconSize,
-              ...endIcon.md
-            },
-            lg: {
-              size: utils_index.getSizeVariantState((_h = rest.lg) == null ? void 0 : _h.size).iconSize,
-              ...endIcon.lg
-            }
-          }
-        ),
-        suffix,
-        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.Button = Button;

package/dist/lib/button/helpers.cjs

@@ -1,74 +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: {
-    css: {
-      borderTopLeftRadius: 8,
-      borderBottomLeftRadius: 8,
-      borderTopRightRadius: 8,
-      borderBottomRightRadius: 8,
-      columnGap: 8
-    },
-    size: "md"
-  },
-  variant: "contained",
-  color: "primary",
-  type: "button"
-};
-const getButtonResponsiveCssBySize = (size) => {
-  const { inputSize, inputPaddingX } = utils_index.getSizeVariantState(size);
-  switch (size) {
-    case "sm":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 400,
-        fontSize: theme_typography.getTypographyVar("sm").fontSize,
-        lineHeight: theme_typography.getTypographyVar("sm").lineHeight
-      };
-    case "md":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 500,
-        fontSize: theme_typography.getTypographyVar("sm").fontSize,
-        lineHeight: theme_typography.getTypographyVar("sm").lineHeight
-      };
-    case "lg":
-      return {
-        paddingLeft: inputPaddingX,
-        paddingRight: inputPaddingX,
-        minHeight: inputSize,
-        fontWeight: 600,
-        fontSize: theme_typography.getTypographyVar("base").fontSize,
-        lineHeight: theme_typography.getTypographyVar("base").lineHeight
-      };
-    default:
-      return {};
-  }
-};
-const getButtonProps = (extended) => {
-  return utils_index.mergeComponentProps(
-    defaultProps,
-    extended,
-    ...theme_screens.screens.map((screen) => {
-      return (current) => {
-        var _a;
-        const size = (_a = current[screen]) == null ? void 0 : _a.size;
-        const propsBySize = {};
-        propsBySize[screen] = {
-          css: getButtonResponsiveCssBySize(size)
-        };
-        return propsBySize;
-      };
-    }),
-    extended
-  );
-};
-exports.getButtonProps = getButtonProps;