@magicfeedback/native 2.1.7-alpha.8 → 2.2.0-alpha.0

package/dist/styles/magicfeedback-default.css

@@ -3,29 +3,35 @@
  * Clean, minimal, and elegant survey rendering
  */
 
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
+
 /* ========================================
    CSS VARIABLES - Design SYSTEM
    ======================================== */
 :root {
-    /* Colors - Neutral Palette */
-    --mf-primary: #2563eb;
-    --mf-primary-hover: #1d4ed8;
-    --mf-primary-light: #dbeafe;
+    /* Colors - Minimal Pastel */
+    --mf-primary: #1E293B;
+    --mf-primary-hover: #0F172A;
+    --mf-primary-light: #E2E8F0;
+
+    --mf-text-primary: #1E293B;
+    --mf-text-secondary: #475569;
+    --mf-text-muted: #94A3B8;
 
-    --mf-text-primary: #0f172a;
-    --mf-text-secondary: #64748b;
-    --mf-text-muted: #94a3b8;
+    --mf-bg-primary: #F8FAFC;
+    --mf-bg-secondary: #FFFFFF;
+    --mf-bg-hover: #EEF2F6;
 
-    --mf-bg-primary: #ffffff;
-    --mf-bg-secondary: #f8fafc;
-    --mf-bg-hover: #f1f5f9;
+    --mf-border: #E2E8F0;
+    --mf-border-focus: #1E293B;
 
-    --mf-border: #e2e8f0;
-    --mf-border-focus: #2563eb;
+    --mf-success: #16A34A;
+    --mf-error: #EF4444;
+    --mf-warning: #F59E0B;
 
-    --mf-success: #10b981;
-    --mf-error: #ef4444;
-    --mf-warning: #f59e0b;
+    --mf-surface: #FFFFFF;
+    --mf-surface-alt: #F1F5F9;
+    --mf-accent: #38BDF8;
 
     /* Spacing */
     --mf-space-xs: 0.25rem;
@@ -35,25 +41,33 @@
     --mf-space-xl: 1.5rem;
 
     /* Border Radius */
-    --mf-radius-sm: 0.375rem;
-    --mf-radius-md: 0.5rem;
-    --mf-radius-lg: 0.75rem;
+    --mf-radius-sm: 0.5rem;
+    --mf-radius-md: 0.75rem;
+    --mf-radius-lg: 1.25rem;
     --mf-radius-full: 9999px;
 
     /* Shadows */
-    --mf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --mf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --mf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --mf-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    --mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
+    --mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
+    --mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
+    --mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
+    --mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
 
     /* Typography */
-    --mf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
+    --mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
     --mf-font-size-sm: 0.875rem;
     --mf-font-size-base: 1rem;
     --mf-font-size-lg: 1.125rem;
     --mf-font-size-xl: 1.25rem;
     --mf-line-height: 1.6;
 
+    /* Font Weights */
+    --mf-font-weight-normal: 400;
+    --mf-font-weight-medium: 500;
+    --mf-font-weight-semibold: 600;
+    --mf-font-weight-bold: 700;
+    --mf-font-weight-extrabold: 800;
+
     /* Transitions */
     --mf-transition: all 0.2s ease;
     --mf-transition-fast: all 0.15s ease;
@@ -109,11 +123,11 @@
    BASE CONTAINER
    ======================================== */
 .magicfeedback-container {
-    width: 100%;
     font-family: var(--mf-font-sans), sans-serif;
     color: var(--mf-text-primary);
     line-height: var(--mf-line-height);
     animation: mf-fade-in 0.4s ease-out;
+    border-radius: var(--mf-radius-lg);
 }
 
 /* ========================================
@@ -125,7 +139,9 @@
     padding: var(--mf-space-lg);
     margin: var(--mf-space-lg) 0;
     border-radius: var(--mf-radius-lg);
-    background: var(--mf-bg-secondary);
+    background: var(--mf-surface-alt);
+    border: 1px solid var(--mf-border);
+    box-shadow: var(--mf-shadow-sm);
     animation: mf-scale-in 0.3s ease-out;
 }
 
@@ -164,7 +180,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--mf-space-lg);
-    width: 100%;
+    background: var(--mf-surface);
+    padding: clamp(16px, 2.5vw, 28px);
+    border: 1px solid var(--mf-border);
+    border-radius: var(--mf-radius-lg);
 }
 
 .magicfeedback-questions {
@@ -178,8 +197,9 @@
     display: flex;
     flex-direction: column;
     gap: var(--mf-space-sm);
-    width: 100%;
     animation: mf-slide-in 0.3s ease-out;
+    background: var(--mf-bg-secondary);
+    border-radius: var(--mf-radius-md);
 }
 
 /* ========================================
@@ -187,11 +207,18 @@
    ======================================== */
 .magicfeedback-label {
     font-size: var(--mf-font-size-lg);
-    font-weight: 500;
+    font-weight: var(--mf-font-weight-bold);
     color: var(--mf-text-primary);
     line-height: var(--mf-line-height);
-    margin: 0 0 var(--mf-space-md) 0;
     text-align: left;
+    letter-spacing: -0.01em;
+}
+
+.magicfeedback-sublabel {
+    font-size: var(--mf-font-size-base);
+    font-weight: var(--mf-font-weight-normal);
+    color: var(--mf-text-secondary);
+    margin-bottom: var(--mf-space-sm);
 }
 
 h2 {
@@ -219,18 +246,18 @@ input[type="email"],
 input[type="password"],
 textarea,
 select {
-    width: auto;
-    padding: var(--mf-space-sm) var(--mf-space-md);
+    padding: 0.75rem 0.9rem;
     font-size: var(--mf-font-size-base);
     font-family: inherit;
     color: var(--mf-text-primary);
-    background-color: var(--mf-bg-primary);
-    border: 1.5px solid var(--mf-border);
+    background-color: var(--mf-surface);
+    border: 2px solid var(--mf-border);
     border-radius: var(--mf-radius-md);
     outline: none;
     transition: var(--mf-transition);
     -webkit-appearance: none;
     appearance: none;
+    box-shadow: var(--mf-shadow-sm);
 }
 
 textarea {
@@ -238,13 +265,6 @@ textarea {
     resize: vertical;
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-    border-color: var(--mf-border-focus);
-    box-shadow: var(--mf-shadow-focus);
-}
-
 input::placeholder,
 textarea::placeholder {
     color: var(--mf-text-muted);
@@ -373,6 +393,8 @@ textarea.error {
     cursor: pointer;
     transition: var(--mf-transition-fast);
     margin: 0;
+    width: -webkit-fill-available;
+    height: inherit;
 }
 
 .magicfeedback-boolean-option label:hover {
@@ -683,7 +705,7 @@ textarea.error {
     background-color: var(--mf-bg-primary);
     border: 1.5px solid var(--mf-border);
     border-radius: var(--mf-radius-md);
-    min-height: 60px;
+    min-height: 45px;
 }
 
 .magicfeedback-point-system-item label {
@@ -724,7 +746,8 @@ textarea.error {
    ======================================== */
 .magicfeedback-consent-container {
     display: flex;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
     gap: var(--mf-space-sm);
     padding: var(--mf-space-md);
     background-color: var(--mf-bg-secondary);
@@ -745,6 +768,7 @@ textarea.error {
     color: var(--mf-text-secondary);
     line-height: var(--mf-line-height);
     cursor: pointer;
+    margin-bottom: 0;
 }
 
 /* ========================================
@@ -761,22 +785,22 @@ textarea.error {
 }
 
 .magicfeedback-submit {
-    padding: var(--mf-space-sm) var(--mf-space-xl);
+    padding: 0.8rem 1.6rem;
     font-size: var(--mf-font-size-base);
-    font-weight: 500;
-    color: white;
+    font-weight: 800;
+    color: #FFFFFF;
     background-color: var(--mf-primary);
-    border: none;
-    border-radius: var(--mf-radius-md);
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
     cursor: pointer;
     transition: var(--mf-transition-fast);
-    box-shadow: var(--mf-shadow-sm);
+    box-shadow: var(--mf-shadow-md);
 }
 
 .magicfeedback-submit:hover {
     background-color: var(--mf-primary-hover);
-    box-shadow: var(--mf-shadow-md);
-    transform: translateY(-1px);
+    box-shadow: var(--mf-shadow-lg);
+    transform: translateY(-2px);
 }
 
 .magicfeedback-submit:active {
@@ -791,18 +815,20 @@ textarea.error {
 }
 
 .magicfeedback-back {
-    padding: var(--mf-space-sm) var(--mf-space-md);
+    padding: 0.65rem 1rem;
     font-size: var(--mf-font-size-base);
-    font-weight: 500;
-    color: var(--mf-text-secondary);
-    background-color: transparent;
-    border: none;
+    font-weight: 700;
+    color: var(--mf-primary);
+    background-color: var(--mf-bg-secondary);
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
     cursor: pointer;
     transition: var(--mf-transition-fast);
 }
 
 .magicfeedback-back:hover {
-    color: var(--mf-primary);
+    border-color: var(--mf-primary);
+    background-color: var(--mf-bg-hover);
 }
 
 /* ========================================
@@ -845,143 +871,154 @@ textarea.error {
    ======================================== */
 /* Modal backdrop */
 .magicfeedback-modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0,0,0,0.4);
-  display: none; /* toggled to flex when open */
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.4);
+    display: none; /* toggled to flex when open */
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
 }
 
 /* Modal container */
 .magicfeedback-modal {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-  max-width: 520px;
-  width: 90%;
-  max-height: 80vh;
-  overflow: auto;
-  padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    max-width: 520px;
+    width: 90%;
+    max-height: 80vh;
+    overflow: auto;
+    padding: 16px;
 }
 
 /* Modal actions */
 .magicfeedback-modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
 }
 
 .magicfeedback-modal-counter {
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  color: #444;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #444;
 }
 
 /* Modal list */
 .magicfeedback-modal-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
 .magicfeedback-modal-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
 }
 
 /* Priority list header */
 .magicfeedback-priority-list-header {
-  display: flex;
-    flex-direction: row-reverse;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
 }
 
 .magicfeedback-priority-list-reorder {
-  margin-top: 8px;
+    margin-top: 8px;
 }
 
 .magicfeedback-priority-list-list {
-  padding: 0;
-  list-style: none;
+    padding: 0;
+    list-style: none;
 }
 
 .magicfeedback-priority-list-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 5px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 0;
 }
 
 .magicfeedback-priority-list-item-label {
-  font-size: 15px;
+    font-size: 15px;
 }
 
 .magicfeedback-priority-list-arrows {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
 
 /* Buttons */
 .magicfeedback-button {
-  appearance: none;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  background: #f7f7f7;
-  color: #222;
-  padding: 8px 12px;
-  font-size: 14px;
-  cursor: pointer;
+    appearance: none;
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-text-primary);
+    padding: 0.6rem 1rem;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-sm);
 }
+
 .magicfeedback-button:hover {
-  background: #efefef;
+    background: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
 }
+
 .magicfeedback-button:active {
-  background: #e8e8e8;
+    transform: translateY(1px);
 }
+
 .magicfeedback-button-primary {
-  border-color: #2e6bf7;
-  background: #2e6bf7;
-  color: #fff;
+    border-color: var(--mf-primary);
+    background: var(--mf-primary);
+    color: #fff;
+    box-shadow: var(--mf-shadow-md);
 }
+
 .magicfeedback-button-primary:hover {
-  background: #255bd6;
+    background: var(--mf-primary-hover);
 }
+
 .magicfeedback-button-primary:active {
-  background: #1f4fb5;
+    background: var(--mf-primary-hover);
 }
 
 /* Warning flash */
 .magicfeedback-warning {
-  color: #C70039;
+    color: #C70039;
 }
 
 /* Start message button */
 .magicfeedback-start-message-button {
-  appearance: none;
-  border: 1px solid #2e6bf7;
-  border-radius: 6px;
-  background: #2e6bf7;
-  color: #fff;
-  padding: 10px 16px;
-  font-size: 15px;
-  cursor: pointer;
+    appearance: none;
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+    color: #fff;
+    padding: 0.8rem 1.4rem;
+    font-size: 15px;
+    font-weight: 800;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-md);
 }
