flet-box 1.0.4 → 1.0.6

package/src/animations/animate.js

@@ -3,11 +3,16 @@
  *
  * Provides two tiers of animation helpers:
  * - **Fire-and-forget** (`animate`, `fadeOut`, `fadeIn`, `pulse`): start an
- *   animation and move on — no way to await completion.
+ *   animation and move on — each returns a cancel function instead of awaiting.
  * - **Async/awaitable** (`animateAsync`, `fadeOutAsync`, `fadeInAsync`,
  *   `pulseAsync`): return a Promise that resolves when the animation finishes,
  *   allowing sequential composition with `await`.
  *
+ * Every loop is registered per widget and property, so starting a second
+ * animation on the same property replaces the first (two loops writing one style
+ * fight each other), and {@link stopAnimation} ends whatever is still running on
+ * a widget — the usual cleanup an unmount needs when the caller kept no handle.
+ *
  * All functions drive the browser's `requestAnimationFrame` loop directly and
  * do not rely on CSS transitions or the Web Animations API.
  *
@@ -162,6 +167,151 @@ const writeAnimatedValue = (widget, property, value) => {
   widget[property] = value;
 };
 
+// ========== ACTIVE LOOP REGISTRY ==========
+
+/**
+ * Live loops by widget and property.
+ *
+ * Two loops writing the same style property fight each other: the older one keeps
+ * overwriting the newer value on every frame and neither can be stopped. The
+ * registry lets a fresh animation replace whatever already animates that
+ * property, and lets {@link stopAnimation} end loops whose caller never kept the
+ * handle — the usual case for a widget that unmounts mid-fade.
+ *
+ * @type {WeakMap<object, Map<string, { raf: number, running: boolean, cancel: () => boolean }>>}
+ */
+const activeLoops = new WeakMap();
+
+const isTrackable = (widget) =>
+  widget !== null &&
+  (typeof widget === "object" || typeof widget === "function");
+
+const registerLoop = (widget, property, state) => {
+  if (!isTrackable(widget)) return;
+  let byProperty = activeLoops.get(widget);
+  if (!byProperty) {
+    byProperty = new Map();
+    activeLoops.set(widget, byProperty);
+  }
+  byProperty.set(property, state);
+};
+
+const unregisterLoop = (widget, property, state) => {
+  if (!isTrackable(widget)) return;
+  const byProperty = activeLoops.get(widget);
+  if (byProperty && byProperty.get(property) === state) byProperty.delete(property);
+};
+
+/**
+ * Stops the animation currently running on a widget.
+ *
+ * @param {HTMLElement|object} widget - The animated widget or DOM element.
+ * @param {string} [property] - Stop only this property; every animated property when omitted.
+ * @returns {boolean} True when at least one loop was stopped.
+ */
+export const stopAnimation = (widget, property) => {
+  if (!isTrackable(widget)) return false;
+  const byProperty = activeLoops.get(widget);
+  if (!byProperty) return false;
+
+  if (property !== undefined) {
+    const state = byProperty.get(property);
+    if (!state) return false;
+    return state.cancel();
+  }
+
+  const loops = Array.from(byProperty.values());
+  loops.forEach((state) => state.cancel());
+  return loops.length > 0;
+};
+
+/**
+ * Runs one property animation and returns its cancel function.
+ *
+ * Shared engine behind `animate`, `animateAsync` and `pulse`, so all three get
+ * the same guarantees: the loop is bounded by a sanitised duration, it replaces
+ * any animation already driving that property, and it stops the moment its
+ * handle is called.
+ *
+ * @param {HTMLElement|object} widget
+ * @param {string} property
+ * @param {number|string} from - Starting value; reads the widget when `undefined`.
+ * @param {number|string} to
+ * @param {number} duration
+ * @param {string} easing
+ * @param {(progress: number) => number|string} [valueAt] - Custom value curve,
+ *   receiving eased progress in `[0, 1]`. Used by `pulse` to keep the whole
+ *   up-and-down gesture inside a single cancelable loop.
+ * @param {(progress: number) => number|string} [valueAt] - Custom value curve,
+ *   receiving eased progress in `[0, 1]`. Used by `pulse` to keep the whole
+ *   up-and-down gesture inside a single cancelable loop.
+ * @param {(widget: HTMLElement|object) => void} [onDone] - Called when the loop
+ *   ends — also when it is cancelled or replaced, so awaiting code never hangs.
+ * @returns {() => boolean} Cancel function; true when it stopped a live loop.
+ */
+const runAnimation = (
+  widget,
+  property,
+  from,
+  to,
+  duration,
+  easing,
+  valueAt,
+  onDone,
+) => {
+  // A negative duration makes elapsed/duration increasingly negative, so progress
+  // never reaches 1 and the loop re-arms forever (and `animateAsync` never
+  // resolves). Clamping the progress is not enough — it just sits at 0 and
+  // `0 < 1` stays true — so sanitise the duration itself. `0` collapses to one frame.
+  const safeDuration = Math.max(0, Number(duration) || 0);
+  const startValue = from !== undefined ? from : readAnimatedValue(widget, property);
+
+  // Replace the loop already animating this property instead of racing it.
+  stopAnimation(widget, property);
+
+  const startTime = performance.now();
+  const state = { raf: 0, running: true, cancel: null };
+
+  const finish = () => {
+    if (!state.running) return;
+    state.running = false;
+    unregisterLoop(widget, property, state);
+    if (onDone) onDone(widget);
+  };
+
+  state.cancel = () => {
+    if (!state.running) return false;
+    cancelAnimationFrame(state.raf);
+    finish();
+    return true;
+  };
+
+  registerLoop(widget, property, state);
+
+  const step = (currentTime) => {
+    if (!state.running) return;
+    const progress = Math.max(
+      0,
+      Math.min(1, (currentTime - startTime) / safeDuration),
+    );
+    const easedProgress = getEasing(easing, progress);
+    const currentValue = valueAt
+      ? valueAt(easedProgress)
+      : interpolate(startValue, to, easedProgress);
+
+    writeAnimatedValue(widget, property, currentValue);
+
+    if (progress < 1) {
+      state.raf = requestAnimationFrame(step);
+      return;
+    }
+    finish();
+  };
+
+  state.raf = requestAnimationFrame(step);
+  return state.cancel;
+};
+
 // ========== FIRE AND FORGET (No Promise) ==========
 
 /**
@@ -176,7 +326,9 @@ const writeAnimatedValue = (widget, property, value) => {
  * @param {number|string}      to            - Ending value.
  * @param {number}             [duration=300] - Animation duration in milliseconds.
  * @param {string}             [easing="linear"] - Easing curve name (see {@link getEasing}).
- * @returns {void}
+ * @returns {() => boolean} Cancel function — true if it stopped a loop still running.
+ *   The animation also stops on its own when a new animation takes the same property,
+ *   or via {@link stopAnimation}.
  */
 export const animate = (
   widget,
@@ -185,34 +337,7 @@ export const animate = (
   to,
   duration = 300,
   easing = "linear",
-) => {
-  // A negative duration makes elapsed/duration increasingly negative, so the
-  // loop re-armed forever and the property was driven backwards. Clamping the
-  // progress is not enough (it just sits at 0 and `0 < 1` stays true), so
-  // sanitise the duration itself. `0` collapses to a single frame.
-  duration = Math.max(0, Number(duration) || 0);
-  const startTime = performance.now();
-  const startValue = from !== undefined ? from : readAnimatedValue(widget, property);
-  const endValue = to;
-
-  const step = (currentTime) => {
-    const elapsed = currentTime - startTime;
-    // Clamp both ends. A negative `duration` makes elapsed/duration increasingly
-    // negative, so `progress` never reached 1 and the loop re-armed forever (and
-    // `animateAsync` never resolved). `duration: 0` yields Infinity, clamped to 1.
-    const progress = Math.max(0, Math.min(1, elapsed / duration));
-    const easedProgress = getEasing(easing, progress);
-    const currentValue = interpolate(startValue, endValue, easedProgress);
-
-    writeAnimatedValue(widget, property, currentValue);
-
-    if (progress < 1) {
-      requestAnimationFrame(step);
-    }
-  };
-
-  requestAnimationFrame(step);
-};
+) => runAnimation(widget, property, from, to, duration, easing, null);
 
 // ========== ASYNC ANIMATION (Returns Promise) ==========
 
