flet-box 0.0.0-stage → 1.0.2

package/src/widgets/SnackBar.js

@@ -0,0 +1,227 @@
+/**
+ * @file SnackBar.js
+ * @description Transient toast controller returned to callers (`show`/`close`).
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { border } from "../tools/index.js";
+import { colors } from "../utils/themes.js";
+
+// Fallback colors (if the theme is not initialized yet)
+const FALLBACK = {
+  gray800: "#1e293b",
+  primary: "#6366f1",
+  success: "#10b981",
+  danger: "#ef4444",
+  warning: "#f59e0b",
+  info: "#3b82f6",
+  gray900: "#0f172a",
+  white: "#ffffff",
+};
+
+// Safe function to get theme color
+const getThemeColor = (name, fallback) => {
+  try {
+    return (colors && colors[name]) || fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+/**
+ * SnackBar - Notificación temporal
+ * @param {Object} options
+ * @returns {Object} { close, show, getElement }
+ */
+export function SnackBar(options) {
+  const {
+    message,
+    action,
+    onAction,
+    duration = 3000,
+    type = "normal", // 'normal', 'success', 'error', 'warning', 'info'
+    position = "bottom", // 'bottom', 'top'
+    backgroundColor: customBg,
+    textColor: customText,
+    actionColor: customAction,
+    dismissible = false,
+    borderRadius = 16,
+    padding = "12px 16px",
+    margin = 16,
+    elevation = 2,
+    animationDuration = 300,
+    zIndex = 10000,
+    onShow,
+    onClose,
+  } = options;
+
+  // Presets using theme colors (with fallback)
+  const presets = {
+    normal: {
+      bg: colors.surface,
+      text: colors.text,
+      action: colors.primary,
+    },
+    success: {
+      bg: colors.success,
+      text: colors.text,
+      action: colors.primary,
+    },
+    error: {
+      bg: colors.danger,
+      text: colors.text,
+      action: colors.primary,
+    },
+    warning: {
+      bg: colors.warning,
+      text: colors.text,
+      action: getThemeColor("gray900", FALLBACK.gray900),
+    },
+    info: {
+      bg: colors.info,
+      text: colors.text,
+      action: FALLBACK.white,
+    },
+  };
+
+  const preset = presets[type] || presets.normal;
+  const finalBg = customBg || preset.bg;
+  const finalText = customText || preset.text;
+  const finalAction = customAction || preset.action;
+
+  // Createste main container
+  const snackbar = WidgetFactory({
+    tag: "div",
+    position: "fixed",
+    left: `${margin}px`,
+    // borderRadius: borderRadius,
+    right: `${margin}px`,
+    [position]: `${margin}px`,
+    backgroundColor: finalBg,
+    borderRadius:
+      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+    padding: padding,
+    border: border(1, "solid", colors.gray100),
+    zIndex: zIndex,
+    boxShadow:
+      elevation === 0
+        ? "none"
+        : `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.15)`,
+    opacity: 0,
+    transform:
+      position === "bottom"
+        ? `translateY(calc(100% + ${margin}px))`
+        : `translateY(calc(-100% - ${margin}px))`,
+    transition: `opacity ${animationDuration}ms ease, transform ${animationDuration}ms ease`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 16,
+    fontSize: 14,
+    lineHeight: "1.4",
+    color: finalText,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    flexWrap: "wrap",
+  });
+
+  let timeoutId = null;
+
+  const show = () => {
+    requestAnimationFrame(() => {
+      snackbar.style.opacity = "1";
+      snackbar.style.transform = "translateY(0)";
+    });
+    if (onShow) onShow();
+  };
+
+  const close = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    snackbar.style.opacity = "0";
+    snackbar.style.transform =
+      position === "bottom"
+        ? `translateY(calc(100% + ${margin}px))`
+        : `translateY(calc(-100% - ${margin}px))`;
+    setTimeout(() => {
+      if (snackbar.parentNode) snackbar.parentNode.removeChild(snackbar);
+      if (onClose) onClose();
+    }, animationDuration);
+  };
+
+  // Message
+  const messageEl = WidgetFactory({
+    tag: "span",
+    flex: 1,
+    text: message,
+    wordBreak: "break-word",
+  });
+  snackbar.appendChild(messageEl);
+
+  // Action button
+  let actionBtn = null;
+  if (action) {
+    actionBtn = WidgetFactory({
+      tag: "button",
+      backgroundColor: "transparent",
+      border: "none",
+      color: finalAction,
+      fontSize: 14,
+      fontWeight: 500,
+      cursor: "pointer",
+      padding: "4px 8px",
+      margin: "-4px -8px -4px 0",
+      borderRadius: 4,
+      transition: "opacity 0.2s ease",
+      textContent: action,
+      onclick: () => {
+        if (onAction) onAction();
+        close();
+      },
+    });
+    actionBtn.addEventListener("mouseenter", () => {
+      actionBtn.style.opacity = "0.8";
+    });
+    actionBtn.addEventListener("mouseleave", () => {
+      actionBtn.style.opacity = "1";
+    });
+    snackbar.appendChild(actionBtn);
+  }
+
+  // Close button (if dismissible and no action)
+  let closeBtn = null;
+  if (dismissible && !action) {
+    closeBtn = WidgetFactory({
+      tag: "button",
+      backgroundColor: "transparent",
+      border: "none",
+      color: finalText,
+      fontSize: "18px",
+      cursor: "pointer",
+      padding: "0 4px",
+      margin: "-4px 0 -4px 8px",
+      opacity: 0.7,
+      transition: "opacity 0.2s ease",
+      textContent: "✕",
+      onclick: close,
+    });
+    closeBtn.addEventListener("mouseenter", () => {
+      closeBtn.style.opacity = "1";
+    });
+    closeBtn.addEventListener("mouseleave", () => {
+      closeBtn.style.opacity = "0.7";
+    });
+    snackbar.appendChild(closeBtn);
+  }
+
+  // Add to DOM
+  document.body.appendChild(snackbar);
+  // Force reflow
+  snackbar.offsetHeight;
+
+  show();
+  if (duration > 0) {
+    timeoutId = setTimeout(close, duration);
+  }
+
+  return { close, show, getElement: () => snackbar };
+}
+
+export default SnackBar;

