kupos-ui-components-lib 9.10.1 → 9.10.2

package/src/index.ts

@@ -25,6 +25,16 @@ import {
   ResponsiveFilterBar,
 } from "./components/FilterBar";
 
+// Import Survey components
+import {
+  SurveyDesktop,
+  SurveyMobile,
+  ResponsiveSurvey,
+} from "./components/Survey";
+
+// Import Modal components
+import { Modal, ModalHeader } from "./ui/Modal";
+
 export {
   ServiceItemDesktop,
   ServiceItemMobile,
@@ -46,6 +56,16 @@ export {
   FilterBarDesktop,
   FilterBarMobile,
   ResponsiveFilterBar,
+
+
+  //Survey components
+  SurveyDesktop,
+  SurveyMobile,
+  ResponsiveSurvey,
+
+  // Modal components
+  Modal,
+  ModalHeader,
 };
 
 // Also export types
@@ -54,3 +74,6 @@ export type { MobileServiceItemProps } from "./components/ServiceItem/mobileType
 export type { PaymentSideBarProps } from "./components/PaymentSideBar/types";
 export type { ServiceListProps } from "./components/ServiceList/types";
 export type { FilterBarProps } from "./components/FilterBar/tyoes";
+export type { SurveyProps } from "./components/Survey/types";
+export type { ModalProps, ModalVariant, ModalSize, ModalHeaderProps } from "./ui/Modal";
+

package/src/ui/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export interface BottomSheetProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  showHandle?: boolean;
+  showBackdrop?: boolean;
+  backdropColor?: string;
+  blurBackground?: boolean;
+  blurAmount?: string;
+  closeOnBackdrop?: boolean;
+  padding?: string | number;
+  maxHeight?: string;
+  borderRadius?: string;
+}
+
+const STYLE_ID = "__kupos_bottom_sheet_style__";
+
+const injectStyle = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    @keyframes __ks_slideUp {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes __ks_fadeIn {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    .__ks_sheet {
+      animation: __ks_slideUp 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
+    }
+    .__ks_backdrop {
+      animation: __ks_fadeIn 0.3s ease both;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+const BottomSheet = ({
+  isOpen,
+  onClose,
+  children,
+  showHandle = true,
+  showBackdrop = false,
+  backdropColor = "rgba(0,0,0,0.45)",
+  blurBackground = false,
+  blurAmount = "6px",
+  closeOnBackdrop = true,
+  padding = "20px 20px 32px",
+  maxHeight = "92vh",
+  borderRadius = "24px 24px 0 0",
+}: BottomSheetProps) => {
+  if (!isOpen) return null;
+
+  injectStyle();
+
+  const sheet = (
+    <>
+      {(showBackdrop || blurBackground) && (
+        <div
+          className="__ks_backdrop"
+          onClick={closeOnBackdrop ? onClose : undefined}
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9998,
+            backgroundColor: showBackdrop ? backdropColor : "rgba(0,0,0,0.4)",
+            backdropFilter: blurBackground ? `blur(${blurAmount})` : undefined,
+            WebkitBackdropFilter: blurBackground
+              ? `blur(${blurAmount})`
+              : undefined,
+          }}
+        />
+      )}
+
+      <div
+        className="__ks_sheet"
+        style={{
+          position: "fixed",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 9999,
+          background: "#FFFFFF",
+          maxHeight,
+          borderRadius,
+          overflowY: "auto",
+          boxSizing: "border-box" as const,
+          boxShadow: "0 -8px 40px rgba(0,0,0,0.15)",
+        }}
+      >
+        {showHandle && (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              padding: "12px 0 4px",
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 4,
+                borderRadius: 999,
+                backgroundColor: "#E5E7EB",
+              }}
+            />
+          </div>
+        )}
+
+        <div style={{ padding }}>{children}</div>
+      </div>
+    </>
+  );
+
+  if (typeof document !== "undefined") {
+    return ReactDOM.createPortal(sheet, document.body) as React.ReactElement;
+  }
+  return sheet;
+};
+
+export default BottomSheet;

