@startsimpli/funnels 0.1.2

package/dist/components/index.css

@@ -0,0 +1,198 @@
+/* src/components/FunnelVisualFlow/FunnelVisualFlow.css */
+.funnel-visual-flow {
+  position: relative;
+  width: 100%;
+  background: #f9fafb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.funnel-visual-flow-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+}
+.empty-state {
+  text-align: center;
+  padding: 32px;
+}
+.stage-node {
+  padding: 16px;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-width: 220px;
+  max-width: 280px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.stage-node:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+.stage-node:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+.stage-number {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+.stage-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stage-rules {
+  font-size: 13px;
+  color: #6b7280;
+  margin-bottom: 6px;
+}
+.stage-action {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.stage-stats {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.stat-label {
+  color: #6b7280;
+  font-weight: 500;
+}
+.stat-value {
+  font-weight: 600;
+  color: #111827;
+}
+.stage-description {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #9ca3af;
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flow-legend-panel {
+  background: transparent;
+  border: none;
+}
+.flow-legend {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 12px;
+  min-width: 140px;
+}
+.legend-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 8px;
+}
+.legend-toggle:hover {
+  opacity: 0.8;
+}
+.legend-toggle:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.legend-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+.legend-chevron {
+  transition: transform 0.2s ease;
+  color: #6b7280;
+}
+.legend-chevron.expanded {
+  transform: rotate(180deg);
+}
+.legend-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.legend-label {
+  font-size: 12px;
+  color: #4b5563;
+  font-weight: 500;
+}
+.react-flow__edge-path {
+  stroke-width: 2;
+}
+.react-flow__edge-text {
+  font-size: 12px;
+  font-weight: 600;
+}
+.react-flow__controls {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.react-flow__controls-button {
+  border-bottom: 1px solid #e5e7eb;
+}
+.react-flow__controls-button:hover {
+  background: #f3f4f6;
+}
+.react-flow__background {
+  background-color: #f9fafb;
+}
+.react-flow__attribution {
+  opacity: 0.5;
+  font-size: 10px;
+}
+@media (max-width: 640px) {
+  .stage-node {
+    min-width: 180px;
+    max-width: 220px;
+    padding: 12px;
+  }
+  .stage-number {
+    font-size: 24px;
+  }
+  .stage-name {
+    font-size: 14px;
+  }
+  .flow-legend {
+    min-width: 120px;
+    padding: 8px;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FunnelVisualFlow/FunnelVisualFlow.css"],"sourcesContent":["/**\n * FunnelVisualFlow Styles\n *\n * Design System:\n * - Uses Tailwind-like utility values\n * - Consistent spacing (4px grid)\n * - Clean, minimal aesthetic\n * - Smooth transitions\n */\n\n/* =============================================================================\n * Flow Container\n * ============================================================================= */\n\n.funnel-visual-flow {\n  position: relative;\n  width: 100%;\n  background: #f9fafb; /* gray-50 */\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.funnel-visual-flow-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #f9fafb;\n  border: 2px dashed #d1d5db; /* gray-300 */\n  border-radius: 8px;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 32px;\n}\n\n/* =============================================================================\n * Stage Node\n * ============================================================================= */\n\n.stage-node {\n  padding: 16px;\n  border-radius: 8px;\n  background: white;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  min-width: 220px;\n  max-width: 280px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.stage-node:hover {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n  transform: translateY(-2px);\n}\n\n.stage-node:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\n}\n\n/* Stage number (circled number) */\n.stage-number {\n  font-size: 28px;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 8px;\n}\n\n/* Stage name */\n.stage-name {\n  font-size: 16px;\n  font-weight: 600;\n  color: #111827; /* gray-900 */\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Rule count */\n.stage-rules {\n  font-size: 13px;\n  color: #6b7280; /* gray-500 */\n  margin-bottom: 6px;\n}\n\n/* Action label */\n.stage-action {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n\n/* Stats section */\n.stage-stats {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid #e5e7eb; /* gray-200 */\n}\n\n.stat-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.stat-label {\n  color: #6b7280; /* gray-500 */\n  font-weight: 500;\n}\n\n.stat-value {\n  font-weight: 600;\n  color: #111827; /* gray-900 */\n}\n\n/* Description (if shown) */\n.stage-description {\n  margin-top: 8px;\n  font-size: 12px;\n  color: #9ca3af; /* gray-400 */\n  font-style: italic;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* =============================================================================\n * Flow Legend\n * ============================================================================= */\n\n.flow-legend-panel {\n  background: transparent;\n  border: none;\n}\n\n.flow-legend {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  padding: 12px;\n  min-width: 140px;\n}\n\n.legend-toggle {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin-bottom: 8px;\n}\n\n.legend-toggle:hover {\n  opacity: 0.8;\n}\n\n.legend-toggle:focus {\n  outline: 2px solid #3b82f6;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n.legend-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151; /* gray-700 */\n}\n\n.legend-chevron {\n  transition: transform 0.2s ease;\n  color: #6b7280; /* gray-500 */\n}\n\n.legend-chevron.expanded {\n  transform: rotate(180deg);\n}\n\n.legend-items {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.legend-label {\n  font-size: 12px;\n  color: #4b5563; /* gray-600 */\n  font-weight: 500;\n}\n\n/* =============================================================================\n * React Flow Overrides\n * ============================================================================= */\n\n/* Make edges more visible */\n.react-flow__edge-path {\n  stroke-width: 2;\n}\n\n/* Edge labels */\n.react-flow__edge-text {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Controls */\n.react-flow__controls {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.react-flow__controls-button {\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.react-flow__controls-button:hover {\n  background: #f3f4f6;\n}\n\n/* Background */\n.react-flow__background {\n  background-color: #f9fafb;\n}\n\n/* Attribution */\n.react-flow__attribution {\n  opacity: 0.5;\n  font-size: 10px;\n}\n\n/* =============================================================================\n * Responsive Design\n * ============================================================================= */\n\n@media (max-width: 640px) {\n  .stage-node {\n    min-width: 180px;\n    max-width: 220px;\n    padding: 12px;\n  }\n\n  .stage-number {\n    font-size: 24px;\n  }\n\n  .stage-name {\n    font-size: 14px;\n  }\n\n  .flow-legend {\n    min-width: 120px;\n    padding: 8px;\n  }\n}\n"],"mappings":"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","names":[]}