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/server.d.ts CHANGED
@@ -1,2 +1,1729 @@
1
- export { page, withFiboStyles, createPage, FiboStyles, MotionStyles, getCss, getStyleTag, endSsrRequest, Center, Column, Container, Row, Spacer, Header, Scaffold, Box, Card, Grid, GridItem, Text, Button, Presence } from './index.js';
2
- export type { FiboPageBuild, FiboPageOptions } 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
+
6
+ type Buildable = {
7
+ /** @deprecated Builders are React elements; `.build()` is optional. */
8
+ build(): React$1.ReactNode;
9
+ };
10
+ type FiboChild = React$1.ReactNode | Buildable;
11
+ type FiboChildren = FiboChild | readonly FiboChild[] | (() => FiboChild | readonly FiboChild[]);
12
+ type FiboThemeName = "material" | "cupertino" | "web" | "noir";
13
+ interface ResponsiveStyles {
14
+ mobile?: React$1.CSSProperties;
15
+ tablet?: React$1.CSSProperties;
16
+ desktop?: React$1.CSSProperties;
17
+ }
18
+ type Alignment = "start" | "center" | "end" | "stretch";
19
+ type MainAxisAlignment = "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
20
+ type CrossAxisAlignment = Alignment;
21
+ type AlignAxis = "start" | "center" | "end" | "stretch" | "baseline" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly";
22
+ interface TextStyle {
23
+ fontSize?: string | number;
24
+ fontWeight?: string | number;
25
+ fontFamily?: string;
26
+ color?: string;
27
+ lineHeight?: string | number;
28
+ letterSpacing?: string | number;
29
+ }
30
+ type TextType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "caption" | "label";
31
+ type ButtonVariant = "elevated" | "filled" | "outlined" | "text";
32
+ export type FiboPageBuild = () => FiboChild | React$1.ReactNode;
33
+ type FiboPageMeta = {
34
+ title?: string;
35
+ description?: string;
36
+ };
37
+ export type FiboPageOptions = {
38
+ /** Append `<FiboStyles />` after the tree (SSR dynamic CSS). Default true. */
39
+ styles?: boolean;
40
+ /** SSR `<title>` / `<meta name="description">` (React 19 hoists into `<head>`). */
41
+ meta?: FiboPageMeta;
42
+ };
43
+ type FiboPageComponent = React$1.ComponentType & {
44
+ meta?: FiboPageMeta;
45
+ };
46
+ /**
47
+ * RSC entry. One render, no hooks. The client `page()` keeps `signal()` stable
48
+ * and re-runs the builder when a read `.value` changes.
49
+ */
50
+ export declare function page(build: FiboPageBuild, options?: FiboPageOptions): FiboPageComponent;
51
+ export declare const createPage: typeof page;
52
+ export declare function withFiboStyles(child: FiboChild | React$1.ReactNode): React$1.ReactElement;
53
+ export declare function getCss(): string;
54
+ /** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
55
+ export declare function getStyleTag(): string;
56
+ /**
57
+ * Reset the StyleManager singleton between SSR requests (Next.js / custom servers).
58
+ * Call after the response CSS has been captured when using `<FiboStyles />` mid-tree.
59
+ */
60
+ export declare function endSsrRequest(): void;
61
+ /**
62
+ * Inject collected CSS into a document. Place as a **later sibling** of the app
63
+ * so registrations from children run first during SSR.
64
+ */
65
+ export declare function FiboStyles(): React$1.ReactElement;
66
+ export declare function MotionStyles(): React$1.ReactElement;
67
+ declare const FIBO_BREAKPOINTS: {
68
+ readonly sm: 640;
69
+ readonly md: 768;
70
+ readonly lg: 1024;
71
+ readonly xl: 1280;
72
+ };
73
+ type BreakpointKey = keyof typeof FIBO_BREAKPOINTS;
74
+ type Listener<T> = (value: T) => void;
75
+ type Unsubscribe = () => void;
76
+ interface Subscribable<T> {
77
+ subscribe(listener: Listener<T>): Unsubscribe;
78
+ subscribeEffect(effect: Effect): void;
79
+ unsubscribeEffect(effect: Effect): void;
80
+ }
81
+ interface BindableSignal<T = unknown> {
82
+ readonly value: T;
83
+ subscribe(listener: Listener<T>): Unsubscribe;
84
+ }
85
+ declare class Effect {
86
+ private fn;
87
+ private dependencies;
88
+ private _onDispose?;
89
+ constructor(fn: () => void);
90
+ run(): void;
91
+ track(dep: Subscribable<any>): void;
92
+ trigger(): void;
93
+ cleanup(): void;
94
+ dispose(): void;
95
+ }
96
+ declare class Signal<T> implements Subscribable<T> {
97
+ private _value;
98
+ private listeners;
99
+ private effects;
100
+ private readonly _initial;
101
+ constructor(_value: T);
102
+ get value(): T;
103
+ /** Current value without tracking. Replays use this so a node does not subscribe twice. */
104
+ peek(): T;
105
+ set value(newValue: T);
106
+ /** Replace the value. Same notify path as `.value = next`. */
107
+ set(next: T): this;
108
+ /**
109
+ * Write a value, or an updater `(prev) => next`.
110
+ * Function-valued signals should use `.set()` / `.value =` so the function is stored, not called.
111
+ * Not named `update`: `listSignal.update(id, patch)` is the item patch.
112
+ */
113
+ change(next: T | ((prev: T) => T)): this;
114
+ /** Restore the value passed to `signal(initial)`. */
115
+ reset(): this;
116
+ subscribe(listener: Listener<T>): Unsubscribe;
117
+ subscribeEffect(effect: Effect): void;
118
+ unsubscribeEffect(effect: Effect): void;
119
+ private _notifyDepth;
120
+ private notify;
121
+ }
122
+ declare class Observable<T> implements Subscribable<T> {
123
+ private _value;
124
+ private listeners;
125
+ private effects;
126
+ constructor(_value: T);
127
+ get(): T;
128
+ set(newValue: T): void;
129
+ subscribe(listener: Listener<T>): Unsubscribe;
130
+ subscribeEffect(effect: Effect): void;
131
+ unsubscribeEffect(effect: Effect): void;
132
+ private notify;
133
+ }
134
+ type GestureMask = "all" | "gesture" | "subviews" | "none";
135
+ type TapLocation = {
136
+ x: number;
137
+ y: number;
138
+ };
139
+ declare abstract class GestureBuilder {
140
+ protected _enabled: boolean;
141
+ protected _including: GestureMask;
142
+ /** When true, wrappers must not stopPropagation (simultaneous). */
143
+ protected _bubble: boolean;
144
+ /** @internal Fired when the gesture successfully recognizes (Sequence / Exclusive). */
145
+ protected _onRecognized?: () => void;
146
+ enabled(value?: boolean): this;
147
+ /** SwiftUI `gesture(_:including:)`. */
148
+ including(mask: GestureMask): this;
149
+ /** Internal — set by SimultaneousGesture / `.simultaneousGesture`. */
150
+ bubble(value?: boolean): this;
151
+ /** @internal Used by SequenceGesture / ExclusiveGesture. */
152
+ onRecognized(callback: () => void): this;
153
+ /** @internal */
154
+ protected notifyRecognized(): void;
155
+ abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
156
+ }
157
+ interface AnimationOptions {
158
+ duration?: number;
159
+ curve?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | string;
160
+ damping?: number;
161
+ stiffness?: number;
162
+ velocity?: number;
163
+ mass?: number;
164
+ onComplete?: () => void;
165
+ }
166
+ interface Signal<T> {
167
+ spring(target: T, options?: Partial<AnimationOptions>): void;
168
+ animate(target: T, options?: Partial<AnimationOptions>): void;
169
+ snapTo(target: T, options?: Partial<AnimationOptions>): void;
170
+ }
171
+ declare const INTERACTION_EFFECTS: readonly [
172
+ "grow",
173
+ "shrink",
174
+ "pulse",
175
+ "pulseGrow",
176
+ "pulseShrink",
177
+ "push",
178
+ "pop",
179
+ "bounceIn",
180
+ "bounceOut",
181
+ "rotate",
182
+ "growRotate",
183
+ "float",
184
+ "sink",
185
+ "bob",
186
+ "hang",
187
+ "skew",
188
+ "skewForward",
189
+ "skewBackward",
190
+ "wobbleHorizontal",
191
+ "wobbleVertical",
192
+ "wobbleToBottomRight",
193
+ "wobbleToTopRight",
194
+ "wobbleTop",
195
+ "wobbleBottom",
196
+ "wobbleSkew",
197
+ "buzz",
198
+ "buzzOut",
199
+ "forward",
200
+ "backward",
201
+ "nudge",
202
+ "fade",
203
+ "backPulse",
204
+ "sweepToRight",
205
+ "sweepToLeft",
206
+ "sweepToBottom",
207
+ "sweepToTop",
208
+ "bounceToRight",
209
+ "bounceToLeft",
210
+ "bounceToBottom",
211
+ "bounceToTop",
212
+ "radialOut",
213
+ "radialIn",
214
+ "rectangleIn",
215
+ "rectangleOut",
216
+ "shutterInHorizontal",
217
+ "shutterOutHorizontal",
218
+ "shutterInVertical",
219
+ "shutterOutVertical",
220
+ "iconBack",
221
+ "iconForward",
222
+ "iconDown",
223
+ "iconUp",
224
+ "iconSpin",
225
+ "iconDrop",
226
+ "iconFade",
227
+ "iconFloatAway",
228
+ "iconSinkAway",
229
+ "iconGrow",
230
+ "iconShrink",
231
+ "iconPulse",
232
+ "iconPulseGrow",
233
+ "iconPulseShrink",
234
+ "iconPush",
235
+ "iconPop",
236
+ "iconBounce",
237
+ "iconRotate",
238
+ "iconGrowRotate",
239
+ "iconFloat",
240
+ "iconSink",
241
+ "iconBob",
242
+ "iconHang",
243
+ "iconWobbleHorizontal",
244
+ "iconWobbleVertical",
245
+ "iconBuzz",
246
+ "iconBuzzOut",
247
+ "borderFade",
248
+ "hollow",
249
+ "trim",
250
+ "rippleOut",
251
+ "rippleIn",
252
+ "outlineOut",
253
+ "outlineIn",
254
+ "roundCorners",
255
+ "underlineFromLeft",
256
+ "underlineFromCenter",
257
+ "underlineFromRight",
258
+ "reveal",
259
+ "underlineReveal",
260
+ "overlineFromLeft",
261
+ "overlineFromCenter",
262
+ "overlineFromRight",
263
+ "overlineReveal",
264
+ "shadowGrow",
265
+ "shadowFloat",
266
+ "shadowGlow",
267
+ "shadowRadial",
268
+ "boxShadowOutset",
269
+ "boxShadowInset",
270
+ "lift",
271
+ "glow",
272
+ "bubbleTop",
273
+ "bubbleRight",
274
+ "bubbleBottom",
275
+ "bubbleLeft",
276
+ "bubbleFloatTop",
277
+ "bubbleFloatRight",
278
+ "bubbleFloatBottom",
279
+ "bubbleFloatLeft",
280
+ "curlTopLeft",
281
+ "curlTopRight",
282
+ "curlBottomRight",
283
+ "curlBottomLeft"
284
+ ];
285
+ type InteractionEffectName = (typeof INTERACTION_EFFECTS)[number];
286
+ interface LogicalAxes {
287
+ paddingHorizontal(value: string | number): this;
288
+ paddingVertical(value: string | number): this;
289
+ paddingX(value: string | number): this;
290
+ paddingY(value: string | number): this;
291
+ px(value: string | number): this;
292
+ py(value: string | number): this;
293
+ marginHorizontal(value: string | number): this;
294
+ marginVertical(value: string | number): this;
295
+ marginX(value: string | number): this;
296
+ marginY(value: string | number): this;
297
+ mx(value: string | number): this;
298
+ my(value: string | number): this;
299
+ borderHorizontal(value: string | number): this;
300
+ borderVertical(value: string | number): this;
301
+ borderX(value: string | number): this;
302
+ borderY(value: string | number): this;
303
+ borderWidthHorizontal(value: string | number): this;
304
+ borderWidthVertical(value: string | number): this;
305
+ borderColorHorizontal(value: string | number): this;
306
+ borderColorVertical(value: string | number): this;
307
+ roundedTop(value: string | number): this;
308
+ roundedBottom(value: string | number): this;
309
+ roundedLeft(value: string | number): this;
310
+ roundedRight(value: string | number): this;
311
+ insetHorizontal(value: string | number): this;
312
+ insetVertical(value: string | number): this;
313
+ insetX(value: string | number): this;
314
+ insetY(value: string | number): this;
315
+ gapX(value: string | number): this;
316
+ gapY(value: string | number): this;
317
+ }
318
+ interface PseudoStateBuilder extends LogicalAxes {
319
+ boxShadow(value: string | number): this;
320
+ }
321
+ declare class PseudoStateBuilder {
322
+ private pseudoState;
323
+ private parentBuilder;
324
+ private isGroup;
325
+ private transitionDuration;
326
+ private transitionEasing;
327
+ private transitionDelay;
328
+ private transitionProperties;
329
+ private transforms;
330
+ private _boxLonghands;
331
+ constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
332
+ /**
333
+ * Apply a named interaction effect (full Hover.css–inspired catalog).
334
+ * Works on any pseudo trigger — hover, press/active, focus, groupHover, etc.
335
+ * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
336
+ */
337
+ effect(name: InteractionEffectName | string): this;
338
+ bg(color: string): this;
339
+ /** Same longhand as `.bg()` — interpolates against the resting surface. */
340
+ backgroundColor(value: string): this;
341
+ color(value: string): this;
342
+ text(color: string): this;
343
+ opacity(value: number): this;
344
+ borderColor(value: string): this;
345
+ transform(value: string): this;
346
+ scale(value: number): this;
347
+ translateX(value: number | string): this;
348
+ translateY(value: number | string): this;
349
+ rotate(degrees: number): this;
350
+ shadow(value: string | number): this;
351
+ css(property: string, value: string | number): this;
352
+ padding(value: string | number): this;
353
+ p(value: string | number): this;
354
+ margin(value: string | number): this;
355
+ transition(value: string): this;
356
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
357
+ duration(ms: number): this;
358
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
359
+ ease(value: string): this;
360
+ delay(ms: number): this;
361
+ properties(props: string[]): this;
362
+ private applyTransition;
363
+ private flushTransform;
364
+ private set;
365
+ private commit;
366
+ end(): FiboBuilder;
367
+ }
368
+ declare const When: {
369
+ readonly hover: "hover";
370
+ readonly focus: "focus";
371
+ readonly active: "active";
372
+ readonly visited: "visited";
373
+ readonly disabled: "disabled";
374
+ readonly on: "on";
375
+ readonly off: "off";
376
+ readonly checked: "checked";
377
+ readonly unchecked: "unchecked";
378
+ readonly indeterminate: "indeterminate";
379
+ readonly mixed: "mixed";
380
+ };
381
+ type When = (typeof When)[keyof typeof When];
382
+ type WhenStyle = React$1.CSSProperties | string | ((builder: any) => void);
383
+ declare const Size: {
384
+ readonly full: "full";
385
+ readonly screen: "screen";
386
+ readonly fit: "fit";
387
+ readonly min: "min";
388
+ readonly max: "max";
389
+ /** SwiftUI `.infinity` — expand to the space the parent proposes (`100%`). */
390
+ readonly infinity: "infinity";
391
+ };
392
+ type Size = (typeof Size)[keyof typeof Size];
393
+ declare const StackAlign: {
394
+ readonly center: "center";
395
+ readonly top: "top";
396
+ readonly bottom: "bottom";
397
+ readonly left: "left";
398
+ readonly right: "right";
399
+ readonly topLeft: "topLeft";
400
+ readonly topRight: "topRight";
401
+ readonly bottomLeft: "bottomLeft";
402
+ readonly bottomRight: "bottomRight";
403
+ /** SwiftUI `leading` → `left` */
404
+ readonly leading: "left";
405
+ /** SwiftUI `trailing` → `right` */
406
+ readonly trailing: "right";
407
+ /** SwiftUI `topLeading` → `topLeft` */
408
+ readonly topLeading: "topLeft";
409
+ /** SwiftUI `topTrailing` → `topRight` */
410
+ readonly topTrailing: "topRight";
411
+ /** SwiftUI `bottomLeading` → `bottomLeft` */
412
+ readonly bottomLeading: "bottomLeft";
413
+ /** SwiftUI `bottomTrailing` → `bottomRight` */
414
+ readonly bottomTrailing: "bottomRight";
415
+ };
416
+ type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
417
+ type FrameSize = number | string | Size;
418
+ interface FrameSpec {
419
+ width?: FrameSize;
420
+ height?: FrameSize;
421
+ minWidth?: FrameSize;
422
+ idealWidth?: FrameSize;
423
+ maxWidth?: FrameSize;
424
+ minHeight?: FrameSize;
425
+ idealHeight?: FrameSize;
426
+ maxHeight?: FrameSize;
427
+ alignment?: StackAlign | keyof typeof StackAlign;
428
+ }
429
+ type ClipShapeName = "circle" | "rounded" | "square";
430
+ interface OffsetSpec {
431
+ x?: number;
432
+ y?: number;
433
+ }
434
+ interface FixedSizeSpec {
435
+ horizontal?: boolean;
436
+ vertical?: boolean;
437
+ }
438
+ interface LayerSpec {
439
+ kind: "overlay" | "background";
440
+ child: FiboChild | (() => FiboChild);
441
+ alignment: StackAlign | keyof typeof StackAlign;
442
+ }
443
+ type ContentShapeName = "rectangle" | ClipShapeName;
444
+ type GeometryRect = {
445
+ x: number;
446
+ y: number;
447
+ width: number;
448
+ height: number;
449
+ };
450
+ type ContainerRelativeFrameSpec = {
451
+ axis?: "horizontal" | "vertical" | "both";
452
+ /** Divisions of the container (SwiftUI `count`). Default 1. */
453
+ count?: number;
454
+ /** Spans claimed (SwiftUI `span`). Default 1. */
455
+ span?: number;
456
+ };
457
+ type AlignmentGuideName = "leading" | "trailing" | "top" | "bottom" | "centerX" | "centerY" | string;
458
+ type AlignmentGuideDims = {
459
+ width: number;
460
+ height: number;
461
+ };
462
+ type AlignmentGuideSpec = {
463
+ guide: AlignmentGuideName;
464
+ /** Absolute guide position, or compute from own size (SwiftUI `ViewDimensions`). */
465
+ compute: number | ((dims: AlignmentGuideDims) => number);
466
+ };
467
+ type MatchedGeometrySpec = {
468
+ id: string;
469
+ namespace?: string;
470
+ /** SwiftUI `isSource` — source owns the shared geometry. Default true. */
471
+ isSource?: boolean;
472
+ };
473
+ type PreferenceKeyDef<T> = {
474
+ readonly __preferenceKey: true;
475
+ readonly id: string | symbol;
476
+ readonly defaultValue: T;
477
+ reduce: (value: T, nextValue: T) => T;
478
+ };
479
+ type PreferenceWriteSpec = {
480
+ key: PreferenceKeyDef<any>;
481
+ value: unknown;
482
+ };
483
+ type PreferenceReadSpec = {
484
+ key: PreferenceKeyDef<any>;
485
+ onChange: (value: any) => void;
486
+ };
487
+ declare const Edge: {
488
+ readonly top: "top";
489
+ readonly bottom: "bottom";
490
+ readonly leading: "leading";
491
+ readonly trailing: "trailing";
492
+ };
493
+ type Edge = (typeof Edge)[keyof typeof Edge];
494
+ declare const EdgeSet: {
495
+ readonly top: "top";
496
+ readonly bottom: "bottom";
497
+ readonly leading: "leading";
498
+ readonly trailing: "trailing";
499
+ readonly horizontal: "horizontal";
500
+ readonly vertical: "vertical";
501
+ readonly all: "all";
502
+ };
503
+ type EdgeSet = (typeof EdgeSet)[keyof typeof EdgeSet];
504
+ type EdgeInsetsValue = {
505
+ top?: number | string;
506
+ bottom?: number | string;
507
+ leading?: number | string;
508
+ trailing?: number | string;
509
+ /** CSS left — alias of leading in LTR */
510
+ left?: number | string;
511
+ /** CSS right — alias of trailing in LTR */
512
+ right?: number | string;
513
+ };
514
+ type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
515
+ type SafeAreaInsetSpec = {
516
+ edge: SafeAreaInsetEdge;
517
+ content: FiboChild | (() => FiboChild);
518
+ /** Gap between inset bar and content. Default 0. */
519
+ spacing?: number;
520
+ };
521
+ interface SpringOptions {
522
+ stiffness?: number;
523
+ damping?: number;
524
+ mass?: number;
525
+ }
526
+ declare const MOTION_PRESETS: readonly [
527
+ "fadeIn",
528
+ "fadeOut",
529
+ "fade",
530
+ "slideUp",
531
+ "slideDown",
532
+ "slideLeft",
533
+ "slideRight",
534
+ "scaleIn",
535
+ "scaleOut",
536
+ "scale",
537
+ "blurIn",
538
+ "blurOut",
539
+ "blur",
540
+ "pop",
541
+ "bounce"
542
+ ];
543
+ type MotionPreset = (typeof MOTION_PRESETS)[number];
544
+ interface CustomMotion {
545
+ from: Record<string, string | number>;
546
+ to: Record<string, string | number>;
547
+ duration?: number;
548
+ ease?: string;
549
+ delay?: number;
550
+ stiffness?: number;
551
+ damping?: number;
552
+ mass?: number;
553
+ }
554
+ interface ThemeColors {
555
+ primary: string;
556
+ primaryVariant?: string;
557
+ primaryContainer?: string;
558
+ onPrimaryContainer?: string;
559
+ secondary: string;
560
+ secondaryVariant?: string;
561
+ secondaryContainer?: string;
562
+ onSecondaryContainer?: string;
563
+ tertiary?: string;
564
+ onTertiary?: string;
565
+ tertiaryContainer?: string;
566
+ onTertiaryContainer?: string;
567
+ background: string;
568
+ surface: string;
569
+ surfaceVariant?: string;
570
+ onSurfaceVariant?: string;
571
+ error: string;
572
+ errorContainer?: string;
573
+ onErrorContainer?: string;
574
+ success?: string;
575
+ warning?: string;
576
+ info?: string;
577
+ onPrimary: string;
578
+ onSecondary: string;
579
+ onBackground: string;
580
+ onSurface: string;
581
+ onError: string;
582
+ /** Borders / hairlines — maps to `--fibo-outline`. */
583
+ outline?: string;
584
+ outlineVariant?: string;
585
+ /** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
586
+ surfaceContainerLow?: string;
587
+ }
588
+ interface ThemeTypography {
589
+ h1: TextStyle;
590
+ h2: TextStyle;
591
+ h3: TextStyle;
592
+ h4: TextStyle;
593
+ h5: TextStyle;
594
+ h6: TextStyle;
595
+ body: TextStyle;
596
+ caption: TextStyle;
597
+ label: TextStyle;
598
+ }
599
+ interface ThemeSpacing {
600
+ xs: string;
601
+ sm: string;
602
+ md: string;
603
+ lg: string;
604
+ xl: string;
605
+ }
606
+ interface ThemeBorderRadius {
607
+ /** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
608
+ xs?: string;
609
+ sm: string;
610
+ md: string;
611
+ lg: string;
612
+ /** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
613
+ xl?: string;
614
+ full: string;
615
+ }
616
+ interface ThemeShadows {
617
+ sm: string;
618
+ md: string;
619
+ lg: string;
620
+ }
621
+ interface FiboTheme {
622
+ name: FiboThemeName;
623
+ colors: ThemeColors;
624
+ typography: ThemeTypography;
625
+ spacing: ThemeSpacing;
626
+ borderRadius: ThemeBorderRadius;
627
+ shadows: ThemeShadows;
628
+ fontFamily: string;
629
+ }
630
+ declare const FIBO_THEMES: {
631
+ readonly material: FiboTheme;
632
+ readonly cupertino: FiboTheme;
633
+ readonly web: FiboTheme;
634
+ readonly noir: FiboTheme;
635
+ };
636
+ type FiboThemePreset = keyof typeof FIBO_THEMES;
637
+ type ThemeInput = FiboTheme | FiboThemePreset;
638
+ declare enum Colors {
639
+ Primary = "primary",
640
+ OnPrimary = "on-primary",
641
+ PrimaryContainer = "primary-container",
642
+ OnPrimaryContainer = "on-primary-container",
643
+ Secondary = "secondary",
644
+ OnSecondary = "on-secondary",
645
+ SecondaryContainer = "secondary-container",
646
+ OnSecondaryContainer = "on-secondary-container",
647
+ Tertiary = "tertiary",
648
+ OnTertiary = "on-tertiary",
649
+ TertiaryContainer = "tertiary-container",
650
+ OnTertiaryContainer = "on-tertiary-container",
651
+ Error = "error",
652
+ OnError = "on-error",
653
+ Success = "success",
654
+ Warning = "warning",
655
+ Info = "info",
656
+ Background = "background",
657
+ OnBackground = "on-background",
658
+ Surface = "surface",
659
+ OnSurface = "on-surface",
660
+ SurfaceVariant = "surface-variant",
661
+ OnSurfaceVariant = "on-surface-variant",
662
+ Outline = "outline",
663
+ Transparent = "transparent",
664
+ Black = "black",
665
+ White = "white"
666
+ }
667
+ declare enum ShadowSize {
668
+ Sm = "sm",
669
+ Md = "md",
670
+ Lg = "lg",
671
+ Xl = "xl",
672
+ Xl2 = "2xl"
673
+ }
674
+ declare enum ShadowPreset {
675
+ Card = "card",
676
+ Button = "button",
677
+ Modal = "modal",
678
+ Float = "float",
679
+ Inner = "inner"
680
+ }
681
+ declare enum ShadowDirection {
682
+ Top = "top",
683
+ Bottom = "bottom",
684
+ Left = "left",
685
+ Right = "right",
686
+ TopBottom = "top-bottom",
687
+ LeftRight = "left-right",
688
+ Vertical = "vertical",
689
+ Horizontal = "horizontal",
690
+ All = "all"
691
+ }
692
+ type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
693
+ string,
694
+ number?
695
+ ] | [
696
+ ShadowDirection | string,
697
+ ShadowSize | string
698
+ ] | [
699
+ ShadowDirection | string,
700
+ string
701
+ ] | [
702
+ ShadowDirection | string,
703
+ string,
704
+ number?
705
+ ] | [
706
+ ShadowDirection | string,
707
+ ShadowSize | string,
708
+ string,
709
+ number?
710
+ ];
711
+ type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
712
+ declare abstract class FiboBuilder {
713
+ /** @internal Extra DOM props forwarded to the host element. */
714
+ protected _props: Record<string, any>;
715
+ protected _style: React$1.CSSProperties;
716
+ protected _cssStyles: React$1.CSSProperties;
717
+ protected _classNames: string[];
718
+ protected _children: React$1.ReactNode[];
719
+ /** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
720
+ protected _theme?: FiboTheme;
721
+ protected _state: Map<string, any>;
722
+ protected _providers: Map<string, any>;
723
+ protected _observers: Set<Observable<any>>;
724
+ protected _signals: Set<BindableSignal<any>>;
725
+ /** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
726
+ protected _ownsReads: boolean;
727
+ /** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
728
+ protected _replays: Array<() => void>;
729
+ protected _isObserver: boolean;
730
+ /** Normal-priority gestures (SwiftUI `.gesture`). Last = outermost. */
731
+ protected _gestures: GestureBuilder[];
732
+ /** SwiftUI `.simultaneousGesture` — bubble / no stopPropagation. */
733
+ protected _simultaneousGestures: GestureBuilder[];
734
+ /** SwiftUI `.highPriorityGesture` — wrapped last (outermost / capture wins). */
735
+ protected _highPriorityGestures: GestureBuilder[];
736
+ protected _offset?: OffsetSpec;
737
+ protected _clipped: boolean;
738
+ protected _clipShape?: ClipShapeName | string;
739
+ protected _contentShape?: ContentShapeName | string;
740
+ protected _fixedSize?: FixedSizeSpec;
741
+ protected _layoutPriority?: number;
742
+ protected _layers: LayerSpec[];
743
+ protected _onGeometryChange?: (rect: GeometryRect) => void;
744
+ protected _compositingGroup: boolean;
745
+ protected _viewMask?: string;
746
+ protected _containerRelativeFrame?: ContainerRelativeFrameSpec;
747
+ protected _alignmentGuide?: AlignmentGuideSpec;
748
+ protected _matchedGeometry?: MatchedGeometrySpec;
749
+ protected _preferences: PreferenceWriteSpec[];
750
+ protected _preferenceReaders: PreferenceReadSpec[];
751
+ protected _safeAreaInsets: SafeAreaInsetSpec[];
752
+ protected _navigationTitle?: string;
753
+ protected _animationConfig?: Partial<AnimationOptions>;
754
+ protected _animatedProps: Map<string, Signal<any>>;
755
+ protected _transforms: string[];
756
+ protected _transitionClass?: string;
757
+ /** True while transition class was auto-managed for hover/effect presets (expandable). */
758
+ protected _autoEffectTransition: boolean;
759
+ protected _effectTransitionProps: string[];
760
+ /**
761
+ * When true, getStyle() promotes background/border shorthands to longhands and
762
+ * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
763
+ */
764
+ protected _smoothSurface: boolean;
765
+ protected _smoothNeedsRestTransform: boolean;
766
+ protected _motionClass?: string;
767
+ protected _staggerMs?: number;
768
+ protected _reveal?: {
769
+ preset: string;
770
+ once?: boolean;
771
+ rootMargin?: string;
772
+ threshold?: number;
773
+ };
774
+ protected _scrollProgress: boolean;
775
+ protected _viewTransition?: string;
776
+ protected _reducedMotion: "reduce" | "never";
777
+ protected _usesCssMotion: boolean;
778
+ protected _explicitScrollMargin: boolean;
779
+ /** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
780
+ protected _hug: boolean;
781
+ /**
782
+ * SwiftUI `.frame(...)` wrappers (outer → inner order of application).
783
+ * Applied in `assembleBuilder` so every widget gets the same DX.
784
+ */
785
+ protected _frames: FrameSpec[];
786
+ /**
787
+ * Unset every CSS property on this component and what it renders inside.
788
+ * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
789
+ */
790
+ protected _resetStyle: boolean;
791
+ /** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
792
+ protected _boxLonghands: Set<string>;
793
+ resetStyle(): this;
794
+ protected isReset(): boolean;
795
+ hug(): this;
796
+ protected isHug(): boolean;
797
+ /**
798
+ * SwiftUI `View.frame` — invisible box around this view.
799
+ *
800
+ * ```ts
801
+ * Image(url).frame({ width: 300, height: 400 })
802
+ * Text('★★★★').frame({
803
+ * maxWidth: Size.infinity,
804
+ * maxHeight: Size.infinity,
805
+ * alignment: StackAlign.topTrailing,
806
+ * })
807
+ * ```
808
+ *
809
+ * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
810
+ */
811
+ frame(spec: FrameSpec): this;
812
+ /**
813
+ * SwiftUI `.offset(x:y:)` — visual translate; layout size stays.
814
+ * `.offset(8)` ≡ `{ x: 8, y: 8 }`; `.offset({ x: 4 })` only horizontal.
815
+ */
816
+ offset(value: number | OffsetSpec): this;
817
+ /** SwiftUI `.clipped()` — overflow hidden to bounds. */
818
+ clipped(): this;
819
+ /**
820
+ * SwiftUI `.clipShape` — `'circle' | 'rounded' | 'square'` or any CSS radius
821
+ * (`'8px'`, `'50%'`). Clips drawing; hit-testing still follows layout unless
822
+ * you also set {@link contentShape}.
823
+ */
824
+ clipShape(shape: ClipShapeName | string): this;
825
+ /**
826
+ * SwiftUI `.contentShape` — region used for hit-testing (tap / long-press).
827
+ * Default `'rectangle'` = full frame box, even over transparent pixels.
828
+ *
829
+ * ```ts
830
+ * ZStack()…frame({ width: 300, height: 400 })
831
+ * .clipShape('8px')
832
+ * .contentShape('rectangle')
833
+ * .onTapGesture(open)
834
+ * ```
835
+ */
836
+ contentShape(shape?: ContentShapeName | string): this;
837
+ /**
838
+ * SwiftUI `.fixedSize(horizontal:vertical:)` — hug content on those axes.
839
+ * Defaults both axes when called with no args.
840
+ */
841
+ fixedSize(spec?: FixedSizeSpec | boolean): this;
842
+ /**
843
+ * SwiftUI `.layoutPriority` — higher resists compression and claims free space.
844
+ * Web: flex-grow / flex-shrink (not a full multi-axis proposal solver).
845
+ */
846
+ layoutPriority(value: number): this;
847
+ /** SwiftUI `.compositingGroup()`. */
848
+ compositingGroup(): this;
849
+ /** SwiftUI `.mask` — shape name or CSS mask-image value. */
850
+ mask(shapeOrCss: ClipShapeName | "rectangle" | string): this;
851
+ /** SwiftUI `containerRelativeFrame`. */
852
+ containerRelativeFrame(axis?: ContainerRelativeFrameSpec["axis"] | ContainerRelativeFrameSpec, count?: number, span?: number): this;
853
+ /**
854
+ * SwiftUI `alignmentGuide` — named guide + absolute value or compute from size.
855
+ * ```ts
856
+ * Text('Hi').alignmentGuide('leading', (d) => d.width / 2)
857
+ * ```
858
+ */
859
+ alignmentGuide(guide: AlignmentGuideName, compute: number | ((dims: {
860
+ width: number;
861
+ height: number;
862
+ }) => number)): this;
863
+ /**
864
+ * SwiftUI `matchedGeometryEffect` — shared view-transition id + measured rect.
865
+ * ```ts
866
+ * Image(url).matchedGeometryEffect('hero', { namespace: 'gallery', isSource: true })
867
+ * ```
868
+ */
869
+ matchedGeometryEffect(id: string, namespaceOrOpts?: string | {
870
+ namespace?: string;
871
+ isSource?: boolean;
872
+ }): this;
873
+ /** SwiftUI `.preference(key:value:)` — contribute upward to `.onPreferenceChange`. */
874
+ preference<T>(key: PreferenceKeyDef<T>, value: T): this;
875
+ /** SwiftUI `.onPreferenceChange` — reduce descendant preferences. */
876
+ onPreferenceChange<T>(key: PreferenceKeyDef<T>, onChange: (value: T) => void): this;
877
+ /**
878
+ * SwiftUI `.safeAreaInset(edge:)` — reserve a bar on one edge; content fills the rest.
879
+ * Distinct from `SafeArea` (notch padding) and `proxy.safeAreaInsets` (read-only).
880
+ */
881
+ safeAreaInset(edge: SafeAreaInsetEdge, content: SafeAreaInsetSpec["content"], spacing?: number): this;
882
+ /**
883
+ * SwiftUI `.navigationTitle` — stores title for Scaffold (see `Scaffold.navigationTitle`).
884
+ * On non-Scaffold builders, sets `aria-label` / data attribute only (no extra chrome bar).
885
+ */
886
+ navigationTitle(title: string): this;
887
+ /**
888
+ * SwiftUI `.overlay(alignment:) { }` — layer above this view.
889
+ * ```ts
890
+ * Image(url).overlay(Text('NEW'), StackAlign.topTrailing)
891
+ * ```
892
+ */
893
+ overlay(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
894
+ /**
895
+ * SwiftUI `.background(alignment:) { }` — layer behind this view.
896
+ */
897
+ background(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
898
+ /** SwiftUI `onGeometryChange` — fires on mount + resize. */
899
+ onGeometryChange(handler: (rect: GeometryRect) => void): this;
900
+ id(value: string): this;
901
+ /**
902
+ * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
903
+ * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
904
+ */
905
+ anchor(value: string): this;
906
+ /**
907
+ * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
908
+ * that `.anchor()` applies).
909
+ */
910
+ scrollMargin(value: number | string): this;
911
+ /** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
912
+ addClassName(name: string): this;
913
+ /**
914
+ * React list key. After this is called, React reads the key as a string
915
+ * on both the builder element and the inner host wrapper.
916
+ * Builders are valid elements — you do not need `.build()`.
917
+ */
918
+ key(value: string | number): this;
919
+ private setBoxLonghand;
920
+ private setBoxShorthand;
921
+ paddingHorizontal(value: string | number): this;
922
+ paddingVertical(value: string | number): this;
923
+ /**
924
+ * SwiftUI `.padding`:
925
+ * - `.padding(8)` — all sides
926
+ * - `.padding(EdgeSet.horizontal, 12)` — Edge.Set + value
927
+ * - `.padding({ top: 8, leading: 12 })` — EdgeInsets
928
+ */
929
+ padding(value: string | number): this;
930
+ padding(edges: EdgeSet, value: string | number): this;
931
+ padding(insets: EdgeInsetsValue): this;
932
+ /** SwiftUI `.padding` with {@link EdgeSet} — alias clarity. */
933
+ /** @deprecated Prefer `.padding(EdgeSet, n)` — same implementation. */
934
+ paddingEdges(edges: EdgeSet, value: string | number): this;
935
+ marginHorizontal(value: string | number): this;
936
+ marginVertical(value: string | number): this;
937
+ margin(value: string | number): this;
938
+ /** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
939
+ protected layoutStyle(patch: React$1.CSSProperties): this;
940
+ /** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
941
+ private dropConflictingKeys;
942
+ private trackBoxLonghandsFrom;
943
+ flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
944
+ /** Flutter `textDirection`. */
945
+ textDirection(direction: "ltr" | "rtl"): this;
946
+ /** Flutter `textBaseline`. Both modes align on the flex baseline. */
947
+ textBaseline(baseline: "alphabetic" | "ideographic"): this;
948
+ /** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
949
+ clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
950
+ /**
951
+ * Flutter `mainAxisSize`. `min` hugs the current flex direction.
952
+ * `max` stretches along that same axis.
953
+ */
954
+ mainAxisSize(size: "min" | "max"): this;
955
+ zIndex(value: number): this;
956
+ alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
957
+ alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
958
+ flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
959
+ /**
960
+ * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
961
+ * names (`space-between` / `spaceBetween`).
962
+ */
963
+ justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
964
+ /** True when flexDirection is column / column-reverse (default is row). */
965
+ protected isVerticalFlex(): boolean;
966
+ /**
967
+ * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
968
+ * `between` packs the main axis and starts the cross axis.
969
+ */
970
+ align(alignment: AlignAxis): this;
971
+ /**
972
+ * Horizontal (screen X) alignment. Same meaning on Row and Column:
973
+ * left / center / right of the container — not “main axis”.
974
+ */
975
+ alignX(alignment: AlignAxis): this;
976
+ /**
977
+ * Vertical (screen Y) alignment. Same meaning on Row and Column:
978
+ * top / center / bottom of the container — not “cross axis”.
979
+ */
980
+ alignY(alignment: AlignAxis): this;
981
+ protected applyMainAlign(alignment: AlignAxis | string): this;
982
+ protected applyCrossAlign(alignment: AlignAxis | string): this;
983
+ flex(value?: number | string): this;
984
+ grid(): this;
985
+ inlineFlex(): this;
986
+ inlineGrid(): this;
987
+ block(): this;
988
+ inlineBlock(): this;
989
+ hidden(): this;
990
+ center(): this;
991
+ /** Center on the horizontal screen axis (uses `.alignX('center')`). */
992
+ centerX(): this;
993
+ /** Center on the vertical screen axis (uses `.alignY('center')`). */
994
+ centerY(): this;
995
+ spaceBetween(): this;
996
+ spaceAround(): this;
997
+ spaceEvenly(): this;
998
+ fill(): this;
999
+ fillWidth(): this;
1000
+ fillHeight(): this;
1001
+ square(size: number | string): this;
1002
+ circle(): this;
1003
+ opacity(value: number): this;
1004
+ p(value: number | string): this;
1005
+ px(value: number | string): this;
1006
+ py(value: number | string): this;
1007
+ paddingX(value: number | string): this;
1008
+ paddingY(value: number | string): this;
1009
+ m(value: number | string): this;
1010
+ mx(value: number | string): this;
1011
+ my(value: number | string): this;
1012
+ marginX(value: number | string): this;
1013
+ marginY(value: number | string): this;
1014
+ bg(color: string | Colors): this;
1015
+ text(color: string | Colors): this;
1016
+ color(value: string | Colors): this;
1017
+ private resolveSemanticColor;
1018
+ shadow(config?: ShadowConfig): this;
1019
+ /**
1020
+ * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
1021
+ * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
1022
+ * No `window.innerWidth` — hydrate-safe.
1023
+ */
1024
+ responsive(styles: ResponsiveStyles): this;
1025
+ /**
1026
+ * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
1027
+ *
1028
+ * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
1029
+ */
1030
+ media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
1031
+ private registerMediaStyles;
1032
+ sm(styles: React$1.CSSProperties): this;
1033
+ md(styles: React$1.CSSProperties): this;
1034
+ lg(styles: React$1.CSSProperties): this;
1035
+ xl(styles: React$1.CSSProperties): this;
1036
+ rounded(value: string | number): this;
1037
+ borderRadius(value: string | number): this;
1038
+ borderColor(value: string): this;
1039
+ /**
1040
+ * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
1041
+ * (the Scaffold body) cannot divide the viewport across these children.
1042
+ * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
1043
+ * opts back into sharing space.
1044
+ *
1045
+ * Percentages / `auto` do not lock `min-*` — `minWidth: 100%` on a flex
1046
+ * child fights clamping and lets long text blow past the ZStack box.
1047
+ */
1048
+ private lockAxis;
1049
+ width(value: string | number): this;
1050
+ paint(property: string, value: string): this;
1051
+ height(value: string | number): this;
1052
+ gap(value: string | number): this;
1053
+ clean(): this;
1054
+ borderInput(color?: string, focusColor?: string): this;
1055
+ weight(value: string | number): this;
1056
+ onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
1057
+ state<T>(key: string, initialValue: T): this;
1058
+ getState<T>(key: string): T | undefined;
1059
+ setState<T>(key: string, value: T): this;
1060
+ provide<T>(key: string, value: T): this;
1061
+ consume<T>(key: string): T | undefined;
1062
+ observer(options?: string | number | {
1063
+ key?: string | number;
1064
+ }): this;
1065
+ observe<T>(observable: Observable<T>): this;
1066
+ bindSignal<T>(signal: BindableSignal<T>): this;
1067
+ /**
1068
+ * @internal Wire a direct `method(signal.value)` to this node.
1069
+ * Does not claim reads that happen later in a children function.
1070
+ */
1071
+ adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
1072
+ /** @internal */
1073
+ runReplays(): void;
1074
+ translateX(value: Signal<number> | number): this;
1075
+ translateY(value: Signal<number> | number): this;
1076
+ scale(value: Signal<number> | number): this;
1077
+ /** SwiftUI `scaleEffect` — alias of {@link scale}. */
1078
+ scaleEffect(value: Signal<number> | number): this;
1079
+ rotate(degrees: Signal<number> | number): this;
1080
+ /** SwiftUI `rotationEffect` — alias of {@link rotate} (degrees). */
1081
+ rotationEffect(degrees: Signal<number> | number): this;
1082
+ /**
1083
+ * SwiftUI `.allowsHitTesting` — when `false`, this view and descendants
1084
+ * ignore pointer hits (`pointer-events: none`).
1085
+ */
1086
+ allowsHitTesting(value?: boolean): this;
1087
+ /**
1088
+ * SwiftUI scroll target id — used by {@link ScrollViewReader} `.scrollTo(id)`.
1089
+ * Sets `data-scroll-id` on the host.
1090
+ */
1091
+ scrollTarget(id: string): this;
1092
+ /**
1093
+ * SwiftUI: taps on *containers* (ZStack / Column / …) only hit drawn content
1094
+ * unless `.contentShape(Rectangle())` is set. We default that shape when the
1095
+ * first gesture is attached and the caller did not set one — same as the
1096
+ * usual SwiftUI fix, without forcing it on chrome-only views.
1097
+ */
1098
+ protected ensureGestureContentShape(): void;
1099
+ /**
1100
+ * SwiftUI `.gesture` — attach Tap / LongPress / Drag / Magnify / Rotate / …
1101
+ * Chainable: each call wraps the previous (outermost = last).
1102
+ */
1103
+ gesture(gesture: GestureBuilder): this;
1104
+ /** SwiftUI `.simultaneousGesture` — runs alongside other gestures (no steal). */
1105
+ simultaneousGesture(gesture: GestureBuilder): this;
1106
+ /** SwiftUI `.highPriorityGesture` — recognized before the view's own gestures. */
1107
+ highPriorityGesture(gesture: GestureBuilder): this;
1108
+ /**
1109
+ * Sugar for {@link TapGesture}`.onEnd(handler)`.
1110
+ * Note: `Button` / `List` / `ListTile` keep domain-specific `.onPress`.
1111
+ */
1112
+ onPress(handler: () => void): this;
1113
+ /** Flutter-style alias of {@link onPress}. */
1114
+ onTap(handler: () => void): this;
1115
+ /**
1116
+ * SwiftUI `onTapGesture(count:perform:)` — default count 1.
1117
+ * Pass a location callback for SpatialTap behavior.
1118
+ */
1119
+ onTapGesture(countOrHandler: number | ((location?: TapLocation) => void) | (() => void), handler?: ((location?: TapLocation) => void) | (() => void)): this;
1120
+ /**
1121
+ * SwiftUI `onLongPressGesture(minimumDuration:perform:onPressingChanged:)`.
1122
+ */
1123
+ onLongPressGesture(handlerOrOpts: (() => void) | {
1124
+ minimumDuration?: number;
1125
+ maximumDistance?: number;
1126
+ perform: () => void;
1127
+ onPressingChanged?: (pressing: boolean) => void;
1128
+ }, onPressingChanged?: (pressing: boolean) => void): this;
1129
+ animation(config: Partial<AnimationOptions>): this;
1130
+ protected hasStateManagement(): boolean;
1131
+ className(className: string): this;
1132
+ classNames(classNames: string[]): this;
1133
+ css(styles: React$1.CSSProperties): this;
1134
+ style(style: React$1.CSSProperties): this;
1135
+ props(props: Record<string, any>): this;
1136
+ protected _transitionDuration: number;
1137
+ protected _transitionEasing: string;
1138
+ protected _transitionDelay: number;
1139
+ protected _transitionProperties: string[];
1140
+ /**
1141
+ * Apply CSS transition
1142
+ *
1143
+ * Overload 1: String syntax
1144
+ * Example: .transition('all 0.2s ease-in-out')
1145
+ *
1146
+ * Overload 2: Shorthand with parameters
1147
+ * Example: .transition('all', 200, 'ease-out')
1148
+ * Example: .transition('all', 200, 'ease-out', 50)
1149
+ */
1150
+ transition(value: string): this;
1151
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
1152
+ /**
1153
+ * Set transition duration in milliseconds
1154
+ * Example: .duration(200) → 200ms
1155
+ */
1156
+ duration(ms: number): this;
1157
+ /**
1158
+ * Set transition easing function
1159
+ * Example: .easing('ease-in-out')
1160
+ */
1161
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
1162
+ /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
1163
+ ease(value: string): this;
1164
+ /**
1165
+ * Set transition delay in milliseconds
1166
+ * Example: .delay(100) → 100ms delay
1167
+ */
1168
+ delay(ms: number): this;
1169
+ /**
1170
+ * Set which properties to transition
1171
+ * Example: .properties(['color', 'transform'])
1172
+ */
1173
+ properties(props: string[]): this;
1174
+ /**
1175
+ * Apply the built transition to the element
1176
+ */
1177
+ protected _applyTransition(): void;
1178
+ private replaceTransitionClass;
1179
+ /**
1180
+ * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
1181
+ * @example Box().animate('fadeIn').duration(300).ease('spring')
1182
+ */
1183
+ animate(preset: MotionPreset | string, options?: {
1184
+ duration?: number;
1185
+ ease?: string;
1186
+ delay?: number;
1187
+ from?: number | string;
1188
+ stiffness?: number;
1189
+ damping?: number;
1190
+ mass?: number;
1191
+ }): this;
1192
+ animate(custom: CustomMotion): this;
1193
+ /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
1194
+ spring(options?: SpringOptions): this;
1195
+ reducedMotion(mode?: "reduce" | "never"): this;
1196
+ press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
1197
+ /**
1198
+ * Shortcut: `.hover(h => h.effect(name))`.
1199
+ * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
1200
+ */
1201
+ hoverEffect(name: string): this;
1202
+ /**
1203
+ * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
1204
+ */
1205
+ pressEffect(name: string): this;
1206
+ /**
1207
+ * Shortcut: `.focus(f => f.effect(name))`.
1208
+ */
1209
+ focusEffect(name: string): this;
1210
+ /**
1211
+ * Shortcut: `.active(a => a.effect(name))`.
1212
+ */
1213
+ activeEffect(name: string): this;
1214
+ /**
1215
+ * Shortcut: `.groupHover(h => h.effect(name))`.
1216
+ */
1217
+ groupHoverEffect(name: string): this;
1218
+ focusVisible(): PseudoStateBuilder;
1219
+ focusVisible(callback: PseudoStateFn): this;
1220
+ stagger(ms: number): this;
1221
+ /** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
1222
+ reveal(preset?: string | {
1223
+ preset?: string;
1224
+ once?: boolean;
1225
+ rootMargin?: string;
1226
+ threshold?: number;
1227
+ }, options?: {
1228
+ once?: boolean;
1229
+ rootMargin?: string;
1230
+ threshold?: number;
1231
+ }): this;
1232
+ /** Alias of `.reveal()` for scroll-triggered presets. */
1233
+ onScroll(preset?: string): this;
1234
+ /** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
1235
+ scrollTimeline(kind?: "view" | "scroll"): this;
1236
+ scrollProgress(): this;
1237
+ smoothScroll(): this;
1238
+ scrollSnap(axis?: "x" | "y" | "both"): this;
1239
+ scrollSnapAlign(align?: "start" | "center" | "end"): this;
1240
+ sticky(top?: number | string | boolean): this;
1241
+ /**
1242
+ * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
1243
+ * clear this bar. Header uses the real bar height.
1244
+ */
1245
+ protected publishStickyOffset(value: number | string): void;
1246
+ viewTransition(name: string): this;
1247
+ /** Default `:focus-visible` ring. Pass a callback to customize. */
1248
+ focusRing(color?: string): this;
1249
+ protected ensureInteractiveTransition(): void;
1250
+ /**
1251
+ * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
1252
+ * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
1253
+ * @internal
1254
+ */
1255
+ prepareSmoothInteraction(properties: string[]): void;
1256
+ /** @internal Convert inline background/border shorthands → longhands. */
1257
+ promoteSurfaceLonghands(): void;
1258
+ /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
1259
+ ensureRestTransform(): void;
1260
+ /**
1261
+ * Ensure the base element transitions the properties an interaction effect needs.
1262
+ * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
1263
+ * explicitly or a motion animation class is present.
1264
+ * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
1265
+ */
1266
+ ensureEffectTransition(properties: string[]): void;
1267
+ /**
1268
+ * Apply a theme to this node and descendants (CSS vars inherit).
1269
+ * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
1270
+ * SSR-safe: class + inline vars on first paint (no useEffect).
1271
+ */
1272
+ theme(input: ThemeInput): this;
1273
+ /** Prefer dark/light system chrome for native controls under this subtree. */
1274
+ colorScheme(scheme: "light" | "dark" | "light dark"): this;
1275
+ hover(): PseudoStateBuilder;
1276
+ hover(callback: PseudoStateFn): this;
1277
+ /**
1278
+ * Paint for a `When` state. Hover / focus / active / visited / disabled
1279
+ * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
1280
+ *
1281
+ * ```ts
1282
+ * Row().when(When.hover, (s) => s.bg('#c8ff00'))
1283
+ * ```
1284
+ */
1285
+ when(state: When, style: WhenStyle): this;
1286
+ focus(): PseudoStateBuilder;
1287
+ focus(callback: PseudoStateFn): this;
1288
+ active(): PseudoStateBuilder;
1289
+ active(callback: PseudoStateFn): this;
1290
+ visited(): PseudoStateBuilder;
1291
+ visited(callback: PseudoStateFn): this;
1292
+ disabledState(): PseudoStateBuilder;
1293
+ disabledState(callback: PseudoStateFn): this;
1294
+ focusWithin(): PseudoStateBuilder;
1295
+ focusWithin(callback: PseudoStateFn): this;
1296
+ firstChild(): PseudoStateBuilder;
1297
+ firstChild(callback: PseudoStateFn): this;
1298
+ lastChild(): PseudoStateBuilder;
1299
+ lastChild(callback: PseudoStateFn): this;
1300
+ groupHover(): PseudoStateBuilder;
1301
+ groupHover(callback: PseudoStateFn): this;
1302
+ groupFocus(): PseudoStateBuilder;
1303
+ groupFocus(callback: PseudoStateFn): this;
1304
+ groupActive(): PseudoStateBuilder;
1305
+ groupActive(callback: PseudoStateFn): this;
1306
+ groupFocusWithin(): PseudoStateBuilder;
1307
+ groupFocusWithin(callback: PseudoStateFn): this;
1308
+ group(): this;
1309
+ protected _childFunction?: () => FiboChild | FiboChild[];
1310
+ children(children: FiboChildren): this;
1311
+ protected getClassName(): string;
1312
+ protected getStyle(): React$1.CSSProperties;
1313
+ protected processChildren(): React$1.ReactNode[];
1314
+ protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
1315
+ /**
1316
+ * @deprecated Builders are React elements. Returning or nesting the builder is enough.
1317
+ * `.build()` still assembles the host tree for older call sites.
1318
+ */
1319
+ abstract build(): React$1.ReactElement;
1320
+ }
1321
+ type KnownKeys<T> = {
1322
+ [K in keyof T]: string extends K ? never : number extends K ? never : K;
1323
+ } extends {
1324
+ [_ in keyof T]: infer U;
1325
+ } ? U : never;
1326
+ type StyleBuilder<T> = T & LogicalAxes & {
1327
+ [K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
1328
+ } & React$1.ReactElement;
1329
+ declare class CenterBuilder extends FiboBuilder {
1330
+ children(children: FiboChildren): this;
1331
+ props(value: Record<string, any>): this;
1332
+ build(): React$1.ReactElement;
1333
+ }
1334
+ export declare const Center: () => StyleBuilder<CenterBuilder>;
1335
+ declare class ColumnBuilder extends FiboBuilder {
1336
+ private _mainAxisAlignment;
1337
+ private _crossAxisAlignment;
1338
+ private _spacing?;
1339
+ private _size?;
1340
+ children(children: FiboChildren): this;
1341
+ props(value: Record<string, any>): this;
1342
+ mainAxisAlignment(alignment: MainAxisAlignment): this;
1343
+ crossAxisAlignment(alignment: CrossAxisAlignment): this;
1344
+ /** Horizontal screen axis → cross axis on a Column. */
1345
+ alignX(alignment: AlignAxis): this;
1346
+ /** Vertical screen axis → main axis on a Column. */
1347
+ alignY(alignment: AlignAxis): this;
1348
+ spacing(value: string | number): this;
1349
+ size(size: "small" | "medium" | "large"): this;
1350
+ build(): React$1.ReactElement;
1351
+ }
1352
+ export declare const Column: () => StyleBuilder<ColumnBuilder>;
1353
+ declare class ContainerBuilder extends FiboBuilder {
1354
+ private _userPad;
1355
+ children(children: FiboChildren): this;
1356
+ props(value: Record<string, any>): this;
1357
+ padding(value: string | number): this;
1358
+ padding(edges: EdgeSet, value: string | number): this;
1359
+ padding(insets: EdgeInsetsValue): this;
1360
+ paddingHorizontal(value: string | number): this;
1361
+ paddingVertical(value: string | number): this;
1362
+ paddingLeft(value: string | number): this;
1363
+ paddingRight(value: string | number): this;
1364
+ paddingTop(value: string | number): this;
1365
+ paddingBottom(value: string | number): this;
1366
+ build(): React$1.ReactElement;
1367
+ }
1368
+ export declare const Container: () => StyleBuilder<ContainerBuilder>;
1369
+ declare class RowBuilder extends FiboBuilder {
1370
+ private _mainAxisAlignment;
1371
+ private _crossAxisAlignment;
1372
+ children(children: FiboChildren): this;
1373
+ props(value: Record<string, any>): this;
1374
+ mainAxisAlignment(alignment: MainAxisAlignment): this;
1375
+ crossAxisAlignment(alignment: CrossAxisAlignment): this;
1376
+ /** Horizontal screen axis → main axis on a Row. */
1377
+ alignX(alignment: AlignAxis): this;
1378
+ /** Vertical screen axis → cross axis on a Row. */
1379
+ alignY(alignment: AlignAxis): this;
1380
+ spacing(value: string | number): this;
1381
+ items(children: React$1.ReactElement[]): this;
1382
+ build(): React$1.ReactElement;
1383
+ }
1384
+ export declare const Row: () => StyleBuilder<RowBuilder>;
1385
+ declare class SpacerBuilder extends FiboBuilder {
1386
+ private _height?;
1387
+ private _width?;
1388
+ private _grow?;
1389
+ private _expand?;
1390
+ height(value: string | number): this;
1391
+ width(value: string | number): this;
1392
+ vertical(): this;
1393
+ horizontal(): this;
1394
+ /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
1395
+ flex(value?: number | string): this;
1396
+ build(): React$1.ReactElement;
1397
+ }
1398
+ export declare const Spacer: () => StyleBuilder<SpacerBuilder>;
1399
+ declare class HeaderBuilder extends FiboBuilder {
1400
+ private _height;
1401
+ private _sticky;
1402
+ private _stickyTop;
1403
+ private _stickyStamp;
1404
+ private _leading?;
1405
+ private _trailing?;
1406
+ private _title?;
1407
+ private static unstickSeq;
1408
+ children(children: FiboChildren): this;
1409
+ props(value: Record<string, any>): this;
1410
+ leading(node: FiboChild): this;
1411
+ trailing(node: FiboChild): this;
1412
+ title(value: string | FiboChild): this;
1413
+ height(height: number | string): this;
1414
+ sticky(enable?: boolean | number | string): this;
1415
+ private dropStickyStamp;
1416
+ private syncStickyOffset;
1417
+ build(): React$1.ReactElement;
1418
+ }
1419
+ export declare const Header: () => StyleBuilder<HeaderBuilder>;
1420
+ type FabAt = "start" | "center" | "end" | "startTop" | "centerTop" | "endTop" | "startDock" | "centerDock" | "endDock";
1421
+ interface LayoutBarConfig {
1422
+ fixed?: boolean;
1423
+ children: FiboChildren;
1424
+ }
1425
+ interface ScaffoldStructure {
1426
+ header?: {
1427
+ position?: "static" | "sticky" | "fixed";
1428
+ height?: string | number;
1429
+ visible?: boolean;
1430
+ };
1431
+ footer?: {
1432
+ position?: "static" | "sticky" | "fixed";
1433
+ height?: string | number;
1434
+ visible?: boolean;
1435
+ };
1436
+ sidebarLeft?: {
1437
+ behavior?: "fixed" | "scroll";
1438
+ mode?: "side" | "over";
1439
+ width?: string | number;
1440
+ visible?: boolean;
1441
+ fullHeight?: boolean;
1442
+ };
1443
+ sidebarRight?: {
1444
+ behavior?: "fixed" | "scroll";
1445
+ mode?: "side" | "over";
1446
+ width?: string | number;
1447
+ visible?: boolean;
1448
+ fullHeight?: boolean;
1449
+ };
1450
+ }
1451
+ declare class ScaffoldBuilder extends FiboBuilder {
1452
+ private _locale?;
1453
+ private _customProviders;
1454
+ private _structure;
1455
+ private _headerBar?;
1456
+ private _footerBar?;
1457
+ private _sideBarLeft?;
1458
+ private _sideBarRight?;
1459
+ private _drawer?;
1460
+ private _endDrawer?;
1461
+ private _drawerWidth;
1462
+ private _fab?;
1463
+ private _fabAt;
1464
+ private _bottomSheet?;
1465
+ private _footerButtons?;
1466
+ private _extendBody;
1467
+ private _extendBehindHeader;
1468
+ private _avoidKeyboard;
1469
+ private _onDrawer?;
1470
+ children(children: FiboChildren): this;
1471
+ props(value: Record<string, any>): this;
1472
+ locale(locale: string): this;
1473
+ providers(providers: Record<string, any>): this;
1474
+ provider(key: string, value: any): this;
1475
+ structure(config: ScaffoldStructure): this;
1476
+ headerBar(config: FiboChild | LayoutBarConfig): this;
1477
+ /** Flutter `Scaffold.appBar`. Same slot as `.headerBar()`. */
1478
+ appBar(config: FiboChild | LayoutBarConfig): this;
1479
+ /**
1480
+ * SwiftUI `.navigationTitle` — fills the header bar via existing `Header` chrome.
1481
+ * Does **not** add a sixth title component; if `.headerBar()` / `.appBar()` is already
1482
+ * set, this is a no-op (explicit chrome wins).
1483
+ */
1484
+ navigationTitle(title: string | FiboChild): this;
1485
+ footerBar(config: FiboChild | LayoutBarConfig): this;
1486
+ sideBarLeft(config: FiboChild | LayoutBarConfig): this;
1487
+ sideBarRight(config: FiboChild | LayoutBarConfig): this;
1488
+ /** Flutter drawer. Starts closed. Open it with `useScaffold().openDrawer()`. */
1489
+ drawer(child: FiboChild): this;
1490
+ /** Flutter endDrawer. */
1491
+ endDrawer(child: FiboChild): this;
1492
+ drawerWidth(px: number): this;
1493
+ /** Flutter floatingActionButton. */
1494
+ fab(child: FiboChild): this;
1495
+ /** Where the button sits. Dock locations overlap the footer. */
1496
+ fabAt(location: FabAt): this;
1497
+ /** Flutter bottomSheet. Hidden until `useScaffold().showSheet()`. */
1498
+ bottomSheet(child: FiboChild): this;
1499
+ /** Flutter persistentFooterButtons. */
1500
+ footerButtons(children: FiboChildren): this;
1501
+ /** Body draws under the footer. */
1502
+ extendBody(on?: boolean): this;
1503
+ /** Body draws under the header. */
1504
+ extendBehindHeader(on?: boolean): this;
1505
+ /** Lift the page above the keyboard. On by default. */
1506
+ avoidKeyboard(on?: boolean): this;
1507
+ onDrawer(handler: (side: "start" | "end", open: boolean) => void): this;
1508
+ private _bindBar;
1509
+ private _normalizeBar;
1510
+ private _isLayoutBarConfig;
1511
+ build(): React$1.ReactElement;
1512
+ }
1513
+ export declare const Scaffold: () => StyleBuilder<ScaffoldBuilder>;
1514
+ declare class BoxBuilder extends FiboBuilder {
1515
+ children(children: FiboChildren): this;
1516
+ props(value: Record<string, any>): this;
1517
+ build(): React$1.ReactElement;
1518
+ }
1519
+ export declare const Box: () => StyleBuilder<BoxBuilder>;
1520
+ declare class CardBuilder extends FiboBuilder {
1521
+ private _text;
1522
+ private _subtitle?;
1523
+ private _number?;
1524
+ private _color?;
1525
+ private _header?;
1526
+ private _footer?;
1527
+ private _as?;
1528
+ text(value: string): this;
1529
+ /** Alias of `.text()` — same slot as Banner/ListTile/Alert `.title()`. */
1530
+ title(value: string): this;
1531
+ subtitle(value: string): this;
1532
+ number(value: string): this;
1533
+ children(children: FiboChildren): this;
1534
+ header(node: FiboChild): this;
1535
+ footer(node: FiboChild): this;
1536
+ as(tag: keyof HTMLElementTagNameMap | string): this;
1537
+ props(value: Record<string, any>): this;
1538
+ color(value: string): this;
1539
+ build(): React$1.ReactElement;
1540
+ }
1541
+ export declare const Card: () => StyleBuilder<CardBuilder>;
1542
+ type GridVariant = "standard" | "masonry" | "bento";
1543
+ type GridGap = "none" | "sm" | "md" | "lg" | "xl" | number;
1544
+ type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
1545
+ type GridAutoFlow = "row" | "column" | "dense";
1546
+ interface ResponsiveCols {
1547
+ sm?: GridCols;
1548
+ md?: GridCols;
1549
+ lg?: GridCols;
1550
+ xl?: GridCols;
1551
+ }
1552
+ declare class GridBuilder extends FiboBuilder {
1553
+ private _variant;
1554
+ private _columns;
1555
+ private _gap;
1556
+ private _rowGap?;
1557
+ private _columnGap?;
1558
+ private _rows?;
1559
+ private _templateColumns?;
1560
+ private _templateRows?;
1561
+ private _autoFlow?;
1562
+ variant(v: GridVariant): this;
1563
+ columns(cols: GridCols | ResponsiveCols): this;
1564
+ rows(count: number): this;
1565
+ gap(g: GridGap): this;
1566
+ rowGap(g: GridGap | string | number): this;
1567
+ columnGap(g: GridGap | string | number): this;
1568
+ templateColumns(template: string): this;
1569
+ /** CSS name — same as `.templateColumns()`, wins over numeric `.columns()`. */
1570
+ gridTemplateColumns(template: string): this;
1571
+ templateRows(template: string): this;
1572
+ autoFlow(flow: GridAutoFlow): this;
1573
+ build(): React$1.ReactElement;
1574
+ }
1575
+ declare class GridItemBuilder extends FiboBuilder {
1576
+ private _colSpan?;
1577
+ private _rowSpan?;
1578
+ private _colStart?;
1579
+ private _colEnd?;
1580
+ private _rowStart?;
1581
+ private _rowEnd?;
1582
+ colSpan(span: number): this;
1583
+ rowSpan(span: number): this;
1584
+ colStart(start: number): this;
1585
+ colEnd(end: number): this;
1586
+ rowStart(start: number): this;
1587
+ rowEnd(end: number): this;
1588
+ build(): React$1.ReactElement;
1589
+ }
1590
+ export declare const Grid: () => StyleBuilder<GridBuilder>;
1591
+ export declare const GridItem: () => StyleBuilder<GridItemBuilder>;
1592
+ type TextTruncation = "clip" | "ellipsis" | "head" | "middle" | "tail";
1593
+ type TextCase = "uppercase" | "lowercase" | "capitalize" | "none";
1594
+ declare class TextBuilder extends FiboBuilder {
1595
+ private _text;
1596
+ private _live;
1597
+ private _nodes?;
1598
+ private _type;
1599
+ private _lineLimit?;
1600
+ private _truncation?;
1601
+ private _italic;
1602
+ private _redacted;
1603
+ private _bold;
1604
+ private _underline;
1605
+ private _strike;
1606
+ private _textCase?;
1607
+ constructor(text?: string | (() => string));
1608
+ private setMarkedString;
1609
+ private setLiteralString;
1610
+ text(value: string | (() => string) | unknown): this;
1611
+ /**
1612
+ * Dual `.type()`: typography (`h1`…`label`) sets the host tag + `fibo-text-*`.
1613
+ * CSS display (`block` / `flex` / …) sets `display` and leaves the tag alone.
1614
+ */
1615
+ type(type: TextType | string): this;
1616
+ variant(variant: TextType): this;
1617
+ children(children: FiboChildren): this;
1618
+ props(value: Record<string, any>): this;
1619
+ nowrap(): this;
1620
+ mono(): this;
1621
+ muted(): this;
1622
+ /**
1623
+ * Subscribe an extra signal (or override text with `format`).
1624
+ * `$length` / `interp()` already auto-bind their own signals.
1625
+ *
1626
+ * ```ts
1627
+ * Text(`Total: ${todos.$length}`).bindSignal(filter) // also rebuild when filter changes
1628
+ * Text().bindSignal(todos, (list) => `Total: ${list.length}`)
1629
+ * ```
1630
+ */
1631
+ bindSignal<T>(signal: BindableSignal<T>, format?: (value: T) => string): this;
1632
+ /** Clamp to `n` lines (`-webkit-box` + `WebkitLineClamp`). */
1633
+ lineLimit(n: number): this;
1634
+ truncation(mode: TextTruncation): this;
1635
+ italic(): this;
1636
+ bold(): this;
1637
+ underline(): this;
1638
+ strikethrough(): this;
1639
+ /** SwiftUI `redacted`. Hides the glyphs and paints a placeholder bar. */
1640
+ redacted(): this;
1641
+ textCase(mode: TextCase): this;
1642
+ /** Decorations stored by the methods above, applied onto the text style at build. */
1643
+ private textChrome;
1644
+ build(): React$1.ReactElement;
1645
+ }
1646
+ declare const Text$1: (text?: string | (() => string) | undefined) => StyleBuilder<TextBuilder>;
1647
+ type ExtendedButtonVariant = ButtonVariant | "ghost" | "soft" | "outline" | "text" | "raw" | "solid";
1648
+ type ButtonSize = "xs" | "sm" | "md" | "lg";
1649
+ type ButtonShape = "default" | "pill" | "square" | "rect" | "rounded" | "sharp";
1650
+ type ButtonTone = "default" | "inverse";
1651
+ type ButtonMotion = "default" | "none";
1652
+ declare class ButtonBuilder extends FiboBuilder {
1653
+ private _text;
1654
+ private _live;
1655
+ private _variant;
1656
+ private _size;
1657
+ private _onPress?;
1658
+ private _onHover?;
1659
+ private _disabled;
1660
+ private _icon?;
1661
+ private _shape;
1662
+ private _shadow;
1663
+ private _tone;
1664
+ private _motion;
1665
+ private _expand;
1666
+ private _htmlType;
1667
+ private _htmlTypeExplicit;
1668
+ constructor(text?: string | (() => string));
1669
+ text(value: string | (() => string)): this;
1670
+ children(children: FiboChildren): this;
1671
+ variant(variant: ExtendedButtonVariant): this;
1672
+ clean(): this;
1673
+ size(size: ButtonSize): this;
1674
+ onPress(handler: () => void): this;
1675
+ onHover(handler: () => void): this;
1676
+ disabled(value?: boolean): this;
1677
+ icon(icon: React$1.ReactNode): this;
1678
+ shape(value: ButtonShape): this;
1679
+ shadow(value: "none" | "soft"): this;
1680
+ tone(value: ButtonTone): this;
1681
+ motion(value: ButtonMotion): this;
1682
+ expand(value?: boolean): this;
1683
+ /**
1684
+ * HTML button type. `.type('submit')` is what people write inside a Form.
1685
+ * React still reads `element.type` as the component: a string sets this,
1686
+ * a props object renders the button.
1687
+ */
1688
+ type(value: "button" | "submit" | "reset"): this;
1689
+ htmlType(value: "button" | "submit" | "reset"): this;
1690
+ /** Shortcut for `.htmlType('submit')` inside a `Form`. */
1691
+ submit(): this;
1692
+ /** Shortcut for `.htmlType('reset')`. */
1693
+ reset(): this;
1694
+ private resolvedHtmlType;
1695
+ build(): React$1.ReactElement;
1696
+ }
1697
+ export declare const Button: (text?: string | (() => string) | undefined) => StyleBuilder<ButtonBuilder>;
1698
+ type PresenceShow = boolean | BindableSignal<boolean>;
1699
+ interface PresenceProps {
1700
+ show: PresenceShow;
1701
+ enter?: MotionPreset | string;
1702
+ exit?: MotionPreset | string;
1703
+ duration?: number;
1704
+ reducedMotion?: "reduce" | "never";
1705
+ children?: React$1.ReactNode;
1706
+ }
1707
+ declare class PresenceBuilder extends FiboBuilder {
1708
+ private _show;
1709
+ private _enter;
1710
+ private _exit;
1711
+ constructor(show?: PresenceShow);
1712
+ show(value: PresenceShow): this;
1713
+ enter(preset: MotionPreset | string): this;
1714
+ exit(preset: MotionPreset | string): this;
1715
+ duration(ms: number): this;
1716
+ build(): React$1.ReactElement;
1717
+ }
1718
+ declare const presenceBuilder: (show?: PresenceShow | undefined) => StyleBuilder<PresenceBuilder>;
1719
+ export declare function Presence(show?: PresenceShow): ReturnType<typeof presenceBuilder>;
1720
+ export declare function Presence(props: PresenceProps): React$1.ReactElement;
1721
+ export declare namespace Presence {
1722
+ var displayName: string;
1723
+ }
1724
+
1725
+ export {
1726
+ Text$1 as Text,
1727
+ };
1728
+
1729
+ export {};