fiboui 2.2.0 → 2.2.1

package/dist/index.d.ts

@@ -267,7 +267,6 @@ declare abstract class GestureBuilder {
 	abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
 }
 export declare class PseudoStateBuilder {
-	private baseClassName;
 	private pseudoState;
 	private parentBuilder;
 	private isGroup;
@@ -276,7 +275,7 @@ export declare class PseudoStateBuilder {
 	private transitionDelay;
 	private transitionProperties;
 	private transforms;
-	constructor(baseClassName: string, pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
+	constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
 	bg(color: string): this;
 	color(value: string): this;
 	text(color: string): this;
@@ -414,7 +413,6 @@ declare abstract class FiboBuilder {
 	protected _cssStyles: React$1.CSSProperties;
 	protected _classNames: string[];
 	protected _children: React$1.ReactNode[];
-	protected _responsive?: ResponsiveStyles;
 	protected _theme?: ThemeConfig;
 	protected _state: Map<string, any>;
 	protected _providers: Map<string, any>;
@@ -425,7 +423,6 @@ declare abstract class FiboBuilder {
 	protected _animationConfig?: Partial<AnimationOptions>;
 	protected _animatedProps: Map<string, Signal<any>>;
 	protected _transforms: string[];
-	protected _pseudoStateClassName?: string;
 	protected _transitionClass?: string;
 	protected _motionClass?: string;
 	protected _staggerMs?: number;
@@ -455,8 +452,11 @@ declare abstract class FiboBuilder {
 	 * that `.anchor()` applies).
 	 */
 	scrollMargin(value: number | string): this;
+	/** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
+	addClassName(name: string): this;
 	/**
-	 * React list key. After this is called, React reads the key as a string.
+	 * React list key. After this is called, React reads the key as a string
+	 * on both the builder element and the inner host wrapper.
 	 * Builders are valid elements — you do not need `.build()`.
 	 */
 	key(value: string | number): this;
@@ -501,6 +501,11 @@ declare abstract class FiboBuilder {
 	color(value: string | Colors): this;
 	private resolveSemanticColor;
 	shadow(config?: ShadowConfig): this;
+	/**
+	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
+	 * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
+	 * No `window.innerWidth` — hydrate-safe.
+	 */
 	responsive(styles: ResponsiveStyles): this;
 	/**
 	 * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
@@ -508,6 +513,7 @@ declare abstract class FiboBuilder {
 	 * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
 	 */
 	media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
+	private registerMediaStyles;
 	sm(styles: React$1.CSSProperties): this;
 	md(styles: React$1.CSSProperties): this;
 	lg(styles: React$1.CSSProperties): this;
@@ -634,7 +640,6 @@ declare abstract class FiboBuilder {
 	focusRing(color?: string): this;
 	protected ensureInteractiveTransition(): void;
 	theme(themeConfig: ThemeConfig): this;
-	private getPseudoStateClassName;
 	hover(): PseudoStateBuilder;
 	hover(callback: PseudoStateFn): this;
 	focus(): PseudoStateBuilder;
@@ -1608,8 +1613,20 @@ export declare function supportsViewTimeline(): boolean;
 export declare function supportsScrollTimeline(): boolean;
 export declare function ensureMotionCss(): void;
 export declare function getMotionCss(): string;
+export declare function getCss(): string;
+/** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
+export declare function getStyleTag(): string;
+/**
+ * Inject collected CSS into a document. Place as a **later sibling** of the app
+ * so registrations from children run first during SSR.
+ */
+export declare function FiboStyles(): React$1.ReactElement;
 export declare function MotionStyles(): React$1.ReactElement;
-/** Current viewport width; SSR snapshot is 1024 (desktop). */
+/**
+ * Current viewport width. Hydration uses 1024 (desktop) so the first client
+ * render matches SSR; the real width arrives after mount.
+ * Prefer `.md()` / `.responsive()` (CSS `@media`) over this hook.
+ */
 export declare function useViewportWidth(): number;
 type Constructor<T = any> = new (...args: any[]) => T;
 type Factory<T = any> = () => T;
@@ -43026,11 +43043,12 @@ declare class PathBuilder extends ShapeBuilder {
 }
 export declare const Path: () => PathBuilder;
 declare class LinearGradientBuilder extends FiboBuilder {
-	private _id;
+	private _id?;
 	private _colors;
 	private _stops?;
 	private _angle;
 	id(value: string): this;
+	private gradientId;
 	colors(colors: string[]): this;
 	stops(stops: number[]): this;
 	angle(degrees: number): this;
@@ -44778,6 +44796,7 @@ interface RouterContextValue {
 	replace: (path: string) => void;
 	params: Record<string, string>;
 	query: URLSearchParams;
+	hash: string;
 }
 interface NavigateOptions {
 	replace?: boolean;
@@ -44797,6 +44816,12 @@ interface RouterProps {
 	fallback?: React$1.ComponentType;
 	loading?: React$1.ReactNode;
 	basename?: string;
+	/** Request path for SSR. First client render uses this (or `/`), then window after mount. */
+	initialPath?: string;
+	/** Request search string (`?a=1` or `a=1`) for SSR. */
+	initialSearch?: string;
+	/** Request hash (`#section` or `section`) for SSR. */
+	initialHash?: string;
 	errorBoundary?: React$1.ReactNode | ((error: Error, errorInfo: React$1.ErrorInfo) => React$1.ReactNode);
 	onError?: (error: Error, errorInfo: React$1.ErrorInfo) => void;
 }