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