@moondreamsdev/dreamer-ui 1.1.4 → 1.1.6

package/dist/components.esm.js

@@ -0,0 +1,656 @@
+import { jsx as u, jsxs as C } from "react/jsx-runtime";
+import { j as v, E as S, C as F, b as V, a as q, Q as G } from "./join-DATGxH1G.js";
+import j, { useState as N, useEffect as A, useCallback as E, useId as $, useMemo as R } from "react";
+function H() {
+  const [o, r] = N(0);
+  return A(() => {
+    const e = setInterval(() => {
+      r((a) => (a + 1) % 3);
+    }, 500);
+    return () => clearInterval(e);
+  }, []), /* @__PURE__ */ u("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ u(
+    "div",
+    {
+      className: v(
+        "rounded-full transition-all duration-500 ease-in-out size-[0.35em] bg-current",
+        o === e && "transform -translate-y-1"
+      )
+    },
+    e
+  )) });
+}
+const K = {
+  base: "",
+  primary: "bg-primary text-primary-foreground hover:bg-primary/85 disabled:bg-muted disabled:text-muted-foreground",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 disabled:bg-muted/80 disabled:text-muted-foreground/80",
+  tertiary: "text-primary hover:text-primary-foreground disabled:text-muted",
+  outline: "border border-primary text-primary hover:border-primary-foreground hover:text-primary-foreground disabled:border-muted disabled:text-muted",
+  link: "underline-offset-4 hover:underline disabled:underline disabled:text-muted",
+  danger: "bg-danger text-danger-foreground hover:bg-danger/85 disabled:bg-muted disabled:text-muted-foreground"
+}, T = {
+  stripped: "",
+  fitted: "size-fit",
+  sm: "px-2 py-1 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg",
+  icon: "p-1 w-fit aspect-square",
+  full: "p-2 w-full"
+}, Q = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+}, L = {
+  variant: "primary",
+  size: "md",
+  rounded: "md"
+};
+function ae({
+  variant: o = L.variant,
+  size: r,
+  rounded: e = L.rounded,
+  loading: a,
+  linkTo: t,
+  linkProps: n,
+  type: d = "button",
+  className: i,
+  ...l
+}) {
+  let f;
+  o === "link" && !r ? f = "fitted" : f = r || L.size;
+  const s = v(
+    "appearance-none focus:outline-none focus:ring not-disabled:hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all",
+    K[o],
+    T[f],
+    Q[e],
+    a && "relative pointer-events-none",
+    t && "relative",
+    i
+  );
+  return /* @__PURE__ */ C(
+    "button",
+    {
+      ...l,
+      role: t ? "link" : l.role,
+      "aria-label": l["aria-label"] || (n == null ? void 0 : n["aria-label"]),
+      "aria-description": l["aria-description"] || (n == null ? void 0 : n["aria-description"]),
+      "aria-disabled": l.disabled || a,
+      "aria-busy": a,
+      type: d,
+      className: s,
+      children: [
+        a && /* @__PURE__ */ u(H, {}),
+        /* @__PURE__ */ u("span", { className: v(a && "invisible"), children: l.children }),
+        t && !l.disabled && /* @__PURE__ */ u(
+          "a",
+          {
+            ...n,
+            "aria-hidden": !0,
+            href: t,
+            target: (n == null ? void 0 : n.target) || "_blank",
+            rel: (n == null ? void 0 : n.rel) || "noreferrer",
+            className: "absolute inset-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function U({ size: o = 15, color: r = "currentColor" }) {
+  return /* @__PURE__ */ u("svg", { width: o, height: o, className: "inline", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ u(
+    "path",
+    {
+      d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+      fill: r,
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function W(o) {
+  const [r, e] = N(""), a = E((t) => {
+    let n = t, d = "";
+    for (; n && !d; ) {
+      const i = window.getComputedStyle(n).backgroundColor;
+      i && i !== "transparent" && i !== "rgba(0, 0, 0, 0)" && (d = i), n = n.parentElement;
+    }
+    return d || "transparent";
+  }, []);
+  return A(() => {
+    const t = document.getElementById(o);
+    if (t) {
+      const n = a(t.parentElement);
+      e(n);
+    }
+  }, [o, a]), r;
+}
+function ne({
+  ref: o,
+  id: r,
+  size: e = 20,
+  color: a,
+  filled: t = !1,
+  rounded: n = !0,
+  checked: d = !1,
+  onCheckedChange: i,
+  disabled: l,
+  className: f = "",
+  ...m
+}) {
+  const s = $(), g = R(() => r || `checkbox-${s}`, [r, s]), b = W(g), [c, h] = N(d);
+  A(() => {
+    h(d);
+  }, [d]);
+  const w = () => {
+    l || (h(!c), i == null || i(!c));
+  }, p = (y) => {
+    y.key === " " && (y.preventDefault(), w());
+  }, x = v(
+    "flex items-center justify-center border outline outline-transparent focus:outline-current focus:outline-offset-2",
+    n && "rounded",
+    l && "opacity-40 cursor-not-allowed",
+    !l && "cursor-pointer",
+    f
+  );
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      id: g,
+      type: "button",
+      ref: o,
+      tabIndex: 0,
+      role: "checkbox",
+      onClick: w,
+      "aria-checked": c,
+      "aria-disabled": l,
+      onKeyDownCapture: p,
+      style: {
+        width: e,
+        height: e,
+        color: a,
+        backgroundColor: c && t ? "currentcolor" : "transparent"
+      },
+      className: x,
+      ...m,
+      children: c && /* @__PURE__ */ u(U, { size: e, color: t ? b : void 0 })
+    }
+  );
+}
+const Z = {
+  base: "",
+  default: "ring ring-transparent focus:ring-primary-foreground not-disabled:data-error:ring-danger not-disabled:data-success:ring-success",
+  underline: "border-b border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success",
+  outline: "border border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success"
+}, _ = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "px-3 rounded-full"
+}, k = {
+  variant: "default",
+  rounded: "none"
+};
+function D({ elementId: o, type: r, message: e }) {
+  return A(() => {
+    const a = document.getElementById(o);
+    if (a) {
+      if (!e && r === "error") {
+        a.removeAttribute("data-error");
+        return;
+      }
+      if (!e && r === "success") {
+        a.removeAttribute("data-success");
+        return;
+      }
+      return a.setAttribute("aria-describedby", `${o}-${r}-message`), a.setAttribute("aria-invalid", r === "error" ? "true" : "false"), r === "error" && a.setAttribute("data-error", "true"), r === "success" && a.setAttribute("data-success", "true"), () => {
+        a.removeAttribute("aria-describedby"), a.removeAttribute("aria-invalid"), a.removeAttribute("data-error"), a.removeAttribute("data-success");
+      };
+    }
+  }, [o, r, e]), e ? /* @__PURE__ */ C(
+    "small",
+    {
+      className: v(
+        "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-start",
+        r === "error" && "text-danger",
+        r === "success" && "text-success"
+      ),
+      role: "status",
+      children: [
+        r === "error" ? /* @__PURE__ */ u(S, {}) : /* @__PURE__ */ u(F, {}),
+        /* @__PURE__ */ u("span", { id: `${o}-${r}-message`, children: e })
+      ]
+    }
+  ) : null;
+}
+function oe({
+  variant: o = k.variant,
+  rounded: r,
+  displayOnlyMode: e = !1,
+  errorMessage: a,
+  successMessage: t,
+  type: n = "text",
+  className: d,
+  ...i
+}) {
+  const l = $(), [f, m] = N(!1);
+  let s = r;
+  o === "outline" && !r && (s = "md"), s = s || k.rounded;
+  const c = v(
+    "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
+    "file:mr-2 file:border-0 file:rounded-md file:px-1.5 file:py-1 file:bg-primary hover:file:bg-primary/85 file:text-sm file:font-medium file:text-foreground file:transition-colors",
+    !e && Z[o],
+    !e && _[s],
+    n === "password" && "pr-10",
+    !e && "px-2 py-1",
+    e && "pointer-events-none",
+    d
+  );
+  return /* @__PURE__ */ C("div", { className: v(e && "cursor-text"), style: { height: i.height, width: i.width }, children: [
+    /* @__PURE__ */ C("div", { className: v(n === "password" && "relative"), children: [
+      /* @__PURE__ */ u(
+        "input",
+        {
+          ...i,
+          id: l,
+          type: n === "password" && f ? "text" : n,
+          "aria-disabled": i.disabled,
+          readOnly: e,
+          "aria-readonly": e || i["aria-readonly"],
+          "data-error": a ? !0 : void 0,
+          "data-success": t ? !0 : void 0,
+          className: c
+        }
+      ),
+      n === "password" && /* @__PURE__ */ u(
+        "button",
+        {
+          onClick: () => m(!f),
+          className: "absolute inset-y-0 right-0 px-2 hover:cursor-pointer",
+          "aria-label": "Toggle password visibility",
+          "data-state": f ? "visible" : "hidden",
+          children: f ? /* @__PURE__ */ u(V, { size: 20 }) : /* @__PURE__ */ u(q, { size: 20 })
+        }
+      )
+    ] }),
+    !e && /* @__PURE__ */ u(D, { elementId: l, type: "error", message: a }),
+    !e && /* @__PURE__ */ u(D, { elementId: l, type: "success", message: t })
+  ] });
+}
+function se({
+  display: o = "inline",
+  width: r = "fit-content",
+  className: e = "",
+  required: a,
+  helpMessage: t,
+  suffix: n,
+  htmlFor: d,
+  children: i,
+  ...l
+}) {
+  const f = $(), m = v("font-medium", o, e), s = t ? `${d ?? f}-help` : void 0;
+  return /* @__PURE__ */ C("div", { style: { display: o === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
+    /* @__PURE__ */ C("label", { className: m, htmlFor: d, ...l, children: [
+      i,
+      a && /* @__PURE__ */ u("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
+    ] }),
+    t && /* @__PURE__ */ u(
+      "span",
+      {
+        className: "text-gray-500 ml-1 size-fit -translate-y-1/3",
+        "aria-describedby": s,
+        "aria-label": "Help information",
+        title: t,
+        children: /* @__PURE__ */ u(G, {})
+      }
+    ),
+    t && /* @__PURE__ */ u("div", { id: s, className: "sr-only", children: t }),
+    n && /* @__PURE__ */ u("span", { className: "ml-1", children: n })
+  ] });
+}
+function J({ itemId: o, checked: r, onChange: e, name: a, disabled: t = !1, className: n = "" }) {
+  const d = "relative inline-flex items-center justify-center rounded-full", i = () => {
+    t || e();
+  }, l = v(
+    d,
+    !r && "hover:border-current/60",
+    !t && "border-current cursor-pointer",
+    t && "border-muted/60 cursor-not-allowed",
+    n
+  );
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      id: o,
+      role: "radio",
+      tabIndex: -1,
+      "aria-checked": r,
+      "aria-disabled": t,
+      "aria-description": `Radio button for ${a}`,
+      "aria-labelledby": `${o}-label`,
+      onClick: i,
+      className: l,
+      style: {
+        width: "1em",
+        height: "1em",
+        padding: "0.1em",
+        borderWidth: "0.06em"
+      },
+      children: r && /* @__PURE__ */ u(
+        "div",
+        {
+          className: v("size-full aspect-square rounded-full", t && "bg-muted/60", !t && "bg-current")
+        }
+      )
+    }
+  );
+}
+function I({
+  value: o,
+  children: r,
+  className: e = "",
+  isSelected: a = !1,
+  onChange: t,
+  disabled: n = !1,
+  hideInput: d = !1,
+  description: i,
+  name: l
+}) {
+  const m = `radio-${$()}-${o}`, s = () => {
+    n || t == null || t(o);
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      title: i,
+      className: v(
+        "relative flex items-center",
+        e,
+        // Uses text color for borders
+        d && `p-2 border-2 focus-within:border-dashed focus-within:${n ? "border-current/50" : "border-current/80"}`,
+        d && !a && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
+        d && a && "border-border",
+        n && "opacity-60 cursor-not-allowed"
+      ),
+      style: {
+        gap: "0.5em"
+      },
+      children: [
+        !d && /* @__PURE__ */ u(
+          J,
+          {
+            itemId: m,
+            name: l || "",
+            checked: a,
+            onChange: s,
+            disabled: n,
+            className: v(d && "")
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            id: d ? m : void 0,
+            tabIndex: d ? -1 : void 0,
+            role: d ? "radio" : void 0,
+            onClick: d ? s : void 0,
+            "aria-checked": d ? a ? "true" : "false" : void 0,
+            "aria-disabled": d ? n : void 0,
+            "aria-description": d ? i || `Radio button for ${l}` : void 0,
+            "aria-labelledby": d ? `${m}-label` : void 0,
+            className: v(d && "size-full", typeof r == "object" && "grow focus:outline-none"),
+            children: /* @__PURE__ */ u(
+              "label",
+              {
+                id: `${m}-label`,
+                onClick: d ? void 0 : s,
+                className: v(n && "cursor-not-allowed", !n && "cursor-pointer"),
+                children: r
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function X(o, r) {
+  const [e, a] = N(r), [t, n] = N(-1), [d, i] = N(!1), l = E((b, c) => {
+    var p;
+    const h = b[c];
+    h.hasAttribute("disabled") || h.getAttribute("aria-disabled") === "true" || ((p = b[c]) == null || p.click(), n(c));
+  }, []), f = E(
+    (b, c) => {
+      var w;
+      if (b.preventDefault(), d || !c.length) return;
+      const h = r !== -1 ? r : 0;
+      (w = c[h]) == null || w.focus(), a(h), r !== -1 && l(c, h);
+    },
+    [r, d, l]
+  ), m = E(
+    (b) => {
+      var p;
+      if (!b.shiftKey)
+        return;
+      b.preventDefault();
+      const c = Array.from(
+        document.querySelectorAll(
+          'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+        )
+      ).filter((x) => !x.hasAttribute("disabled") && x.tabIndex >= 0), h = c.findIndex((x) => x.id === o), w = h > 0 ? h - 1 : c.length - 1;
+      (p = c[w]) == null || p.focus();
+    },
+    [o]
+  ), s = E(
+    (b, c) => {
+      var y;
+      if (!c.length) return;
+      const h = b.target;
+      if (!c.some((B) => B.id === h.id)) return;
+      const p = e !== -1 ? e : 0;
+      let x = p;
+      switch (b.key) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          b.preventDefault(), x = p > 0 ? p - 1 : c.length - 1;
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          b.preventDefault(), x = (p + 1) % c.length;
+          break;
+        // Select the option when the space key is pressed
+        case " ":
+          b.preventDefault(), l(c, p);
+          return;
+        case "Tab":
+          m(b);
+          return;
+        default:
+          return;
+      }
+      (y = c[x]) == null || y.focus(), a(x), t !== -1 && l(c, x);
+    },
+    [e, t, m, l]
+  ), g = E(() => {
+    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+    return b ? Array.from(b.querySelectorAll('[role="radio"]')) : [];
+  }, [o]);
+  A(() => {
+    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+    if (!b) return;
+    const c = g(), h = (y) => f(y, c), w = (y) => s(y, c), p = () => i(!0), x = () => i(!1);
+    return document.addEventListener("keydown", w), b.addEventListener("focus", h), b.addEventListener("mousedown", p), document.addEventListener("mouseup", x), () => {
+      document.removeEventListener("keydown", w), b.removeEventListener("focus", h), b.removeEventListener("mousedown", p), document.removeEventListener("mouseup", x);
+    };
+  }, [o, g, f, s]);
+}
+function de({
+  options: o = [],
+  value: r,
+  onChange: e,
+  name: a,
+  children: t,
+  className: n = "",
+  childrenClassName: d = "",
+  hideInputs: i = !1
+}) {
+  const l = $(), f = a || `radio-group-${l}`;
+  X(
+    f,
+    o.findIndex((s) => s === r)
+  );
+  const m = R(() => o.reduce((s, g) => (typeof g == "string" ? s.some((b) => b.value === g) || s.push({ label: g, value: g }) : s.push(g), s), []), [o]);
+  return /* @__PURE__ */ C("div", { id: f, role: "radiogroup", tabIndex: 0, className: v(n, "focus:outline-none"), children: [
+    m.length > 0 && m.map((s, g) => /* @__PURE__ */ u(
+      I,
+      {
+        value: s.value,
+        isSelected: r === s.value,
+        onChange: e,
+        name: f,
+        disabled: s.disabled,
+        description: s.description,
+        hideInput: i,
+        className: d,
+        children: s.label
+      },
+      `${s.value}-${g}`
+    )),
+    m.length === 0 && t && j.Children.map(t, (s) => j.isValidElement(s) && s.type === I ? /* @__PURE__ */ u(
+      I,
+      {
+        ...s.props,
+        className: v(d, s.props.className),
+        hideInput: s.props.hideInput || i,
+        isSelected: r === s.props.value,
+        onChange: e,
+        name: f,
+        children: s.props.children
+      }
+    ) : null)
+  ] });
+}
+function Y(o, r) {
+  A(() => {
+    const e = document.getElementById(o);
+    if (!e)
+      return;
+    if (!r) {
+      e.style.height = "auto";
+      return;
+    }
+    const a = () => {
+      e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+    };
+    return a(), e.addEventListener("input", a), e.addEventListener("resize", a), window.addEventListener("resize", a), () => {
+      e.removeEventListener("input", a), e.removeEventListener("resize", a), window.removeEventListener("resize", a);
+    };
+  }, [o, r]);
+}
+const O = {
+  base: "",
+  "left-line": "border-l border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success",
+  outline: "border border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success"
+}, M = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "px-3 rounded-full"
+}, z = {
+  variant: "outline",
+  rounded: "none"
+};
+function P({ elementId: o, maxLength: r }) {
+  const [e, a] = N(0);
+  return A(() => {
+    const t = document.getElementById(o);
+    if (!t)
+      return;
+    const n = () => {
+      const d = t.value.length;
+      a(d);
+      const i = d >= r;
+      t.setAttribute("aria-describedby", `${o}-character-count`), t.setAttribute("aria-invalid", i ? "true" : "false"), i ? t.setAttribute("data-error", "true") : t.removeAttribute("data-error");
+    };
+    return n(), t.addEventListener("input", n), t.setAttribute("maxlength", String(r)), () => {
+      t.removeEventListener("input", n), t.removeAttribute("maxlength"), t.removeAttribute("aria-describedby"), t.removeAttribute("aria-invalid"), t.removeAttribute("data-error");
+    };
+  }, [o, r]), /* @__PURE__ */ u(
+    "small",
+    {
+      className: v(
+        "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-end",
+        e >= r && "text-danger",
+        e < r && "text-current"
+      ),
+      role: "status",
+      children: /* @__PURE__ */ C("span", { id: `${o}-character-count`, children: [
+        e,
+        " / ",
+        r,
+        " characters"
+      ] })
+    }
+  );
+}
+function ie({
+  variant: o = z.variant,
+  rounded: r,
+  displayOnlyMode: e = !1,
+  errorMessage: a,
+  successMessage: t,
+  hideResizeHandle: n = !1,
+  autoExpand: d = !1,
+  characterLimit: i = 0,
+  className: l,
+  ...f
+}) {
+  const m = $();
+  Y(m, d || e);
+  let s = r;
+  o === "outline" && !r && (s = "md"), s = s || z.rounded;
+  let g = n;
+  (e || o === "left-line" && !n) && (g = !0);
+  const c = v(
+    "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
+    !e && O[o],
+    !e && M[s],
+    !e && "px-2 py-1",
+    e && "pointer-events-none",
+    g && "no-resize-handle",
+    l
+  );
+  return /* @__PURE__ */ C("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
+    /* @__PURE__ */ u(
+      "textarea",
+      {
+        ...f,
+        id: m,
+        "aria-disabled": f.disabled,
+        readOnly: e,
+        "aria-readonly": e || f["aria-readonly"],
+        style: {
+          resize: d ? "none" : void 0
+        },
+        className: c
+      }
+    ),
+    i > 0 && /* @__PURE__ */ u(P, { elementId: m, maxLength: i }),
+    !e && /* @__PURE__ */ u(D, { elementId: m, type: "error", message: a }),
+    !e && /* @__PURE__ */ u(D, { elementId: m, type: "success", message: t })
+  ] });
+}
+export {
+  ae as Button,
+  H as ButtonLoadingDots,
+  ne as Checkbox,
+  oe as Input,
+  se as Label,
+  de as RadioGroup,
+  I as RadioGroupItem,
+  J as RadioInput,
+  ie as Textarea
+};
+//# sourceMappingURL=components.esm.js.map