smartsell-ui-kit 0.0.5 → 0.1.0

package/dist/chunk-BI3QBKFG.js

@@ -1,634 +0,0 @@
-// src/components/Modal.tsx
-import { useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var defaultThemeColors = {
-  background: "#f8fafc",
-  surface: "#ffffff",
-  onSurface: "#0f172a",
-  onBackground: "#0f172a",
-  primary: "#0f766e",
-  onPrimary: "#ffffff",
-  secondary: "#1d4ed8",
-  onSecondary: "#ffffff",
-  negative: "#dc2626",
-  warning: "#d97706"
-};
-var withAlpha = (hex, alpha) => {
-  const normalized = hex.replace("#", "").trim();
-  const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
-  const red = Number.parseInt(value.slice(0, 2), 16);
-  const green = Number.parseInt(value.slice(2, 4), 16);
-  const blue = Number.parseInt(value.slice(4, 6), 16);
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-};
-var isUiKitThemeTokens = (theme) => {
-  return Boolean(theme && typeof theme === "object" && "theme" in theme);
-};
-var resolveTheme = (theme) => {
-  var _a;
-  const colorOverrides = isUiKitThemeTokens(theme) ? theme.theme.colors : (_a = theme == null ? void 0 : theme.colors) != null ? _a : {};
-  const colors = {
-    ...defaultThemeColors,
-    ...colorOverrides
-  };
-  return {
-    colors,
-    borderSoft: isUiKitThemeTokens(theme) ? theme.borderSoft : withAlpha(colors.onSurface, 0.1),
-    borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha(colors.onSurface, 0.16),
-    surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha(colors.onSurface, 0.04),
-    surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha(colors.surface, 0.94),
-    overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha("#030712", 0.62),
-    mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha(colors.onSurface, 0.72)
-  };
-};
-var normalizeWidth = (maxWidth) => {
-  if (typeof maxWidth === "number") {
-    return `${maxWidth}px`;
-  }
-  return maxWidth != null ? maxWidth : "720px";
-};
-var isLikelyMobileViewport = () => {
-  if (typeof window === "undefined" || typeof navigator === "undefined") {
-    return false;
-  }
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-    navigator.userAgent
-  );
-};
-var isLegacyModalProps = (props) => {
-  return "showModal" in props;
-};
-function LegacyActionButton({
-  label,
-  onClick,
-  disabled,
-  type = "contained",
-  theme,
-  style
-}) {
-  var _a, _b;
-  const { colors } = theme;
-  const buttonStyle = {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "0.4rem",
-    padding: type === "link" ? 0 : "1.3rem",
-    boxSizing: "border-box",
-    cursor: disabled ? "not-allowed" : "pointer",
-    fontWeight: 700,
-    fontSize: "1.3rem",
-    margin: 0,
-    textAlign: "center",
-    transition: "0.5s",
-    opacity: disabled ? 0.5 : 1,
-    filter: disabled ? "saturate(0)" : void 0
-  };
-  if (type === "text") {
-    buttonStyle.background = "none";
-    buttonStyle.border = "1px solid transparent";
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = "none";
-  } else if (type === "link") {
-    buttonStyle.background = "none";
-    buttonStyle.border = "none";
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = "none";
-  } else if (type === "outlined") {
-    buttonStyle.background = "none";
-    buttonStyle.border = `2px solid ${colors.primary}`;
-    buttonStyle.color = colors.primary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.onSurface, 0.08)}`;
-  } else {
-    buttonStyle.background = colors.primary;
-    buttonStyle.border = "1px solid transparent";
-    buttonStyle.color = colors.onPrimary;
-    buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.primary, 0.22)}`;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: (_a = style == null ? void 0 : style.width) != null ? _a : (style == null ? void 0 : style.maxWidth) ? "100%" : "max-content",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: "0 5px",
-        marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: disabled ? void 0 : onClick,
-          disabled,
-          style: buttonStyle,
-          children: label
-        }
-      )
-    }
-  );
-}
-function StandardModal({
-  isOpen,
-  onClose,
-  children,
-  footer,
-  title,
-  description,
-  headerContent,
-  maxWidth,
-  closeOnBackdrop = true,
-  closeOnEscape = true,
-  hideCloseButton = false,
-  hideExpandButton = false,
-  maximized,
-  contentStyle,
-  theme
-}) {
-  const modalTheme = useMemo(() => resolveTheme(theme), [theme]);
-  const [isMaximized, setIsMaximized] = useState(maximized != null ? maximized : false);
-  const titleId = useMemo(
-    () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
-    [title]
-  );
-  useEffect(() => {
-    if (typeof maximized === "boolean") {
-      setIsMaximized(maximized);
-      return;
-    }
-    if (isLikelyMobileViewport()) {
-      setIsMaximized(true);
-    }
-  }, [maximized]);
-  useEffect(() => {
-    if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
-      return;
-    }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const handleKeyDown = (event) => {
-      if (closeOnEscape && event.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [closeOnEscape, isOpen, onClose]);
-  if (!isOpen) {
-    return null;
-  }
-  const header = headerContent != null ? headerContent : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    title ? /* @__PURE__ */ jsx(
-      "h2",
-      {
-        id: titleId,
-        style: {
-          margin: 0,
-          color: modalTheme.colors.onSurface,
-          fontSize: 30,
-          fontWeight: 800,
-          lineHeight: 1.1
-        },
-        children: title
-      }
-    ) : null,
-    description ? /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          margin: 0,
-          color: modalTheme.mutedText,
-          fontSize: 15,
-          lineHeight: 1.6
-        },
-        children: description
-      }
-    ) : null
-  ] });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
-      "aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
-      "aria-modal": "true",
-      role: "dialog",
-      onMouseDown: (event) => {
-        if (closeOnBackdrop && event.target === event.currentTarget) {
-          onClose();
-        }
-      },
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 70,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: isMaximized ? 0 : 16,
-        backgroundColor: modalTheme.overlay,
-        backdropFilter: "blur(8px)"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            width: isMaximized ? "100vw" : "min(100%, 100%)",
-            maxWidth: isMaximized ? "100vw" : normalizeWidth(maxWidth),
-            height: isMaximized ? "100vh" : void 0,
-            maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
-            borderRadius: isMaximized ? 0 : 30,
-            border: `1px solid ${modalTheme.borderSoft}`,
-            background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
-            boxShadow: `0 34px 80px ${withAlpha("#020617", 0.28)}`,
-            color: modalTheme.colors.onSurface,
-            overflow: "hidden",
-            ...contentStyle
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "flex-start",
-                  justifyContent: "space-between",
-                  gap: 16,
-                  padding: "24px 24px 16px",
-                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: header }),
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-                    !hideExpandButton ? /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
-                        title: isMaximized ? "Minimize" : "Maximize",
-                        type: "button",
-                        onClick: () => setIsMaximized((current) => !current),
-                        style: {
-                          height: 42,
-                          width: 42,
-                          borderRadius: 999,
-                          border: `1px solid ${modalTheme.borderSoft}`,
-                          backgroundColor: "transparent",
-                          color: modalTheme.colors.onSurface,
-                          cursor: "pointer",
-                          fontSize: 18,
-                          fontWeight: 700
-                        },
-                        children: isMaximized ? "\u25A2" : "\u25A1"
-                      }
-                    ) : null,
-                    !hideCloseButton ? /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        "aria-label": "Close modal",
-                        type: "button",
-                        onClick: onClose,
-                        style: {
-                          height: 42,
-                          width: 42,
-                          borderRadius: 999,
-                          border: `1px solid ${modalTheme.borderSoft}`,
-                          backgroundColor: "transparent",
-                          color: modalTheme.colors.onSurface,
-                          cursor: "pointer",
-                          fontSize: 20,
-                          fontWeight: 700
-                        },
-                        children: "\xD7"
-                      }
-                    ) : null
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  flex: 1,
-                  minHeight: 0,
-                  overflow: "auto",
-                  padding: 24
-                },
-                children
-              }
-            ),
-            footer ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  gap: 12,
-                  padding: "16px 24px 24px",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
-                },
-                children: footer
-              }
-            ) : null
-          ]
-        }
-      )
-    }
-  );
-}
-function LegacyModal({
-  title,
-  showModal,
-  closeModal,
-  children,
-  action,
-  actionNameBtn,
-  hideActionButton = false,
-  cancelButton,
-  disableActionBtn = false,
-  isLoading = false,
-  onlyCloseButton = false,
-  hideCloseIcon = false,
-  style,
-  bodyStyle,
-  additionalActions,
-  maximized,
-  theme
-}) {
-  const modalTheme = useMemo(() => resolveTheme(theme), [theme]);
-  const [isMaximized, setIsMaximized] = useState(maximized != null ? maximized : false);
-  const resolvedAction = action != null ? action : (() => null);
-  useEffect(() => {
-    if (maximized === void 0 && isLikelyMobileViewport()) {
-      setIsMaximized(true);
-    }
-  }, [maximized]);
-  if (!showModal) {
-    return null;
-  }
-  const actionButtons = () => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      additionalActions == null ? void 0 : additionalActions.map((item) => {
-        var _a, _b, _c;
-        return /* @__PURE__ */ jsx(
-          LegacyActionButton,
-          {
-            label: item.name,
-            onClick: item.onClick,
-            type: (_a = item.type) != null ? _a : "contained",
-            style: (_b = item.style) != null ? _b : { maxWidth: "150px" },
-            theme: modalTheme,
-            disabled: (_c = item.disable) != null ? _c : disableActionBtn || isLoading
-          },
-          item.name
-        );
-      }),
-      !hideActionButton ? /* @__PURE__ */ jsx(
-        LegacyActionButton,
-        {
-          label: actionNameBtn != null ? actionNameBtn : "Save",
-          onClick: resolvedAction,
-          type: "contained",
-          style: { maxWidth: "100px" },
-          theme: modalTheme,
-          disabled: disableActionBtn || isLoading
-        }
-      ) : null
-    ] });
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-labelledby": "modal-title",
-      "aria-modal": "true",
-      role: "dialog",
-      style: {
-        background: `${modalTheme.colors.background}90`,
-        backdropFilter: "blur(2px)",
-        width: "100%",
-        height: "100%",
-        position: "fixed",
-        zIndex: 999,
-        top: 0,
-        left: 0,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          id: isLoading ? "ldg1" : void 0,
-          style: {
-            position: isMaximized ? "fixed" : "relative",
-            left: isMaximized ? 0 : void 0,
-            top: isMaximized ? 0 : void 0,
-            background: modalTheme.colors.background,
-            display: "flex",
-            alignItems: "center",
-            flexDirection: "column",
-            borderRadius: "0.8rem",
-            boxSizing: "border-box",
-            maxHeight: isMaximized ? "100vh" : "80vh",
-            maxWidth: isMaximized ? "100vw" : "80vw",
-            minWidth: isMaximized ? "100vw" : 300,
-            minHeight: isMaximized ? "100vh" : void 0,
-            width: isMaximized ? "100vw" : void 0,
-            boxShadow: "0 24px 64px rgba(15, 23, 42, 0.18)",
-            ...isLoading ? { opacity: 0.5 } : null,
-            ...style
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  top: 0,
-                  zIndex: 500,
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  width: "100%",
-                  height: "4rem",
-                  padding: "1rem",
-                  boxSizing: "border-box",
-                  borderTopLeftRadius: "0.8rem",
-                  borderTopRightRadius: "0.8rem",
-                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { id: "modal-title", style: { fontWeight: "bold", fontSize: "1.3rem" }, children: title }),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      id: "modal-header-icons",
-                      style: { display: "flex", alignItems: "center", gap: "0.5rem" },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
-                            title: isMaximized ? "Minimize" : "Maximize",
-                            type: "button",
-                            onClick: () => setIsMaximized((current) => !current),
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: "pointer",
-                              fontSize: 18,
-                              lineHeight: 1,
-                              padding: 0
-                            },
-                            children: isMaximized ? "\u25A2" : "\u25A1"
-                          }
-                        ),
-                        !hideCloseIcon ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            "aria-label": "Close modal",
-                            title: "Close",
-                            type: "button",
-                            onClick: isLoading ? void 0 : closeModal,
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: isLoading ? "not-allowed" : "pointer",
-                              fontSize: 22,
-                              lineHeight: 1,
-                              padding: 0,
-                              opacity: isLoading ? 0.5 : 1
-                            },
-                            children: "\xD7"
-                          }
-                        ) : null
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  scrollbarWidth: "thin",
-                  width: "100%",
-                  maxWidth: "100%",
-                  paddingTop: "4rem",
-                  paddingBottom: "4rem",
-                  overflow: "auto",
-                  ...bodyStyle
-                },
-                children
-              }
-            ),
-            onlyCloseButton ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
-                },
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: /* @__PURE__ */ jsx(
-                      LegacyActionButton,
-                      {
-                        label: "Close",
-                        onClick: closeModal,
-                        theme: modalTheme,
-                        disabled: isLoading
-                      }
-                    )
-                  }
-                )
-              }
-            ) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
-                },
-                children: cancelButton ? /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        LegacyActionButton,
-                        {
-                          label: "Cancel",
-                          onClick: cancelButton,
-                          type: "text",
-                          style: { maxWidth: "100px" },
-                          theme: modalTheme,
-                          disabled: false
-                        }
-                      ),
-                      actionButtons()
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: actionButtons()
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function Modal(props) {
-  if (isLegacyModalProps(props)) {
-    return /* @__PURE__ */ jsx(LegacyModal, { ...props });
-  }
-  return /* @__PURE__ */ jsx(StandardModal, { ...props });
-}
-
-export {
-  Modal
-};
-//# sourceMappingURL=chunk-BI3QBKFG.js.map