smartsell-ui-kit 0.0.1

package/dist/index.js

@@ -0,0 +1,662 @@
+// src/components/Button.tsx
+import { withAlpha as withAlpha2 } from "smartsell-sales-sdk";
+
+// src/theme.ts
+import { useMemo } from "react";
+import {
+  useSalesTheme,
+  withAlpha
+} from "smartsell-sales-sdk";
+function useUiKitTheme(sdk) {
+  const { theme } = useSalesTheme(sdk);
+  return useMemo(() => {
+    return {
+      theme,
+      borderSoft: withAlpha(theme.colors.onSurface, 0.1),
+      borderStrong: withAlpha(theme.colors.onSurface, 0.16),
+      surfaceMuted: withAlpha(theme.colors.onSurface, 0.04),
+      surfaceRaised: withAlpha(theme.colors.surface, 0.94),
+      overlay: withAlpha("#030712", 0.62),
+      focusRing: withAlpha(theme.colors.primary, 0.22),
+      mutedText: withAlpha(theme.colors.onSurface, 0.72)
+    };
+  }, [theme]);
+}
+
+// src/components/Button.tsx
+import { jsxs } from "react/jsx-runtime";
+var getSizeStyles = (size) => {
+  if (size === "sm") {
+    return { minHeight: 38, padding: "0 14px", fontSize: 13 };
+  }
+  if (size === "lg") {
+    return { minHeight: 50, padding: "0 20px", fontSize: 15 };
+  }
+  return { minHeight: 44, padding: "0 18px", fontSize: 14 };
+};
+function Button({
+  sdk,
+  variant = "solid",
+  tone = "primary",
+  size = "md",
+  fullWidth = false,
+  leadingIcon,
+  trailingIcon,
+  children,
+  disabled,
+  style,
+  type = "button",
+  ...rest
+}) {
+  const { theme } = useUiKitTheme(sdk);
+  const palette = {
+    primary: {
+      background: theme.colors.primary,
+      foreground: theme.colors.onPrimary,
+      border: withAlpha2(theme.colors.primary, 0.3)
+    },
+    secondary: {
+      background: theme.colors.secondary,
+      foreground: theme.colors.onSecondary,
+      border: withAlpha2(theme.colors.secondary, 0.3)
+    },
+    neutral: {
+      background: theme.colors.surface,
+      foreground: theme.colors.onSurface,
+      border: withAlpha2(theme.colors.onSurface, 0.16)
+    },
+    danger: {
+      background: theme.colors.negative,
+      foreground: "#ffffff",
+      border: withAlpha2(theme.colors.negative, 0.32)
+    }
+  }[tone];
+  const variantStyles = {
+    solid: {
+      backgroundColor: palette.background,
+      borderColor: palette.border,
+      color: palette.foreground
+    },
+    outline: {
+      backgroundColor: "transparent",
+      borderColor: palette.border,
+      color: tone === "neutral" ? palette.foreground : palette.background
+    },
+    ghost: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: tone === "neutral" ? palette.foreground : palette.background
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      disabled,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        width: fullWidth ? "100%" : void 0,
+        borderRadius: 16,
+        borderStyle: "solid",
+        borderWidth: 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontWeight: 700,
+        letterSpacing: "0.01em",
+        lineHeight: 1,
+        opacity: disabled ? 0.58 : 1,
+        transition: "transform 160ms ease, opacity 160ms ease, background-color 160ms ease",
+        boxShadow: variant === "solid" ? `0 14px 28px ${withAlpha2(palette.background, 0.18)}` : "none",
+        ...getSizeStyles(size),
+        ...variantStyles[variant],
+        ...style
+      },
+      children: [
+        leadingIcon,
+        children,
+        trailingIcon
+      ]
+    }
+  );
+}
+
+// src/components/Card.tsx
+import { withAlpha as withAlpha3 } from "smartsell-sales-sdk";
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+var getToneStyles = (tone, sdk) => {
+  const { theme } = useUiKitTheme(sdk);
+  const accent = {
+    default: theme.colors.primary,
+    primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
+    warning: theme.colors.warning
+  }[tone];
+  return {
+    accent,
+    background: `linear-gradient(160deg, ${withAlpha3(theme.colors.surface, 0.98)}, ${withAlpha3(accent, 0.08)})`,
+    border: withAlpha3(accent, 0.22)
+  };
+};
+function Card({
+  sdk,
+  children,
+  eyebrow,
+  title,
+  action,
+  tone = "default",
+  padded = true,
+  style,
+  ...rest
+}) {
+  const { theme, mutedText } = useUiKitTheme(sdk);
+  const toneStyles = getToneStyles(tone, sdk);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...rest,
+      style: {
+        borderRadius: 28,
+        border: `1px solid ${toneStyles.border}`,
+        background: toneStyles.background,
+        color: theme.colors.onSurface,
+        boxShadow: `0 24px 48px ${withAlpha3(theme.colors.onSurface, 0.06)}`,
+        padding: padded ? 24 : void 0,
+        ...style
+      },
+      children: [
+        (eyebrow || title || action) && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              gap: 16,
+              marginBottom: 18
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                eyebrow ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      color: toneStyles.accent,
+                      fontSize: 12,
+                      fontWeight: 800,
+                      letterSpacing: "0.16em",
+                      textTransform: "uppercase"
+                    },
+                    children: eyebrow
+                  }
+                ) : null,
+                title ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: theme.colors.onSurface,
+                      fontSize: 24,
+                      fontWeight: 700,
+                      lineHeight: 1.2
+                    },
+                    children: title
+                  }
+                ) : null
+              ] }),
+              action ? /* @__PURE__ */ jsx("div", { style: { color: mutedText }, children: action }) : null
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/ComposableModal.tsx
+import { useMemo as useMemo3 } from "react";
+import { SlotRenderer } from "smartsell-sales-sdk";
+
+// src/components/Modal.tsx
+import { useEffect, useMemo as useMemo2 } from "react";
+import { withAlpha as withAlpha4 } from "smartsell-sales-sdk";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+var normalizeWidth = (maxWidth) => {
+  if (typeof maxWidth === "number") {
+    return `${maxWidth}px`;
+  }
+  return maxWidth != null ? maxWidth : "720px";
+};
+function Modal({
+  sdk,
+  isOpen,
+  onClose,
+  children,
+  footer,
+  title,
+  description,
+  headerContent,
+  maxWidth,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  hideCloseButton = false,
+  contentStyle
+}) {
+  const { theme, borderSoft, overlay, surfaceRaised, mutedText } = useUiKitTheme(sdk);
+  const titleId = useMemo2(
+    () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
+    [title]
+  );
+  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__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    title ? /* @__PURE__ */ jsx2(
+      "h2",
+      {
+        id: titleId,
+        style: {
+          margin: 0,
+          color: theme.colors.onSurface,
+          fontSize: 30,
+          fontWeight: 800,
+          lineHeight: 1.1
+        },
+        children: title
+      }
+    ) : null,
+    description ? /* @__PURE__ */ jsx2(
+      "p",
+      {
+        style: {
+          margin: 0,
+          color: mutedText,
+          fontSize: 15,
+          lineHeight: 1.6
+        },
+        children: description
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "aria-labelledby": 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: 16,
+        backgroundColor: overlay,
+        backdropFilter: "blur(8px)"
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            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 ${withAlpha4("#020617", 0.28)}`,
+            color: theme.colors.onSurface,
+            overflow: "hidden",
+            ...contentStyle
+          },
+          children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  justifyContent: "space-between",
+                  gap: 16,
+                  padding: "24px 24px 0"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: header }),
+                  !hideCloseButton ? /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      "aria-label": "Close modal",
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        height: 42,
+                        width: 42,
+                        borderRadius: 999,
+                        border: `1px solid ${borderSoft}`,
+                        backgroundColor: "transparent",
+                        color: theme.colors.onSurface,
+                        cursor: "pointer",
+                        fontSize: 20,
+                        fontWeight: 700
+                      },
+                      children: "\xD7"
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { style: { padding: 24 }, children }),
+            footer ? /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 12,
+                  padding: "0 24px 24px",
+                  borderTop: `1px solid ${withAlpha4(theme.colors.onSurface, 0.06)}`
+                },
+                children: footer
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ComposableModal.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+var createModalSlotIds = (slotBaseId) => ({
+  header: `${slotBaseId}:modal-header`,
+  body: `${slotBaseId}:modal-body`,
+  footer: `${slotBaseId}:modal-footer`
+});
+function ComposableModal({
+  sdk,
+  isOpen,
+  onClose,
+  title,
+  description,
+  slotBaseId,
+  payload,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  isBusy = false,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  hideDefaultFooter = false,
+  maxWidth,
+  headerFallback,
+  footerFallback,
+  children
+}) {
+  const slotIds = createModalSlotIds(slotBaseId);
+  const context = useMemo3(
+    () => ({
+      title,
+      description,
+      payload,
+      close: onClose,
+      confirm: onConfirm,
+      confirmLabel,
+      cancelLabel,
+      isOpen,
+      isBusy
+    }),
+    [cancelLabel, confirmLabel, description, isBusy, isOpen, onClose, onConfirm, payload, title]
+  );
+  const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Button, { sdk, variant: "outline", tone: "neutral", onClick: onClose, disabled: isBusy, children: cancelLabel }),
+    onConfirm ? /* @__PURE__ */ jsx3(Button, { sdk, onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
+  ] });
+  const headerContent = /* @__PURE__ */ jsx3(SlotRenderer, { id: slotIds.header, sdk, context, children: headerFallback });
+  const bodyContent = /* @__PURE__ */ jsx3(SlotRenderer, { id: slotIds.body, sdk, context, children });
+  const footerContent = /* @__PURE__ */ jsx3(SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
+  return /* @__PURE__ */ jsx3(
+    Modal,
+    {
+      sdk,
+      isOpen,
+      onClose,
+      title,
+      description,
+      headerContent,
+      footer: footerContent,
+      maxWidth,
+      closeOnBackdrop,
+      closeOnEscape,
+      children: bodyContent
+    }
+  );
+}
+
+// src/components/Field.tsx
+import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
+function Field({
+  sdk,
+  label,
+  hint,
+  error,
+  htmlFor,
+  required = false,
+  children,
+  style
+}) {
+  const { theme, mutedText } = useUiKitTheme(sdk);
+  return /* @__PURE__ */ jsxs5(
+    "label",
+    {
+      htmlFor,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        width: "100%",
+        ...style
+      },
+      children: [
+        (label || hint) && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+          label ? /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              style: {
+                color: theme.colors.onSurface,
+                fontSize: 14,
+                fontWeight: 700,
+                letterSpacing: "0.01em"
+              },
+              children: [
+                label,
+                required ? /* @__PURE__ */ jsx4("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
+              ]
+            }
+          ) : null,
+          hint ? /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: mutedText,
+                fontSize: 13,
+                lineHeight: 1.45
+              },
+              children: hint
+            }
+          ) : null
+        ] }),
+        children,
+        error ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              color: theme.colors.negative,
+              fontSize: 13,
+              fontWeight: 600,
+              lineHeight: 1.45
+            },
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/Input.tsx
+import { withAlpha as withAlpha5 } from "smartsell-sales-sdk";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var getPadding = (size) => {
+  if (size === "sm") return "10px 12px";
+  if (size === "lg") return "16px 18px";
+  return "13px 16px";
+};
+function Input({
+  sdk,
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  id,
+  disabled,
+  style,
+  ...rest
+}) {
+  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
+  const inputStyle = {
+    width: "100%",
+    borderRadius: 16,
+    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
+    padding: getPadding(controlSize),
+    outline: "none",
+    color: theme.colors.onSurface,
+    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
+    boxShadow: error ? `0 0 0 3px ${withAlpha5(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
+    ...style
+  };
+  const input = /* @__PURE__ */ jsx5("input", { ...rest, id, disabled, style: inputStyle });
+  if (!label && !hint && !error) {
+    return input;
+  }
+  return /* @__PURE__ */ jsx5(Field, { sdk, label, hint, error, htmlFor: id, children: input });
+}
+
+// src/components/Select.tsx
+import { withAlpha as withAlpha6 } from "smartsell-sales-sdk";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var getPadding2 = (size) => {
+  if (size === "sm") return "10px 12px";
+  if (size === "lg") return "16px 18px";
+  return "13px 16px";
+};
+function Select({
+  sdk,
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  id,
+  disabled,
+  style,
+  children,
+  ...rest
+}) {
+  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
+  const selectStyle = {
+    width: "100%",
+    borderRadius: 16,
+    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
+    padding: getPadding2(controlSize),
+    outline: "none",
+    color: theme.colors.onSurface,
+    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
+    boxShadow: error ? `0 0 0 3px ${withAlpha6(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
+    transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
+    ...style
+  };
+  const select = /* @__PURE__ */ jsx6("select", { ...rest, id, disabled, style: selectStyle, children });
+  if (!label && !hint && !error) {
+    return select;
+  }
+  return /* @__PURE__ */ jsx6(Field, { sdk, label, hint, error, htmlFor: id, children: select });
+}
+
+// src/components/Textarea.tsx
+import { withAlpha as withAlpha7 } from "smartsell-sales-sdk";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var getPadding3 = (size) => {
+  if (size === "sm") return "10px 12px";
+  if (size === "lg") return "16px 18px";
+  return "13px 16px";
+};
+function Textarea({
+  sdk,
+  label,
+  hint,
+  error,
+  controlSize = "md",
+  id,
+  disabled,
+  style,
+  rows = 5,
+  ...rest
+}) {
+  const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
+  const textareaStyle = {
+    width: "100%",
+    borderRadius: 16,
+    border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
+    padding: getPadding3(controlSize),
+    outline: "none",
+    color: theme.colors.onSurface,
+    backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
+    boxShadow: error ? `0 0 0 3px ${withAlpha7(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
+  };
+  const textarea = /* @__PURE__ */ jsx7("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
+  if (!label && !hint && !error) {
+    return textarea;
+  }
+  return /* @__PURE__ */ jsx7(Field, { sdk, label, hint, error, htmlFor: id, children: textarea });
+}
+export {
+  Button,
+  Card,
+  ComposableModal,
+  Field,
+  Input,
+  Modal,
+  Select,
+  Textarea,
+  createModalSlotIds,
+  useUiKitTheme
+};
+//# sourceMappingURL=index.js.map