@@ -228,7 +353,8 @@ export const animate = (
  * @param {number|string}      to            - Ending value.
  * @param {number}             [duration=300] - Animation duration in milliseconds.
  * @param {string}             [easing="linear"] - Easing curve name (see {@link getEasing}).
- * @returns {Promise<HTMLElement|object>} Resolves with `widget` when the animation finishes.
+ * @returns {Promise<HTMLElement|object>} Resolves with `widget` when the animation
+ *   finishes — or as soon as it is cancelled or replaced, so `await` never hangs.
  */
 export const animateAsync = (
   widget,
@@ -237,35 +363,12 @@ export const animateAsync = (
   to,
   duration = 300,
   easing = "linear",
-) => {
-  // See `animate`: a negative duration would keep the loop alive forever and this
-  // promise would never resolve.
-  duration = Math.max(0, Number(duration) || 0);
-  return new Promise((resolve) => {
-    const startTime = performance.now();
-    const startValue = from !== undefined ? from : readAnimatedValue(widget, property);
-    const endValue = to;
-
-    const step = (currentTime) => {
-      const elapsed = currentTime - startTime;
-      // Same clamp as `animate`: a negative `duration` would otherwise never
-      // reach progress 1 and this promise would never resolve.
-      const progress = Math.max(0, Math.min(1, elapsed / duration));
-      const easedProgress = getEasing(easing, progress);
-      const currentValue = interpolate(startValue, endValue, easedProgress);
-
-      writeAnimatedValue(widget, property, currentValue);
-
-      if (progress < 1) {
-        requestAnimationFrame(step);
-      } else {
-        resolve(widget);
-      }
-    };
-
-    requestAnimationFrame(step);
+) =>
+  new Promise((resolve) => {
+    // `resolve` runs on completion AND when the loop is cancelled or replaced, so
+    // an `await` chain cannot hang on an animation that never got to finish.
+    runAnimation(widget, property, from, to, duration, easing, null, resolve);
   });
-};
 
 // ========== HELPER FUNCTIONS (Fire and Forget) ==========
 
@@ -275,10 +378,10 @@ export const animateAsync = (
  *
  * @param {HTMLElement|object} widget        - The target widget.
  * @param {number}             [duration=300] - Fade duration in milliseconds.
- * @returns {void}
+ * @returns {() => boolean} Cancel function (see {@link animate}).
  */
 export const fadeOut = (widget, duration = 300) => {
-  animate(widget, "opacity", 1, 0, duration);
+  return animate(widget, "opacity", 1, 0, duration);
 };
 
 /**
@@ -287,10 +390,10 @@ export const fadeOut = (widget, duration = 300) => {
  *
  * @param {HTMLElement|object} widget        - The target widget.
  * @param {number}             [duration=300] - Fade duration in milliseconds.
- * @returns {void}
+ * @returns {() => boolean} Cancel function (see {@link animate}).
  */
 export const fadeIn = (widget, duration = 300) => {
-  animate(widget, "opacity", 0, 1, duration);
+  return animate(widget, "opacity", 0, 1, duration);
 };
 
 /**
@@ -301,14 +404,21 @@ export const fadeIn = (widget, duration = 300) => {
  * @param {HTMLElement|object} widget        - The target widget.
  * @param {number}             [duration=300] - Total pulse duration in milliseconds
  *   (split evenly between scale-up and scale-down).
- * @returns {void}
+ * @returns {() => boolean} Cancel function (see {@link animate}).
  */
-export const pulse = (widget, duration = 300) => {
-  animate(widget, "scale", 1, 1.1, duration / 2);
-  setTimeout(() => {
-    animate(widget, "scale", 1.1, 1, duration / 2);
-  }, duration / 2);
-};
+export const pulse = (widget, duration = 300) =>
+  runAnimation(
+    widget,
+    "scale",
+    1,
+    1,
+    duration,
+    "linear",
+    // One loop with a triangular curve instead of an animation plus a
+    // `setTimeout`: the timer used to start phase two on a widget that had
+    // already been removed from the DOM, and nothing could cancel it.
+    (progress) => interpolate(1, 1.1, progress < 0.5 ? progress * 2 : 2 - progress * 2),
+  );
 
 // ========== ASYNC HELPER FUNCTIONS (Returns Promise) ==========
 

package/src/animations/index.js

@@ -16,6 +16,7 @@ export { MatrixRain } from "./MatrixRain.js";
 export {
 	animate,
 	animateAsync,
+	stopAnimation,
 	fadeOut,
 	fadeIn,
 	pulse,

package/src/create-index.sh

@@ -32,7 +32,7 @@ export {
     useState, useWatchState,
     tokenize, generateHighlightedHtml, highlightColors,
     parseMarkdown, parseInlineMarkdown, escapeHtml, wrapListItems,
-    animate, fadeOut, fadeIn, pulse,
+    animate, stopAnimation, fadeOut, fadeIn, pulse,
     applyStripes, removeStripes, applyShimmer, applyGlow,
     applyIndeterminate, applyPulse, injectKeyframes,
     Gradient, Shadow, rgba, stackPosition,

package/src/index.d.ts

@@ -36,10 +36,15 @@ declare module 'flet-box' {
   export interface CommonProps {
     width?: Size;
     height?: Size;
-    size?: number;
+    // `Size`, not `number`: for a Text this is a font size and for a Button it is
+    // the `small | medium | large` preset — the widget decides which it reads.
+    size?: Size;
     padding?: Padding;
     margin?: Margin;
     bgColor?: Color;
+    // Alias kept because the engine routes it and every generated template uses
+    // it: `bgColor` is the Flet-style short name for the same style.
+    backgroundColor?: Color;
     color?: Color;
     borderRadius?: number | string;
     elevation?: number;
@@ -203,10 +208,10 @@ declare module 'flet-box' {
     gap?: number | string;
     justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
-    wrap?: boolean;
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
     child?: Widget;
     children?: Widget[];
-    expand?: boolean;
+    expand?: boolean | number;
     flex?: number;
     minHeight?: Size;
     maxHeight?: Size;
@@ -220,7 +225,7 @@ declare module 'flet-box' {
     gap?: number | string;
     justifyContent?: ContainerProps['justifyContent'];
     alignItems?: ContainerProps['alignItems'];
-    wrap?: boolean;
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
     children?: Widget[];
     onPress?: (widget: Widget) => void;
   }
@@ -259,7 +264,7 @@ declare module 'flet-box' {
     ListEmptyComponent?: (() => Widget) | Widget;
     showsScrollIndicator?: boolean;
     bufferSize?: number;
-    expand?: boolean;
+    expand?: boolean | number;
   }
   export function ListView(props: ListViewProps): Widget & {
     data: any[];
@@ -375,6 +380,12 @@ declare module 'flet-box' {
     title?: string | Widget;
     subtitle?: string | Widget;
     description?: string | Widget;
+    /** Text props merged into the title, e.g. `{ size: 16, weight: "700" }`. */
+    titleProps?: Partial<TextProps>;
+    /** Text props merged into the subtitle. */
+    subtitleProps?: Partial<TextProps>;
+    /** Text props merged into the description line. */
+    descriptionProps?: Partial<TextProps>;
     rightItem?: Widget;
     onPress?: (widget: Widget) => void;
     selected?: boolean;
@@ -522,7 +533,7 @@ declare module 'flet-box' {
     updateValue(newValue: string | number): void;
   };
 
-  export interface SliderProps extends CommonProps {
+  export interface SliderProps extends Omit<CommonProps, 'onPress'> {
     value?: number;
     min?: number;
     max?: number;
@@ -544,6 +555,9 @@ declare module 'flet-box' {
     animatedStripes?: boolean;
     stripeColor?: string;
     glow?: boolean;
+    /** Canonical press/change callback, like every other FletBox widget. */
+    onPress?: (value: number) => void;
+    /** @deprecated Alias of `onPress`. */
     onChanged?: (value: number) => void;
     onChangeEnd?: (value: number) => void;
   }
@@ -588,7 +602,7 @@ declare module 'flet-box' {
     update(props: Partial<AccordionProps>): void;
   };
 
-  export interface DividerProps extends CommonProps {
+  export interface DividerProps extends Omit<CommonProps, 'margin'> {
     color?: Color;
     thickness?: number;
     margin?: number | { top?: number; right?: number; bottom?: number; left?: number };
@@ -857,6 +871,7 @@ declare module 'flet-box' {
     navSideBarWidth?: number;
     navSideBarPosition?: 'left' | 'right';
     routes?: Record<string, any>;
+    basePath?: string;
     backgroundColor?: Color;
     closeDrawerOnNavigate?: boolean;
   }
@@ -893,7 +908,7 @@ declare module 'flet-box' {
     closeDrawer?(): void;
   };
 
-  export interface AppBarProps extends CommonProps {
+  export interface AppBarProps extends Omit<CommonProps, 'shadow'> {
     title?: string | Widget;
     leading?: Widget;
     actions?: Widget[];
@@ -915,7 +930,7 @@ declare module 'flet-box' {
     margin?: Margin;
     padding?: Padding;
     borderRadius?: number;
-    shadow?: boolean;
+    shadow?: boolean | string;
   }
   export function AppBar(props: AppBarProps): Widget & {
     setTitle(title: string): void;
@@ -971,7 +986,7 @@ declare module 'flet-box' {
   export function toggleDrawer(): void;
   export function destroyDrawer(): void;
 
-  export interface BottomNavigationProps extends CommonProps {
+  export interface BottomNavigationProps extends Omit<CommonProps, 'shadow'> {
     items: Array<{ icon: string; label?: string; route?: string; onPress?: () => void }>;
     currentIndex?: number;
     onTabChange?: (index: number) => void;
@@ -984,7 +999,7 @@ declare module 'flet-box' {
     margin?: Margin;
     borderRadius?: number;
     padding?: Padding;
-    shadow?: boolean;
+    shadow?: boolean | string;
     elevation?: number;
     useRouter?: boolean;
   }
@@ -1141,7 +1156,8 @@ declare module 'flet-box' {
     to: any,
     duration?: number,
     easing?: string
-  ): void;
+  ): () => boolean;
+  export function stopAnimation(widget: Widget, property?: string): boolean;
   export function animateAsync(
     widget: Widget,
     property: string,
@@ -1150,9 +1166,9 @@ declare module 'flet-box' {
     duration?: number,
     easing?: string
   ): Promise<Widget>;
-  export function fadeOut(widget: Widget, duration?: number): void;
-  export function fadeIn(widget: Widget, duration?: number): void;
-  export function pulse(widget: Widget, duration?: number): void;
+  export function fadeOut(widget: Widget, duration?: number): () => boolean;
+  export function fadeIn(widget: Widget, duration?: number): () => boolean;
+  export function pulse(widget: Widget, duration?: number): () => boolean;
   export function fadeOutAsync(widget: Widget, duration?: number): Promise<Widget>;
   export function fadeInAsync(widget: Widget, duration?: number): Promise<Widget>;
   export function pulseAsync(widget: Widget, duration?: number): Promise<Widget>;
@@ -1192,7 +1208,7 @@ declare module 'flet-box' {
     updateColumns(columns: DataTableColumn[]): void;
   };
 
-  export interface ChartProps extends CommonProps {
+  export interface ChartProps extends Omit<CommonProps, 'padding'> {
     type?: 'bar' | 'line' | 'area' | 'candle';
     data: number[] | Array<{ open: number; high: number; low: number; close: number }>;
     labels?: string[];
@@ -1494,7 +1510,7 @@ declare module 'flet-box' {
   }
   export function InstallButton(props: InstallButtonProps): Widget;
 
-  export interface VideoProps extends CommonProps {
+  export interface VideoProps extends Omit<CommonProps, 'ref'> {
     src: string;
     width?: number | string;
     height?: number | string;
@@ -1516,7 +1532,7 @@ declare module 'flet-box' {
     unmuteVideo(): void;
   };
 
-  export interface AudioProps extends CommonProps {
+  export interface AudioProps extends Omit<CommonProps, 'ref'> {
     src: string;
     autoplay?: boolean;
     controls?: boolean;
@@ -1547,7 +1563,7 @@ declare module 'flet-box' {
     isPlaying(): boolean;
   };
 
-  export interface CircularBarProps extends CommonProps {
+  export interface CircularBarProps extends Omit<CommonProps, 'onClick' | 'ref'> {
     value?: number;
     max?: number;
     size?: number;
@@ -1597,7 +1613,7 @@ declare module 'flet-box' {
     color?: Color;
   }
 
-  export interface CircularChartProps extends CommonProps {
+  export interface CircularChartProps extends Omit<CommonProps, 'onClick' | 'ref'> {
     data?: CircularChartSlice[];
     size?: number;
     strokeWidth?: number;
@@ -1920,7 +1936,12 @@ declare module 'flet-box' {
   export function padding(value: number | string | { all?: number; horizontal?: number; vertical?: number; top?: number; right?: number; bottom?: number; left?: number }): string;
   export function gradient(type: 'linear' | 'circle' | 'conic', colors: string[], angle?: number): string;
   export function shadow(x: number, y: number, blur: number, spread: number, color: string): string;
-  export const color: (value: string) => {
+  /**
+   * Fluent color instance returned by `color()`. The chained methods mutate this
+   * very instance and return it, which is why their type is `this` and not a
+   * fixed interface name.
+   */
+  export interface ColorInstance {
     hex(): string;
     rgb(): string;
     rgba(): string;
@@ -1931,7 +1952,9 @@ declare module 'flet-box' {
     isDark(): boolean;
     isLight(): boolean;
     contrast(): string;
-  };
+  }
+
+  export const color: (value: string) => ColorInstance;
   export function rgba(r: number, g: number, b: number, a?: number): string;
   export function stackPosition(widget: Widget, props: { top?: any; right?: any; bottom?: any; left?: any }): Widget;
   export function flex(grow: number | { grow?: number; shrink?: number; basis?: string }, shrink?: number, basis?: string): string;

package/src/index.js

@@ -280,6 +280,7 @@ export {
   ParallaxBox,
   animate,
   animateAsync,
+  stopAnimation,
   fadeIn,
   fadeOut,
   pulse,

package/src/navigations/AdaptiveScaffold.js

@@ -81,7 +81,10 @@ export const AdaptiveScaffold = (props) => {
       // button to drawerInstance.open().
       drawerInstance = Drawer({
         header: null,
-        body: [content],
+        // `body` is an array of widgets, and `leftNavBar` may itself be one, so
+        // the content is flattened here. A nested array would reach `children`
+        // as a single item and break the append.
+        body: Array.isArray(content) ? content : [content],
         footer: null,
         position: "left",
         width: leftNavBarWidth,
@@ -125,6 +128,12 @@ export const AdaptiveScaffold = (props) => {
       widthExpanded: rightNavBarWidth,
       widthCollapsed: 50,
       bgColor: colors.surface,
+      // FIX: CollapsibleSideBar aplica `borderRight` por defecto (default
+      // `1px solid ${colors.border}`), así que un sidebar derecho acababa
+      // con doble borde: `borderRight` (heredado del default) + `borderLeft`
+      // (el que pedimos aquí). Forzamos `borderRight: "none"` para que solo
+      // tenga el borde izquierdo (el que da al contenido central).
+      borderRight: "none",
       borderLeft: `1px solid ${colors.border}`,
       children: content,
     });
@@ -146,4 +155,4 @@ export const AdaptiveScaffold = (props) => {
   });
 };
 
-export default AdaptiveScaffold;
+export default AdaptiveScaffold;

package/src/navigations/BottomNavigation.js

@@ -149,6 +149,7 @@ export const BottomNavigation = (props) => {
     if (!useRouter) return;
 
     const currentPath = getCurrentPath();
+    const previousIndex = activeIndex;
 
     buttons.forEach((btnData, idx) => {
       const isSelected = btnData.route === currentPath;
@@ -163,7 +164,10 @@ export const BottomNavigation = (props) => {
       if (isSelected) activeIndex = idx;
     });
 
-    if (onTabChange) onTabChange(activeIndex);
+    // Fire only when the route actually moved the selection. A consumer that
+    // navigates from `onTabChange` (the normal case) would otherwise recurse:
+    // route change -> callback -> goTo -> route change, until the stack blows.
+    if (activeIndex !== previousIndex && onTabChange) onTabChange(activeIndex);
   };
 
   // ========== BUILD TAB BUTTONS ==========
@@ -214,8 +218,11 @@ export const BottomNavigation = (props) => {
 
     let labelWidget = null;
     if (showLabels && item.label) {
+      // FIX: `value` es una prop `special` que `applySpecial` solo maneja
+      // en <input>/<textarea>. En un <span> no hace nada → el label quedaba
+      // vacío. La prop correcta para contenido de texto es `text`.
       labelWidget = Text({
-        value: item.label,
+        text: item.label,
         size: 11,
         color: isActive ? selectedColor : unselectedColor,
         fontWeight: isActive ? "500" : "400",
@@ -307,4 +314,4 @@ export const BottomNavigation = (props) => {
   return container;
 };
 
-export default BottomNavigation;
+export default BottomNavigation;

package/src/navigations/Tabs.js

@@ -67,7 +67,11 @@ export const Tabs = (props) => {
     size = "medium",
     color = colors.primary,
     textColor = colors.text,
-    activeTextColor = colors.white,
+    // FIX: `colors.white` no existe en themes.js → caía a `undefined`
+    // y el tab activo no se distinguía visualmente. Uso `colors.background`
+    // (que es "#ffffff" en el tema claro y "#0f172a" en el oscuro, que es
+    // lo correcto: contraste sobre el fondo del tab activo).
+    activeTextColor = colors.background,
     bgColor = colors.gray100,
     buttonColor = colors.secondary,
     alignment = "left",
@@ -409,4 +413,4 @@ export const Tabs = (props) => {
   return container;
 };
 
-export default Tabs;
+export default Tabs;