fiboui 2.9.4 → 2.9.6

package/dist/interactive.d.ts

@@ -386,6 +386,12 @@ 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;
 }
 type ClipShapeName = "circle" | "rounded" | "square";
 interface OffsetSpec {
@@ -472,6 +478,30 @@ type EdgeInsetsValue = {
 	/** CSS right — alias of trailing in LTR */
 	right?: number | string;
 };
+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)";
+	};
+};
+type MaterialKind = keyof typeof Material;
+type MaterialSpec = (typeof Material)[MaterialKind];
 type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -765,9 +795,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;
 	/**
@@ -976,6 +1009,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()`).

package/dist/interactive.js

@@ -1,5 +1,5 @@
-import { B as e } from "./index-CtvQ20_N.js";
-import { aA as r, aE as t, am as m, aB as x, aD as i, az as l, al as n, aC as u, ar as p, ay as h, an as T, ax as b, au as c, aq as d, at as f, ap as g, as as q, ao as B, av as C, aw as w } from "./client-lzMYg4vy.js";
+import { B as e } from "./index-BK9NhRgp.js";
+import { aA as r, aE as t, am as m, aB as x, aD as i, az as l, al as n, aC as u, ar as p, ay as h, an as T, ax as b, au as c, aq as d, at as f, ap as g, as as q, ao as B, av as C, aw as w } from "./client-DspTEDnT.js";
 export {
   e as Button,
   r as Checkbox,

package/dist/layout.d.ts

@@ -388,6 +388,12 @@ 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;
 }
 type ClipShapeName = "circle" | "rounded" | "square";
 interface OffsetSpec {
@@ -474,6 +480,30 @@ type EdgeInsetsValue = {
 	/** CSS right — alias of trailing in LTR */
 	right?: number | string;
 };
+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)";
+	};
+};
+type MaterialKind = keyof typeof Material;
+type MaterialSpec = (typeof Material)[MaterialKind];
 type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -767,9 +797,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;
 	/**
@@ -978,6 +1011,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()`).
@@ -1310,6 +1353,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>;
@@ -1342,6 +1390,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>;

package/dist/layout.js

@@ -1,6 +1,6 @@
-import { C as e, a as o, L as s, b as l, S as t, Z as i } from "./index-DYFx4V14.js";
-import { C as d, S as c } from "./index-C_GtMcVT.js";
-import { ad as u, ai as C, ab as f, ah as m, a9 as b, aa as p, ae as w, ac as L, af as R, ag as V } from "./client-lzMYg4vy.js";
+import { C as e, a as o, L as s, b as l, S as t, Z as i } from "./index-CE3dybe8.js";
+import { C as d, S as c } from "./index-vSLH4ZkD.js";
+import { ad as u, ai as C, ab as f, ah as m, a9 as b, aa as p, ae as w, ac as L, af as R, ag as V } from "./client-DspTEDnT.js";
 export {
   e as Center,
   d as Column,

package/dist/{metadata-DPU8tP_P.js → metadata-BqVnmMLq.js}

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import { be as v, bc as w, bf as x, bg as O, bh as R, bi as P, bj as E, bk as g, bl as $, bm as D, bn as z, aO as A, aP as K } from "./client-lzMYg4vy.js";
+import { bf as v, bd as w, bg as x, bh as O, bi as R, bj as P, bk as E, bl as g, bm as $, bn as D, bo as z, aO as A, aP as K } from "./client-DspTEDnT.js";
 import { useState as M, useMemo as N, lazy as S, Suspense as j } from "react";
 function b(e) {
   const t = (typeof e == "string" ? e.trim() : "").split(/[?#]/, 1)[0];

package/dist/navigation.js

@@ -1,5 +1,5 @@
-import { aP as s, aO as u, aI as o, aM as t, aK as r, aL as l, aN as L, aJ as R } from "./client-lzMYg4vy.js";
-import { L as i, N as p, O as N, l as m, p as n, u as O } from "./metadata-DPU8tP_P.js";
+import { aP as s, aO as u, aI as o, aM as t, aK as r, aL as l, aN as L, aJ as R } from "./client-DspTEDnT.js";
+import { L as i, N as p, O as N, l as m, p as n, u as O } from "./metadata-BqVnmMLq.js";
 export {
   s as DefaultErrorPage,
   u as DefaultLoader,

package/dist/{page-fKXx7Y-J.js → page-CQCVouvN.js}

@@ -1,4 +1,4 @@
-import { bo as z, N as B, S as k, bp as V, bq as O, _ as I, br as W, bs as _, bt as G } from "./client-lzMYg4vy.js";
+import { bp as z, N as B, S as k, bq as V, br as O, _ as I, bs as W, bt as _, bu as G } from "./client-DspTEDnT.js";
 import p, { useSyncExternalStore as H } from "react";
 function J(t) {
   return typeof t == "number" ? t : t != null && typeof t == "object" && "value" in t ? Number(t.value) : Number(t);

package/dist/server.d.ts

@@ -425,6 +425,12 @@ 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;
 }
 type ClipShapeName = "circle" | "rounded" | "square";
 interface OffsetSpec {
@@ -511,6 +517,30 @@ type EdgeInsetsValue = {
 	/** CSS right — alias of trailing in LTR */
 	right?: number | string;
 };
+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)";
+	};
+};
+type MaterialKind = keyof typeof Material;
+type MaterialSpec = (typeof Material)[MaterialKind];
 type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
 type SafeAreaInsetSpec = {
 	edge: SafeAreaInsetEdge;
@@ -804,9 +834,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;
 	/**
@@ -1015,6 +1048,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()`).
@@ -1347,6 +1390,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>;
@@ -1379,6 +1427,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>;