smartsell-ui-kit 0.0.5 → 0.1.0

package/README.md

@@ -5,29 +5,33 @@
 It is designed for tenant developers who should not need to know how the core app is implemented.
 The package stays on the public contract surface:
 
-- theme-aware components powered by `smartsell-sales-sdk`
+- theme-aware components powered by `smartsell-theme`
 - inline-style primitives that do not depend on private app CSS files
 - a composable modal helper with predictable slot ids for `header`, `body`, and `footer`
 
 ## Installation
 
 ```bash
-npm install react smartsell-sales-sdk smartsell-ui-kit
+npm install react smartsell-theme smartsell-ui-kit
 ```
 
+If you want to connect `ComposableModal` to SmartSell slot overrides, install `smartsell-sales-sdk` as well.
+
 ## Basic button and card
 
 ```tsx
+import { ThemeProvider } from 'smartsell-theme';
 import { Button, Card } from 'smartsell-ui-kit';
-import type { ModulePageProps } from 'smartsell-sales-sdk';
 
-export default function ExamplePage({ sdk }: ModulePageProps) {
+export default function ExamplePage() {
   return (
-    <Card sdk={sdk} title="Example" eyebrow="UI kit">
-      <Button sdk={sdk} onClick={() => sdk.navigation.goBack()}>
-        Go back
-      </Button>
-    </Card>
+    <ThemeProvider>
+      <Card title="Example" eyebrow="UI kit">
+        <Button onClick={() => window.history.back()}>
+          Go back
+        </Button>
+      </Card>
+    </ThemeProvider>
   );
 }
 ```
