@janbox/storefront-ui 1.0.1 → 1.0.2

package/dist/lib/tooltip/tooltip.cjs

@@ -1,124 +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 useControllableState = require("../../hooks/use-controllable-state.cjs");
-require("clsx");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-function Tooltip({
-  children,
-  defaultOpen = false,
-  placement = "top",
-  open,
-  onOpenChange,
-  content,
-  className,
-  contentWidth,
-  enable = true,
-  handleClose,
-  arrowProps
-}) {
-  const [visible, setVisible] = useControllableState.useControllableState({
-    defaultValue: defaultOpen,
-    value: open
-  });
-  const triggerRef = react.useRef(null);
-  const arrowRef = react.useRef(null);
-  const handleOpenChange = (val, event, reason) => {
-    if (enable === "truncated" && (event == null ? void 0 : event.target)) {
-      const target = event.target;
-      const { width, height } = target.getBoundingClientRect();
-      const fullWidth = Math.max(target.scrollWidth, target.clientWidth) + (width - target.clientWidth);
-      const fullHeight = Math.max(target.scrollHeight, target.clientHeight) + (height - target.clientHeight);
-      if ([fullWidth <= width, fullHeight <= height].every(Boolean)) return;
-    }
-    setVisible(val);
-    onOpenChange == null ? void 0 : onOpenChange(val, event, reason);
-  };
-  const { refs, floatingStyles, context } = react$1.useFloating({
-    placement,
-    open: visible,
-    onOpenChange: handleOpenChange,
-    whileElementsMounted: react$1.autoUpdate,
-    middleware: [
-      react$1.offset(5),
-      react$1.flip({
-        crossAxis: placement.includes("-"),
-        fallbackAxisSideDirection: "start",
-        padding: 5
-      }),
-      react$1.shift({ padding: 5 }),
-      react$1.arrow({ element: arrowRef }),
-      react$1.size({
-        apply({ elements }) {
-          const { width } = elements.reference.getBoundingClientRect();
-          const styledWidth = contentWidth === "fit-parent" ? width : contentWidth;
-          const styles = {
-            maxWidth: lodashEs.isUndefined(styledWidth) ? "" : `${styledWidth}px`
-          };
-          Object.assign(elements.floating.style, styles);
-        }
-      })
-    ]
-  });
-  const hover = react$1.useHover(context, {
-    move: false,
-    handleClose: handleClose === "safe-polygon" ? react$1.safePolygon() : handleClose
-  });
-  const focus = react$1.useFocus(context);
-  const dismiss = react$1.useDismiss(context);
-  const role = react$1.useRole(context, { role: "tooltip" });
-  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([hover, focus, dismiss, role]);
-  const ref = react$1.useMergeRefs([refs.setReference, lodashEs.get(children, "ref"), triggerRef]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    react.cloneElement(
-      children,
-      getReferenceProps({
-        ref,
-        ...children == null ? void 0 : children.props,
-        "data-state": visible ? "open" : "closed"
-      })
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          ...floatingStyles
-        },
-        ref: refs.setFloating,
-        css: {
-          borderRadius: "0.5rem",
-          backgroundColor: "var(--color-neutral-600)",
-          paddingLeft: "0.75rem",
-          paddingRight: "0.75rem",
-          paddingTop: "0.5rem",
-          paddingBottom: "0.5rem",
-          fontSize: theme_typography.getTypographyVar("sm").fontSize,
-          lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
-          fontWeight: 400,
-          color: "white"
-        },
-        className: stylesheet.cn(className),
-        ...getFloatingProps(),
-        children: [
-          content,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.FloatingArrow,
-            {
-              ...arrowProps,
-              css: { fill: "var(--color-neutral-600)" },
-              className: stylesheet.cn(arrowProps == null ? void 0 : arrowProps.className),
-              ref: arrowRef,
-              context
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-}
-exports.Tooltip = Tooltip;

package/dist/lib/trans-html/trans-html.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const reactI18next = require("react-i18next");
-require("react");
-require("clsx");
-require("lodash-es");
-const theme_palette = require("../../theme/palette.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const TransHtml = ({ components, classes, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactI18next.Trans,
-    {
-      components: {
-        quote: /* @__PURE__ */ jsxRuntime.jsx("q", { className: classes == null ? void 0 : classes.quote }),
-        secondary: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("secondary.600") }, className: stylesheet.cn(classes == null ? void 0 : classes.secondary) }),
-        primary: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("primary.600") }, className: stylesheet.cn(classes == null ? void 0 : classes.primary) }),
-        bold: /* @__PURE__ */ jsxRuntime.jsx("span", { css: { fontWeight: 600 }, className: stylesheet.cn(classes == null ? void 0 : classes.bold) }),
-        h2: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: classes == null ? void 0 : classes.h2 }),
-        ...components
-      },
-      ...props
-    }
-  );
-};
-exports.TransHtml = TransHtml;

