@janbox/storefront-ui 1.0.0 → 1.0.2

package/dist/lib/link/link.cjs

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-const reactRouter = require("react-router");
-const helpers = require("./helpers.cjs");
-const index = require("../../hooks/use-hover-line-effect/index.cjs");
-const constants_index = require("../../constants/index.cjs");
-require("react");
-require("clsx");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const Link = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, dangerouslySetInnerHTML, to, underline = false, className, ...rest } = helpers.getLinkProps(_props);
-  const hoverLineEffectProps = index.useHoverLineEffect({ enabled: underline });
-  const onClick = (e) => {
-    var _a;
-    if (e.currentTarget.getAttribute("aria-disabled") === constants_index.Booleanish.True) {
-      e.preventDefault();
-    }
-    if (lodashEs.isNil(to)) {
-      e.preventDefault();
-    }
-    (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactRouter.Link,
-    {
-      to: to ?? "#",
-      css: [
-        createStyle(xs),
-        {
-          [theme_screens.mediaQuery("sm")]: createStyle(sm),
-          [theme_screens.mediaQuery("md")]: createStyle(md),
-          [theme_screens.mediaQuery("lg")]: createStyle(lg)
-        },
-        rest["aria-disabled"] && { pointerEvents: "none" }
-      ],
-      dangerouslySetInnerHTML: lodashEs.isNil(children) ? dangerouslySetInnerHTML : void 0,
-      ...hoverLineEffectProps,
-      className: stylesheet.cn(
-        className,
-        hoverLineEffectProps.className
-      ),
-      ...rest,
-      onClick,
-      ref,
-      children: lodashEs.isNil(dangerouslySetInnerHTML) ? children : null
-    }
-  );
-};
-const createStyle = ({ css, textVariant } = {}) => {
-  return [
-    textVariant && {
-      fontSize: theme_typography.getTypographyVar(textVariant).fontSize,
-      lineHeight: theme_typography.getTypographyVar(textVariant).lineHeight
-    },
-    css
-  ];
-};
-exports.Link = Link;

package/dist/lib/loading/block-skeleton/block-skeleton.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-require("react");
-require("clsx");
-require("lodash-es");
-require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const emotionHelpers = require("../../../utils/emotion-helpers.cjs");
-const BlockSkeleton = ({ className, ref, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [emotionHelpers.animatePulse, { borderRadius: "0.25rem", backgroundColor: "var(--color-neutral-200)" }],
-      className: stylesheet.cn(className),
-      ...props,
-      ref
-    }
-  );
-};
-exports.BlockSkeleton = BlockSkeleton;

package/dist/lib/loading/image-skeleton/image-skeleton.cjs

@@ -1,43 +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 emotionHelpers = require("../../../utils/emotion-helpers.cjs");
-const ImageSkeleton = react.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [
-        emotionHelpers.animatePulse,
-        {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-          height: "100%",
-          borderRadius: "0.25rem",
-          backgroundColor: "var(--color-neutral-200)"
-        }
-      ],
-      className: stylesheet.cn(className),
-      ...props,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          css: { width: "25%", height: "25%", color: "var(--color-neutral-400)" },
-          "aria-hidden": "true",
-          xmlns: "http://www.w3.org/2000/svg",
-          fill: "currentColor",
-          viewBox: "0 0 20 18",
-          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" })
-        }
-      )
-    }
-  );
-});
-exports.ImageSkeleton = ImageSkeleton;

package/dist/lib/loading/loading-overlay/loading-overlay.cjs

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const svgLoader = require("../../../components/svg-loader.cjs");
-const utils_index = require("../../../utils/index.cjs");
-const emotionHelpers = require("../../../utils/emotion-helpers.cjs");
-const loadingWaiting = require("../../../assets/svg/loading-waiting.svg.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const LoadingOverlay = react.forwardRef(
-  ({ isLoading = false, iconProps, color = "primary", style, size = 32, className, children, ...props }, ref) => {
-    const { main } = utils_index.getColorShadesByVariant(color);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        style: {
-          minWidth: size,
-          minHeight: size,
-          ...style
-        },
-        css: { position: "relative" },
-        className: stylesheet.cn(className),
-        ...props,
-        children: [
-          children,
-          isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ...iconProps,
-              css: {
-                position: "absolute",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                zIndex: 10,
-                display: "grid",
-                placeItems: "center",
-                cursor: "progress"
-              },
-              className: stylesheet.cn(iconProps == null ? void 0 : iconProps.className),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                svgLoader.SvgLoader,
-                {
-                  source: loadingWaiting,
-                  width: size,
-                  height: size,
-                  css: emotionHelpers.animateSpin,
-                  style: { color: main }
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-exports.LoadingOverlay = LoadingOverlay;

package/dist/lib/loading/text-skeleton/text-skeleton.cjs

@@ -1,16 +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 emotionHelpers = require("../../../utils/emotion-helpers.cjs");
-const TextSkeleton = react.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { css: { width: "100%", overflow: "hidden", display: "inline-flex", alignItems: "center" }, className: stylesheet.cn(className), ...props, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { css: [emotionHelpers.animatePulse, { flex: "1 1 0%", borderRadius: "0.125rem", lineHeight: 1, backgroundColor: "var(--color-neutral-200)" }], children: " " }),
-    " "
-  ] });
-});
-exports.TextSkeleton = TextSkeleton;