@@ -37,22 +41,30 @@ export default function ExamplePage({ sdk }: ModulePageProps) {
 Use `ComposableModal` when you want the page to keep modal state while tenants customize visual sections independently.
 
 ```tsx
+import { SlotRenderer, type ModulePageProps, type SlotComponentProps } from 'smartsell-sales-sdk';
 import { ComposableModal, createModalSlotIds } from 'smartsell-ui-kit';
 
 const slotIds = createModalSlotIds('order-review');
 
-<ComposableModal
-  sdk={sdk}
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  onConfirm={submitOrder}
-  title="Order review"
-  description="Validate the order before sending it."
-  slotBaseId="order-review"
-  payload={{ orderNumber: 'SO-1001', total: 421.9 }}
->
-  <div>Default modal body</div>
-</ComposableModal>
+export default function ExamplePage({ sdk }: ModulePageProps) {
+  return (
+    <ComposableModal
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      onConfirm={submitOrder}
+      title="Order review"
+      slotBaseId="order-review"
+      renderSlot={({ id, context, children }) => (
+        <SlotRenderer id={id} sdk={sdk} context={context}>
+          {children}
+        </SlotRenderer>
+      )}
+      payload={{ orderNumber: 'SO-1001', total: 421.9 }}
+    >
+      <div>Default modal body</div>
+    </ComposableModal>
+  );
+}
 ```
 
 Slot ids generated by `createModalSlotIds('order-review')`:
@@ -82,7 +94,7 @@ type OrderPayload = {
 
 function CustomFooter({ sdk, context }: SlotComponentProps<ModalSlotContext<OrderPayload>>) {
   return (
-    <Button sdk={sdk} onClick={() => context?.confirm?.()}>
+    <Button onClick={() => context?.confirm?.()}>
       Send order {context?.payload?.orderNumber}
     </Button>
   );
@@ -122,8 +134,8 @@ npm publish
 The repository now includes a local Storybook workspace so you can inspect and interact with components before publishing the package.
 
 - grouped sidebar navigation for buttons, surfaces, forms, and modals
-- live Controls for component props such as size, tone, labels, states, and modal behaviors
-- a mocked `SmartSellSDK` so theme-aware components render without depending on the main app runtime
+- live Controls for component props such as size, variants, labels, states, and modal behaviors
+- a mocked `ThemeProvider` so components render with the same theme contract used in host apps
 
 Run it directly with npm:
 

package/dist/chunk-YWH2VIAD.js

@@ -0,0 +1,573 @@
+// src/components/Modal.tsx
+import { useEffect, useMemo, useState } from "react";
+
+// src/color.ts
+function 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})`;
+}
+
+// src/components/Modal.tsx
+import { 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 srOnlyStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+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 createTitleId = (title) => {
+  if (typeof title === "string" || typeof title === "number") {
+    const normalized = String(title).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+    return `smartsell-modal-${normalized || "dialog"}`;
+  }
+  return "smartsell-modal-dialog";
+};
+var isLegacyModalProps = (props) => {
+  return "showModal" in props;
+};
+var normalizeLegacyAction = (action, fallbackDisabled = false) => {
+  var _a, _b, _c;
+  return {
+    label: action.name,
+    onClick: action.onClick,
+    appearance: (_a = action.type) != null ? _a : "contained",
+    style: (_b = action.style) != null ? _b : { maxWidth: "150px" },
+    disabled: (_c = action.disable) != null ? _c : fallbackDisabled
+  };
+};
+var normalizeModalProps = (props) => {
+  var _a, _b;
+  if (!isLegacyModalProps(props)) {
+    return props;
+  }
+  const isBusy = Boolean(props.isLoading);
+  const disableAction = Boolean(props.disableActionBtn || props.isLoading);
+  return {
+    isOpen: props.showModal,
+    onClose: props.closeModal,
+    title: props.title,
+    children: props.children,
+    theme: props.theme,
+    maximized: props.maximized,
+    contentStyle: props.style,
+    bodyStyle: props.bodyStyle,
+    hideCloseButton: props.hideCloseIcon,
+    disableDismiss: isBusy,
+    closeOnBackdrop: false,
+    closeOnEscape: false,
+    isBusy,
+    closeAction: props.onlyCloseButton ? {
+      label: "Close",
+      onClick: props.closeModal,
+      appearance: "contained",
+      disabled: isBusy
+    } : void 0,
+    cancelAction: props.onlyCloseButton || !props.cancelButton ? void 0 : {
+      label: "Cancel",
+      onClick: props.cancelButton,
+      appearance: "text",
+      style: { maxWidth: "100px" }
+    },
+    confirmAction: props.onlyCloseButton || props.hideActionButton || !props.action ? void 0 : {
+      label: (_a = props.actionNameBtn) != null ? _a : "Save",
+      onClick: props.action,
+      appearance: "contained",
+      style: { maxWidth: "100px" },
+      disabled: disableAction
+    },
+    extraActions: props.onlyCloseButton ? void 0 : (_b = props.additionalActions) == null ? void 0 : _b.map((action) => normalizeLegacyAction(action, disableAction))
+  };
+};
+function ModalActionButton({
+  action,
+  theme
+}) {
+  var _a, _b;
+  const { colors } = theme;
+  const {
+    label,
+    onClick,
+    appearance = "contained",
+    disabled = false,
+    style
+  } = action;
+  const buttonStyle = {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "0.4rem",
+    padding: appearance === "link" ? 0 : "0.9rem 1.15rem",
+    boxSizing: "border-box",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontWeight: 700,
+    fontSize: "1.05rem",
+    lineHeight: 1.2,
+    margin: 0,
+    textAlign: "center",
+    transition: "0.5s",
+    opacity: disabled ? 0.5 : 1,
+    filter: disabled ? "saturate(0)" : void 0
+  };
+  if (appearance === "text") {
+    buttonStyle.background = "none";
+    buttonStyle.border = "1px solid transparent";
+    buttonStyle.color = colors.primary;
+    buttonStyle.boxShadow = "none";
+  } else if (appearance === "link") {
+    buttonStyle.background = "none";
+    buttonStyle.border = "none";
+    buttonStyle.color = colors.primary;
+    buttonStyle.boxShadow = "none";
+  } else if (appearance === "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,
+        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 ModalBusyIndicator({
+  theme
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      role: "status",
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 56,
+        height: 56,
+        borderRadius: 999,
+        backgroundColor: withAlpha(theme.colors.surface, 0.88),
+        boxShadow: `0 18px 36px ${withAlpha(theme.colors.onSurface, 0.08)}`
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: srOnlyStyle, children: "Loading" }),
+        /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 40 40", fill: "none", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "20",
+              cy: "20",
+              r: "16",
+              stroke: withAlpha(theme.colors.onSurface, 0.12),
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M20 4C28.837 4 36 11.163 36 20",
+              stroke: theme.colors.primary,
+              strokeWidth: "4",
+              strokeLinecap: "round",
+              children: /* @__PURE__ */ jsx(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "0.75s",
+                  repeatCount: "indefinite"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UnifiedModal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  headerContent,
+  footer,
+  confirmAction,
+  cancelAction,
+  closeAction,
+  extraActions,
+  maxWidth,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  hideCloseButton = false,
+  hideExpandButton = false,
+  disableDismiss = false,
+  maximized,
+  contentStyle,
+  bodyStyle,
+  isBusy = false,
+  theme
+}) {
+  var _a, _b;
+  const modalTheme = useMemo(() => resolveTheme(theme), [theme]);
+  const [isMaximized, setIsMaximized] = useState(maximized != null ? maximized : false);
+  const titleId = useMemo(() => createTitleId(title), [title]);
+  const shouldDisableDismiss = disableDismiss || isBusy;
+  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 (!shouldDisableDismiss && closeOnEscape && event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeOnEscape, isOpen, onClose, shouldDisableDismiss]);
+  if (!isOpen) {
+    return null;
+  }
+  const resolvedHeader = headerContent != null ? headerContent : title ? /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: titleId,
+      style: {
+        margin: 0,
+        color: modalTheme.colors.onSurface,
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 1.1
+      },
+      children: title
+    }
+  ) : null;
+  let footerContent = footer;
+  if (footerContent === void 0) {
+    if (closeAction && !closeAction.hidden) {
+      footerContent = /* @__PURE__ */ jsx(
+        ModalActionButton,
+        {
+          action: { ...closeAction, disabled: closeAction.disabled || isBusy },
+          theme: modalTheme
+        }
+      );
+    } else {
+      const resolvedActions = [
+        cancelAction ? {
+          ...cancelAction,
+          appearance: (_a = cancelAction.appearance) != null ? _a : "text",
+          disabled: cancelAction.disabled || isBusy
+        } : void 0,
+        ...(extraActions != null ? extraActions : []).map((action) => {
+          var _a2;
+          return {
+            ...action,
+            appearance: (_a2 = action.appearance) != null ? _a2 : "contained",
+            disabled: action.disabled || isBusy
+          };
+        }),
+        confirmAction ? {
+          ...confirmAction,
+          appearance: (_b = confirmAction.appearance) != null ? _b : "contained",
+          disabled: confirmAction.disabled || isBusy
+        } : void 0
+      ].reduce((items, action) => {
+        if (!action || action.hidden) {
+          return items;
+        }
+        items.push(action);
+        return items;
+      }, []);
+      footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ jsx(
+        ModalActionButton,
+        {
+          action,
+          theme: modalTheme
+        },
+        `modal-action-${index}`
+      )) : void 0;
+    }
+  }
+  const shouldRenderFooter = footerContent !== void 0 && footerContent !== null && footerContent !== false;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
+      "aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
+      "aria-busy": isBusy,
+      "aria-modal": "true",
+      role: "dialog",
+      onMouseDown: (event) => {
+        if (!shouldDisableDismiss && 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)",
+            minWidth: isMaximized ? "100vw" : 300,
+            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: 12,
+                  padding: "18px 20px 12px",
+                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        opacity: isBusy ? 0.38 : 1,
+                        transition: "opacity 180ms ease"
+                      },
+                      children: resolvedHeader
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                    !hideExpandButton ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
+                        title: isMaximized ? "Minimize" : "Maximize",
+                        type: "button",
+                        onClick: () => setIsMaximized((current) => !current),
+                        style: {
+                          height: 40,
+                          width: 40,
+                          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: shouldDisableDismiss ? void 0 : onClose,
+                        style: {
+                          height: 40,
+                          width: 40,
+                          borderRadius: 999,
+                          border: `1px solid ${modalTheme.borderSoft}`,
+                          backgroundColor: "transparent",
+                          color: modalTheme.colors.onSurface,
+                          cursor: shouldDisableDismiss ? "not-allowed" : "pointer",
+                          fontSize: 20,
+                          fontWeight: 700,
+                          opacity: shouldDisableDismiss ? 0.5 : 1
+                        },
+                        children: "\xD7"
+                      }
+                    ) : null
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  minHeight: 0,
+                  position: "relative",
+                  overflow: "auto",
+                  padding: 24,
+                  ...bodyStyle
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        opacity: isBusy ? 0.38 : 1,
+                        filter: isBusy ? "saturate(0.8)" : "none",
+                        pointerEvents: isBusy ? "none" : "auto",
+                        transition: "opacity 180ms ease, filter 180ms ease"
+                      },
+                      children
+                    }
+                  ),
+                  isBusy ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: withAlpha(modalTheme.colors.surface, 0.58),
+                        backdropFilter: "blur(2px)"
+                      },
+                      children: /* @__PURE__ */ jsx(ModalBusyIndicator, { theme: modalTheme })
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            shouldRenderFooter ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 10,
+                  padding: "12px 20px 16px",
+                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
+                },
+                children: footerContent
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function Modal(props) {
+  return /* @__PURE__ */ jsx(UnifiedModal, { ...normalizeModalProps(props) });
+}
+
+export {
+  withAlpha,
+  Modal
+};
+//# sourceMappingURL=chunk-YWH2VIAD.js.map