+
 .magicfeedback-start-message-button:hover {
-  background: #255bd6;
+    background: var(--mf-primary-hover);
 }
 
 /* ========================================
@@ -993,12 +1030,64 @@ textarea.error {
         --mf-space-xl: 1.5rem;
     }
 
+    .magicfeedback-container {
+        padding: 12px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-form {
+        padding: 14px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-div {
+        padding: 12px;
+        gap: var(--mf-space-lg)
+    }
+
     .magicfeedback-label {
         font-size: var(--mf-font-size-base);
     }
 
+    input[type="date"],
+    input[type="text"],
+    input[type="number"],
+    input[type="email"],
+    input[type="password"],
+    textarea,
+    select {
+        padding: 0.85rem 0.95rem;
+        font-size: 1rem;
+        min-height: 46px;
+    }
+
+    /*
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container,
+    .magicfeedback-boolean-container,
+    .magicfeedback-consent-container {
+        width: 100%;
+    }
+    */
+
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container {
+        padding: 10px 12px;
+        border-radius: var(--mf-radius-md);
+        background: var(--mf-surface-alt);
+        border: 1px solid var(--mf-border);
+        gap: 10px;
+    }
+
+    .magicfeedback-rating-container,
+    .magicfeedback-rating-number-container,
+    .magicfeedback-rating-star-container {
+        gap: 10px;
+    }
+
     .magicfeedback-boolean-container {
         flex-direction: column;
+        gap: 10px;
     }
 
     .magicfeedback-rating-number-container {
@@ -1017,6 +1106,7 @@ textarea.error {
     .magicfeedback-back {
         width: 100%;
         text-align: center;
+        min-height: 48px;
     }
 }
 
@@ -1033,11 +1123,6 @@ textarea.error {
     }
 }
 
