fiboui 2.8.4 → 2.8.5

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,1369 @@
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
+ declare abstract class GestureBuilder {
135
+ abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
136
+ }
137
+ interface AnimationOptions {
138
+ duration?: number;
139
+ curve?: "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring" | string;
140
+ damping?: number;
141
+ stiffness?: number;
142
+ velocity?: number;
143
+ mass?: number;
144
+ onComplete?: () => void;
145
+ }
146
+ interface Signal<T> {
147
+ spring(target: T, options?: Partial<AnimationOptions>): void;
148
+ animate(target: T, options?: Partial<AnimationOptions>): void;
149
+ snapTo(target: T, options?: Partial<AnimationOptions>): void;
150
+ }
151
+ declare const INTERACTION_EFFECTS: readonly [
152
+ "grow",
153
+ "shrink",
154
+ "pulse",
155
+ "pulseGrow",
156
+ "pulseShrink",
157
+ "push",
158
+ "pop",
159
+ "bounceIn",
160
+ "bounceOut",
161
+ "rotate",
162
+ "growRotate",
163
+ "float",
164
+ "sink",
165
+ "bob",
166
+ "hang",
167
+ "skew",
168
+ "skewForward",
169
+ "skewBackward",
170
+ "wobbleHorizontal",
171
+ "wobbleVertical",
172
+ "wobbleToBottomRight",
173
+ "wobbleToTopRight",
174
+ "wobbleTop",
175
+ "wobbleBottom",
176
+ "wobbleSkew",
177
+ "buzz",
178
+ "buzzOut",
179
+ "forward",
180
+ "backward",
181
+ "nudge",
182
+ "fade",
183
+ "backPulse",
184
+ "sweepToRight",
185
+ "sweepToLeft",
186
+ "sweepToBottom",
187
+ "sweepToTop",
188
+ "bounceToRight",
189
+ "bounceToLeft",
190
+ "bounceToBottom",
191
+ "bounceToTop",
192
+ "radialOut",
193
+ "radialIn",
194
+ "rectangleIn",
195
+ "rectangleOut",
196
+ "shutterInHorizontal",
197
+ "shutterOutHorizontal",
198
+ "shutterInVertical",
199
+ "shutterOutVertical",
200
+ "iconBack",
201
+ "iconForward",
202
+ "iconDown",
203
+ "iconUp",
204
+ "iconSpin",
205
+ "iconDrop",
206
+ "iconFade",
207
+ "iconFloatAway",
208
+ "iconSinkAway",
209
+ "iconGrow",
210
+ "iconShrink",
211
+ "iconPulse",
212
+ "iconPulseGrow",
213
+ "iconPulseShrink",
214
+ "iconPush",
215
+ "iconPop",
216
+ "iconBounce",
217
+ "iconRotate",
218
+ "iconGrowRotate",
219
+ "iconFloat",
220
+ "iconSink",
221
+ "iconBob",
222
+ "iconHang",
223
+ "iconWobbleHorizontal",
224
+ "iconWobbleVertical",
225
+ "iconBuzz",
226
+ "iconBuzzOut",
227
+ "borderFade",
228
+ "hollow",
229
+ "trim",
230
+ "rippleOut",
231
+ "rippleIn",
232
+ "outlineOut",
233
+ "outlineIn",
234
+ "roundCorners",
235
+ "underlineFromLeft",
236
+ "underlineFromCenter",
237
+ "underlineFromRight",
238
+ "reveal",
239
+ "underlineReveal",
240
+ "overlineFromLeft",
241
+ "overlineFromCenter",
242
+ "overlineFromRight",
243
+ "overlineReveal",
244
+ "shadowGrow",
245
+ "shadowFloat",
246
+ "shadowGlow",
247
+ "shadowRadial",
248
+ "boxShadowOutset",
249
+ "boxShadowInset",
250
+ "lift",
251
+ "glow",
252
+ "bubbleTop",
253
+ "bubbleRight",
254
+ "bubbleBottom",
255
+ "bubbleLeft",
256
+ "bubbleFloatTop",
257
+ "bubbleFloatRight",
258
+ "bubbleFloatBottom",
259
+ "bubbleFloatLeft",
260
+ "curlTopLeft",
261
+ "curlTopRight",
262
+ "curlBottomRight",
263
+ "curlBottomLeft"
264
+ ];
265
+ type InteractionEffectName = (typeof INTERACTION_EFFECTS)[number];
266
+ interface LogicalAxes {
267
+ paddingHorizontal(value: string | number): this;
268
+ paddingVertical(value: string | number): this;
269
+ paddingX(value: string | number): this;
270
+ paddingY(value: string | number): this;
271
+ px(value: string | number): this;
272
+ py(value: string | number): this;
273
+ marginHorizontal(value: string | number): this;
274
+ marginVertical(value: string | number): this;
275
+ marginX(value: string | number): this;
276
+ marginY(value: string | number): this;
277
+ mx(value: string | number): this;
278
+ my(value: string | number): this;
279
+ borderHorizontal(value: string | number): this;
280
+ borderVertical(value: string | number): this;
281
+ borderX(value: string | number): this;
282
+ borderY(value: string | number): this;
283
+ borderWidthHorizontal(value: string | number): this;
284
+ borderWidthVertical(value: string | number): this;
285
+ borderColorHorizontal(value: string | number): this;
286
+ borderColorVertical(value: string | number): this;
287
+ roundedTop(value: string | number): this;
288
+ roundedBottom(value: string | number): this;
289
+ roundedLeft(value: string | number): this;
290
+ roundedRight(value: string | number): this;
291
+ insetHorizontal(value: string | number): this;
292
+ insetVertical(value: string | number): this;
293
+ insetX(value: string | number): this;
294
+ insetY(value: string | number): this;
295
+ gapX(value: string | number): this;
296
+ gapY(value: string | number): this;
297
+ }
298
+ interface PseudoStateBuilder extends LogicalAxes {
299
+ boxShadow(value: string | number): this;
300
+ }
301
+ declare class PseudoStateBuilder {
302
+ private pseudoState;
303
+ private parentBuilder;
304
+ private isGroup;
305
+ private transitionDuration;
306
+ private transitionEasing;
307
+ private transitionDelay;
308
+ private transitionProperties;
309
+ private transforms;
310
+ private _boxLonghands;
311
+ constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
312
+ /**
313
+ * Apply a named interaction effect (full Hover.css–inspired catalog).
314
+ * Works on any pseudo trigger — hover, press/active, focus, groupHover, etc.
315
+ * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
316
+ */
317
+ effect(name: InteractionEffectName | string): this;
318
+ bg(color: string): this;
319
+ /** Same longhand as `.bg()` — interpolates against the resting surface. */
320
+ backgroundColor(value: string): this;
321
+ color(value: string): this;
322
+ text(color: string): this;
323
+ opacity(value: number): this;
324
+ borderColor(value: string): this;
325
+ transform(value: string): this;
326
+ scale(value: number): this;
327
+ translateX(value: number | string): this;
328
+ translateY(value: number | string): this;
329
+ rotate(degrees: number): this;
330
+ shadow(value: string | number): this;
331
+ css(property: string, value: string | number): this;
332
+ padding(value: string | number): this;
333
+ p(value: string | number): this;
334
+ margin(value: string | number): this;
335
+ transition(value: string): this;
336
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
337
+ duration(ms: number): this;
338
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
339
+ ease(value: string): this;
340
+ delay(ms: number): this;
341
+ properties(props: string[]): this;
342
+ private applyTransition;
343
+ private flushTransform;
344
+ private set;
345
+ private commit;
346
+ end(): FiboBuilder;
347
+ }
348
+ declare const When: {
349
+ readonly hover: "hover";
350
+ readonly focus: "focus";
351
+ readonly active: "active";
352
+ readonly visited: "visited";
353
+ readonly disabled: "disabled";
354
+ readonly on: "on";
355
+ readonly off: "off";
356
+ readonly checked: "checked";
357
+ readonly unchecked: "unchecked";
358
+ readonly indeterminate: "indeterminate";
359
+ readonly mixed: "mixed";
360
+ };
361
+ type When = (typeof When)[keyof typeof When];
362
+ type WhenStyle = React$1.CSSProperties | string | ((builder: any) => void);
363
+ interface SpringOptions {
364
+ stiffness?: number;
365
+ damping?: number;
366
+ mass?: number;
367
+ }
368
+ declare const MOTION_PRESETS: readonly [
369
+ "fadeIn",
370
+ "fadeOut",
371
+ "fade",
372
+ "slideUp",
373
+ "slideDown",
374
+ "slideLeft",
375
+ "slideRight",
376
+ "scaleIn",
377
+ "scaleOut",
378
+ "scale",
379
+ "blurIn",
380
+ "blurOut",
381
+ "blur",
382
+ "pop",
383
+ "bounce"
384
+ ];
385
+ type MotionPreset = (typeof MOTION_PRESETS)[number];
386
+ interface CustomMotion {
387
+ from: Record<string, string | number>;
388
+ to: Record<string, string | number>;
389
+ duration?: number;
390
+ ease?: string;
391
+ delay?: number;
392
+ stiffness?: number;
393
+ damping?: number;
394
+ mass?: number;
395
+ }
396
+ interface ThemeColors {
397
+ primary: string;
398
+ primaryVariant?: string;
399
+ primaryContainer?: string;
400
+ onPrimaryContainer?: string;
401
+ secondary: string;
402
+ secondaryVariant?: string;
403
+ secondaryContainer?: string;
404
+ onSecondaryContainer?: string;
405
+ tertiary?: string;
406
+ onTertiary?: string;
407
+ tertiaryContainer?: string;
408
+ onTertiaryContainer?: string;
409
+ background: string;
410
+ surface: string;
411
+ surfaceVariant?: string;
412
+ onSurfaceVariant?: string;
413
+ error: string;
414
+ errorContainer?: string;
415
+ onErrorContainer?: string;
416
+ success?: string;
417
+ warning?: string;
418
+ info?: string;
419
+ onPrimary: string;
420
+ onSecondary: string;
421
+ onBackground: string;
422
+ onSurface: string;
423
+ onError: string;
424
+ /** Borders / hairlines — maps to `--fibo-outline`. */
425
+ outline?: string;
426
+ outlineVariant?: string;
427
+ /** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
428
+ surfaceContainerLow?: string;
429
+ }
430
+ interface ThemeTypography {
431
+ h1: TextStyle;
432
+ h2: TextStyle;
433
+ h3: TextStyle;
434
+ h4: TextStyle;
435
+ h5: TextStyle;
436
+ h6: TextStyle;
437
+ body: TextStyle;
438
+ caption: TextStyle;
439
+ label: TextStyle;
440
+ }
441
+ interface ThemeSpacing {
442
+ xs: string;
443
+ sm: string;
444
+ md: string;
445
+ lg: string;
446
+ xl: string;
447
+ }
448
+ interface ThemeBorderRadius {
449
+ /** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
450
+ xs?: string;
451
+ sm: string;
452
+ md: string;
453
+ lg: string;
454
+ /** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
455
+ xl?: string;
456
+ full: string;
457
+ }
458
+ interface ThemeShadows {
459
+ sm: string;
460
+ md: string;
461
+ lg: string;
462
+ }
463
+ interface FiboTheme {
464
+ name: FiboThemeName;
465
+ colors: ThemeColors;
466
+ typography: ThemeTypography;
467
+ spacing: ThemeSpacing;
468
+ borderRadius: ThemeBorderRadius;
469
+ shadows: ThemeShadows;
470
+ fontFamily: string;
471
+ }
472
+ declare const FIBO_THEMES: {
473
+ readonly material: FiboTheme;
474
+ readonly cupertino: FiboTheme;
475
+ readonly web: FiboTheme;
476
+ readonly noir: FiboTheme;
477
+ };
478
+ type FiboThemePreset = keyof typeof FIBO_THEMES;
479
+ type ThemeInput = FiboTheme | FiboThemePreset;
480
+ declare enum Colors {
481
+ Primary = "primary",
482
+ OnPrimary = "on-primary",
483
+ PrimaryContainer = "primary-container",
484
+ OnPrimaryContainer = "on-primary-container",
485
+ Secondary = "secondary",
486
+ OnSecondary = "on-secondary",
487
+ SecondaryContainer = "secondary-container",
488
+ OnSecondaryContainer = "on-secondary-container",
489
+ Tertiary = "tertiary",
490
+ OnTertiary = "on-tertiary",
491
+ TertiaryContainer = "tertiary-container",
492
+ OnTertiaryContainer = "on-tertiary-container",
493
+ Error = "error",
494
+ OnError = "on-error",
495
+ Success = "success",
496
+ Warning = "warning",
497
+ Info = "info",
498
+ Background = "background",
499
+ OnBackground = "on-background",
500
+ Surface = "surface",
501
+ OnSurface = "on-surface",
502
+ SurfaceVariant = "surface-variant",
503
+ OnSurfaceVariant = "on-surface-variant",
504
+ Outline = "outline",
505
+ Transparent = "transparent",
506
+ Black = "black",
507
+ White = "white"
508
+ }
509
+ declare enum ShadowSize {
510
+ Sm = "sm",
511
+ Md = "md",
512
+ Lg = "lg",
513
+ Xl = "xl",
514
+ Xl2 = "2xl"
515
+ }
516
+ declare enum ShadowPreset {
517
+ Card = "card",
518
+ Button = "button",
519
+ Modal = "modal",
520
+ Float = "float",
521
+ Inner = "inner"
522
+ }
523
+ declare enum ShadowDirection {
524
+ Top = "top",
525
+ Bottom = "bottom",
526
+ Left = "left",
527
+ Right = "right",
528
+ TopBottom = "top-bottom",
529
+ LeftRight = "left-right",
530
+ Vertical = "vertical",
531
+ Horizontal = "horizontal",
532
+ All = "all"
533
+ }
534
+ type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
535
+ string,
536
+ number?
537
+ ] | [
538
+ ShadowDirection | string,
539
+ ShadowSize | string
540
+ ] | [
541
+ ShadowDirection | string,
542
+ string
543
+ ] | [
544
+ ShadowDirection | string,
545
+ string,
546
+ number?
547
+ ] | [
548
+ ShadowDirection | string,
549
+ ShadowSize | string,
550
+ string,
551
+ number?
552
+ ];
553
+ type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
554
+ declare abstract class FiboBuilder {
555
+ /** @internal Extra DOM props forwarded to the host element. */
556
+ protected _props: Record<string, any>;
557
+ protected _style: React$1.CSSProperties;
558
+ protected _cssStyles: React$1.CSSProperties;
559
+ protected _classNames: string[];
560
+ protected _children: React$1.ReactNode[];
561
+ /** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
562
+ protected _theme?: FiboTheme;
563
+ protected _state: Map<string, any>;
564
+ protected _providers: Map<string, any>;
565
+ protected _observers: Set<Observable<any>>;
566
+ protected _signals: Set<BindableSignal<any>>;
567
+ /** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
568
+ protected _ownsReads: boolean;
569
+ /** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
570
+ protected _replays: Array<() => void>;
571
+ protected _isObserver: boolean;
572
+ protected _gesture?: GestureBuilder;
573
+ protected _animationConfig?: Partial<AnimationOptions>;
574
+ protected _animatedProps: Map<string, Signal<any>>;
575
+ protected _transforms: string[];
576
+ protected _transitionClass?: string;
577
+ /** True while transition class was auto-managed for hover/effect presets (expandable). */
578
+ protected _autoEffectTransition: boolean;
579
+ protected _effectTransitionProps: string[];
580
+ /**
581
+ * When true, getStyle() promotes background/border shorthands to longhands and
582
+ * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
583
+ */
584
+ protected _smoothSurface: boolean;
585
+ protected _smoothNeedsRestTransform: boolean;
586
+ protected _motionClass?: string;
587
+ protected _staggerMs?: number;
588
+ protected _reveal?: {
589
+ preset: string;
590
+ once?: boolean;
591
+ rootMargin?: string;
592
+ threshold?: number;
593
+ };
594
+ protected _scrollProgress: boolean;
595
+ protected _viewTransition?: string;
596
+ protected _reducedMotion: "reduce" | "never";
597
+ protected _usesCssMotion: boolean;
598
+ protected _explicitScrollMargin: boolean;
599
+ /** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
600
+ protected _hug: boolean;
601
+ /**
602
+ * Unset every CSS property on this component and what it renders inside.
603
+ * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
604
+ */
605
+ protected _resetStyle: boolean;
606
+ /** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
607
+ protected _boxLonghands: Set<string>;
608
+ resetStyle(): this;
609
+ protected isReset(): boolean;
610
+ hug(): this;
611
+ protected isHug(): boolean;
612
+ id(value: string): this;
613
+ /**
614
+ * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
615
+ * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
616
+ */
617
+ anchor(value: string): this;
618
+ /**
619
+ * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
620
+ * that `.anchor()` applies).
621
+ */
622
+ scrollMargin(value: number | string): this;
623
+ /** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
624
+ addClassName(name: string): this;
625
+ /**
626
+ * React list key. After this is called, React reads the key as a string
627
+ * on both the builder element and the inner host wrapper.
628
+ * Builders are valid elements — you do not need `.build()`.
629
+ */
630
+ key(value: string | number): this;
631
+ private setBoxLonghand;
632
+ private setBoxShorthand;
633
+ paddingHorizontal(value: string | number): this;
634
+ paddingVertical(value: string | number): this;
635
+ padding(value: string | number): this;
636
+ marginHorizontal(value: string | number): this;
637
+ marginVertical(value: string | number): this;
638
+ margin(value: string | number): this;
639
+ /** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
640
+ protected layoutStyle(patch: React$1.CSSProperties): this;
641
+ /** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
642
+ private dropConflictingKeys;
643
+ private trackBoxLonghandsFrom;
644
+ flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
645
+ /** Flutter `textDirection`. */
646
+ textDirection(direction: "ltr" | "rtl"): this;
647
+ /** Flutter `textBaseline`. Both modes align on the flex baseline. */
648
+ textBaseline(baseline: "alphabetic" | "ideographic"): this;
649
+ /** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
650
+ clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
651
+ /**
652
+ * Flutter `mainAxisSize`. `min` hugs the current flex direction.
653
+ * `max` stretches along that same axis.
654
+ */
655
+ mainAxisSize(size: "min" | "max"): this;
656
+ zIndex(value: number): this;
657
+ alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
658
+ alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
659
+ flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
660
+ /**
661
+ * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
662
+ * names (`space-between` / `spaceBetween`).
663
+ */
664
+ justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
665
+ /** True when flexDirection is column / column-reverse (default is row). */
666
+ protected isVerticalFlex(): boolean;
667
+ /**
668
+ * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
669
+ * `between` packs the main axis and starts the cross axis.
670
+ */
671
+ align(alignment: AlignAxis): this;
672
+ /**
673
+ * Horizontal (screen X) alignment. Same meaning on Row and Column:
674
+ * left / center / right of the container — not “main axis”.
675
+ */
676
+ alignX(alignment: AlignAxis): this;
677
+ /**
678
+ * Vertical (screen Y) alignment. Same meaning on Row and Column:
679
+ * top / center / bottom of the container — not “cross axis”.
680
+ */
681
+ alignY(alignment: AlignAxis): this;
682
+ protected applyMainAlign(alignment: AlignAxis | string): this;
683
+ protected applyCrossAlign(alignment: AlignAxis | string): this;
684
+ flex(value?: number | string): this;
685
+ grid(): this;
686
+ inlineFlex(): this;
687
+ inlineGrid(): this;
688
+ block(): this;
689
+ inlineBlock(): this;
690
+ hidden(): this;
691
+ center(): this;
692
+ /** Center on the horizontal screen axis (uses `.alignX('center')`). */
693
+ centerX(): this;
694
+ /** Center on the vertical screen axis (uses `.alignY('center')`). */
695
+ centerY(): this;
696
+ spaceBetween(): this;
697
+ spaceAround(): this;
698
+ spaceEvenly(): this;
699
+ fill(): this;
700
+ fillWidth(): this;
701
+ fillHeight(): this;
702
+ square(size: number | string): this;
703
+ circle(): this;
704
+ opacity(value: number): this;
705
+ p(value: number | string): this;
706
+ px(value: number | string): this;
707
+ py(value: number | string): this;
708
+ paddingX(value: number | string): this;
709
+ paddingY(value: number | string): this;
710
+ m(value: number | string): this;
711
+ mx(value: number | string): this;
712
+ my(value: number | string): this;
713
+ marginX(value: number | string): this;
714
+ marginY(value: number | string): this;
715
+ bg(color: string | Colors): this;
716
+ text(color: string | Colors): this;
717
+ color(value: string | Colors): this;
718
+ private resolveSemanticColor;
719
+ shadow(config?: ShadowConfig): this;
720
+ /**
721
+ * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
722
+ * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
723
+ * No `window.innerWidth` — hydrate-safe.
724
+ */
725
+ responsive(styles: ResponsiveStyles): this;
726
+ /**
727
+ * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
728
+ *
729
+ * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
730
+ */
731
+ media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
732
+ private registerMediaStyles;
733
+ sm(styles: React$1.CSSProperties): this;
734
+ md(styles: React$1.CSSProperties): this;
735
+ lg(styles: React$1.CSSProperties): this;
736
+ xl(styles: React$1.CSSProperties): this;
737
+ rounded(value: string | number): this;
738
+ borderRadius(value: string | number): this;
739
+ borderColor(value: string): this;
740
+ /**
741
+ * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
742
+ * (the Scaffold body) cannot divide the viewport across these children.
743
+ * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
744
+ * opts back into sharing space.
745
+ */
746
+ private lockAxis;
747
+ width(value: string | number): this;
748
+ paint(property: string, value: string): this;
749
+ height(value: string | number): this;
750
+ gap(value: string | number): this;
751
+ clean(): this;
752
+ borderInput(color?: string, focusColor?: string): this;
753
+ weight(value: string | number): this;
754
+ onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
755
+ state<T>(key: string, initialValue: T): this;
756
+ getState<T>(key: string): T | undefined;
757
+ setState<T>(key: string, value: T): this;
758
+ provide<T>(key: string, value: T): this;
759
+ consume<T>(key: string): T | undefined;
760
+ observer(options?: string | number | {
761
+ key?: string | number;
762
+ }): this;
763
+ observe<T>(observable: Observable<T>): this;
764
+ bindSignal<T>(signal: BindableSignal<T>): this;
765
+ /**
766
+ * @internal Wire a direct `method(signal.value)` to this node.
767
+ * Does not claim reads that happen later in a children function.
768
+ */
769
+ adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
770
+ /** @internal */
771
+ runReplays(): void;
772
+ translateX(value: Signal<number> | number): this;
773
+ translateY(value: Signal<number> | number): this;
774
+ scale(value: Signal<number> | number): this;
775
+ rotate(degrees: Signal<number> | number): this;
776
+ gesture(gesture: GestureBuilder): this;
777
+ animation(config: Partial<AnimationOptions>): this;
778
+ protected hasStateManagement(): boolean;
779
+ className(className: string): this;
780
+ classNames(classNames: string[]): this;
781
+ css(styles: React$1.CSSProperties): this;
782
+ style(style: React$1.CSSProperties): this;
783
+ props(props: Record<string, any>): this;
784
+ protected _transitionDuration: number;
785
+ protected _transitionEasing: string;
786
+ protected _transitionDelay: number;
787
+ protected _transitionProperties: string[];
788
+ /**
789
+ * Apply CSS transition
790
+ *
791
+ * Overload 1: String syntax
792
+ * Example: .transition('all 0.2s ease-in-out')
793
+ *
794
+ * Overload 2: Shorthand with parameters
795
+ * Example: .transition('all', 200, 'ease-out')
796
+ * Example: .transition('all', 200, 'ease-out', 50)
797
+ */
798
+ transition(value: string): this;
799
+ transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
800
+ /**
801
+ * Set transition duration in milliseconds
802
+ * Example: .duration(200) → 200ms
803
+ */
804
+ duration(ms: number): this;
805
+ /**
806
+ * Set transition easing function
807
+ * Example: .easing('ease-in-out')
808
+ */
809
+ easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
810
+ /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
811
+ ease(value: string): this;
812
+ /**
813
+ * Set transition delay in milliseconds
814
+ * Example: .delay(100) → 100ms delay
815
+ */
816
+ delay(ms: number): this;
817
+ /**
818
+ * Set which properties to transition
819
+ * Example: .properties(['color', 'transform'])
820
+ */
821
+ properties(props: string[]): this;
822
+ /**
823
+ * Apply the built transition to the element
824
+ */
825
+ protected _applyTransition(): void;
826
+ private replaceTransitionClass;
827
+ /**
828
+ * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
829
+ * @example Box().animate('fadeIn').duration(300).ease('spring')
830
+ */
831
+ animate(preset: MotionPreset | string, options?: {
832
+ duration?: number;
833
+ ease?: string;
834
+ delay?: number;
835
+ from?: number | string;
836
+ stiffness?: number;
837
+ damping?: number;
838
+ mass?: number;
839
+ }): this;
840
+ animate(custom: CustomMotion): this;
841
+ /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
842
+ spring(options?: SpringOptions): this;
843
+ reducedMotion(mode?: "reduce" | "never"): this;
844
+ press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
845
+ /**
846
+ * Shortcut: `.hover(h => h.effect(name))`.
847
+ * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
848
+ */
849
+ hoverEffect(name: string): this;
850
+ /**
851
+ * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
852
+ */
853
+ pressEffect(name: string): this;
854
+ /**
855
+ * Shortcut: `.focus(f => f.effect(name))`.
856
+ */
857
+ focusEffect(name: string): this;
858
+ /**
859
+ * Shortcut: `.active(a => a.effect(name))`.
860
+ */
861
+ activeEffect(name: string): this;
862
+ /**
863
+ * Shortcut: `.groupHover(h => h.effect(name))`.
864
+ */
865
+ groupHoverEffect(name: string): this;
866
+ focusVisible(): PseudoStateBuilder;
867
+ focusVisible(callback: PseudoStateFn): this;
868
+ stagger(ms: number): this;
869
+ /** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
870
+ reveal(preset?: string | {
871
+ preset?: string;
872
+ once?: boolean;
873
+ rootMargin?: string;
874
+ threshold?: number;
875
+ }, options?: {
876
+ once?: boolean;
877
+ rootMargin?: string;
878
+ threshold?: number;
879
+ }): this;
880
+ /** Alias of `.reveal()` for scroll-triggered presets. */
881
+ onScroll(preset?: string): this;
882
+ /** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
883
+ scrollTimeline(kind?: "view" | "scroll"): this;
884
+ scrollProgress(): this;
885
+ smoothScroll(): this;
886
+ scrollSnap(axis?: "x" | "y" | "both"): this;
887
+ scrollSnapAlign(align?: "start" | "center" | "end"): this;
888
+ sticky(top?: number | string | boolean): this;
889
+ /**
890
+ * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
891
+ * clear this bar. Header uses the real bar height.
892
+ */
893
+ protected publishStickyOffset(value: number | string): void;
894
+ viewTransition(name: string): this;
895
+ /** Default `:focus-visible` ring. Pass a callback to customize. */
896
+ focusRing(color?: string): this;
897
+ protected ensureInteractiveTransition(): void;
898
+ /**
899
+ * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
900
+ * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
901
+ * @internal
902
+ */
903
+ prepareSmoothInteraction(properties: string[]): void;
904
+ /** @internal Convert inline background/border shorthands → longhands. */
905
+ promoteSurfaceLonghands(): void;
906
+ /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
907
+ ensureRestTransform(): void;
908
+ /**
909
+ * Ensure the base element transitions the properties an interaction effect needs.
910
+ * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
911
+ * explicitly or a motion animation class is present.
912
+ * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
913
+ */
914
+ ensureEffectTransition(properties: string[]): void;
915
+ /**
916
+ * Apply a theme to this node and descendants (CSS vars inherit).
917
+ * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
918
+ * SSR-safe: class + inline vars on first paint (no useEffect).
919
+ */
920
+ theme(input: ThemeInput): this;
921
+ /** Prefer dark/light system chrome for native controls under this subtree. */
922
+ colorScheme(scheme: "light" | "dark" | "light dark"): this;
923
+ hover(): PseudoStateBuilder;
924
+ hover(callback: PseudoStateFn): this;
925
+ /**
926
+ * Paint for a `When` state. Hover / focus / active / visited / disabled
927
+ * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
928
+ *
929
+ * ```ts
930
+ * Row().when(When.hover, (s) => s.bg('#c8ff00'))
931
+ * ```
932
+ */
933
+ when(state: When, style: WhenStyle): this;
934
+ focus(): PseudoStateBuilder;
935
+ focus(callback: PseudoStateFn): this;
936
+ active(): PseudoStateBuilder;
937
+ active(callback: PseudoStateFn): this;
938
+ visited(): PseudoStateBuilder;
939
+ visited(callback: PseudoStateFn): this;
940
+ disabledState(): PseudoStateBuilder;
941
+ disabledState(callback: PseudoStateFn): this;
942
+ focusWithin(): PseudoStateBuilder;
943
+ focusWithin(callback: PseudoStateFn): this;
944
+ firstChild(): PseudoStateBuilder;
945
+ firstChild(callback: PseudoStateFn): this;
946
+ lastChild(): PseudoStateBuilder;
947
+ lastChild(callback: PseudoStateFn): this;
948
+ groupHover(): PseudoStateBuilder;
949
+ groupHover(callback: PseudoStateFn): this;
950
+ groupFocus(): PseudoStateBuilder;
951
+ groupFocus(callback: PseudoStateFn): this;
952
+ groupActive(): PseudoStateBuilder;
953
+ groupActive(callback: PseudoStateFn): this;
954
+ groupFocusWithin(): PseudoStateBuilder;
955
+ groupFocusWithin(callback: PseudoStateFn): this;
956
+ group(): this;
957
+ protected _childFunction?: () => FiboChild | FiboChild[];
958
+ children(children: FiboChildren): this;
959
+ protected getClassName(): string;
960
+ protected getStyle(): React$1.CSSProperties;
961
+ protected processChildren(): React$1.ReactNode[];
962
+ protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
963
+ /**
964
+ * @deprecated Builders are React elements. Returning or nesting the builder is enough.
965
+ * `.build()` still assembles the host tree for older call sites.
966
+ */
967
+ abstract build(): React$1.ReactElement;
968
+ }
969
+ type KnownKeys<T> = {
970
+ [K in keyof T]: string extends K ? never : number extends K ? never : K;
971
+ } extends {
972
+ [_ in keyof T]: infer U;
973
+ } ? U : never;
974
+ type StyleBuilder<T> = T & LogicalAxes & {
975
+ [K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
976
+ } & React$1.ReactElement;
977
+ declare class CenterBuilder extends FiboBuilder {
978
+ children(children: FiboChildren): this;
979
+ props(value: Record<string, any>): this;
980
+ build(): React$1.ReactElement;
981
+ }
982
+ export declare const Center: () => StyleBuilder<CenterBuilder>;
983
+ declare class ColumnBuilder extends FiboBuilder {
984
+ private _mainAxisAlignment;
985
+ private _crossAxisAlignment;
986
+ private _spacing?;
987
+ private _size?;
988
+ children(children: FiboChildren): this;
989
+ props(value: Record<string, any>): this;
990
+ mainAxisAlignment(alignment: MainAxisAlignment): this;
991
+ crossAxisAlignment(alignment: CrossAxisAlignment): this;
992
+ /** Horizontal screen axis → cross axis on a Column. */
993
+ alignX(alignment: AlignAxis): this;
994
+ /** Vertical screen axis → main axis on a Column. */
995
+ alignY(alignment: AlignAxis): this;
996
+ spacing(value: string | number): this;
997
+ size(size: "small" | "medium" | "large"): this;
998
+ build(): React$1.ReactElement;
999
+ }
1000
+ export declare const Column: () => StyleBuilder<ColumnBuilder>;
1001
+ declare class ContainerBuilder extends FiboBuilder {
1002
+ private _userPad;
1003
+ children(children: FiboChildren): this;
1004
+ props(value: Record<string, any>): this;
1005
+ padding(value: string | number): this;
1006
+ paddingHorizontal(value: string | number): this;
1007
+ paddingVertical(value: string | number): this;
1008
+ paddingLeft(value: string | number): this;
1009
+ paddingRight(value: string | number): this;
1010
+ paddingTop(value: string | number): this;
1011
+ paddingBottom(value: string | number): this;
1012
+ build(): React$1.ReactElement;
1013
+ }
1014
+ export declare const Container: () => StyleBuilder<ContainerBuilder>;
1015
+ declare class RowBuilder extends FiboBuilder {
1016
+ private _mainAxisAlignment;
1017
+ private _crossAxisAlignment;
1018
+ children(children: FiboChildren): this;
1019
+ props(value: Record<string, any>): this;
1020
+ mainAxisAlignment(alignment: MainAxisAlignment): this;
1021
+ crossAxisAlignment(alignment: CrossAxisAlignment): this;
1022
+ /** Horizontal screen axis → main axis on a Row. */
1023
+ alignX(alignment: AlignAxis): this;
1024
+ /** Vertical screen axis → cross axis on a Row. */
1025
+ alignY(alignment: AlignAxis): this;
1026
+ spacing(value: string | number): this;
1027
+ items(children: React$1.ReactElement[]): this;
1028
+ build(): React$1.ReactElement;
1029
+ }
1030
+ export declare const Row: () => StyleBuilder<RowBuilder>;
1031
+ declare class SpacerBuilder extends FiboBuilder {
1032
+ private _height?;
1033
+ private _width?;
1034
+ private _grow?;
1035
+ private _expand?;
1036
+ height(value: string | number): this;
1037
+ width(value: string | number): this;
1038
+ vertical(): this;
1039
+ horizontal(): this;
1040
+ /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
1041
+ flex(value?: number | string): this;
1042
+ build(): React$1.ReactElement;
1043
+ }
1044
+ export declare const Spacer: () => StyleBuilder<SpacerBuilder>;
1045
+ declare class HeaderBuilder extends FiboBuilder {
1046
+ private _height;
1047
+ private _sticky;
1048
+ private _stickyTop;
1049
+ private _stickyStamp;
1050
+ private _leading?;
1051
+ private _trailing?;
1052
+ private _title?;
1053
+ private static unstickSeq;
1054
+ children(children: FiboChildren): this;
1055
+ props(value: Record<string, any>): this;
1056
+ leading(node: FiboChild): this;
1057
+ trailing(node: FiboChild): this;
1058
+ title(value: string | FiboChild): this;
1059
+ height(height: number | string): this;
1060
+ sticky(enable?: boolean | number | string): this;
1061
+ private dropStickyStamp;
1062
+ private syncStickyOffset;
1063
+ build(): React$1.ReactElement;
1064
+ }
1065
+ export declare const Header: () => StyleBuilder<HeaderBuilder>;
1066
+ type FabAt = "start" | "center" | "end" | "startTop" | "centerTop" | "endTop" | "startDock" | "centerDock" | "endDock";
1067
+ interface LayoutBarConfig {
1068
+ fixed?: boolean;
1069
+ children: FiboChildren;
1070
+ }
1071
+ interface ScaffoldStructure {
1072
+ header?: {
1073
+ position?: "static" | "sticky" | "fixed";
1074
+ height?: string | number;
1075
+ visible?: boolean;
1076
+ };
1077
+ footer?: {
1078
+ position?: "static" | "sticky" | "fixed";
1079
+ height?: string | number;
1080
+ visible?: boolean;
1081
+ };
1082
+ sidebarLeft?: {
1083
+ behavior?: "fixed" | "scroll";
1084
+ mode?: "side" | "over";
1085
+ width?: string | number;
1086
+ visible?: boolean;
1087
+ fullHeight?: boolean;
1088
+ };
1089
+ sidebarRight?: {
1090
+ behavior?: "fixed" | "scroll";
1091
+ mode?: "side" | "over";
1092
+ width?: string | number;
1093
+ visible?: boolean;
1094
+ fullHeight?: boolean;
1095
+ };
1096
+ }
1097
+ declare class ScaffoldBuilder extends FiboBuilder {
1098
+ private _locale?;
1099
+ private _customProviders;
1100
+ private _structure;
1101
+ private _headerBar?;
1102
+ private _footerBar?;
1103
+ private _sideBarLeft?;
1104
+ private _sideBarRight?;
1105
+ private _drawer?;
1106
+ private _endDrawer?;
1107
+ private _drawerWidth;
1108
+ private _fab?;
1109
+ private _fabAt;
1110
+ private _bottomSheet?;
1111
+ private _footerButtons?;
1112
+ private _extendBody;
1113
+ private _extendBehindHeader;
1114
+ private _avoidKeyboard;
1115
+ private _onDrawer?;
1116
+ children(children: FiboChildren): this;
1117
+ props(value: Record<string, any>): this;
1118
+ locale(locale: string): this;
1119
+ providers(providers: Record<string, any>): this;
1120
+ provider(key: string, value: any): this;
1121
+ structure(config: ScaffoldStructure): this;
1122
+ headerBar(config: FiboChild | LayoutBarConfig): this;
1123
+ /** Flutter `Scaffold.appBar`. Same slot as `.headerBar()`. */
1124
+ appBar(config: FiboChild | LayoutBarConfig): this;
1125
+ footerBar(config: FiboChild | LayoutBarConfig): this;
1126
+ sideBarLeft(config: FiboChild | LayoutBarConfig): this;
1127
+ sideBarRight(config: FiboChild | LayoutBarConfig): this;
1128
+ /** Flutter drawer. Starts closed. Open it with `useScaffold().openDrawer()`. */
1129
+ drawer(child: FiboChild): this;
1130
+ /** Flutter endDrawer. */
1131
+ endDrawer(child: FiboChild): this;
1132
+ drawerWidth(px: number): this;
1133
+ /** Flutter floatingActionButton. */
1134
+ fab(child: FiboChild): this;
1135
+ /** Where the button sits. Dock locations overlap the footer. */
1136
+ fabAt(location: FabAt): this;
1137
+ /** Flutter bottomSheet. Hidden until `useScaffold().showSheet()`. */
1138
+ bottomSheet(child: FiboChild): this;
1139
+ /** Flutter persistentFooterButtons. */
1140
+ footerButtons(children: FiboChildren): this;
1141
+ /** Body draws under the footer. */
1142
+ extendBody(on?: boolean): this;
1143
+ /** Body draws under the header. */
1144
+ extendBehindHeader(on?: boolean): this;
1145
+ /** Lift the page above the keyboard. On by default. */
1146
+ avoidKeyboard(on?: boolean): this;
1147
+ onDrawer(handler: (side: "start" | "end", open: boolean) => void): this;
1148
+ private _bindBar;
1149
+ private _normalizeBar;
1150
+ private _isLayoutBarConfig;
1151
+ build(): React$1.ReactElement;
1152
+ }
1153
+ export declare const Scaffold: () => StyleBuilder<ScaffoldBuilder>;
1154
+ declare class BoxBuilder extends FiboBuilder {
1155
+ children(children: FiboChildren): this;
1156
+ props(value: Record<string, any>): this;
1157
+ build(): React$1.ReactElement;
1158
+ }
1159
+ export declare const Box: () => StyleBuilder<BoxBuilder>;
1160
+ declare class CardBuilder extends FiboBuilder {
1161
+ private _text;
1162
+ private _subtitle?;
1163
+ private _number?;
1164
+ private _color?;
1165
+ private _header?;
1166
+ private _footer?;
1167
+ private _as?;
1168
+ text(value: string): this;
1169
+ /** Alias of `.text()` — same slot as Banner/ListTile/Alert `.title()`. */
1170
+ title(value: string): this;
1171
+ subtitle(value: string): this;
1172
+ number(value: string): this;
1173
+ children(children: FiboChildren): this;
1174
+ header(node: FiboChild): this;
1175
+ footer(node: FiboChild): this;
1176
+ as(tag: keyof HTMLElementTagNameMap | string): this;
1177
+ props(value: Record<string, any>): this;
1178
+ color(value: string): this;
1179
+ build(): React$1.ReactElement;
1180
+ }
1181
+ export declare const Card: () => StyleBuilder<CardBuilder>;
1182
+ type GridVariant = "standard" | "masonry" | "bento";
1183
+ type GridGap = "none" | "sm" | "md" | "lg" | "xl" | number;
1184
+ type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
1185
+ type GridAutoFlow = "row" | "column" | "dense";
1186
+ interface ResponsiveCols {
1187
+ sm?: GridCols;
1188
+ md?: GridCols;
1189
+ lg?: GridCols;
1190
+ xl?: GridCols;
1191
+ }
1192
+ declare class GridBuilder extends FiboBuilder {
1193
+ private _variant;
1194
+ private _columns;
1195
+ private _gap;
1196
+ private _rowGap?;
1197
+ private _columnGap?;
1198
+ private _rows?;
1199
+ private _templateColumns?;
1200
+ private _templateRows?;
1201
+ private _autoFlow?;
1202
+ variant(v: GridVariant): this;
1203
+ columns(cols: GridCols | ResponsiveCols): this;
1204
+ rows(count: number): this;
1205
+ gap(g: GridGap): this;
1206
+ rowGap(g: GridGap | string | number): this;
1207
+ columnGap(g: GridGap | string | number): this;
1208
+ templateColumns(template: string): this;
1209
+ /** CSS name — same as `.templateColumns()`, wins over numeric `.columns()`. */
1210
+ gridTemplateColumns(template: string): this;
1211
+ templateRows(template: string): this;
1212
+ autoFlow(flow: GridAutoFlow): this;
1213
+ build(): React$1.ReactElement;
1214
+ }
1215
+ declare class GridItemBuilder extends FiboBuilder {
1216
+ private _colSpan?;
1217
+ private _rowSpan?;
1218
+ private _colStart?;
1219
+ private _colEnd?;
1220
+ private _rowStart?;
1221
+ private _rowEnd?;
1222
+ colSpan(span: number): this;
1223
+ rowSpan(span: number): this;
1224
+ colStart(start: number): this;
1225
+ colEnd(end: number): this;
1226
+ rowStart(start: number): this;
1227
+ rowEnd(end: number): this;
1228
+ build(): React$1.ReactElement;
1229
+ }
1230
+ export declare const Grid: () => StyleBuilder<GridBuilder>;
1231
+ export declare const GridItem: () => StyleBuilder<GridItemBuilder>;
1232
+ type TextTruncation = "clip" | "ellipsis" | "head" | "middle" | "tail";
1233
+ type TextCase = "uppercase" | "lowercase" | "capitalize" | "none";
1234
+ declare class TextBuilder extends FiboBuilder {
1235
+ private _text;
1236
+ private _live;
1237
+ private _nodes?;
1238
+ private _type;
1239
+ private _lineLimit?;
1240
+ private _truncation?;
1241
+ private _italic;
1242
+ private _redacted;
1243
+ private _bold;
1244
+ private _underline;
1245
+ private _strike;
1246
+ private _textCase?;
1247
+ constructor(text?: string | (() => string));
1248
+ private setMarkedString;
1249
+ private setLiteralString;
1250
+ text(value: string | (() => string) | unknown): this;
1251
+ /**
1252
+ * Dual `.type()`: typography (`h1`…`label`) sets the host tag + `fibo-text-*`.
1253
+ * CSS display (`block` / `flex` / …) sets `display` and leaves the tag alone.
1254
+ */
1255
+ type(type: TextType | string): this;
1256
+ variant(variant: TextType): this;
1257
+ children(children: FiboChildren): this;
1258
+ props(value: Record<string, any>): this;
1259
+ nowrap(): this;
1260
+ mono(): this;
1261
+ muted(): this;
1262
+ /**
1263
+ * Subscribe an extra signal (or override text with `format`).
1264
+ * `$length` / `interp()` already auto-bind their own signals.
1265
+ *
1266
+ * ```ts
1267
+ * Text(`Total: ${todos.$length}`).bindSignal(filter) // also rebuild when filter changes
1268
+ * Text().bindSignal(todos, (list) => `Total: ${list.length}`)
1269
+ * ```
1270
+ */
1271
+ bindSignal<T>(signal: BindableSignal<T>, format?: (value: T) => string): this;
1272
+ /** Clamp to `n` lines (`-webkit-box` + `WebkitLineClamp`). */
1273
+ lineLimit(n: number): this;
1274
+ truncation(mode: TextTruncation): this;
1275
+ italic(): this;
1276
+ bold(): this;
1277
+ underline(): this;
1278
+ strikethrough(): this;
1279
+ /** SwiftUI `redacted`. Hides the glyphs and paints a placeholder bar. */
1280
+ redacted(): this;
1281
+ textCase(mode: TextCase): this;
1282
+ /** Decorations stored by the methods above, applied onto the text style at build. */
1283
+ private textChrome;
1284
+ build(): React$1.ReactElement;
1285
+ }
1286
+ declare const Text$1: (text?: string | (() => string) | undefined) => StyleBuilder<TextBuilder>;
1287
+ type ExtendedButtonVariant = ButtonVariant | "ghost" | "soft" | "outline" | "text" | "raw" | "solid";
1288
+ type ButtonSize = "xs" | "sm" | "md" | "lg";
1289
+ type ButtonShape = "default" | "pill" | "square" | "rect" | "rounded" | "sharp";
1290
+ type ButtonTone = "default" | "inverse";
1291
+ type ButtonMotion = "default" | "none";
1292
+ declare class ButtonBuilder extends FiboBuilder {
1293
+ private _text;
1294
+ private _live;
1295
+ private _variant;
1296
+ private _size;
1297
+ private _onPress?;
1298
+ private _onHover?;
1299
+ private _disabled;
1300
+ private _icon?;
1301
+ private _shape;
1302
+ private _shadow;
1303
+ private _tone;
1304
+ private _motion;
1305
+ private _expand;
1306
+ private _htmlType;
1307
+ private _htmlTypeExplicit;
1308
+ constructor(text?: string | (() => string));
1309
+ text(value: string | (() => string)): this;
1310
+ children(children: FiboChildren): this;
1311
+ variant(variant: ExtendedButtonVariant): this;
1312
+ clean(): this;
1313
+ size(size: ButtonSize): this;
1314
+ onPress(handler: () => void): this;
1315
+ onHover(handler: () => void): this;
1316
+ disabled(value?: boolean): this;
1317
+ icon(icon: React$1.ReactNode): this;
1318
+ shape(value: ButtonShape): this;
1319
+ shadow(value: "none" | "soft"): this;
1320
+ tone(value: ButtonTone): this;
1321
+ motion(value: ButtonMotion): this;
1322
+ expand(value?: boolean): this;
1323
+ /**
1324
+ * HTML button type. `.type('submit')` is what people write inside a Form.
1325
+ * React still reads `element.type` as the component: a string sets this,
1326
+ * a props object renders the button.
1327
+ */
1328
+ type(value: "button" | "submit" | "reset"): this;
1329
+ htmlType(value: "button" | "submit" | "reset"): this;
1330
+ /** Shortcut for `.htmlType('submit')` inside a `Form`. */
1331
+ submit(): this;
1332
+ /** Shortcut for `.htmlType('reset')`. */
1333
+ reset(): this;
1334
+ private resolvedHtmlType;
1335
+ build(): React$1.ReactElement;
1336
+ }
1337
+ export declare const Button: (text?: string | (() => string) | undefined) => StyleBuilder<ButtonBuilder>;
1338
+ type PresenceShow = boolean | BindableSignal<boolean>;
1339
+ interface PresenceProps {
1340
+ show: PresenceShow;
1341
+ enter?: MotionPreset | string;
1342
+ exit?: MotionPreset | string;
1343
+ duration?: number;
1344
+ reducedMotion?: "reduce" | "never";
1345
+ children?: React$1.ReactNode;
1346
+ }
1347
+ declare class PresenceBuilder extends FiboBuilder {
1348
+ private _show;
1349
+ private _enter;
1350
+ private _exit;
1351
+ constructor(show?: PresenceShow);
1352
+ show(value: PresenceShow): this;
1353
+ enter(preset: MotionPreset | string): this;
1354
+ exit(preset: MotionPreset | string): this;
1355
+ duration(ms: number): this;
1356
+ build(): React$1.ReactElement;
1357
+ }
1358
+ declare const presenceBuilder: (show?: PresenceShow | undefined) => StyleBuilder<PresenceBuilder>;
1359
+ export declare function Presence(show?: PresenceShow): ReturnType<typeof presenceBuilder>;
1360
+ export declare function Presence(props: PresenceProps): React$1.ReactElement;
1361
+ export declare namespace Presence {
1362
+ var displayName: string;
1363
+ }
1364
+
1365
+ export {
1366
+ Text$1 as Text,
1367
+ };
1368
+
1369
+ export {};