fiboui 2.8.4 → 2.9.0

package/dist/interactive.d.ts

@@ -1,2 +1,1702 @@
-export { Button, TextField, Form, formDataToValues, required, minLength, maxLength, email, pattern, min, max, rule, url, integer, equalTo, Switch, Checkbox, RadioGroup, Textarea, Select, Combobox } from './index.js';
-export type { FormErrorMode } from './index.js';
+// Generated by dts-bundle-generator v9.5.1
+
+import React$1 from 'react';
+import { CSSProperties, FormEvent, 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 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;
+}
+type ButtonVariant = "elevated" | "filled" | "outlined" | "text";
+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;
+}
+type GestureMask = "all" | "gesture" | "subviews" | "none";
+type TapLocation = {
+	x: number;
+	y: number;
+};
+declare abstract class GestureBuilder {
+	protected _enabled: boolean;
+	protected _including: GestureMask;
+	/** When true, wrappers must not stopPropagation (simultaneous). */
+	protected _bubble: boolean;
+	/** @internal Fired when the gesture successfully recognizes (Sequence / Exclusive). */
+	protected _onRecognized?: () => void;
+	enabled(value?: boolean): this;
+	/** SwiftUI `gesture(_:including:)`. */
+	including(mask: GestureMask): this;
+	/** Internal — set by SimultaneousGesture / `.simultaneousGesture`. */
+	bubble(value?: boolean): this;
+	/** @internal Used by SequenceGesture / ExclusiveGesture. */
+	onRecognized(callback: () => void): this;
+	/** @internal */
+	protected notifyRecognized(): void;
+	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);
+declare const Size: {
+	readonly full: "full";
+	readonly screen: "screen";
+	readonly fit: "fit";
+	readonly min: "min";
+	readonly max: "max";
+	/** SwiftUI `.infinity` — expand to the space the parent proposes (`100%`). */
+	readonly infinity: "infinity";
+};
+type Size = (typeof Size)[keyof typeof Size];
+declare const StackAlign: {
+	readonly center: "center";
+	readonly top: "top";
+	readonly bottom: "bottom";
+	readonly left: "left";
+	readonly right: "right";
+	readonly topLeft: "topLeft";
+	readonly topRight: "topRight";
+	readonly bottomLeft: "bottomLeft";
+	readonly bottomRight: "bottomRight";
+	/** SwiftUI `leading` → `left` */
+	readonly leading: "left";
+	/** SwiftUI `trailing` → `right` */
+	readonly trailing: "right";
+	/** SwiftUI `topLeading` → `topLeft` */
+	readonly topLeading: "topLeft";
+	/** SwiftUI `topTrailing` → `topRight` */
+	readonly topTrailing: "topRight";
+	/** SwiftUI `bottomLeading` → `bottomLeft` */
+	readonly bottomLeading: "bottomLeft";
+	/** SwiftUI `bottomTrailing` → `bottomRight` */
+	readonly bottomTrailing: "bottomRight";
+};
+type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
+type FrameSize = number | string | Size;
+interface FrameSpec {
+	width?: FrameSize;
+	height?: FrameSize;
+	minWidth?: FrameSize;
+	idealWidth?: FrameSize;
+	maxWidth?: FrameSize;
+	minHeight?: FrameSize;
+	idealHeight?: FrameSize;
+	maxHeight?: FrameSize;
+	alignment?: StackAlign | keyof typeof StackAlign;
+}
+type ClipShapeName = "circle" | "rounded" | "square";
+interface OffsetSpec {
+	x?: number;
+	y?: number;
+}
+interface FixedSizeSpec {
+	horizontal?: boolean;
+	vertical?: boolean;
+}
+interface LayerSpec {
+	kind: "overlay" | "background";
+	child: FiboChild | (() => FiboChild);
+	alignment: StackAlign | keyof typeof StackAlign;
+}
+type ContentShapeName = "rectangle" | ClipShapeName;
+type GeometryRect = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+type ContainerRelativeFrameSpec = {
+	axis?: "horizontal" | "vertical" | "both";
+	/** Divisions of the container (SwiftUI `count`). Default 1. */
+	count?: number;
+	/** Spans claimed (SwiftUI `span`). Default 1. */
+	span?: number;
+};
+type AlignmentGuideName = "leading" | "trailing" | "top" | "bottom" | "centerX" | "centerY" | string;
+type AlignmentGuideDims = {
+	width: number;
+	height: number;
+};
+type AlignmentGuideSpec = {
+	guide: AlignmentGuideName;
+	/** Absolute guide position, or compute from own size (SwiftUI `ViewDimensions`). */
+	compute: number | ((dims: AlignmentGuideDims) => number);
+};
+type MatchedGeometrySpec = {
+	id: string;
+	namespace?: string;
+	/** SwiftUI `isSource` — source owns the shared geometry. Default true. */
+	isSource?: boolean;
+};
+type PreferenceKeyDef<T> = {
+	readonly __preferenceKey: true;
+	readonly id: string | symbol;
+	readonly defaultValue: T;
+	reduce: (value: T, nextValue: T) => T;
+};
+type PreferenceWriteSpec = {
+	key: PreferenceKeyDef<any>;
+	value: unknown;
+};
+type PreferenceReadSpec = {
+	key: PreferenceKeyDef<any>;
+	onChange: (value: any) => void;
+};
+declare const Edge: {
+	readonly top: "top";
+	readonly bottom: "bottom";
+	readonly leading: "leading";
+	readonly trailing: "trailing";
+};
+type Edge = (typeof Edge)[keyof typeof Edge];
+declare const EdgeSet: {
+	readonly top: "top";
+	readonly bottom: "bottom";
+	readonly leading: "leading";
+	readonly trailing: "trailing";
+	readonly horizontal: "horizontal";
+	readonly vertical: "vertical";
+	readonly all: "all";
+};
+type EdgeSet = (typeof EdgeSet)[keyof typeof EdgeSet];
+type EdgeInsetsValue = {
+	top?: number | string;
+	bottom?: number | string;
+	leading?: number | string;
+	trailing?: number | string;
+	/** CSS left — alias of leading in LTR */
+	left?: number | string;
+	/** CSS right — alias of trailing in LTR */
+	right?: number | string;
+};
+type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
+type SafeAreaInsetSpec = {
+	edge: SafeAreaInsetEdge;
+	content: FiboChild | (() => FiboChild);
+	/** Gap between inset bar and content. Default 0. */
+	spacing?: number;
+};
+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;
+	/** Normal-priority gestures (SwiftUI `.gesture`). Last = outermost. */
+	protected _gestures: GestureBuilder[];
+	/** SwiftUI `.simultaneousGesture` — bubble / no stopPropagation. */
+	protected _simultaneousGestures: GestureBuilder[];
+	/** SwiftUI `.highPriorityGesture` — wrapped last (outermost / capture wins). */
+	protected _highPriorityGestures: GestureBuilder[];
+	protected _offset?: OffsetSpec;
+	protected _clipped: boolean;
+	protected _clipShape?: ClipShapeName | string;
+	protected _contentShape?: ContentShapeName | string;
+	protected _fixedSize?: FixedSizeSpec;
+	protected _layoutPriority?: number;
+	protected _layers: LayerSpec[];
+	protected _onGeometryChange?: (rect: GeometryRect) => void;
+	protected _compositingGroup: boolean;
+	protected _viewMask?: string;
+	protected _containerRelativeFrame?: ContainerRelativeFrameSpec;
+	protected _alignmentGuide?: AlignmentGuideSpec;
+	protected _matchedGeometry?: MatchedGeometrySpec;
+	protected _preferences: PreferenceWriteSpec[];
+	protected _preferenceReaders: PreferenceReadSpec[];
+	protected _safeAreaInsets: SafeAreaInsetSpec[];
+	protected _navigationTitle?: string;
+	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;
+	/**
+	 * SwiftUI `.frame(...)` wrappers (outer → inner order of application).
+	 * Applied in `assembleBuilder` so every widget gets the same DX.
+	 */
+	protected _frames: FrameSpec[];
+	/**
+	 * 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;
+	/**
+	 * SwiftUI `View.frame` — invisible box around this view.
+	 *
+	 * ```ts
+	 * Image(url).frame({ width: 300, height: 400 })
+	 * Text('★★★★').frame({
+	 *   maxWidth: Size.infinity,
+	 *   maxHeight: Size.infinity,
+	 *   alignment: StackAlign.topTrailing,
+	 * })
+	 * ```
+	 *
+	 * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
+	 */
+	frame(spec: FrameSpec): this;
+	/**
+	 * SwiftUI `.offset(x:y:)` — visual translate; layout size stays.
+	 * `.offset(8)` ≡ `{ x: 8, y: 8 }`; `.offset({ x: 4 })` only horizontal.
+	 */
+	offset(value: number | OffsetSpec): this;
+	/** SwiftUI `.clipped()` — overflow hidden to bounds. */
+	clipped(): this;
+	/**
+	 * SwiftUI `.clipShape` — `'circle' | 'rounded' | 'square'` or any CSS radius
+	 * (`'8px'`, `'50%'`). Clips drawing; hit-testing still follows layout unless
+	 * you also set {@link contentShape}.
+	 */
+	clipShape(shape: ClipShapeName | string): this;
+	/**
+	 * SwiftUI `.contentShape` — region used for hit-testing (tap / long-press).
+	 * Default `'rectangle'` = full frame box, even over transparent pixels.
+	 *
+	 * ```ts
+	 * ZStack()…frame({ width: 300, height: 400 })
+	 *   .clipShape('8px')
+	 *   .contentShape('rectangle')
+	 *   .onTapGesture(open)
+	 * ```
+	 */
+	contentShape(shape?: ContentShapeName | string): this;
+	/**
+	 * SwiftUI `.fixedSize(horizontal:vertical:)` — hug content on those axes.
+	 * Defaults both axes when called with no args.
+	 */
+	fixedSize(spec?: FixedSizeSpec | boolean): this;
+	/**
+	 * SwiftUI `.layoutPriority` — higher resists compression and claims free space.
+	 * Web: flex-grow / flex-shrink (not a full multi-axis proposal solver).
+	 */
+	layoutPriority(value: number): this;
+	/** SwiftUI `.compositingGroup()`. */
+	compositingGroup(): this;
+	/** SwiftUI `.mask` — shape name or CSS mask-image value. */
+	mask(shapeOrCss: ClipShapeName | "rectangle" | string): this;
+	/** SwiftUI `containerRelativeFrame`. */
+	containerRelativeFrame(axis?: ContainerRelativeFrameSpec["axis"] | ContainerRelativeFrameSpec, count?: number, span?: number): this;
+	/**
+	 * SwiftUI `alignmentGuide` — named guide + absolute value or compute from size.
+	 * ```ts
+	 * Text('Hi').alignmentGuide('leading', (d) => d.width / 2)
+	 * ```
+	 */
+	alignmentGuide(guide: AlignmentGuideName, compute: number | ((dims: {
+		width: number;
+		height: number;
+	}) => number)): this;
+	/**
+	 * SwiftUI `matchedGeometryEffect` — shared view-transition id + measured rect.
+	 * ```ts
+	 * Image(url).matchedGeometryEffect('hero', { namespace: 'gallery', isSource: true })
+	 * ```
+	 */
+	matchedGeometryEffect(id: string, namespaceOrOpts?: string | {
+		namespace?: string;
+		isSource?: boolean;
+	}): this;
+	/** SwiftUI `.preference(key:value:)` — contribute upward to `.onPreferenceChange`. */
+	preference<T>(key: PreferenceKeyDef<T>, value: T): this;
+	/** SwiftUI `.onPreferenceChange` — reduce descendant preferences. */
+	onPreferenceChange<T>(key: PreferenceKeyDef<T>, onChange: (value: T) => void): this;
+	/**
+	 * SwiftUI `.safeAreaInset(edge:)` — reserve a bar on one edge; content fills the rest.
+	 * Distinct from `SafeArea` (notch padding) and `proxy.safeAreaInsets` (read-only).
+	 */
+	safeAreaInset(edge: SafeAreaInsetEdge, content: SafeAreaInsetSpec["content"], spacing?: number): this;
+	/**
+	 * SwiftUI `.navigationTitle` — stores title for Scaffold (see `Scaffold.navigationTitle`).
+	 * On non-Scaffold builders, sets `aria-label` / data attribute only (no extra chrome bar).
+	 */
+	navigationTitle(title: string): this;
+	/**
+	 * SwiftUI `.overlay(alignment:) { }` — layer above this view.
+	 * ```ts
+	 * Image(url).overlay(Text('NEW'), StackAlign.topTrailing)
+	 * ```
+	 */
+	overlay(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
+	/**
+	 * SwiftUI `.background(alignment:) { }` — layer behind this view.
+	 */
+	background(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
+	/** SwiftUI `onGeometryChange` — fires on mount + resize. */
+	onGeometryChange(handler: (rect: GeometryRect) => void): this;
+	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;
+	/**
+	 * SwiftUI `.padding`:
+	 * - `.padding(8)` — all sides
+	 * - `.padding(EdgeSet.horizontal, 12)` — Edge.Set + value
+	 * - `.padding({ top: 8, leading: 12 })` — EdgeInsets
+	 */
+	padding(value: string | number): this;
+	padding(edges: EdgeSet, value: string | number): this;
+	padding(insets: EdgeInsetsValue): this;
+	/** SwiftUI `.padding` with {@link EdgeSet} — alias clarity. */
+	/** @deprecated Prefer `.padding(EdgeSet, n)` — same implementation. */
+	paddingEdges(edges: EdgeSet, 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.
+	 *
+	 * Percentages / `auto` do not lock `min-*` — `minWidth: 100%` on a flex
+	 * child fights clamping and lets long text blow past the ZStack box.
+	 */
+	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;
+	/** SwiftUI `scaleEffect` — alias of {@link scale}. */
+	scaleEffect(value: Signal<number> | number): this;
+	rotate(degrees: Signal<number> | number): this;
+	/** SwiftUI `rotationEffect` — alias of {@link rotate} (degrees). */
+	rotationEffect(degrees: Signal<number> | number): this;
+	/**
+	 * SwiftUI `.allowsHitTesting` — when `false`, this view and descendants
+	 * ignore pointer hits (`pointer-events: none`).
+	 */
+	allowsHitTesting(value?: boolean): this;
+	/**
+	 * SwiftUI scroll target id — used by {@link ScrollViewReader} `.scrollTo(id)`.
+	 * Sets `data-scroll-id` on the host.
+	 */
+	scrollTarget(id: string): this;
+	/**
+	 * SwiftUI: taps on *containers* (ZStack / Column / …) only hit drawn content
+	 * unless `.contentShape(Rectangle())` is set. We default that shape when the
+	 * first gesture is attached and the caller did not set one — same as the
+	 * usual SwiftUI fix, without forcing it on chrome-only views.
+	 */
+	protected ensureGestureContentShape(): void;
+	/**
+	 * SwiftUI `.gesture` — attach Tap / LongPress / Drag / Magnify / Rotate / …
+	 * Chainable: each call wraps the previous (outermost = last).
+	 */
+	gesture(gesture: GestureBuilder): this;
+	/** SwiftUI `.simultaneousGesture` — runs alongside other gestures (no steal). */
+	simultaneousGesture(gesture: GestureBuilder): this;
+	/** SwiftUI `.highPriorityGesture` — recognized before the view's own gestures. */
+	highPriorityGesture(gesture: GestureBuilder): this;
+	/**
+	 * Sugar for {@link TapGesture}`.onEnd(handler)`.
+	 * Note: `Button` / `List` / `ListTile` keep domain-specific `.onPress`.
+	 */
+	onPress(handler: () => void): this;
+	/** Flutter-style alias of {@link onPress}. */
+	onTap(handler: () => void): this;
+	/**
+	 * SwiftUI `onTapGesture(count:perform:)` — default count 1.
+	 * Pass a location callback for SpatialTap behavior.
+	 */
+	onTapGesture(countOrHandler: number | ((location?: TapLocation) => void) | (() => void), handler?: ((location?: TapLocation) => void) | (() => void)): this;
+	/**
+	 * SwiftUI `onLongPressGesture(minimumDuration:perform:onPressingChanged:)`.
+	 */
+	onLongPressGesture(handlerOrOpts: (() => void) | {
+		minimumDuration?: number;
+		maximumDistance?: number;
+		perform: () => void;
+		onPressingChanged?: (pressing: boolean) => void;
+	}, onPressingChanged?: (pressing: boolean) => void): 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;
+type ExtendedButtonVariant = ButtonVariant | "ghost" | "soft" | "outline" | "text" | "raw" | "solid";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonShape = "default" | "pill" | "square" | "rect" | "rounded" | "sharp";
+type ButtonTone = "default" | "inverse";
+type ButtonMotion = "default" | "none";
+declare class ButtonBuilder extends FiboBuilder {
+	private _text;
+	private _live;
+	private _variant;
+	private _size;
+	private _onPress?;
+	private _onHover?;
+	private _disabled;
+	private _icon?;
+	private _shape;
+	private _shadow;
+	private _tone;
+	private _motion;
+	private _expand;
+	private _htmlType;
+	private _htmlTypeExplicit;
+	constructor(text?: string | (() => string));
+	text(value: string | (() => string)): this;
+	children(children: FiboChildren): this;
+	variant(variant: ExtendedButtonVariant): this;
+	clean(): this;
+	size(size: ButtonSize): this;
+	onPress(handler: () => void): this;
+	onHover(handler: () => void): this;
+	disabled(value?: boolean): this;
+	icon(icon: React$1.ReactNode): this;
+	shape(value: ButtonShape): this;
+	shadow(value: "none" | "soft"): this;
+	tone(value: ButtonTone): this;
+	motion(value: ButtonMotion): this;
+	expand(value?: boolean): this;
+	/**
+	 * HTML button type. `.type('submit')` is what people write inside a Form.
+	 * React still reads `element.type` as the component: a string sets this,
+	 * a props object renders the button.
+	 */
+	type(value: "button" | "submit" | "reset"): this;
+	htmlType(value: "button" | "submit" | "reset"): this;
+	/** Shortcut for `.htmlType('submit')` inside a `Form`. */
+	submit(): this;
+	/** Shortcut for `.htmlType('reset')`. */
+	reset(): this;
+	private resolvedHtmlType;
+	build(): React$1.ReactElement;
+}
+export declare const Button: (text?: string | (() => string) | undefined) => StyleBuilder<ButtonBuilder>;
+/** Where failed rules are painted. */
+export type FormErrorMode = "field" | "below" | "manual";
+type FormValues = Record<string, string | string[]>;
+type FormControl = {
+	element: HTMLFormElement;
+	/** Reset every field, or one named field back to its default. */
+	reset(name?: string): void;
+	/** Set one named field's current value (uncontrolled inputs). */
+	set(name: string, value: string): void;
+	/** Last validation messages (empty when valid). */
+	errors: FieldErrors;
+};
+type FormSubmitHandler = (values: FormValues, form: FormControl, event: React$1.FormEvent<HTMLFormElement>) => unknown | Promise<unknown>;
+type FormBeforeSubmitHandler = (values: FormValues, form: FormControl, event: React$1.FormEvent<HTMLFormElement>) => unknown | Promise<unknown>;
+type FormAfterSubmitHandler = (values: FormValues, form: FormControl, event: React$1.FormEvent<HTMLFormElement>) => unknown | Promise<unknown>;
+/** Flatten FormData into a plain object (multi-value keys → string[]). */
+export declare function formDataToValues(fd: FormData): FormValues;
+declare class FormBuilder extends FiboBuilder {
+	private _gap?;
+	private _onSubmit?;
+	private _beforeSubmit?;
+	private _afterSubmit?;
+	private _validation?;
+	private _errorMode;
+	private _onInvalid?;
+	private _action?;
+	private _method;
+	gap(value: number | string): this;
+	spacing(value: number | string): this;
+	onSubmit(handler: FormSubmitHandler): this;
+	beforeSubmit(handler: FormBeforeSubmitHandler): this;
+	afterSubmit(handler: FormAfterSubmitHandler): this;
+	/**
+	 * Rules per field name. Combined with `TextField().rules(...)`.
+	 * Failed submit skips `before` / `onSubmit` / `after`.
+	 *
+	 * `.errorMode('field')` — TextField's own error line (default)
+	 * `.errorMode('below')` — message under the control
+	 * `.errorMode('manual')` — only `.onInvalid(errors)`
+	 */
+	validation(schema: FieldSchema): this;
+	errorMode(mode: FormErrorMode): this;
+	/** Custom placement. Still receives errors when mode is `field` or `below`. */
+	onInvalid(handler: (errors: FieldErrors, form: FormControl) => unknown): this;
+	action(url: string): this;
+	method(m: "get" | "post" | string): this;
+	items(children: FiboChildren): this;
+	build(): React$1.ReactElement;
+}
+export declare const Form: () => StyleBuilder<FormBuilder>;
+type FieldRule = {
+	check: (value: string, values: FormValues) => boolean | Promise<boolean>;
+	message: string;
+};
+export declare function required(message?: string): FieldRule;
+export declare function minLength(min: number, message?: string): FieldRule;
+export declare function maxLength(max: number, message?: string): FieldRule;
+export declare function email(message?: string): FieldRule;
+export declare function pattern(re: RegExp, message?: string): FieldRule;
+export declare function min(n: number, message?: string): FieldRule;
+export declare function max(n: number, message?: string): FieldRule;
+/** Escape hatch — return true when the value is valid. Promise false/reject fails. */
+export declare function rule(check: (value: string, values: FormValues) => boolean | Promise<boolean>, message: string): FieldRule;
+export declare function url(message?: string): FieldRule;
+export declare function integer(message?: string): FieldRule;
+export declare function equalTo(otherFieldName: string, message?: string): FieldRule;
+type FieldSchema = Record<string, FieldRule | FieldRule[]>;
+type FieldErrors = Record<string, string>;
+declare class TextFieldBuilder extends FiboBuilder {
+	private _value;
+	private _label;
+	private _placeholder;
+	private _type;
+	private _name?;
+	private _disabled;
+	private _error?;
+	private _helper?;
+	private _rules?;
+	private _mask?;
+	private _controlled;
+	private _clearable;
+	private _onChange?;
+	/** Fires on blur — prefer this over onChange to avoid work per keystroke. */
+	private _onCommit?;
+	private _leadingIcon?;
+	private _trailingIcon?;
+	constructor(value?: string);
+	value(val: string | Signal<string>): this;
+	/**
+	 * Force controlled React `value` (re-renders every key). Default is uncontrolled.
+	 * Prefer `.value(signal)` + read signal when needed, or `.onCommit`.
+	 */
+	controlled(enabled?: boolean): this;
+	private bindMarked;
+	label(val: string): this;
+	placeholder(val: string): this;
+	/** HTML `name` — required for `Form().onSubmit` FormData collection. */
+	name(val: string): this;
+	type(val: "text" | "password" | "email" | "number" | "tel"): this;
+	/** Native `inputMode` — virtual keyboard hint. */
+	inputMode(val: React$1.HTMLAttributes<HTMLInputElement>["inputMode"]): this;
+	/** Native `enterKeyHint` — mobile action-key label. */
+	enterKeyHint(val: React$1.HTMLAttributes<HTMLInputElement>["enterKeyHint"]): this;
+	mask(format: string): this;
+	disabled(val?: boolean): this;
+	error(val: string): this;
+	/** Muted hint under the field. Hidden while `.error()` (or a painted Form error) is showing. */
+	helper(text: string): this;
+	/** Trailing clear button while the input has a value. Hidden when empty or disabled. */
+	clearable(enabled?: boolean): this;
+	/** Alias of `.clearable()`. */
+	clear(enabled?: boolean): this;
+	/** Rules collected by `Form` on submit (this field's own checks). */
+	rules(...items: FieldRule[]): this;
+	/** Per-keystroke callback — does not re-render the field by itself. */
+	onChange(handler: (value: string) => void): this;
+	/** Fires when the field loses focus — use for validation / form sync. */
+	onCommit(handler: (value: string) => void): this;
+	leadingIcon(icon: React$1.ReactNode): this;
+	trailingIcon(icon: React$1.ReactNode): this;
+	private _variant;
+	variant(val: "filled" | "outlined"): this;
+	build(): React$1.ReactElement;
+}
+export declare const TextField: (value?: string | undefined) => StyleBuilder<TextFieldBuilder>;
+declare class SwitchBuilder extends FiboBuilder {
+	private _checked;
+	private _checkedSignal?;
+	private _controlled;
+	private _onChange?;
+	private _label?;
+	private _disabled;
+	private _name?;
+	private _value;
+	private _rules?;
+	private _error?;
+	private _checkedStyle?;
+	private _uncheckedStyle?;
+	/**
+	 * Static boolean, or a signal — then this switch owns that signal and
+	 * stays controlled.
+	 */
+	checked(value: boolean | BindableSignal<boolean>): this;
+	/**
+	 * Force controlled React `checked` (parent must setState). Default is uncontrolled.
+	 */
+	controlled(enabled?: boolean): this;
+	/** HTML `name` — required for `Form` FormData collection. */
+	name(val: string): this;
+	/** Submit value when checked (HTML checkbox `value`, default `'on'`). */
+	value(val: string): this;
+	onChange(handler: (checked: boolean) => void): this;
+	/**
+	 * Paint for a `When` state. `on` / `off` replace the track fill.
+	 * `hover` / `focus` / `active` are CSS pseudos on this node.
+	 *
+	 * ```ts
+	 * Switch()
+	 *   .when(When.on, (s) => s.bg('#c8ff00'))
+	 *   .when(When.off, (s) => s.bg('rgba(255,255,255,0.16)'))
+	 * ```
+	 */
+	when(state: When, style: WhenStyle): this;
+	label(text: string): this;
+	disabled(value?: boolean): this;
+	error(val: string): this;
+	/** Rules collected by `Form` on submit (this field's own checks). */
+	rules(...items: FieldRule[]): this;
+	build(): React$1.ReactElement;
+}
+export declare const Switch: () => StyleBuilder<SwitchBuilder>;
+declare class CheckboxBuilder extends FiboBuilder {
+	private _checked;
+	private _controlled;
+	private _onChange?;
+	private _label?;
+	private _disabled;
+	private _indeterminate;
+	private _name?;
+	private _value;
+	private _rules?;
+	private _error?;
+	private _checkedStyle?;
+	private _uncheckedStyle?;
+	private _indeterminateStyle?;
+	checked(value: boolean): this;
+	/**
+	 * Force controlled React `checked` (parent must setState). Default is uncontrolled.
+	 */
+	controlled(enabled?: boolean): this;
+	/** HTML `name` — required for `Form` FormData collection. */
+	name(val: string): this;
+	/** Submit value when checked (HTML checkbox `value`, default `'on'`). */
+	value(val: string): this;
+	indeterminate(value: boolean): this;
+	onChange(handler: (checked: boolean) => void): this;
+	/**
+	 * Paint for a `When` state. `on` / `off` / `mixed` replace the box fill.
+	 * `hover` / `focus` / `active` are CSS pseudos on this node.
+	 *
+	 * ```ts
+	 * Checkbox()
+	 *   .when(When.on, (s) => s.bg('#c8ff00').borderColor('transparent'))
+	 *   .when(When.off, (s) => s.bg('transparent').borderColor('rgba(255,255,255,0.16)'))
+	 * ```
+	 */
+	when(state: When, style: WhenStyle): this;
+	label(text: string): this;
+	disabled(value?: boolean): this;
+	error(val: string): this;
+	/** Rules collected by `Form` on submit (this field's own checks). */
+	rules(...items: FieldRule[]): this;
+	build(): React$1.ReactElement;
+}
+export declare const Checkbox: () => StyleBuilder<CheckboxBuilder>;
+interface RadioOption {
+	label: string;
+	value: string;
+	disabled?: boolean;
+}
+declare class RadioGroupBuilder extends FiboBuilder {
+	private _value;
+	private _controlled;
+	private _options;
+	private _onChange?;
+	private _name?;
+	private _direction;
+	private _rules?;
+	private _error?;
+	value(val: string): this;
+	/**
+	 * Force controlled React selection (parent must setState). Default is uncontrolled.
+	 */
+	controlled(enabled?: boolean): this;
+	options(opts: RadioOption[]): this;
+	onChange(handler: (val: string) => void): this;
+	direction(dir: "vertical" | "horizontal"): this;
+	name(val: string): this;
+	error(val: string): this;
+	/** Rules collected by `Form` on submit (this field's own checks). */
+	rules(...items: FieldRule[]): this;
+	build(): React$1.ReactElement;
+}
+export declare const RadioGroup: () => StyleBuilder<RadioGroupBuilder>;
+declare class TextareaBuilder extends FiboBuilder {
+	private _value;
+	private _label;
+	private _placeholder;
+	private _name?;
+	private _disabled;
+	private _rows;
+	private _error?;
+	private _helper?;
+	private _rules?;
+	private _controlled;
+	private _resize;
+	private _onChange?;
+	/** Fires on blur — prefer this over onChange to avoid work per keystroke. */
+	private _onCommit?;
+	constructor(value?: string);
+	value(val: string | Signal<string>): this;
+	/**
+	 * Force controlled React `value` (re-renders every key). Default is uncontrolled.
+	 * Prefer `.value(signal)` + read signal when needed, or `.onCommit`.
+	 */
+	controlled(enabled?: boolean): this;
+	label(val: string): this;
+	placeholder(val: string): this;
+	/** HTML `name` — required for `Form().onSubmit` FormData collection. */
+	name(val: string): this;
+	disabled(val?: boolean): this;
+	rows(val: number): this;
+	resize(val: "none" | "vertical" | "horizontal" | "both"): this;
+	error(val: string): this;
+	/** Muted hint under the field. Hidden while `.error()` (or a painted Form error) is showing. */
+	helper(text: string): this;
+	/** Rules collected by `Form` on submit (this field's own checks). */
+	rules(...items: FieldRule[]): this;
+	/** Per-keystroke callback — does not re-render the field by itself. */
+	onChange(handler: (value: string) => void): this;
+	/** Fires when the field loses focus — use for validation / form sync. */
+	onCommit(handler: (value: string) => void): this;
+	build(): React$1.ReactElement;
+}
+export declare const Textarea: (value?: string | undefined) => StyleBuilder<TextareaBuilder>;
+interface Option$1 {
+	label: string;
+	value: string;
+	disabled?: boolean;
+}
+declare class SelectBuilder extends FiboBuilder {
+	private _value;
+	private _label;
+	private _placeholder;
+	private _disabled;
+	private _error?;
+	private _multiple;
+	private _options;
+	private _onChange?;
+	private _name?;
+	private _controlled;
+	private _rules?;
+	value(val: string | string[]): this;
+	/**
+	 * Force controlled selection from `.value()` / parent. Default keeps local
+	 * selection state so FormData / display update without a parent re-render.
+	 */
+	controlled(enabled?: boolean): this;
+	label(val: string): this;
+	placeholder(val: string): this;
+	/** HTML `name` — renders a hidden input so `Form` FormData includes the selection. */
+	name(val: string): this;
+	options(opts: Option$1[]): this;
+	multiple(val?: boolean): this;
+	disabled(val?: boolean): this;
+	error(val: string): this;
+	/** Rules collected by `Form` on submit (attached to the hidden named input). */
+	rules(...items: FieldRule[]): this;
+	onChange(handler: (value: string | string[]) => void): this;
+	build(): React$1.ReactElement;
+}
+export declare const Select: () => StyleBuilder<SelectBuilder>;
+interface Option$1 {
+	label: string;
+	value: string;
+}
+declare class ComboboxBuilder extends FiboBuilder {
+	private _value;
+	private _label;
+	private _placeholder;
+	private _disabled;
+	private _error?;
+	private _multiple;
+	private _options;
+	private _onChange?;
+	private _onAdd?;
+	private _name?;
+	private _controlled;
+	private _rules?;
+	value(val: string | string[]): this;
+	/**
+	 * Force controlled committed value from `.value()` / parent. Default keeps
+	 * local selection so FormData / tags update without a parent re-render.
+	 */
+	controlled(enabled?: boolean): this;
+	label(val: string): this;
+	placeholder(val: string): this;
+	/** HTML `name` — renders a hidden input so `Form` FormData includes the committed value. */
+	name(val: string): this;
+	options(opts: Option$1[]): this;
+	multiple(val?: boolean): this;
+	disabled(val?: boolean): this;
+	error(val: string): this;
+	/** Rules collected by `Form` on submit (attached to the hidden named input). */
+	rules(...items: FieldRule[]): this;
+	onChange(handler: (value: string | string[]) => void): this;
+	onAdd(handler: (newLabel: string) => void): this;
+	build(): React$1.ReactElement;
+}
+export declare const Combobox: () => StyleBuilder<ComboboxBuilder>;
+
+export {};