@janbox/storefront-ui 1.0.1 → 1.0.3

package/dist/lib/floating/floating/floating.cjs

@@ -1,97 +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 FloatingCore = react.forwardRef(
-  ({
-    open,
-    placement = "bottom",
-    onOpenChange,
-    dismissProps = {
-      enabled: false
-    },
-    children,
-    clickProps = {
-      enabled: false
-    },
-    focusProps = {
-      enabled: false
-    },
-    hoverProps = {
-      enabled: false
-    },
-    elements,
-    offsetOptions = 4,
-    sizeOptions,
-    autoUpdateOptions
-  }, ref) => {
-    const floating = react$1.useFloating({
-      open,
-      onOpenChange,
-      placement,
-      middleware: [
-        react$1.offset(offsetOptions),
-        react$1.flip(),
-        react$1.size({
-          ...sizeOptions,
-          apply(args) {
-            var _a;
-            const { availableHeight, availableWidth, rects, elements: elements2, placement: placement2, x } = args;
-            const styles = {};
-            if (rects.floating.height > availableHeight) {
-              styles.height = `${availableHeight}px`;
-            }
-            if (rects.floating.width > availableWidth) {
-              const maxWidth = Math.min(availableWidth, window.innerWidth);
-              styles.maxWidth = `${maxWidth}px`;
-              const verticalPlacements = [
-                "top",
-                "top-start",
-                "top-end",
-                "bottom",
-                "bottom-start",
-                "bottom-end"
-              ];
-              const isVertical = verticalPlacements.includes(placement2);
-              if (isVertical) {
-                styles.left = `${-x + (window.innerWidth - rects.floating.width) / 2}px`;
-              }
-            }
-            Object.assign(elements2.floating.style, styles);
-            (_a = sizeOptions == null ? void 0 : sizeOptions.apply) == null ? void 0 : _a.call(sizeOptions, args);
-          }
-        })
-      ],
-      whileElementsMounted: (...args) => {
-        return react$1.autoUpdate(...args, autoUpdateOptions);
-      },
-      elements
-    });
-    react.useImperativeHandle(ref, () => floating, [floating]);
-    const { context } = floating;
-    const click = react$1.useClick(context, clickProps);
-    const hover = react$1.useHover(context, hoverProps);
-    const focus = react$1.useFocus(context, focusProps);
-    const dismiss = react$1.useDismiss(context, dismissProps);
-    const role = react$1.useRole(context);
-    const interactions = react$1.useInteractions([click, dismiss, role, hover, focus]);
-    const contextValue = react.useMemo(
-      () => ({
-        ...floating,
-        ...interactions
-      }),
-      [floating, interactions]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(helpers.FloatingContext.Provider, { value: contextValue, children });
-  }
-);
-const Floating = react.forwardRef((props, ref) => {
-  const parentId = react$1.useFloatingParentNodeId();
-  if (parentId) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FloatingCore, { ...props, ref });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(FloatingCore, { ...props, ref }) });
-});
-exports.Floating = Floating;

package/dist/lib/floating/floating/helpers.cjs

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const FloatingContext = react.createContext({});
-const useFloatingContext = () => {
-  return react.useContext(FloatingContext);
-};
-exports.FloatingContext = FloatingContext;
-exports.useFloatingContext = useFloatingContext;

package/dist/lib/floating/floating-close/floating-close.cjs

@@ -1,32 +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("../floating/helpers.cjs");
-require("clsx");
-require("lodash-es");
-require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const FloatingClose = react.forwardRef(
-  ({ event = "click", reason, className, ...props }, ref) => {
-    const wrapperRef = react.useRef(null);
-    const {
-      context: { onOpenChange }
-    } = helpers.useFloatingContext();
-    const mergedRefs = react$1.useMergeRefs([ref, wrapperRef]);
-    react.useEffect(() => {
-      const wrapperEl = wrapperRef.current;
-      if (!wrapperEl) return;
-      const handleEvent = function(event2) {
-        onOpenChange == null ? void 0 : onOpenChange(false, event2, reason);
-      };
-      wrapperEl.addEventListener(event, handleEvent);
-      return () => {
-        wrapperEl.removeEventListener(event, handleEvent);
-      };
-    }, [event, onOpenChange, reason]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { display: "contents" }, className: stylesheet.cn(className), ...props, ref: mergedRefs });
-  }
-);
-exports.FloatingClose = FloatingClose;

package/dist/lib/floating/floating-content/floating-content.cjs

