import { makeProviderMark as R, localStorageProp as j, computedOf as m, Use as O, html as f, attr as c, When as w, Fragment as y, aria as g, coalesce as z, style as L, prop as $, on as I, OnDispose as A, Value as _, WithElement as K, input as W, Empty as P, emitValue as S } from "@tempots/dom";
import { b as J, g as Q } from "./colors-WfmhQ5e1.js";
import { WhenInViewport as Y, Query as Z, ElementRect as X } from "@tempots/ui";
function T(t, {
  units: e = ["B", "KB", "MB", "GB", "TB"],
  decimalPlaces: n = 0,
  locale: o
} = {}) {
  if (t === 0 || t === 0n)
    return new Intl.NumberFormat(o, {
      style: "unit",
      unit: "byte",
      unitDisplay: "short",
      maximumFractionDigits: 0
    }).format(0).replace("byte", e[0]);
  let r, a;
  if (typeof t == "bigint") {
    let l = t < 0n ? -t : t;
    for (r = 0; l >= 1024n && r < e.length - 1; )
      l = l / 1024n, r++;
    a = Number(t) / Math.pow(1024, r);
  } else
    r = Math.floor(Math.log(Math.abs(t)) / Math.log(1024)), r = Math.min(r, e.length - 1), a = t / Math.pow(1024, r);
  return new Intl.NumberFormat(o, {
    style: "unit",
    unit: "byte",
    unitDisplay: "short",
    minimumFractionDigits: r === 0 ? 0 : n,
    maximumFractionDigits: r === 0 ? 0 : n
  }).format(a).replace("byte", e[r]);
}
const N = {
  loadingExtended: "Loading, please wait",
  loadingShort: "Loading...",
  locale: "Locale",
  iconDescription: "Icon",
  loadingIcon: "Loading icon",
  failedToLoadIcon: "Failed to load icon",
  editLabel: "Edit",
  selectOne: "Select one",
  selectMany: "Select many",
  noResults: "No results",
  passwordPlaceholderText: "Secret Password",
  togglePasswordVisibility: "Toggle password visibility",
  toggleMenu: "Toggle menu",
  toggleAside: "Toggle aside",
  mainNavigation: "Main navigation",
  sidebar: "Sidebar",
  closeDrawer: "Close drawer",
  closeModal: "Close modal",
  confirm: "Confirm",
  cancel: "Cancel",
  addLabel: "Add",
  removeItem: "Remove item",
  // languages
  currentLocale: "English",
  ar: "Arabic",
  de: "German",
  en: "English",
  es: "Spanish",
  fr: "French",
  hi: "Hindi",
  it: "Italian",
  ja: "Japanese",
  ko: "Korean",
  nl: "Dutch",
  pl: "Polish",
  pt: "Portuguese",
  ru: "Russian",
  tr: "Turkish",
  vi: "Vietnamese",
  zh: "Chinese",
  he: "Hebrew",
  fa: "Persian",
  ur: "Urdu",
  // input
  emailPlaceholderText: "Enter your email",
  incrementValue: "Increment value",
  decrementValue: "Decrement value",
  // drop zone
  dropZoneInstructions: (t) => t ? "Click to choose or drag files here, or press Enter or Space to open file selector" : "Drag files here",
  // size
  fileSizeUnits: ["Bytes", "KB", "MB", "GB", "TB"],
  // file input
  removeFile: "Remove file",
  clearAllFiles: "Clear all files",
  // inputs reset
  clearValue: "Reset",
  unknownType: "Unknown type",
  filesInputInstructions: (t, e, n) => {
    let o = t == null || t > 1 ? "Click to choose or drag files here" : "Click to choose or drag a file here";
    if (t || e) {
      const r = [];
      if (t != null && t > 1 && r.push(`up to ${t} files`), e && n) {
        const a = T(e, {
          units: n
        });
        r.push(`max ${a} each`);
      }
      r.length > 0 && (o += ` (${r.join(", ")})`);
    } else if (e && n) {
      const r = T(e, {
        units: n
      });
      o += ` (max ${r})`;
    }
    return o;
  },
  // ProseMirror editor
  prosemirror: {
    bold: "Bold",
    italic: "Italic",
    code: "Inline code",
    link: "Insert link",
    removeLink: "Remove link",
    heading: (t) => `Heading ${t}`,
    bulletList: "Bullet list",
    orderedList: "Ordered list",
    blockquote: "Blockquote",
    codeBlock: "Code block",
    horizontalRule: "Horizontal rule",
    linkUrlPlaceholder: "https://example.com"
  }
}, tt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: N
}, Symbol.toStringTag, { value: "Module" })), et = N, ot = "en", nt = (t, e, n) => {
  const o = t[e];
  return o ? typeof o == "function" ? o() : Promise.resolve(o) : new Promise((r, a) => {
    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(a.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + e + (e.split("/").length !== n ? ". Note that variables only represent file names one level deep." : ""))));
  });
}, rt = /* @__PURE__ */ new Set([
  "ar",
  // Arabic
  "he",
  // Hebrew
  "fa",
  // Persian/Farsi
  "ur",
  // Urdu
  "ps",
  // Pashto
  "sd",
  // Sindhi
  "ku",
  // Kurdish
  "dv",
  // Divehi/Maldivian
  "yi",
  // Yiddish
  "ji",
  // Yiddish (alternative code)
  "iw",
  // Hebrew (deprecated, but still used)
  "in"
  // Indonesian (deprecated, but sometimes confused)
]);
function q(t) {
  if (!t) return "ltr";
  const e = t.split(/[-_]/)[0].toLowerCase();
  return rt.has(e) ? "rtl" : "ltr";
}
function at(t, e) {
  return t === "auto" ? q(e) : t;
}
function jt(t) {
  return `b-${t}`;
}
function Tt(t) {
  return q(t) === "rtl";
}
function Et(t) {
  return t === "ltr" ? "rtl" : "ltr";
}
const st = {
  ltr: {
    "inline-start": "left",
    "inline-end": "right",
    "block-start": "top",
    "block-end": "bottom"
  },
  rtl: {
    "inline-start": "right",
    "inline-end": "left",
    "block-start": "top",
    "block-end": "bottom"
  }
};
function Vt(t, e) {
  return st[e][t];
}
const lt = {
  mark: R("Locale"),
  create: (t) => {
    const e = j({
      defaultValue: navigator.language ?? "en-US",
      key: "beatui-locale"
    }), n = j({
      defaultValue: "auto",
      key: "beatui-direction-preference"
    }), o = m(
      e,
      n
    )(
      (a, s) => at(s, a)
    );
    return {
      value: {
        locale: e,
        setLocale: (a) => e.set(a),
        direction: o,
        directionPreference: n,
        setDirectionPreference: (a) => n.set(a)
      },
      dispose: () => {
        e.dispose(), n.dispose(), o.dispose();
      }
    };
  }
}, {
  variants: it,
  special: ct,
  overrides: M
} = J;
function k(t, e) {
  switch (t) {
    case "white":
      return "var(--color-white)";
    case "black":
      return "var(--color-black)";
    case "transparent":
      return "transparent";
    default:
      return Q(t, e);
  }
}
function U(t, e) {
  const n = ct[t];
  if (!n) return;
  if (e === "light")
    return n;
  const o = M[t];
  return o ? o[e] : n;
}
function x(t, e, n) {
  const o = M[t];
  if (o) {
    const a = o[n];
    if (a)
      return { backgroundColor: a.backgroundColor, textColor: a.color };
  }
  if (e === "solid") {
    const a = U(t, n);
    if (a)
      return {
        backgroundColor: a.backgroundColor,
        textColor: a.color
      };
  }
  const r = it[e][n];
  return {
    backgroundColor: k(t, r.bgShade),
    textColor: r.textColor
  };
}
const ut = {
  light: { shade: 700, textColor: "var(--color-white)" },
  dark: { shade: 600, textColor: "var(--text-inverted-dark)" }
}, dt = {
  light: { shade: 300, textColor: "var(--text-normal-light)" },
  dark: { shade: 700, textColor: "var(--text-normal-dark)" }
}, ht = {
  light: { shade: 400, textColor: "var(--text-normal-light)" },
  dark: { shade: 600, textColor: "var(--text-normal-dark)" }
};
function p(t, e, n) {
  const o = M[t];
  if (o) {
    const a = o[n];
    if (a)
      return { backgroundColor: a.backgroundColor, textColor: a.color };
  }
  if (e === "solid") {
    const a = U(t, n);
    if (a)
      return {
        backgroundColor: a.backgroundColor,
        textColor: a.color
      };
    const s = ut[n];
    return {
      backgroundColor: k(t, s.shade),
      textColor: s.textColor
    };
  }
  const r = e === "light" ? dt[n] : ht[n];
  return {
    backgroundColor: k(t, r.shade),
    textColor: r.textColor
  };
}
function E(t, e) {
  const n = e === "light" ? 500 : 600;
  switch (t) {
    case "white":
      return e === "light" ? "var(--text-inverse-light)" : "var(--text-inverted-dark)";
    case "black":
      return "var(--color-black)";
    case "transparent":
      return "transparent";
    default:
      return k(t, n);
  }
}
function C(t, e) {
  return t === "white" ? "var(--color-white)" : t === "black" ? "var(--color-black)" : t === "transparent" ? "inherit" : k(t, e === "light" ? 800 : 200);
}
function V(t, e, n) {
  return e === "soft" ? k(t, n === "light" ? 300 : 700) : k(t, n === "light" ? 500 : 600);
}
const bt = "bui-icons", D = /* @__PURE__ */ new Map(), H = (() => {
  try {
    return typeof indexedDB < "u" && indexedDB !== null;
  } catch {
    return !1;
  }
})();
function gt() {
  return H ? new Promise((t, e) => {
    const n = indexedDB.open(bt, 1);
    n.onupgradeneeded = function(o) {
      const r = o.target.result;
      r.objectStoreNames.contains("icons") || r.createObjectStore("icons");
    }, n.onsuccess = function() {
      t(n.result);
    }, n.onerror = function() {
      e(n.error);
    };
  }) : Promise.reject(new Error("IndexedDB not available"));
}
const B = H ? gt() : null;
function ft(t, e) {
  return new Promise(async (n, o) => {
    try {
      if (B) {
        const a = (await B).transaction("icons", "readwrite");
        a.objectStore("icons").put(e, t), a.oncomplete = n, a.onerror = o;
      } else
        D.set(t, e), n(void 0);
    } catch {
      D.set(t, e), n(void 0);
    }
  });
}
function pt(t) {
  return new Promise(async (e, n) => {
    try {
      if (B) {
        const s = (await B).transaction("icons", "readonly").objectStore("icons").get(t);
        s.onsuccess = function() {
          e(s.result);
        }, s.onerror = n;
      } else
        e(D.get(t) || null);
    } catch {
      e(D.get(t) || null);
    }
  });
}
async function mt(t) {
  const e = `https://api.iconify.design/${t}.svg`;
  return fetch(e).then((n) => {
    if (n.status === 200)
      return n.text();
    throw new Error(`Failed to load icon: ${t}`);
  });
}
async function kt(t) {
  const e = t.replace(":", "/"), n = await pt(e);
  if (n)
    return n;
  const o = await mt(e);
  return await ft(e, o), o;
}
function vt(t) {
  return ["bc-icon", `bc-icon--${t}`].join(" ");
}
function xt(t, e = "solid") {
  if (!t) return "";
  const n = V(t, e, "light"), o = V(t, e, "dark");
  return `--icon-color: ${n}; --icon-color-dark: ${o}`;
}
function Ct({
  icon: t,
  size: e = "md",
  color: n,
  title: o,
  accessibility: r = "auto",
  tone: a = "solid"
}, ...s) {
  const i = m(
    r,
    o
  )((l, u) => l === "decorative" ? !1 : l === "informative" ? !0 : u != null && u !== "");
  return O(
    G,
    (l) => f.span(
      c.class(
        m(e, n)((u) => vt(u ?? "md"))
      ),
      c.style(
        m(
          n,
          a
        )(
          (u, b) => xt(u ?? void 0, b ?? "solid")
        )
      ),
      // Add accessibility attributes based on icon type
      w(
        i,
        () => y(
          c.role("img"),
          g.label(z(o, l.$.iconDescription))
        ),
        () => g.hidden(!0)
      ),
      Y(
        { once: !0 },
        () => Z({
          request: t,
          load: ({ request: u }) => kt(u),
          convertError: String,
          success: ({ value: u }) => f.span(
            L.width("100%"),
            L.height("100%"),
            c.innerHTML(u)
          ),
          pending: () => f.span(
            c.class("animate-spin"),
            // Loading state accessibility
            w(
              i,
              () => y(c.role("img"), g.label(l.$.loadingIcon)),
              () => g.hidden(!0)
            ),
            "↻"
          ),
          failure: ({ error: u }) => f.span(
            c.title(u),
            c.class("text-red-500"),
            // Error state accessibility
            w(
              i,
              () => y(c.role("img"), g.label(l.$.failedToLoadIcon)),
              () => g.hidden(!0)
            ),
            "🚫"
          )
        })
      ),
      ...s
    )
  );
}
function wt(t, e, n, o) {
  const r = [
    "bc-button",
    `bc-button--size-${t}`,
    `bc-control--padding-${t}`,
    `bc-control--rounded-${e}`
  ];
  return n && r.push("bc-button--loading"), o && r.push("bc-button--full-width"), r.join(" ");
}
function yt(t, e, n) {
  const o = /* @__PURE__ */ new Map();
  o.set("--button-text-shadow", "var(--text-shadow-none)"), o.set("--button-text-shadow-dark", "var(--text-shadow-none)");
  const r = (a, s, i, l) => {
    n || (o.set("--button-bg-hover", a), o.set("--button-text-hover", i), o.set("--button-bg-hover-dark", s), o.set("--button-text-hover-dark", l));
  };
  switch (t) {
    case "filled": {
      const a = x(e, "solid", "light"), s = x(e, "solid", "dark");
      o.set("--button-bg", a.backgroundColor), o.set("--button-text", a.textColor), o.set("--button-bg-dark", s.backgroundColor), o.set("--button-text-dark", s.textColor), o.set(
        "--button-text-shadow",
        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
      ), o.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
      );
      const i = p(e, "solid", "light"), l = p(e, "solid", "dark");
      r(
        i.backgroundColor,
        l.backgroundColor,
        i.textColor,
        l.textColor
      );
      break;
    }
    case "light": {
      const a = x(e, "light", "light"), s = x(e, "light", "dark");
      o.set("--button-bg", a.backgroundColor), o.set("--button-text", a.textColor), o.set("--button-bg-dark", s.backgroundColor), o.set("--button-text-dark", s.textColor);
      const i = p(e, "light", "light"), l = p(e, "light", "dark");
      r(
        i.backgroundColor,
        l.backgroundColor,
        i.textColor,
        l.textColor
      );
      break;
    }
    case "outline": {
      o.set("--button-bg", "transparent"), o.set("--button-bg-dark", "transparent"), o.set("--button-border", E(e, "light")), o.set("--button-border-dark", E(e, "dark")), o.set("--button-text", C(e, "light")), o.set("--button-text-dark", C(e, "dark")), o.set(
        "--button-text-shadow",
        "var(--text-shadow-button-light, var(--text-shadow-xs))"
      ), o.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-light, var(--text-shadow-xs))"
      );
      const a = p(e, "light", "light"), s = p(e, "light", "dark");
      r(
        a.backgroundColor,
        s.backgroundColor,
        a.textColor,
        s.textColor
      );
      break;
    }
    case "default": {
      const a = x("neutral", "light", "light"), s = x("neutral", "light", "dark");
      o.set("--button-bg", a.backgroundColor), o.set("--button-text", C(e, "light")), o.set("--button-bg-dark", s.backgroundColor), o.set("--button-text-dark", C(e, "dark")), o.set(
        "--button-text-shadow",
        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
      ), o.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
      );
      const i = p("base", "light", "light"), l = p("base", "light", "dark");
      r(
        i.backgroundColor,
        l.backgroundColor,
        o.get("--button-text") ?? a.textColor,
        o.get("--button-text-dark") ?? s.textColor
      );
      break;
    }
    case "text": {
      o.set("--button-bg", "transparent"), o.set("--button-bg-dark", "transparent"), o.set("--button-text", C(e, "light")), o.set("--button-text-dark", C(e, "dark")), n || o.set("--button-hover-decoration", "underline");
      break;
    }
  }
  return Array.from(o.entries()).map(([a, s]) => `${a}: ${s}`).join("; ");
}
function Rt({
  type: t = "button",
  disabled: e = !1,
  loading: n = !1,
  variant: o = "filled",
  size: r = "md",
  color: a = "base",
  roundedness: s = "sm",
  onClick: i = () => {
  },
  fullWidth: l = !1
}, ...u) {
  const b = $(null);
  return O(
    G,
    (h) => f.button(
      c.type(t),
      c.disabled(
        m(
          e,
          n
        )((d, v) => d || v)
      ),
      // Add ARIA attributes for accessibility
      g.busy(n ?? !1),
      w(n ?? !1, () => g.label(h.$.loadingExtended)),
      c.class(
        m(r, s, n, l)(wt)
      ),
      c.style(m(o, a, e)(yt)),
      w(
        n ?? !1,
        () => y(
          L.width(
            b.map((d) => d == null ? "" : `${d.width}px`)
          ),
          L.height(
            b.map((d) => d == null ? "" : `${d.height}px`)
          ),
          Ct({ icon: "line-md:loading-twotone-loop", size: r ?? "md" }),
          // Hidden live region for screen reader announcements
          f.span(
            c.class("sr-only"),
            g.live("polite"),
            h.$.loadingExtended
          )
        ),
        () => y(I.click(i), ...u)
      ),
      w(
        n != null,
        () => X(
          (d) => A(
            d.on((v) => {
              _.get(n ?? !1) || b.set(v);
            })
          )
        )
      )
    )
  );
}
function It(t, e, n, o) {
  const r = [
    t ? "bc-base-input-container" : "bc-input-container"
  ];
  return e ? r.push(
    t ? "bc-base-input-container--disabled" : "bc-input-container--disabled"
  ) : r.push(
    t ? "bc-base-input-container--default" : "bc-input-container--default"
  ), n && r.push("bc-input-container--error"), t || (r.push(`bc-control--padding-${o}`), r.push(`bc-control--text-size-${o}`)), r.join(" ");
}
const Lt = ({
  baseContainer: t,
  disabled: e,
  input: n,
  before: o,
  after: r,
  hasError: a,
  focusableSelector: s = "input, select, textarea",
  growInput: i = !0,
  size: l
}, ...u) => {
  const b = _.map(e ?? !1, (h) => h);
  return f.div(
    K((h) => {
      const d = () => {
        h.querySelector(s)?.focus();
      };
      return h.addEventListener("click", d), A(() => h.removeEventListener("click", d));
    }),
    c.class(
      m(
        t,
        b,
        a ?? !1,
        l ?? "md"
      )(
        (h, d, v, F) => It(
          h ?? !1,
          d ?? !1,
          v ?? !1,
          F ?? "md"
        )
      )
    ),
    o != null ? f.span(c.class("bc-input-container__before"), o) : null,
    f.div(
      c.class("bc-input-container__input"),
      c.class(
        _.map(
          i,
          (h) => h ? "bc-input-container__input--grow" : ""
        )
      ),
      n
    ),
    r != null ? f.span(c.class("bc-input-container__after"), r) : null,
    ...u
  );
}, Dt = ({
  autocomplete: t,
  autofocus: e,
  class: n,
  disabled: o,
  name: r,
  placeholder: a,
  id: s,
  required: i,
  hasError: l
}) => y(
  c.autocomplete(t),
  c.autofocus(e),
  c.class(n),
  c.disabled(o),
  c.name(r ?? s),
  c.placeholder(a),
  c.id(s),
  g.required(i),
  l != null ? g.invalid(
    l ?? !1
  ) : null
), Ot = (t) => {
  const { value: e, onBlur: n, onChange: o, onInput: r } = t;
  return Lt({
    ...t,
    input: W.text(
      Dt(t),
      c.value(e),
      c.class("bc-input"),
      n != null ? I.blur(S(n)) : P,
      o != null ? I.change(S(o)) : P,
      r != null ? I.input(S(r)) : P
    )
  });
};
function Bt(t) {
  const e = t.split("-"), n = [t];
  return e.length > 1 && n.push(e[0]), n;
}
function Pt({
  locale: t,
  defaultLocale: e = "en-US",
  defaultMessages: n,
  localeLoader: o
}) {
  const r = $(e), a = $(n), s = t.on(async (i) => {
    if (i === r.value) return;
    r.set(i);
    const l = Bt(i);
    for (const u of l)
      try {
        const b = await o(u);
        if (
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          typeof b.default == "object" && Object.keys(b).length === 1
        ) {
          console.error(
            "It appears that you are trying to load a translation module without referencing the default export. Please use `(await import(...)).default` in your loader function."
          );
          return;
        }
        if (i === r.value) {
          a.set(b);
          return;
        }
      } catch {
        continue;
      }
    console.warn(`No locale found for "${t.value}", using fallback`), i === r.value && a.set(n);
  });
  return {
    /** Clean up all resources and event listeners */
    dispose: () => {
      s(), r.dispose(), a.dispose();
    },
    /** Translation functions that return reactive signals */
    t: a
  };
}
function St({
  defaultLocale: t,
  defaultMessages: e,
  localeLoader: n,
  providerName: o = "I18nProvider"
}) {
  return {
    mark: R(o),
    create: (r, a) => {
      const {
        value: { locale: s }
      } = a.getProvider(lt.mark), { t: i, dispose: l } = Pt({
        locale: s,
        defaultMessages: e,
        defaultLocale: t,
        localeLoader: n
      });
      return {
        value: i,
        dispose: l
      };
    }
  };
}
const G = St({
  defaultLocale: ot,
  defaultMessages: et,
  localeLoader: async (t) => (await nt(/* @__PURE__ */ Object.assign({ "./locales/ar.ts": () => import("./ar-CbM09z5P.js"), "./locales/de.ts": () => import("./de-Dd907tZQ.js"), "./locales/en.ts": () => Promise.resolve().then(() => tt), "./locales/es.ts": () => import("./es-BkJxjMdG.js"), "./locales/fa.ts": () => import("./fa-DBTUBsw_.js"), "./locales/fr.ts": () => import("./fr-Fmupo556.js"), "./locales/he.ts": () => import("./he-DkI64oaY.js"), "./locales/hi.ts": () => import("./hi-GdD5MihT.js"), "./locales/it.ts": () => import("./it-Bpnfd60V.js"), "./locales/ja.ts": () => import("./ja-SjlGNgs9.js"), "./locales/ko.ts": () => import("./ko-CH69ZNts.js"), "./locales/nl.ts": () => import("./nl-DnvMlW8v.js"), "./locales/pl.ts": () => import("./pl-CBEX2qN1.js"), "./locales/pt.ts": () => import("./pt-ByFqFAdQ.js"), "./locales/ru.ts": () => import("./ru-6d5JfoDw.js"), "./locales/tr.ts": () => import("./tr-gv4vJfm8.js"), "./locales/ur.ts": () => import("./ur-Bo6bjEBS.js"), "./locales/vi.ts": () => import("./vi-xDLJ3TIx.js"), "./locales/zh.ts": () => import("./zh-BivWxJJh.js") }), `./locales/${t}.ts`, 3)).default,
  providerName: "BeatUII18n"
});
export {
  Rt as B,
  Dt as C,
  Ct as I,
  lt as L,
  Ot as T,
  nt as _,
  G as a,
  Lt as b,
  x as c,
  et as d,
  E as e,
  T as f,
  wt as g,
  p as h,
  yt as i,
  ot as j,
  H as k,
  pt as l,
  St as m,
  Pt as n,
  q as o,
  jt as p,
  Tt as q,
  at as r,
  ft as s,
  C as t,
  Et as u,
  st as v,
  Vt as w
};
