fiboui 2.8.3 → 2.8.5

package/dist/layout.d.ts

@@ -1 +1,1218 @@
-export { Center, Column, Container, Row, Spacer, Scaffold, Header, Sidebar, DashboardLayout, ZStack, Line, ScrollView, ScrollController, VirtualColumn } from './index.js';
+// Generated by dts-bundle-generator v9.5.1
+
+import React$1 from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+
+type Buildable = {
+	/** @deprecated Builders are React elements; `.build()` is optional. */
+	build(): React$1.ReactNode;
+};
+type FiboChild = React$1.ReactNode | Buildable;
+type FiboChildren = FiboChild | readonly FiboChild[] | (() => FiboChild | readonly FiboChild[]);
+type FiboThemeName = "material" | "cupertino" | "web" | "noir";
+interface ResponsiveStyles {
+	mobile?: React$1.CSSProperties;
+	tablet?: React$1.CSSProperties;
+	desktop?: React$1.CSSProperties;
+}
+type Alignment = "start" | "center" | "end" | "stretch";
+type MainAxisAlignment = "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
+type CrossAxisAlignment = Alignment;
+type AlignAxis = "start" | "center" | "end" | "stretch" | "baseline" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly";
+interface TextStyle {
+	fontSize?: string | number;
+	fontWeight?: string | number;
+	fontFamily?: string;
+	color?: string;
+	lineHeight?: string | number;
+	letterSpacing?: string | number;
+}
+declare const FIBO_BREAKPOINTS: {
+	readonly sm: 640;
+	readonly md: 768;
+	readonly lg: 1024;
+	readonly xl: 1280;
+};
+type BreakpointKey = keyof typeof FIBO_BREAKPOINTS;
+type Listener<T> = (value: T) => void;
+type Unsubscribe = () => void;
+interface Subscribable<T> {
+	subscribe(listener: Listener<T>): Unsubscribe;
+	subscribeEffect(effect: Effect): void;
+	unsubscribeEffect(effect: Effect): void;
+}
+interface BindableSignal<T = unknown> {
+	readonly value: T;
+	subscribe(listener: Listener<T>): Unsubscribe;
+}
+declare class Effect {
+	private fn;
+	private dependencies;
+	private _onDispose?;
+	constructor(fn: () => void);
+	run(): void;
+	track(dep: Subscribable<any>): void;
+	trigger(): void;
+	cleanup(): void;
+	dispose(): void;
+}
+declare class Signal<T> implements Subscribable<T> {
+	private _value;
+	private listeners;
+	private effects;
+	private readonly _initial;
+	constructor(_value: T);
+	get value(): T;
+	/** Current value without tracking. Replays use this so a node does not subscribe twice. */
+	peek(): T;
+	set value(newValue: T);
+	/** Replace the value. Same notify path as `.value = next`. */
+	set(next: T): this;
+	/**
+	 * Write a value, or an updater `(prev) => next`.
+	 * Function-valued signals should use `.set()` / `.value =` so the function is stored, not called.
+	 * Not named `update`: `listSignal.update(id, patch)` is the item patch.
+	 */
+	change(next: T | ((prev: T) => T)): this;
+	/** Restore the value passed to `signal(initial)`. */
+	reset(): this;
+	subscribe(listener: Listener<T>): Unsubscribe;
+	subscribeEffect(effect: Effect): void;
+	unsubscribeEffect(effect: Effect): void;
+	private _notifyDepth;
+	private notify;
+}
+declare class Observable<T> implements Subscribable<T> {
+	private _value;
+	private listeners;
+	private effects;
+	constructor(_value: T);
+	get(): T;
+	set(newValue: T): void;
+	subscribe(listener: Listener<T>): Unsubscribe;
+	subscribeEffect(effect: Effect): void;
+	unsubscribeEffect(effect: Effect): void;
+	private notify;
+}
+declare abstract class GestureBuilder {
+	abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+interface AnimationOptions {
+	duration?: number;
+	curve?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | string;
+	damping?: number;
+	stiffness?: number;
+	velocity?: number;
+	mass?: number;
+	onComplete?: () => void;
+}
+interface Signal<T> {
+	spring(target: T, options?: Partial<AnimationOptions>): void;
+	animate(target: T, options?: Partial<AnimationOptions>): void;
+	snapTo(target: T, options?: Partial<AnimationOptions>): void;
+}
+declare const INTERACTION_EFFECTS: readonly [
+	"grow",
+	"shrink",
+	"pulse",
+	"pulseGrow",
+	"pulseShrink",
+	"push",
+	"pop",
+	"bounceIn",
+	"bounceOut",
+	"rotate",
+	"growRotate",
+	"float",
+	"sink",
+	"bob",
+	"hang",
+	"skew",
+	"skewForward",
+	"skewBackward",
+	"wobbleHorizontal",
+	"wobbleVertical",
+	"wobbleToBottomRight",
+	"wobbleToTopRight",
+	"wobbleTop",
+	"wobbleBottom",
+	"wobbleSkew",
+	"buzz",
+	"buzzOut",
+	"forward",
+	"backward",
+	"nudge",
+	"fade",
+	"backPulse",
+	"sweepToRight",
+	"sweepToLeft",
+	"sweepToBottom",
+	"sweepToTop",
+	"bounceToRight",
+	"bounceToLeft",
+	"bounceToBottom",
+	"bounceToTop",
+	"radialOut",
+	"radialIn",
+	"rectangleIn",
+	"rectangleOut",
+	"shutterInHorizontal",
+	"shutterOutHorizontal",
+	"shutterInVertical",
+	"shutterOutVertical",
+	"iconBack",
+	"iconForward",
+	"iconDown",
+	"iconUp",
+	"iconSpin",
+	"iconDrop",
+	"iconFade",
+	"iconFloatAway",
+	"iconSinkAway",
+	"iconGrow",
+	"iconShrink",
+	"iconPulse",
+	"iconPulseGrow",
+	"iconPulseShrink",
+	"iconPush",
+	"iconPop",
+	"iconBounce",
+	"iconRotate",
+	"iconGrowRotate",
+	"iconFloat",
+	"iconSink",
+	"iconBob",
+	"iconHang",
+	"iconWobbleHorizontal",
+	"iconWobbleVertical",
+	"iconBuzz",
+	"iconBuzzOut",
+	"borderFade",
+	"hollow",
+	"trim",
+	"rippleOut",
+	"rippleIn",
+	"outlineOut",
+	"outlineIn",
+	"roundCorners",
+	"underlineFromLeft",
+	"underlineFromCenter",
+	"underlineFromRight",
+	"reveal",
+	"underlineReveal",
+	"overlineFromLeft",
+	"overlineFromCenter",
+	"overlineFromRight",
+	"overlineReveal",
+	"shadowGrow",
+	"shadowFloat",
+	"shadowGlow",
+	"shadowRadial",
+	"boxShadowOutset",
+	"boxShadowInset",
+	"lift",
+	"glow",
+	"bubbleTop",
+	"bubbleRight",
+	"bubbleBottom",
+	"bubbleLeft",
+	"bubbleFloatTop",
+	"bubbleFloatRight",
+	"bubbleFloatBottom",
+	"bubbleFloatLeft",
+	"curlTopLeft",
+	"curlTopRight",
+	"curlBottomRight",
+	"curlBottomLeft"
+];
+type InteractionEffectName = (typeof INTERACTION_EFFECTS)[number];
+interface LogicalAxes {
+	paddingHorizontal(value: string | number): this;
+	paddingVertical(value: string | number): this;
+	paddingX(value: string | number): this;
+	paddingY(value: string | number): this;
+	px(value: string | number): this;
+	py(value: string | number): this;
+	marginHorizontal(value: string | number): this;
+	marginVertical(value: string | number): this;
+	marginX(value: string | number): this;
+	marginY(value: string | number): this;
+	mx(value: string | number): this;
+	my(value: string | number): this;
+	borderHorizontal(value: string | number): this;
+	borderVertical(value: string | number): this;
+	borderX(value: string | number): this;
+	borderY(value: string | number): this;
+	borderWidthHorizontal(value: string | number): this;
+	borderWidthVertical(value: string | number): this;
+	borderColorHorizontal(value: string | number): this;
+	borderColorVertical(value: string | number): this;
+	roundedTop(value: string | number): this;
+	roundedBottom(value: string | number): this;
+	roundedLeft(value: string | number): this;
+	roundedRight(value: string | number): this;
+	insetHorizontal(value: string | number): this;
+	insetVertical(value: string | number): this;
+	insetX(value: string | number): this;
+	insetY(value: string | number): this;
+	gapX(value: string | number): this;
+	gapY(value: string | number): this;
+}
+interface PseudoStateBuilder extends LogicalAxes {
+	boxShadow(value: string | number): this;
+}
+declare class PseudoStateBuilder {
+	private pseudoState;
+	private parentBuilder;
+	private isGroup;
+	private transitionDuration;
+	private transitionEasing;
+	private transitionDelay;
+	private transitionProperties;
+	private transforms;
+	private _boxLonghands;
+	constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
+	/**
+	 * Apply a named interaction effect (full Hover.css–inspired catalog).
+	 * Works on any pseudo trigger — hover, press/active, focus, groupHover, etc.
+	 * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
+	 */
+	effect(name: InteractionEffectName | string): this;
+	bg(color: string): this;
+	/** Same longhand as `.bg()` — interpolates against the resting surface. */
+	backgroundColor(value: string): this;
+	color(value: string): this;
+	text(color: string): this;
+	opacity(value: number): this;
+	borderColor(value: string): this;
+	transform(value: string): this;
+	scale(value: number): this;
+	translateX(value: number | string): this;
+	translateY(value: number | string): this;
+	rotate(degrees: number): this;
+	shadow(value: string | number): this;
+	css(property: string, value: string | number): this;
+	padding(value: string | number): this;
+	p(value: string | number): this;
+	margin(value: string | number): this;
+	transition(value: string): this;
+	transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
+	duration(ms: number): this;
+	easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
+	ease(value: string): this;
+	delay(ms: number): this;
+	properties(props: string[]): this;
+	private applyTransition;
+	private flushTransform;
+	private set;
+	private commit;
+	end(): FiboBuilder;
+}
+declare const When: {
+	readonly hover: "hover";
+	readonly focus: "focus";
+	readonly active: "active";
+	readonly visited: "visited";
+	readonly disabled: "disabled";
+	readonly on: "on";
+	readonly off: "off";
+	readonly checked: "checked";
+	readonly unchecked: "unchecked";
+	readonly indeterminate: "indeterminate";
+	readonly mixed: "mixed";
+};
+type When = (typeof When)[keyof typeof When];
+type WhenStyle = React$1.CSSProperties | string | ((builder: any) => void);
+interface SpringOptions {
+	stiffness?: number;
+	damping?: number;
+	mass?: number;
+}
+declare const MOTION_PRESETS: readonly [
+	"fadeIn",
+	"fadeOut",
+	"fade",
+	"slideUp",
+	"slideDown",
+	"slideLeft",
+	"slideRight",
+	"scaleIn",
+	"scaleOut",
+	"scale",
+	"blurIn",
+	"blurOut",
+	"blur",
+	"pop",
+	"bounce"
+];
+type MotionPreset = (typeof MOTION_PRESETS)[number];
+interface CustomMotion {
+	from: Record<string, string | number>;
+	to: Record<string, string | number>;
+	duration?: number;
+	ease?: string;
+	delay?: number;
+	stiffness?: number;
+	damping?: number;
+	mass?: number;
+}
+interface ThemeColors {
+	primary: string;
+	primaryVariant?: string;
+	primaryContainer?: string;
+	onPrimaryContainer?: string;
+	secondary: string;
+	secondaryVariant?: string;
+	secondaryContainer?: string;
+	onSecondaryContainer?: string;
+	tertiary?: string;
+	onTertiary?: string;
+	tertiaryContainer?: string;
+	onTertiaryContainer?: string;
+	background: string;
+	surface: string;
+	surfaceVariant?: string;
+	onSurfaceVariant?: string;
+	error: string;
+	errorContainer?: string;
+	onErrorContainer?: string;
+	success?: string;
+	warning?: string;
+	info?: string;
+	onPrimary: string;
+	onSecondary: string;
+	onBackground: string;
+	onSurface: string;
+	onError: string;
+	/** Borders / hairlines — maps to `--fibo-outline`. */
+	outline?: string;
+	outlineVariant?: string;
+	/** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
+	surfaceContainerLow?: string;
+}
+interface ThemeTypography {
+	h1: TextStyle;
+	h2: TextStyle;
+	h3: TextStyle;
+	h4: TextStyle;
+	h5: TextStyle;
+	h6: TextStyle;
+	body: TextStyle;
+	caption: TextStyle;
+	label: TextStyle;
+}
+interface ThemeSpacing {
+	xs: string;
+	sm: string;
+	md: string;
+	lg: string;
+	xl: string;
+}
+interface ThemeBorderRadius {
+	/** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
+	xs?: string;
+	sm: string;
+	md: string;
+	lg: string;
+	/** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
+	xl?: string;
+	full: string;
+}
+interface ThemeShadows {
+	sm: string;
+	md: string;
+	lg: string;
+}
+interface FiboTheme {
+	name: FiboThemeName;
+	colors: ThemeColors;
+	typography: ThemeTypography;
+	spacing: ThemeSpacing;
+	borderRadius: ThemeBorderRadius;
+	shadows: ThemeShadows;
+	fontFamily: string;
+}
+declare const FIBO_THEMES: {
+	readonly material: FiboTheme;
+	readonly cupertino: FiboTheme;
+	readonly web: FiboTheme;
+	readonly noir: FiboTheme;
+};
+type FiboThemePreset = keyof typeof FIBO_THEMES;
+type ThemeInput = FiboTheme | FiboThemePreset;
+declare enum Colors {
+	Primary = "primary",
+	OnPrimary = "on-primary",
+	PrimaryContainer = "primary-container",
+	OnPrimaryContainer = "on-primary-container",
+	Secondary = "secondary",
+	OnSecondary = "on-secondary",
+	SecondaryContainer = "secondary-container",
+	OnSecondaryContainer = "on-secondary-container",
+	Tertiary = "tertiary",
+	OnTertiary = "on-tertiary",
+	TertiaryContainer = "tertiary-container",
+	OnTertiaryContainer = "on-tertiary-container",
+	Error = "error",
+	OnError = "on-error",
+	Success = "success",
+	Warning = "warning",
+	Info = "info",
+	Background = "background",
+	OnBackground = "on-background",
+	Surface = "surface",
+	OnSurface = "on-surface",
+	SurfaceVariant = "surface-variant",
+	OnSurfaceVariant = "on-surface-variant",
+	Outline = "outline",
+	Transparent = "transparent",
+	Black = "black",
+	White = "white"
+}
+declare enum ShadowSize {
+	Sm = "sm",
+	Md = "md",
+	Lg = "lg",
+	Xl = "xl",
+	Xl2 = "2xl"
+}
+declare enum ShadowPreset {
+	Card = "card",
+	Button = "button",
+	Modal = "modal",
+	Float = "float",
+	Inner = "inner"
+}
+declare enum ShadowDirection {
+	Top = "top",
+	Bottom = "bottom",
+	Left = "left",
+	Right = "right",
+	TopBottom = "top-bottom",
+	LeftRight = "left-right",
+	Vertical = "vertical",
+	Horizontal = "horizontal",
+	All = "all"
+}
+type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
+	string,
+	number?
+] | [
+	ShadowDirection | string,
+	ShadowSize | string
+] | [
+	ShadowDirection | string,
+	string
+] | [
+	ShadowDirection | string,
+	string,
+	number?
+] | [
+	ShadowDirection | string,
+	ShadowSize | string,
+	string,
+	number?
+];
+type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
+declare abstract class FiboBuilder {
+	/** @internal Extra DOM props forwarded to the host element. */
+	protected _props: Record<string, any>;
+	protected _style: React$1.CSSProperties;
+	protected _cssStyles: React$1.CSSProperties;
+	protected _classNames: string[];
+	protected _children: React$1.ReactNode[];
+	/** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
+	protected _theme?: FiboTheme;
+	protected _state: Map<string, any>;
+	protected _providers: Map<string, any>;
+	protected _observers: Set<Observable<any>>;
+	protected _signals: Set<BindableSignal<any>>;
+	/** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
+	protected _ownsReads: boolean;
+	/** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
+	protected _replays: Array<() => void>;
+	protected _isObserver: boolean;
+	protected _gesture?: GestureBuilder;
+	protected _animationConfig?: Partial<AnimationOptions>;
+	protected _animatedProps: Map<string, Signal<any>>;
+	protected _transforms: string[];
+	protected _transitionClass?: string;
+	/** True while transition class was auto-managed for hover/effect presets (expandable). */
+	protected _autoEffectTransition: boolean;
+	protected _effectTransitionProps: string[];
+	/**
+	 * When true, getStyle() promotes background/border shorthands to longhands and
+	 * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
+	 */
+	protected _smoothSurface: boolean;
+	protected _smoothNeedsRestTransform: boolean;
+	protected _motionClass?: string;
+	protected _staggerMs?: number;
+	protected _reveal?: {
+		preset: string;
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	};
+	protected _scrollProgress: boolean;
+	protected _viewTransition?: string;
+	protected _reducedMotion: "reduce" | "never";
+	protected _usesCssMotion: boolean;
+	protected _explicitScrollMargin: boolean;
+	/** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
+	protected _hug: boolean;
+	/**
+	 * Unset every CSS property on this component and what it renders inside.
+	 * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
+	 */
+	protected _resetStyle: boolean;
+	/** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
+	protected _boxLonghands: Set<string>;
+	resetStyle(): this;
+	protected isReset(): boolean;
+	hug(): this;
+	protected isHug(): boolean;
+	id(value: string): this;
+	/**
+	 * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
+	 * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
+	 */
+	anchor(value: string): this;
+	/**
+	 * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
+	 * that `.anchor()` applies).
+	 */
+	scrollMargin(value: number | string): this;
+	/** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
+	addClassName(name: string): this;
+	/**
+	 * React list key. After this is called, React reads the key as a string
+	 * on both the builder element and the inner host wrapper.
+	 * Builders are valid elements — you do not need `.build()`.
+	 */
+	key(value: string | number): this;
+	private setBoxLonghand;
+	private setBoxShorthand;
+	paddingHorizontal(value: string | number): this;
+	paddingVertical(value: string | number): this;
+	padding(value: string | number): this;
+	marginHorizontal(value: string | number): this;
+	marginVertical(value: string | number): this;
+	margin(value: string | number): this;
+	/** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
+	protected layoutStyle(patch: React$1.CSSProperties): this;
+	/** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
+	private dropConflictingKeys;
+	private trackBoxLonghandsFrom;
+	flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
+	/** Flutter `textDirection`. */
+	textDirection(direction: "ltr" | "rtl"): this;
+	/** Flutter `textBaseline`. Both modes align on the flex baseline. */
+	textBaseline(baseline: "alphabetic" | "ideographic"): this;
+	/** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
+	clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
+	/**
+	 * Flutter `mainAxisSize`. `min` hugs the current flex direction.
+	 * `max` stretches along that same axis.
+	 */
+	mainAxisSize(size: "min" | "max"): this;
+	zIndex(value: number): this;
+	alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
+	alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
+	flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
+	/**
+	 * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
+	 * names (`space-between` / `spaceBetween`).
+	 */
+	justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
+	/** True when flexDirection is column / column-reverse (default is row). */
+	protected isVerticalFlex(): boolean;
+	/**
+	 * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
+	 * `between` packs the main axis and starts the cross axis.
+	 */
+	align(alignment: AlignAxis): this;
+	/**
+	 * Horizontal (screen X) alignment. Same meaning on Row and Column:
+	 * left / center / right of the container — not “main axis”.
+	 */
+	alignX(alignment: AlignAxis): this;
+	/**
+	 * Vertical (screen Y) alignment. Same meaning on Row and Column:
+	 * top / center / bottom of the container — not “cross axis”.
+	 */
+	alignY(alignment: AlignAxis): this;
+	protected applyMainAlign(alignment: AlignAxis | string): this;
+	protected applyCrossAlign(alignment: AlignAxis | string): this;
+	flex(value?: number | string): this;
+	grid(): this;
+	inlineFlex(): this;
+	inlineGrid(): this;
+	block(): this;
+	inlineBlock(): this;
+	hidden(): this;
+	center(): this;
+	/** Center on the horizontal screen axis (uses `.alignX('center')`). */
+	centerX(): this;
+	/** Center on the vertical screen axis (uses `.alignY('center')`). */
+	centerY(): this;
+	spaceBetween(): this;
+	spaceAround(): this;
+	spaceEvenly(): this;
+	fill(): this;
+	fillWidth(): this;
+	fillHeight(): this;
+	square(size: number | string): this;
+	circle(): this;
+	opacity(value: number): this;
+	p(value: number | string): this;
+	px(value: number | string): this;
+	py(value: number | string): this;
+	paddingX(value: number | string): this;
+	paddingY(value: number | string): this;
+	m(value: number | string): this;
+	mx(value: number | string): this;
+	my(value: number | string): this;
+	marginX(value: number | string): this;
+	marginY(value: number | string): this;
+	bg(color: string | Colors): this;
+	text(color: string | Colors): this;
+	color(value: string | Colors): this;
+	private resolveSemanticColor;
+	shadow(config?: ShadowConfig): this;
+	/**
+	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
+	 * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
+	 * No `window.innerWidth` — hydrate-safe.
+	 */
+	responsive(styles: ResponsiveStyles): this;
+	/**
+	 * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
+	 *
+	 * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
+	 */
+	media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
+	private registerMediaStyles;
+	sm(styles: React$1.CSSProperties): this;
+	md(styles: React$1.CSSProperties): this;
+	lg(styles: React$1.CSSProperties): this;
+	xl(styles: React$1.CSSProperties): this;
+	rounded(value: string | number): this;
+	borderRadius(value: string | number): this;
+	borderColor(value: string): this;
+	/**
+	 * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
+	 * (the Scaffold body) cannot divide the viewport across these children.
+	 * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
+	 * opts back into sharing space.
+	 */
+	private lockAxis;
+	width(value: string | number): this;
+	paint(property: string, value: string): this;
+	height(value: string | number): this;
+	gap(value: string | number): this;
+	clean(): this;
+	borderInput(color?: string, focusColor?: string): this;
+	weight(value: string | number): this;
+	onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
+	state<T>(key: string, initialValue: T): this;
+	getState<T>(key: string): T | undefined;
+	setState<T>(key: string, value: T): this;
+	provide<T>(key: string, value: T): this;
+	consume<T>(key: string): T | undefined;
+	observer(options?: string | number | {
+		key?: string | number;
+	}): this;
+	observe<T>(observable: Observable<T>): this;
+	bindSignal<T>(signal: BindableSignal<T>): this;
+	/**
+	 * @internal Wire a direct `method(signal.value)` to this node.
+	 * Does not claim reads that happen later in a children function.
+	 */
+	adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
+	/** @internal */
+	runReplays(): void;
+	translateX(value: Signal<number> | number): this;
+	translateY(value: Signal<number> | number): this;
+	scale(value: Signal<number> | number): this;
+	rotate(degrees: Signal<number> | number): this;
+	gesture(gesture: GestureBuilder): this;
+	animation(config: Partial<AnimationOptions>): this;
+	protected hasStateManagement(): boolean;
+	className(className: string): this;
+	classNames(classNames: string[]): this;
+	css(styles: React$1.CSSProperties): this;
+	style(style: React$1.CSSProperties): this;
+	props(props: Record<string, any>): this;
+	protected _transitionDuration: number;
+	protected _transitionEasing: string;
+	protected _transitionDelay: number;
+	protected _transitionProperties: string[];
+	/**
+	 * Apply CSS transition
+	 *
+	 * Overload 1: String syntax
+	 * Example: .transition('all 0.2s ease-in-out')
+	 *
+	 * Overload 2: Shorthand with parameters
+	 * Example: .transition('all', 200, 'ease-out')
+	 * Example: .transition('all', 200, 'ease-out', 50)
+	 */
+	transition(value: string): this;
+	transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
+	/**
+	 * Set transition duration in milliseconds
+	 * Example: .duration(200) → 200ms
+	 */
+	duration(ms: number): this;
+	/**
+	 * Set transition easing function
+	 * Example: .easing('ease-in-out')
+	 */
+	easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
+	/** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
+	ease(value: string): this;
+	/**
+	 * Set transition delay in milliseconds
+	 * Example: .delay(100) → 100ms delay
+	 */
+	delay(ms: number): this;
+	/**
+	 * Set which properties to transition
+	 * Example: .properties(['color', 'transform'])
+	 */
+	properties(props: string[]): this;
+	/**
+	 * Apply the built transition to the element
+	 */
+	protected _applyTransition(): void;
+	private replaceTransitionClass;
+	/**
+	 * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
+	 * @example Box().animate('fadeIn').duration(300).ease('spring')
+	 */
+	animate(preset: MotionPreset | string, options?: {
+		duration?: number;
+		ease?: string;
+		delay?: number;
+		from?: number | string;
+		stiffness?: number;
+		damping?: number;
+		mass?: number;
+	}): this;
+	animate(custom: CustomMotion): this;
+	/** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
+	spring(options?: SpringOptions): this;
+	reducedMotion(mode?: "reduce" | "never"): this;
+	press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
+	/**
+	 * Shortcut: `.hover(h => h.effect(name))`.
+	 * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
+	 */
+	hoverEffect(name: string): this;
+	/**
+	 * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
+	 */
+	pressEffect(name: string): this;
+	/**
+	 * Shortcut: `.focus(f => f.effect(name))`.
+	 */
+	focusEffect(name: string): this;
+	/**
+	 * Shortcut: `.active(a => a.effect(name))`.
+	 */
+	activeEffect(name: string): this;
+	/**
+	 * Shortcut: `.groupHover(h => h.effect(name))`.
+	 */
+	groupHoverEffect(name: string): this;
+	focusVisible(): PseudoStateBuilder;
+	focusVisible(callback: PseudoStateFn): this;
+	stagger(ms: number): this;
+	/** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
+	reveal(preset?: string | {
+		preset?: string;
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	}, options?: {
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	}): this;
+	/** Alias of `.reveal()` for scroll-triggered presets. */
+	onScroll(preset?: string): this;
+	/** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
+	scrollTimeline(kind?: "view" | "scroll"): this;
+	scrollProgress(): this;
+	smoothScroll(): this;
+	scrollSnap(axis?: "x" | "y" | "both"): this;
+	scrollSnapAlign(align?: "start" | "center" | "end"): this;
+	sticky(top?: number | string | boolean): this;
+	/**
+	 * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
+	 * clear this bar. Header uses the real bar height.
+	 */
+	protected publishStickyOffset(value: number | string): void;
+	viewTransition(name: string): this;
+	/** Default `:focus-visible` ring. Pass a callback to customize. */
+	focusRing(color?: string): this;
+	protected ensureInteractiveTransition(): void;
+	/**
+	 * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
+	 * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
+	 * @internal
+	 */
+	prepareSmoothInteraction(properties: string[]): void;
+	/** @internal Convert inline background/border shorthands → longhands. */
+	promoteSurfaceLonghands(): void;
+	/** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
+	ensureRestTransform(): void;
+	/**
+	 * Ensure the base element transitions the properties an interaction effect needs.
+	 * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
+	 * explicitly or a motion animation class is present.
+	 * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
+	 */
+	ensureEffectTransition(properties: string[]): void;
+	/**
+	 * Apply a theme to this node and descendants (CSS vars inherit).
+	 * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
+	 * SSR-safe: class + inline vars on first paint (no useEffect).
+	 */
+	theme(input: ThemeInput): this;
+	/** Prefer dark/light system chrome for native controls under this subtree. */
+	colorScheme(scheme: "light" | "dark" | "light dark"): this;
+	hover(): PseudoStateBuilder;
+	hover(callback: PseudoStateFn): this;
+	/**
+	 * Paint for a `When` state. Hover / focus / active / visited / disabled
+	 * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
+	 *
+	 * ```ts
+	 * Row().when(When.hover, (s) => s.bg('#c8ff00'))
+	 * ```
+	 */
+	when(state: When, style: WhenStyle): this;
+	focus(): PseudoStateBuilder;
+	focus(callback: PseudoStateFn): this;
+	active(): PseudoStateBuilder;
+	active(callback: PseudoStateFn): this;
+	visited(): PseudoStateBuilder;
+	visited(callback: PseudoStateFn): this;
+	disabledState(): PseudoStateBuilder;
+	disabledState(callback: PseudoStateFn): this;
+	focusWithin(): PseudoStateBuilder;
+	focusWithin(callback: PseudoStateFn): this;
+	firstChild(): PseudoStateBuilder;
+	firstChild(callback: PseudoStateFn): this;
+	lastChild(): PseudoStateBuilder;
+	lastChild(callback: PseudoStateFn): this;
+	groupHover(): PseudoStateBuilder;
+	groupHover(callback: PseudoStateFn): this;
+	groupFocus(): PseudoStateBuilder;
+	groupFocus(callback: PseudoStateFn): this;
+	groupActive(): PseudoStateBuilder;
+	groupActive(callback: PseudoStateFn): this;
+	groupFocusWithin(): PseudoStateBuilder;
+	groupFocusWithin(callback: PseudoStateFn): this;
+	group(): this;
+	protected _childFunction?: () => FiboChild | FiboChild[];
+	children(children: FiboChildren): this;
+	protected getClassName(): string;
+	protected getStyle(): React$1.CSSProperties;
+	protected processChildren(): React$1.ReactNode[];
+	protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
+	/**
+	 * @deprecated Builders are React elements. Returning or nesting the builder is enough.
+	 * `.build()` still assembles the host tree for older call sites.
+	 */
+	abstract build(): React$1.ReactElement;
+}
+type KnownKeys<T> = {
+	[K in keyof T]: string extends K ? never : number extends K ? never : K;
+} extends {
+	[_ in keyof T]: infer U;
+} ? U : never;
+type StyleBuilder<T> = T & LogicalAxes & {
+	[K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
+} & React$1.ReactElement;
+declare class CenterBuilder extends FiboBuilder {
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	build(): React$1.ReactElement;
+}
+export declare const Center: () => StyleBuilder<CenterBuilder>;
+declare class ColumnBuilder extends FiboBuilder {
+	private _mainAxisAlignment;
+	private _crossAxisAlignment;
+	private _spacing?;
+	private _size?;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	mainAxisAlignment(alignment: MainAxisAlignment): this;
+	crossAxisAlignment(alignment: CrossAxisAlignment): this;
+	/** Horizontal screen axis → cross axis on a Column. */
+	alignX(alignment: AlignAxis): this;
+	/** Vertical screen axis → main axis on a Column. */
+	alignY(alignment: AlignAxis): this;
+	spacing(value: string | number): this;
+	size(size: "small" | "medium" | "large"): this;
+	build(): React$1.ReactElement;
+}
+export declare const Column: () => StyleBuilder<ColumnBuilder>;
+declare class ContainerBuilder extends FiboBuilder {
+	private _userPad;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	padding(value: string | number): this;
+	paddingHorizontal(value: string | number): this;
+	paddingVertical(value: string | number): this;
+	paddingLeft(value: string | number): this;
+	paddingRight(value: string | number): this;
+	paddingTop(value: string | number): this;
+	paddingBottom(value: string | number): this;
+	build(): React$1.ReactElement;
+}
+export declare const Container: () => StyleBuilder<ContainerBuilder>;
+declare class RowBuilder extends FiboBuilder {
+	private _mainAxisAlignment;
+	private _crossAxisAlignment;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	mainAxisAlignment(alignment: MainAxisAlignment): this;
+	crossAxisAlignment(alignment: CrossAxisAlignment): this;
+	/** Horizontal screen axis → main axis on a Row. */
+	alignX(alignment: AlignAxis): this;
+	/** Vertical screen axis → cross axis on a Row. */
+	alignY(alignment: AlignAxis): this;
+	spacing(value: string | number): this;
+	items(children: React$1.ReactElement[]): this;
+	build(): React$1.ReactElement;
+}
+export declare const Row: () => StyleBuilder<RowBuilder>;
+declare class SpacerBuilder extends FiboBuilder {
+	private _height?;
+	private _width?;
+	private _grow?;
+	private _expand?;
+	height(value: string | number): this;
+	width(value: string | number): this;
+	vertical(): this;
+	horizontal(): this;
+	/** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
+	flex(value?: number | string): this;
+	build(): React$1.ReactElement;
+}
+export declare const Spacer: () => StyleBuilder<SpacerBuilder>;
+type FabAt = "start" | "center" | "end" | "startTop" | "centerTop" | "endTop" | "startDock" | "centerDock" | "endDock";
+interface LayoutBarConfig {
+	fixed?: boolean;
+	children: FiboChildren;
+}
+interface ScaffoldStructure {
+	header?: {
+		position?: "static" | "sticky" | "fixed";
+		height?: string | number;
+		visible?: boolean;
+	};
+	footer?: {
+		position?: "static" | "sticky" | "fixed";
+		height?: string | number;
+		visible?: boolean;
+	};
+	sidebarLeft?: {
+		behavior?: "fixed" | "scroll";
+		mode?: "side" | "over";
+		width?: string | number;
+		visible?: boolean;
+		fullHeight?: boolean;
+	};
+	sidebarRight?: {
+		behavior?: "fixed" | "scroll";
+		mode?: "side" | "over";
+		width?: string | number;
+		visible?: boolean;
+		fullHeight?: boolean;
+	};
+}
+declare class ScaffoldBuilder extends FiboBuilder {
+	private _locale?;
+	private _customProviders;
+	private _structure;
+	private _headerBar?;
+	private _footerBar?;
+	private _sideBarLeft?;
+	private _sideBarRight?;
+	private _drawer?;
+	private _endDrawer?;
+	private _drawerWidth;
+	private _fab?;
+	private _fabAt;
+	private _bottomSheet?;
+	private _footerButtons?;
+	private _extendBody;
+	private _extendBehindHeader;
+	private _avoidKeyboard;
+	private _onDrawer?;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	locale(locale: string): this;
+	providers(providers: Record<string, any>): this;
+	provider(key: string, value: any): this;
+	structure(config: ScaffoldStructure): this;
+	headerBar(config: FiboChild | LayoutBarConfig): this;
+	/** Flutter `Scaffold.appBar`. Same slot as `.headerBar()`. */
+	appBar(config: FiboChild | LayoutBarConfig): this;
+	footerBar(config: FiboChild | LayoutBarConfig): this;
+	sideBarLeft(config: FiboChild | LayoutBarConfig): this;
+	sideBarRight(config: FiboChild | LayoutBarConfig): this;
+	/** Flutter drawer. Starts closed. Open it with `useScaffold().openDrawer()`. */
+	drawer(child: FiboChild): this;
+	/** Flutter endDrawer. */
+	endDrawer(child: FiboChild): this;
+	drawerWidth(px: number): this;
+	/** Flutter floatingActionButton. */
+	fab(child: FiboChild): this;
+	/** Where the button sits. Dock locations overlap the footer. */
+	fabAt(location: FabAt): this;
+	/** Flutter bottomSheet. Hidden until `useScaffold().showSheet()`. */
+	bottomSheet(child: FiboChild): this;
+	/** Flutter persistentFooterButtons. */
+	footerButtons(children: FiboChildren): this;
+	/** Body draws under the footer. */
+	extendBody(on?: boolean): this;
+	/** Body draws under the header. */
+	extendBehindHeader(on?: boolean): this;
+	/** Lift the page above the keyboard. On by default. */
+	avoidKeyboard(on?: boolean): this;
+	onDrawer(handler: (side: "start" | "end", open: boolean) => void): this;
+	private _bindBar;
+	private _normalizeBar;
+	private _isLayoutBarConfig;
+	build(): React$1.ReactElement;
+}
+export declare const Scaffold: () => StyleBuilder<ScaffoldBuilder>;
+declare class HeaderBuilder extends FiboBuilder {
+	private _height;
+	private _sticky;
+	private _stickyTop;
+	private _stickyStamp;
+	private _leading?;
+	private _trailing?;
+	private _title?;
+	private static unstickSeq;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	leading(node: FiboChild): this;
+	trailing(node: FiboChild): this;
+	title(value: string | FiboChild): this;
+	height(height: number | string): this;
+	sticky(enable?: boolean | number | string): this;
+	private dropStickyStamp;
+	private syncStickyOffset;
+	build(): React$1.ReactElement;
+}
+export declare const Header: () => StyleBuilder<HeaderBuilder>;
+declare class SidebarBuilder extends FiboBuilder {
+	private _width;
+	private _collapsed;
+	width(width: number | string): this;
+	collapsible(collapsed?: boolean): this;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	build(): React$1.ReactElement;
+}
+export declare const Sidebar: () => StyleBuilder<SidebarBuilder>;
+declare class DashboardLayoutBuilder extends FiboBuilder {
+	private _sidebar?;
+	private _header?;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	sidebar(component: FiboChild): this;
+	header(component: FiboChild): this;
+	build(): React$1.ReactElement;
+}
+export declare const DashboardLayout: () => StyleBuilder<DashboardLayoutBuilder>;
+declare class ZStackBuilder extends FiboBuilder {
+	private _alignment;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	alignment(align: "center" | "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"): this;
+	build(): React$1.ReactElement;
+}
+export declare const ZStack: () => StyleBuilder<ZStackBuilder>;
+declare class LineBuilder extends FiboBuilder {
+	private _sizeHeight?;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	sizeHeight(value: string): this;
+	/** Separator axis. `vertical` paints a 1px column rule. */
+	direction(value: "horizontal" | "vertical"): this;
+	build(): React$1.ReactElement;
+}
+export declare const Line: () => StyleBuilder<LineBuilder>;
+/** Flutter-style handle for a mounted ScrollView — no document.querySelector. */
+export declare class ScrollController {
+	private _node;
+	/** @internal Attached by ScrollView on mount. */
+	attach(node: HTMLElement | null): void;
+	get node(): HTMLElement | null;
+	/** Prefer the inner strip so wrapping for overflow does not count as a slide. */
+	private itemHost;
+	private alive;
+	scrollBy(options: ScrollToOptions): void;
+	scrollTo(options: ScrollToOptions): void;
+	/** Prefer overflow styles (direction) over whether content currently overflows. */
+	private scrollAxis;
+	/**
+	 * Carousel step: scroll by the first child's outer width (+ gap).
+	 * Prefer this over measuring in app code.
+	 */
+	scrollByChild(dir?: -1 | 1, gap?: number): void;
+	scrollToChild(index: number, gap?: number): void;
+}
+type ScrollDirection = "vertical" | "horizontal" | "both";
+type ScrollbarVisibility = "hidden" | "visible" | "auto";
+type ScrollAnchor = "start" | "center" | "end";
+declare class ScrollViewBuilder extends FiboBuilder {
+	private _direction;
+	private _scrollbar;
+	private _controller?;
+	private _anchor?;
+	private _refresh?;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	direction(direction: ScrollDirection): this;
+	horizontal(): this;
+	vertical(): this;
+	scrollbar(visibility: ScrollbarVisibility): this;
+	/** Attach a ScrollController for programmatic scroll (carousel prev/next). */
+	controller(controller: ScrollController): this;
+	scrollAnchor(anchor: ScrollAnchor): this;
+	refreshable(handler: () => void): this;
+	/**
+	 * Native scroll listener on the overflow host.
+	 * String presets still alias `.reveal()` from FiboBuilder.
+	 */
+	onScroll(preset?: string): this;
+	onScroll(handler: (event: React$1.UIEvent<HTMLDivElement>) => void): this;
+	build(): React$1.ReactElement;
+}
+export declare const ScrollView: () => StyleBuilder<ScrollViewBuilder>;
+declare class VirtualColumnBuilder extends FiboBuilder {
+	private _itemHeight?;
+	private _estimatedItemHeight?;
+	private _measureItems;
+	private _overscan;
+	private _containerHeight;
+	itemHeight(height: number): this;
+	estimatedItemHeight(height: number): this;
+	measureItems(measure?: boolean): this;
+	overscan(count: number): this;
+	containerHeight(height: number): this;
+	build(): React$1.ReactElement;
+}
+export declare const VirtualColumn: () => StyleBuilder<VirtualColumnBuilder>;
+
+export {};