@@ -1,57 +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 react$2 = require("motion/react");
-const usehooksTs = require("usehooks-ts");
-const helpers = require("../floating/helpers.cjs");
-const theme_index = require("../../../theme/index.cjs");
-const FloatingContent = react.forwardRef(
-  ({
-    style,
-    floatingPortalProps,
-    floatingFocusManagerProps,
-    floatingOverlayProps,
-    ...props
-  }, ref) => {
-    const { getFloatingProps, context } = helpers.useFloatingContext();
-    const mergedRefs = react$1.useMergeRefs([context.refs.setFloating, ref]);
-    const isClient = usehooksTs.useIsClient();
-    return /* @__PURE__ */ jsxRuntime.jsx(react$2.AnimatePresence, { children: context.open && isClient && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { root: document.body, ...floatingPortalProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.FloatingOverlay,
-      {
-        ...floatingOverlayProps,
-        style: {
-          display: (floatingOverlayProps == null ? void 0 : floatingOverlayProps.disabled) ?? true ? "contents" : void 0,
-          ...floatingOverlayProps == null ? void 0 : floatingOverlayProps.style
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.FloatingFocusManager,
-          {
-            disabled: true,
-            context,
-            ...floatingFocusManagerProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              react$2.motion.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                exit: { opacity: 0 },
-                style: {
-                  ...context.elements.reference ? context.floatingStyles : {},
-                  ...style,
-                  zIndex: theme_index.FLOATING_Z_INDEX
-                },
-                ...getFloatingProps(props),
-                ref: mergedRefs,
-                children: props.children
-              }
-            )
-          }
-        )
-      }
-    ) }) });
-  }
-);
-exports.FloatingContent = FloatingContent;

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

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react$1 = require("react");
-const react = require("@floating-ui/react");
-const lodashEs = require("lodash-es");
-const helpers = require("../floating/helpers.cjs");
-const FloatingTrigger = ({ children }) => {
-  const { getReferenceProps, context } = helpers.useFloatingContext();
-  const mergedRefs = react.useMergeRefs([
-    context.refs.setReference,
-    react$1.isValidElement(children) ? lodashEs.get(children.props, "ref") : void 0
-  ]);
-  if (react$1.isValidElement(children)) {
-    return react$1.cloneElement(
-      children,
-      getReferenceProps({
-        ...children.props ?? {},
-        ref: mergedRefs
-      })
-    );
-  }
-  if (lodashEs.isFunction(children)) {
-    const reactElement = children(context);
-    return react$1.cloneElement(
-      reactElement,
-      getReferenceProps({
-        ...reactElement.props ?? {},
-        ref: mergedRefs
-      })
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...getReferenceProps(), ref: mergedRefs, children });
-};
-exports.FloatingTrigger = FloatingTrigger;

package/dist/lib/form-helper-text/form-helper-text.cjs

@@ -1,35 +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 theme_palette = require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-require("clsx");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const FormHelperText = react.forwardRef(
-  ({ error, children, className, ...props }, ref) => {
-    if (lodashEs.isNil(children)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        css: {
-          paddingLeft: "1rem",
-          paddingRight: "1rem",
-          paddingTop: "0.25rem",
-          fontSize: theme_typography.getTypographyVar("xs").fontSize,
-          lineHeight: theme_typography.getTypographyVar("xs").lineHeight,
-          "&:empty": { display: "none" },
-          ...error && { color: theme_palette.getColorVar("red.600") }
-        },
-        className: stylesheet.cn(className),
-        ref,
-        ...props,
-        children
-      }
-    );
-  }
-);
-exports.FormHelperText = FormHelperText;

package/dist/lib/form-label/form-label.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-require("react");
-require("clsx");
-const theme_screens = require("../../theme/screens.cjs");
-const theme_palette = require("../../theme/palette.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const FormLabel = ({ required, className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      css: {
-        marginBottom: "0.375rem",
-        display: "inline-flex",
-        [theme_screens.mediaQuery("sm")]: { marginBottom: "0.5rem" }
-      },
-      className: stylesheet.cn(className),
-      ...props,
-      children: [
-        lodashEs.isString(children) ? /* @__PURE__ */ jsxRuntime.jsx("label", { children }) : children,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("red.600") }, children: " *" })
-      ]
-    }
-  );
-};
-exports.FormLabel = FormLabel;

