fiboui 2.9.1 → 2.9.5

package/dist/{index-FuD1J3Qo.js → index-T8F37_p4.js}

@@ -2,10 +2,10 @@ var nt = Object.defineProperty;
 var et = (n, i, t) => i in n ? nt(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
 var d = (n, i, t) => et(n, typeof i != "symbol" ? i + "" : i, t);
 import h from "react";
-import { b2 as T, b3 as B, b7 as $, b6 as m, b9 as z, bu as _, bv as E, bw as b, bx as rt, bd as ot, by as st, bz as lt } from "./client-3NdKI2xE.js";
+import { b2 as T, b3 as B, b7 as $, b6 as m, b9 as A, bv as _, bw as E, bx as b, by as rt, be as ot, bz as st, bA as lt } from "./client-Cc87LXic.js";
 function at(n, i) {
   if (!(typeof i != "string" || !m(i)))
-    for (const t of z(i))
+    for (const t of A(i))
       n.bindSignal(t);
 }
 function L(n, i) {
@@ -68,7 +68,7 @@ class ut extends B {
 const qt = T(ut);
 function pt(n, i) {
   if (!(typeof i != "string" || !m(i)))
-    for (const t of z(i))
+    for (const t of A(i))
       n.bindSignal(t);
 }
 function N(n, i) {
@@ -127,7 +127,7 @@ function _t(n) {
   const i = n.trim().toLowerCase();
   return !bt.test(i) || yt.has(i) ? "div" : i;
 }
-function A(n, i) {
+function z(n, i) {
   const t = `fibo-${i}-`;
   return n.some((e) => e.startsWith(t));
 }
@@ -163,18 +163,18 @@ function wt(n, i) {
   t.paddingLeft = v(t.paddingLeft, "left"), t.paddingRight = v(t.paddingRight, "right"), e && (t.paddingTop = v(t.paddingTop, "top")), r && (t.paddingBottom = v(t.paddingBottom, "bottom"));
 }
 function vt(n, i, t, e) {
-  const r = n, o = r.width != null || e.has("width") || A(t, "width");
+  const r = n, o = r.width != null || e.has("width") || z(t, "width");
   if (i) {
     o || (r.width = "auto");
     return;
   }
   o || (r.width = "100%");
-  const s = r.margin != null && r.margin !== "", l = s || r.marginLeft != null || r.marginInlineStart != null || e.has("margin-left") || A(t, "margin-left"), a = s || r.marginRight != null || r.marginInlineEnd != null || e.has("margin-right") || A(t, "margin-right");
+  const s = r.margin != null && r.margin !== "", l = s || r.marginLeft != null || r.marginInlineStart != null || e.has("margin-left") || z(t, "margin-left"), a = s || r.marginRight != null || r.marginInlineEnd != null || e.has("margin-right") || z(t, "margin-right");
   l || (r.marginLeft = "auto"), a || (r.marginRight = "auto");
 }
 function Ct(n, i, t, e, r, o, s) {
   const l = i ? rt({ ...n, ...i }) : { ...n }, a = St(l, o);
-  return !(a.maxWidth != null || A(r, "max-width") || o.has("max-width")) && t != null && t !== "" && (a.maxWidth = _("maxWidth", t)), vt(a, e, r, o), wt(a, s), a;
+  return !(a.maxWidth != null || z(r, "max-width") || o.has("max-width")) && t != null && t !== "" && (a.maxWidth = _("maxWidth", t)), vt(a, e, r, o), wt(a, s), a;
 }
 class Tt extends B {
   constructor() {
@@ -278,7 +278,7 @@ function M(n) {
 }
 function Bt(n, i) {
   if (!(typeof i != "string" || !m(i)))
-    for (const t of z(i))
+    for (const t of A(i))
       n.bindSignal(t);
 }
 function I(n, i) {
@@ -299,11 +299,11 @@ function I(n, i) {
 function $t(n) {
   return typeof n == "string" && m(n) ? $(n) : n;
 }
-function zt(n, i) {
+function At(n, i) {
   const { children: t, ...e } = i, r = t !== void 0 ? t : n;
   return { nodes: r == null ? [] : Array.isArray(r) ? r : [r], rest: e };
 }
-function At(n, i, t) {
+function zt(n, i, t) {
   if (n == null || typeof n == "boolean") return null;
   const e = i === 0, r = st(t);
   return e ? h.createElement(
@@ -403,7 +403,7 @@ class Lt extends B {
       ...this._classNames
     ], r = this.getStyle();
     r.overflow == null && (r.overflow = "hidden"), this._baseFixedFrame ? (r.width == null && (r.width = `${this._baseFixedFrame.width}px`), r.height == null && (r.height = `${this._baseFixedFrame.height}px`)) : t && r.height == null && r.minHeight == null && (r.height = "fit-content");
-    const { nodes: o, rest: s } = zt(this.processChildren(), this._props), { className: l, ...a } = s, f = [...e, l].filter(Boolean).join(" "), g = o.map($t).map((p, c) => At(p, c, this._alignment));
+    const { nodes: o, rest: s } = At(this.processChildren(), this._props), { className: l, ...a } = s, f = [...e, l].filter(Boolean).join(" "), g = o.map($t).map((p, c) => zt(p, c, this._alignment));
     return h.createElement(
       "div",
       {
@@ -418,7 +418,7 @@ class Lt extends B {
 const Jt = T(Lt);
 function Nt(n, i) {
   if (!(typeof i != "string" || !m(i)))
-    for (const t of z(i))
+    for (const t of A(i))
       n.bindSignal(t);
 }
 function H(n, i) {
@@ -594,7 +594,7 @@ function X(n) {
 }
 function jt(n, i) {
   if (!(typeof i != "string" || !m(i)))
-    for (const t of z(i))
+    for (const t of A(i))
       n.bindSignal(t);
 }
 function R(n, i) {

package/dist/index.d.ts

@@ -1726,6 +1726,34 @@ export declare function applyEdgeSet(set: EdgeSet, value: number | string): {
 	bottom?: number | string;
 	left?: number | string;
 };
+/**
+ * SwiftUI `Material` — glass fills for `.material(Material.ultraThin)`.
+ * Light translucent defaults; pair with `.theme('noir')` / dark bg as needed.
+ */
+export declare const Material: {
+	readonly ultraThin: {
+		readonly blur: 20;
+		readonly background: "rgba(255, 255, 255, 0.35)";
+	};
+	readonly thin: {
+		readonly blur: 28;
+		readonly background: "rgba(255, 255, 255, 0.48)";
+	};
+	readonly regular: {
+		readonly blur: 36;
+		readonly background: "rgba(255, 255, 255, 0.62)";
+	};
+	readonly thick: {
+		readonly blur: 48;
+		readonly background: "rgba(255, 255, 255, 0.78)";
+	};
+	readonly ultraThick: {
+		readonly blur: 60;
+		readonly background: "rgba(255, 255, 255, 0.88)";
+	};
+};
+export type MaterialKind = keyof typeof Material;
+export type MaterialSpec = (typeof Material)[MaterialKind];
 export type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 export type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -2239,6 +2267,16 @@ declare abstract class FiboBuilder {
 	text(color: string | Colors): this;
 	color(value: string | Colors): this;
 	private resolveSemanticColor;
+	/**
+	 * Backdrop blur (glass). Prefer over raw `.backdropFilter('blur(…)')`.
+	 * `20` → `blur(20px)`; also accepts `'20px'` or a full `blur(…)` string.
+	 */
+	backdropBlur(radius?: number | string): this;
+	/**
+	 * SwiftUI `Material` glass fill — blur + translucent background.
+	 * `Box().material(Material.ultraThin)` or `.material('regular')`.
+	 */
+	material(kind: MaterialKind | MaterialSpec): this;
 	shadow(config?: ShadowConfig): this;
 	/**
 	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
@@ -3055,6 +3093,11 @@ declare class ColumnBuilder extends FiboBuilder {
 	alignY(alignment: AlignAxis): this;
 	spacing(value: string | number): this;
 	size(size: "small" | "medium" | "large"): this;
+	/**
+	 * Sugar for `.children(ForEach(data).renderItem(fn))`.
+	 * Prefer `ForEach` when you need `.keyBy()`.
+	 */
+	forEach<T>(items: T[] | readonly T[], renderItem: (item: T, index: number) => unknown): this;
 	build(): React$1.ReactElement;
 }
 export declare const Column: () => StyleBuilder<ColumnBuilder>;
@@ -3087,6 +3130,11 @@ declare class RowBuilder extends FiboBuilder {
 	alignY(alignment: AlignAxis): this;
 	spacing(value: string | number): this;
 	items(children: React$1.ReactElement[]): this;
+	/**
+	 * Sugar for `.children(ForEach(data).renderItem(fn))`.
+	 * Prefer `ForEach` when you need `.keyBy()`.
+	 */
+	forEach<T>(items: T[] | readonly T[], renderItem: (item: T, index: number) => unknown): this;
 	build(): React$1.ReactElement;
 }
 export declare const Row: () => StyleBuilder<RowBuilder>;
@@ -3129,6 +3177,13 @@ interface ScaffoldStructure {
 		height?: string | number;
 		visible?: boolean;
 	};
+	/** Flutter `Scaffold.bottomNavigationBar` chrome metrics. */
+	bottomAppBar?: {
+		position?: "static" | "sticky" | "fixed";
+		height?: string | number;
+		visible?: boolean;
+	};
+	/** @deprecated Use `bottomAppBar`. */
 	footer?: {
 		position?: "static" | "sticky" | "fixed";
 		height?: string | number;
@@ -3154,7 +3209,7 @@ declare class ScaffoldBuilder extends FiboBuilder {
 	private _customProviders;
 	private _structure;
 	private _headerBar?;
-	private _footerBar?;
+	private _bottomAppBar?;
 	private _sideBarLeft?;
 	private _sideBarRight?;
 	private _drawer?;
@@ -3183,7 +3238,13 @@ declare class ScaffoldBuilder extends FiboBuilder {
 	 * set, this is a no-op (explicit chrome wins).
 	 */
 	navigationTitle(title: string | FiboChild): this;
-	footerBar(config: FiboChild | LayoutBarConfig): this;
+	/**
+	 * Flutter `Scaffold.bottomNavigationBar` — typically a {@link BottomAppBar}
+	 * (same three zones as `AppBar`) or a `TabView` / `BottomBar` strip.
+	 */
+	bottomAppBar(config: FiboChild | LayoutBarConfig): this;
+	/** Flutter alias of `.bottomAppBar()`. */
+	bottomNavigationBar(config: FiboChild | LayoutBarConfig): this;
 	sideBarLeft(config: FiboChild | LayoutBarConfig): this;
 	sideBarRight(config: FiboChild | LayoutBarConfig): this;
 	/** Flutter drawer. Starts closed. Open it with `useScaffold().openDrawer()`. */
@@ -3212,7 +3273,7 @@ declare class ScaffoldBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const Scaffold: () => StyleBuilder<ScaffoldBuilder>;
-/** Where a toolbar item sits. Same three slots as Flutter's NavigationToolbar and SwiftUI's top bar. */
+/** Where a toolbar item sits. Flutter NavigationToolbar / SwiftUI top·bottom bar. */
 export type ToolbarPlace = "leading" | "principal" | "trailing";
 declare class ToolbarItemBuilder extends FiboBuilder {
 	private _place;
@@ -3220,11 +3281,11 @@ declare class ToolbarItemBuilder extends FiboBuilder {
 	private _onPress?;
 	private _drawer?;
 	private _disabled;
-	/** SwiftUI `.topBarLeading`. Flutter `AppBar.leading`. */
+	/** SwiftUI `.topBarLeading` / `.bottomBar` leading. Flutter `AppBar.leading`. */
 	leading(): this;
-	/** SwiftUI `.principal`. Flutter `AppBar.title`. */
+	/** SwiftUI `.principal`. Flutter `AppBar.title` / center slot. */
 	principal(): this;
-	/** SwiftUI `.topBarTrailing`. Flutter `AppBar.actions`. */
+	/** SwiftUI `.topBarTrailing` / bottom trailing. Flutter `AppBar.actions`. */
 	trailing(): this;
 	at(place: ToolbarPlace): this;
 	/** Hover label and accessible name. Flutter `tooltip`. */
@@ -3253,6 +3314,19 @@ declare class AppBarBuilder extends FiboBuilder {
 }
 export declare const ToolbarItem: () => StyleBuilder<ToolbarItemBuilder>;
 export declare const AppBar: () => StyleBuilder<AppBarBuilder>;
+declare class BottomAppBarBuilder extends FiboBuilder {
+	private _items;
+	private _floating;
+	/** Same contract as `AppBar().items` — zone via `ToolbarItem` place. */
+	items(children: FiboChildren): this;
+	/**
+	 * iOS-style floating capsule — inset from edges, rounded, shadow.
+	 * Pair with `.resetStyle().material(Material.ultraThin)` for glass.
+	 */
+	floating(value?: boolean): this;
+	build(): React$1.ReactElement;
+}
+export declare const BottomAppBar: () => StyleBuilder<BottomAppBarBuilder>;
 declare class HeaderBuilder extends FiboBuilder {
 	private _height;
 	private _sticky;
@@ -3368,6 +3442,27 @@ declare class LineBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const Line: () => StyleBuilder<LineBuilder>;
+declare class DividerBuilder extends FiboBuilder {
+	private _thickness;
+	private _indent;
+	private _endIndent;
+	private _color;
+	private _height?;
+	/** Flutter `Divider.thickness` — painted line width in px. */
+	thickness(value: number): this;
+	/** Flutter `Divider.height` — outer box height (line is centered when taller). */
+	height(value: number | string): this;
+	/** Flutter `Divider.indent` — leading inset. */
+	indent(value: number): this;
+	/** Flutter `Divider.endIndent` — trailing inset. */
+	endIndent(value: number): this;
+	/** Flutter `Divider.color`. */
+	color(value: string): this;
+	build(): React$1.ReactElement;
+}
+export declare const Divider: () => StyleBuilder<DividerBuilder>;
+/** SwiftUI / common alias — same builder as {@link Divider}. */
+export declare const Separator: () => StyleBuilder<DividerBuilder>;
 /** Flutter-style handle for a mounted ScrollView — no document.querySelector. */
 export declare class ScrollController {
 	private _node;
@@ -4994,6 +5089,7 @@ declare class ListItemStyleBuilder extends CssStyleStore {
 	style(extra: React$1.CSSProperties): this;
 }
 type ListVariant$1 = "default" | "card" | "floating";
+type ListSeparator = boolean | FiboChild | ((index: number) => FiboChild);
 declare class ListBuilder<T = any> extends FiboBuilder {
 	private _items;
 	/** Plain `signal(array)`. Read on each rebuild. */
@@ -5003,6 +5099,7 @@ declare class ListBuilder<T = any> extends FiboBuilder {
 	private _renderItem?;
 	private _onItemPress?;
 	private _variant;
+	/** Flutter `ListView.separated` — see {@link ListBuilder.separator}. */
 	private _separator;
 	private _onEndReached?;
 	private _loading;
@@ -5063,7 +5160,26 @@ declare class ListBuilder<T = any> extends FiboBuilder {
 	 */
 	empty(content: FiboChild | (() => FiboChild)): this;
 	variant(variant: ListVariant$1): this;
-	separator(show?: boolean): this;
+	/**
+	 * Flutter `ListView.separated` — paint a widget **between** rows only
+	 * (never before the first or after the last). The value itself is the build:
+	 *
+	 * ```ts
+	 * // default Material hairline (Divider)
+	 * List().items(rows).separator().renderItem(…)
+	 *
+	 * // fixed custom separator (any builder / node)
+	 * List().items(rows).separator(Divider().indent(16).color('#ccc'))
+	 * List().items(rows).separator(Text('·').alignX('center'))
+	 * List().items(rows).separator(Row().gap(8).children([Line(), Text('OR'), Line()]))
+	 *
+	 * // build each gap — index is 0 … itemCount-2
+	 * List().items(rows).separator((i) =>
+	 *   i === 2 ? Text('Section') : Divider().indent(16)
+	 * )
+	 * ```
+	 */
+	separator(value?: ListSeparator): this;
 	onEndReached(handler: () => void): this;
 	loading(isLoading: boolean): this;
 	threshold(value: number): this;
@@ -5096,6 +5212,29 @@ declare class ListBuilder<T = any> extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const List: <T = any>() => StyleBuilder<ListBuilder<T>>;
+export type ForEachSource<T> = readonly T[] | T[] | (() => readonly T[] | T[]) | BindableSignal<readonly T[] | T[]>;
+declare class ForEachBuilder<T = unknown> extends FiboBuilder {
+	private _source?;
+	private _renderItem?;
+	private _keyBy?;
+	constructor(source?: ForEachSource<T>, renderItem?: (item: T, index: number) => unknown);
+	/** Data: array, `() => array`, or bindable / `listSignal` (read `.value` at build). */
+	items(source: ForEachSource<T>): this;
+	/** Factory per item — same idea as `List.renderItem`. */
+	renderItem(fn: (item: T, index: number) => unknown): this;
+	/**
+	 * Stable React key per item.
+	 * Defaults to `id` / `_id` / `key` on objects, else index.
+	 * (Not `.id()` — that sets the host HTML id on `FiboBuilder`.)
+	 */
+	keyBy(fn: (item: T, index: number) => string | number): this;
+	build(): React$1.ReactElement;
+}
+export declare const ForEach: <T = unknown>(source?: ForEachSource<T> | undefined, renderItem?: ((item: T, index: number) => unknown) | undefined) => StyleBuilder<ForEachBuilder<T>>;
+declare class GroupBuilder extends FiboBuilder {
+	build(): React$1.ReactElement;
+}
+export declare const Group: () => StyleBuilder<GroupBuilder>;
 declare class SectionBuilder extends FiboBuilder {
 	private _header?;
 	private _footer?;
@@ -5859,14 +5998,31 @@ interface TabViewTab {
 	value: string;
 	label: React$1.ReactNode;
 	child?: React$1.ReactNode;
+	icon?: React$1.ReactNode;
 }
+type TabBarPosition = "top" | "bottom" | "none";
 declare class TabViewBuilder extends FiboBuilder {
 	private _tabs;
 	private _value?;
 	private _onChange?;
+	private _barPosition;
+	private _swipe;
+	private _keepAlive;
 	tabs(items: TabViewTab[]): this;
 	value(value: string): this;
 	onChange(handler: (value: string) => void): this;
+	/**
+	 * Tablist placement. Default `bottom` (Material / pairs with `BottomAppBar`).
+	 * `none` — panels only; put your own bar in `BottomAppBar().items(…)`.
+	 */
+	barPosition(position: TabBarPosition): this;
+	/** Horizontal drag between pages. Default true. CSS transform + snap. */
+	swipe(enabled?: boolean): this;
+	/**
+	 * Keep neighboring / all panels mounted (React.memo + Activity).
+	 * Default true. `false` mounts only the active tab ±1.
+	 */
+	keepAlive(enabled?: boolean): this;
 	build(): React$1.ReactElement;
 }
 export declare const TabView: () => StyleBuilder<TabViewBuilder>;
@@ -5992,6 +6148,8 @@ export {
 	Store as ReactiveStore,
 	Store$1 as Store,
 	Text$1 as Text,
+	VirtualColumn as LazyVStack,
+	VirtualRow as LazyHStack,
 	open$1 as open,
 	scrollTo$1 as scrollTo,
 };