fiboui 2.9.5 → 2.9.14

package/dist/{index-D5c1VXlN.js → index-CpUz5DNt.js}

@@ -2,10 +2,10 @@ var Bt = Object.defineProperty;
 var Tt = (e, r, t) => r in e ? Bt(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var n = (e, r, t) => Tt(e, typeof r != "symbol" ? r + "" : r, t);
 import s, { useSyncExternalStore as X } from "react";
-import { b2 as L, b3 as P, b6 as C, b9 as M, b7 as R, br as ot, bd as _t, bh as At, bC as Lt, L as vt, aF as T, F as lt, bD as ut, bE as Pt, bF as Rt, a9 as W, aj as N } from "./client-Cc87LXic.js";
-import { S as V, C as F } from "./index-C-hvMzQd.js";
-import { B as wt } from "./index-BJnYb_kw.js";
-import { B as et, I as at, a as G, A as $t } from "./icons-By9BFp7V.js";
+import { b4 as L, b5 as P, b8 as C, bb as M, b9 as R, bu as ot, bf as _t, bk as At, bF as Lt, L as vt, aH as T, F as lt, bG as ut, bH as Pt, bI as Rt, ab as W, al as N } from "./client-CNrWulRU.js";
+import { S as H, C as G } from "./index-COE2gXjP.js";
+import { B as wt } from "./index-BBa7p7cv.js";
+import { B as et, I as at, a as F, A as $t } from "./icons-CUjbVN8n.js";
 function $(e, r) {
   if (!(typeof r != "string" || !C(r)))
     for (const t of M(r))
@@ -41,11 +41,11 @@ const zt = {
   red: "var(--fibo-error, #ef4444)",
   blue: "var(--fibo-info, #3b82f6)",
   purple: "var(--fibo-tertiary, #a855f7)"
-}, Ft = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "link", "style"]);
-function Gt(e) {
+}, Gt = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "link", "style"]);
+function Ft(e) {
   if (typeof e != "string") return "article";
   const r = e.trim().toLowerCase();
-  return !r || !/^[a-z][a-z0-9]*$/.test(r) || Ft.has(r) ? "article" : r;
+  return !r || !/^[a-z][a-z0-9]*$/.test(r) || Gt.has(r) ? "article" : r;
 }
 const Wt = s.memo((e) => {
   const {
@@ -79,7 +79,7 @@ const Wt = s.memo((e) => {
     ...c
   }, w = Q(u), E = Q(p);
   return s.createElement(
-    Gt(h),
+    Ft(h),
     {
       ...b,
       className: I,
@@ -193,7 +193,7 @@ class Dt extends P {
   }
 }
 const Z = L(Dt);
-function H(e, r) {
+function V(e, r) {
   if (!(typeof r != "string" || !C(r)))
     for (const t of M(r))
       e.bindSignal(t);
@@ -205,14 +205,14 @@ function U(e) {
   return typeof e == "string" && C(e) ? R(e) : e;
 }
 function Y(e, r) {
-  return typeof r == "string" ? (H(e, r), r) : ot(r);
+  return typeof r == "string" ? (V(e, r), r) : ot(r);
 }
-const Vt = 'a, button, input, textarea, select, [role="button"], [role="switch"], [role="checkbox"], [role="menuitem"]';
+const Ht = 'a, button, input, textarea, select, [role="button"], [role="switch"], [role="checkbox"], [role="menuitem"]';
 function dt(e) {
   const r = e.target;
-  r != null && r.closest(Vt) && e.stopPropagation();
+  r != null && r.closest(Ht) && e.stopPropagation();
 }
-const Ht = () => s.createElement(
+const Vt = () => s.createElement(
   "svg",
   {
     width: 12,
@@ -322,7 +322,7 @@ const Ht = () => s.createElement(
         className: "fibo-list-tile-chevron shrink-0 flex items-center",
         style: { color: "#9a9a9a", marginLeft: O ? 8 : 0 }
       },
-      s.createElement(Ht)
+      s.createElement(Vt)
     ) : null
   );
 });
@@ -391,7 +391,7 @@ class Mt extends P {
       dense: h,
       ...b
     } = this._props, _ = this._title !== void 0 ? this._title : o, m = this._subtitle !== void 0 ? this._subtitle : l, g = this._leading !== void 0 ? this._leading : t, y = this._trailing !== void 0 ? this._trailing : i;
-    return typeof _ == "string" && H(this, _), typeof m == "string" && H(this, m), typeof g == "string" && H(this, g), typeof y == "string" && H(this, y), s.createElement(Kt, {
+    return typeof _ == "string" && V(this, _), typeof m == "string" && V(this, m), typeof g == "string" && V(this, g), typeof y == "string" && V(this, y), s.createElement(Kt, {
       ...b,
       leading: typeof g == "string" ? q(g) : g,
       title: typeof _ == "string" ? q(_) : _,
@@ -409,7 +409,7 @@ class Mt extends P {
     });
   }
 }
-const Ve = L(Mt);
+const He = L(Mt);
 function Ot(e, r) {
   if (!(typeof r != "string" || !C(r)))
     for (const t of M(r))
@@ -648,7 +648,7 @@ class re extends P {
     return s.createElement(ee, i);
   }
 }
-const He = L(re);
+const Ve = L(re);
 function pt(e, r) {
   if (!(typeof r != "string" || !C(r)))
     for (const t of M(r))
@@ -1241,23 +1241,23 @@ const Oe = L(xe), qe = L(Ee), ke = s.memo((e) => {
     T().classNames(["relative", "aspect-square", "overflow-hidden", "rounded-[20px]"]).children([
       at().src(r).alt(t || "").classNames(["w-full", "h-full", "object-cover", "bg-gray-200"]).build(),
       T().classNames(["absolute", "top-3", "right-3"]).children(
-        et().variant("glass").shape("pill").icon(T().classNames(["text-gray-400", "hover:text-red-500"]).children(G.Heart).build()).text(`${o}`).build()
+        et().variant("glass").shape("pill").icon(T().classNames(["text-gray-400", "hover:text-red-500"]).children(F.Heart).build()).text(`${o}`).build()
       ).build()
     ]).build(),
-    V().height(16).build(),
+    H().height(16).build(),
     W().justifyContent("between").alignItems("start").children([
-      F().gap(4).children([
+      G().gap(4).children([
         N(t).fontWeight(700).fontSize(18).color("#111827").build(),
         et().variant("neutral").text("Not for sale x1").build()
       ]).build(),
-      T().classNames(["text-gray-300"]).children(G.More).build()
+      T().classNames(["text-gray-300"]).children(F.More).build()
     ]).build(),
-    V().height(16).build(),
+    H().height(16).build(),
     W().justifyContent("between").alignItems("center").children([
-      F().gap(4).children([
+      G().gap(4).children([
         N("Current Bid").fontSize(11).fontWeight(600).color("#6B7280").build(),
         W().gap(4).alignItems("center").children([
-          T().classNames(["text-blue-500"]).children(G.Eth).build(),
+          T().classNames(["text-blue-500"]).children(F.Eth).build(),
           N(`${i} ETH`).fontSize(15).fontWeight(700).color("#111827").build()
         ]).build()
       ]).build(),
@@ -1269,8 +1269,8 @@ const Oe = L(xe), qe = L(Ee), ke = s.memo((e) => {
         fontWeight: 600
       }).build()
     ]).build(),
-    V().height(12).build(),
-    l ? et().variant("accent").shape("rounded").icon(T().children(G.Clock).build()).text(l).style({ width: "100%" }).build() : null
+    H().height(12).build(),
+    l ? et().variant("accent").shape("rounded").icon(T().children(F.Clock).build()).text(l).style({ width: "100%" }).build() : null
   ]).build();
 });
 class Ie extends P {
@@ -1335,15 +1335,15 @@ const Te = s.memo((e) => {
       backgroundSize: "cover",
       backgroundPosition: "center"
     }).build(),
-    F().padding(20).alignItems("center").style({ marginTop: "-50px" }).children([
+    G().padding(20).alignItems("center").style({ marginTop: "-50px" }).children([
       $t().image(t).size(80).border("4px solid #fff").build(),
-      V().height(12).build(),
+      H().height(12).build(),
       W().gap(6).alignItems("center").children([
         N(i).fontWeight(700).fontSize(18).color("#111827").build(),
-        G.Verify
+        F.Verify
       ]).build(),
       N(o).fontSize(13).color("#6B7280").style({ marginTop: "4px" }).build(),
-      V().height(16).build(),
+      H().height(16).build(),
       wt("+ Follow").variant("filled").shape("pill").shadow("soft").style({
         backgroundColor: "#3B82F6",
         color: "#fff",
@@ -1351,19 +1351,19 @@ const Te = s.memo((e) => {
         fontSize: "13px",
         fontWeight: 600
       }).build(),
-      V().height(24).build(),
+      H().height(24).build(),
       W().classNames(["w-full", "border-t", "border-gray-100", "pt-4"]).justifyContent("between").children([
-        F().alignItems("center").gap(4).children([
+        G().alignItems("center").gap(4).children([
           N(l.items).fontWeight(700).fontSize(14).build(),
           N("Items").fontSize(11).color("#9CA3AF").build()
         ]).build(),
-        F().alignItems("center").gap(4).children([
+        G().alignItems("center").gap(4).children([
           N(l.owners).fontWeight(700).fontSize(14).build(),
           N("Owners").fontSize(11).color("#9CA3AF").build()
         ]).build(),
-        F().alignItems("center").gap(4).children([
+        G().alignItems("center").gap(4).children([
           W().alignItems("center").gap(2).children([
-            T().width(8).children(G.Eth).build(),
+            T().width(8).children(F.Eth).build(),
             N(l.floor).fontWeight(700).fontSize(14).build()
           ]).build(),
           N("Floor").fontSize(11).color("#9CA3AF").build()
@@ -1423,13 +1423,13 @@ const Ye = L(Ae), Le = s.memo((e) => {
   }).className(l).props(a).children([
     at().src(r).alt(t || "").classNames(["absolute", "inset-0", "w-full", "h-full", "object-cover", "transition-transform", "duration-500"]).style({ position: "absolute", inset: 0, width: "100%", height: "100%" }).build(),
     T().classNames(["absolute", "inset-0", "bg-gradient-to-t", "from-black/80", "via-black/20", "to-transparent"]).build(),
-    F().classNames(["absolute", "bottom-0", "left-0", "p-6"]).gap(4).children([
+    G().classNames(["absolute", "bottom-0", "left-0", "p-6"]).gap(4).children([
       N(o).color("white").fontSize(12).classNames(["opacity-90", "mb-1", "uppercase", "tracking-wider"]).fontWeight(600).build(),
       N(t).color("white").fontSize(22).fontWeight(700).build(),
       W().gap(6).alignItems("center").children([
         N("Created by").color("white").fontSize(13).classNames(["opacity-80"]).build(),
         N(i).color("white").fontSize(13).fontWeight(600).build(),
-        G.Verify
+        F.Verify
       ]).build()
     ]).build()
   ]).build();
@@ -1533,9 +1533,9 @@ export {
   Me as B,
   Z as C,
   Oe as G,
-  Ve as L,
+  He as L,
   Ye as P,
-  He as T,
+  Ve as T,
   Ke as a,
   qe as b,
   Je as c,

package/dist/{index-BxYsYMal.js → index-Dm9qGQyL.js}

@@ -2,8 +2,8 @@ var ae = Object.defineProperty;
 var ie = (s, r, e) => r in s ? ae(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
 var i = (s, r, e) => ie(s, typeof r != "symbol" ? r + "" : r, e);
 import t from "react";
-import { b2 as I, b3 as $, b6 as z, b9 as R, b7 as q, z as le, bd as Z, bB as oe } from "./client-Cc87LXic.js";
-import { a as F } from "./icons-By9BFp7V.js";
+import { b4 as I, b5 as $, b8 as z, bb as R, b9 as q, z as le, bf as Z, bE as oe } from "./client-CNrWulRU.js";
+import { a as F } from "./icons-CUjbVN8n.js";
 function ce(s, r) {
   if (!(typeof r != "string" || !z(r)))
     for (const e of R(r))

package/dist/index.d.ts

@@ -892,6 +892,8 @@ export declare class PseudoStateBuilder {
 	translateY(value: number | string): this;
 	rotate(degrees: number): this;
 	shadow(value: string | number): this;
+	/** Same surface as `Box().css({})` — object bag or `(property, value)`. */
+	css(styles: React$1.CSSProperties): this;
 	css(property: string, value: string | number): this;
 	padding(value: string | number): this;
 	p(value: string | number): this;
@@ -1215,6 +1217,11 @@ export declare function stackAlignFlex(align?: StackAlign | keyof typeof StackAl
 	alignItems: string;
 	justifyContent: string;
 };
+/**
+ * CSS `object-position` for `Image.scaledToFill()` / `object-fit: cover` crops.
+ * Prefer faces/horizon with `StackAlign.top` / `topLeft` on portrait→wide heroes.
+ */
+export declare function stackAlignObjectPosition(align?: StackAlign | keyof typeof StackAlign | string): string;
 export declare const Theme: {
 	readonly material: "material";
 	readonly cupertino: "cupertino";
@@ -1470,6 +1477,7 @@ export type FrameSize = number | string | Size;
  * ```ts
  * .frame({ width: 300, height: 400 })
  * .frame({ maxWidth: Size.infinity, maxHeight: Size.infinity, alignment: StackAlign.topTrailing })
+ * .frame({ maxWidth: Size.infinity, fill: true }) // child stretches — bg/border fill the slot
  * ```
  */
 export interface FrameSpec {
@@ -1482,6 +1490,12 @@ export interface FrameSpec {
 	idealHeight?: FrameSize;
 	maxHeight?: FrameSize;
 	alignment?: StackAlign | keyof typeof StackAlign;
+	/**
+	 * Stretch the direct child to the frame slot (`width/height: 100%`).
+	 * Default `false` — SwiftUI-like hug + `alignment`.
+	 * Use when paint (`.bg`, border) lives on the child and should fill the frame.
+	 */
+	fill?: boolean;
 }
 /** Resolve a frame size to a CSS length. `Size.infinity` → fill parent (`100%`). */
 export declare function resolveFrameSize(value: FrameSize | undefined, role: "min" | "ideal" | "max" | "fixed", axis?: "width" | "height"): string | undefined;
@@ -2056,9 +2070,12 @@ declare abstract class FiboBuilder {
 	 *   maxHeight: Size.infinity,
 	 *   alignment: StackAlign.topTrailing,
 	 * })
+	 * // Child fills the slot (bg/border on the child cover the frame):
+	 * Box().bg('red').frame({ maxWidth: Size.infinity, fill: true })
 	 * ```
 	 *
 	 * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
+	 * Default: child hugs + `alignment`. Pass `fill: true` to stretch the child.
 	 */
 	frame(spec: FrameSpec): this;
 	/**
@@ -2585,9 +2602,38 @@ type KnownKeys<T> = {
 } extends {
 	[_ in keyof T]: infer U;
 } ? U : never;
-type StyleBuilder<T> = T & LogicalAxes & {
+/**
+ * Fluent CSS methods on every builder. Kept as a named exported type so
+ * `index.d.ts` references `StyleBuilder<T>` instead of expanding the CSS map
+ * into every widget (that blew the file past 20MB and also typed chains as `any`).
+ */
+export type StyleBuilder<T> = T & LogicalAxes & {
 	[K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
 } & React$1.ReactElement;
+/**
+ * Like `React.memo`, but for fluent builders: write a normal function that
+ * returns a builder — `createComponent` keeps every method of that return
+ * (`GlassField().label().name()…`). No `fn('label', { opts })` bags.
+ *
+ * ```ts
+ * // Preferred — your component is a normal function:
+ * const glassField = () => {
+ *   return TextField().variant('outlined').rounded(16).className('cubee-field')
+ * }
+ * export const GlassField = createComponent(glassField)
+ * GlassField().label('E-mail').name('email').type('email')
+ *
+ * // Optional — base factory + body gets `{ f }` (same idea as props):
+ * export const GlassField = createComponent(TextField, ({ f }) => {
+ *   return f.variant('outlined').rounded(16).className('cubee-field')
+ * })
+ * ```
+ */
+export declare function createComponent<Args extends any[], B>(factory: (...args: Args) => B, setup?: (ctx: {
+	f: B;
+}) => B | void): (...args: Args) => B;
+/** @deprecated Prefer `createComponent` — same behavior. */
+export declare const preset: typeof createComponent;
 interface SignalLike<T> {
 	value: T;
 	subscribe: (listener: (val: T) => void) => () => void;
@@ -3388,6 +3434,8 @@ export declare const DashboardLayout: () => StyleBuilder<DashboardLayoutBuilder>
  *
  * You do **not** have to repeat `.frame` on the ZStack when the base is already
  * framed; an extra `.frame` on the stack still wins (wraps / clamps).
+ * Host `.width(Size.full)` / `.height(n)` win over the promoted base frame on
+ * that axis (full-bleed hero: wide image frame + `w-full` stack).
  *
  * **Hit-testing (SwiftUI):** taps on containers only hit drawn content unless
  * `.contentShape(Rectangle())` is set (or a gesture auto-defaults it).
@@ -3850,10 +3898,12 @@ declare class LabelBuilder extends FiboBuilder {
 }
 export declare const Label: (text?: string | undefined) => StyleBuilder<LabelBuilder>;
 type ClipShape$1 = "circle" | "rounded" | "square";
+type ImagePosition = StackAlign | keyof typeof StackAlign | string;
 declare class ImageBuilder extends FiboBuilder {
 	private _src;
 	private _alt;
 	private _fit;
+	private _objectPosition?;
 	private _resizable;
 	/** Image-native clip (Tailwind / borderRadius on `<img>`). Distinct from
 	 * {@link FiboBuilder.clipShape} chrome wrapper. */
@@ -3866,7 +3916,16 @@ declare class ImageBuilder extends FiboBuilder {
 	alt(value: string): this;
 	resizable(): this;
 	scaledToFit(): this;
-	scaledToFill(): this;
+	/**
+	 * Cover the frame (`object-fit: cover`). Optional alignment biases the crop
+	 * — e.g. `scaledToFill(StackAlign.top)` keeps faces in a wide short hero.
+	 */
+	scaledToFill(alignment?: ImagePosition): this;
+	/**
+	 * CSS `object-position` for cover/contain crops.
+	 * Accepts {@link StackAlign} (`top`, `topLeft`, …) or a raw CSS value (`'50% 20%'`).
+	 */
+	objectPosition(value: ImagePosition): this;
 	/**
 	 * Fixed numeric `{ width, height }` still paints on the `<img>` (tests +
 	 * object-fit). Any flexible SwiftUI frame (`maxWidth: Size.infinity`, …)