@janbox/storefront-ui 1.0.0 → 1.0.2

package/dist/lib/multiple-select/multiple-select.cjs

@@ -1,348 +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 svgLoader = require("../../components/svg-loader.cjs");
-const virtualizedList = require("../../components/virtualized-list.cjs");
-const index = require("../../hooks/use-window-screen/index.cjs");
-const useControllableState = require("../../hooks/use-controllable-state.cjs");
-const utils_index = require("../../utils/index.cjs");
-const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
-const theme_palette = require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const checkbox = require("../checkbox/checkbox.cjs");
-const textSkeleton = require("../loading/text-skeleton/text-skeleton.cjs");
-const common = require("../../utils/common.cjs");
-const floating = require("../floating/floating/floating.cjs");
-const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
-const inputMask = require("../input-mask/input-mask.cjs");
-const floatingContent = require("../floating/floating-content/floating-content.cjs");
-const input = require("../input/input.cjs");
-const formHelperText = require("../form-helper-text/form-helper-text.cjs");
-const DEFAULT_DISPLAY_ROW_COUNT = 5;
-const MultipleSelect = ({ ref, ...props }) => {
-  var _a, _b, _c, _d, _e;
-  const {
-    placement = "bottom-start",
-    open,
-    onOpenChange,
-    searchable = true,
-    value,
-    optionValue,
-    optionLabel,
-    defaultValue,
-    options,
-    onChange,
-    placeholder,
-    listProps,
-    tagLabel,
-    // selectedRenderer,
-    optionSearchLabel,
-    helperText,
-    error,
-    containerProps,
-    inputProps,
-    displayCount = 1,
-    ...rest
-  } = helpers.getMultipleSelectProps(props);
-  const searchInputRef = react.useRef(null);
-  const floatingRef = react.useRef(null);
-  const uniqueId = react.useId();
-  const windowScreen = index.useWindowScreen();
-  const [inputValue, setInputValue] = useControllableState.useControllableState({
-    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
-    value: inputProps == null ? void 0 : inputProps.value
-  });
-  const [isOpen, setIsOpen] = useControllableState.useControllableState({
-    defaultValue: open ?? false,
-    value: open
-  });
-  const prehandleOpenChange = (nextOpen, event, reason) => {
-    setIsOpen(nextOpen);
-    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
-  };
-  const [controllableValues, setControllableValues] = useControllableState.useControllableState({
-    defaultValue: defaultValue ?? [],
-    value
-  });
-  const getOptionValue = react.useCallback(
-    (option) => {
-      return typeof optionValue === "function" ? optionValue(option) : lodashEs.get(option, optionValue ?? "value");
-    },
-    [optionValue]
-  );
-  const getTagLabel = (option) => {
-    switch (typeof tagLabel) {
-      case "function":
-        return tagLabel(option);
-      case "string":
-        return lodashEs.get(option, tagLabel);
-      default:
-        return null;
-    }
-  };
-  const getOptionValueRef = react.useRef(getOptionValue);
-  getOptionValueRef.current = getOptionValue;
-  const selectedValueMap = react.useMemo(
-    () => new Map(
-      controllableValues.map((item) => {
-        const key = typeof item === "object" ? getOptionValue(item) : item;
-        return [
-          key,
-          typeof item === "object" ? item : options.find((option) => getOptionValue(option) === key) ?? {}
-        ];
-      })
-    ),
-    [controllableValues]
-  );
-  const getOptionLabel = react.useCallback(
-    (option) => {
-      return typeof optionLabel === "function" ? optionLabel(option) : lodashEs.get(option, optionLabel ?? "label");
-    },
-    [optionLabel]
-  );
-  const handleChange = (option, selected) => {
-    let preset = [...controllableValues];
-    if (selected) {
-      preset.push(option);
-    } else {
-      preset = preset.filter((item) => getOptionValue(item) !== getOptionValue(option));
-    }
-    setControllableValues(preset);
-    onChange == null ? void 0 : onChange(preset);
-  };
-  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
-  const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
-  const displayOptions = react.useMemo(() => {
-    if (!inputValue) {
-      return options;
-    }
-    return options.filter((option) => {
-      let searchLabels = [String(getOptionLabel(option))];
-      switch (typeof optionSearchLabel) {
-        case "function":
-          searchLabels = common.ensureArray(optionSearchLabel(option));
-          break;
-        case "string":
-          searchLabels = common.ensureArray(String(lodashEs.get(option, optionSearchLabel)));
-          break;
-        case "object":
-          searchLabels = optionSearchLabel.map((label) => String(lodashEs.get(option, label)));
-          break;
-      }
-      return common.matchSearch(searchLabels, inputValue);
-    });
-  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
-  const RowComponent = ({ row }) => {
-    const rowData = displayOptions.at(row.index);
-    const rowValue = lodashEs.isNil(rowData) ? void 0 : getOptionValue(rowData);
-    const isSelected = lodashEs.isNil(rowValue) ? false : selectedValueMap.has(rowValue);
-    const onCheckboxChange = (e) => {
-      if (lodashEs.isNil(rowData)) return;
-      handleChange(rowData, e.target.checked);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      checkbox.Checkbox,
-      {
-        onChange: onCheckboxChange,
-        checked: isSelected,
-        containerProps: {
-          css: {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 12,
-            paddingRight: 12,
-            borderRadius: 8,
-            ":hover": { backgroundColor: theme_palette.getColorVar("neutral.100") },
-            minHeight: rowMinHeight,
-            width: "100%"
-          }
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: lodashEs.isNil(rowData) ? /* @__PURE__ */ jsxRuntime.jsx(textSkeleton.TextSkeleton, { css: { width: "100%" } }) : getOptionLabel(rowData) })
-      }
-    );
-  };
-  const sizeOptions = {
-    apply({ elements }) {
-      const { width } = elements.reference.getBoundingClientRect();
-      Object.assign(elements.floating.style, {
-        minWidth: `${width}px`
-      });
-    }
-  };
-  const estimateSize = react.useCallback(
-    (_index) => {
-      return rowMinHeight ?? 0;
-    },
-    [rowMinHeight]
-  );
-  const getItemKey = react.useCallback(
-    (index2) => {
-      const option = displayOptions.at(index2);
-      return option ? getOptionValue(option).toString() : `${uniqueId}-${index2}`;
-    },
-    [displayOptions, getOptionValue, uniqueId]
-  );
-  const getTextCss = (sizeVariant) => {
-    if (lodashEs.isNil(sizeVariant)) return {};
-    const { textVariant } = utils_index.getSizeVariantState(sizeVariant);
-    if (lodashEs.isNil(textVariant)) return {};
-    return theme_typography.getTypographyVar(textVariant);
-  };
-  const onInputChange = (e) => {
-    var _a2;
-    e.target.value = lodashEs.trimStart(e.target.value);
-    setInputValue(e.target.value);
-    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
-  };
-  react.useEffect(() => {
-    const timer = setTimeout(() => {
-      var _a2;
-      if (isOpen) {
-        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-      } else {
-        setInputValue("");
-      }
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [isOpen, setInputValue]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      floating.Floating,
-      {
-        clickProps: {
-          enabled: true
-        },
-        dismissProps: {
-          enabled: true
-        },
-        sizeOptions,
-        placement,
-        open: isOpen,
-        onOpenChange: prehandleOpenChange,
-        ref: floatingRef,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            inputMask.InputMask,
-            {
-              type: "button",
-              error: isOpen ? false : error,
-              element: "button",
-              suffix: /* @__PURE__ */ jsxRuntime.jsx(
-                svgLoader.SvgLoader,
-                {
-                  source: arrowDown,
-                  width: 20,
-                  height: 20,
-                  css: {
-                    transition: "transform 150ms",
-                    ...isOpen ? { transform: "rotate(-180deg)" } : {}
-                  }
-                }
-              ),
-              ...rest,
-              ref,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: [{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", paddingTop: 4, paddingBottom: 4 }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedValueMap.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  css: {
-                    display: "flex",
-                    gap: 4,
-                    ...displayCount > 1 ? { flexWrap: "wrap" } : {}
-                  },
-                  children: [
-                    Array.from(selectedValueMap.values()).slice(0, displayCount).map((selectedOption) => {
-                      const rowValue = getOptionValue(selectedOption);
-                      const rowLabel = getTagLabel(selectedOption) ?? getOptionLabel(selectedOption);
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          css: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
-                            overflow: "hidden",
-                            borderRadius: 8,
-                            backgroundColor: theme_palette.getColorVar("neutral.100"),
-                            paddingLeft: 8,
-                            paddingRight: 8,
-                            paddingTop: 4,
-                            paddingBottom: 4,
-                            fontSize: "0.75rem",
-                            lineHeight: "1rem"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: lodashEs.isElement(rowLabel) ? rowLabel : /* @__PURE__ */ jsxRuntime.jsx("span", { children: rowLabel }) })
-                        },
-                        rowValue.toString()
-                      );
-                    }),
-                    displayCount < selectedValueMap.size && /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
-                      borderRadius: 8,
-                      backgroundColor: theme_palette.getColorVar("neutral.100"),
-                      paddingLeft: 8,
-                      paddingRight: 8,
-                      paddingTop: 4,
-                      paddingBottom: 4,
-                      fontSize: "0.75rem",
-                      lineHeight: "1rem",
-                      flexShrink: 0
-                    }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { css: { fontWeight: 500 }, children: [
-                      "+",
-                      selectedValueMap.size - displayCount
-                    ] }) })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.400"), display: "block" }, children: placeholder }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: {
-            paddingTop: 8,
-            paddingBottom: 8,
-            border: "1px solid",
-            borderColor: theme_palette.getColorVar("border.default"),
-            borderRadius: 8,
-            boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-            fontSize: "0.875rem",
-            lineHeight: "1.25rem",
-            backgroundColor: theme_palette.getColorVar("surface.default")
-          }, children: [
-            searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              input.Input,
-              {
-                xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
-                sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
-                md: { size: (_d = rest.md) == null ? void 0 : _d.size },
-                lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
-                value: inputValue,
-                ...inputProps,
-                onChange: onInputChange,
-                ref: searchInputRef
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              virtualizedList.VirtualizedList,
-              {
-                ...listProps,
-                css: { paddingLeft: 4, paddingRight: 4 },
-                options: {
-                  count: displayOptions.length,
-                  estimateSize,
-                  getItemKey
-                },
-                style: {
-                  maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
-                  ...listProps == null ? void 0 : listProps.style
-                },
-                RowComponent
-              }
-            )
-          ] }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
-  ] });
-};
-exports.MultipleSelect = MultipleSelect;

