flet-box 0.0.0-stage → 1.0.2

package/src/widgets/Checkbox.js

@@ -0,0 +1,106 @@
+/**
+ * @file Checkbox.js
+ * @description Checkbox input with controlled/uncontrolled state.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const Checkbox = (props) => {
+  const {
+    checked = false,
+    onCheck,
+    onPress: onPressProp,
+    disabled = false,
+    size = 20,
+    ...rest
+  } = props;
+
+  /** @deprecated Use onPress instead */
+  // onCheck kept as alias for backward compatibility
+  const onPress = onPressProp || onCheck;
+
+  let internalChecked = checked;
+  let checkboxRef = null;
+  let checkMarkRef = null;
+
+  const updateUI = (newChecked) => {
+    if (checkboxRef) {
+      checkboxRef.style.backgroundColor = newChecked
+        ? colors.primary
+        : "transparent";
+      checkboxRef.style.border = `2px solid ${newChecked ? colors.primary : colors.border}`;
+    }
+    if (checkMarkRef) {
+      checkMarkRef.style.display = newChecked ? "inline-block" : "none";
+    }
+  };
+
+  // Createste checkmark
+  const checkMark = WidgetFactory({
+    tag: "span",
+    textContent: "✓",
+    color: "#fff",
+    fontSize: size * 0.7,
+    fontWeight: "bold",
+    display: internalChecked ? "inline-block" : "none",
+  });
+  checkMarkRef = checkMark;
+
+  // Createste main checkbox container
+  const checkbox = WidgetFactory({
+    widgetName: "Checkbox",
+    width: size,
+    height: size,
+    border: `2px solid ${disabled ? colors.border : internalChecked ? colors.primary : colors.border}`,
+    borderRadius: 6,
+    backgroundColor: internalChecked ? colors.primary : "transparent",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    child: checkMark,
+    ...rest,
+  });
+  checkboxRef = checkbox;
+
+  // Handle click
+  if (!disabled) {
+    checkbox.onclick = (e) => {
+      e.stopPropagation();
+      const newChecked = !internalChecked;
+      internalChecked = newChecked;
+      updateUI(newChecked);
+      if (onPress) onPress(newChecked);
+    };
+
+    // Hover effect
+    checkbox.addEventListener("mouseenter", () => {
+      if (!disabled && !internalChecked) {
+        checkbox.style.backgroundColor = colors.primary + "20";
+      }
+    });
+
+    checkbox.addEventListener("mouseleave", () => {
+      if (!disabled && !internalChecked) {
+        checkbox.style.backgroundColor = "transparent";
+      }
+    });
+  }
+
+  // Public methods
+  checkbox.setChecked = (newChecked, triggerCallback = true) => {
+    if (internalChecked !== newChecked) {
+      internalChecked = newChecked;
+      updateUI(newChecked);
+      if (triggerCallback && onPress) onPress(newChecked);
+    }
+  };
+
+  checkbox.getChecked = () => internalChecked;
+
+  return checkbox;
+};
+
+export default Checkbox;

package/src/widgets/Chip.js

