fiboui 2.5.0 → 2.6.1

package/dist/{index-CaC2tQbt.js → index-DswwFrZn.js}

@@ -1,8 +1,8 @@
 var A = Object.defineProperty;
 var D = (a, n, e) => n in a ? A(a, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[n] = e;
 var t = (a, n, e) => D(a, typeof n != "symbol" ? n + "" : n, e);
-import s, { useRef as T, useState as I, useEffect as L } from "react";
-import { at as F, au as q, ay as z, S as G } from "./client-C5fy1-Lh.js";
+import s, { useRef as R, useState as I, useEffect as L } from "react";
+import { at as F, au as q, ay as T, S as G } from "./client-De3cGjVE.js";
 const M = s.memo((a) => {
   const {
     text: n,
@@ -12,7 +12,7 @@ const M = s.memo((a) => {
     onHover: E,
     disabled: N,
     icon: S,
-    shape: m,
+    shape: b,
     shadow: h,
     tone: v,
     motion: B,
@@ -28,25 +28,25 @@ const M = s.memo((a) => {
     lg: "px-[32px] py-[16px] text-[17px] gap-[10px] h-[56px]"
   };
   let c = "rounded-[14px]";
-  m === "pill" ? c = "rounded-full" : m === "square" ? c = "rounded-[12px]" : m === "rect" ? c = "rounded-[2px]" : m === "rounded" ? c = "rounded-[8px]" : m === "sharp" && (c = "rounded-none");
+  b === "pill" ? c = "rounded-full" : b === "square" ? c = "rounded-[12px]" : b === "rect" ? c = "rounded-[2px]" : b === "rounded" ? c = "rounded-[8px]" : b === "sharp" && (c = "rounded-none");
   const u = v === "inverse";
   let i = "";
   e === "ghost" ? i = u ? "bg-transparent text-white shadow-none border border-transparent" : "bg-transparent text-[var(--fibo-on-surface)] shadow-none border border-transparent hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : e === "text" ? i = u ? "bg-transparent text-white shadow-none border-none px-2" : "bg-transparent text-[var(--fibo-on-surface)] shadow-none border-none px-2 hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : e === "soft" ? i = "bg-[color-mix(in_srgb,var(--fibo-primary)_12%,transparent)] text-[var(--fibo-primary)] shadow-none border-none hover:bg-[color-mix(in_srgb,var(--fibo-primary)_18%,transparent)]" : e === "outline" || e === "outlined" ? i = u ? "bg-black text-white shadow-none border border-[#3b3b3b]" : "bg-transparent border-[1.5px] border-[var(--fibo-outline,rgba(0,0,0,0.12))] text-[var(--fibo-on-surface)] shadow-none hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_6%,transparent)]" : e === "solid" ? i = u ? "bg-[#f2f2f2] text-black shadow-none border border-[#f2f2f2]" : "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-none border-none hover:opacity-90" : e === "filled" || e === "primary" ? i = "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-sm border-none hover:opacity-90 active:opacity-100" : e === "elevated" ? i = "bg-[var(--fibo-surface)] text-[var(--fibo-primary)] shadow-md border-none hover:shadow-lg" : e === "tonal" ? i = "bg-[var(--fibo-secondary-container)] text-[var(--fibo-on-secondary-container)] shadow-sm border-none" : e === "raw" && (i = "bg-transparent border-none shadow-none p-0 h-auto gap-0 text-inherit font-inherit hover:bg-transparent", c = ""), h === "soft" && e !== "raw" && (i += " shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)]");
-  const f = g || {}, b = f.padding !== void 0 || f.paddingTop !== void 0 || f.paddingBottom !== void 0 || f.paddingLeft !== void 0 || f.paddingRight !== void 0 || f.fontSize !== void 0 || f.height !== void 0, r = f.borderRadius !== void 0, l = f.fontWeight !== void 0 || d === "xs" || u, y = e === "raw" || B === "none" || u || d === "xs", C = z(
+  const f = g || {}, m = f.padding !== void 0 || f.paddingTop !== void 0 || f.paddingBottom !== void 0 || f.paddingLeft !== void 0 || f.paddingRight !== void 0 || f.fontSize !== void 0 || f.height !== void 0, r = f.borderRadius !== void 0, l = f.fontWeight !== void 0 || d === "xs" || u, y = e === "raw" || B === "none" || u || d === "xs", C = T(
     "fibo-button",
     "inline-flex items-center justify-center whitespace-nowrap",
     l ? "" : "font-semibold",
     // Resting scale(1) so active:scale eases instead of snapping from none.
     y ? "" : "scale-100 active:scale-[0.96] transform transition-transform duration-200 ease-out",
     N ? "cursor-not-allowed opacity-60" : "cursor-pointer",
-    e === "raw" || b ? "" : x[d],
+    e === "raw" || m ? "" : x[d],
     e === "raw" || r ? "" : c,
     k ? "flex-1 w-full" : "",
     `fibo-button-${e}`,
     i,
     w
-  ), R = [];
-  return S && R.push(S), n && R.push(n), a.children && (Array.isArray(a.children) ? R.push(...a.children) : R.push(a.children)), s.createElement(
+  ), z = [];
+  return S && z.push(S), n && z.push(n), a.children && (Array.isArray(a.children) ? z.push(...a.children) : z.push(a.children)), s.createElement(
     "button",
     {
       className: C,
@@ -69,7 +69,7 @@ const M = s.memo((a) => {
       type: _,
       style: f
     },
-    ...R
+    ...z
   );
 });
 class $ extends q {
@@ -130,9 +130,13 @@ class $ extends q {
     return this._expand = e, this;
   }
   /**
-   * HTML button type. Named `htmlType` because builders already expose React's
-   * element `.type` (stampRenderable) — that property must stay the component.
+   * HTML button type. `.type('submit')` is what people write inside a Form.
+   * React still reads `element.type` as the component: a string sets this,
+   * a props object renders the button.
    */
+  type(e) {
+    return this._htmlType = e, this;
+  }
   htmlType(e) {
     return this._htmlType = e, this;
   }
@@ -176,12 +180,12 @@ const Z = F($), j = s.memo((a) => {
     disabled: E,
     name: N,
     value: S = "on",
-    rules: m,
+    rules: b,
     error: h,
     className: v,
     style: B,
     id: k
-  } = a, w = T(null), g = T(null), _ = n, [o, x] = I(_), c = e ? !!n : o;
+  } = a, w = R(null), g = R(null), _ = n, [o, x] = I(_), c = e ? !!n : o;
   L(() => {
     if (e) return;
     const r = w.current;
@@ -197,24 +201,24 @@ const Z = F($), j = s.memo((a) => {
   }, [e]), L(() => {
     const r = w.current, l = g.current;
     if (!r) return;
-    m && (r.__fiboRules = m);
+    b && (r.__fiboRules = b);
     const y = l == null ? void 0 : l.querySelector(".fibo-field-error");
     l && (l.__fiboShowError = (C) => {
       y && (y.textContent = C ?? "", y.style.display = C ? "" : "none");
     });
-  }, [m]);
+  }, [b]);
   const u = (r) => {
     if (E) return;
     const l = r.target.checked;
     e || x(l), d == null || d(l);
-  }, i = z(
+  }, i = T(
     "fibo-switch-track w-[44px] h-[24px] rounded-full relative transition-colors duration-200 ease-in-out",
     E ? "cursor-not-allowed opacity-50" : "cursor-pointer",
     c ? "bg-[var(--fibo-primary,#3B82F6)]" : "bg-gray-200"
-  ), f = z(
+  ), f = T(
     "absolute w-5 h-5 rounded-full bg-white top-[2px] left-[2px] transition-transform duration-200 ease-in-out shadow-sm",
     c ? "translate-x-[20px]" : "translate-x-0"
-  ), b = {
+  ), m = {
     ref: w,
     id: k,
     type: "checkbox",
@@ -225,11 +229,11 @@ const Z = F($), j = s.memo((a) => {
     className: "sr-only",
     onChange: u
   };
-  return e ? b.checked = !!n : b.defaultChecked = _, s.createElement(
+  return e ? m.checked = !!n : m.defaultChecked = _, s.createElement(
     "div",
     {
       ref: g,
-      className: z("fibo-switch-container", v)
+      className: T("fibo-switch-container", v)
     },
     s.createElement(
       "label",
@@ -250,7 +254,7 @@ const Z = F($), j = s.memo((a) => {
         { className: "text-sm font-medium text-gray-700 select-none" },
         p
       ),
-      s.createElement("input", b)
+      s.createElement("input", m)
     ),
     s.createElement(
       "span",
@@ -335,8 +339,8 @@ const ee = F(W), J = s.memo((a) => {
     name: E,
     direction: N,
     className: S,
-    style: m
-  } = a, h = T(null), v = s.useId(), B = E || v, k = n, [w, g] = I(k), _ = e ? n : w;
+    style: b
+  } = a, h = R(null), v = s.useId(), B = E || v, k = n, [w, g] = I(k), _ = e ? n : w;
   return L(() => {
     if (e) return;
     const o = h.current;
@@ -357,14 +361,14 @@ const ee = F(W), J = s.memo((a) => {
     {
       ref: h,
       role: "radiogroup",
-      className: z(
+      className: T(
         `fibo-radio-group flex ${N === "vertical" ? "flex-col gap-2" : "flex-row gap-4"}`,
         S
       ),
-      style: m
+      style: b
     },
     d.map((o) => {
-      const x = _ === o.value, c = o.disabled, u = z(
+      const x = _ === o.value, c = o.disabled, u = T(
         "relative flex items-center justify-center w-[18px] h-[18px] rounded-full transition-all duration-200",
         x ? "border-[5px] border-[var(--fibo-primary,#3B82F6)]" : "border-2 border-gray-300"
       ), i = {
@@ -442,11 +446,11 @@ class K extends q {
   }
 }
 const te = F(K), O = s.memo((a) => {
-  const n = s.useId(), e = a.id || n, d = T(null), p = T(!1), {
+  const n = s.useId(), e = a.id || n, d = R(null), p = R(!1), {
     containerClass: E,
     containerStyle: N,
     label: S,
-    error: m,
+    error: b,
     value: h,
     controlled: v,
     rules: B,
@@ -465,10 +469,10 @@ const te = F(K), O = s.memo((a) => {
     const l = d.current;
     l && l.value !== r && (l.value = r);
   }), [h, _, v]), s.useEffect(() => {
-    const b = d.current;
-    if (!b) return;
-    B && (b.__fiboRules = B);
-    const r = b.closest(".fibo-textarea-container"), l = r == null ? void 0 : r.querySelector(".fibo-field-error");
+    const m = d.current;
+    if (!m) return;
+    B && (m.__fiboRules = B);
+    const r = m.closest(".fibo-textarea-container"), l = r == null ? void 0 : r.querySelector(".fibo-field-error");
     r && (r.__fiboShowError = (y) => {
       l && (l.textContent = y ?? "", l.style.display = y ? "" : "none");
     });
@@ -478,13 +482,13 @@ const te = F(K), O = s.memo((a) => {
     ref: d,
     id: e,
     className: "fibo-textarea-input w-full p-4 text-base bg-transparent outline-none relative z-10",
-    onChange: (b) => {
-      const r = b.target.value;
+    onChange: (m) => {
+      const r = m.target.value;
       v && c(r), _ && (p.current = !0, h.value = r, p.current = !1), k == null || k(r);
     },
-    onBlur: (b) => {
+    onBlur: (m) => {
       var r;
-      w == null || w(b.target.value), (r = g.onBlur) == null || r.call(g, b);
+      w == null || w(m.target.value), (r = g.onBlur) == null || r.call(g, m);
     },
     ...g
   };
@@ -506,9 +510,9 @@ const te = F(K), O = s.memo((a) => {
       {
         className: "fibo-field-error text-[var(--fibo-error,#b91c1c)] text-xs mt-1 ml-1",
         role: "alert",
-        style: { display: m ? "" : "none" }
+        style: { display: b ? "" : "none" }
       },
-      m || ""
+      b || ""
     )
   );
 });
@@ -576,7 +580,7 @@ class Q extends q {
   }
   build() {
     const d = {
-      containerClass: z("fibo-textarea-container w-full", ...this._classNames),
+      containerClass: T("fibo-textarea-container w-full", ...this._classNames),
       containerStyle: this.getStyle(),
       label: this._label,
       error: this._error,

package/dist/index.d.ts

@@ -153,16 +153,30 @@ export declare function ensureListId<T extends object>(item: T): ListEntity<T>;
  * Reactive list — auto-stamps a UUID `_id` on every object.
  * Use `_id` for update/remove/find; your domain fields stay free of ids.
  *
+ * `view('ship')` shows a subset. The full list stays in memory, so
+ * `view('')` shows every item again. `add` always writes to the full list.
+ *
  * ```ts
  * const todos = listSignal<{ title: string }>([])
  * todos.add({ title: 'Ship' })              // → { title: 'Ship', _id: '…' }
  * todos.update(todo._id, { title: 'Done' })
+ * todos.view('done')
+ * todos.view('')
  * todos.remove(todo._id)
  * ```
  */
 export declare class ListSignal<T extends object> extends Signal<ListEntity<T>[]> {
 	private _$length?;
+	/** Full list. `.value` is this array, or a filtered slice while `view` is set. */
+	private _source;
+	private _query;
+	private _keys?;
 	constructor(initial?: Array<T | ListEntity<T>>);
+	get value(): ListEntity<T>[];
+	/** Replaces the full list, then reapplies the current view. */
+	set value(next: ListEntity<T>[]);
+	/** Push the visible rows. An empty query shows `_source` itself. */
+	private publish;
 	get length(): number;
 	/**
 	 * Reactive length for plain templates:
@@ -175,9 +189,9 @@ export declare class ListSignal<T extends object> extends Signal<ListEntity<T>[]
 	/** Replace the whole array (missing `_id`s are generated). */
 	set(items: Array<T | ListEntity<T>>): this;
 	clear(): this;
-	/** Append items — each gets `_id` if not already set. */
+	/** Append items — each gets `_id` if not already set. Writes the full list. */
 	add(...items: Array<T | ListEntity<T>>): this;
-	/** Insert at index (clamped). */
+	/** Insert at index (clamped) in the full list. */
 	insert(index: number, item: T | ListEntity<T>): this;
 	/**
 	 * Patch by `_id` / `id` / predicate.
@@ -190,6 +204,13 @@ export declare class ListSignal<T extends object> extends Signal<ListEntity<T>[]
 	remove(matcher: ListMatcher<ListEntity<T>>): this;
 	delete(matcher: ListMatcher<ListEntity<T>>): this;
 	find(matcher: ListMatcher<ListEntity<T>>): ListEntity<T> | undefined;
+	/**
+	 * Show only rows that match `query`. The full list stays stored.
+	 * `view('')` or `view()` shows every item again.
+	 * `keys` limits the match to those fields (`['text']`).
+	 */
+	view(query?: string, keys?: (keyof T)[]): this;
+	/** One-shot search. Does not change what `.value` shows. */
 	search(query: string, keys?: (keyof T)[]): ListEntity<T>[];
 	filter(predicate: (item: ListEntity<T>, index: number) => boolean): ListEntity<T>[];
 	map<U>(fn: (item: ListEntity<T>, index: number) => U): U[];
@@ -815,8 +836,12 @@ declare abstract class FiboBuilder {
 	paddingVertical(value: string | number): this;
 	marginHorizontal(value: string | number): this;
 	marginVertical(value: string | number): this;
+	/** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
+	protected layoutStyle(patch: React$1.CSSProperties): this;
 	flexDirection(direction: "row" | "column"): this;
-	alignItems(alignment: "start" | "center" | "end" | "stretch"): this;
+	alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
+	alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
+	flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
 	/**
 	 * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
 	 * names (`space-between` / `spaceBetween`).
@@ -5709,11 +5734,14 @@ export declare const Row: () => RowBuilder & LogicalAxes & {
 declare class SpacerBuilder extends FiboBuilder {
 	private _height?;
 	private _width?;
-	private _direction?;
+	private _grow?;
+	private _expand?;
 	height(value: string | number): this;
 	width(value: string | number): this;
 	vertical(): this;
 	horizontal(): this;
+	/** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
+	flex(value?: number | string): this;
 	build(): React$1.ReactElement;
 }
 export declare const Spacer: () => SpacerBuilder & LogicalAxes & {
@@ -23240,9 +23268,11 @@ declare class ButtonBuilder extends FiboBuilder {
 	motion(value: ButtonMotion): this;
 	expand(value?: boolean): this;
 	/**
-	 * HTML button type. Named `htmlType` because builders already expose React's
-	 * element `.type` (stampRenderable) — that property must stay the component.
+	 * HTML button type. `.type('submit')` is what people write inside a Form.
+	 * React still reads `element.type` as the component: a string sets this,
+	 * a props object renders the button.
 	 */
+	type(value: "button" | "submit" | "reset"): this;
 	htmlType(value: "button" | "submit" | "reset"): this;
 	/** Shortcut for `.htmlType('submit')` inside a `Form`. */
 	submit(): this;