package/src/ui/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from "./BottomSheet";
+export type { BottomSheetProps } from "./BottomSheet";

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export type ModalVariant = "center" | "bottom-sheet";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  variant?: ModalVariant;
+  size?: ModalSize;
+  closeOnBackdrop?: boolean;
+  padding?: string | number;
+  borderRadius?: string | number;
+  backdropColor?: string;
+  maxWidth?: number | string;
+}
+
+const SIZE_MAP: Record<ModalSize, number | string> = {
+  sm: 400,
+  md: 520,
+  lg: 640,
+  xl: 800,
+  full: "100%",
+};
+
+const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  variant = "center",
+  size = "md",
+  closeOnBackdrop = true,
+  padding = "28px 32px 24px",
+  borderRadius,
+  backdropColor = "rgba(0,0,0,0.45)",
+  maxWidth,
+}: ModalProps) => {
+  if (!isOpen) return null;
+
+  const resolvedMaxWidth = maxWidth ?? SIZE_MAP[size];
+  const resolvedRadius =
+    borderRadius ?? (variant === "bottom-sheet" ? "24px 24px 0 0" : 24);
+
+  const overlayStyle: React.CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+    display: "flex",
+    alignItems: variant === "bottom-sheet" ? "flex-end" : "center",
+    justifyContent: "center",
+    padding: variant === "bottom-sheet" ? 0 : 16,
+    backgroundColor: backdropColor,
+  };
+
+  const cardStyle: React.CSSProperties = {
+    background: "#FFFFFF",
+    width: "100%",
+    maxWidth: resolvedMaxWidth,
+    maxHeight: variant === "bottom-sheet" ? "92vh" : undefined,
+    borderRadius: resolvedRadius,
+    padding,
+    position: "relative",
+    boxSizing: "border-box",
+    overflowY: variant === "bottom-sheet" ? "auto" : undefined,
+  };
+
+  const modal = (
+    <div
+      style={overlayStyle}
+      onClick={closeOnBackdrop ? onClose : undefined}
+    >
+      <div
+        style={cardStyle}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  if (typeof document !== "undefined") {
+    return ReactDOM.createPortal(modal, document.body) as React.ReactElement;
+  }
+  return modal;
+};
+
+export default Modal;

package/src/ui/Modal/ModalHeader.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+export interface ModalHeaderProps {
+  title?: React.ReactNode;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+
+const ModalHeader = ({ title, onClose, children }: ModalHeaderProps) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 20,
+    }}
+  >
+    <div style={{ flex: 1 }}>
+      {title && (
+        <span
+          style={{
+            fontSize: "1rem",
+            fontWeight: 700,
+            color: "#111827",
+          }}
+        >
+          {title}
+        </span>
+      )}
+      {children}
+    </div>
+
+    {onClose && (
+      <button
+        onClick={onClose}
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: "50%",
+          background: "#F3F4F6",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 14,
+          color: "#6B7280",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          marginLeft: 12,
+        }}
+      >
+        ✕
+      </button>
+    )}
+  </div>
+);
+
+export default ModalHeader;

package/src/ui/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as Modal } from "./Modal";
+export { default as ModalHeader } from "./ModalHeader";
+export type { ModalProps, ModalVariant, ModalSize } from "./Modal";
+export type { ModalHeaderProps } from "./ModalHeader";

package/src/ui/Survey/FeedbackBanner.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { FeedbackConfig } from "./constants";
+
+interface FeedbackBannerProps {
+  config: FeedbackConfig | null;
+}
+
+const FeedbackBanner = ({ config }: FeedbackBannerProps) => {
+  if (!config) return null;
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        borderRadius: 20,
+        padding: "12px 16px",
+        marginTop: 16,
+        backgroundColor: config.bannerBg,
+      }}
+    >
+      <span style={{ fontSize: 22 }}>{config.emoji}</span>
+      <span
+        style={{
+          fontWeight: 600,
+          fontSize: "13.33px",
+          color: config.bannerText,
+        }}
+      >
+        {config.message}
+      </span>
+    </div>
+  );
+};
+
+export default FeedbackBanner;

