fiboui 2.6.3 → 2.7.0

package/dist/index-D5Ru-8kF.js

@@ -1,608 +0,0 @@
-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 R, useState as I, useEffect as L } from "react";
-import { at as F, au as q, ay as T, S as G } from "./client-BtHxgLa_.js";
-const M = s.memo((a) => {
-  const {
-    text: n,
-    variant: e,
-    size: d,
-    onPress: p,
-    onHover: E,
-    disabled: N,
-    icon: S,
-    shape: b,
-    shadow: h,
-    tone: v,
-    motion: B,
-    expand: k,
-    className: w,
-    style: g,
-    type: _ = "button",
-    ...o
-  } = a, x = {
-    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 c = "rounded-[14px]";
-  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 || {}, 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" || m ? "" : x[d],
-    e === "raw" || r ? "" : c,
-    k ? "flex-1 w-full" : "",
-    `fibo-button-${e}`,
-    i,
-    w
-  ), 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,
-      onMouseEnter: E ? () => {
-        N || E();
-      } : o.onMouseEnter,
-      onClick: (P) => {
-        if (!N) {
-          if (!y && document.documentElement.classList.contains("fibo-theme-material") && e !== "raw") {
-            const V = P.currentTarget;
-            import("./effects-D16XdB_d.js").then(({ createRipple: H }) => {
-              H(P, V);
-            });
-          }
-          p == null || p();
-        }
-      },
-      disabled: N,
-      ...o,
-      type: _,
-      style: f
-    },
-    ...z
-  );
-});
-class $ extends q {
-  constructor(e = "") {
-    super();
-    t(this, "_text", "");
-    t(this, "_variant", "elevated");
-    t(this, "_size", "md");
-    t(this, "_onPress");
-    t(this, "_onHover");
-    t(this, "_disabled", !1);
-    t(this, "_icon");
-    t(this, "_shape", "default");
-    t(this, "_shadow", "none");
-    t(this, "_tone", "default");
-    t(this, "_motion", "default");
-    t(this, "_expand", !1);
-    t(this, "_htmlType", "button");
-    this.text(e);
-  }
-  text(e) {
-    return this._text = e, typeof e == "function" && this.observer(), this;
-  }
-  variant(e) {
-    return this._variant = e, this;
-  }
-  clean() {
-    return this._variant = "raw", this;
-  }
-  size(e) {
-    return this._size = e, this;
-  }
-  onPress(e) {
-    return this._onPress = e, this;
-  }
-  onHover(e) {
-    return this._onHover = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  icon(e) {
-    return this._icon = e, this;
-  }
-  shape(e) {
-    return this._shape = e, this;
-  }
-  shadow(e) {
-    return this._shadow = e, this;
-  }
-  tone(e) {
-    return this._tone = e, this;
-  }
-  motion(e) {
-    return this._motion = e, this;
-  }
-  expand(e = !0) {
-    return this._expand = e, 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(e) {
-    return this._htmlType = e, this;
-  }
-  htmlType(e) {
-    return this._htmlType = e, this;
-  }
-  /** Shortcut for `.htmlType('submit')` inside a `Form`. */
-  submit() {
-    return this._htmlType = "submit", this;
-  }
-  /** Shortcut for `.htmlType('reset')`. */
-  reset() {
-    return this._htmlType = "reset", this;
-  }
-  build() {
-    const e = this.getClassName(), p = {
-      text: typeof this._text == "function" ? this._text() : this._text,
-      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: e,
-      style: this.getStyle(),
-      children: this.processChildren(),
-      ...this._props,
-      type: this._htmlType
-    };
-    return s.createElement(M, p);
-  }
-}
-const Z = F($), j = s.memo((a) => {
-  const {
-    checked: n = !1,
-    controlled: e = !1,
-    onChange: d,
-    label: p,
-    disabled: E,
-    name: N,
-    value: S = "on",
-    rules: b,
-    error: h,
-    className: v,
-    style: B,
-    id: k
-  } = a, w = R(null), g = R(null), _ = n, [o, x] = I(_), c = e ? !!n : o;
-  L(() => {
-    if (e) return;
-    const r = w.current;
-    if (!r) return;
-    const l = () => x(r.checked), y = () => {
-      requestAnimationFrame(l);
-    };
-    r.addEventListener("fibo-sync", l);
-    const C = r.closest("form");
-    return C == null || C.addEventListener("reset", y), () => {
-      r.removeEventListener("fibo-sync", l), C == null || C.removeEventListener("reset", y);
-    };
-  }, [e]), L(() => {
-    const r = w.current, l = g.current;
-    if (!r) return;
-    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");
-    });
-  }, [b]);
-  const u = (r) => {
-    if (E) return;
-    const l = r.target.checked;
-    e || x(l), d == null || d(l);
-  }, 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 = 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"
-  ), m = {
-    ref: w,
-    id: k,
-    type: "checkbox",
-    role: "switch",
-    name: N,
-    value: S,
-    disabled: E,
-    className: "sr-only",
-    onChange: u
-  };
-  return e ? m.checked = !!n : m.defaultChecked = _, s.createElement(
-    "div",
-    {
-      ref: g,
-      className: T("fibo-switch-container", v)
-    },
-    s.createElement(
-      "label",
-      {
-        className: "fibo-switch flex items-center gap-3"
-      },
-      s.createElement(
-        "div",
-        {
-          className: i,
-          style: B,
-          "aria-hidden": !0
-        },
-        s.createElement("div", { className: f })
-      ),
-      p && s.createElement(
-        "span",
-        { className: "text-sm font-medium text-gray-700 select-none" },
-        p
-      ),
-      s.createElement("input", m)
-    ),
-    s.createElement(
-      "span",
-      {
-        className: "fibo-field-error text-[var(--fibo-error,#b91c1c)] text-xs mt-1 ml-1",
-        style: { display: h ? "" : "none" }
-      },
-      h || ""
-    )
-  );
-});
-class W extends q {
-  constructor() {
-    super(...arguments);
-    t(this, "_checked", !1);
-    t(this, "_controlled", !1);
-    t(this, "_onChange");
-    t(this, "_label");
-    t(this, "_disabled", !1);
-    t(this, "_name");
-    t(this, "_value", "on");
-    t(this, "_rules");
-    t(this, "_error");
-  }
-  checked(e) {
-    return this._checked = e, this;
-  }
-  /**
-   * Force controlled React `checked` (parent must setState). Default is uncontrolled.
-   */
-  controlled(e = !0) {
-    return this._controlled = e, this;
-  }
-  /** HTML `name` — required for `Form` FormData collection. */
-  name(e) {
-    return this._name = e, this;
-  }
-  /** Submit value when checked (HTML checkbox `value`, default `'on'`). */
-  value(e) {
-    return this._value = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  /** Rules collected by `Form` on submit (this field's own checks). */
-  rules(...e) {
-    return this._rules = e, this;
-  }
-  build() {
-    const e = {
-      checked: this._checked,
-      controlled: this._controlled,
-      onChange: this._onChange,
-      label: this._label,
-      disabled: this._disabled,
-      name: this._name,
-      value: this._value,
-      rules: this._rules,
-      error: this._error,
-      className: this.getClassName(),
-      style: this.getStyle(),
-      ...this._props
-    };
-    return s.createElement(j, e);
-  }
-}
-const ee = F(W), J = s.memo((a) => {
-  const {
-    value: n = "",
-    controlled: e = !1,
-    options: d = [],
-    onChange: p,
-    name: E,
-    direction: N,
-    className: S,
-    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;
-    if (!o) return;
-    const x = () => {
-      const i = o.querySelector('input[type="radio"]:checked');
-      g((i == null ? void 0 : i.value) ?? "");
-    }, c = () => {
-      requestAnimationFrame(x);
-    };
-    o.addEventListener("fibo-sync", x);
-    const u = o.closest("form");
-    return u == null || u.addEventListener("reset", c), () => {
-      o.removeEventListener("fibo-sync", x), u == null || u.removeEventListener("reset", c);
-    };
-  }, [e]), s.createElement(
-    "div",
-    {
-      ref: h,
-      role: "radiogroup",
-      className: T(
-        `fibo-radio-group flex ${N === "vertical" ? "flex-col gap-2" : "flex-row gap-4"}`,
-        S
-      ),
-      style: b
-    },
-    d.map((o) => {
-      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 = {
-        type: "radio",
-        name: B,
-        value: o.value,
-        disabled: c,
-        className: "sr-only",
-        onChange: () => {
-          c || (e || g(o.value), p == null || p(o.value));
-        }
-      };
-      return e ? i.checked = x : i.defaultChecked = k === o.value, s.createElement(
-        "label",
-        {
-          key: o.value,
-          className: `flex items-center gap-2 cursor-pointer ${c ? "opacity-50 cursor-not-allowed" : ""}`
-        },
-        s.createElement(
-          "div",
-          {
-            className: u,
-            "aria-hidden": !0
-          },
-          s.createElement("input", i)
-        ),
-        s.createElement("span", { className: "text-sm text-gray-700" }, o.label)
-      );
-    })
-  );
-});
-class K extends q {
-  constructor() {
-    super(...arguments);
-    t(this, "_value", "");
-    t(this, "_controlled", !1);
-    t(this, "_options", []);
-    t(this, "_onChange");
-    t(this, "_name");
-    t(this, "_direction", "vertical");
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  /**
-   * Force controlled React selection (parent must setState). Default is uncontrolled.
-   */
-  controlled(e = !0) {
-    return this._controlled = e, this;
-  }
-  options(e) {
-    return this._options = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  direction(e) {
-    return this._direction = e, this;
-  }
-  name(e) {
-    return this._name = e, this;
-  }
-  build() {
-    const e = {
-      value: this._value,
-      controlled: this._controlled,
-      options: this._options,
-      onChange: this._onChange,
-      name: this._name,
-      direction: this._direction,
-      className: this.getClassName(),
-      style: this.getStyle()
-    };
-    return s.createElement(J, e);
-  }
-}
-const te = F(K), O = s.memo((a) => {
-  const n = s.useId(), e = a.id || n, d = R(null), p = R(!1), {
-    containerClass: E,
-    containerStyle: N,
-    label: S,
-    error: b,
-    value: h,
-    controlled: v,
-    rules: B,
-    onChange: k,
-    onCommit: w,
-    ...g
-  } = a, _ = h instanceof G, o = typeof h == "string" ? h : _ ? h.value : "", [x, c] = I(o);
-  L(() => {
-    if (v) {
-      if (_)
-        return h.subscribe(c);
-      c(typeof h == "string" ? h : "");
-    }
-  }, [v, h, _]), L(() => v || !_ ? void 0 : h.subscribe((r) => {
-    if (p.current) return;
-    const l = d.current;
-    l && l.value !== r && (l.value = r);
-  }), [h, _, v]), s.useEffect(() => {
-    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");
-    });
-  }, [B]);
-  const f = {
-    key: "textarea",
-    ref: d,
-    id: e,
-    className: "fibo-textarea-input w-full p-4 text-base bg-transparent outline-none relative z-10",
-    onChange: (m) => {
-      const r = m.target.value;
-      v && c(r), _ && (p.current = !0, h.value = r, p.current = !1), k == null || k(r);
-    },
-    onBlur: (m) => {
-      var r;
-      w == null || w(m.target.value), (r = g.onBlur) == null || r.call(g, m);
-    },
-    ...g
-  };
-  return v ? f.value = x : f.defaultValue = o, s.createElement(
-    "div",
-    { className: E, style: N },
-    s.createElement("textarea", f),
-    S && s.createElement(
-      "label",
-      {
-        key: "label",
-        htmlFor: e,
-        className: "fibo-textarea-label"
-      },
-      S
-    ),
-    s.createElement(
-      "span",
-      {
-        className: "fibo-field-error text-[var(--fibo-error,#b91c1c)] text-xs mt-1 ml-1",
-        role: "alert",
-        style: { display: b ? "" : "none" }
-      },
-      b || ""
-    )
-  );
-});
-class Q extends q {
-  constructor(e = "") {
-    super();
-    t(this, "_value", "");
-    t(this, "_label", "");
-    t(this, "_placeholder", "");
-    t(this, "_name");
-    t(this, "_disabled", !1);
-    t(this, "_rows", 4);
-    t(this, "_error");
-    t(this, "_rules");
-    t(this, "_controlled", !1);
-    t(this, "_resize", "vertical");
-    t(this, "_onChange");
-    /** Fires on blur — prefer this over onChange to avoid work per keystroke. */
-    t(this, "_onCommit");
-    this._value = e;
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  /**
-   * Force controlled React `value` (re-renders every key). Default is uncontrolled.
-   * Prefer `.value(signal)` + read signal when needed, or `.onCommit`.
-   */
-  controlled(e = !0) {
-    return this._controlled = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  placeholder(e) {
-    return this._placeholder = e, this;
-  }
-  /** HTML `name` — required for `Form().onSubmit` FormData collection. */
-  name(e) {
-    return this._name = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  rows(e) {
-    return this._rows = e, this;
-  }
-  resize(e) {
-    return this._resize = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  /** Rules collected by `Form` on submit (this field's own checks). */
-  rules(...e) {
-    return this._rules = e, this;
-  }
-  /** Per-keystroke callback — does not re-render the field by itself. */
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  /** Fires when the field loses focus — use for validation / form sync. */
-  onCommit(e) {
-    return this._onCommit = e, this;
-  }
-  build() {
-    const d = {
-      containerClass: T("fibo-textarea-container w-full", ...this._classNames),
-      containerStyle: this.getStyle(),
-      label: this._label,
-      error: this._error,
-      rows: this._rows,
-      value: this._value,
-      controlled: this._controlled,
-      name: this._name,
-      placeholder: this._placeholder || " ",
-      disabled: this._disabled,
-      rules: this._rules,
-      style: { resize: this._resize },
-      onChange: this._onChange,
-      onCommit: this._onCommit,
-      ...this._props
-    };
-    return s.createElement(O, d);
-  }
-}
-const re = F(Q);
-export {
-  Z as B,
-  te as R,
-  ee as S,
-  re as T
-};