package/dist/lib/unordered-list/list-item/helpers.cjs

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

package/dist/lib/unordered-list/list-item/list-item.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 theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const ListItem = react.forwardRef((_props, ref) => {
-  const { xs, sm, md, children, dangerouslySetInnerHTML, ...rest } = helpers.getListItemProps(_props);
-  const css = [
-    {
-      display: "inline-flex"
-    },
-    createStyle(xs),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md)
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      css,
-      suppressContentEditableWarning: true,
-      dangerouslySetInnerHTML: lodashEs.isNil(children) ? dangerouslySetInnerHTML : void 0,
-      ...rest,
-      ref,
-      children: lodashEs.isNil(dangerouslySetInnerHTML) ? children : null
-    }
-  );
-});
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
-exports.ListItem = ListItem;

package/dist/lib/unordered-list/unordered-list/helpers.cjs

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

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

@@ -1,27 +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 theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const UnorderedList = react.forwardRef((_props, ref) => {
-  const { xs, sm, md, ...rest } = helpers.getUnorderedListProps(_props);
-  const css = [
-    {
-      display: "inline-flex",
-      flexDirection: "column",
-      verticalAlign: "top"
-    },
-    createStyle(xs),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md)
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { css, ...rest, ref });
-});
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
-exports.UnorderedList = UnorderedList;

package/dist/lib/video/helpers.cjs

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

package/dist/lib/video/video.cjs

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const ReactPlayer = require("react-player");
-const helpers = require("./helpers.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const Video = ({ ref, containerProps, PlayerComponent, ..._props }) => {
-  const { xs, sm, md, lg, ...rest } = helpers.getVideoProps(_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, ...containerProps, children: PlayerComponent ? react.createElement(PlayerComponent, rest) : /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer, { width: "", height: "", ref, ...rest }) });
-};
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
-exports.Video = Video;

package/dist/theme/index.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const theme_screens = require("./screens.cjs");
-const theme_palette = require("./palette.cjs");
-const theme_typography = require("./typography.cjs");
-const provider = require("./provider.cjs");
-const FLOATING_Z_INDEX = 9999;
-const PREFIX = "vn";
-exports.breakpoint = theme_screens.breakpoint;
-exports.getSmallerScreens = theme_screens.getSmallerScreens;
-exports.mediaQuery = theme_screens.mediaQuery;
-exports.screens = theme_screens.screens;
-exports.getColorVar = theme_palette.getColorVar;
-exports.groupedColors = theme_palette.groupedColors;
-exports.paletteVars = theme_palette.paletteVars;
-exports.parseColor = theme_palette.parseColor;
-exports.getSmallerTypographyVariants = theme_typography.getSmallerTypographyVariants;
-exports.getTypographyVar = theme_typography.getTypographyVar;
-exports.typographyVars = theme_typography.typographyVars;
-exports.ThemeProvider = provider.ThemeProvider;
-exports.FLOATING_Z_INDEX = FLOATING_Z_INDEX;
-exports.PREFIX = PREFIX;

package/dist/theme/palette.cjs

