flet-box 0.0.0-stage → 1.0.2

package/src/widgets/Button.js

@@ -0,0 +1,247 @@
+/**
+ * @file Button.js
+ * @description Button with size presets, variants, icons and gradient support.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";import { colors } from "../utils/themes.js";
+import { Text } from "./Text.js";
+import { Icon } from "./Icon.js";
+
+// ============================================================
+// CONFIGURATION
+// ============================================================
+
+const SIZE_PRESETS = {
+  small: { padding: [6, 12], fontSize: 12, gap: 6, iconSize: 16 },
+  medium: { padding: [10, 20], fontSize: 14, gap: 8, iconSize: 20 },
+  large: { padding: [14, 28], fontSize: 16, gap: 10, iconSize: 24 },
+};
+
+const SHADOW_LEVELS = {
+  0: "none",
+  1: "0 1px 3px rgba(0,0,0,0.12)",
+  2: "0 3px 6px rgba(0,0,0,0.16)",
+  3: "0 6px 12px rgba(0,0,0,0.2)",
+  4: "0 10px 20px rgba(0,0,0,0.25)",
+  5: "0 15px 30px rgba(0,0,0,0.3)",
+};
+
+// ============================================================
+// HELPERS
+// ============================================================
+
+function normalizeSpacing(value, defaultPair) {
+  if (value === undefined) return defaultPair;
+  if (typeof value === "number") return [value, value * 2];
+  if (Array.isArray(value) && value.length === 2) return value;
+  return value;
+}
+
+function computeBackground(variant, disabled, bgColor, gradient) {
+  if (disabled) return colors.gray100;
+  if (variant === "filled") return gradient || bgColor || colors.primary;
+  return "transparent";
+}
+
+function computeTextColor(variant, disabled, color, bgColor) {
+  if (disabled) return colors.textDisabled;
+  if (variant === "filled") return color || "#fff";
+  return color || bgColor || colors.primary;
+}
+
+function computeBorder(variant, disabled, color, bgColor) {
+  if (disabled) return `1px solid ${colors.gray300}`;
+  if (variant === "outlined") {
+    const borderColor = color || bgColor || colors.primary;
+    return `2px solid ${borderColor}`;
+  }
+  if (variant === "text") return "none";
+  return `1px solid ${colors.border}`;
+}
+
+function createIcon(name, size, color) {
+  if (!name) return null;
+  return Icon({ name, size, color, display: "inline-flex" });
+}
+
+function resolveIconNames(props) {
+  const { icon, iconPosition, iconTop, iconLeft, iconRight, iconBottom } =
+    props;
+  return {
+    top: iconTop || (icon && iconPosition === "top" ? icon : null),
+    left: iconLeft || (icon && iconPosition === "left" ? icon : null),
+    right: iconRight || (icon && iconPosition === "right" ? icon : null),
+    bottom: iconBottom || (icon && iconPosition === "bottom" ? icon : null),
+  };
+}
+
+function buildIconElements(iconNames, size, color) {
+  return {
+    top: createIcon(iconNames.top, size, color),
+    left: createIcon(iconNames.left, size, color),
+    right: createIcon(iconNames.right, size, color),
+    bottom: createIcon(iconNames.bottom, size, color),
+  };
+}
+
+function buildButtonChildren(text, textColor, fontSize, gap, iconElements) {
+  const children = [];
+
+  if (iconElements.top) children.push(iconElements.top);
+
+  const middleRow = [];
+  if (iconElements.left) middleRow.push(iconElements.left);
+  if (text) {
+    middleRow.push(
+      Text({ text, color: textColor, size: fontSize, weight: "bold" }),
+    );
+  }
+  if (iconElements.right) middleRow.push(iconElements.right);
+
+  if (middleRow.length > 0) {
+    children.push(
+      WidgetFactory({
+        tag: "div",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap,
+        child: middleRow,
+      }),
+    );
+  }
+
+  if (iconElements.bottom) children.push(iconElements.bottom);
+
+  if (children.length === 0 && iconElements.left) {
+    children.push(iconElements.left);
+  }
+
+  return children;
+}
+
+function applySpacingToProps(buttonProps, padding, margin) {
+  const normalizedPadding = normalizeSpacing(
+    padding,
+    SIZE_PRESETS.medium.padding,
+  );
+  const normalizedMargin = normalizeSpacing(margin, undefined);
+
+  if (Array.isArray(normalizedPadding)) {
+    buttonProps.paddingTop = normalizedPadding[0];
+    buttonProps.paddingBottom = normalizedPadding[0];
+    buttonProps.paddingLeft = normalizedPadding[1];
+    buttonProps.paddingRight = normalizedPadding[1];
+  } else if (normalizedPadding !== undefined) {
+    buttonProps.padding = normalizedPadding;
+  }
+
+  if (Array.isArray(normalizedMargin)) {
+    buttonProps.marginTop = normalizedMargin[0];
+    buttonProps.marginBottom = normalizedMargin[0];
+    buttonProps.marginLeft = normalizedMargin[1];
+    buttonProps.marginRight = normalizedMargin[1];
+  } else if (normalizedMargin !== undefined) {
+    buttonProps.margin = normalizedMargin;
+  }
+}
+
+// ============================================================
+// MAIN COMPONENT
+// ============================================================
+
+export const Button = (props) => {
+  const {
+    text,
+    iconLeft,
+    iconRight,
+    iconTop,
+    iconBottom,
+    icon,
+    gradient,
+    padding,
+    margin,
+    onPress,
+    iconPosition = "left",
+    variant = "filled",
+    size = "medium",
+    borderRadius = 24,
+    elevation = 2,
+    disabled = false,
+    fullWidth = false,
+    bgColor = colors.surface,
+    color = colors.text,
+    ...rest
+  } = props;
+
+  const sizePreset = SIZE_PRESETS[size] || SIZE_PRESETS.medium;
+  const shadow = SHADOW_LEVELS[elevation] || SHADOW_LEVELS[0];
+
+  const background = computeBackground(variant, disabled, bgColor, gradient);
+  const textColor = computeTextColor(variant, disabled, color, bgColor);
+  const border = computeBorder(variant, disabled, color, bgColor);
+
+  const iconNames = resolveIconNames({
+    icon,
+    iconPosition,
+    iconTop,
+    iconLeft,
+    iconRight,
+    iconBottom,
+  });
+
+  const iconElements = buildIconElements(
+    iconNames,
+    sizePreset.iconSize,
+    textColor,
+  );
+
+  const children = buildButtonChildren(
+    text,
+    textColor,
+    sizePreset.fontSize,
+    sizePreset.gap,
+    iconElements,
+  );
+
+  const hasTopOrBottomIcon = !!(iconElements.top || iconElements.bottom);
+  const flexDirection = hasTopOrBottomIcon ? "column" : "row";
+
+  const buttonProps = {
+    tag: "button",
+    widgetName: "Button",
+    display: "inline-flex",
+    flexDirection,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizePreset.gap,
+    borderRadius,
+    width: fullWidth ? "100%" : "auto",
+    backgroundColor: background,
+    border,
+    color: textColor,
+    boxShadow: shadow,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    transition: "all 0.2s ease",
+    boxSizing: fullWidth ? "border-box" : undefined,
+    flexShrink: fullWidth ? undefined : 0,
+    onclick: disabled ? null : onPress,
+    child: children.length === 1 ? children[0] : children,
+    ...rest,
+  };
+
+  applySpacingToProps(buttonProps, padding, margin);
+
+  if (gradient) {
+    buttonProps.background = gradient;
+    delete buttonProps.backgroundColor;
+  }
+
+  const button = WidgetFactory(buttonProps);
+  button.setAttribute("type", "button");
+
+  return button;
+};
+
+export default Button;

package/src/widgets/Card.js

@@ -0,0 +1,33 @@
+/**
+ * @file Card.js
+ * @description Elevated surface card with optional border, padding and radius.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+import { border } from "../tools/index.js";
+
+export const Card = (props = {}) => {
+  const {
+    elevation = 2,
+    padding = 16,
+    borderRadius = 12,
+    bgColor = colors.surface,
+    borderColor = colors.border,
+    borderWidth = 1,
+    borderStyle = "solid",
+    showBorder = true,
+    ...rest
+  } = props;
+
+  return WidgetFactory({
+    widgetName: "Card",
+    backgroundColor: bgColor,
+    borderRadius: borderRadius,
+    padding: padding,
+    elevation: elevation,
+    border: showBorder ? border(borderWidth, borderStyle, borderColor) : "none",
+    ...rest,
+  });
+};
+
+export default Card;

package/src/widgets/Carousel.js

@@ -0,0 +1,301 @@
+/**
+ * @file Carousel.js
+ * @description Swipeable carousel of slides with navigation controls.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { Icon } from "./Icon.js";
+import { colors } from "../utils/themes.js";
+
+export const Carousel = (props) => {
+  const {
+    items = [],
+    autoPlay = false,
+    interval = 3000,
+    showArrows = true,
+    showDots = true,
+    infinite = true,
+    height = 300,
+    width = "100%",
+    borderRadius = 12,
+    onIndexChange,
+    onPress,
+
+    // Dot customization
+    dotColor = colors.gray300,
+    dotActiveColor = colors.primary,
+    dotSize = 8,
+    dotActiveSize = 20,
+
+    // Button customization
+    buttonBgColor = colors.surface,
+    buttonIconColor = colors.secondary,
+    buttonSize = 36,
+    buttonIconSize = 24,
+    buttonTop = "46%",
+
+    ...rest
+  } = props;
+
+  if (!items.length) return null;
+
+  let currentIndex = 0;
+  let autoPlayInterval = null;
+  let isTransitioning = false;
+  let trackRef = null;
+  let dotsContainerRef = null;
+
+  const updatePosition = (animate = true) => {
+    if (!trackRef) return;
+    trackRef.style.transition = animate ? "transform 0.3s ease-in-out" : "none";
+    trackRef.style.transform = `translateX(-${currentIndex * (100 / items.length)}%)`;
+  };
+
+  const updateDots = () => {
+    if (!dotsContainerRef) return;
+    const dots = dotsContainerRef.children;
+    for (let i = 0; i < dots.length; i++) {
+      const dot = dots[i];
+      if (i === currentIndex) {
+        dot.style.backgroundColor = dotActiveColor;
+        dot.style.width =
+          typeof dotActiveSize === "number"
+            ? `${dotActiveSize}px`
+            : dotActiveSize;
+      } else {
+        dot.style.backgroundColor = dotColor;
+        dot.style.width =
+          typeof dotSize === "number" ? `${dotSize}px` : dotSize;
+      }
+    }
+  };
+
+  const next = () => {
+    if (isTransitioning) return;
+    isTransitioning = true;
+
+    let newIndex = currentIndex + 1;
+    if (newIndex >= items.length) {
+      if (infinite) newIndex = 0;
+      else {
+        isTransitioning = false;
+        return;
+      }
+    }
+
+    currentIndex = newIndex;
+    updatePosition(true);
+    updateDots();
+
+    setTimeout(() => {
+      isTransitioning = false;
+    }, 350);
+    const cb = onIndexChange || onPress;
+    if (cb) cb(currentIndex);
+  };
+
+  const prev = () => {
+    if (isTransitioning) return;
+    isTransitioning = true;
+
+    let newIndex = currentIndex - 1;
+    if (newIndex < 0) {
+      if (infinite) newIndex = items.length - 1;
+      else {
+        isTransitioning = false;
+        return;
+      }
+    }
+
+    currentIndex = newIndex;
+    updatePosition(true);
+    updateDots();
+
+    setTimeout(() => {
+      isTransitioning = false;
+    }, 350);
+    const cb = onIndexChange || onPress;
+    if (cb) cb(currentIndex);
+  };
+
+  const goTo = (index) => {
+    if (isTransitioning) return;
+    if (index < 0 || index >= items.length) return;
+    isTransitioning = true;
+    currentIndex = index;
+    updatePosition(true);
+    updateDots();
+    setTimeout(() => {
+      isTransitioning = false;
+    }, 350);
+    const cb = onIndexChange || onPress;
+    if (cb) cb(currentIndex);
+  };
+
+  const startAutoPlay = () => {
+    if (!autoPlay || items.length <= 1) return;
+    if (autoPlayInterval) clearInterval(autoPlayInterval);
+    autoPlayInterval = setInterval(next, interval);
+  };
+
+  const stopAutoPlay = () => {
+    if (autoPlayInterval) {
+      clearInterval(autoPlayInterval);
+      autoPlayInterval = null;
+    }
+  };
+
+  const createArrow = (position, iconName, onClick) => {
+    const isLeft = position === "left";
+    return WidgetFactory({
+      position: "absolute",
+      left: isLeft ? "10px" : "auto",
+      right: isLeft ? "auto" : "10px",
+      top: buttonTop,
+      cursor: "pointer",
+      backgroundColor: buttonBgColor,
+      borderRadius: "50%",
+      width: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
+      height: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 10,
+      child: Icon({
+        name: iconName,
+        size: buttonIconSize,
+        color: buttonIconColor,
+      }),
+      onclick: onClick,
+    });
+  };
+
+  // Main container
+  const container = WidgetFactory({
+    widgetName: "Carousel",
+    position: "relative",
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    overflow: "hidden",
+    borderRadius:
+      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+    ...rest,
+  });
+
+  // Track container
+  const track = WidgetFactory({
+    display: "flex",
+    transition: "transform 0.3s ease-in-out",
+    height: "100%",
+    width: `${items.length * 100}%`,
+  });
+  trackRef = track;
+
+  // Createste slides
+  items.forEach((item) => {
+    const slide = WidgetFactory({
+      width: `${100 / items.length}%`,
+      height: "100%",
+      flexShrink: 0,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+    });
+
+    if (item instanceof HTMLElement) {
+      slide.appendChild(item);
+    } else if (typeof item === "string") {
+      const img = document.createElement("img");
+      img.src = item;
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.style.objectFit = "cover";
+      img.onerror = () => {
+        console.error("Image not loaded:", item);
+      };
+      slide.appendChild(img);
+    } else if (item && typeof item === "object" && item.src) {
+      const img = document.createElement("img");
+      img.src = item.src;
+      img.alt = item.alt || "";
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.style.objectFit = "cover";
+      slide.appendChild(img);
+    }
+
+    track.appendChild(slide);
+  });
+
+  container.appendChild(track);
+
+  // Navigation arrows
+  if (showArrows && items.length > 1) {
+    const prevArrow = createArrow("left", "chevron_left", prev);
+    const nextArrow = createArrow("right", "chevron_right", next);
+    container.appendChild(prevArrow);
+    container.appendChild(nextArrow);
+  }
+
+  // Dots indicators
+  if (showDots && items.length > 1) {
+    const dotsContainer = WidgetFactory({
+      position: "absolute",
+      bottom: "15px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      display: "flex",
+      gap: "8px",
+      zIndex: 10,
+    });
+    dotsContainerRef = dotsContainer;
+
+    items.forEach((_, index) => {
+      const dot = WidgetFactory({
+        width:
+          index === currentIndex
+            ? typeof dotActiveSize === "number"
+              ? `${dotActiveSize}px`
+              : dotActiveSize
+            : typeof dotSize === "number"
+              ? `${dotSize}px`
+              : dotSize,
+        height: typeof dotSize === "number" ? `${dotSize}px` : dotSize,
+        borderRadius: "4px",
+        backgroundColor: index === currentIndex ? dotActiveColor : dotColor,
+        cursor: "pointer",
+        transition: "all 0.2s",
+        onclick: () => goTo(index),
+      });
+      dotsContainer.appendChild(dot);
+    });
+
+    container.appendChild(dotsContainer);
+  }
+
+  // Initialize position
+  updatePosition(false);
+  updateDots();
+
+  // Autoplay setup
+  if (autoPlay) {
+    startAutoPlay();
+    container.addEventListener("mouseenter", stopAutoPlay);
+    container.addEventListener("mouseleave", startAutoPlay);
+  }
+
+  // Public methods
+  container.next = next;
+  container.prev = prev;
+  container.goTo = goTo;
+  container.getCurrentIndex = () => currentIndex;
+
+  // Cleanup
+  container.onUnmount(() => {
+    stopAutoPlay();
+  });
+
+  return container;
+};
+
+export default Carousel;