package/dist/lib/marquee/marquee/helpers.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_index = require("../../../utils/index.cjs");
-const defaultProps = {
-  autoScrollOptions: {
-    playOnInit: true,
-    stopOnFocusIn: false,
-    stopOnInteraction: false,
-    stopOnMouseEnter: false
-  }
-};
-const getMarqueeProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getMarqueeProps = getMarqueeProps;

package/dist/lib/marquee/marquee/marquee.cjs

@@ -1,99 +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 AutoScroll = require("embla-carousel-auto-scroll");
-const useEmblaCarousel = require("embla-carousel-react");
-const helpers = require("./helpers.cjs");
-const types = require("./types.cjs");
-const constants_index = require("../../../constants/index.cjs");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const utils_index = require("../../../utils/index.cjs");
-const icon = require("../../icon/icon.cjs");
-const Marquee = ({ ref, ..._props }) => {
-  const { children, xs, sm, md, autoScrollOptions, separatorIcon, ...rest } = helpers.getMarqueeProps(_props);
-  const rootEl = react.useRef(null);
-  const [emblaRef, emblaApi] = useEmblaCarousel(
-    {
-      loop: true,
-      align: "start",
-      slides: `.${constants_index.HTMLClasses.MARQUEE_SLIDE}`
-    },
-    [AutoScroll(autoScrollOptions)]
-  );
-  const mergedRefs = react$1.useMergeRefs([emblaRef, ref, rootEl]);
-  react.useEffect(() => {
-    const mutationObserver = new MutationObserver((records) => {
-      var _a;
-      const target = (_a = records.at(0)) == null ? void 0 : _a.target;
-      if (!target) return;
-      const playState = target.getAttribute(types.MarqueeDataAttributes.PlayState);
-      const autoScrollPlugin = emblaApi == null ? void 0 : emblaApi.plugins().autoScroll;
-      if (playState === "on") {
-        autoScrollPlugin == null ? void 0 : autoScrollPlugin.play(0);
-      } else {
-        autoScrollPlugin == null ? void 0 : autoScrollPlugin.stop();
-      }
-    });
-    if (rootEl.current) {
-      mutationObserver.observe(rootEl.current, {
-        attributes: true,
-        attributeFilter: [types.MarqueeDataAttributes.PlayState]
-      });
-    }
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [emblaApi]);
-  react.useEffect(() => {
-    const onAutoScrollPlay = () => {
-      var _a;
-      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(types.MarqueeDataAttributes.PlayState, "on");
-    };
-    const onAutoScrollStop = () => {
-      var _a;
-      (_a = rootEl.current) == null ? void 0 : _a.setAttribute(types.MarqueeDataAttributes.PlayState, "off");
-    };
-    emblaApi == null ? void 0 : emblaApi.on("autoScroll:play", onAutoScrollPlay);
-    emblaApi == null ? void 0 : emblaApi.on("autoScroll:stop", onAutoScrollStop);
-    return () => {
-      emblaApi == null ? void 0 : emblaApi.off("autoScroll:play", onAutoScrollPlay);
-      emblaApi == null ? void 0 : emblaApi.off("autoScroll:stop", onAutoScrollStop);
-    };
-  }, [emblaApi]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [
-        {
-          overflow: "hidden",
-          maxWidth: "100%"
-        },
-        createStyle(xs),
-        {
-          [theme_screens.mediaQuery("sm")]: createStyle(sm),
-          [theme_screens.mediaQuery("md")]: createStyle(md)
-        }
-      ],
-      ...rest,
-      ref: mergedRefs,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { display: "flex", alignItems: "center", "& > *": { flexShrink: 0, flexGrow: 0, overflow: "hidden" } }, children: utils_index.flattenChildren(children).map((child, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: constants_index.HTMLClasses.MARQUEE_SLIDE, children: child }),
-        !!separatorIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: constants_index.HTMLClasses.MARQUEE_SLIDE, children: /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...separatorIcon }) })
-      ] }, `marquee-item-${index}`)) })
-    }
-  );
-};
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
-  return [
-    {
-      width,
-      height,
-      "& > *": css
-    },
-    css
-  ];
-};
-exports.Marquee = Marquee;