-/* Focus visible for keyboard navigation */
-*:focus-visible {
-    outline: 2px solid var(--mf-primary);
-    outline-offset: 2px;
-}
 
 /* ========================================
    UTILITY CLASSES
@@ -1055,18 +1140,19 @@ textarea.error {
 }
 
 .magicfeedback-modal-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: transparent;
-  border: none;
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-  color: #666;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: transparent;
+    border: none;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    color: #666;
 }
+
 .magicfeedback-modal-close:hover,
 .magicfeedback-modal-close:focus {
-  color: #000;
-  outline: none;
-}
+    color: #000;
+    outline: none;
+}

package/dist/types/src/models/pageGraphs.d.ts

@@ -0,0 +1,52 @@
+import { Page } from "./page";
+import { PageNode } from "./pageNode";
+import { NativeAnswer } from "./types";
+export declare class PageGraph {
+    private nodes;
+    constructor(pages: Page[]);
+    /**
+     * Build the graph from the list of pages
+     * @param pages
+     * @private
+     * */
+    private buildGraph;
+    getNodeById(id: string): PageNode | undefined;
+    /**
+     * Get the next page position of the graph given the current page and the answer
+     * @param node
+     */
+    getNextEdgeByDefault(node: PageNode): string | undefined;
+    /**
+     * Get the first page of the graph
+     * @returns first page
+     **/
+    getFirstPage(): PageNode | undefined;
+    /**
+     * Get the next page of the graph given the current page and the answer
+     * @param currentNode
+     * @param answer - answer to the question in the current page
+     * @returns page
+     **/
+    getNextPage(currentNode: PageNode, answer: NativeAnswer[]): PageNode | undefined;
+    /**
+     * Get the number deep (DFS) of this node
+     * @param id - node id
+     * @returns DFS number
+     */
+    findDepth(id: string): number;
+    /**
+     * Get the max depth of the graph
+     * @param n - node
+     * @returns max depth
+     */
+    findMaxDepth(n?: PageNode): number;
+    /**
+     * A function used by DFS
+     * @param v - node
+     * @param visited - set of visited nodes
+     * @param depth - current depth
+     */
+    DFSUtil(v: PageNode, visited: Set<PageNode>, depth: number): number;
+    private parseMatrixAnswer;
+    private evaluateMatrixCondition;
+}