@@ -0,0 +1,153 @@
+/**
+ * @file Chip.js
+ * @description A compact label/tag widget, optionally adorned with a leading
+ * icon and a delete button. Supports "filled" and "outlined" variants with
+ * configurable colors, sizing, and elevation.
+ */
+
+import { WidgetFactory } from "../widget-factory/index.js";
+import { Row } from "./Row.js";
+import { Text } from "./Text.js";
+import { Icon } from "./Icon.js";
+import { colors } from "../utils/themes.js";
+
+/**
+ * Creates a Chip widget — a small interactive label commonly used for tags,
+ * filters, or multi-select values.
+ *
+ * @param {Object} props - Configuration for the chip.
+ * @param {string} props.label - The text displayed inside the chip.
+ * @param {string} [props.icon] - Optional Material icon name rendered before the label.
+ * @param {Function} [props.onPress] - Called when the chip is clicked. When provided, the cursor becomes a pointer and a hover opacity effect is added.
+ * @param {Function} [props.onDelete] - When provided, renders a close ("×") icon on the right side of the chip. Called when that icon is clicked.
+ * @param {'filled'|'outlined'} [props.variant='filled'] - Visual style. 'filled' uses a solid background; 'outlined' uses a transparent background with a border.
+ * @param {string} [props.color=colors.primary] - Chip accent color: used as the background (filled) or border/text (outlined).
+ * @param {string} [props.textColor] - Explicit text color override. Defaults to '#fff' (filled) or `color` (outlined).
+ * @param {string} [props.borderColor] - Explicit border color override (outlined variant only). Defaults to `color`.
+ * @param {number} [props.borderRadius=32] - Corner radius in pixels. High values produce a pill shape.
+ * @param {string} [props.padding='4px 12px'] - Internal padding of the chip row.
+ * @param {number} [props.gap=4] - Gap in pixels between icon, label, and delete icon.
+ * @param {number} [props.size=12] - Font size in pixels. Also scales the icons proportionally.
+ * @param {number} [props.elevation=0] - Box-shadow depth. 0 means no shadow.
+ * @returns {HTMLElement} The chip container element.
+ */
+export const Chip = (props) => {
+  const {
+    label,
+    icon,
+    onPress,
+    onDelete,
+    variant = "filled",
+    color = colors.primary,
+    textColor,
+    borderColor,
+    borderRadius = 32,
+    padding = "4px 12px",
+    gap = 4,
+    size = 12,
+    elevation = 0,
+    ...rest
+  } = props;
+
+  // Derive background, text, and border colors from the variant
+  let bgColor, txtColor, brdColor;
+
+  if (variant === "outlined") {
+    bgColor = "transparent";
+    txtColor = textColor || color;
+    brdColor = borderColor || color;
+  } else {
+    bgColor = color;
+    txtColor = textColor || "#fff";
+    brdColor = "transparent";
+  }
+
+  const children = [];
+
+  // Optional leading icon — inherits the chip's text color for visual consistency
+  if (icon) {
+    children.push(
+      Icon({
+        name: icon,
+        size: size,
+        color: txtColor,
+      }),
+    );
+  }
+
+  children.push(
+    Text({
+      text: label,
+      size: size,
+      color: txtColor,
+      weight: "500",
+    }),
+  );
+
+  // Optional trailing delete button — stopPropagation prevents triggering onPress
+  if (onDelete) {
+    const closeIcon = Icon({
+      name: "close",
+      size: size - 2,
+      color: txtColor,
+      cursor: "pointer",
+      onclick: (e) => {
+        e.stopPropagation();
+        onDelete();
+      },
+    });
+    children.push(closeIcon);
+  }
+
+  // Inner Row lays out icon + label + delete icon horizontally
+  const chipContent = Row({
+    alignItems: "center",
+    gap: gap,
+    backgroundColor: bgColor,
+    border: variant === "outlined" ? `1px solid ${brdColor}` : "none",
+    borderRadius: borderRadius,
+    padding: padding,
+    width: "fit-content",
+    minWidth: "auto",
+    boxShadow:
+      elevation > 0
+        ? `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`
+        : "none",
+    children: children,
+  });
+
+  // Outer wrapper element enables the onclick without styling conflicts
+  const chip = WidgetFactory({
+    widgetName: "Chip",
+    display: "inline-block",
+    cursor: onPress ? "pointer" : "default",
+    transition: "all 0.2s ease",
+    child: chipContent,
+    onclick: onPress,
+    ...rest,
+  });
+
+  // Hover effects that respect the chip's visual variant
+  if (onPress) {
+    chip.addEventListener("mouseenter", () => {
+      if (variant === "filled") {
+        // Slightly dim the chip to signal interactivity
+        chip.style.opacity = "0.85";
+      } else if (chipContent) {
+        // Tint the outlined chip background subtly on hover
+        chipContent.style.backgroundColor = `${color}10`;
+      }
+    });
+    chip.addEventListener("mouseleave", () => {
+      if (variant === "filled") {
+        chip.style.opacity = "1";
+      } else if (chipContent) {
+        chipContent.style.backgroundColor = "transparent";
+      }
+    });
+  }
+
+  return chip;
+};
+
+export default Chip;

package/src/widgets/CircularBar.js

