fiboui 2.8.4 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.d.ts CHANGED
@@ -1,2 +1,1897 @@
1
- export { signal, computed, observable, createStore, Signal, ComputedSignal, Observable, createReactivityRoot, runInScope, getCurrentScope, listSignal, collection, ListSignal, ensureListId, interp, useSignal, useReactiveStore, useObservable, useBuilderState, Observer, ProviderWrapper, useProvider, ReactivityRoot, FineGrainText, bindText, applyResponsiveStyles, useTransition, useSpring, useStagger, useMountTransition, usePrefersReducedMotion, useScrollProgress, Easing, cssCurve, Presence, Reveal, ScrollProgress, scrollTo, startViewTransition, supportsViewTimeline, supportsScrollTimeline, springEase, resolveCssEase, MOTION_PRESETS, INTERACTION_EFFECTS, normalizeInteractionEffect, interactionEffectClass, interactionEffectKebab, FIBO_INTERACTION_FX_CSS, ensureInteractionFxCss, MotionStyles, FiboStyles, getMotionCss, getCss, getStyleTag, endSsrRequest, page, withFiboStyles, createPage, FiboApp, FiboAppBuilder, mount, Fibo, toElement, ValueBuilder } from './index.js';
2
- export type { Buildable, FiboChild, FiboChildren, ResponsiveStyles, BindableSignal, ReactiveStore, ReactivityScope, ListItemId, ListMatcher, ListEntity, TransitionConfig, SpringConfig, AnimationOptions, SpringOptions, MotionPreset, CustomMotion, InteractionEffectName, FiboPageBuild, FiboPageOptions, PseudoStateFn, PseudoStateBuilder } from './index.js';
1
+ // Generated by dts-bundle-generator v9.5.1
2
+
3
+ import React$1 from 'react';
4
+ import { CSSProperties, ComponentType, ReactElement, ReactNode } from 'react';
5
+ import { Root } from 'react-dom/client';
6
+
7
+ /** Any fluent builder that can produce a React element. */
8
+ export type Buildable = {
9
+ /** @deprecated Builders are React elements; `.build()` is optional. */
10
+ build(): React$1.ReactNode;
11
+ };
12
+ /**
13
+ * A single child accepted by `.children()` / layout slots / JSX / component returns.
14
+ * Builders are React elements — they do not need `.build()`.
15
+ */
16
+ export type FiboChild = React$1.ReactNode | Buildable;
17
+ /** Value accepted by `.children()`: one child, a list, or a lazy factory. */
18
+ export type FiboChildren = FiboChild | readonly FiboChild[] | (() => FiboChild | readonly FiboChild[]);
19
+ type FiboThemeName = "material" | "cupertino" | "web" | "noir";
20
+ export interface ResponsiveStyles {
21
+ mobile?: React$1.CSSProperties;
22
+ tablet?: React$1.CSSProperties;
23
+ desktop?: React$1.CSSProperties;
24
+ }
25
+ type AlignAxis = "start" | "center" | "end" | "stretch" | "baseline" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly";
26
+ interface TextStyle {
27
+ fontSize?: string | number;
28
+ fontWeight?: string | number;
29
+ fontFamily?: string;
30
+ color?: string;
31
+ lineHeight?: string | number;
32
+ letterSpacing?: string | number;
33
+ }
34
+ type Listener<T> = (value: T) => void;
35
+ type Unsubscribe = () => void;
36
+ /** Isolated reactive graph for one React root / test / island. */
37
+ export declare class ReactivityScope {
38
+ activeEffect: Effect | Tracker | null;
39
+ }
40
+ export declare function createReactivityRoot(): ReactivityScope;
41
+ export declare function getCurrentScope(): ReactivityScope;
42
+ export declare function runInScope<T>(scope: ReactivityScope, fn: () => T): T;
43
+ interface Subscribable<T> {
44
+ subscribe(listener: Listener<T>): Unsubscribe;
45
+ subscribeEffect(effect: Effect): void;
46
+ unsubscribeEffect(effect: Effect): void;
47
+ }
48
+ /** Anything `.bindSignal()` can subscribe to (`Signal` or `ComputedSignal`). */
49
+ export interface BindableSignal<T = unknown> {
50
+ readonly value: T;
51
+ subscribe(listener: Listener<T>): Unsubscribe;
52
+ }
53
+ declare class Effect {
54
+ private fn;
55
+ private dependencies;
56
+ private _onDispose?;
57
+ constructor(fn: () => void);
58
+ run(): void;
59
+ track(dep: Subscribable<any>): void;
60
+ trigger(): void;
61
+ cleanup(): void;
62
+ dispose(): void;
63
+ }
64
+ declare class Tracker {
65
+ private _onInvalidate;
66
+ private dependencies;
67
+ constructor(_onInvalidate: () => void);
68
+ execute<T>(fn: () => T): T;
69
+ track(dep: Subscribable<any>): void;
70
+ trigger(): void;
71
+ cleanup(): void;
72
+ dispose(): void;
73
+ }
74
+ export declare class Signal<T> implements Subscribable<T> {
75
+ private _value;
76
+ private listeners;
77
+ private effects;
78
+ private readonly _initial;
79
+ constructor(_value: T);
80
+ get value(): T;
81
+ /** Current value without tracking. Replays use this so a node does not subscribe twice. */
82
+ peek(): T;
83
+ set value(newValue: T);
84
+ /** Replace the value. Same notify path as `.value = next`. */
85
+ set(next: T): this;
86
+ /**
87
+ * Write a value, or an updater `(prev) => next`.
88
+ * Function-valued signals should use `.set()` / `.value =` so the function is stored, not called.
89
+ * Not named `update`: `listSignal.update(id, patch)` is the item patch.
90
+ */
91
+ change(next: T | ((prev: T) => T)): this;
92
+ /** Restore the value passed to `signal(initial)`. */
93
+ reset(): this;
94
+ subscribe(listener: Listener<T>): Unsubscribe;
95
+ subscribeEffect(effect: Effect): void;
96
+ unsubscribeEffect(effect: Effect): void;
97
+ private _notifyDepth;
98
+ private notify;
99
+ }
100
+ export declare function signal<T>(initialValue: T): Signal<T>;
101
+ export declare class ComputedSignal<T> implements Subscribable<T> {
102
+ private fn;
103
+ private listeners;
104
+ private effects;
105
+ private _value;
106
+ private _dirty;
107
+ private _disposed;
108
+ private _ready;
109
+ private _hasValue;
110
+ private _computing;
111
+ private internalEffect;
112
+ constructor(fn: () => T);
113
+ /** Current value without tracking and without joining the page frame. */
114
+ peek(): T;
115
+ get value(): T;
116
+ subscribe(listener: Listener<T>): Unsubscribe;
117
+ subscribeEffect(effect: Effect): void;
118
+ unsubscribeEffect(effect: Effect): void;
119
+ /** Drop the internal effect and freeze the last evaluated value. */
120
+ dispose(): void;
121
+ private _notifyDepth;
122
+ private notify;
123
+ }
124
+ export declare function computed<T>(fn: () => T): ComputedSignal<T>;
125
+ export declare class Observable<T> implements Subscribable<T> {
126
+ private _value;
127
+ private listeners;
128
+ private effects;
129
+ constructor(_value: T);
130
+ get(): T;
131
+ set(newValue: T): void;
132
+ subscribe(listener: Listener<T>): Unsubscribe;
133
+ subscribeEffect(effect: Effect): void;
134
+ unsubscribeEffect(effect: Effect): void;
135
+ private notify;
136
+ }
137
+ export declare function observable<T>(initialValue: T): Observable<T>;
138
+ interface Store<T> extends Subscribable<T> {
139
+ getState(): T;
140
+ setState(fn: Partial<T> | ((state: T) => Partial<T>)): void;
141
+ }
142
+ export declare function createStore<T>(initialState: T): Store<T>;
143
+ export type ListItemId = string | number;
144
+ /** Every object in a `listSignal` gets a stable internal key. */
145
+ export type ListEntity<T extends object = object> = T & {
146
+ _id: string;
147
+ };
148
+ export type ListMatcher<T> = ListItemId | ((item: T, index: number) => boolean);
149
+ /** Stamp `_id` if missing. Keeps an existing `_id`. */
150
+ export declare function ensureListId<T extends object>(item: T): ListEntity<T>;
151
+ /**
152
+ * Reactive list — auto-stamps a UUID `_id` on every object.
153
+ * Use `_id` for update/remove/find; your domain fields stay free of ids.
154
+ *
155
+ * `view('ship')` / `search('ship')` show a subset. The full list stays in memory, so
156
+ * `view('')` / `search('')` show every item again. `filter(fn)` is a one-shot snapshot
157
+ * of the full list. `viewWhere(fn)` is the live predicate (AND with the query);
158
+ * `viewWhere()` clears it. `add` always writes to the full list.
159
+ *
160
+ * ```ts
161
+ * const todos = listSignal<{ title: string }>([])
162
+ * todos.add({ title: 'Ship' }) // → { title: 'Ship', _id: '…' }
163
+ * todos.update(todo._id, { title: 'Done' })
164
+ * todos.view('done')
165
+ * todos.view('')
166
+ * todos.remove(todo._id)
167
+ * ```
168
+ */
169
+ export declare class ListSignal<T extends object> extends Signal<ListEntity<T>[]> {
170
+ private _$length?;
171
+ /** Full list. `.value` is this array, or a filtered slice while a view/filter is set. */
172
+ private _source;
173
+ private _query;
174
+ private _keys?;
175
+ private _predicate?;
176
+ /** Membership and order. Item patches do not move this. */
177
+ private _structureVersion;
178
+ private _itemVersions;
179
+ private _structureListeners;
180
+ private _itemListeners;
181
+ constructor(initial?: Array<T | ListEntity<T>>);
182
+ get value(): ListEntity<T>[];
183
+ /**
184
+ * Replaces the full list, then reapplies the current view.
185
+ * In-place mutation of this array (`push` / `splice`) does not notify
186
+ * and does not write the stored list — assign a new array or use
187
+ * `add` / `update` / `remove`.
188
+ */
189
+ set value(next: ListEntity<T>[]);
190
+ /** Who is in the list, and in what order. `add` / `remove` / `set` / `view` move this. */
191
+ structureVersion(): number;
192
+ /** Content of one `_id`. `update` / `replace` move only that id. */
193
+ itemVersion(id: string): number;
194
+ subscribeStructure(listener: () => void): () => void;
195
+ subscribeItem(id: string, listener: () => void): () => void;
196
+ private emitStructure;
197
+ private emitItem;
198
+ /**
199
+ * Push the visible rows. Always a copy so `.value.splice` cannot write `_source`.
200
+ * `silent` still notifies `.subscribe` (the whole array changed in memory).
201
+ * `structure` is membership. `items` is one row's fields.
202
+ */
203
+ private publish;
204
+ get length(): number;
205
+ /**
206
+ * Reactive length for plain templates:
207
+ * `Text(\`Total todos: ${todos.$length}\`)`
208
+ *
209
+ * Embeds a marker via `interp()`; `Text` resolves it on each update.
210
+ * (`todos.length` is a plain number and still freezes — use `$length`.)
211
+ */
212
+ get $length(): string;
213
+ /** Replace the whole array (missing `_id`s are generated). */
214
+ set(items: Array<T | ListEntity<T>>): this;
215
+ clear(): this;
216
+ /** Append items — each gets `_id` if not already set. Writes the full list. */
217
+ add(...items: Array<T | ListEntity<T>>): this;
218
+ /** Insert at index (clamped) in the full list. */
219
+ insert(index: number, item: T | ListEntity<T>): this;
220
+ /**
221
+ * Patch by `_id` / `id` / predicate.
222
+ * `patch` can be a partial object or a mapper.
223
+ */
224
+ update(matcher: ListMatcher<ListEntity<T>>, patch: Partial<T> | ((item: ListEntity<T>) => T | ListEntity<T>)): this;
225
+ /** Replace the first match (keeps original `_id` unless `item` already has one). */
226
+ replace(matcher: ListMatcher<ListEntity<T>>, item: T | ListEntity<T>): this;
227
+ /** Remove by `_id` / `id` / predicate. Alias: `delete`. */
228
+ remove(matcher: ListMatcher<ListEntity<T>>): this;
229
+ delete(matcher: ListMatcher<ListEntity<T>>): this;
230
+ find(matcher: ListMatcher<ListEntity<T>>): ListEntity<T> | undefined;
231
+ /**
232
+ * Show only rows that match `query`. The full list stays stored.
233
+ * `view('')` or `view()` shows every item again (does not clear `viewWhere`).
234
+ * `keys` limits the match to those fields (`['text']`).
235
+ */
236
+ view(query?: string, keys?: (keyof T)[]): this;
237
+ /**
238
+ * Live predicate on `publish()` (AND with `view`/`search` query).
239
+ * `viewWhere()` with no fn (or `null`) clears it.
240
+ */
241
+ viewWhere(predicate?: ((item: ListEntity<T>, index: number) => boolean) | null): this;
242
+ /**
243
+ * Same live view as `view()`, plus a copy of the visible rows.
244
+ * Bound List/Table update; `const hits = todos.search('x')` still works.
245
+ */
246
+ search(query: string, keys?: (keyof T)[]): ListEntity<T>[];
247
+ /**
248
+ * One-shot snapshot of `_source` (Array.filter). Does not change `.value`.
249
+ * Safe inside `computed(() => todos.filter(fn))`.
250
+ * `todos.set(todos.filter(fn))` replaces the full list (clearDone).
251
+ */
252
+ filter(predicate: (item: ListEntity<T>, index: number) => boolean): ListEntity<T>[];
253
+ map<U>(fn: (item: ListEntity<T>, index: number) => U): U[];
254
+ move(from: number, to: number): this;
255
+ }
256
+ export declare function listSignal<T extends object>(initial?: Array<T | ListEntity<T>>): ListSignal<T>;
257
+ /** Alias — same as `listSignal`. */
258
+ export declare const collection: typeof listSignal;
259
+ /**
260
+ * Wrap a signal so `` `…${interp(sig)}` `` embeds a reactive marker
261
+ * instead of freezing `String(sig.value)` immediately.
262
+ *
263
+ * Returns a primitive string (the marker). Callers that check
264
+ * `typeof x === 'string'` then `hasInterpMarks(x)` must see it.
265
+ */
266
+ export declare function interp<T>(signal: BindableSignal<T>): string;
267
+ export type FiboDevStats = {
268
+ /** runBuildFrame / page produce counts */
269
+ produces: number;
270
+ /** node wire replays */
271
+ replays: number;
272
+ /** times a signal was promoted to page root (warn path) */
273
+ pageRoots: number;
274
+ /** warnDev calls that actually printed */
275
+ warns: number;
276
+ };
277
+ export declare function fiboDevStats(): FiboDevStats;
278
+ export declare function resetFiboDevStats(): void;
279
+ type NumericInput = number | BindableSignal<number>;
280
+ /**
281
+ * Number / money printers for live `Text` / `Button` templates.
282
+ *
283
+ * ```ts
284
+ * Text(`€ ${Format.fixed(price)}`)
285
+ * Text(Format.euro(price))
286
+ * Text(Format.currency(price, 'USD'))
287
+ * ```
288
+ */
289
+ export declare const Format: {
290
+ /** Decimals — default 2: `Format.fixed(price)` → `"12.50"`. */
291
+ readonly fixed: (value: NumericInput, digits?: number) => string;
292
+ /** Whole number, no decimals: `Format.integer(n)` → `"12"`. */
293
+ readonly integer: (value: NumericInput) => string;
294
+ /** `Format.euro(price)` → `"€ 12.50"`. */
295
+ readonly euro: (value: NumericInput, digits?: number) => string;
296
+ /**
297
+ * Locale currency. Default `EUR` / `es-ES`.
298
+ * `Format.currency(price, 'USD', 'en-US')` → `"$12.50"`.
299
+ */
300
+ readonly currency: (value: NumericInput, currency?: string, locale?: string) => string;
301
+ /** `Format.percent(rate)` with rate `0–1` → `"12%"` (default 0 decimals). */
302
+ readonly percent: (value: NumericInput, digits?: number) => string;
303
+ /** Compact: `1200` → `"1.2K"` (en). */
304
+ readonly compact: (value: NumericInput, locale?: string) => string;
305
+ };
306
+ /** Alias of `Format`. */
307
+ export declare const Transform: {
308
+ /** Decimals — default 2: `Format.fixed(price)` → `"12.50"`. */
309
+ readonly fixed: (value: NumericInput, digits?: number) => string;
310
+ /** Whole number, no decimals: `Format.integer(n)` → `"12"`. */
311
+ readonly integer: (value: NumericInput) => string;
312
+ /** `Format.euro(price)` → `"€ 12.50"`. */
313
+ readonly euro: (value: NumericInput, digits?: number) => string;
314
+ /**
315
+ * Locale currency. Default `EUR` / `es-ES`.
316
+ * `Format.currency(price, 'USD', 'en-US')` → `"$12.50"`.
317
+ */
318
+ readonly currency: (value: NumericInput, currency?: string, locale?: string) => string;
319
+ /** `Format.percent(rate)` with rate `0–1` → `"12%"` (default 0 decimals). */
320
+ readonly percent: (value: NumericInput, digits?: number) => string;
321
+ /** Compact: `1200` → `"1.2K"` (en). */
322
+ readonly compact: (value: NumericInput, locale?: string) => string;
323
+ };
324
+ /**
325
+ * CSS length printers for live styles / text.
326
+ *
327
+ * ```ts
328
+ * Box().width(Unit.px(width))
329
+ * Box().height(Unit.percent(height))
330
+ * Text(Unit.rem(size))
331
+ * ```
332
+ */
333
+ export declare const Unit: {
334
+ readonly px: (value: NumericInput) => string;
335
+ readonly rem: (value: NumericInput) => string;
336
+ readonly em: (value: NumericInput) => string;
337
+ /** `Unit.percent(50)` → `"50%"`. */
338
+ readonly percent: (value: NumericInput) => string;
339
+ readonly vh: (value: NumericInput) => string;
340
+ readonly vw: (value: NumericInput) => string;
341
+ };
342
+ /**
343
+ * Count + word for live labels.
344
+ *
345
+ * ```ts
346
+ * Text(Plural.of(count, 'task', 'tasks')) // "1 task" / "3 tasks"
347
+ * Text(Plural.of(left, 'left', 'left')) // "2 left"
348
+ * ```
349
+ */
350
+ export declare const Plural: {
351
+ /**
352
+ * `"N word"` — uses `one` when the absolute count is 1, otherwise `many`.
353
+ */
354
+ readonly of: (count: NumericInput, one: string, many: string) => string;
355
+ /** Only the word: `Plural.word(count, 'item', 'items')` → `"items"`. */
356
+ readonly word: (count: NumericInput, one: string, many: string) => string;
357
+ };
358
+ export declare function useSignal<T>(signal: Signal<T> | ComputedSignal<T>): T;
359
+ /** Subscribe to a `createStore()` instance. Distinct from the class-decorator `useStore`. */
360
+ export declare function useReactiveStore<T>(store: Store<T>): T;
361
+ export declare function useObservable<T>(obs: Observable<T>): T;
362
+ export declare function Observer({ children }: {
363
+ children: () => React$1.ReactNode;
364
+ }): import("react/jsx-runtime").JSX.Element;
365
+ export declare function useBuilderState<T = unknown>(key: string): [
366
+ T | undefined,
367
+ (value: T) => void
368
+ ];
369
+ interface ProviderWrapperProps {
370
+ providers?: Map<string, unknown>;
371
+ children: React$1.ReactNode;
372
+ }
373
+ export declare function useProvider<T>(key: string): T | undefined;
374
+ export declare function ProviderWrapper({ providers, children }: ProviderWrapperProps): import("react/jsx-runtime").JSX.Element;
375
+ interface ReactivityRootProps {
376
+ children: React$1.ReactNode;
377
+ scope?: ReactivityScope;
378
+ }
379
+ /** Isolates `activeEffect` for one React tree / island. */
380
+ export declare function ReactivityRoot({ children, scope }: ReactivityRootProps): import("react/jsx-runtime").JSX.Element;
381
+ interface FineGrainTextProps {
382
+ compute: () => string;
383
+ as?: keyof HTMLElementTagNameMap;
384
+ className?: string;
385
+ style?: React$1.CSSProperties;
386
+ }
387
+ /** Updates `textContent` in place — the host element is not remounted. */
388
+ export declare function FineGrainText({ compute, as, className, style, ...rest }: FineGrainTextProps & Record<string, unknown>): React$1.DetailedReactHTMLElement<{
389
+ ref: (node: HTMLElement | null) => void;
390
+ className: string | undefined;
391
+ style: React$1.CSSProperties | undefined;
392
+ }, HTMLElement>;
393
+ /** Bind a signal to a live text node without a React state subscription. */
394
+ export declare function bindText(signal: BindableSignal<unknown>, as?: keyof HTMLElementTagNameMap): React$1.FunctionComponentElement<FineGrainTextProps & Record<string, unknown>>;
395
+ export declare function applyResponsiveStyles(baseStyle: React$1.CSSProperties, responsive?: ResponsiveStyles, width?: number): React$1.CSSProperties;
396
+ export interface TransitionConfig {
397
+ duration?: number;
398
+ delay?: number;
399
+ easing?: (t: number) => number;
400
+ }
401
+ export interface SpringConfig {
402
+ stiffness?: number;
403
+ damping?: number;
404
+ mass?: number;
405
+ }
406
+ export declare const Easing: {
407
+ linear: (t: number) => number;
408
+ easeIn: (t: number) => number;
409
+ easeOut: (t: number) => number;
410
+ easeInOut: (t: number) => number;
411
+ easeInCubic: (t: number) => number;
412
+ easeOutCubic: (t: number) => number;
413
+ elastic: (t: number) => number;
414
+ bounce: (t: number) => number;
415
+ };
416
+ export declare function useTransition(targetValue: number, config?: TransitionConfig): number;
417
+ export declare function useSpring(targetValue: number, config?: SpringConfig): number;
418
+ export declare function useMountTransition(isVisible: boolean, duration?: number): {
419
+ shouldRender: boolean;
420
+ stage: "entering" | "entered" | "exiting" | "exited";
421
+ };
422
+ export declare function useStagger(count: number, delayBetween?: number): number[];
423
+ export declare function usePrefersReducedMotion(): boolean;
424
+ /** Scroll position 0–1. Uses `scroll` / `resize` listeners — not rAF. */
425
+ export declare function useScrollProgress(): number;
426
+ export interface AnimationOptions {
427
+ duration?: number;
428
+ curve?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | string;
429
+ damping?: number;
430
+ stiffness?: number;
431
+ velocity?: number;
432
+ mass?: number;
433
+ onComplete?: () => void;
434
+ }
435
+ export interface Signal<T> {
436
+ spring(target: T, options?: Partial<AnimationOptions>): void;
437
+ animate(target: T, options?: Partial<AnimationOptions>): void;
438
+ snapTo(target: T, options?: Partial<AnimationOptions>): void;
439
+ }
440
+ export declare function cssCurve(options?: Partial<AnimationOptions>): string;
441
+ export declare const MOTION_PRESETS: readonly [
442
+ "fadeIn",
443
+ "fadeOut",
444
+ "fade",
445
+ "slideUp",
446
+ "slideDown",
447
+ "slideLeft",
448
+ "slideRight",
449
+ "scaleIn",
450
+ "scaleOut",
451
+ "scale",
452
+ "blurIn",
453
+ "blurOut",
454
+ "blur",
455
+ "pop",
456
+ "bounce"
457
+ ];
458
+ export type MotionPreset = (typeof MOTION_PRESETS)[number];
459
+ export interface CustomMotion {
460
+ from: Record<string, string | number>;
461
+ to: Record<string, string | number>;
462
+ duration?: number;
463
+ ease?: string;
464
+ delay?: number;
465
+ stiffness?: number;
466
+ damping?: number;
467
+ mass?: number;
468
+ }
469
+ declare const FIBO_BREAKPOINTS: {
470
+ readonly sm: 640;
471
+ readonly md: 768;
472
+ readonly lg: 1024;
473
+ readonly xl: 1280;
474
+ };
475
+ type BreakpointKey = keyof typeof FIBO_BREAKPOINTS;
476
+ type GestureMask = "all" | "gesture" | "subviews" | "none";
477
+ type TapLocation = {
478
+ x: number;
479
+ y: number;
480
+ };
481
+ declare abstract class GestureBuilder {
482
+ protected _enabled: boolean;
483
+ protected _including: GestureMask;
484
+ /** When true, wrappers must not stopPropagation (simultaneous). */
485
+ protected _bubble: boolean;
486
+ /** @internal Fired when the gesture successfully recognizes (Sequence / Exclusive). */
487
+ protected _onRecognized?: () => void;
488
+ enabled(value?: boolean): this;
489
+ /** SwiftUI `gesture(_:including:)`. */
490
+ including(mask: GestureMask): this;
491
+ /** Internal — set by SimultaneousGesture / `.simultaneousGesture`. */
492
+ bubble(value?: boolean): this;
493
+ /** @internal Used by SequenceGesture / ExclusiveGesture. */
494
+ onRecognized(callback: () => void): this;
495
+ /** @internal */
496
+ protected notifyRecognized(): void;
497
+ abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
498
+ }
499
+ /**
500
+ * Full interaction-effect catalog (Hover.css–inspired names, fiboui-owned CSS).
501
+ * NOT a vendor of Hover.css — reimplemented for commercial use inside fiboui.
502
+ *
503
+ * Apply on any trigger:
504
+ * .hover(h => h.effect("sweepToRight"))
505
+ * .pressEffect("shrink")
506
+ * .focusEffect("glow")
507
+ */
508
+ export declare const INTERACTION_EFFECTS: readonly [
509
+ "grow",
510
+ "shrink",
511
+ "pulse",
512
+ "pulseGrow",
513
+ "pulseShrink",
514
+ "push",
515
+ "pop",
516
+ "bounceIn",
517
+ "bounceOut",
518
+ "rotate",
519
+ "growRotate",
520
+ "float",
521
+ "sink",
522
+ "bob",
523
+ "hang",
524
+ "skew",
525
+ "skewForward",
526
+ "skewBackward",
527
+ "wobbleHorizontal",
528
+ "wobbleVertical",
529
+ "wobbleToBottomRight",
530
+ "wobbleToTopRight",
531
+ "wobbleTop",
532
+ "wobbleBottom",
533
+ "wobbleSkew",
534
+ "buzz",
535
+ "buzzOut",
536
+ "forward",
537
+ "backward",
538
+ "nudge",
539
+ "fade",
540
+ "backPulse",
541
+ "sweepToRight",
542
+ "sweepToLeft",
543
+ "sweepToBottom",
544
+ "sweepToTop",
545
+ "bounceToRight",
546
+ "bounceToLeft",
547
+ "bounceToBottom",
548
+ "bounceToTop",
549
+ "radialOut",
550
+ "radialIn",
551
+ "rectangleIn",
552
+ "rectangleOut",
553
+ "shutterInHorizontal",
554
+ "shutterOutHorizontal",
555
+ "shutterInVertical",
556
+ "shutterOutVertical",
557
+ "iconBack",
558
+ "iconForward",
559
+ "iconDown",
560
+ "iconUp",
561
+ "iconSpin",
562
+ "iconDrop",
563
+ "iconFade",
564
+ "iconFloatAway",
565
+ "iconSinkAway",
566
+ "iconGrow",
567
+ "iconShrink",
568
+ "iconPulse",
569
+ "iconPulseGrow",
570
+ "iconPulseShrink",
571
+ "iconPush",
572
+ "iconPop",
573
+ "iconBounce",
574
+ "iconRotate",
575
+ "iconGrowRotate",
576
+ "iconFloat",
577
+ "iconSink",
578
+ "iconBob",
579
+ "iconHang",
580
+ "iconWobbleHorizontal",
581
+ "iconWobbleVertical",
582
+ "iconBuzz",
583
+ "iconBuzzOut",
584
+ "borderFade",
585
+ "hollow",
586
+ "trim",
587
+ "rippleOut",
588
+ "rippleIn",
589
+ "outlineOut",
590
+ "outlineIn",
591
+ "roundCorners",
592
+ "underlineFromLeft",
593
+ "underlineFromCenter",
594
+ "underlineFromRight",
595
+ "reveal",
596
+ "underlineReveal",
597
+ "overlineFromLeft",
598
+ "overlineFromCenter",
599
+ "overlineFromRight",
600
+ "overlineReveal",
601
+ "shadowGrow",
602
+ "shadowFloat",
603
+ "shadowGlow",
604
+ "shadowRadial",
605
+ "boxShadowOutset",
606
+ "boxShadowInset",
607
+ "lift",
608
+ "glow",
609
+ "bubbleTop",
610
+ "bubbleRight",
611
+ "bubbleBottom",
612
+ "bubbleLeft",
613
+ "bubbleFloatTop",
614
+ "bubbleFloatRight",
615
+ "bubbleFloatBottom",
616
+ "bubbleFloatLeft",
617
+ "curlTopLeft",
618
+ "curlTopRight",
619
+ "curlBottomRight",
620
+ "curlBottomLeft"
621
+ ];
622
+ export type InteractionEffectName = (typeof INTERACTION_EFFECTS)[number];
623
+ export declare function interactionEffectKebab(name: InteractionEffectName): string;
624
+ export declare function normalizeInteractionEffect(name: string): InteractionEffectName;
625
+ export declare function interactionEffectClass(name: InteractionEffectName): string;
626
+ interface LogicalAxes {
627
+ paddingHorizontal(value: string | number): this;
628
+ paddingVertical(value: string | number): this;
629
+ paddingX(value: string | number): this;
630
+ paddingY(value: string | number): this;
631
+ px(value: string | number): this;
632
+ py(value: string | number): this;
633
+ marginHorizontal(value: string | number): this;
634
+ marginVertical(value: string | number): this;
635
+ marginX(value: string | number): this;
636
+ marginY(value: string | number): this;
637
+ mx(value: string | number): this;
638
+ my(value: string | number): this;
639
+ borderHorizontal(value: string | number): this;
640
+ borderVertical(value: string | number): this;
641
+ borderX(value: string | number): this;
642
+ borderY(value: string | number): this;
643
+ borderWidthHorizontal(value: string | number): this;
644
+ borderWidthVertical(value: string | number): this;
645
+ borderColorHorizontal(value: string | number): this;
646
+ borderColorVertical(value: string | number): this;
647
+ roundedTop(value: string | number): this;
648
+ roundedBottom(value: string | number): this;
649
+ roundedLeft(value: string | number): this;
650
+ roundedRight(value: string | number): this;
651
+ insetHorizontal(value: string | number): this;
652
+ insetVertical(value: string | number): this;
653
+ insetX(value: string | number): this;
654
+ insetY(value: string | number): this;
655
+ gapX(value: string | number): this;
656
+ gapY(value: string | number): this;
657
+ }
658
+ /**
659
+ * The constructor returns a proxy that accepts any CSS method.
660
+ * Declare the axes plus `boxShadow` (the class method is `.shadow()`).
661
+ */
662
+ export interface PseudoStateBuilder extends LogicalAxes {
663
+ boxShadow(value: string | number): this;
664
+ }
665
+ export declare class PseudoStateBuilder {
666
+ private pseudoState;
667
+ private parentBuilder;
668
+ private isGroup;
669
+ private transitionDuration;
670
+ private transitionEasing;
671
+ private transitionDelay;
672
+ private transitionProperties;
673
+ private transforms;
674
+ private _boxLonghands;
675
+ constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
676
+ /**
677
+ * Apply a named interaction effect (full Hover.css–inspired catalog).
678
+ * Works on any pseudo trigger — hover, press/active, focus, groupHover, etc.
679
+ * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
680
+ */
681
+ effect(name: InteractionEffectName | string): this;
682
+ bg(color: string): this;
683
+ /** Same longhand as `.bg()` — interpolates against the resting surface. */
684
+ backgroundColor(value: string): this;
685
+ color(value: string): this;
686
+ text(color: string): this;
687
+ opacity(value: number): this;
688
+ borderColor(value: string): this;
689
+ transform(value: string): this;
690
+ scale(value: number): this;
691
+ translateX(value: number | string): this;
692
+ translateY(value: number | string): this;
693
+ rotate(degrees: number): this;
694
+ shadow(value: string | number): this;
695
+ css(property: string, value: string | number): this;
696
+ padding(value: string | number): this;
697
+ p(value: string | number): this;
698
+ margin(value: string | number): this;
699
+ transition(value: string): this;
700
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
701
+ duration(ms: number): this;
702
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
703
+ ease(value: string): this;
704
+ delay(ms: number): this;
705
+ properties(props: string[]): this;
706
+ private applyTransition;
707
+ private flushTransform;
708
+ private set;
709
+ private commit;
710
+ end(): FiboBuilder;
711
+ }
712
+ declare const When: {
713
+ readonly hover: "hover";
714
+ readonly focus: "focus";
715
+ readonly active: "active";
716
+ readonly visited: "visited";
717
+ readonly disabled: "disabled";
718
+ readonly on: "on";
719
+ readonly off: "off";
720
+ readonly checked: "checked";
721
+ readonly unchecked: "unchecked";
722
+ readonly indeterminate: "indeterminate";
723
+ readonly mixed: "mixed";
724
+ };
725
+ type When = (typeof When)[keyof typeof When];
726
+ type WhenStyle = React$1.CSSProperties | string | ((builder: any) => void);
727
+ declare const Size: {
728
+ readonly full: "full";
729
+ readonly screen: "screen";
730
+ readonly fit: "fit";
731
+ readonly min: "min";
732
+ readonly max: "max";
733
+ /** SwiftUI `.infinity` — expand to the space the parent proposes (`100%`). */
734
+ readonly infinity: "infinity";
735
+ };
736
+ type Size = (typeof Size)[keyof typeof Size];
737
+ declare const StackAlign: {
738
+ readonly center: "center";
739
+ readonly top: "top";
740
+ readonly bottom: "bottom";
741
+ readonly left: "left";
742
+ readonly right: "right";
743
+ readonly topLeft: "topLeft";
744
+ readonly topRight: "topRight";
745
+ readonly bottomLeft: "bottomLeft";
746
+ readonly bottomRight: "bottomRight";
747
+ /** SwiftUI `leading` → `left` */
748
+ readonly leading: "left";
749
+ /** SwiftUI `trailing` → `right` */
750
+ readonly trailing: "right";
751
+ /** SwiftUI `topLeading` → `topLeft` */
752
+ readonly topLeading: "topLeft";
753
+ /** SwiftUI `topTrailing` → `topRight` */
754
+ readonly topTrailing: "topRight";
755
+ /** SwiftUI `bottomLeading` → `bottomLeft` */
756
+ readonly bottomLeading: "bottomLeft";
757
+ /** SwiftUI `bottomTrailing` → `bottomRight` */
758
+ readonly bottomTrailing: "bottomRight";
759
+ };
760
+ type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
761
+ type FrameSize = number | string | Size;
762
+ interface FrameSpec {
763
+ width?: FrameSize;
764
+ height?: FrameSize;
765
+ minWidth?: FrameSize;
766
+ idealWidth?: FrameSize;
767
+ maxWidth?: FrameSize;
768
+ minHeight?: FrameSize;
769
+ idealHeight?: FrameSize;
770
+ maxHeight?: FrameSize;
771
+ alignment?: StackAlign | keyof typeof StackAlign;
772
+ }
773
+ type ClipShapeName = "circle" | "rounded" | "square";
774
+ interface OffsetSpec {
775
+ x?: number;
776
+ y?: number;
777
+ }
778
+ interface FixedSizeSpec {
779
+ horizontal?: boolean;
780
+ vertical?: boolean;
781
+ }
782
+ interface LayerSpec {
783
+ kind: "overlay" | "background";
784
+ child: FiboChild | (() => FiboChild);
785
+ alignment: StackAlign | keyof typeof StackAlign;
786
+ }
787
+ type ContentShapeName = "rectangle" | ClipShapeName;
788
+ type GeometryRect = {
789
+ x: number;
790
+ y: number;
791
+ width: number;
792
+ height: number;
793
+ };
794
+ type ContainerRelativeFrameSpec = {
795
+ axis?: "horizontal" | "vertical" | "both";
796
+ /** Divisions of the container (SwiftUI `count`). Default 1. */
797
+ count?: number;
798
+ /** Spans claimed (SwiftUI `span`). Default 1. */
799
+ span?: number;
800
+ };
801
+ type AlignmentGuideName = "leading" | "trailing" | "top" | "bottom" | "centerX" | "centerY" | string;
802
+ type AlignmentGuideDims = {
803
+ width: number;
804
+ height: number;
805
+ };
806
+ type AlignmentGuideSpec = {
807
+ guide: AlignmentGuideName;
808
+ /** Absolute guide position, or compute from own size (SwiftUI `ViewDimensions`). */
809
+ compute: number | ((dims: AlignmentGuideDims) => number);
810
+ };
811
+ type MatchedGeometrySpec = {
812
+ id: string;
813
+ namespace?: string;
814
+ /** SwiftUI `isSource` — source owns the shared geometry. Default true. */
815
+ isSource?: boolean;
816
+ };
817
+ type PreferenceKeyDef<T> = {
818
+ readonly __preferenceKey: true;
819
+ readonly id: string | symbol;
820
+ readonly defaultValue: T;
821
+ reduce: (value: T, nextValue: T) => T;
822
+ };
823
+ type PreferenceWriteSpec = {
824
+ key: PreferenceKeyDef<any>;
825
+ value: unknown;
826
+ };
827
+ type PreferenceReadSpec = {
828
+ key: PreferenceKeyDef<any>;
829
+ onChange: (value: any) => void;
830
+ };
831
+ declare const Edge: {
832
+ readonly top: "top";
833
+ readonly bottom: "bottom";
834
+ readonly leading: "leading";
835
+ readonly trailing: "trailing";
836
+ };
837
+ type Edge = (typeof Edge)[keyof typeof Edge];
838
+ declare const EdgeSet: {
839
+ readonly top: "top";
840
+ readonly bottom: "bottom";
841
+ readonly leading: "leading";
842
+ readonly trailing: "trailing";
843
+ readonly horizontal: "horizontal";
844
+ readonly vertical: "vertical";
845
+ readonly all: "all";
846
+ };
847
+ type EdgeSet = (typeof EdgeSet)[keyof typeof EdgeSet];
848
+ type EdgeInsetsValue = {
849
+ top?: number | string;
850
+ bottom?: number | string;
851
+ leading?: number | string;
852
+ trailing?: number | string;
853
+ /** CSS left — alias of leading in LTR */
854
+ left?: number | string;
855
+ /** CSS right — alias of trailing in LTR */
856
+ right?: number | string;
857
+ };
858
+ type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
859
+ type SafeAreaInsetSpec = {
860
+ edge: SafeAreaInsetEdge;
861
+ content: FiboChild | (() => FiboChild);
862
+ /** Gap between inset bar and content. Default 0. */
863
+ spacing?: number;
864
+ };
865
+ export interface SpringOptions {
866
+ stiffness?: number;
867
+ damping?: number;
868
+ mass?: number;
869
+ }
870
+ /**
871
+ * CSS `linear()` spring sampled once. stiffness/damping/mass change the curve.
872
+ * The browser interpolates — no rAF on the CSS path.
873
+ */
874
+ export declare function springEase(options?: SpringOptions): string;
875
+ export declare function resolveCssEase(value: string, spring?: SpringOptions): string;
876
+ interface ThemeColors {
877
+ primary: string;
878
+ primaryVariant?: string;
879
+ primaryContainer?: string;
880
+ onPrimaryContainer?: string;
881
+ secondary: string;
882
+ secondaryVariant?: string;
883
+ secondaryContainer?: string;
884
+ onSecondaryContainer?: string;
885
+ tertiary?: string;
886
+ onTertiary?: string;
887
+ tertiaryContainer?: string;
888
+ onTertiaryContainer?: string;
889
+ background: string;
890
+ surface: string;
891
+ surfaceVariant?: string;
892
+ onSurfaceVariant?: string;
893
+ error: string;
894
+ errorContainer?: string;
895
+ onErrorContainer?: string;
896
+ success?: string;
897
+ warning?: string;
898
+ info?: string;
899
+ onPrimary: string;
900
+ onSecondary: string;
901
+ onBackground: string;
902
+ onSurface: string;
903
+ onError: string;
904
+ /** Borders / hairlines — maps to `--fibo-outline`. */
905
+ outline?: string;
906
+ outlineVariant?: string;
907
+ /** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
908
+ surfaceContainerLow?: string;
909
+ }
910
+ interface ThemeTypography {
911
+ h1: TextStyle;
912
+ h2: TextStyle;
913
+ h3: TextStyle;
914
+ h4: TextStyle;
915
+ h5: TextStyle;
916
+ h6: TextStyle;
917
+ body: TextStyle;
918
+ caption: TextStyle;
919
+ label: TextStyle;
920
+ }
921
+ interface ThemeSpacing {
922
+ xs: string;
923
+ sm: string;
924
+ md: string;
925
+ lg: string;
926
+ xl: string;
927
+ }
928
+ interface ThemeBorderRadius {
929
+ /** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
930
+ xs?: string;
931
+ sm: string;
932
+ md: string;
933
+ lg: string;
934
+ /** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
935
+ xl?: string;
936
+ full: string;
937
+ }
938
+ interface ThemeShadows {
939
+ sm: string;
940
+ md: string;
941
+ lg: string;
942
+ }
943
+ interface FiboTheme {
944
+ name: FiboThemeName;
945
+ colors: ThemeColors;
946
+ typography: ThemeTypography;
947
+ spacing: ThemeSpacing;
948
+ borderRadius: ThemeBorderRadius;
949
+ shadows: ThemeShadows;
950
+ fontFamily: string;
951
+ }
952
+ declare const FIBO_THEMES: {
953
+ readonly material: FiboTheme;
954
+ readonly cupertino: FiboTheme;
955
+ readonly web: FiboTheme;
956
+ readonly noir: FiboTheme;
957
+ };
958
+ type FiboThemePreset = keyof typeof FIBO_THEMES;
959
+ type ThemeInput = FiboTheme | FiboThemePreset;
960
+ declare enum Colors {
961
+ Primary = "primary",
962
+ OnPrimary = "on-primary",
963
+ PrimaryContainer = "primary-container",
964
+ OnPrimaryContainer = "on-primary-container",
965
+ Secondary = "secondary",
966
+ OnSecondary = "on-secondary",
967
+ SecondaryContainer = "secondary-container",
968
+ OnSecondaryContainer = "on-secondary-container",
969
+ Tertiary = "tertiary",
970
+ OnTertiary = "on-tertiary",
971
+ TertiaryContainer = "tertiary-container",
972
+ OnTertiaryContainer = "on-tertiary-container",
973
+ Error = "error",
974
+ OnError = "on-error",
975
+ Success = "success",
976
+ Warning = "warning",
977
+ Info = "info",
978
+ Background = "background",
979
+ OnBackground = "on-background",
980
+ Surface = "surface",
981
+ OnSurface = "on-surface",
982
+ SurfaceVariant = "surface-variant",
983
+ OnSurfaceVariant = "on-surface-variant",
984
+ Outline = "outline",
985
+ Transparent = "transparent",
986
+ Black = "black",
987
+ White = "white"
988
+ }
989
+ declare enum ShadowSize {
990
+ Sm = "sm",
991
+ Md = "md",
992
+ Lg = "lg",
993
+ Xl = "xl",
994
+ Xl2 = "2xl"
995
+ }
996
+ declare enum ShadowPreset {
997
+ Card = "card",
998
+ Button = "button",
999
+ Modal = "modal",
1000
+ Float = "float",
1001
+ Inner = "inner"
1002
+ }
1003
+ declare enum ShadowDirection {
1004
+ Top = "top",
1005
+ Bottom = "bottom",
1006
+ Left = "left",
1007
+ Right = "right",
1008
+ TopBottom = "top-bottom",
1009
+ LeftRight = "left-right",
1010
+ Vertical = "vertical",
1011
+ Horizontal = "horizontal",
1012
+ All = "all"
1013
+ }
1014
+ type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
1015
+ string,
1016
+ number?
1017
+ ] | [
1018
+ ShadowDirection | string,
1019
+ ShadowSize | string
1020
+ ] | [
1021
+ ShadowDirection | string,
1022
+ string
1023
+ ] | [
1024
+ ShadowDirection | string,
1025
+ string,
1026
+ number?
1027
+ ] | [
1028
+ ShadowDirection | string,
1029
+ ShadowSize | string,
1030
+ string,
1031
+ number?
1032
+ ];
1033
+ /**
1034
+ * Callback form of `.hover()` / `.focus()` / … Contextual typing uses the *last*
1035
+ * overload, so this signature must stay last or `h` becomes implicit `any` inside `.map()`.
1036
+ */
1037
+ export type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
1038
+ declare abstract class FiboBuilder {
1039
+ /** @internal Extra DOM props forwarded to the host element. */
1040
+ protected _props: Record<string, any>;
1041
+ protected _style: React$1.CSSProperties;
1042
+ protected _cssStyles: React$1.CSSProperties;
1043
+ protected _classNames: string[];
1044
+ protected _children: React$1.ReactNode[];
1045
+ /** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
1046
+ protected _theme?: FiboTheme;
1047
+ protected _state: Map<string, any>;
1048
+ protected _providers: Map<string, any>;
1049
+ protected _observers: Set<Observable<any>>;
1050
+ protected _signals: Set<BindableSignal<any>>;
1051
+ /** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
1052
+ protected _ownsReads: boolean;
1053
+ /** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
1054
+ protected _replays: Array<() => void>;
1055
+ protected _isObserver: boolean;
1056
+ /** Normal-priority gestures (SwiftUI `.gesture`). Last = outermost. */
1057
+ protected _gestures: GestureBuilder[];
1058
+ /** SwiftUI `.simultaneousGesture` — bubble / no stopPropagation. */
1059
+ protected _simultaneousGestures: GestureBuilder[];
1060
+ /** SwiftUI `.highPriorityGesture` — wrapped last (outermost / capture wins). */
1061
+ protected _highPriorityGestures: GestureBuilder[];
1062
+ protected _offset?: OffsetSpec;
1063
+ protected _clipped: boolean;
1064
+ protected _clipShape?: ClipShapeName | string;
1065
+ protected _contentShape?: ContentShapeName | string;
1066
+ protected _fixedSize?: FixedSizeSpec;
1067
+ protected _layoutPriority?: number;
1068
+ protected _layers: LayerSpec[];
1069
+ protected _onGeometryChange?: (rect: GeometryRect) => void;
1070
+ protected _compositingGroup: boolean;
1071
+ protected _viewMask?: string;
1072
+ protected _containerRelativeFrame?: ContainerRelativeFrameSpec;
1073
+ protected _alignmentGuide?: AlignmentGuideSpec;
1074
+ protected _matchedGeometry?: MatchedGeometrySpec;
1075
+ protected _preferences: PreferenceWriteSpec[];
1076
+ protected _preferenceReaders: PreferenceReadSpec[];
1077
+ protected _safeAreaInsets: SafeAreaInsetSpec[];
1078
+ protected _navigationTitle?: string;
1079
+ protected _animationConfig?: Partial<AnimationOptions>;
1080
+ protected _animatedProps: Map<string, Signal<any>>;
1081
+ protected _transforms: string[];
1082
+ protected _transitionClass?: string;
1083
+ /** True while transition class was auto-managed for hover/effect presets (expandable). */
1084
+ protected _autoEffectTransition: boolean;
1085
+ protected _effectTransitionProps: string[];
1086
+ /**
1087
+ * When true, getStyle() promotes background/border shorthands to longhands and
1088
+ * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
1089
+ */
1090
+ protected _smoothSurface: boolean;
1091
+ protected _smoothNeedsRestTransform: boolean;
1092
+ protected _motionClass?: string;
1093
+ protected _staggerMs?: number;
1094
+ protected _reveal?: {
1095
+ preset: string;
1096
+ once?: boolean;
1097
+ rootMargin?: string;
1098
+ threshold?: number;
1099
+ };
1100
+ protected _scrollProgress: boolean;
1101
+ protected _viewTransition?: string;
1102
+ protected _reducedMotion: "reduce" | "never";
1103
+ protected _usesCssMotion: boolean;
1104
+ protected _explicitScrollMargin: boolean;
1105
+ /** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
1106
+ protected _hug: boolean;
1107
+ /**
1108
+ * SwiftUI `.frame(...)` wrappers (outer → inner order of application).
1109
+ * Applied in `assembleBuilder` so every widget gets the same DX.
1110
+ */
1111
+ protected _frames: FrameSpec[];
1112
+ /**
1113
+ * Unset every CSS property on this component and what it renders inside.
1114
+ * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
1115
+ */
1116
+ protected _resetStyle: boolean;
1117
+ /** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
1118
+ protected _boxLonghands: Set<string>;
1119
+ resetStyle(): this;
1120
+ protected isReset(): boolean;
1121
+ hug(): this;
1122
+ protected isHug(): boolean;
1123
+ /**
1124
+ * SwiftUI `View.frame` — invisible box around this view.
1125
+ *
1126
+ * ```ts
1127
+ * Image(url).frame({ width: 300, height: 400 })
1128
+ * Text('★★★★').frame({
1129
+ * maxWidth: Size.infinity,
1130
+ * maxHeight: Size.infinity,
1131
+ * alignment: StackAlign.topTrailing,
1132
+ * })
1133
+ * ```
1134
+ *
1135
+ * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
1136
+ */
1137
+ frame(spec: FrameSpec): this;
1138
+ /**
1139
+ * SwiftUI `.offset(x:y:)` — visual translate; layout size stays.
1140
+ * `.offset(8)` ≡ `{ x: 8, y: 8 }`; `.offset({ x: 4 })` only horizontal.
1141
+ */
1142
+ offset(value: number | OffsetSpec): this;
1143
+ /** SwiftUI `.clipped()` — overflow hidden to bounds. */
1144
+ clipped(): this;
1145
+ /**
1146
+ * SwiftUI `.clipShape` — `'circle' | 'rounded' | 'square'` or any CSS radius
1147
+ * (`'8px'`, `'50%'`). Clips drawing; hit-testing still follows layout unless
1148
+ * you also set {@link contentShape}.
1149
+ */
1150
+ clipShape(shape: ClipShapeName | string): this;
1151
+ /**
1152
+ * SwiftUI `.contentShape` — region used for hit-testing (tap / long-press).
1153
+ * Default `'rectangle'` = full frame box, even over transparent pixels.
1154
+ *
1155
+ * ```ts
1156
+ * ZStack()…frame({ width: 300, height: 400 })
1157
+ * .clipShape('8px')
1158
+ * .contentShape('rectangle')
1159
+ * .onTapGesture(open)
1160
+ * ```
1161
+ */
1162
+ contentShape(shape?: ContentShapeName | string): this;
1163
+ /**
1164
+ * SwiftUI `.fixedSize(horizontal:vertical:)` — hug content on those axes.
1165
+ * Defaults both axes when called with no args.
1166
+ */
1167
+ fixedSize(spec?: FixedSizeSpec | boolean): this;
1168
+ /**
1169
+ * SwiftUI `.layoutPriority` — higher resists compression and claims free space.
1170
+ * Web: flex-grow / flex-shrink (not a full multi-axis proposal solver).
1171
+ */
1172
+ layoutPriority(value: number): this;
1173
+ /** SwiftUI `.compositingGroup()`. */
1174
+ compositingGroup(): this;
1175
+ /** SwiftUI `.mask` — shape name or CSS mask-image value. */
1176
+ mask(shapeOrCss: ClipShapeName | "rectangle" | string): this;
1177
+ /** SwiftUI `containerRelativeFrame`. */
1178
+ containerRelativeFrame(axis?: ContainerRelativeFrameSpec["axis"] | ContainerRelativeFrameSpec, count?: number, span?: number): this;
1179
+ /**
1180
+ * SwiftUI `alignmentGuide` — named guide + absolute value or compute from size.
1181
+ * ```ts
1182
+ * Text('Hi').alignmentGuide('leading', (d) => d.width / 2)
1183
+ * ```
1184
+ */
1185
+ alignmentGuide(guide: AlignmentGuideName, compute: number | ((dims: {
1186
+ width: number;
1187
+ height: number;
1188
+ }) => number)): this;
1189
+ /**
1190
+ * SwiftUI `matchedGeometryEffect` — shared view-transition id + measured rect.
1191
+ * ```ts
1192
+ * Image(url).matchedGeometryEffect('hero', { namespace: 'gallery', isSource: true })
1193
+ * ```
1194
+ */
1195
+ matchedGeometryEffect(id: string, namespaceOrOpts?: string | {
1196
+ namespace?: string;
1197
+ isSource?: boolean;
1198
+ }): this;
1199
+ /** SwiftUI `.preference(key:value:)` — contribute upward to `.onPreferenceChange`. */
1200
+ preference<T>(key: PreferenceKeyDef<T>, value: T): this;
1201
+ /** SwiftUI `.onPreferenceChange` — reduce descendant preferences. */
1202
+ onPreferenceChange<T>(key: PreferenceKeyDef<T>, onChange: (value: T) => void): this;
1203
+ /**
1204
+ * SwiftUI `.safeAreaInset(edge:)` — reserve a bar on one edge; content fills the rest.
1205
+ * Distinct from `SafeArea` (notch padding) and `proxy.safeAreaInsets` (read-only).
1206
+ */
1207
+ safeAreaInset(edge: SafeAreaInsetEdge, content: SafeAreaInsetSpec["content"], spacing?: number): this;
1208
+ /**
1209
+ * SwiftUI `.navigationTitle` — stores title for Scaffold (see `Scaffold.navigationTitle`).
1210
+ * On non-Scaffold builders, sets `aria-label` / data attribute only (no extra chrome bar).
1211
+ */
1212
+ navigationTitle(title: string): this;
1213
+ /**
1214
+ * SwiftUI `.overlay(alignment:) { }` — layer above this view.
1215
+ * ```ts
1216
+ * Image(url).overlay(Text('NEW'), StackAlign.topTrailing)
1217
+ * ```
1218
+ */
1219
+ overlay(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
1220
+ /**
1221
+ * SwiftUI `.background(alignment:) { }` — layer behind this view.
1222
+ */
1223
+ background(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
1224
+ /** SwiftUI `onGeometryChange` — fires on mount + resize. */
1225
+ onGeometryChange(handler: (rect: GeometryRect) => void): this;
1226
+ id(value: string): this;
1227
+ /**
1228
+ * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
1229
+ * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
1230
+ */
1231
+ anchor(value: string): this;
1232
+ /**
1233
+ * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
1234
+ * that `.anchor()` applies).
1235
+ */
1236
+ scrollMargin(value: number | string): this;
1237
+ /** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
1238
+ addClassName(name: string): this;
1239
+ /**
1240
+ * React list key. After this is called, React reads the key as a string
1241
+ * on both the builder element and the inner host wrapper.
1242
+ * Builders are valid elements — you do not need `.build()`.
1243
+ */
1244
+ key(value: string | number): this;
1245
+ private setBoxLonghand;
1246
+ private setBoxShorthand;
1247
+ paddingHorizontal(value: string | number): this;
1248
+ paddingVertical(value: string | number): this;
1249
+ /**
1250
+ * SwiftUI `.padding`:
1251
+ * - `.padding(8)` — all sides
1252
+ * - `.padding(EdgeSet.horizontal, 12)` — Edge.Set + value
1253
+ * - `.padding({ top: 8, leading: 12 })` — EdgeInsets
1254
+ */
1255
+ padding(value: string | number): this;
1256
+ padding(edges: EdgeSet, value: string | number): this;
1257
+ padding(insets: EdgeInsetsValue): this;
1258
+ /** SwiftUI `.padding` with {@link EdgeSet} — alias clarity. */
1259
+ /** @deprecated Prefer `.padding(EdgeSet, n)` — same implementation. */
1260
+ paddingEdges(edges: EdgeSet, value: string | number): this;
1261
+ marginHorizontal(value: string | number): this;
1262
+ marginVertical(value: string | number): this;
1263
+ margin(value: string | number): this;
1264
+ /** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
1265
+ protected layoutStyle(patch: React$1.CSSProperties): this;
1266
+ /** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
1267
+ private dropConflictingKeys;
1268
+ private trackBoxLonghandsFrom;
1269
+ flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
1270
+ /** Flutter `textDirection`. */
1271
+ textDirection(direction: "ltr" | "rtl"): this;
1272
+ /** Flutter `textBaseline`. Both modes align on the flex baseline. */
1273
+ textBaseline(baseline: "alphabetic" | "ideographic"): this;
1274
+ /** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
1275
+ clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
1276
+ /**
1277
+ * Flutter `mainAxisSize`. `min` hugs the current flex direction.
1278
+ * `max` stretches along that same axis.
1279
+ */
1280
+ mainAxisSize(size: "min" | "max"): this;
1281
+ zIndex(value: number): this;
1282
+ alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
1283
+ alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
1284
+ flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
1285
+ /**
1286
+ * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
1287
+ * names (`space-between` / `spaceBetween`).
1288
+ */
1289
+ justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
1290
+ /** True when flexDirection is column / column-reverse (default is row). */
1291
+ protected isVerticalFlex(): boolean;
1292
+ /**
1293
+ * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
1294
+ * `between` packs the main axis and starts the cross axis.
1295
+ */
1296
+ align(alignment: AlignAxis): this;
1297
+ /**
1298
+ * Horizontal (screen X) alignment. Same meaning on Row and Column:
1299
+ * left / center / right of the container — not “main axis”.
1300
+ */
1301
+ alignX(alignment: AlignAxis): this;
1302
+ /**
1303
+ * Vertical (screen Y) alignment. Same meaning on Row and Column:
1304
+ * top / center / bottom of the container — not “cross axis”.
1305
+ */
1306
+ alignY(alignment: AlignAxis): this;
1307
+ protected applyMainAlign(alignment: AlignAxis | string): this;
1308
+ protected applyCrossAlign(alignment: AlignAxis | string): this;
1309
+ flex(value?: number | string): this;
1310
+ grid(): this;
1311
+ inlineFlex(): this;
1312
+ inlineGrid(): this;
1313
+ block(): this;
1314
+ inlineBlock(): this;
1315
+ hidden(): this;
1316
+ center(): this;
1317
+ /** Center on the horizontal screen axis (uses `.alignX('center')`). */
1318
+ centerX(): this;
1319
+ /** Center on the vertical screen axis (uses `.alignY('center')`). */
1320
+ centerY(): this;
1321
+ spaceBetween(): this;
1322
+ spaceAround(): this;
1323
+ spaceEvenly(): this;
1324
+ fill(): this;
1325
+ fillWidth(): this;
1326
+ fillHeight(): this;
1327
+ square(size: number | string): this;
1328
+ circle(): this;
1329
+ opacity(value: number): this;
1330
+ p(value: number | string): this;
1331
+ px(value: number | string): this;
1332
+ py(value: number | string): this;
1333
+ paddingX(value: number | string): this;
1334
+ paddingY(value: number | string): this;
1335
+ m(value: number | string): this;
1336
+ mx(value: number | string): this;
1337
+ my(value: number | string): this;
1338
+ marginX(value: number | string): this;
1339
+ marginY(value: number | string): this;
1340
+ bg(color: string | Colors): this;
1341
+ text(color: string | Colors): this;
1342
+ color(value: string | Colors): this;
1343
+ private resolveSemanticColor;
1344
+ shadow(config?: ShadowConfig): this;
1345
+ /**
1346
+ * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
1347
+ * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
1348
+ * No `window.innerWidth` — hydrate-safe.
1349
+ */
1350
+ responsive(styles: ResponsiveStyles): this;
1351
+ /**
1352
+ * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
1353
+ *
1354
+ * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
1355
+ */
1356
+ media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
1357
+ private registerMediaStyles;
1358
+ sm(styles: React$1.CSSProperties): this;
1359
+ md(styles: React$1.CSSProperties): this;
1360
+ lg(styles: React$1.CSSProperties): this;
1361
+ xl(styles: React$1.CSSProperties): this;
1362
+ rounded(value: string | number): this;
1363
+ borderRadius(value: string | number): this;
1364
+ borderColor(value: string): this;
1365
+ /**
1366
+ * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
1367
+ * (the Scaffold body) cannot divide the viewport across these children.
1368
+ * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
1369
+ * opts back into sharing space.
1370
+ *
1371
+ * Percentages / `auto` do not lock `min-*` — `minWidth: 100%` on a flex
1372
+ * child fights clamping and lets long text blow past the ZStack box.
1373
+ */
1374
+ private lockAxis;
1375
+ width(value: string | number): this;
1376
+ paint(property: string, value: string): this;
1377
+ height(value: string | number): this;
1378
+ gap(value: string | number): this;
1379
+ clean(): this;
1380
+ borderInput(color?: string, focusColor?: string): this;
1381
+ weight(value: string | number): this;
1382
+ onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
1383
+ state<T>(key: string, initialValue: T): this;
1384
+ getState<T>(key: string): T | undefined;
1385
+ setState<T>(key: string, value: T): this;
1386
+ provide<T>(key: string, value: T): this;
1387
+ consume<T>(key: string): T | undefined;
1388
+ observer(options?: string | number | {
1389
+ key?: string | number;
1390
+ }): this;
1391
+ observe<T>(observable: Observable<T>): this;
1392
+ bindSignal<T>(signal: BindableSignal<T>): this;
1393
+ /**
1394
+ * @internal Wire a direct `method(signal.value)` to this node.
1395
+ * Does not claim reads that happen later in a children function.
1396
+ */
1397
+ adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
1398
+ /** @internal */
1399
+ runReplays(): void;
1400
+ translateX(value: Signal<number> | number): this;
1401
+ translateY(value: Signal<number> | number): this;
1402
+ scale(value: Signal<number> | number): this;
1403
+ /** SwiftUI `scaleEffect` — alias of {@link scale}. */
1404
+ scaleEffect(value: Signal<number> | number): this;
1405
+ rotate(degrees: Signal<number> | number): this;
1406
+ /** SwiftUI `rotationEffect` — alias of {@link rotate} (degrees). */
1407
+ rotationEffect(degrees: Signal<number> | number): this;
1408
+ /**
1409
+ * SwiftUI `.allowsHitTesting` — when `false`, this view and descendants
1410
+ * ignore pointer hits (`pointer-events: none`).
1411
+ */
1412
+ allowsHitTesting(value?: boolean): this;
1413
+ /**
1414
+ * SwiftUI scroll target id — used by {@link ScrollViewReader} `.scrollTo(id)`.
1415
+ * Sets `data-scroll-id` on the host.
1416
+ */
1417
+ scrollTarget(id: string): this;
1418
+ /**
1419
+ * SwiftUI: taps on *containers* (ZStack / Column / …) only hit drawn content
1420
+ * unless `.contentShape(Rectangle())` is set. We default that shape when the
1421
+ * first gesture is attached and the caller did not set one — same as the
1422
+ * usual SwiftUI fix, without forcing it on chrome-only views.
1423
+ */
1424
+ protected ensureGestureContentShape(): void;
1425
+ /**
1426
+ * SwiftUI `.gesture` — attach Tap / LongPress / Drag / Magnify / Rotate / …
1427
+ * Chainable: each call wraps the previous (outermost = last).
1428
+ */
1429
+ gesture(gesture: GestureBuilder): this;
1430
+ /** SwiftUI `.simultaneousGesture` — runs alongside other gestures (no steal). */
1431
+ simultaneousGesture(gesture: GestureBuilder): this;
1432
+ /** SwiftUI `.highPriorityGesture` — recognized before the view's own gestures. */
1433
+ highPriorityGesture(gesture: GestureBuilder): this;
1434
+ /**
1435
+ * Sugar for {@link TapGesture}`.onEnd(handler)`.
1436
+ * Note: `Button` / `List` / `ListTile` keep domain-specific `.onPress`.
1437
+ */
1438
+ onPress(handler: () => void): this;
1439
+ /** Flutter-style alias of {@link onPress}. */
1440
+ onTap(handler: () => void): this;
1441
+ /**
1442
+ * SwiftUI `onTapGesture(count:perform:)` — default count 1.
1443
+ * Pass a location callback for SpatialTap behavior.
1444
+ */
1445
+ onTapGesture(countOrHandler: number | ((location?: TapLocation) => void) | (() => void), handler?: ((location?: TapLocation) => void) | (() => void)): this;
1446
+ /**
1447
+ * SwiftUI `onLongPressGesture(minimumDuration:perform:onPressingChanged:)`.
1448
+ */
1449
+ onLongPressGesture(handlerOrOpts: (() => void) | {
1450
+ minimumDuration?: number;
1451
+ maximumDistance?: number;
1452
+ perform: () => void;
1453
+ onPressingChanged?: (pressing: boolean) => void;
1454
+ }, onPressingChanged?: (pressing: boolean) => void): this;
1455
+ animation(config: Partial<AnimationOptions>): this;
1456
+ protected hasStateManagement(): boolean;
1457
+ className(className: string): this;
1458
+ classNames(classNames: string[]): this;
1459
+ css(styles: React$1.CSSProperties): this;
1460
+ style(style: React$1.CSSProperties): this;
1461
+ props(props: Record<string, any>): this;
1462
+ protected _transitionDuration: number;
1463
+ protected _transitionEasing: string;
1464
+ protected _transitionDelay: number;
1465
+ protected _transitionProperties: string[];
1466
+ /**
1467
+ * Apply CSS transition
1468
+ *
1469
+ * Overload 1: String syntax
1470
+ * Example: .transition('all 0.2s ease-in-out')
1471
+ *
1472
+ * Overload 2: Shorthand with parameters
1473
+ * Example: .transition('all', 200, 'ease-out')
1474
+ * Example: .transition('all', 200, 'ease-out', 50)
1475
+ */
1476
+ transition(value: string): this;
1477
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
1478
+ /**
1479
+ * Set transition duration in milliseconds
1480
+ * Example: .duration(200) → 200ms
1481
+ */
1482
+ duration(ms: number): this;
1483
+ /**
1484
+ * Set transition easing function
1485
+ * Example: .easing('ease-in-out')
1486
+ */
1487
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
1488
+ /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
1489
+ ease(value: string): this;
1490
+ /**
1491
+ * Set transition delay in milliseconds
1492
+ * Example: .delay(100) → 100ms delay
1493
+ */
1494
+ delay(ms: number): this;
1495
+ /**
1496
+ * Set which properties to transition
1497
+ * Example: .properties(['color', 'transform'])
1498
+ */
1499
+ properties(props: string[]): this;
1500
+ /**
1501
+ * Apply the built transition to the element
1502
+ */
1503
+ protected _applyTransition(): void;
1504
+ private replaceTransitionClass;
1505
+ /**
1506
+ * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
1507
+ * @example Box().animate('fadeIn').duration(300).ease('spring')
1508
+ */
1509
+ animate(preset: MotionPreset | string, options?: {
1510
+ duration?: number;
1511
+ ease?: string;
1512
+ delay?: number;
1513
+ from?: number | string;
1514
+ stiffness?: number;
1515
+ damping?: number;
1516
+ mass?: number;
1517
+ }): this;
1518
+ animate(custom: CustomMotion): this;
1519
+ /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
1520
+ spring(options?: SpringOptions): this;
1521
+ reducedMotion(mode?: "reduce" | "never"): this;
1522
+ press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
1523
+ /**
1524
+ * Shortcut: `.hover(h => h.effect(name))`.
1525
+ * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
1526
+ */
1527
+ hoverEffect(name: string): this;
1528
+ /**
1529
+ * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
1530
+ */
1531
+ pressEffect(name: string): this;
1532
+ /**
1533
+ * Shortcut: `.focus(f => f.effect(name))`.
1534
+ */
1535
+ focusEffect(name: string): this;
1536
+ /**
1537
+ * Shortcut: `.active(a => a.effect(name))`.
1538
+ */
1539
+ activeEffect(name: string): this;
1540
+ /**
1541
+ * Shortcut: `.groupHover(h => h.effect(name))`.
1542
+ */
1543
+ groupHoverEffect(name: string): this;
1544
+ focusVisible(): PseudoStateBuilder;
1545
+ focusVisible(callback: PseudoStateFn): this;
1546
+ stagger(ms: number): this;
1547
+ /** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
1548
+ reveal(preset?: string | {
1549
+ preset?: string;
1550
+ once?: boolean;
1551
+ rootMargin?: string;
1552
+ threshold?: number;
1553
+ }, options?: {
1554
+ once?: boolean;
1555
+ rootMargin?: string;
1556
+ threshold?: number;
1557
+ }): this;
1558
+ /** Alias of `.reveal()` for scroll-triggered presets. */
1559
+ onScroll(preset?: string): this;
1560
+ /** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
1561
+ scrollTimeline(kind?: "view" | "scroll"): this;
1562
+ scrollProgress(): this;
1563
+ smoothScroll(): this;
1564
+ scrollSnap(axis?: "x" | "y" | "both"): this;
1565
+ scrollSnapAlign(align?: "start" | "center" | "end"): this;
1566
+ sticky(top?: number | string | boolean): this;
1567
+ /**
1568
+ * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
1569
+ * clear this bar. Header uses the real bar height.
1570
+ */
1571
+ protected publishStickyOffset(value: number | string): void;
1572
+ viewTransition(name: string): this;
1573
+ /** Default `:focus-visible` ring. Pass a callback to customize. */
1574
+ focusRing(color?: string): this;
1575
+ protected ensureInteractiveTransition(): void;
1576
+ /**
1577
+ * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
1578
+ * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
1579
+ * @internal
1580
+ */
1581
+ prepareSmoothInteraction(properties: string[]): void;
1582
+ /** @internal Convert inline background/border shorthands → longhands. */
1583
+ promoteSurfaceLonghands(): void;
1584
+ /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
1585
+ ensureRestTransform(): void;
1586
+ /**
1587
+ * Ensure the base element transitions the properties an interaction effect needs.
1588
+ * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
1589
+ * explicitly or a motion animation class is present.
1590
+ * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
1591
+ */
1592
+ ensureEffectTransition(properties: string[]): void;
1593
+ /**
1594
+ * Apply a theme to this node and descendants (CSS vars inherit).
1595
+ * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
1596
+ * SSR-safe: class + inline vars on first paint (no useEffect).
1597
+ */
1598
+ theme(input: ThemeInput): this;
1599
+ /** Prefer dark/light system chrome for native controls under this subtree. */
1600
+ colorScheme(scheme: "light" | "dark" | "light dark"): this;
1601
+ hover(): PseudoStateBuilder;
1602
+ hover(callback: PseudoStateFn): this;
1603
+ /**
1604
+ * Paint for a `When` state. Hover / focus / active / visited / disabled
1605
+ * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
1606
+ *
1607
+ * ```ts
1608
+ * Row().when(When.hover, (s) => s.bg('#c8ff00'))
1609
+ * ```
1610
+ */
1611
+ when(state: When, style: WhenStyle): this;
1612
+ focus(): PseudoStateBuilder;
1613
+ focus(callback: PseudoStateFn): this;
1614
+ active(): PseudoStateBuilder;
1615
+ active(callback: PseudoStateFn): this;
1616
+ visited(): PseudoStateBuilder;
1617
+ visited(callback: PseudoStateFn): this;
1618
+ disabledState(): PseudoStateBuilder;
1619
+ disabledState(callback: PseudoStateFn): this;
1620
+ focusWithin(): PseudoStateBuilder;
1621
+ focusWithin(callback: PseudoStateFn): this;
1622
+ firstChild(): PseudoStateBuilder;
1623
+ firstChild(callback: PseudoStateFn): this;
1624
+ lastChild(): PseudoStateBuilder;
1625
+ lastChild(callback: PseudoStateFn): this;
1626
+ groupHover(): PseudoStateBuilder;
1627
+ groupHover(callback: PseudoStateFn): this;
1628
+ groupFocus(): PseudoStateBuilder;
1629
+ groupFocus(callback: PseudoStateFn): this;
1630
+ groupActive(): PseudoStateBuilder;
1631
+ groupActive(callback: PseudoStateFn): this;
1632
+ groupFocusWithin(): PseudoStateBuilder;
1633
+ groupFocusWithin(callback: PseudoStateFn): this;
1634
+ group(): this;
1635
+ protected _childFunction?: () => FiboChild | FiboChild[];
1636
+ children(children: FiboChildren): this;
1637
+ protected getClassName(): string;
1638
+ protected getStyle(): React$1.CSSProperties;
1639
+ protected processChildren(): React$1.ReactNode[];
1640
+ protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
1641
+ /**
1642
+ * @deprecated Builders are React elements. Returning or nesting the builder is enough.
1643
+ * `.build()` still assembles the host tree for older call sites.
1644
+ */
1645
+ abstract build(): React$1.ReactElement;
1646
+ }
1647
+ type KnownKeys<T> = {
1648
+ [K in keyof T]: string extends K ? never : number extends K ? never : K;
1649
+ } extends {
1650
+ [_ in keyof T]: infer U;
1651
+ } ? U : never;
1652
+ type StyleBuilder<T> = T & LogicalAxes & {
1653
+ [K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
1654
+ } & React$1.ReactElement;
1655
+ interface SignalLike<T> {
1656
+ value: T;
1657
+ subscribe: (listener: (val: T) => void) => () => void;
1658
+ }
1659
+ declare class FluentValueBuilder<T> {
1660
+ private _signal;
1661
+ private _loading?;
1662
+ private _error?;
1663
+ private _builder?;
1664
+ constructor(_signal: SignalLike<T>);
1665
+ loading(component: React$1.ReactNode | (() => React$1.ReactNode)): this;
1666
+ error(component: (error: Error | unknown) => React$1.ReactNode): this;
1667
+ builder(fn: (value: T) => React$1.ReactNode): this;
1668
+ children(fn: (value: T) => React$1.ReactNode): this;
1669
+ build(): React$1.ReactElement;
1670
+ }
1671
+ export declare function ValueBuilder<T>(signal: SignalLike<T>): FluentValueBuilder<T>;
1672
+ type PresenceShow = boolean | BindableSignal<boolean>;
1673
+ interface PresenceProps {
1674
+ show: PresenceShow;
1675
+ enter?: MotionPreset | string;
1676
+ exit?: MotionPreset | string;
1677
+ duration?: number;
1678
+ reducedMotion?: "reduce" | "never";
1679
+ children?: React$1.ReactNode;
1680
+ }
1681
+ declare class PresenceBuilder extends FiboBuilder {
1682
+ private _show;
1683
+ private _enter;
1684
+ private _exit;
1685
+ constructor(show?: PresenceShow);
1686
+ show(value: PresenceShow): this;
1687
+ enter(preset: MotionPreset | string): this;
1688
+ exit(preset: MotionPreset | string): this;
1689
+ duration(ms: number): this;
1690
+ build(): React$1.ReactElement;
1691
+ }
1692
+ declare const presenceBuilder: (show?: PresenceShow | undefined) => StyleBuilder<PresenceBuilder>;
1693
+ export declare function Presence(show?: PresenceShow): ReturnType<typeof presenceBuilder>;
1694
+ export declare function Presence(props: PresenceProps): React$1.ReactElement;
1695
+ export declare namespace Presence {
1696
+ var displayName: string;
1697
+ }
1698
+ interface RevealProps {
1699
+ preset?: string;
1700
+ once?: boolean;
1701
+ rootMargin?: string;
1702
+ threshold?: number;
1703
+ forceMotion?: boolean;
1704
+ /** @deprecated Ignored — view-timeline never skips IO (was forcing fibo-inview on load). */
1705
+ preferTimeline?: boolean;
1706
+ /** CSS vars (`--fibo-dur`, `--fibo-ease`, `--fibo-delay`) for the reveal wrapper. */
1707
+ style?: React$1.CSSProperties;
1708
+ children?: React$1.ReactNode;
1709
+ }
1710
+ /** IntersectionObserver toggles `.fibo-inview`. Motion is CSS — no rAF. */
1711
+ export declare function Reveal({ preset, once, rootMargin, threshold, forceMotion, style, children, }: RevealProps): React$1.DetailedReactHTMLElement<{
1712
+ ref: React$1.RefObject<HTMLDivElement>;
1713
+ className: string;
1714
+ style: React$1.CSSProperties | undefined;
1715
+ "data-fibo-reveal": string;
1716
+ }, HTMLDivElement>;
1717
+ interface ScrollProgressProps {
1718
+ children: React$1.ReactElement;
1719
+ }
1720
+ /** Binds `--fibo-progress` from scroll when `animation-timeline: scroll()` is missing. No rAF. */
1721
+ export declare function ScrollProgress({ children }: ScrollProgressProps): React$1.DetailedReactHTMLElement<{
1722
+ ref: React$1.RefObject<HTMLDivElement>;
1723
+ "data-fibo-scroll-progress": string;
1724
+ style: {
1725
+ display: "contents";
1726
+ };
1727
+ }, HTMLDivElement>;
1728
+ type ScrollToOptions$1 = {
1729
+ behavior?: ScrollBehavior;
1730
+ block?: ScrollLogicalPosition;
1731
+ /** Also set `location.hash` (in-page anchor navigation). */
1732
+ hash?: boolean;
1733
+ };
1734
+ /**
1735
+ * Smooth-scroll to an element id / selector / Element.
1736
+ * Pass `hash: true` to update the URL hash (replaces the old site-only `goHash`).
1737
+ */
1738
+ declare function scrollTo$1(target: string | Element, options?: ScrollToOptions$1): void;
1739
+ export declare function startViewTransition(update: () => void): void;
1740
+ export declare function supportsViewTimeline(): boolean;
1741
+ export declare function supportsScrollTimeline(): boolean;
1742
+ /**
1743
+ * AUTO-GENERATED by scripts/gen-interaction-fx.mjs — do not edit by hand.
1744
+ * Fiboui-owned interaction effects (Hover.css–inspired names, not a vendor dump).
1745
+ */
1746
+ export declare const FIBO_INTERACTION_FX_CSS: string;
1747
+ /**
1748
+ * Inject the full interaction-effect sheet once.
1749
+ * Idempotent via StyleManager cache — must NOT use a module flag, or
1750
+ * `endSsrRequest()` / `StyleManager.reset()` would skip re-injection on the
1751
+ * next SSR request and drop FX CSS from the snapshot.
1752
+ */
1753
+ export declare function ensureInteractionFxCss(): void;
1754
+ export declare function getMotionCss(): string;
1755
+ export declare function getCss(): string;
1756
+ /** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
1757
+ export declare function getStyleTag(): string;
1758
+ /**
1759
+ * Reset the StyleManager singleton between SSR requests (Next.js / custom servers).
1760
+ * Call after the response CSS has been captured when using `<FiboStyles />` mid-tree.
1761
+ */
1762
+ export declare function endSsrRequest(): void;
1763
+ /**
1764
+ * Inject collected CSS into a document. Place as a **later sibling** of the app
1765
+ * so registrations from children run first during SSR.
1766
+ */
1767
+ export declare function FiboStyles(): React$1.ReactElement;
1768
+ export declare function MotionStyles(): React$1.ReactElement;
1769
+ export type FiboPageBuild = () => FiboChild | React$1.ReactNode;
1770
+ type FiboPageMeta = {
1771
+ title?: string;
1772
+ description?: string;
1773
+ };
1774
+ export type FiboPageOptions = {
1775
+ /** Append `<FiboStyles />` after the tree (SSR dynamic CSS). Default true. */
1776
+ styles?: boolean;
1777
+ /** SSR `<title>` / `<meta name="description">` (React 19 hoists into `<head>`). */
1778
+ meta?: FiboPageMeta;
1779
+ };
1780
+ type FiboPageComponent = React$1.ComponentType & {
1781
+ meta?: FiboPageMeta;
1782
+ };
1783
+ /**
1784
+ * Next/Vite page helper — **zero JSX** in app code, SSR-safe.
1785
+ *
1786
+ * Next App Router still SSRs Client Components: HTML is rendered on the server,
1787
+ * then hydrated. Import `fiboui/style.css` once from `app/layout.tsx` (or the
1788
+ * Vite entry) so the base sheet is in the document on first paint.
1789
+ *
1790
+ * ```ts
1791
+ * // app/page.tsx — Server Component (no 'use client')
1792
+ * import { page, Column, Text } from 'fiboui'
1793
+ *
1794
+ * export default page(() =>
1795
+ * Column().gap(12).children([Text('Hello')])
1796
+ * )
1797
+ * ```
1798
+ *
1799
+ * App Router resolves `fiboui` via the `react-server` export (static builders).
1800
+ * `build()` runs during RSC render so StyleManager rules exist before `<FiboStyles />`.
1801
+ */
1802
+ export declare function page(build: FiboPageBuild, options?: FiboPageOptions): FiboPageComponent;
1803
+ /**
1804
+ * Alias of `page()`. Prefer `export default page(() => …)` from a Server Component.
1805
+ */
1806
+ export declare const createPage: typeof page;
1807
+ /**
1808
+ * Wrap any builder / node with `FiboStyles` without JSX.
1809
+ *
1810
+ * ```ts
1811
+ * export default function Home() {
1812
+ * return withFiboStyles(Column().children([Text('Hi')]))
1813
+ * }
1814
+ * ```
1815
+ */
1816
+ export declare function withFiboStyles(child: FiboChild | React$1.ReactNode): React$1.ReactElement;
1817
+ type Constructor<T = any> = new (...args: any[]) => T;
1818
+ type Factory<T = any> = () => T;
1819
+ type Provider<T = any> = Constructor<T> | Factory<T> | T;
1820
+ type Token<T = any> = string | symbol | Constructor<T>;
1821
+ interface RouteDefinition {
1822
+ path: string;
1823
+ component: () => FiboBuilder;
1824
+ meta?: Record<string, any>;
1825
+ }
1826
+ interface SidebarConfig {
1827
+ label: string;
1828
+ icon?: any;
1829
+ path: string;
1830
+ order?: number;
1831
+ }
1832
+ interface FiboContext {
1833
+ registerService<T>(token: Token<T>, implementation: Provider<T>): void;
1834
+ registerStore(store: unknown, name?: string): void;
1835
+ getStore?<T = unknown>(name: string): T | undefined;
1836
+ registerRoute(route: RouteDefinition): void;
1837
+ registerSidebarItem(item: SidebarConfig): void;
1838
+ registerTopbarAction(component: () => FiboBuilder): void;
1839
+ registerOverlay(component: () => FiboBuilder): void;
1840
+ }
1841
+ type PluginSetup = (context: FiboContext) => void;
1842
+ interface FiboPlugin {
1843
+ name: string;
1844
+ version?: string;
1845
+ setup: PluginSetup;
1846
+ teardown?: PluginSetup;
1847
+ }
1848
+ export declare class FiboAppBuilder {
1849
+ private _rootComponent;
1850
+ private _rootElement;
1851
+ private _plugins;
1852
+ private _reactRoot;
1853
+ private _installed;
1854
+ use(plugin: FiboPlugin): this;
1855
+ plugins(pluginsList: FiboPlugin[]): this;
1856
+ root(component: React$1.ComponentType): this;
1857
+ mount(elementId: string, options?: {
1858
+ strict?: boolean;
1859
+ }): () => void;
1860
+ unmount(): void;
1861
+ private build;
1862
+ }
1863
+ export declare const FiboApp: () => FiboAppBuilder;
1864
+ /** Turn a builder (or already-built node) into a React node. */
1865
+ export declare function toElement(node: FiboChild): React$1.ReactNode;
1866
+ /**
1867
+ * Optional wrapper. Builders are already React elements:
1868
+ *
1869
+ * ```tsx
1870
+ * function App() {
1871
+ * return Button('Save').onPress(save);
1872
+ * }
1873
+ * ```
1874
+ */
1875
+ export declare function Fibo({ children }: {
1876
+ children: FiboChild;
1877
+ }): React$1.ReactElement;
1878
+ /**
1879
+ * Mount a page that returns a builder — no `.build()` on the root.
1880
+ *
1881
+ * ```ts
1882
+ * function App() {
1883
+ * return Column().children([Text('Hi')]);
1884
+ * }
1885
+ * mount('#root', App);
1886
+ * ```
1887
+ */
1888
+ export declare function mount(target: string | Element, app: (() => FiboChild) | FiboChild, options?: {
1889
+ strict?: boolean;
1890
+ }): Root;
1891
+
1892
+ export {
1893
+ Store as ReactiveStore,
1894
+ scrollTo$1 as scrollTo,
1895
+ };
1896
+
1897
+ export {};