fiboui 2.8.3 → 2.8.5

package/dist/content.d.ts

@@ -1 +1,1178 @@
-export { Avatar, Badge, Text, Label, Image, Spinner, Skeleton, Alert, Progress, Icon, Integration } 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 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 TextType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "caption" | "label";
+type StatusType = "success" | "warning" | "error" | "info";
+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;
+type AvatarShape = "circle" | "rounded" | "square";
+type AvatarStatus = "none" | "online" | "offline" | "busy";
+type AvatarIcon = "user" | React$1.ReactNode;
+declare class AvatarBuilder extends FiboBuilder {
+	private _image;
+	private _size;
+	private _border;
+	private _shape;
+	private _status;
+	private _initials?;
+	private _icon?;
+	private _alt?;
+	image(url: string): this;
+	/** Alias for `.image()` — matches `Image().src()` and docs samples. */
+	src(url: string): this;
+	alt(text: string): this;
+	size(value: string | number): this;
+	border(value: string): this;
+	shape(value: AvatarShape): this;
+	status(value: AvatarStatus): this;
+	initials(text: string): this;
+	icon(source?: AvatarIcon): this;
+	build(): React$1.ReactElement;
+}
+export declare const Avatar: () => StyleBuilder<AvatarBuilder>;
+type BadgeVariant = "neutral" | "accent" | "outline" | "glass" | "solid" | "dot";
+type BadgeIntent = "none" | "success" | "warning" | "error" | "info";
+type BadgeShape = "pill" | "rounded";
+declare class BadgeBuilder extends FiboBuilder {
+	private _text;
+	private _icon?;
+	private _variant;
+	private _intent;
+	private _shape;
+	text(value: string): this;
+	icon(icon: React$1.ReactNode): this;
+	variant(variant: BadgeVariant): this;
+	intent(intent: BadgeIntent): this;
+	shape(shape: BadgeShape): this;
+	build(): React$1.ReactElement;
+}
+export declare const Badge: () => StyleBuilder<BadgeBuilder>;
+type TextTruncation = "clip" | "ellipsis" | "head" | "middle" | "tail";
+type TextCase = "uppercase" | "lowercase" | "capitalize" | "none";
+declare class TextBuilder extends FiboBuilder {
+	private _text;
+	private _live;
+	private _nodes?;
+	private _type;
+	private _lineLimit?;
+	private _truncation?;
+	private _italic;
+	private _redacted;
+	private _bold;
+	private _underline;
+	private _strike;
+	private _textCase?;
+	constructor(text?: string | (() => string));
+	private setMarkedString;
+	private setLiteralString;
+	text(value: string | (() => string) | unknown): this;
+	/**
+	 * Dual `.type()`: typography (`h1`…`label`) sets the host tag + `fibo-text-*`.
+	 * CSS display (`block` / `flex` / …) sets `display` and leaves the tag alone.
+	 */
+	type(type: TextType | string): this;
+	variant(variant: TextType): this;
+	children(children: FiboChildren): this;
+	props(value: Record<string, any>): this;
+	nowrap(): this;
+	mono(): this;
+	muted(): this;
+	/**
+	 * Subscribe an extra signal (or override text with `format`).
+	 * `$length` / `interp()` already auto-bind their own signals.
+	 *
+	 * ```ts
+	 * Text(`Total: ${todos.$length}`).bindSignal(filter) // also rebuild when filter changes
+	 * Text().bindSignal(todos, (list) => `Total: ${list.length}`)
+	 * ```
+	 */
+	bindSignal<T>(signal: BindableSignal<T>, format?: (value: T) => string): this;
+	/** Clamp to `n` lines (`-webkit-box` + `WebkitLineClamp`). */
+	lineLimit(n: number): this;
+	truncation(mode: TextTruncation): this;
+	italic(): this;
+	bold(): this;
+	underline(): this;
+	strikethrough(): this;
+	/** SwiftUI `redacted`. Hides the glyphs and paints a placeholder bar. */
+	redacted(): this;
+	textCase(mode: TextCase): this;
+	/** Decorations stored by the methods above, applied onto the text style at build. */
+	private textChrome;
+	build(): React$1.ReactElement;
+}
+declare const Text$1: (text?: string | (() => string) | undefined) => StyleBuilder<TextBuilder>;
+declare class LabelBuilder extends FiboBuilder {
+	private _text;
+	private _htmlFor?;
+	private _required;
+	constructor(text?: string);
+	text(value: string): this;
+	htmlFor(id: string): this;
+	required(val?: boolean): this;
+	build(): React$1.ReactElement;
+}
+export declare const Label: (text?: string | undefined) => StyleBuilder<LabelBuilder>;
+type ClipShape = "circle" | "rounded" | "square";
+declare class ImageBuilder extends FiboBuilder {
+	private _src;
+	private _alt;
+	private _fit;
+	private _resizable;
+	private _clipShape?;
+	private _frameWidth?;
+	private _frameHeight?;
+	private _foregroundStyle?;
+	constructor(src?: string);
+	src(value: string): this;
+	alt(value: string): this;
+	resizable(): this;
+	scaledToFit(): this;
+	scaledToFill(): this;
+	frame(dimensions: {
+		width: number;
+		height: number;
+	}): this;
+	clipShape(shape: ClipShape): this;
+	foregroundStyle(style: string): this;
+	build(): React$1.ReactElement;
+}
+declare const Image$1: (src?: string | undefined) => StyleBuilder<ImageBuilder>;
+type SpinnerVariant = "circle" | "dots" | "pulse" | "blocks";
+type SpinnerSize = "sm" | "md" | "lg" | "xl" | number;
+declare class SpinnerBuilder extends FiboBuilder {
+	private _size;
+	private _color?;
+	private _variant;
+	size(value: SpinnerSize): this;
+	color(value: string): this;
+	variant(value: SpinnerVariant): this;
+	build(): React$1.ReactElement;
+}
+export declare const Spinner: () => StyleBuilder<SpinnerBuilder>;
+type SkeletonShape = "circle" | "square" | "rounded" | "rounded-sm" | "rounded-md" | "rounded-lg";
+declare class SkeletonBuilder extends FiboBuilder {
+	private _width;
+	private _height;
+	private _shape;
+	width(value: string | number): this;
+	height(value: string | number): this;
+	shape(value: SkeletonShape): this;
+	build(): React$1.ReactElement;
+}
+export declare const Skeleton: () => StyleBuilder<SkeletonBuilder>;
+declare class AlertBuilder extends FiboBuilder {
+	private _title;
+	private _description?;
+	private _intent;
+	title(value: string): this;
+	description(value: string): this;
+	intent(value: StatusType): this;
+	build(): React$1.ReactElement;
+}
+export declare const Alert: () => StyleBuilder<AlertBuilder>;
+type ProgressVariant = "default" | "striped" | "labeled" | "circular" | "ring" | "segments" | "knob" | "steps" | "chevron" | "floating" | "pagination" | "timeline";
+interface ProgressSegment {
+	value: number;
+	color: string;
+	strokeWidth?: number;
+}
+interface ProgressItem {
+	title?: string;
+	description?: string;
+	date?: string;
+}
+declare class ProgressBuilder extends FiboBuilder {
+	private _value;
+	private _max;
+	private _color?;
+	private _height?;
+	private _variant;
+	private _label?;
+	private _subLabel?;
+	private _items?;
+	private _size?;
+	private _strokeWidth?;
+	private _segments?;
+	private _gap?;
+	private _trackColor?;
+	value(current: number): this;
+	max(total: number): this;
+	color(hex: string): this;
+	height(val: number | string): this;
+	size(val: number): this;
+	strokeWidth(val: number): this;
+	segments(list: ProgressSegment[]): this;
+	gap(frac: number): this;
+	trackColor(hex: string): this;
+	variant(val: ProgressVariant): this;
+	label(text: string): this;
+	subLabel(text: string): this;
+	items(list: ProgressItem[]): this;
+	build(): React$1.ReactElement;
+}
+export declare const Progress: () => StyleBuilder<ProgressBuilder>;
+type IconSource = string | SVGAElement | any | React$1.ComponentType<{
+	size?: number | string;
+	color?: string;
+	className?: string;
+	style?: React$1.CSSProperties;
+	[key: string]: unknown;
+}>;
+declare class IconBuilder extends FiboBuilder {
+	private _source?;
+	private _color;
+	private _size;
+	constructor(source?: IconSource);
+	source(value: IconSource): this;
+	color(value: string): this;
+	size(value: number): this;
+	build(): React$1.ReactElement;
+}
+export declare const Icon: (source?: any) => StyleBuilder<IconBuilder>;
+declare class IntegrationBuilder extends FiboBuilder {
+	private _source;
+	constructor(source?: any);
+	source(value: any): this;
+	props(value: any): this;
+	build(): React$1.ReactElement;
+}
+export declare const Integration: (source?: any) => StyleBuilder<IntegrationBuilder>;
+
+export {
+	Image$1 as Image,
+	Text$1 as Text,
+};
+
+export {};