@@ -0,0 +1,352 @@
+/**
+ * @file CircularBar.js
+ * @description Circular/radial progress bar drawn on canvas.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const CircularBar = (props) => {
+  let {
+    // === Core (existing) ===
+    value = 0,
+    max = 100,
+    size = null,
+    strokeWidth = 12,
+    color = colors.primary,
+    backgroundColor = colors.gray200,
+    showValue = true,
+    valueColor = colors.text,
+    valueSize = 24,
+    label,
+    labelColor = colors.textSecondary,
+    labelSize = 12,
+    lineCap = "round",
+    animate = true,
+    animationDuration = 1000,
+    onComplete,
+    ref,
+    ...rest
+  } = props;
+
+  // === NEW PROPS (optional, non-breaking) ===
+  const {
+    // Value format
+    valueFormat = "percent", // 'percent', 'value', 'custom'
+    valueSuffix = "",
+    valuePrefix = "",
+    valueDecimals = 0,
+    customValueFormatter = null, // (currentValue, max) => string
+
+    // Gradient
+    gradient = null, // array of colores ['red', 'yellow', 'green'] or string with gradiente CSS
+    gradientAngle = 135,
+
+    // Shadow
+    shadowBlur = 0,
+    shadowColor = "rgba(0,0,0,0.3)",
+
+    // Additional visual effects
+    glow = false,
+    glowColor = null, // if not specified, uses the stroke color
+
+    // Markers (points on the perimeter)
+    markers = [], // [{ value, color, size, label }]
+
+    // Extra inner ring (for a two-layer donut)
+    innerStrokeWidth = 0,
+    innerColor = null,
+
+    // Events
+    onClick = null,
+    onHover = null,
+
+    // Additional text
+    subtitle = null,
+    subtitleColor = colors.textSecondary,
+    subtitleSize = 10,
+
+    // Tooltip on mouse hover
+    tooltip = null,
+  } = props;
+
+  // Internal variables (no changes to the core logic)
+  let canvas = null;
+  let ctx = null;
+  let animationId = null;
+  let currentValue = 0;
+  let startTime = null;
+  let resizeObserver = null;
+  let container = null;
+  let currentWidth = 0;
+  let isHovering = false;
+
+  const isFixedSize = size !== null && size !== undefined;
+  const fixedSize = isFixedSize ? size : 200;
+
+  const updateCanvasSize = () => {
+    if (!canvas) return;
+    let width;
+    if (isFixedSize) width = fixedSize;
+    else {
+      const rect = container.getBoundingClientRect();
+      width = rect.width;
+      if (width <= 0) width = 200;
+    }
+    canvas.width = width;
+    canvas.height = width;
+    currentWidth = width;
+  };
+
+  const getCenter = () => currentWidth / 2;
+  const getRadius = () => (currentWidth - strokeWidth) / 2;
+
+  const getGradient = () => {
+    if (!gradient) return color;
+    if (typeof gradient === "string") return gradient;
+    if (Array.isArray(gradient)) {
+      const grad = ctx.createLinearGradient(0, 0, currentWidth, currentWidth);
+      gradient.forEach((c, i) => {
+        grad.addColorStop(i / (gradient.length - 1), c);
+      });
+      return grad;
+    }
+    return color;
+  };
+
+  const getFormattedValue = () => {
+    if (customValueFormatter) return customValueFormatter(currentValue, max);
+    if (valueFormat === "percent") {
+      const percent =
+        Math.round((currentValue / max) * 100 * Math.pow(10, valueDecimals)) /
+        Math.pow(10, valueDecimals);
+      return `${valuePrefix}${percent}${valueSuffix}`;
+    }
+    if (valueFormat === "value") {
+      const val =
+        Math.round(currentValue * Math.pow(10, valueDecimals)) /
+        Math.pow(10, valueDecimals);
+      return `${valuePrefix}${val}${valueSuffix}`;
+    }
+    return `${currentValue}/${max}`;
+  };
+
+  const drawBackground = () => {
+    ctx.beginPath();
+    ctx.arc(getCenter(), getCenter(), getRadius(), 0, Math.PI * 2);
+    ctx.strokeStyle = backgroundColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = lineCap;
+    ctx.stroke();
+
+    // Inner ring (optional)
+    if (innerStrokeWidth > 0 && innerColor) {
+      ctx.beginPath();
+      ctx.arc(
+        getCenter(),
+        getCenter(),
+        getRadius() - innerStrokeWidth / 2,
+        0,
+        Math.PI * 2,
+      );
+      ctx.strokeStyle = innerColor;
+      ctx.lineWidth = innerStrokeWidth;
+      ctx.stroke();
+    }
+  };
+
+  const drawProgress = (angleRad) => {
+    ctx.beginPath();
+    ctx.arc(
+      getCenter(),
+      getCenter(),
+      getRadius(),
+      -Math.PI / 2,
+      -Math.PI / 2 + angleRad,
+    );
+    ctx.strokeStyle = getGradient();
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = lineCap;
+    if (glow) {
+      ctx.shadowBlur = 12;
+      ctx.shadowColor = glowColor || color;
+    } else {
+      ctx.shadowBlur = shadowBlur;
+      ctx.shadowColor = shadowColor;
+    }
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+  };
+
+  const drawMarkers = () => {
+    if (!markers.length) return;
+    // Inner circle radius (where the stroke goes)
+    const r = getRadius();
+    const center = getCenter();
+    markers.forEach((m) => {
+      const angle = (m.value / max) * Math.PI * 2 - Math.PI / 2;
+      const x = center + r * Math.cos(angle);
+      const y = center + r * Math.sin(angle);
+      ctx.beginPath();
+      ctx.arc(x, y, m.size || 4, 0, Math.PI * 2);
+      ctx.fillStyle = m.color || colors.textSecondary;
+      ctx.fill();
+      if (m.label) {
+        ctx.font = `10px system-ui`;
+        ctx.fillStyle = colors.textSecondary;
+        ctx.fillText(m.label, x + 6, y - 4);
+      }
+    });
+  };
+
+  const drawText = () => {
+    if (showValue) {
+      ctx.font = `${valueSize}px system-ui, sans-serif`;
+      ctx.fillStyle = valueColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(
+        getFormattedValue(),
+        getCenter(),
+        getCenter() - (subtitle ? 8 : 0),
+      );
+    }
+    if (label) {
+      ctx.font = `${labelSize}px system-ui, sans-serif`;
+      ctx.fillStyle = labelColor;
+      ctx.fillText(
+        label,
+        getCenter(),
+        getCenter() + valueSize / 1.5 + (subtitle ? 4 : 0),
+      );
+    }
+    if (subtitle) {
+      ctx.font = `${subtitleSize}px system-ui, sans-serif`;
+      ctx.fillStyle = subtitleColor;
+      ctx.fillText(
+        subtitle,
+        getCenter(),
+        getCenter() + valueSize / 1.5 + (label ? 14 : 4),
+      );
+    }
+  };
+
+  const drawStatic = () => {
+    if (!ctx || !canvas) return;
+    currentValue = value;
+    const angle = (value / max) * Math.PI * 2;
+    ctx.clearRect(0, 0, currentWidth, currentWidth);
+    drawBackground();
+    drawProgress(angle);
+    drawMarkers();
+    drawText();
+  };
+
+  const drawFrame = (timestamp) => {
+    if (!ctx || !canvas) return;
+    if (!startTime) {
+      startTime = timestamp;
+      requestAnimationFrame(drawFrame);
+      return;
+    }
+    const elapsed = timestamp - startTime;
+    const progress = Math.min(1, elapsed / animationDuration);
+    currentValue = progress * value;
+    const angle = (currentValue / max) * Math.PI * 2;
+    ctx.clearRect(0, 0, currentWidth, currentWidth);
+    drawBackground();
+    drawProgress(angle);
+    drawMarkers();
+    drawText();
+    if (progress < 1 && animate) {
+      animationId = requestAnimationFrame(drawFrame);
+    } else {
+      currentValue = value;
+      if (onComplete) onComplete();
+      animationId = null;
+    }
+  };
+
+  const startAnimation = () => {
+    if (animationId) cancelAnimationFrame(animationId);
+    if (!ctx || !canvas) return;
+    if (animate) {
+      startTime = null;
+      currentValue = 0;
+      animationId = requestAnimationFrame(drawFrame);
+    } else drawStatic();
+  };
+
+  const resizeCanvas = () => {
+    if (!canvas) return;
+    updateCanvasSize();
+    if (animationId) cancelAnimationFrame(animationId);
+    startAnimation();
+  };
+
+  const setupEvents = () => {
+    if (!canvas) return;
+    if (onClick)
+      canvas.addEventListener("click", (e) =>
+        onClick({
+          value: currentValue,
+          max,
+          percent: (currentValue / max) * 100,
+        }),
+      );
+    if (onHover) {
+      canvas.addEventListener("mouseenter", () => {
+        isHovering = true;
+        onHover(true, { value: currentValue, max });
+      });
+      canvas.addEventListener("mouseleave", () => {
+        isHovering = false;
+        onHover(false);
+      });
+    }
+    if (tooltip) canvas.title = tooltip;
+  };
+
+  const initWidget = () => {
+    container = WidgetFactory({
+      tag: "div",
+      widgetName: "CircularBar",
+      display: isFixedSize ? "inline-block" : "block",
+      width: isFixedSize ? `${fixedSize}px` : "100%",
+      height: isFixedSize ? `${fixedSize}px` : "auto",
+      ...rest,
+    });
+    canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.style.width = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = "1 / 1";
+    container.appendChild(canvas);
+    ctx = canvas.getContext("2d");
+    updateCanvasSize();
+    if (!isFixedSize && typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => resizeCanvas());
+      resizeObserver.observe(container);
+    } else if (!isFixedSize) window.addEventListener("resize", resizeCanvas);
+    startAnimation();
+    setupEvents();
+    if (ref && typeof ref === "function") ref(canvas);
+  };
+
+  initWidget();
+
+  container.onUnmount(() => {
+    if (animationId) cancelAnimationFrame(animationId);
+    if (resizeObserver) resizeObserver?.disconnect();
+    else window.removeEventListener("resize", resizeCanvas);
+  });
+
+  container.updateValue = (newValue, newMax = null) => {
+    if (newMax !== null) max = newMax;
+    value = Math.min(newValue, max);
+    startAnimation();
+  };
+
+  return container;
+};
+
+export default CircularBar;