@tempots/beatui 0.86.0 → 0.87.0

package/dist/input-container-Nx0gMAzS.js

@@ -1,258 +0,0 @@
-import { prop as _, Use as B, html as k, attr as d, computedOf as p, aria as w, When as D, Fragment as $, style as y, on as E, Value as I, Empty as V, WithElement as j, OnDispose as S } from "@tempots/dom";
-import { t as g, b as x, h as c, a as f, B as O, I as L } from "./translations-BGblCUBj.js";
-import { ElementRect as U } from "@tempots/ui";
-function W(s, e, n, t) {
-  const r = [
-    "bc-button",
-    `bc-button--size-${s}`,
-    `bc-control--padding-${s}`,
-    `bc-control--rounded-${e}`
-  ];
-  return n && r.push("bc-button--loading"), t && r.push("bc-button--full-width"), r.join(" ");
-}
-function q(s, e, n) {
-  const t = /* @__PURE__ */ new Map();
-  t.set("--button-text-shadow", "var(--text-shadow-none)"), t.set("--button-text-shadow-dark", "var(--text-shadow-none)");
-  const r = (o, a, l, i) => {
-    n || (t.set("--button-bg-hover", o), t.set("--button-text-hover", l), t.set("--button-bg-hover-dark", a), t.set("--button-text-hover-dark", i));
-  };
-  switch (s) {
-    case "filled": {
-      const o = x(e, "solid", "light"), a = x(e, "solid", "dark");
-      t.set("--button-bg", o.backgroundColor), t.set("--button-text", o.textColor), t.set("--button-bg-dark", a.backgroundColor), t.set("--button-text-dark", a.textColor), t.set(
-        "--button-text-shadow",
-        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
-      ), t.set(
-        "--button-text-shadow-dark",
-        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
-      );
-      const l = c(e, "solid", "light"), i = c(e, "solid", "dark");
-      r(
-        l.backgroundColor,
-        i.backgroundColor,
-        l.textColor,
-        i.textColor
-      );
-      break;
-    }
-    case "light": {
-      const o = x(e, "light", "light"), a = x(e, "light", "dark");
-      t.set("--button-bg", o.backgroundColor), t.set("--button-text", o.textColor), t.set("--button-bg-dark", a.backgroundColor), t.set("--button-text-dark", a.textColor);
-      const l = c(e, "light", "light"), i = c(e, "light", "dark");
-      r(
-        l.backgroundColor,
-        i.backgroundColor,
-        l.textColor,
-        i.textColor
-      );
-      break;
-    }
-    case "outline": {
-      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-border", f(e, "light")), t.set("--button-border-dark", f(e, "dark")), t.set("--button-text", g(e, "light")), t.set("--button-text-dark", g(e, "dark")), t.set(
-        "--button-text-shadow",
-        "var(--text-shadow-button-light, var(--text-shadow-xs))"
-      ), t.set(
-        "--button-text-shadow-dark",
-        "var(--text-shadow-button-light, var(--text-shadow-xs))"
-      );
-      const o = c(e, "light", "light"), a = c(e, "light", "dark");
-      r(
-        o.backgroundColor,
-        a.backgroundColor,
-        o.textColor,
-        a.textColor
-      );
-      break;
-    }
-    case "dashed": {
-      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-border", f(e, "light")), t.set("--button-border-dark", f(e, "dark")), t.set("--button-border-style", "dashed"), t.set("--button-text", g(e, "light")), t.set("--button-text-dark", g(e, "dark"));
-      const o = c(e, "light", "light"), a = c(e, "light", "dark");
-      r(
-        o.backgroundColor,
-        a.backgroundColor,
-        o.textColor,
-        a.textColor
-      );
-      break;
-    }
-    case "default": {
-      const o = x("neutral", "light", "light"), a = x("neutral", "light", "dark");
-      t.set("--button-bg", o.backgroundColor), t.set("--button-text", g(e, "light")), t.set("--button-bg-dark", a.backgroundColor), t.set("--button-text-dark", g(e, "dark")), t.set(
-        "--button-text-shadow",
-        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
-      ), t.set(
-        "--button-text-shadow-dark",
-        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
-      );
-      const l = c("base", "light", "light"), i = c("base", "light", "dark");
-      r(
-        l.backgroundColor,
-        i.backgroundColor,
-        t.get("--button-text") ?? o.textColor,
-        t.get("--button-text-dark") ?? a.textColor
-      );
-      break;
-    }
-    case "text": {
-      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-text", g(e, "light")), t.set("--button-text-dark", g(e, "dark")), n || t.set("--button-hover-decoration", "underline");
-      break;
-    }
-  }
-  return Array.from(t.entries()).map(([o, a]) => `${o}: ${a}`).join("; ");
-}
-function P({
-  type: s = "button",
-  disabled: e = !1,
-  loading: n = !1,
-  variant: t = "filled",
-  size: r = "md",
-  color: o = "base",
-  roundedness: a = "sm",
-  onClick: l = () => {
-  },
-  fullWidth: i = !1,
-  stopPropagation: v = !0
-}, ...C) {
-  const u = _(null);
-  return B(
-    O,
-    (h) => k.button(
-      d.type(s),
-      d.disabled(
-        p(
-          e,
-          n
-        )((b, m) => b || m)
-      ),
-      // Add ARIA attributes for accessibility
-      w.busy(n ?? !1),
-      D(n ?? !1, () => w.label(h.$.loadingExtended)),
-      d.class(
-        p(r, a, n, i)(W)
-      ),
-      d.style(p(t, o, e)(q)),
-      D(
-        n ?? !1,
-        () => $(
-          y.width(
-            u.map((b) => b == null ? "" : `${b.width}px`)
-          ),
-          y.height(
-            u.map((b) => b == null ? "" : `${b.height}px`)
-          ),
-          L({ icon: "line-md:loading-twotone-loop", size: r ?? "md" }),
-          // Hidden live region for screen reader announcements
-          k.span(
-            d.class("sr-only"),
-            w.live("polite"),
-            h.$.loadingExtended
-          )
-        ),
-        () => $(
-          E.click((b) => {
-            s !== "submit" && b.preventDefault(), v && b.stopPropagation(), l();
-          }),
-          ...C
-        )
-      ),
-      D(
-        n != null,
-        () => U((b) => (b.on((m) => {
-          I.get(n ?? !1) || u.set(m);
-        }), V))
-      )
-    )
-  );
-}
-function z(s, e, n) {
-  const t = [
-    s ? "bc-base-input-container" : "bc-input-container"
-  ];
-  return e ? t.push(
-    s ? "bc-base-input-container--disabled" : "bc-input-container--disabled"
-  ) : t.push(
-    s ? "bc-base-input-container--default" : "bc-input-container--default"
-  ), n && t.push("bc-input-container--error"), t.join(" ");
-}
-function A(s, e) {
-  const n = ["bc-input-container__input"];
-  return s || (n.push(`bc-control--padding-${e}`), n.push(`bc-control--text-size-${e}`)), n.join(" ");
-}
-const R = ({
-  baseContainer: s,
-  disabled: e,
-  input: n,
-  before: t,
-  after: r,
-  hasError: o,
-  focusableSelector: a = "input, select, textarea",
-  growInput: l = !0,
-  size: i
-}, ...v) => {
-  const C = I.map(e ?? !1, (u) => u);
-  return k.div(
-    j((u) => {
-      const h = () => {
-        u.querySelector(a)?.focus();
-      };
-      return u.addEventListener("click", h), S(() => u.removeEventListener("click", h));
-    }),
-    d.class(
-      p(
-        s,
-        C,
-        o ?? !1
-        // size ?? 'md'
-      )(
-        (u, h, b) => z(
-          u ?? !1,
-          h ?? !1,
-          b ?? !1
-          // (size ?? 'md') as ControlSize
-        )
-      )
-    ),
-    t != null ? k.span(d.class("bc-input-container__before"), t) : null,
-    k.div(
-      d.class(
-        p(
-          s,
-          i ?? "md"
-        )(
-          (u, h) => A(
-            u ?? !1,
-            h ?? "md"
-          )
-        )
-      ),
-      // attr.class('bc-input-container__input'),
-      d.class(
-        I.map(
-          l,
-          (u) => u ? "bc-input-container__input--grow" : ""
-        )
-      ),
-      n
-    ),
-    r != null ? k.span(d.class("bc-input-container__after"), r) : null,
-    ...v
-  );
-};
-function G({
-  icon: s,
-  size: e = "md",
-  color: n = "neutral"
-}) {
-  return k.span(
-    d.class("bc-input-container__icon"),
-    L({ icon: s, size: e, color: n })
-  );
-}
-export {
-  P as B,
-  R as I,
-  G as a,
-  W as b,
-  q as c,
-  A as g
-};

package/dist/text-input-8v79fzEy.cjs

@@ -1 +0,0 @@
-"use strict";const t=require("@tempots/dom"),c=require("./input-container-CSi72GI1.cjs"),p=({autocomplete:n,autofocus:r,class:e,disabled:a,name:u,placeholder:l,id:i,required:m,tabIndex:s,hasError:o})=>t.Fragment(t.attr.autocomplete(n),t.attr.autofocus(r),t.attr.class(e),t.attr.disabled(a),t.attr.name(u??i),t.attr.placeholder(l),t.attr.id(i),t.aria.required(m),t.attr.tabindex(s),o!=null?t.aria.invalid(o??!1):null),d=n=>{const{value:r,onBlur:e,onChange:a,onInput:u,type:l}=n;return c.InputContainer({...n,input:t.html.input(t.attr.type(l??"text"),p(n),t.attr.value(r),t.attr.class("bc-input"),e!=null?t.on.blur(t.emitValue(e)):t.Empty,a!=null?t.on.change(t.emitValue(a)):t.Empty,u!=null?t.on.input(t.emitValue(u)):t.Empty)})};exports.CommonInputAttributes=p;exports.TextInput=d;