package/dist/lib/nav-link/nav-link.cjs

@@ -1,40 +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 reactRouter = require("react-router");
-const constants_index = require("../../constants/index.cjs");
-const NavLink = react.forwardRef(
-  ({ children, style, className, to, ...props }, ref) => {
-    const styleFn = (renderProps) => {
-      return lodashEs.isFunction(style) ? style({
-        ...renderProps,
-        isActive: renderProps.isActive && !lodashEs.isNil(to)
-      }) : style;
-    };
-    const classNameFn = (renderProps) => {
-      return lodashEs.isFunction(className) ? className({
-        ...renderProps,
-        isActive: renderProps.isActive && !lodashEs.isNil(to)
-      }) : className;
-    };
-    const onClick = (e) => {
-      var _a;
-      if (e.currentTarget.getAttribute("aria-disabled") === constants_index.Booleanish.True) {
-        e.preventDefault();
-      }
-      if (lodashEs.isNil(to)) {
-        e.preventDefault();
-      }
-      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(reactRouter.NavLink, { ...props, style: styleFn, className: classNameFn, to: to ?? "#", ref, onClick, children: (renderProps) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isFunction(children) ? children({
-        ...renderProps,
-        isActive: renderProps.isActive && !lodashEs.isNil(to)
-      }) : children });
-    } });
-  }
-);
-exports.NavLink = NavLink;

