fiboui 2.8.3 → 2.8.5

package/dist/structure.js

@@ -1,18 +1,18 @@
-import { au as r, aw as e, av as o } from "./client-8KCOzRhg.js";
-import { A as C, B as d, C as i, c as l, d as n, G as T, b as f, L as m, P as p, T as x, a as B } from "./index-Bwb4FNoc.js";
+import { aA as r, aC as e, aB as o } from "./client-BzMPiV64.js";
+import { A as t, B as d, C as i, c as l, d as n, G as B, b as T, L as f, P as m, T as p, a as x } from "./index-B9YuBkEv.js";
 export {
-  C as AssetCard,
+  t as AssetCard,
   d as Banner,
   r as Box,
   i as Card,
   e as Collapse,
   l as CollectionCard,
   n as ContentCard,
-  T as Grid,
-  f as GridItem,
+  B as Grid,
+  T as GridItem,
   o as List,
-  m as ListTile,
-  p as ProfileCard,
-  x as Table,
-  B as Tags
+  f as ListTile,
+  m as ProfileCard,
+  p as Table,
+  x as Tags
 };

package/dist/theme.d.ts

@@ -1,2 +1,149 @@
-export { FiboThemeProvider, useFiboTheme, materialTheme, cupertinoTheme, webTheme, noirTheme, FIBO_THEMES, resolveTheme, copyWithTheme, extendTheme, themeToCssVars, themeToInlineStyle, themeToCssRule, themeClassName } from './index.js';
-export type { FiboThemeProviderProps, FiboThemePreset, ThemeInput, FiboThemePatch, FiboTheme, ThemeColors, ThemeTypography } from './index.js';
+// Generated by dts-bundle-generator v9.5.1
+
+import { CSSProperties, ReactNode } from 'react';
+
+type FiboThemeName = "material" | "cupertino" | "web" | "noir";
+interface TextStyle {
+	fontSize?: string | number;
+	fontWeight?: string | number;
+	fontFamily?: string;
+	color?: string;
+	lineHeight?: string | number;
+	letterSpacing?: string | number;
+}
+export interface ThemeColors {
+	primary: string;
+	primaryVariant?: string;
+	primaryContainer?: string;
+	onPrimaryContainer?: string;
+	secondary: string;
+	secondaryVariant?: string;
+	secondaryContainer?: string;
+	onSecondaryContainer?: string;
+	tertiary?: string;
+	onTertiary?: string;
+	tertiaryContainer?: string;
+	onTertiaryContainer?: string;
+	background: string;
+	surface: string;
+	surfaceVariant?: string;
+	onSurfaceVariant?: string;
+	error: string;
+	errorContainer?: string;
+	onErrorContainer?: string;
+	success?: string;
+	warning?: string;
+	info?: string;
+	onPrimary: string;
+	onSecondary: string;
+	onBackground: string;
+	onSurface: string;
+	onError: string;
+	/** Borders / hairlines — maps to `--fibo-outline`. */
+	outline?: string;
+	outlineVariant?: string;
+	/** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
+	surfaceContainerLow?: string;
+}
+export interface ThemeTypography {
+	h1: TextStyle;
+	h2: TextStyle;
+	h3: TextStyle;
+	h4: TextStyle;
+	h5: TextStyle;
+	h6: TextStyle;
+	body: TextStyle;
+	caption: TextStyle;
+	label: TextStyle;
+}
+interface ThemeSpacing {
+	xs: string;
+	sm: string;
+	md: string;
+	lg: string;
+	xl: string;
+}
+interface ThemeBorderRadius {
+	/** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
+	xs?: string;
+	sm: string;
+	md: string;
+	lg: string;
+	/** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
+	xl?: string;
+	full: string;
+}
+interface ThemeShadows {
+	sm: string;
+	md: string;
+	lg: string;
+}
+export interface FiboTheme {
+	name: FiboThemeName;
+	colors: ThemeColors;
+	typography: ThemeTypography;
+	spacing: ThemeSpacing;
+	borderRadius: ThemeBorderRadius;
+	shadows: ThemeShadows;
+	fontFamily: string;
+}
+/** Built-in presets. `noir` is the dark editorial theme (site / dense apps). */
+export declare const FIBO_THEMES: {
+	readonly material: FiboTheme;
+	readonly cupertino: FiboTheme;
+	readonly web: FiboTheme;
+	readonly noir: FiboTheme;
+};
+export type FiboThemePreset = keyof typeof FIBO_THEMES;
+export type ThemeInput = FiboTheme | FiboThemePreset;
+export declare function resolveTheme(input: ThemeInput): FiboTheme;
+export type FiboThemePatch = {
+	name?: string;
+	colors?: Partial<ThemeColors>;
+	typography?: Partial<Record<keyof ThemeTypography, Partial<TextStyle>>>;
+	spacing?: Partial<ThemeSpacing>;
+	borderRadius?: Partial<ThemeBorderRadius>;
+	shadows?: Partial<ThemeShadows>;
+	fontFamily?: string;
+};
+/** Flutter-style copyWith / SwiftUI environment override. */
+export declare function copyWithTheme(base: FiboTheme, patch: FiboThemePatch): FiboTheme;
+/** Alias — SwiftUI/Flutter mental model. */
+export declare const extendTheme: typeof copyWithTheme;
+/** Flat CSS custom properties for a theme (inline style or :root block). */
+export declare function themeToCssVars(theme: FiboTheme): Record<string, string>;
+/** Inline style object safe for React (CSSProperties + custom props). */
+export declare function themeToInlineStyle(theme: FiboTheme): CSSProperties;
+/** CSS rule body for `.fibo-theme-{name}` — SSR-safe, no useEffect. */
+export declare function themeToCssRule(theme: FiboTheme): string;
+export declare function themeClassName(theme: FiboTheme): string;
+interface FiboThemeContextValue {
+	theme: FiboTheme;
+	themeName: string;
+	setTheme: (input: ThemeInput) => void;
+}
+export interface FiboThemeProviderProps {
+	/** Preset name (`"noir"`) or full `FiboTheme` / `extendTheme(...)`. */
+	theme?: ThemeInput;
+	children: ReactNode;
+	/** Extra class on the theme root. */
+	className?: string;
+	/** Merge into the theme root style (after theme vars). */
+	style?: CSSProperties;
+}
+/**
+ * Theme environment (Flutter Theme / SwiftUI Environment).
+ * SSR-safe: class + CSS vars on first paint — no documentElement useEffect.
+ */
+export declare function FiboThemeProvider({ theme: themeProp, children, className, style, }: FiboThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useFiboTheme(): FiboThemeContextValue;
+export declare const materialTheme: FiboTheme;
+export declare const cupertinoTheme: FiboTheme;
+export declare const webTheme: FiboTheme;
+/**
+ * Obsidian editorial dark — Fibonacci site / dense dashboards.
+ * Apply fluently: `Column().theme("noir")` or `FiboThemeProvider({ theme: "noir" })`.
+ */
+export declare const noirTheme: FiboTheme;
+
+export {};

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { aL as s, aF as m, aN as h, aI as T, aO as o, aH as t, aK as r, aM as i, aS as l, aR as n, aP as F, aQ as b, aG as p, aJ as u } from "./client-8KCOzRhg.js";
+import { aR as s, aL as m, aT as h, aO as T, aU as o, aN as t, aQ as r, aS as i, aY as l, aX as n, aV as b, aW as p, aM as u, aP as C } from "./client-BzMPiV64.js";
 export {
   s as FIBO_THEMES,
   m as FiboThemeProvider,
@@ -10,8 +10,8 @@ export {
   i as resolveTheme,
   l as themeClassName,
   n as themeToCssRule,
-  F as themeToCssVars,
-  b as themeToInlineStyle,
-  p as useFiboTheme,
-  u as webTheme
+  b as themeToCssVars,
+  p as themeToInlineStyle,
+  u as useFiboTheme,
+  C as webTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fiboui",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "description": "Flutter/SwiftUI-inspired React UI — fluent builders, signals, and themes. https://fiboui.vercel.app",
   "type": "module",
   "main": "./dist/index.js",
@@ -60,7 +60,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --noEmit && vite build && vite build --config vite.server.config.ts && npm run build:dts && tsc --project tsconfig.cli.json",
-    "build:dts": "dts-bundle-generator --no-check --export-referenced-types false --external-imports=@metagptx/css-to-tailwind --external-imports=react --external-imports=react-dom --external-imports=leaflet -o dist/index.d.ts src/index.ts",
+    "build:dts": "node scripts/build-dts.mjs",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "test:ssr-e2e": "npm run build && npm --prefix examples/ssr-fixtures install && npm --prefix examples/ssr-fixtures run test:e2e",
@@ -73,7 +73,8 @@
     "prepublishOnly": "bash scripts/secret-scan.sh --pack",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "pack:local": "pnpm exec vite build && npm run build:dts && mkdir -p .pack && npm pack --pack-destination .pack && node -e \"const v=require('./package.json').version; console.log('packed .pack/fiboui-'+v+'.tgz')\""
   },
   "keywords": [
     "react",
@@ -112,6 +113,7 @@
     "@vitejs/plugin-react": "^4.2.0",
     "@vitest/coverage-v8": "^3.2.7",
     "autoprefixer": "^10.4.16",
+    "csstype": "3.2.3",
     "dts-bundle-generator": "^9.5.1",
     "eslint": "^9.39.5",
     "jsdom": "^26.1.0",

package/dist/page-FXW2hz2C.js

@@ -1,302 +0,0 @@
-var O = Object.defineProperty;
-var L = (e, t, n) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var w = (e, t, n) => L(e, typeof t != "symbol" ? t + "" : t, n);
-import { S as C, c as $, i as U, H as D, b1 as I, U as k, b2 as P, b3 as T, b4 as B } from "./client-8KCOzRhg.js";
-import m, { useSyncExternalStore as V } from "react";
-function j() {
-  return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `lst_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
-}
-function N(e) {
-  return typeof e._id == "string" && e._id.length > 0;
-}
-function F(e) {
-  return N(e) ? e : { ...e, _id: j() };
-}
-function M(e, t, n) {
-  if (typeof n == "function")
-    return n(e, t);
-  if (e != null && typeof e == "object") {
-    const r = e;
-    return r._id != null && r._id === n || r.id != null && r.id === n;
-  }
-  return e === n;
-}
-function R(e, t) {
-  if (typeof t == "function")
-    return F({ ...t(e), _id: e._id });
-  const { _id: n, ...r } = t;
-  return { ...e, ...r, _id: e._id };
-}
-function W(e, t, n) {
-  const r = e;
-  return (n && n.length > 0 ? n.map((i) => r[i]) : Object.entries(r).filter(([i]) => i !== "_id").map(([, i]) => i)).some((i) => i == null ? !1 : typeof i == "string" || typeof i == "number" || typeof i == "boolean" ? String(i).toLowerCase().includes(t) : !1);
-}
-class z extends C {
-  constructor(n = []) {
-    const r = (Array.isArray(n) ? n : []).map((s) => F(s));
-    super(r);
-    w(this, "_$length");
-    /** Full list. `.value` is this array, or a filtered slice while a view/filter is set. */
-    w(this, "_source");
-    w(this, "_query", "");
-    w(this, "_keys");
-    w(this, "_predicate");
-    this._source = r, this.publish();
-  }
-  get value() {
-    return super.value;
-  }
-  /**
-   * Replaces the full list, then reapplies the current view.
-   * In-place mutation of this array (`push` / `splice`) does not notify
-   * and does not write the stored list — assign a new array or use
-   * `add` / `update` / `remove`.
-   */
-  set value(n) {
-    this._source = n.map((r) => F(r)), this.publish();
-  }
-  /** Push the visible rows. Always a copy so `.value.splice` cannot write `_source`. */
-  publish() {
-    const r = !!this._query || !!this._predicate ? this._source.filter((s, i) => !(this._query && !W(s, this._query, this._keys) || this._predicate && !this._predicate(s, i))) : this._source.slice();
-    super.value = r;
-  }
-  get length() {
-    return this.value.length;
-  }
-  /**
-   * Reactive length for plain templates:
-   * `Text(\`Total todos: ${todos.$length}\`)`
-   *
-   * Embeds a marker via `interp()`; `Text` resolves it on each update.
-   * (`todos.length` is a plain number and still freezes — use `$length`.)
-   */
-  get $length() {
-    return this._$length || (this._$length = $(() => this.value.length)), U(this._$length);
-  }
-  /** Replace the whole array (missing `_id`s are generated). */
-  set(n) {
-    return this.value = n.map((r) => F(r)), this;
-  }
-  clear() {
-    return this.value = [], this;
-  }
-  /** Append items — each gets `_id` if not already set. Writes the full list. */
-  add(...n) {
-    return n.length === 0 ? this : (this.value = [...this._source, ...n.map((r) => F(r))], this);
-  }
-  /** Insert at index (clamped) in the full list. */
-  insert(n, r) {
-    const s = [...this._source], i = Math.max(0, Math.min(n, s.length));
-    return s.splice(i, 0, F(r)), this.value = s, this;
-  }
-  /**
-   * Patch by `_id` / `id` / predicate.
-   * `patch` can be a partial object or a mapper.
-   */
-  update(n, r) {
-    let s = !1;
-    const i = this._source.map((a, c) => M(a, c, n) ? (s = !0, R(a, r)) : a);
-    return s && (this.value = i), this;
-  }
-  /** Replace the first match (keeps original `_id` unless `item` already has one). */
-  replace(n, r) {
-    const s = this._source.findIndex((c, l) => M(c, l, n));
-    if (s < 0) return this;
-    const i = this._source[s], a = [...this._source];
-    return a[s] = N(r) ? r : { ...r, _id: i._id }, this.value = a, this;
-  }
-  /** Remove by `_id` / `id` / predicate. Alias: `delete`. */
-  remove(n) {
-    const r = this._source.filter((s, i) => !M(s, i, n));
-    return r.length !== this._source.length && (this.value = r), this;
-  }
-  delete(n) {
-    return this.remove(n);
-  }
-  find(n) {
-    return this._source.find((r, s) => M(r, s, n));
-  }
-  /**
-   * Show only rows that match `query`. The full list stays stored.
-   * `view('')` or `view()` shows every item again (does not clear `viewWhere`).
-   * `keys` limits the match to those fields (`['text']`).
-   */
-  view(n = "", r) {
-    return this._query = n.trim().toLowerCase(), this._keys = r, this.publish(), this;
-  }
-  /**
-   * Live predicate on `publish()` (AND with `view`/`search` query).
-   * `viewWhere()` with no fn (or `null`) clears it.
-   */
-  viewWhere(n) {
-    return this._predicate = typeof n == "function" ? n : void 0, this.publish(), this;
-  }
-  /**
-   * Same live view as `view()`, plus a copy of the visible rows.
-   * Bound List/Table update; `const hits = todos.search('x')` still works.
-   */
-  search(n, r) {
-    return this.view(n, r), [...this.value];
-  }
-  /**
-   * One-shot snapshot of `_source` (Array.filter). Does not change `.value`.
-   * Safe inside `computed(() => todos.filter(fn))`.
-   * `todos.set(todos.filter(fn))` replaces the full list (clearDone).
-   */
-  filter(n) {
-    return this._source.filter(n);
-  }
-  map(n) {
-    return this._source.map(n);
-  }
-  move(n, r) {
-    const s = [...this._source];
-    if (n < 0 || n >= s.length) return this;
-    const i = Math.max(0, Math.min(r, s.length - 1));
-    if (n === i) return this;
-    const [a] = s.splice(n, 1);
-    return s.splice(i, 0, a), this.value = s, this;
-  }
-}
-function H(e = []) {
-  return new z(e);
-}
-const te = H, A = {
-  linear: (e) => e,
-  easeIn: (e) => e * e,
-  easeOut: (e) => e * (2 - e),
-  easeInOut: (e) => e < 0.5 ? 2 * e * e : -1 + (4 - 2 * e) * e
-};
-function G(e, t, n) {
-  return e + (t - e) * n;
-}
-const h = /* @__PURE__ */ new WeakMap();
-function J() {
-  return typeof requestAnimationFrame == "function";
-}
-function K() {
-  return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function Q(e) {
-  const t = h.get(e);
-  t != null && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(t), h.delete(e);
-}
-C.prototype.spring = function(e, t = {}) {
-  this.animate(e, { ...t, curve: "spring", damping: t.damping ?? 26, stiffness: t.stiffness ?? 170 });
-};
-C.prototype.animate = function(e, t = {}) {
-  var p, f;
-  const n = this.value, r = e;
-  if (Q(this), !J() || K()) {
-    this.value = r, (p = t.onComplete) == null || p.call(t);
-    return;
-  }
-  if (t.curve === "spring") {
-    const o = typeof t.stiffness == "number" && Number.isFinite(t.stiffness) && t.stiffness > 0 ? t.stiffness : 170, g = typeof t.damping == "number" && Number.isFinite(t.damping) && t.damping >= 0 ? t.damping : 26, _ = typeof t.mass == "number" && Number.isFinite(t.mass) && t.mass > 0 ? t.mass : 1;
-    let y = n, v = typeof t.velocity == "number" && Number.isFinite(t.velocity) ? t.velocity : 0;
-    const S = 1 / 60, x = () => {
-      var b, u;
-      const q = -o * (y - r) - g * v;
-      if (v += q / _ * S, y += v * S, !Number.isFinite(y) || !Number.isFinite(v)) {
-        this.value = r, h.delete(this), (b = t.onComplete) == null || b.call(t);
-        return;
-      }
-      this.value = y, Math.abs(y - r) > 0.01 || Math.abs(v) > 0.01 ? h.set(this, requestAnimationFrame(x)) : (this.value = r, h.delete(this), (u = t.onComplete) == null || u.call(t));
-    };
-    h.set(this, requestAnimationFrame(x));
-    return;
-  }
-  const s = t.duration, i = typeof s == "number" && Number.isFinite(s) && s > 0 ? s : s === void 0 ? 300 : 0;
-  if (i === 0) {
-    this.value = r, (f = t.onComplete) == null || f.call(t);
-    return;
-  }
-  const a = A[t.curve || "easeOut"] ?? A.easeOut;
-  let c = null;
-  const l = (o) => {
-    var _;
-    c || (c = o);
-    const g = Math.min((o - c) / i, 1);
-    this.value = G(n, r, a(g)), g < 1 ? h.set(this, requestAnimationFrame(l)) : (h.delete(this), (_ = t.onComplete) == null || _.call(t));
-  };
-  h.set(this, requestAnimationFrame(l));
-};
-C.prototype.snapTo = function(e, t = {}) {
-  this.animate(e, { duration: 300, curve: "easeOut", ...t });
-};
-function ne(e = {}) {
-  return D(e.curve ?? "easeOut", {
-    stiffness: e.stiffness,
-    damping: e.damping,
-    mass: e.mass
-  });
-}
-function X(e, t = {}) {
-  const { styles: n = !0, meta: r } = t, s = [], i = [];
-  let a = "", c = 0, l = null, p = -1, f = null;
-  const o = /* @__PURE__ */ new Set();
-  function g(u) {
-    const d = [];
-    return typeof (r == null ? void 0 : r.title) == "string" && r.title.length > 0 && d.push(m.createElement("title", { key: "fibo-title" }, r.title)), typeof (r == null ? void 0 : r.description) == "string" && r.description.length > 0 && d.push(
-      m.createElement("meta", {
-        key: "fibo-description",
-        name: "description",
-        content: r.description
-      })
-    ), d.push(u), n && d.push(m.createElement(k)), m.createElement(m.Fragment, null, ...d);
-  }
-  function _() {
-    f || (f = new P(y));
-    let u;
-    const d = T(s, i, () => {
-      u = f.execute(() => I(e()));
-    });
-    return { tree: u, ...d.outcome };
-  }
-  function y() {
-    const u = _();
-    if (!(u.shape === a && !u.layout && B(i, u.slotCount))) {
-      a = u.shape, c += 1, l = g(u.tree), p = c;
-      for (const E of o) E();
-    }
-  }
-  function v() {
-    if (l && p === c) return l;
-    const u = _();
-    return a = u.shape, l = g(u.tree), p = c, l;
-  }
-  function S(u) {
-    return o.add(u), () => {
-      o.delete(u), o.size === 0 && f && (f.dispose(), f = null, l = null, p = -1);
-    };
-  }
-  function x() {
-    return c;
-  }
-  function q() {
-    return 0;
-  }
-  function b() {
-    return V(S, x, q), v();
-  }
-  return b.displayName = "FiboPage", r && (b.meta = r), b;
-}
-const re = X;
-function se(e) {
-  return m.createElement(
-    m.Fragment,
-    null,
-    I(e),
-    m.createElement(k)
-  );
-}
-export {
-  z as L,
-  ne as a,
-  re as b,
-  te as c,
-  F as e,
-  H as l,
-  X as p,
-  se as w
-};