fiboui 2.9.4 → 2.9.6

package/dist/{index-C_GtMcVT.js → index-vSLH4ZkD.js}

@@ -1,49 +1,49 @@
 var w = Object.defineProperty;
 var S = (s, e, t) => e in s ? w(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var n = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
+var r = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
 import m from "react";
-import { b2 as g, b3 as d, ba as N, bb as C, b7 as j, b6 as _, b9 as z } from "./client-lzMYg4vy.js";
-function B(s, e) {
+import { b2 as g, b3 as d, ba as N, bb as C, bc as j, b7 as z, b6 as _, b9 as B } from "./client-DspTEDnT.js";
+function I(s, e) {
   if (!(typeof e != "string" || !_(e)))
-    for (const t of z(e))
+    for (const t of B(e))
       s.bindSignal(t);
 }
-function l(s, e) {
+function h(s, e) {
   if (typeof e == "function") {
     try {
-      l(s, e());
+      h(s, e());
     } catch {
     }
     return;
   }
   if (typeof e == "string") {
-    B(s, e);
+    I(s, e);
     return;
   }
   if (Array.isArray(e))
-    for (const t of e) l(s, t);
+    for (const t of e) h(s, t);
 }
-function I(s) {
-  return typeof s == "string" && _(s) ? j(s) : s;
+function E(s) {
+  return typeof s == "string" && _(s) ? z(s) : s;
 }
 function M(s, e) {
-  const { children: t, ...r } = e, o = t !== void 0 ? t : s;
-  return { nodes: o == null ? [] : Array.isArray(o) ? o : [o], rest: r };
+  const { children: t, ...n } = e, o = t !== void 0 ? t : s;
+  return { nodes: o == null ? [] : Array.isArray(o) ? o : [o], rest: n };
 }
 class $ extends d {
   constructor() {
     super(...arguments);
-    n(this, "_mainAxisAlignment", "start");
+    r(this, "_mainAxisAlignment", "start");
     // Flutter Column / SwiftUI VStack default: center. Stretch is opt-in.
-    n(this, "_crossAxisAlignment", "center");
-    n(this, "_spacing");
-    n(this, "_size");
+    r(this, "_crossAxisAlignment", "center");
+    r(this, "_spacing");
+    r(this, "_size");
   }
   children(t) {
-    return l(this, t), super.children(t);
+    return h(this, t), super.children(t);
   }
   props(t) {
-    return t && "children" in t && l(this, t.children), super.props(t);
+    return t && "children" in t && h(this, t.children), super.props(t);
   }
   mainAxisAlignment(t) {
     return this._mainAxisAlignment = t, this;
@@ -65,6 +65,13 @@ class $ extends d {
   size(t) {
     return this._size = t, this;
   }
+  /**
+   * Sugar for `.children(ForEach(data).renderItem(fn))`.
+   * Prefer `ForEach` when you need `.keyBy()`.
+   */
+  forEach(t, n) {
+    return this.children(j(t).renderItem(n));
+  }
   build() {
     const t = {
       start: "justify-start",
@@ -73,7 +80,7 @@ class $ extends d {
       spaceBetween: "justify-between",
       spaceAround: "justify-around",
       spaceEvenly: "justify-evenly"
-    }, r = {
+    }, n = {
       start: "items-start",
       center: "items-center",
       end: "items-end",
@@ -89,11 +96,11 @@ class $ extends d {
       // min-w-0 / min-h-0: shrink inside flex/grid so nested overflow can scroll
       this.isHug() ? "w-auto self-auto" : "w-full min-w-0 min-h-0",
       t[this._mainAxisAlignment],
-      r[this._crossAxisAlignment],
+      n[this._crossAxisAlignment],
       this._size ? o[this._size] : "",
       ...this._classNames
-    ], h = this.getStyle(), { nodes: c, rest: p } = M(this.processChildren(), this._props), { className: x, style: u, ...y } = p, A = [...i, x].filter(Boolean).join(" "), b = c.map(I), a = {
-      ...h,
+    ], l = this.getStyle(), { nodes: c, rest: p } = M(this.processChildren(), this._props), { className: x, style: u, ...y } = p, A = [...i, x].filter(Boolean).join(" "), b = c.map(E), a = {
+      ...l,
       ...u && typeof u == "object" ? u : {}
     };
     return this._spacing != null && this._spacing !== "" && (typeof this._spacing == "number" ? a.gap = `${this._spacing}px` : isNaN(Number(this._spacing)) ? a.gap = this._spacing : a.gap = `${Number(this._spacing) * 4}px`), m.createElement(
@@ -107,20 +114,20 @@ class $ extends d {
     );
   }
 }
-const R = g($);
+const T = g($);
 function f(s) {
   return typeof s == "number" ? `${s}px` : s;
 }
-function E(s) {
+function F(s) {
   return s && typeof s == "object" && !Array.isArray(s) ? s : {};
 }
 class H extends d {
   constructor() {
     super(...arguments);
-    n(this, "_height");
-    n(this, "_width");
-    n(this, "_grow");
-    n(this, "_expand");
+    r(this, "_height");
+    r(this, "_width");
+    r(this, "_grow");
+    r(this, "_expand");
   }
   height(t) {
     return this._height = t, this;
@@ -136,11 +143,11 @@ class H extends d {
   }
   /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
   flex(t = 1) {
-    const r = typeof t == "number" ? t : Number(t);
-    return this._grow = Number.isFinite(r) ? r : 1, this._expand = !0, this;
+    const n = typeof t == "number" ? t : Number(t);
+    return this._grow = Number.isFinite(n) ? n : 1, this._expand = !0, this;
   }
   build() {
-    const { className: t, style: r, ...o } = this._props, i = { ...this.getStyle(), ...E(r) }, h = this._height != null || this._width != null, c = this._expand ?? !h;
+    const { className: t, style: n, ...o } = this._props, i = { ...this.getStyle(), ...F(n) }, l = this._height != null || this._width != null, c = this._expand ?? !l;
     this._height != null && (i.height = f(this._height)), this._width != null && (i.width = f(this._width)), c ? (i.flex = `${this._grow ?? 1} 1 0%`, i.alignSelf = i.alignSelf ?? "stretch", i.minWidth = i.minWidth ?? 0, i.minHeight = i.minHeight ?? 0) : i.flex = "0 0 auto";
     const p = ["fibo-spacer", this.getClassName(), t].filter(Boolean).join(" ");
     return m.createElement("div", {
@@ -151,8 +158,8 @@ class H extends d {
     });
   }
 }
-const T = g(H);
+const X = g(H);
 export {
-  R as C,
-  T as S
+  T as C,
+  X as S
 };

package/dist/index.d.ts

@@ -1470,6 +1470,7 @@ export type FrameSize = number | string | Size;
  * ```ts
  * .frame({ width: 300, height: 400 })
  * .frame({ maxWidth: Size.infinity, maxHeight: Size.infinity, alignment: StackAlign.topTrailing })
+ * .frame({ maxWidth: Size.infinity, fill: true }) // child stretches — bg/border fill the slot
  * ```
  */
 export interface FrameSpec {
@@ -1482,6 +1483,12 @@ export interface FrameSpec {
 	idealHeight?: FrameSize;
 	maxHeight?: FrameSize;
 	alignment?: StackAlign | keyof typeof StackAlign;
+	/**
+	 * Stretch the direct child to the frame slot (`width/height: 100%`).
+	 * Default `false` — SwiftUI-like hug + `alignment`.
+	 * Use when paint (`.bg`, border) lives on the child and should fill the frame.
+	 */
+	fill?: boolean;
 }
 /** Resolve a frame size to a CSS length. `Size.infinity` → fill parent (`100%`). */
 export declare function resolveFrameSize(value: FrameSize | undefined, role: "min" | "ideal" | "max" | "fixed", axis?: "width" | "height"): string | undefined;
@@ -1726,6 +1733,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;
@@ -2028,9 +2063,12 @@ declare abstract class FiboBuilder {
 	 *   maxHeight: Size.infinity,
 	 *   alignment: StackAlign.topTrailing,
 	 * })
+	 * // Child fills the slot (bg/border on the child cover the frame):
+	 * Box().bg('red').frame({ maxWidth: Size.infinity, fill: true })
 	 * ```
 	 *
 	 * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
+	 * Default: child hugs + `alignment`. Pass `fill: true` to stretch the child.
 	 */
 	frame(spec: FrameSpec): this;
 	/**
@@ -2239,6 +2277,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 +3103,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 +3140,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>;
@@ -3268,8 +3326,14 @@ 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>;
@@ -5158,6 +5222,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?;
@@ -6071,6 +6158,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,
 };