package/dist/lib/notifications/helpers.cjs

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const jotai = require("jotai");
-const uuid = require("uuid");
-require("clsx");
-require("lodash-es");
-require("../../theme/palette.cjs");
-const common = require("../../utils/common.cjs");
-const notificationAtom = jotai.atom({
-  entries: []
-});
-const useNotifications = () => {
-  const [, setAtomValue] = jotai.useAtom(notificationAtom);
-  const pushNotifications = react.useCallback(
-    (notifications) => {
-      return setAtomValue((prev) => {
-        return {
-          ...prev,
-          entries: [
-            ...prev.entries,
-            ...common.ensureArray(notifications).map((notification) => ({
-              ...notification,
-              id: uuid.v4()
-            }))
-          ]
-        };
-      });
-    },
-    [setAtomValue]
-  );
-  return react.useMemo(() => {
-    return {
-      pushNotifications
-    };
-  }, [pushNotifications]);
-};
-exports.notificationAtom = notificationAtom;
-exports.useNotifications = useNotifications;

package/dist/lib/notifications/notifications.cjs

@@ -1,167 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react$2 = require("react");
-const react = require("@floating-ui/react");
-const jotai = require("jotai");
-const lodashEs = require("lodash-es");
-const react$1 = require("motion/react");
-const helpers = require("./helpers.cjs");
-const utils_index = require("../../utils/index.cjs");
-const theme_index = require("../../theme/index.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-const Notification = ({
-  notification
-}) => {
-  const { main, light } = utils_index.getColorShadesByVariant(notification.color);
-  const [, setAtomValue] = jotai.useAtom(helpers.notificationAtom);
-  const timerRef = react$2.useRef(null);
-  const controls = react$1.useAnimation();
-  const progressControls = react$1.useAnimation();
-  const startTimeRef = react$2.useRef(Date.now());
-  const remainingTimeRef = react$2.useRef(notification.duration ?? 3e3);
-  const removeNotification = react$2.useCallback(() => {
-    setAtomValue((prev) => ({
-      ...prev,
-      entries: prev.entries.filter((n) => n.id !== notification.id)
-    }));
-  }, [notification.id, setAtomValue]);
-  const clearTimer = react$2.useCallback(() => {
-    if (lodashEs.isNil(timerRef.current)) return;
-    clearTimeout(timerRef.current);
-    timerRef.current = null;
-  }, []);
-  const startTimer = react$2.useCallback(
-    (timeLeft) => {
-      clearTimer();
-      const duration = timeLeft ?? remainingTimeRef.current;
-      startTimeRef.current = Date.now();
-      timerRef.current = setTimeout(() => {
-        removeNotification();
-      }, duration);
-    },
-    [clearTimer, removeNotification]
-  );
-  react$2.useEffect(() => {
-    startTimer(notification.duration ?? 3e3);
-    progressControls.start({
-      scaleX: 1,
-      transition: {
-        duration: (notification.duration ?? 3e3) / 1e3,
-        ease: "linear"
-      }
-    });
-    return () => {
-      clearTimer();
-    };
-  }, []);
-  const handleMouseEnter = react$2.useCallback(() => {
-    const elapsed = Date.now() - startTimeRef.current;
-    remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-    clearTimer();
-    progressControls.stop();
-  }, [clearTimer, progressControls]);
-  const handleMouseLeave = react$2.useCallback(() => {
-    startTimer(remainingTimeRef.current);
-    progressControls.start({
-      scaleX: 1,
-      transition: {
-        duration: remainingTimeRef.current / 1e3,
-        ease: "linear"
-      }
-    });
-  }, [startTimer, progressControls]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.motion.div,
-    {
-      layout: true,
-      initial: { opacity: 0, x: 100 },
-      animate: { opacity: 1, x: 0 },
-      exit: { opacity: 0, x: 300 },
-      transition: { duration: 0.3 },
-      css: {
-        backgroundColor: light,
-        outlineColor: main,
-        width: 440,
-        borderRadius: 12,
-        outlineWidth: 1,
-        outlineOffset: -1,
-        outlineStyle: "solid",
-        display: "flex",
-        flexDirection: "column",
-        gap: 4,
-        maxWidth: "100%",
-        pointerEvents: "auto",
-        cursor: "grab",
-        padding: 16,
-        overflow: "hidden",
-        position: "relative"
-      },
-      drag: "x",
-      dragConstraints: { left: 0, right: 0 },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onDragEnd: (_event, info) => {
-        if (Math.abs(info.offset.x) > 100) {
-          controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
-        } else {
-          controls.start({ x: 0 });
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
-          fontSize: "0.875rem",
-          lineHeight: "1.25rem",
-          fontWeight: 500,
-          [theme_screens.mediaQuery("sm")]: { fontSize: "1rem", lineHeight: "1.5rem" }
-        }, children: notification.title ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
-          fontSize: "0.75rem",
-          lineHeight: "1rem",
-          [theme_screens.mediaQuery("sm")]: { fontSize: "0.875rem", lineHeight: "1.25rem" }
-        }, children: notification.message ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", left: 0, right: 0, bottom: 4, paddingLeft: 4, paddingRight: 4, overflow: "hidden", pointerEvents: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.motion.div,
-          {
-            css: {
-              height: 4,
-              width: "100%",
-              borderRadius: 9999
-            },
-            style: {
-              backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
-              transformOrigin: "left"
-            },
-            initial: { scaleX: 0 },
-            animate: progressControls
-          }
-        ) })
-      ]
-    }
-  );
-};
-const Notifications = () => {
-  const { entries } = jotai.useAtomValue(helpers.notificationAtom);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: {
-        zIndex: theme_index.FLOATING_Z_INDEX + 1,
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        pointerEvents: "none",
-        padding: 8,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-end",
-        gap: 8
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: entries.map((notification) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(Notification, { notification }, notification.id);
-      }) })
-    }
-  ) });
-};
-exports.Notifications = Notifications;