@@ -1,287 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Color = require("color");
-const lodashEs = require("lodash-es");
-const getColorVar = (key, fullVar = true) => {
-  const cssVarKey = `--${prefix}-${key.replaceAll(".", "-")}`;
-  return fullVar ? `var(${cssVarKey})` : cssVarKey;
-};
-const prefix = "color";
-const paletteVars = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  black: "#000000",
-  white: "#FFFFFF",
-  background: {
-    subtle: getColorVar("background.subtle"),
-    default: getColorVar("background.default"),
-    emphasis: getColorVar("background.emphasis")
-  },
-  border: {
-    default: getColorVar("border.default")
-  },
-  surface: {
-    default: getColorVar("surface.default")
-  },
-  primary: {
-    100: getColorVar("primary.100"),
-    200: getColorVar("primary.200"),
-    300: getColorVar("primary.300"),
-    400: getColorVar("primary.400"),
-    500: getColorVar("primary.500"),
-    600: getColorVar("primary.600"),
-    700: getColorVar("primary.700"),
-    800: getColorVar("primary.800")
-    // 900: getColorVar('primary.900'),
-  },
-  secondary: {
-    100: getColorVar("secondary.100"),
-    200: getColorVar("secondary.200"),
-    300: getColorVar("secondary.300"),
-    400: getColorVar("secondary.400"),
-    500: getColorVar("secondary.500"),
-    600: getColorVar("secondary.600"),
-    700: getColorVar("secondary.700"),
-    800: getColorVar("secondary.800")
-    // 900: getColorVar('secondary.900'),
-  },
-  red: {
-    100: getColorVar("red.100"),
-    200: getColorVar("red.200"),
-    300: getColorVar("red.300"),
-    400: getColorVar("red.400"),
-    500: getColorVar("red.500"),
-    600: getColorVar("red.600"),
-    700: getColorVar("red.700"),
-    800: getColorVar("red.800")
-    // 900: getColorVar('red.900'),
-  },
-  orange: {
-    100: getColorVar("orange.100"),
-    200: getColorVar("orange.200"),
-    300: getColorVar("orange.300"),
-    400: getColorVar("orange.400"),
-    500: getColorVar("orange.500"),
-    600: getColorVar("orange.600"),
-    700: getColorVar("orange.700"),
-    800: getColorVar("orange.800")
-    // 900: getColorVar('orange.900'),
-  },
-  yellow: {
-    100: getColorVar("yellow.100"),
-    200: getColorVar("yellow.200"),
-    300: getColorVar("yellow.300"),
-    400: getColorVar("yellow.400"),
-    500: getColorVar("yellow.500"),
-    600: getColorVar("yellow.600"),
-    700: getColorVar("yellow.700"),
-    800: getColorVar("yellow.800")
-    // 900: getColorVar('yellow.900'),
-  },
-  green: {
-    100: getColorVar("green.100"),
-    200: getColorVar("green.200"),
-    300: getColorVar("green.300"),
-    400: getColorVar("green.400"),
-    500: getColorVar("green.500"),
-    600: getColorVar("green.600"),
-    700: getColorVar("green.700"),
-    800: getColorVar("green.800")
-    // 900: getColorVar('green.900'),
-  },
-  blue: {
-    100: getColorVar("blue.100"),
-    200: getColorVar("blue.200"),
-    300: getColorVar("blue.300"),
-    400: getColorVar("blue.400"),
-    500: getColorVar("blue.500"),
-    600: getColorVar("blue.600"),
-    700: getColorVar("blue.700"),
-    800: getColorVar("blue.800")
-    // 900: getColorVar('blue.900'),
-  },
-  violet: {
-    100: getColorVar("violet.100"),
-    200: getColorVar("violet.200"),
-    300: getColorVar("violet.300"),
-    400: getColorVar("violet.400"),
-    500: getColorVar("violet.500"),
-    600: getColorVar("violet.600"),
-    700: getColorVar("violet.700"),
-    800: getColorVar("violet.800")
-    // 900: getColorVar('violet.900'),
-  },
-  neutral: {
-    100: getColorVar("neutral.100"),
-    200: getColorVar("neutral.200"),
-    300: getColorVar("neutral.300"),
-    400: getColorVar("neutral.400"),
-    500: getColorVar("neutral.500"),
-    600: getColorVar("neutral.600"),
-    700: getColorVar("neutral.700"),
-    800: getColorVar("neutral.800")
-    // 900: getColorVar('neutral.900'),
-  }
-};
-const groupedColors = [
-  {
-    name: "Basic",
-    colors: ["transparent", "black", "white"]
-  },
-  {
-    name: "Background",
-    colors: ["background.subtle", "background.default", "background.emphasis"]
-  },
-  {
-    name: "Border",
-    colors: ["border.default"]
-  },
-  {
-    name: "Surface",
-    colors: ["surface.default"]
-  },
-  {
-    name: "Primary",
-    colors: [
-      "primary.100",
-      "primary.200",
-      "primary.300",
-      "primary.400",
-      "primary.500",
-      "primary.600",
-      "primary.700",
-      "primary.800"
-      // 'primary.900',
-    ]
-  },
-  {
-    name: "Secondary",
-    colors: [
-      "secondary.100",
-      "secondary.200",
-      "secondary.300",
-      "secondary.400",
-      "secondary.500",
-      "secondary.600",
-      "secondary.700",
-      "secondary.800"
-      // 'secondary.900',
-    ]
-  },
-  {
-    name: "Red",
-    colors: [
-      "red.100",
-      "red.200",
-      "red.300",
-      "red.400",
-      "red.500",
-      "red.600",
-      "red.700",
-      "red.800"
-      // 'red.900'
-    ]
-  },
-  {
-    name: "Orange",
-    colors: [
-      "orange.100",
-      "orange.200",
-      "orange.300",
-      "orange.400",
-      "orange.500",
-      "orange.600",
-      "orange.700",
-      "orange.800"
-      // 'orange.900',
-    ]
-  },
-  {
-    name: "Yellow",
-    colors: [
-      "yellow.100",
-      "yellow.200",
-      "yellow.300",
-      "yellow.400",
-      "yellow.500",
-      "yellow.600",
-      "yellow.700",
-      "yellow.800"
-      // 'yellow.900',
-    ]
-  },
-  {
-    name: "Green",
-    colors: [
-      "green.100",
-      "green.200",
-      "green.300",
-      "green.400",
-      "green.500",
-      "green.600",
-      "green.700",
-      "green.800"
-      // 'green.900',
-    ]
-  },
-  {
-    name: "Blue",
-    colors: [
-      "blue.100",
-      "blue.200",
-      "blue.300",
-      "blue.400",
-      "blue.500",
-      "blue.600",
-      "blue.700",
-      "blue.800"
-      // 'blue.900',
-    ]
-  },
-  {
-    name: "Violet",
-    colors: [
-      "violet.100",
-      "violet.200",
-      "violet.300",
-      "violet.400",
-      "violet.500",
-      "violet.600",
-      "violet.700",
-      "violet.800"
-      // 'violet.900',
-    ]
-  },
-  {
-    name: "Neutral",
-    colors: [
-      "neutral.100",
-      "neutral.200",
-      "neutral.300",
-      "neutral.400",
-      "neutral.500",
-      "neutral.600",
-      "neutral.700",
-      "neutral.800"
-      // 'neutral.900',
-    ]
-  }
-];
-const parseColor = (text = "", palette) => {
-  var _a, _b;
-  const regex = /var\(--([\w-]+)\)/;
-  const cssVarName = (_b = (_a = text.match(regex)) == null ? void 0 : _a.at(1)) == null ? void 0 : _b.replace(new RegExp(`${prefix}-`), "").replaceAll("-", ".");
-  try {
-    if (!cssVarName) {
-      return Color(text);
-    }
-    return Color(String(lodashEs.get(palette, cssVarName) ?? text));
-  } catch (error) {
-    return null;
-  }
-};
-exports.getColorVar = getColorVar;
-exports.groupedColors = groupedColors;
-exports.paletteVars = paletteVars;
-exports.parseColor = parseColor;