package/dist/lib/marquee/marquee/types.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var MarqueeDataAttributes = /* @__PURE__ */ ((MarqueeDataAttributes2) => {
-  MarqueeDataAttributes2["PlayState"] = "data-marquee-play-state";
-  return MarqueeDataAttributes2;
-})(MarqueeDataAttributes || {});
-exports.MarqueeDataAttributes = MarqueeDataAttributes;

package/dist/lib/marquee/marquee-item/marquee-item.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const MarqueeItem = ({ ref, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      css: {
-        display: "contents"
-      },
-      ref
-    }
-  );
-};
-exports.MarqueeItem = MarqueeItem;

package/dist/lib/menu/menu/menu.cjs

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@floating-ui/react");
-const useControllableState = require("../../../hooks/use-controllable-state.cjs");
-const floating = require("../../floating/floating/floating.cjs");
-const Menu = ({ hoverProps, dismissProps, clickProps, ...props }) => {
-  const [open, setOpen] = useControllableState.useControllableState({
-    defaultValue: false,
-    value: props.open
-  });
-  const onOpenChange = (open2, event, reason) => {
-    var _a;
-    setOpen(open2);
-    (_a = props.onOpenChange) == null ? void 0 : _a.call(props, open2, event, reason);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    floating.Floating,
-    {
-      dismissProps: {
-        enabled: true,
-        ...dismissProps
-      },
-      clickProps: {
-        enabled: true,
-        ...clickProps
-      },
-      hoverProps: {
-        handleClose: react.safePolygon(),
-        ...hoverProps
-      },
-      ...props,
-      open,
-      onOpenChange
-    }
-  );
-};
-exports.Menu = Menu;

package/dist/lib/menu/menu-item/helpers.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_index = require("../../../utils/index.cjs");
-const defaultProps = {
-  variant: "text",
-  color: "neutral",
-  xs: {
-    css: {
-      width: "100%"
-    }
-  }
-};
-const getMenuItemProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getMenuItemProps = getMenuItemProps;

package/dist/lib/menu/menu-item/menu-item.cjs

@@ -1,34 +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 constants_index = require("../../../constants/index.cjs");
-const button = require("../../button/button.cjs");
-const helpers$1 = require("../../floating/floating/helpers.cjs");
-const MenuItem = react.forwardRef((_props, ref) => {
-  const { children, ...props } = helpers.getMenuItemProps(_props);
-  const { context } = helpers$1.useFloatingContext();
-  const onClick = (e) => {
-    var _a, _b;
-    if (((_a = e.currentTarget.parentElement) == null ? void 0 : _a.getAttribute(constants_index.HTMLDatasetAttributes.DATA_MENU_LIST)) === constants_index.Booleanish.True) {
-      context == null ? void 0 : context.onOpenChange(false, e.nativeEvent, "click");
-    }
-    (_b = props.onClick) == null ? void 0 : _b.call(props, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      ...props,
-      css: {
-        justifyContent: "start",
-        textAlign: "left",
-        width: "100%"
-      },
-      onClick,
-      ref,
-      children
-    }
-  );
-});
-exports.MenuItem = MenuItem;

package/dist/lib/menu/menu-list/menu-list.cjs

@@ -1,34 +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");
-const theme_palette = require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const constants_index = require("../../../constants/index.cjs");
-const floatingContent = require("../../floating/floating-content/floating-content.cjs");
-const MenuList = react.forwardRef(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    floatingContent.FloatingContent,
-    {
-      css: {
-        backgroundColor: theme_palette.getColorVar("surface.default"),
-        padding: "0.25rem",
-        borderRadius: "0.75rem",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: theme_palette.getColorVar("neutral.100"),
-        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
-        display: "flex",
-        flexDirection: "column"
-      },
-      className: stylesheet.cn(className),
-      ...props,
-      ...{ [constants_index.HTMLDatasetAttributes.DATA_MENU_LIST]: true },
-      ref,
-      children
-    }
-  );
-});
-exports.MenuList = MenuList;

package/dist/lib/menu/menu-list/types.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var MenuListDataAttributes = /* @__PURE__ */ ((MenuListDataAttributes2) => {
-  MenuListDataAttributes2["DataMenuList"] = "data-menu-list";
-  return MenuListDataAttributes2;
-})(MenuListDataAttributes || {});
-exports.MenuListDataAttributes = MenuListDataAttributes;

package/dist/lib/menu/menu-trigger/menu-trigger.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const floatingTrigger = require("../../floating/floating-trigger/floating-trigger.cjs");
-const MenuTrigger = ({ ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { ...props });
-};
-exports.MenuTrigger = MenuTrigger;

package/dist/lib/multiple-select/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 getMultipleSelectProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getMultipleSelectProps = getMultipleSelectProps;