smartsell-ui-kit 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -249,20 +249,142 @@ function Card({
 
 // src/components/ComposableModal.tsx
 var import_react3 = require("react");
-var import_smartsell_sales_sdk5 = require("smartsell-sales-sdk");
+var import_smartsell_sales_sdk4 = require("smartsell-sales-sdk");
 
 // src/components/Modal.tsx
 var import_react2 = require("react");
-var import_smartsell_sales_sdk4 = require("smartsell-sales-sdk");
 var import_jsx_runtime3 = require("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 withAlpha4 = (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 : withAlpha4(colors.onSurface, 0.1),
+    borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha4(colors.onSurface, 0.16),
+    surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha4(colors.onSurface, 0.04),
+    surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha4(colors.surface, 0.94),
+    overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha4("#030712", 0.62),
+    mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha4(colors.onSurface, 0.72)
+  };
+};
 var normalizeWidth = (maxWidth) => {
   if (typeof maxWidth === "number") {
     return `${maxWidth}px`;
   }
   return maxWidth != null ? maxWidth : "720px";
 };
-function Modal({
-  sdk,
+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 ${withAlpha4(colors.onSurface, 0.08)}`;
+  } else {
+    buttonStyle.background = colors.primary;
+    buttonStyle.border = "1px solid transparent";
+    buttonStyle.color = colors.onPrimary;
+    buttonStyle.boxShadow = `0 14px 28px ${withAlpha4(colors.primary, 0.22)}`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: disabled ? void 0 : onClick,
+          disabled,
+          style: buttonStyle,
+          children: label
+        }
+      )
+    }
+  );
+}
+function StandardModal({
   isOpen,
   onClose,
   children,
@@ -274,9 +396,10 @@ function Modal({
   closeOnBackdrop = true,
   closeOnEscape = true,
   hideCloseButton = false,
-  contentStyle
+  contentStyle,
+  theme
 }) {
-  const { theme, borderSoft, overlay, surfaceRaised, mutedText } = useUiKitTheme(sdk);
+  const modalTheme = (0, import_react2.useMemo)(() => resolveTheme(theme), [theme]);
   const titleId = (0, import_react2.useMemo)(
     () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
     [title]
@@ -308,7 +431,7 @@ function Modal({
         id: titleId,
         style: {
           margin: 0,
-          color: theme.colors.onSurface,
+          color: modalTheme.colors.onSurface,
           fontSize: 30,
           fontWeight: 800,
           lineHeight: 1.1
@@ -321,7 +444,7 @@ function Modal({
       {
         style: {
           margin: 0,
-          color: mutedText,
+          color: modalTheme.mutedText,
           fontSize: 15,
           lineHeight: 1.6
         },
@@ -349,7 +472,7 @@ function Modal({
         alignItems: "center",
         justifyContent: "center",
         padding: 16,
-        backgroundColor: overlay,
+        backgroundColor: modalTheme.overlay,
         backdropFilter: "blur(8px)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -359,10 +482,10 @@ function Modal({
             width: "min(100%, 100%)",
             maxWidth: normalizeWidth(maxWidth),
             borderRadius: 30,
-            border: `1px solid ${borderSoft}`,
-            background: `linear-gradient(180deg, ${surfaceRaised}, ${theme.colors.surface})`,
-            boxShadow: `0 34px 80px ${(0, import_smartsell_sales_sdk4.withAlpha)("#020617", 0.28)}`,
-            color: theme.colors.onSurface,
+            border: `1px solid ${modalTheme.borderSoft}`,
+            background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
+            boxShadow: `0 34px 80px ${withAlpha4("#020617", 0.28)}`,
+            color: modalTheme.colors.onSurface,
             overflow: "hidden",
             ...contentStyle
           },
@@ -389,9 +512,9 @@ function Modal({
                         height: 42,
                         width: 42,
                         borderRadius: 999,
-                        border: `1px solid ${borderSoft}`,
+                        border: `1px solid ${modalTheme.borderSoft}`,
                         backgroundColor: "transparent",
-                        color: theme.colors.onSurface,
+                        color: modalTheme.colors.onSurface,
                         cursor: "pointer",
                         fontSize: 20,
                         fontWeight: 700
@@ -411,7 +534,7 @@ function Modal({
                   justifyContent: "flex-end",
                   gap: 12,
                   padding: "0 24px 24px",
-                  borderTop: `1px solid ${(0, import_smartsell_sales_sdk4.withAlpha)(theme.colors.onSurface, 0.06)}`
+                  borderTop: `1px solid ${withAlpha4(modalTheme.colors.onSurface, 0.06)}`
                 },
                 children: footer
               }
@@ -422,6 +545,289 @@ function Modal({
     }
   );
 }
+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 = (0, import_react2.useMemo)(() => resolveTheme(theme), [theme]);
+  const [isMaximized, setIsMaximized] = (0, import_react2.useState)(maximized != null ? maximized : false);
+  const resolvedAction = action != null ? action : (() => null);
+  (0, import_react2.useEffect)(() => {
+    if (maximized === void 0 && isLikelyMobileViewport()) {
+      setIsMaximized(true);
+    }
+  }, [maximized]);
+  if (!showModal) {
+    return null;
+  }
+  const actionButtons = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      additionalActions == null ? void 0 : additionalActions.map((item) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+        LegacyActionButton,
+        {
+          label: actionNameBtn != null ? actionNameBtn : "Save",
+          onClick: resolvedAction,
+          type: "contained",
+          style: { maxWidth: "100px" },
+          theme: modalTheme,
+          disabled: disableActionBtn || isLoading
+        }
+      ) : null
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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 ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "modal-title", style: { fontWeight: "bold", fontSize: "1.3rem" }, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      id: "modal-header-icons",
+                      style: { display: "flex", alignItems: "center", gap: "0.5rem" },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                style: {
+                  scrollbarWidth: "thin",
+                  width: "100%",
+                  maxWidth: "100%",
+                  paddingTop: "4rem",
+                  paddingBottom: "4rem",
+                  overflow: "auto",
+                  ...bodyStyle
+                },
+                children
+              }
+            ),
+            onlyCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.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 ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`,
+                  boxSizing: "border-box",
+                  borderBottomLeftRadius: "0.8rem",
+                  borderBottomRightRadius: "0.8rem"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: "buttons-footer",
+                    style: { flex: 1, display: "flex", justifyContent: "end" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      LegacyActionButton,
+                      {
+                        label: "Close",
+                        onClick: closeModal,
+                        theme: modalTheme,
+                        disabled: isLoading
+                      }
+                    )
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime3.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 ${withAlpha4(modalTheme.colors.onBackground, 0.1)}`,
+                  boxSizing: "border-box",
+                  borderBottomLeftRadius: "0.8rem",
+                  borderBottomRightRadius: "0.8rem"
+                },
+                children: cancelButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: "buttons-footer",
+                    style: { flex: 1, display: "flex", justifyContent: "end" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        LegacyActionButton,
+                        {
+                          label: "Cancel",
+                          onClick: cancelButton,
+                          type: "text",
+                          style: { maxWidth: "100px" },
+                          theme: modalTheme,
+                          disabled: false
+                        }
+                      ),
+                      actionButtons()
+                    ]
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: "buttons-footer",
+                    style: { flex: 1, display: "flex", justifyContent: "end" },
+                    children: actionButtons()
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Modal(props) {
+  if (isLegacyModalProps(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LegacyModal, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StandardModal, { ...props });
+}
 
 // src/components/ComposableModal.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -450,6 +856,7 @@ function ComposableModal({
   footerFallback,
   children
 }) {
+  const theme = useUiKitTheme(sdk);
   const slotIds = createModalSlotIds(slotBaseId);
   const context = (0, import_react3.useMemo)(
     () => ({
@@ -495,19 +902,19 @@ function ComposableModal({
       }
     ) : null
   ] });
-  const headerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.header, sdk, context, children: defaultHeader });
-  const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.body, sdk, context, children });
-  const footerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
+  const headerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.header, sdk, context, children: defaultHeader });
+  const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.body, sdk, context, children });
+  const footerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk4.SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Modal,
     {
-      sdk,
       isOpen,
       onClose,
       title,
       description,
       headerContent,
       footer: footerContent,
+      theme,
       maxWidth,
       closeOnBackdrop,
       closeOnEscape,
@@ -588,7 +995,7 @@ function Field({
 }
 
 // src/components/Input.tsx
-var import_smartsell_sales_sdk6 = require("smartsell-sales-sdk");
+var import_smartsell_sales_sdk5 = require("smartsell-sales-sdk");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var getPadding = (size) => {
   if (size === "sm") return "10px 12px";
@@ -615,7 +1022,7 @@ function Input({
     outline: "none",
     color: theme.colors.onSurface,
     backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk6.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk5.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
     transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
     ...style
   };
@@ -627,7 +1034,7 @@ function Input({
 }
 
 // src/components/Select.tsx
-var import_smartsell_sales_sdk7 = require("smartsell-sales-sdk");
+var import_smartsell_sales_sdk6 = require("smartsell-sales-sdk");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var getPadding2 = (size) => {
   if (size === "sm") return "10px 12px";
@@ -655,7 +1062,7 @@ function Select({
     outline: "none",
     color: theme.colors.onSurface,
     backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk7.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk6.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
     transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
     ...style
   };
@@ -667,7 +1074,7 @@ function Select({
 }
 
 // src/components/Textarea.tsx
-var import_smartsell_sales_sdk8 = require("smartsell-sales-sdk");
+var import_smartsell_sales_sdk7 = require("smartsell-sales-sdk");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var getPadding3 = (size) => {
   if (size === "sm") return "10px 12px";
@@ -695,7 +1102,7 @@ function Textarea({
     outline: "none",
     color: theme.colors.onSurface,
     backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
-    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk8.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk7.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
     transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
     resize: "vertical",
     ...style