package/dist/lib/generic-element/generic-element.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const GenericElement = ({ element = "div", children, ...props }, ref) => {
-  return react.createElement(
-    element,
-    {
-      ...props,
-      ref
-    },
-    children
-  );
-};
-const ForwardRefGenericElement = react.forwardRef(GenericElement);
-exports.GenericElement = ForwardRefGenericElement;

package/dist/lib/grid/cell/cell.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-const helpers = require("./helpers.cjs");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const Cell = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = helpers.getCellProps(_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, ...rest, ref, children });
-};
-const createStyle = ({ colSpan, css } = {}) => {
-  return [
-    {
-      gridColumn: lodashEs.isNumber(colSpan) ? `span ${colSpan}` : colSpan
-    },
-    css
-  ];
-};
-exports.Cell = Cell;

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

package/dist/lib/grid/grid/grid.cjs

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-const helpers = require("./helpers.cjs");
-require("react");
-require("clsx");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const GRID_MINIMUM_COLS = 1;
-const GRID_MAXIMUM_COLS = 24;
-const Grid = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, container, className, ...rest } = helpers.getGridProps(_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",
-    {
-      className: stylesheet.cn(
-        {
-          container
-        },
-        className
-      ),
-      css,
-      ...rest,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { display: "grid", width: "100%", height: "100%" }, children })
-    }
-  );
-};
-const createStyle = ({ cols, css: { width, height, ...css } = {} } = {}) => {
-  return [
-    {
-      width,
-      height,
-      "& > *": {
-        gridTemplateColumns: lodashEs.isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`,
-        ...css
-      }
-    }
-  ];
-};
-exports.GRID_MAXIMUM_COLS = GRID_MAXIMUM_COLS;
-exports.GRID_MINIMUM_COLS = GRID_MINIMUM_COLS;
-exports.Grid = Grid;

package/dist/lib/grid/grid/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: {
-    cols: 1
-  }
-};
-const getGridProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getGridProps = getGridProps;

package/dist/lib/highlight-words/highlight-words.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const highlightWordsCore = require("highlight-words-core");
-require("clsx");
-require("lodash-es");
-require("../../theme/palette.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const HighlightWords = ({ highlightClassName, ...props }) => {
-  const chunks = highlightWordsCore.findAll(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: chunks.map((chunk, index) => {
-    const { end, highlight, start } = chunk;
-    const text = props.textToHighlight.substring(start, end);
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: highlight ? /* @__PURE__ */ jsxRuntime.jsx("span", { css: { fontWeight: 500 }, className: stylesheet.cn(highlightClassName), children: text }) : text }, index);
-  }) });
-};
-exports.HighlightWords = HighlightWords;

package/dist/lib/icon/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: 24
-  }
-};
-const getIconProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getIconProps = getIconProps;

package/dist/lib/icon/icon.cjs

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const helpers = require("./helpers.cjs");
-const svgLoader = require("../../components/svg-loader.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const Icon = ({ children: _children, ref, ..._props }) => {
-  const { source, xs, md, sm, lg, ...props } = helpers.getIconProps(_props);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    svgLoader.SvgLoader,
-    {
-      source,
-      ...props,
-      css: [
-        createStyle(xs),
-        {
-          [theme_screens.mediaQuery("sm")]: createStyle(sm),
-          [theme_screens.mediaQuery("md")]: createStyle(md),
-          [theme_screens.mediaQuery("lg")]: createStyle(lg)
-        }
-      ],
-      width: void 0,
-      height: void 0,
-      ref
-    }
-  );
-};
-const createStyle = ({ css, size } = {}) => {
-  return [
-    {
-      width: size,
-      height: size,
-      ...css
-    }
-  ];
-};
-exports.Icon = Icon;

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const utils_index = require("../../utils/index.cjs");
-const defaultProps = {
-  xs: {
-    size: "md",
-    css: {
-      borderTopLeftRadius: 8,
-      borderTopRightRadius: 8,
-      borderBottomLeftRadius: 8,
-      borderBottomRightRadius: 8
-    }
-  },
-  variant: "text",
-  color: "primary",
-  type: "button"
-};
-const getIconButtonProps = (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 = {};
-        const { inputSize } = utils_index.getSizeVariantState(size);
-        propsBySize[screen] = {
-          css: {
-            minHeight: inputSize,
-            minWidth: inputSize
-          }
-        };
-        return propsBySize;
-      };
-    }),
-    extended
-  );
-};
-exports.getIconButtonProps = getIconButtonProps;