package/src/widgets/Stack.js

@@ -0,0 +1,29 @@
+/**
+ * @file Stack.js
+ * @description Positioning container for overlaying children (relative by default,
+ * use `position: "stack"` for absolute centering).
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+
+export const Stack = (props = {}) => {
+  const {
+    // Default layout
+    position = "relative",
+    display = "block",
+    boxSizing = "border-box",
+
+    // Everything else
+    ...rest
+  } = props;
+
+  return WidgetFactory({
+    tag: "div",
+    widgetName: "Stack",
+    position: position,
+    display: display,
+    boxSizing: boxSizing,
+    ...rest,
+  });
+};
+
+export default Stack;

package/src/widgets/Stepper.js

@@ -0,0 +1,296 @@
+/**
+ * @file Stepper.js
+ * @description Multi-step progress indicator with a horizontally scrollable track.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { Container } from "./Container.js";
+import { Row } from "./Row.js";
+import { Column } from "./Column.js";
+import { Text } from "./Text.js";
+import { Icon } from "./Icon.js";
+import { Button } from "./Button.js";
+import { colors } from "../utils/themes.js";
+
+export const Stepper = (props) => {
+  const {
+    steps = [],
+    activeStep = 0,
+    onStepChange,
+    orientation = "horizontal",
+    variant = "circles",
+    showLabels = true,
+    showNavigation = true,
+    nextLabel = "Next",
+    backLabel = "Back",
+    finishLabel = "Finish",
+    onFinish,
+
+    // Styling props
+    bgColor = colors.surface,
+    borderRadius = 16,
+    border,
+    borderColor = colors.border,
+    borderWidth = 1,
+    shadow,
+    padding = 20,
+    margin = 0,
+    width = "100%",
+    ...rest
+  } = props;
+
+  let currentStep = Math.min(Math.max(activeStep, 0), steps.length - 1);
+  let stepsContainer = null;
+  let contentContainer = null;
+  let navContainer = null;
+
+  const goToStep = (index) => {
+    if (index < 0 || index >= steps.length) return;
+    currentStep = index;
+    if (onStepChange) onStepChange(currentStep);
+    updateUI();
+  };
+
+  const next = () => goToStep(currentStep + 1);
+  const back = () => goToStep(currentStep - 1);
+  const finish = () => onFinish?.();
+
+  const updateUI = () => {
+    if (!stepsContainer) return;
+
+    // Clear steps container
+    while (stepsContainer.firstChild) {
+      stepsContainer.removeChild(stepsContainer.firstChild);
+    }
+
+    // Calculatesteste if we need to wrap or scroll
+    const stepWidth = 80;
+    const totalSteps = steps.length;
+    const availableWidth = stepsContainer.parentElement?.offsetWidth || 800;
+    const needsWrap =
+      orientation === "horizontal" && totalSteps * stepWidth > availableWidth;
+
+    // Draw each step
+    steps.forEach((step, idx) => {
+      const isActive = idx === currentStep;
+      const isCompleted = idx < currentStep;
+      const isLast = idx === steps.length - 1;
+
+      // Step indicator
+      let indicator;
+      if (variant === "circles") {
+        indicator = Container({
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          bgColor: isActive
+            ? colors.primary
+            : isCompleted
+              ? colors.success
+              : colors.gray300,
+          justifyContent: "center",
+          alignItems: "center",
+          child: isCompleted
+            ? Icon({ name: "check", size: 18, color: "#fff" })
+            : Text({
+                text: String(idx + 1),
+                size: 14,
+                weight: "bold",
+                color: isActive ? "#fff" : colors.textSecondary,
+              }),
+        });
+      } else if (variant === "numbers") {
+        indicator = Text({
+          text: String(idx + 1),
+          size: 16,
+          weight: "bold",
+          color: isActive ? colors.primary : colors.textSecondary,
+        });
+      } else {
+        indicator = Icon({
+          name: step.icon || "circle",
+          size: 24,
+          color: isActive ? colors.primary : colors.gray300,
+        });
+      }
+
+      // Label
+      const label = showLabels
+        ? Text({
+            text: step.label,
+            size: 12,
+            color: isActive ? colors.primary : colors.textSecondary,
+            marginTop: 4,
+            align: "center",
+          })
+        : null;
+
+      const stepColumn = Column({
+        alignItems: "center",
+        flex: needsWrap ? "auto" : 1,
+        minWidth: needsWrap ? "80px" : "0",
+        cursor: "pointer",
+        onclick: () => goToStep(idx),
+        children: [indicator, label].filter(Boolean),
+      });
+
+      if (orientation === "horizontal") {
+        stepsContainer.appendChild(stepColumn);
+        if (!isLast && !needsWrap) {
+          const connector = Container({
+            flex: 1,
+            height: "2px",
+            minWidth: "10px",
+            backgroundColor:
+              idx < currentStep ? colors.success : colors.gray300,
+          });
+          stepsContainer.appendChild(connector);
+        } else if (!isLast && needsWrap) {
+          const spacer = Container({ width: 8 });
+          stepsContainer.appendChild(spacer);
+        }
+      } else {
+        const verticalStep = Row({
+          gap: 12,
+          alignItems: "center",
+          children: [stepColumn, Text({ text: step.label, size: 14 })],
+        });
+        stepsContainer.appendChild(verticalStep);
+      }
+    });
+
+    // Update content
+    if (contentContainer) {
+      while (contentContainer.firstChild) {
+        contentContainer.removeChild(contentContainer.firstChild);
+      }
+      const stepContent = steps[currentStep]?.content;
+      if (stepContent) {
+        contentContainer.appendChild(stepContent);
+      }
+    }
+
+    // Update navigation buttons
+    if (navContainer) {
+      while (navContainer.firstChild) {
+        navContainer.removeChild(navContainer.firstChild);
+      }
+
+      const buttons = [];
+      if (currentStep > 0) {
+        buttons.push(
+          Button({
+            text: backLabel,
+            variant: "outlined",
+            onPress: back,
+          }),
+        );
+      }
+      if (currentStep === steps.length - 1) {
+        buttons.push(
+          Button({
+            text: finishLabel,
+            variant: "filled",
+            bgColor: colors.success,
+            onPress: finish,
+          }),
+        );
+      } else {
+        buttons.push(
+          Button({
+            text: nextLabel,
+            variant: "filled",
+            onPress: next,
+          }),
+        );
+      }
+
+      const navRow = Row({
+        justifyContent: "flex-end",
+        gap: 12,
+        children: buttons,
+      });
+      navContainer.appendChild(navRow);
+    }
+  };
+
+  // Build style for main container using WidgetFactory
+  let style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    backgroundColor: bgColor,
+    borderRadius:
+      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+    padding: typeof padding === "number" ? `${padding}px` : padding,
+    margin: typeof margin === "number" ? `${margin}px` : margin,
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    boxSizing: "border-box",
+    overflow: "hidden",
+  };
+
+  if (border) {
+    style.border = border;
+  } else if (borderWidth !== undefined) {
+    style.borderWidth = `${borderWidth}px`;
+    style.borderStyle = "solid";
+    style.borderColor = borderColor;
+  }
+
+  if (shadow) {
+    style.boxShadow = shadow;
+  }
+
+  const container = WidgetFactory({
+    widgetName: "Stepper",
+    ...style,
+    ...rest,
+  });
+
+  // Steps wrapper with horizontal scroll
+  const stepsWrapper = WidgetFactory({
+    tag: "div",
+    overflowX: "auto",
+    overflowY: "visible",
+    width: "100%",
+  });
+
+  stepsContainer =
+    orientation === "horizontal"
+      ? Row({
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+          minWidth: "min-content",
+          width: "100%",
+        })
+      : Column({ gap: 16 });
+
+  stepsWrapper.appendChild(stepsContainer);
+
+  // Content container
+  contentContainer = Container({
+    child: steps[currentStep]?.content || null,
+    width: "100%",
+    overflow: "auto",
+  });
+
+  // Navigation container
+  navContainer = Container({ width: "100%" });
+
+  container.appendChild(stepsWrapper);
+  container.appendChild(contentContainer);
+  container.appendChild(navContainer);
+
+  // Initial render
+  updateUI();
+
+  // Public methods
+  container.goTo = goToStep;
+  container.next = next;
+  container.back = back;
+  container.getActiveStep = () => currentStep;
+
+  return container;
+};
+
+export default Stepper;

package/src/widgets/Switch.js

@@ -0,0 +1,102 @@
+/**
+ * @file Switch.js
+ * @description iOS-style toggle switch with controlled/uncontrolled state.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const Switch = (props) => {
+  const {
+    value = false,
+    onToggle,
+    onPress: onPressProp,
+    disabled = false,
+    size = "medium",
+    ...rest
+  } = props;
+
+  /** @deprecated Use onPress instead */
+  // onToggle kept as alias for backward compatibility
+  const onPress = onPressProp || onToggle;
+
+  // Sizes
+  const sizes = {
+    small: { width: 40, height: 24, knob: 20 },
+    medium: { width: 51, height: 31, knob: 27 },
+    large: { width: 60, height: 36, knob: 32 },
+  };
+  const sz = sizes[size] || sizes.medium;
+
+  let internalValue = value;
+  let switchRef = null;
+  let knobRef = null;
+
+  const updateUI = (newValue) => {
+    if (switchRef) {
+      switchRef.style.backgroundColor = newValue
+        ? colors.success
+        : colors.gray300;
+    }
+    if (knobRef) {
+      knobRef.style.transform = newValue
+        ? `translateX(${sz.width - sz.knob - 4}px)`
+        : "translateX(0)";
+    }
+  };
+
+  // Createste knob
+  const knob = WidgetFactory({
+    width: sz.knob,
+    height: sz.knob,
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    transform: internalValue
+      ? `translateX(${sz.width - sz.knob - 4}px)`
+      : "translateX(0)",
+    transition: "transform 0.2s ease",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+  });
+  knobRef = knob;
+
+  // Createste main switch container
+  const switchContainer = WidgetFactory({
+    widgetName: "Switch",
+    width: sz.width,
+    height: sz.height,
+    backgroundColor: internalValue ? colors.success : colors.gray300,
+    borderRadius: sz.height / 2,
+    display: "flex",
+    alignItems: "center",
+    padding: "2px",
+    transition: "all 0.2s ease",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    boxSizing: "border-box",
+    child: knob,
+    ...rest,
+  });
+  switchRef = switchContainer;
+
+  // Handle click
+  if (!disabled) {
+    switchContainer.onclick = (e) => {
+      e.stopPropagation();
+      const newValue = !internalValue;
+      internalValue = newValue;
+      updateUI(newValue);
+      if (onPress) onPress(newValue);
+    };
+  }
+
+  // Public methods
+  switchContainer.updateValue = (newValue) => {
+    internalValue = newValue;
+    updateUI(newValue);
+  };
+
+  switchContainer.getValue = () => internalValue;
+
+  return switchContainer;
+};
+
+export default Switch;