package/src/ui/Survey/FeedbackTextarea.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { FeedbackConfig, MAX_CHARS } from "./constants";
+
+interface FeedbackTextareaProps {
+  config: FeedbackConfig | null;
+  feedback: string;
+  onFeedbackChange?: (text: string) => void;
+  colors?: {
+    primaryColor?: string;
+  };
+}
+
+const FeedbackTextarea = ({
+  config,
+  feedback,
+  onFeedbackChange,
+  colors,
+}: FeedbackTextareaProps) => {
+  if (!config) return null;
+  return (
+    <div style={{ position: "relative", marginTop: 42 }}>
+      <span
+        style={{
+          position: "absolute",
+          left: 16,
+          top: -10,
+          background: "#FFFFFF",
+          padding: "0 8px",
+          fontSize: "13.33px",
+          fontWeight: 600,
+          color: colors?.primaryColor || "#374151",
+          zIndex: 1,
+        }}
+      >
+        {config.question}
+      </span>
+
+      <div
+        style={{
+          border: "1.5px solid #E5E7EB",
+          borderRadius: 16,
+          overflow: "hidden",
+          position: "relative",
+          background: "transparent",
+        }}
+      >
+        <textarea
+          value={feedback}
+          onChange={(e) => {
+            if (e.target.value.length <= MAX_CHARS)
+              onFeedbackChange?.(e.target.value);
+          }}
+          placeholder="Déjanos tus comentarios (opcional)"
+          rows={4}
+          style={{
+            width: "100%",
+            padding: "16px 16px 28px",
+            background: "transparent",
+            color: "#374151",
+            fontSize: "13.33px",
+            resize: "none",
+            outline: "none",
+            border: "none",
+            boxSizing: "border-box" as const,
+            fontFamily: "inherit",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 8,
+            right: 16,
+            fontSize: 12,
+            color: "#9CA3AF",
+          }}
+        >
+          {feedback.length}/{MAX_CHARS}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackTextarea;

package/src/ui/Survey/HeartIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const HeartIcon = () => (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#22c55e"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+  </svg>
+);
+
+export default HeartIcon;

package/src/ui/Survey/ScoreButtons.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { getZoneColor, getZoneShadow } from "./constants";
+
+interface ScoreButtonsProps {
+  selectedScore?: number | null;
+  onScoreChange?: (score: number) => void;
+  buttonHeight?: number;
+  fontSize?: number;
+  gap?: number;
+  colors?: {
+    secondaryColor?: string;
+    primaryColor?: string;
+  };
+}
+
+const ScoreButtons = ({
+  selectedScore,
+  onScoreChange,
+  buttonHeight = 54,
+  fontSize = 15,
+  gap = 8,
+  colors,
+}: ScoreButtonsProps) => (
+  <div style={{ marginBottom: 4 }}>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(10, 1fr)",
+        gap,
+      }}
+    >
+      {Array.from({ length: 10 }, (_, i) => i + 1).map((num) => {
+        const isSelected = selectedScore === num;
+        const zoneColor = getZoneColor(num);
+        const activeColor = colors?.secondaryColor || zoneColor;
+        return (
+          <button
+            key={num}
+            onClick={() => onScoreChange?.(num)}
+            onMouseEnter={(e) => {
+              if (!isSelected) {
+                e.currentTarget.style.borderColor = activeColor;
+                e.currentTarget.style.color = activeColor;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isSelected) {
+                e.currentTarget.style.borderColor = "#E5E7EB";
+                e.currentTarget.style.color = "#111827";
+              }
+            }}
+            style={{
+              height: buttonHeight,
+              borderRadius: 10,
+              fontSize,
+              border: isSelected ? "none" : "1px solid #E5E7EB",
+              background: isSelected ? activeColor : "#FFFFFF",
+              color: isSelected ? "#FFFFFF" : "#111827",
+              cursor: "pointer",
+              transition: "border-color 0.15s, color 0.15s, background 0.15s",
+              boxShadow: isSelected
+                ? colors?.secondaryColor
+                  ? `0 2px 8px ${colors.secondaryColor}58`
+                  : getZoneShadow(num)
+                : "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxSizing: "border-box" as const,
+            }}
+          >
+            {num}
+          </button>
+        );
+      })}
+    </div>
+
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: 8,
+      }}
+    >
+      <span style={{ fontSize: 12, color: "#9CA3AF" }}>Poco probable</span>
+      <span style={{ fontSize: 12, color: "#9CA3AF" }}>Muy probable</span>
+    </div>
+  </div>
+);
+
+export default ScoreButtons;

package/src/ui/Survey/SurveyFooter.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { BRAND } from "./constants";
+
+interface SurveyFooterProps {
+  selectedScore?: number | null;
+  onSkip?: () => void;
+  onSubmit: () => void;
+  layout?: "inline" | "stacked";
+  colors?: {
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    primaryColor?: string;
+  };
+}
+
+const SurveyFooter = ({
+  selectedScore,
+  onSkip,
+  onSubmit,
+  layout = "inline",
+  colors,
+}: SurveyFooterProps) => {
+  if (layout === "stacked") {
+    return (
+      <div style={{ marginTop: 24 }}>
+        <button
+          onClick={onSkip}
+          style={{
+            display: "block",
+            width: "100%",
+            textAlign: "center",
+            fontSize: "13.33px",
+            color: "#6B7280",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "0 0 14px",
+          }}
+        >
+          Saltar por ahora
+        </button>
+
+        <button
+          onClick={onSubmit}
+          disabled={selectedScore == null}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            width: "100%",
+            padding: "16px",
+            borderRadius: 999,
+            fontSize: "13.33px",
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase" as const,
+            border: "none",
+            cursor: selectedScore != null ? "pointer" : "not-allowed",
+            background:
+              selectedScore != null
+                ? colors?.secondaryColor
+                : "rgba(232,76,13,0.28)",
+            color: "#FFFFFF",
+            transition: "background 0.15s",
+          }}
+        >
+          Enviar comentarios <span>→</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginTop: 24,
+        }}
+      >
+        <button
+          onClick={onSkip}
+          style={{
+            fontSize: "13.33px",
+            color: "#6B7280",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: 0,
+          }}
+        >
+          Saltar por ahora
+        </button>
+
+        <button
+          onClick={onSubmit}
+          disabled={selectedScore == null}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "14px 28px",
+            borderRadius: 999,
+            fontSize: "13.33px",
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase" as const,
+            border: "none",
+            cursor: selectedScore != null ? "pointer" : "not-allowed",
+            background:
+              selectedScore != null
+                ? colors?.secondaryColor
+                : "rgba(232,76,13,0.28)",
+            color: "#FFFFFF",
+            transition: "background 0.15s",
+            minWidth: 160,
+            justifyContent: "center",
+          }}
+        >
+          Enviar comentarios <span>→</span>
+        </button>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          marginTop: 14,
+          fontSize: 12,
+          color: "#9CA3AF",
+        }}
+      >
+        <span>🔒</span>
+        <span>Anónimo · solo se usa para mejorar el servicio</span>
+      </div>
+    </>
+  );
+};
+
+export default SurveyFooter;