fiboui 2.6.3 → 2.7.0

package/dist/index-DVApKYWt.js

@@ -0,0 +1,217 @@
+var F = Object.defineProperty;
+var U = (e, r, t) => r in e ? F(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
+var i = (e, r, t) => U(e, typeof r != "symbol" ? r + "" : r, t);
+import _ from "react";
+import { aT as V, aU as X, aV as v, aW as C, aX as Y, aY as $ } from "./client-CGjHCx8F.js";
+function E(e, r) {
+  if (!(typeof r != "string" || !v(r)))
+    for (const t of Y(r))
+      e.bindSignal(t);
+}
+function y(e, r) {
+  if (typeof r == "function") {
+    try {
+      y(e, r());
+    } catch {
+    }
+    return;
+  }
+  if (typeof r == "string") {
+    E(e, r);
+    return;
+  }
+  if (Array.isArray(r))
+    for (const t of r) y(e, t);
+}
+function D(e) {
+  return typeof e == "string" && v(e) ? C(e) : e;
+}
+function c(e) {
+  return e === "submit" || e === "reset" || e === "button" ? e : "button";
+}
+const G = _.memo((e) => {
+  const {
+    text: r,
+    variant: t,
+    size: o,
+    onPress: u,
+    onHover: b,
+    disabled: p,
+    icon: g,
+    shape: d,
+    shadow: z,
+    tone: B,
+    motion: H,
+    expand: S,
+    className: k,
+    style: I,
+    type: N = "button",
+    bare: h,
+    onClick: x,
+    ...w
+  } = e, A = c(N), M = {
+    xs: "px-[21px] py-[8px] text-[10px] gap-[6px] h-auto tracking-[0.12em] font-normal",
+    sm: "px-[14px] py-[6px] text-[13px] gap-[6px] h-[32px]",
+    md: "px-[22px] py-[10px] text-[15px] gap-[8px] h-[44px]",
+    lg: "px-[32px] py-[16px] text-[17px] gap-[10px] h-[56px]"
+  };
+  let a = "rounded-[14px]";
+  d === "pill" ? a = "rounded-full" : d === "square" ? a = "rounded-[12px]" : d === "rect" ? a = "rounded-[2px]" : d === "rounded" ? a = "rounded-[8px]" : d === "sharp" && (a = "rounded-none");
+  const l = B === "inverse";
+  let s = "";
+  t === "ghost" ? s = l ? "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)]" : t === "text" ? s = l ? "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)]" : t === "soft" ? s = "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)]" : t === "outline" || t === "outlined" ? s = l ? "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)]" : t === "solid" ? s = l ? "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" : t === "filled" || t === "primary" ? s = "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-sm border-none hover:opacity-90 active:opacity-100" : t === "elevated" ? s = "bg-[var(--fibo-surface)] text-[var(--fibo-primary)] shadow-md border-none hover:shadow-lg" : t === "tonal" ? s = "bg-[var(--fibo-secondary-container)] text-[var(--fibo-on-secondary-container)] shadow-sm border-none" : t === "raw" && (s = "bg-transparent border-none shadow-none p-0 h-auto gap-0 text-inherit font-inherit hover:bg-transparent", a = ""), z === "soft" && t !== "raw" && (s += " shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)]");
+  const n = I || {}, P = n.padding !== void 0 || n.paddingTop !== void 0 || n.paddingBottom !== void 0 || n.paddingLeft !== void 0 || n.paddingRight !== void 0 || n.fontSize !== void 0 || n.height !== void 0, R = n.borderRadius !== void 0, W = n.fontWeight !== void 0 || o === "xs" || l, T = t === "raw" || H === "none" || l || o === "xs" || h;
+  h ? (s = "", a = "") : p && (s = s.replace(/\s*(hover|active):\S+/g, "").trim());
+  const q = $(
+    "fibo-button",
+    h ? "" : "relative overflow-hidden",
+    "inline-flex items-center justify-center whitespace-nowrap",
+    W || h ? "" : "font-semibold",
+    // Resting scale(1) so active:scale eases instead of snapping from none.
+    T || p ? "" : "scale-100 active:scale-[0.96] transform transition-transform duration-200 ease-out",
+    p ? "cursor-not-allowed opacity-60 pointer-events-none" : "cursor-pointer",
+    t === "raw" || h || P ? "" : M[o],
+    t === "raw" || h || R ? "" : a,
+    S ? "flex-1 w-full" : "",
+    `fibo-button-${t}`,
+    s,
+    k
+  ), f = [];
+  return g && f.push(g), r && f.push(r), e.children && (Array.isArray(e.children) ? f.push(...e.children) : f.push(e.children)), _.createElement(
+    "button",
+    {
+      className: q,
+      onMouseEnter: b ? () => {
+        p || b();
+      } : w.onMouseEnter,
+      onClick: (m) => {
+        if (!p) {
+          if (!T && document.documentElement.classList.contains("fibo-theme-material") && t !== "raw") {
+            const L = m.currentTarget;
+            import("./effects-BxvduC-G.js").then(({ createRipple: j }) => {
+              j(m, L);
+            });
+          }
+          u == null || u(), x == null || x(m);
+        }
+      },
+      disabled: p,
+      ...w,
+      type: A,
+      style: n
+    },
+    ...f
+  );
+});
+class J extends X {
+  constructor(t = "") {
+    super();
+    i(this, "_text", "");
+    i(this, "_variant", "elevated");
+    i(this, "_size", "md");
+    i(this, "_onPress");
+    i(this, "_onHover");
+    i(this, "_disabled", !1);
+    i(this, "_icon");
+    i(this, "_shape", "default");
+    i(this, "_shadow", "none");
+    i(this, "_tone", "default");
+    i(this, "_motion", "default");
+    i(this, "_expand", !1);
+    i(this, "_htmlType", "button");
+    i(this, "_htmlTypeExplicit", !1);
+    this.text(t);
+  }
+  text(t) {
+    return this._text = t, typeof t == "function" ? this.observer() : E(this, t), this;
+  }
+  children(t) {
+    return y(this, t), super.children(t);
+  }
+  variant(t) {
+    return this._variant = t, this;
+  }
+  clean() {
+    return this._variant = "raw", this;
+  }
+  size(t) {
+    return this._size = t, this;
+  }
+  onPress(t) {
+    return this._onPress = t, this;
+  }
+  onHover(t) {
+    return this._onHover = t, this;
+  }
+  disabled(t = !0) {
+    return this._disabled = t, this;
+  }
+  icon(t) {
+    return this._icon = t, this;
+  }
+  shape(t) {
+    return this._shape = t, this;
+  }
+  shadow(t) {
+    return this._shadow = t, this;
+  }
+  tone(t) {
+    return this._tone = t, this;
+  }
+  motion(t) {
+    return this._motion = t, this;
+  }
+  expand(t = !0) {
+    return this._expand = t, this;
+  }
+  /**
+   * 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(t) {
+    return this._htmlType = c(t), this._htmlTypeExplicit = !0, this;
+  }
+  htmlType(t) {
+    return this._htmlType = c(t), this._htmlTypeExplicit = !0, this;
+  }
+  /** Shortcut for `.htmlType('submit')` inside a `Form`. */
+  submit() {
+    return this._htmlType = "submit", this._htmlTypeExplicit = !0, this;
+  }
+  /** Shortcut for `.htmlType('reset')`. */
+  reset() {
+    return this._htmlType = "reset", this._htmlTypeExplicit = !0, this;
+  }
+  resolvedHtmlType() {
+    var t;
+    return this._htmlTypeExplicit ? c(this._htmlType) : c(((t = this._props) == null ? void 0 : t.type) ?? this._htmlType);
+  }
+  build() {
+    const t = this.getClassName(), o = typeof this._text == "function" ? this._text() : this._text, b = {
+      text: typeof o == "string" && v(o) ? C(o) : o,
+      variant: this._variant,
+      size: this._size,
+      onPress: this._onPress,
+      onHover: this._onHover,
+      disabled: this._disabled,
+      icon: this._icon,
+      shape: this._shape,
+      shadow: this._shadow,
+      tone: this._tone,
+      motion: this._motion,
+      expand: this._expand,
+      className: t,
+      style: this.getStyle(),
+      children: this.processChildren().map(D),
+      ...this._props,
+      type: this.resolvedHtmlType(),
+      bare: this.isReset()
+    };
+    return _.createElement(G, b);
+  }
+}
+const O = V(J);
+export {
+  O as B
+};

package/dist/index-Db8lVjta.js

@@ -0,0 +1,150 @@
+var w = Object.defineProperty;
+var S = (s, e, t) => e in s ? w(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var n = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
+import m from "react";
+import { aT as g, aU as d, aW as N, aV as _, aX as j } from "./client-CGjHCx8F.js";
+function C(s, e) {
+  if (!(typeof e != "string" || !_(e)))
+    for (const t of j(e))
+      s.bindSignal(t);
+}
+function l(s, e) {
+  if (typeof e == "function") {
+    try {
+      l(s, e());
+    } catch {
+    }
+    return;
+  }
+  if (typeof e == "string") {
+    C(s, e);
+    return;
+  }
+  if (Array.isArray(e))
+    for (const t of e) l(s, t);
+}
+function z(s) {
+  return typeof s == "string" && _(s) ? N(s) : s;
+}
+function B(s, e) {
+  const { children: t, ...r } = e, o = t !== void 0 ? t : s;
+  return { nodes: o == null ? [] : Array.isArray(o) ? o : [o], rest: r };
+}
+class I extends d {
+  constructor() {
+    super(...arguments);
+    n(this, "_mainAxisAlignment", "start");
+    // Flutter Column / SwiftUI VStack default: center. Stretch is opt-in.
+    n(this, "_crossAxisAlignment", "center");
+    n(this, "_spacing");
+    n(this, "_size");
+  }
+  children(t) {
+    return l(this, t), super.children(t);
+  }
+  props(t) {
+    return t && "children" in t && l(this, t.children), super.props(t);
+  }
+  mainAxisAlignment(t) {
+    return this._mainAxisAlignment = t, this;
+  }
+  crossAxisAlignment(t) {
+    return this._crossAxisAlignment = t, this;
+  }
+  spacing(t) {
+    return this._spacing = t, this;
+  }
+  size(t) {
+    return this._size = t, this;
+  }
+  build() {
+    const t = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      spaceBetween: "justify-between",
+      spaceAround: "justify-around",
+      spaceEvenly: "justify-evenly"
+    }, r = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    }, o = {
+      small: "flex-[0.3]",
+      medium: "flex-1",
+      large: "flex-[1.5]"
+    }, i = [
+      "fibo-column",
+      "flex",
+      "flex-col",
+      // min-w-0 / min-h-0: shrink inside flex/grid so nested overflow can scroll
+      this.isHug() ? "w-auto self-auto" : "w-full min-w-0 min-h-0",
+      t[this._mainAxisAlignment],
+      r[this._crossAxisAlignment],
+      this._size ? o[this._size] : "",
+      ...this._classNames
+    ], h = this.getStyle(), { nodes: c, rest: p } = B(this.processChildren(), this._props), { className: y, style: u, ...x } = p, A = [...i, y].filter(Boolean).join(" "), b = c.map(z), a = {
+      ...h,
+      ...u && typeof u == "object" ? u : {}
+    };
+    return this._spacing != null && this._spacing !== "" && (typeof this._spacing == "number" ? a.gap = `${this._spacing}px` : isNaN(Number(this._spacing)) ? a.gap = this._spacing : a.gap = `${Number(this._spacing) * 4}px`), m.createElement(
+      "div",
+      {
+        style: a,
+        ...x,
+        className: A
+      },
+      ...b
+    );
+  }
+}
+const F = g(I);
+function f(s) {
+  return typeof s == "number" ? `${s}px` : s;
+}
+function M(s) {
+  return s && typeof s == "object" && !Array.isArray(s) ? s : {};
+}
+class $ extends d {
+  constructor() {
+    super(...arguments);
+    n(this, "_height");
+    n(this, "_width");
+    n(this, "_grow");
+    n(this, "_expand");
+  }
+  height(t) {
+    return this._height = t, this;
+  }
+  width(t) {
+    return this._width = t, this;
+  }
+  vertical() {
+    return this._expand = !0, this;
+  }
+  horizontal() {
+    return this._expand = !0, this;
+  }
+  /** Grow factor inside a Row or Column. Does not turn the spacer into a flex container. */
+  flex(t = 1) {
+    const r = typeof t == "number" ? t : Number(t);
+    return this._grow = Number.isFinite(r) ? r : 1, this._expand = !0, this;
+  }
+  build() {
+    const { className: t, style: r, ...o } = this._props, i = { ...this.getStyle(), ...M(r) }, h = this._height != null || this._width != null, c = this._expand ?? !h;
+    this._height != null && (i.height = f(this._height)), this._width != null && (i.width = f(this._width)), c ? (i.flex = `${this._grow ?? 1} 1 0%`, i.alignSelf = i.alignSelf ?? "stretch", i.minWidth = i.minWidth ?? 0, i.minHeight = i.minHeight ?? 0) : i.flex = "0 0 auto";
+    const p = ["fibo-spacer", this.getClassName(), t].filter(Boolean).join(" ");
+    return m.createElement("div", {
+      ...o,
+      style: i,
+      className: p,
+      "aria-hidden": !0
+    });
+  }
+}
+const T = g($);
+export {
+  F as C,
+  T as S
+};