solid-uix 0.4.0 → 0.5.1

package/dist/main.js

@@ -1,629 +1,426 @@
-import { createMemo as w, createRenderEffect as $, untrack as ne, sharedConfig as m, splitProps as A, mergeProps as g, createUniqueId as B, createContext as Q, useContext as W, createSignal as F, createComponent as I, createEffect as U, children as Z, Show as se } from "solid-js";
-const ie = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"], oe = /* @__PURE__ */ new Set(["className", "value", "readOnly", "noValidate", "formNoValidate", "isMap", "noModule", "playsInline", ...ie]), le = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), re = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
-  className: "class",
-  htmlFor: "for"
-}), ce = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
-  class: "className",
-  novalidate: {
-    $: "noValidate",
-    FORM: 1
-  },
-  formnovalidate: {
-    $: "formNoValidate",
-    BUTTON: 1,
-    INPUT: 1
-  },
-  ismap: {
-    $: "isMap",
-    IMG: 1
-  },
-  nomodule: {
-    $: "noModule",
-    SCRIPT: 1
-  },
-  playsinline: {
-    $: "playsInline",
-    VIDEO: 1
-  },
-  readonly: {
-    $: "readOnly",
-    INPUT: 1,
-    TEXTAREA: 1
-  }
-});
-function ae(n, e) {
-  const t = ce[n];
-  return typeof t == "object" ? t[e] ? t.$ : void 0 : t;
-}
-const fe = /* @__PURE__ */ new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]), q = (n) => w(() => n());
-function de(n, e, t) {
-  let s = t.length, i = e.length, l = s, c = 0, o = 0, r = e[i - 1].nextSibling, a = null;
-  for (; c < i || o < l; ) {
-    if (e[c] === t[o]) {
-      c++, o++;
-      continue;
-    }
-    for (; e[i - 1] === t[l - 1]; )
-      i--, l--;
-    if (i === c) {
-      const f = l < s ? o ? t[o - 1].nextSibling : t[l - o] : r;
-      for (; o < l; ) n.insertBefore(t[o++], f);
-    } else if (l === o)
-      for (; c < i; )
-        (!a || !a.has(e[c])) && e[c].remove(), c++;
-    else if (e[c] === t[l - 1] && t[o] === e[i - 1]) {
-      const f = e[--i].nextSibling;
-      n.insertBefore(t[o++], e[c++].nextSibling), n.insertBefore(t[--l], f), e[i] = t[l];
-    } else {
-      if (!a) {
-        a = /* @__PURE__ */ new Map();
-        let u = o;
-        for (; u < l; ) a.set(t[u], u++);
-      }
-      const f = a.get(e[c]);
-      if (f != null)
-        if (o < f && f < l) {
-          let u = c, d = 1, C;
-          for (; ++u < i && u < l && !((C = a.get(e[u])) == null || C !== f + d); )
-            d++;
-          if (d > f - o) {
-            const V = e[c];
-            for (; o < f; ) n.insertBefore(t[o++], V);
-          } else n.replaceChild(t[o++], e[c++]);
-        } else c++;
-      else e[c++].remove();
-    }
-  }
-}
-const G = "_$DX_DELEGATE";
-function h(n, e, t, s) {
-  let i;
-  const l = () => {
-    const o = document.createElement("template");
-    return o.innerHTML = n, o.content.firstChild;
-  }, c = () => (i || (i = l())).cloneNode(!0);
-  return c.cloneNode = c, c;
-}
-function ue(n, e = window.document) {
-  const t = e[G] || (e[G] = /* @__PURE__ */ new Set());
-  for (let s = 0, i = n.length; s < i; s++) {
-    const l = n[s];
-    t.has(l) || (t.add(l), e.addEventListener(l, $e));
-  }
-}
-function S(n, e, t) {
-  M(n) || (t == null ? n.removeAttribute(e) : n.setAttribute(e, t));
-}
-function ge(n, e, t) {
-  M(n) || (t ? n.setAttribute(e, "") : n.removeAttribute(e));
-}
-function P(n, e) {
-  M(n) || (e == null ? n.removeAttribute("class") : n.className = e);
-}
-function he(n, e, t, s) {
-  if (s)
-    Array.isArray(t) ? (n[`$$${e}`] = t[0], n[`$$${e}Data`] = t[1]) : n[`$$${e}`] = t;
-  else if (Array.isArray(t)) {
-    const i = t[0];
-    n.addEventListener(e, t[0] = (l) => i.call(n, t[1], l));
-  } else n.addEventListener(e, t, typeof t != "function" && t);
-}
-function ye(n, e, t = {}) {
-  const s = Object.keys(e || {}), i = Object.keys(t);
-  let l, c;
-  for (l = 0, c = i.length; l < c; l++) {
-    const o = i[l];
-    !o || o === "undefined" || e[o] || (K(n, o, !1), delete t[o]);
-  }
-  for (l = 0, c = s.length; l < c; l++) {
-    const o = s[l], r = !!e[o];
-    !o || o === "undefined" || t[o] === r || !r || (K(n, o, !0), t[o] = r);
-  }
-  return t;
-}
-function be(n, e, t) {
-  if (!e) return t ? S(n, "style") : e;
-  const s = n.style;
-  if (typeof e == "string") return s.cssText = e;
-  typeof t == "string" && (s.cssText = t = void 0), t || (t = {}), e || (e = {});
-  let i, l;
-  for (l in t)
-    e[l] == null && s.removeProperty(l), delete t[l];
-  for (l in e)
-    i = e[l], i !== t[l] && (s.setProperty(l, i), t[l] = i);
-  return t;
-}
-function b(n, e = {}, t, s) {
-  const i = {};
-  return s || $(() => i.children = N(n, e.children, i.children)), $(() => typeof e.ref == "function" && z(e.ref, n)), $(() => _e(n, e, t, !0, i, !0)), i;
-}
-function z(n, e, t) {
-  return ne(() => n(e, t));
-}
-function y(n, e, t, s) {
-  if (t !== void 0 && !s && (s = []), typeof e != "function") return N(n, e, s, t);
-  $((i) => N(n, e(), i, t), s);
-}
-function _e(n, e, t, s, i = {}, l = !1) {
-  e || (e = {});
-  for (const c in i)
-    if (!(c in e)) {
-      if (c === "children") continue;
-      i[c] = R(n, c, null, i[c], t, l, e);
-    }
-  for (const c in e) {
-    if (c === "children")
-      continue;
-    const o = e[c];
-    i[c] = R(n, c, o, i[c], t, l, e);
-  }
-}
-function M(n) {
-  return !!m.context && !m.done && (!n || n.isConnected);
-}
-function me(n) {
-  return n.toLowerCase().replace(/-([a-z])/g, (e, t) => t.toUpperCase());
-}
-function K(n, e, t) {
-  const s = e.trim().split(/\s+/);
-  for (let i = 0, l = s.length; i < l; i++) n.classList.toggle(s[i], t);
-}
-function R(n, e, t, s, i, l, c) {
-  let o, r, a, f, u;
-  if (e === "style") return be(n, t, s);
-  if (e === "classList") return ye(n, t, s);
-  if (t === s) return s;
-  if (e === "ref")
-    l || t(n);
-  else if (e.slice(0, 3) === "on:") {
-    const d = e.slice(3);
-    s && n.removeEventListener(d, s, typeof s != "function" && s), t && n.addEventListener(d, t, typeof t != "function" && t);
-  } else if (e.slice(0, 10) === "oncapture:") {
-    const d = e.slice(10);
-    s && n.removeEventListener(d, s, !0), t && n.addEventListener(d, t, !0);
-  } else if (e.slice(0, 2) === "on") {
-    const d = e.slice(2).toLowerCase(), C = fe.has(d);
-    if (!C && s) {
-      const V = Array.isArray(s) ? s[0] : s;
-      n.removeEventListener(d, V);
-    }
-    (C || t) && (he(n, d, t, C), C && ue([d]));
-  } else if (e.slice(0, 5) === "attr:")
-    S(n, e.slice(5), t);
-  else if (e.slice(0, 5) === "bool:")
-    ge(n, e.slice(5), t);
-  else if ((u = e.slice(0, 5) === "prop:") || (a = le.has(e)) || (f = ae(e, n.tagName)) || (r = oe.has(e)) || (o = n.nodeName.includes("-") || "is" in c)) {
-    if (u)
-      e = e.slice(5), r = !0;
-    else if (M(n)) return t;
-    e === "class" || e === "className" ? P(n, t) : o && !r && !a ? n[me(e)] = t : n[f || e] = t;
-  } else
-    S(n, re[e] || e, t);
-  return t;
-}
-function $e(n) {
-  if (m.registry && m.events && m.events.find(([r, a]) => a === n))
-    return;
-  let e = n.target;
-  const t = `$$${n.type}`, s = n.target, i = n.currentTarget, l = (r) => Object.defineProperty(n, "target", {
-    configurable: !0,
-    value: r
-  }), c = () => {
-    const r = e[t];
-    if (r && !e.disabled) {
-      const a = e[`${t}Data`];
-      if (a !== void 0 ? r.call(e, a, n) : r.call(e, n), n.cancelBubble) return;
-    }
-    return e.host && typeof e.host != "string" && !e.host._$host && e.contains(n.target) && l(e.host), !0;
-  }, o = () => {
-    for (; c() && (e = e._$host || e.parentNode || e.host); ) ;
-  };
-  if (Object.defineProperty(n, "currentTarget", {
-    configurable: !0,
-    get() {
-      return e || document;
-    }
-  }), m.registry && !m.done && (m.done = _$HY.done = !0), n.composedPath) {
-    const r = n.composedPath();
-    l(r[0]);
-    for (let a = 0; a < r.length - 2 && (e = r[a], !!c()); a++) {
-      if (e._$host) {
-        e = e._$host, o();
-        break;
-      }
-      if (e.parentNode === i)
-        break;
-    }
-  } else o();
-  l(s);
-}
-function N(n, e, t, s, i) {
-  const l = M(n);
-  if (l) {
-    !t && (t = [...n.childNodes]);
-    let r = [];
-    for (let a = 0; a < t.length; a++) {
-      const f = t[a];
-      f.nodeType === 8 && f.data.slice(0, 2) === "!$" ? f.remove() : r.push(f);
-    }
-    t = r;
-  }
-  for (; typeof t == "function"; ) t = t();
-  if (e === t) return t;
-  const c = typeof e, o = s !== void 0;
-  if (n = o && t[0] && t[0].parentNode || n, c === "string" || c === "number") {
-    if (l || c === "number" && (e = e.toString(), e === t))
-      return t;
-    if (o) {
-      let r = t[0];
-      r && r.nodeType === 3 ? r.data !== e && (r.data = e) : r = document.createTextNode(e), t = x(n, t, s, r);
-    } else
-      t !== "" && typeof t == "string" ? t = n.firstChild.data = e : t = n.textContent = e;
-  } else if (e == null || c === "boolean") {
-    if (l) return t;
-    t = x(n, t, s);
-  } else {
-    if (c === "function")
-      return $(() => {
-        let r = e();
-        for (; typeof r == "function"; ) r = r();
-        t = N(n, r, t, s);
-      }), () => t;
-    if (Array.isArray(e)) {
-      const r = [], a = t && Array.isArray(t);
-      if (H(r, e, t, i))
-        return $(() => t = N(n, r, t, s, !0)), () => t;
-      if (l) {
-        if (!r.length) return t;
-        if (s === void 0) return t = [...n.childNodes];
-        let f = r[0];
-        if (f.parentNode !== n) return t;
-        const u = [f];
-        for (; (f = f.nextSibling) !== s; ) u.push(f);
-        return t = u;
-      }
-      if (r.length === 0) {
-        if (t = x(n, t, s), o) return t;
-      } else a ? t.length === 0 ? X(n, r, s) : de(n, t, r) : (t && x(n), X(n, r));
-      t = r;
-    } else if (e.nodeType) {
-      if (l && e.parentNode) return t = o ? [e] : e;
-      if (Array.isArray(t)) {
-        if (o) return t = x(n, t, s, e);
-        x(n, t, null, e);
-      } else t == null || t === "" || !n.firstChild ? n.appendChild(e) : n.replaceChild(e, n.firstChild);
-      t = e;
-    }
-  }
-  return t;
-}
-function H(n, e, t, s) {
-  let i = !1;
-  for (let l = 0, c = e.length; l < c; l++) {
-    let o = e[l], r = t && t[n.length], a;
-    if (!(o == null || o === !0 || o === !1)) if ((a = typeof o) == "object" && o.nodeType)
-      n.push(o);
-    else if (Array.isArray(o))
-      i = H(n, o, r) || i;
-    else if (a === "function")
-      if (s) {
-        for (; typeof o == "function"; ) o = o();
-        i = H(n, Array.isArray(o) ? o : [o], Array.isArray(r) ? r : [r]) || i;
-      } else
-        n.push(o), i = !0;
-    else {
-      const f = String(o);
-      r && r.nodeType === 3 && r.data === f ? n.push(r) : n.push(document.createTextNode(f));
-    }
-  }
-  return i;
-}
-function X(n, e, t = null) {
-  for (let s = 0, i = e.length; s < i; s++) n.insertBefore(e[s], t);
-}
-function x(n, e, t, s) {
-  if (t === void 0) return n.textContent = "";
-  const i = s || document.createTextNode("");
-  if (e.length) {
-    let l = !1;
-    for (let c = e.length - 1; c >= 0; c--) {
-      const o = e[c];
-      if (i !== o) {
-        const r = o.parentNode === n;
-        !l && !c ? r ? n.replaceChild(i, o) : n.insertBefore(i, t) : r && o.remove();
-      } else l = !0;
-    }
-  } else n.insertBefore(i, t);
-  return [i];
-}
-const Ce = "_button_12jrf_1", xe = {
-  button: Ce
-}, _ = (...n) => n.filter(Boolean).join(" ");
-var Ae = /* @__PURE__ */ h("<button type=button>");
-const ct = (n) => {
-  const [e, t] = A(n, ["variant"]);
+import { template, spread, mergeProps as mergeProps$1, insert, memo, setAttribute, effect, className, createComponent, use } from 'solid-js/web';
+import { createContext, mergeProps, splitProps, createUniqueId, useContext, createSignal, createMemo, createEffect, children, Show } from 'solid-js';
+import sx from './button.module.css';
+export { default as buttonSx } from './button.module.css';
+import sx2 from './link.module.css';
+import sx3 from './checkbox.module.css';
+import sx4 from './text_input.module.css';
+import sx5 from './dialog.module.css';
+import sx6 from './field.module.css';
+
+// src/main.ts
+
+// src/utils/cls.ts
+var cls = (...classes) => {
+  return classes.filter(Boolean).join(" ");
+};
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button>`);
+var defaultProps = {
+  variant: "solid"
+};
+var Button = (props) => {
+  const merged = mergeProps(defaultProps, props);
+  const [local, rest] = splitProps(merged, ["class", "variant"]);
   return (() => {
-    var s = Ae();
-    return b(s, g(t, {
-      get class() {
-        return _(xe.button, t.class, e.variant || "solid");
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx.button, local.class, local.variant === "solid" && sx.solid, local.variant === "outlined" && sx.outlined);
       }
-    }), !1, !0), y(s, () => n.children), s;
+    }), false, true);
+    insert(_el$, () => rest.children);
+    return _el$;
   })();
-}, Te = "_checkbox_1npj4_1", Ee = "_input_1npj4_8", De = "_indicator_1npj4_18", we = "_label_1npj4_37", Le = "_disabled_1npj4_46", E = {
-  checkbox: Te,
-  input: Ee,
-  indicator: De,
-  label: we,
-  disabled: Le
 };
-var Ne = /* @__PURE__ */ h("<span><input><span>"), Be = /* @__PURE__ */ h("<label>");
-const at = (n) => {
-  const [e, t] = A(n, ["label", "error", "class"]), s = B();
+var _tmpl$2 = /* @__PURE__ */ template(`<a>`);
+var Link = (props) => {
+  const [local, rest] = splitProps(props, ["class", "reset", "disabled", "color", "underline"]);
   return (() => {
-    var i = Ne(), l = i.firstChild, c = l.nextSibling;
-    return b(l, g(t, {
-      id: s,
-      type: "checkbox",
-      get class() {
-        return E.input;
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(!local.reset && sx2.link, local.class, local.disabled && sx2.disabled, local.color === "secondary" && sx2.secondary, local.underline === "always" && sx2.underline);
       },
-      get "aria-invalid"() {
-        return !!e.error;
+      get ["aria-disabled"]() {
+        return local.disabled;
       }
-    }), !1, !1), y(i, (() => {
-      var o = q(() => !!e.label);
-      return () => o() && (() => {
-        var r = Be();
-        return S(r, "for", s), y(r, () => e.label), $(() => P(r, E.label)), r;
-      })();
-    })(), null), $((o) => {
-      var r = _(E.checkbox, e.class, t.disabled && E.disabled), a = E.indicator;
-      return r !== o.e && P(i, o.e = r), a !== o.t && P(c, o.t = a), o;
-    }, {
-      e: void 0,
-      t: void 0
-    }), i;
+    }), false, true);
+    insert(_el$, () => rest.children);
+    return _el$;
   })();
-}, Ie = (n) => n.level === "error", Y = (n) => {
-  if (n.length)
-    return n.map((e) => e.id).join(" ");
-}, D = () => {
-}, L = (n) => () => n, J = () => () => {
-}, Me = {
-  fieldId: "",
-  error: L(!1),
-  ariaDescribedBy: L(void 0),
-  ariaErrorMessage: L(void 0),
-  setMessage: D
-}, p = Q(Me, {}), v = () => W(p), je = (n) => {
-  const e = B(), [t, s] = F([]), i = w(() => n.error), l = w(() => Y(t())), c = w(() => Y(t().filter(Ie))), o = (r) => {
-    s((a) => [...a, r]);
+};
+
+// src/utils/message.ts
+var isError = (message) => {
+  return message.level === "error";
+};
+var getMessageIds = (messages) => {
+  if (!messages.length) {
+    return void 0;
+  }
+  return messages.map((message) => message.id).join(" ");
+};
+
+// src/utils/noop.ts
+var noop = () => {
+};
+var noopAccessor = (value) => {
+  return () => value;
+};
+var noopSetter = () => {
+  return () => {
   };
-  return I(p.Provider, {
+};
+
+// src/field/field.context.tsx
+var defaultValue = {
+  fieldId: void 0,
+  error: noopAccessor(false),
+  ariaDescribedBy: noopAccessor(void 0),
+  ariaErrorMessage: noopAccessor(void 0),
+  setMessage: noop
+};
+var FieldContext = createContext(defaultValue, {});
+var useFieldContext = () => {
+  return useContext(FieldContext);
+};
+var FieldProvider = (props) => {
+  const fieldId = createUniqueId();
+  const [messages, setMessages] = createSignal([]);
+  const error = createMemo(() => {
+    return props.error;
+  });
+  const ariaDescribedBy = createMemo(() => {
+    return getMessageIds(messages());
+  });
+  const ariaErrorMessage = createMemo(() => {
+    return getMessageIds(messages().filter(isError));
+  });
+  const setMessage = (message) => {
+    setMessages((prev) => [...prev, message]);
+  };
+  return createComponent(FieldContext.Provider, {
     value: {
-      fieldId: e,
-      error: i,
-      setMessage: o,
-      ariaDescribedBy: l,
-      ariaErrorMessage: c
+      fieldId,
+      error,
+      setMessage,
+      ariaDescribedBy,
+      ariaErrorMessage
     },
     get children() {
-      return n.children;
+      return props.children;
     }
   });
-}, Pe = "_input_1nlce_1", Se = {
-  input: Pe
 };
-var Oe = /* @__PURE__ */ h("<input>");
-const ft = (n) => {
-  const [e, t] = A(n, ["error", "class"]), s = v();
+
+// src/checkbox/checkbox.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<span><input><span>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<label>`);
+var Checkbox = (props) => {
+  const [local, rest] = splitProps(props, ["label", "error", "class"]);
+  const context = useFieldContext();
+  const id = createUniqueId();
   return (() => {
-    var i = Oe();
-    return b(i, g(t, {
-      get class() {
-        return _(Se.input, e.class);
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$2, mergeProps$1(rest, {
+      "id": id,
+      "type": "checkbox",
+      get ["class"]() {
+        return sx3.input;
+      },
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
+      },
+      get ["aria-invalid"]() {
+        return context.error() || !!local.error;
+      },
+      get ["aria-errormessage"]() {
+        return context.ariaErrorMessage();
+      }
+    }), false, false);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!local.label);
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$22();
+        setAttribute(_el$4, "for", id);
+        insert(_el$4, () => local.label);
+        effect(() => className(_el$4, sx3.label));
+        return _el$4;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$ = cls(sx3.checkbox, local.class, rest.disabled && sx3.disabled), _v$2 = sx3.indicator;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
+var TextInput = (props) => {
+  const [local, rest] = splitProps(props, ["error", "class"]);
+  const context = useFieldContext();
+  return (() => {
+    var _el$ = _tmpl$4();
+    spread(_el$, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx4.input, local.class);
       },
       get id() {
-        return s.fieldId;
+        return context.fieldId;
       },
-      get "aria-describedby"() {
-        return s.ariaDescribedBy();
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
       },
-      get "aria-invalid"() {
-        return s.error() || !!e.error;
+      get ["aria-invalid"]() {
+        return context.error() || !!local.error;
       },
-      get "aria-errormessage"() {
-        return s.ariaErrorMessage();
+      get ["aria-errormessage"]() {
+        return context.ariaErrorMessage();
       }
-    }), !1, !1), i;
+    }), false, false);
+    return _el$;
   })();
-}, ke = {
+};
+var defaultValue2 = {
   setDialogRef() {
   },
-  ariaLabelledBy: L(void 0),
-  ariaDescribedBy: L(void 0),
-  setTitleId: J(),
-  setDescriptionId: J(),
-  openDialog: D,
-  closeDialog: D,
-  onOpenChange: D,
-  onBeforeClose: D
-}, ee = Q(ke), j = () => W(ee), Ve = (n) => {
-  let e;
-  const t = (f) => {
-    e = f;
-  }, [s, i] = F(), [l, c] = F(), o = w(() => n.isOpen), r = () => {
-    var f;
-    e == null || e.showModal(), (f = n.onOpenChange) == null || f.call(n, !0);
-  }, a = () => {
-    e == null || e.requestClose();
+  ariaLabelledBy: noopAccessor(void 0),
+  ariaDescribedBy: noopAccessor(void 0),
+  setTitleId: noopSetter(),
+  setDescriptionId: noopSetter(),
+  openDialog: noop,
+  closeDialog: noop,
+  onOpenChange: noop,
+  onBeforeClose: noop
+};
+var DialogContext = createContext(defaultValue2);
+var useDialogContext = () => {
+  return useContext(DialogContext);
+};
+
+// src/dialog/provider/provider.tsx
+var DialogProvider = (props) => {
+  let dialogRef;
+  const setDialogRef = (element) => {
+    dialogRef = element;
   };
-  return U(() => {
-    o() ? r() : a();
-  }), I(ee.Provider, {
+  const [ariaLabelledBy, setTitleId] = createSignal();
+  const [ariaDescribedBy, setDescriptionId] = createSignal();
+  const isOpen = createMemo(() => {
+    return props.isOpen;
+  });
+  const openDialog = () => {
+    dialogRef?.showModal();
+    props.onOpenChange?.(true);
+  };
+  const closeDialog = () => {
+    dialogRef?.requestClose();
+  };
+  createEffect(() => {
+    if (isOpen()) {
+      openDialog();
+    } else {
+      closeDialog();
+    }
+  });
+  return createComponent(DialogContext.Provider, {
     get value() {
       return {
-        ariaLabelledBy: s,
-        ariaDescribedBy: l,
-        setDialogRef: t,
-        setTitleId: i,
-        setDescriptionId: c,
-        openDialog: r,
-        closeDialog: a,
-        onOpenChange: n.onOpenChange,
-        onBeforeClose: n.onBeforeClose
+        ariaLabelledBy,
+        ariaDescribedBy,
+        setDialogRef,
+        setTitleId,
+        setDescriptionId,
+        openDialog,
+        closeDialog,
+        onOpenChange: props.onOpenChange,
+        onBeforeClose: props.onBeforeClose
       };
     },
     get children() {
-      return n.children;
+      return props.children;
     }
   });
-}, Fe = "_dialog_1klsa_1", He = "_title_1klsa_16", Ue = "_description_1klsa_26", qe = "_actions_1klsa_37", k = {
-  dialog: Fe,
-  title: He,
-  description: Ue,
-  actions: qe
 };
-var ve = /* @__PURE__ */ h("<dialog>"), Ge = /* @__PURE__ */ h("<h2>"), Ke = /* @__PURE__ */ h("<p>"), Re = /* @__PURE__ */ h("<div>");
-const T = (n) => I(Ve, g(n, {
-  get children() {
-    return n.children;
-  }
-})), Xe = (n) => {
-  const e = j(), t = Z(() => n.children);
-  return U(() => {
-    const s = t();
-    s instanceof HTMLElement && (s.onclick = e.openDialog);
-  }), q(t);
-}, Ye = (n) => {
-  const e = j();
+var _tmpl$5 = /* @__PURE__ */ template(`<dialog>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<h2>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var Dialog = (props) => {
+  return createComponent(DialogProvider, mergeProps$1(props, {
+    get children() {
+      return props.children;
+    }
+  }));
+};
+var Trigger = (props) => {
+  const context = useDialogContext();
+  const child = children(() => props.children);
+  createEffect(() => {
+    const element = child();
+    if (element instanceof HTMLElement) {
+      element.onclick = context.openDialog;
+    }
+  });
+  return memo(child);
+};
+var Content = (props) => {
+  const context = useDialogContext();
   return (() => {
-    var t = ve();
-    return z((s) => {
-      n.ref = s, e.setDialogRef(s);
-    }, t), b(t, g(n, {
-      get class() {
-        return _(k.dialog, n.class);
-      },
-      get "aria-labelledby"() {
-        return e.ariaLabelledBy();
+    var _el$ = _tmpl$5();
+    use((element) => {
+      props.ref = element;
+      context.setDialogRef(element);
+    }, _el$);
+    spread(_el$, mergeProps$1(props, {
+      get ["class"]() {
+        return cls(sx5.dialog, props.class);
       },
-      get "aria-describedby"() {
-        return e.ariaDescribedBy();
+      get ["aria-labelledby"]() {
+        return context.ariaLabelledBy();
       },
-      onClose: () => {
-        var s;
-        return (s = e.onOpenChange) == null ? void 0 : s.call(e, !1);
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
       },
+      "onClose": () => context.onOpenChange?.(false),
       get onCancel() {
-        return e.onBeforeClose;
+        return context.onBeforeClose;
       }
-    }), !1, !0), y(t, () => n.children), t;
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
   })();
-}, Je = (n) => {
-  const e = j(), t = B();
-  return e.setTitleId(t), (() => {
-    var s = Ge();
-    return b(s, g(n, {
-      id: t,
-      get class() {
-        return _(k.title, n.class);
+};
+var Title = (props) => {
+  const context = useDialogContext();
+  const titleId = createUniqueId();
+  context.setTitleId(titleId);
+  return (() => {
+    var _el$2 = _tmpl$23();
+    spread(_el$2, mergeProps$1(props, {
+      "id": titleId,
+      get ["class"]() {
+        return cls(sx5.title, props.class);
       }
-    }), !1, !0), y(s, () => n.children), s;
+    }), false, true);
+    insert(_el$2, () => props.children);
+    return _el$2;
   })();
-}, Qe = (n) => {
-  const e = j(), t = B();
-  return e.setDescriptionId(t), (() => {
-    var s = Ke();
-    return b(s, g(n, {
-      id: t,
-      get class() {
-        return _(k.description, n.class);
+};
+var Description = (props) => {
+  const context = useDialogContext();
+  const descriptionId = createUniqueId();
+  context.setDescriptionId(descriptionId);
+  return (() => {
+    var _el$3 = _tmpl$32();
+    spread(_el$3, mergeProps$1(props, {
+      "id": descriptionId,
+      get ["class"]() {
+        return cls(sx5.description, props.class);
       }
-    }), !1, !0), y(s, () => n.children), s;
+    }), false, true);
+    insert(_el$3, () => props.children);
+    return _el$3;
   })();
-}, We = (n) => {
-  const e = j(), t = Z(() => n.children);
-  return U(() => {
-    const s = t();
-    s instanceof HTMLElement && (s.onclick = e.closeDialog);
-  }), q(t);
-}, Ze = (n) => (() => {
-  var e = Re();
-  return b(e, g(n, {
-    get class() {
-      return _(k.actions, n.class);
+};
+var Close = (props) => {
+  const context = useDialogContext();
+  const child = children(() => props.children);
+  createEffect(() => {
+    const element = child();
+    if (element instanceof HTMLElement) {
+      element.onclick = context.closeDialog;
     }
-  }), !1, !0), y(e, () => n.children), e;
-})();
-T.Trigger = Xe;
-T.Content = Ye;
-T.Title = Je;
-T.Description = Qe;
-T.Close = We;
-T.Actions = Ze;
-const ze = "_field_1ijme_1", pe = "_label_1ijme_7", et = "_message_1ijme_19", tt = "_error_1ijme_31", O = {
-  field: ze,
-  label: pe,
-  message: et,
-  error: tt
+  });
+  return memo(child);
 };
-var nt = /* @__PURE__ */ h("<div>"), st = /* @__PURE__ */ h("<label>"), it = /* @__PURE__ */ h("<p>");
-const te = (n) => {
-  const [e, t] = A(n, ["class", "error"]);
-  return I(je, {
+var Actions = (props) => {
+  return (() => {
+    var _el$4 = _tmpl$42();
+    spread(_el$4, mergeProps$1(props, {
+      get ["class"]() {
+        return cls(sx5.actions, props.class);
+      }
+    }), false, true);
+    insert(_el$4, () => props.children);
+    return _el$4;
+  })();
+};
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;
+Dialog.Title = Title;
+Dialog.Description = Description;
+Dialog.Close = Close;
+Dialog.Actions = Actions;
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<p>`);
+var Field = (props) => {
+  const [local, rest] = splitProps(props, ["class", "error"]);
+  return createComponent(FieldProvider, {
     get error() {
-      return !!e.error;
+      return !!local.error;
     },
     get children() {
-      var s = nt();
-      return b(s, g(t, {
-        get class() {
-          return _(O.field, e.class);
+      var _el$ = _tmpl$6();
+      spread(_el$, mergeProps$1(rest, {
+        get ["class"]() {
+          return cls(sx6.field, local.class);
         }
-      }), !1, !0), y(s, () => n.children), s;
+      }), false, true);
+      insert(_el$, () => props.children);
+      return _el$;
     }
   });
-}, ot = (n) => {
-  const [e, t] = A(n, ["class"]), s = v();
+};
+var FieldLabel = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  const context = useFieldContext();
   return (() => {
-    var i = st();
-    return b(i, g(t, {
-      get for() {
-        return s.fieldId;
+    var _el$2 = _tmpl$24();
+    spread(_el$2, mergeProps$1(rest, {
+      get ["for"]() {
+        return context.fieldId;
       },
-      get class() {
-        return _(O.label, e.class);
+      get ["class"]() {
+        return cls(sx6.label, local.class);
       }
-    }), !1, !0), y(i, () => t.children), i;
+    }), false, true);
+    insert(_el$2, () => rest.children);
+    return _el$2;
   })();
-}, lt = (n) => {
-  const [e, t] = A(n, ["class", "level"]), s = v(), i = B();
-  return s.setMessage({
-    level: e.level || "info",
-    id: i
-  }), I(se, {
+};
+var FieldMessage = (props) => {
+  const [local, rest] = splitProps(props, ["class", "level"]);
+  const context = useFieldContext();
+  const messageId = createUniqueId();
+  context.setMessage({
+    level: local.level || "info",
+    id: messageId
+  });
+  return createComponent(Show, {
     get when() {
-      return t.children;
+      return rest.children;
     },
     get children() {
-      var l = it();
-      return b(l, g(t, {
-        id: i,
-        get class() {
-          return _(O.message, e.class, e.level === "error" && O.error);
+      var _el$3 = _tmpl$33();
+      spread(_el$3, mergeProps$1(rest, {
+        "id": messageId,
+        get ["class"]() {
+          return cls(sx6.message, local.class, local.level === "error" && sx6.error);
         }
-      }), !1, !0), y(l, () => t.children), l;
+      }), false, true);
+      insert(_el$3, () => rest.children);
+      return _el$3;
     }
   });
 };
-te.Label = ot;
-te.Message = lt;
-export {
-  ct as Button,
-  at as Checkbox,
-  T as Dialog,
-  te as Field,
-  ft as TextInput
-};
+Field.Label = FieldLabel;
+Field.Message = FieldMessage;
+
+export { Button, Checkbox, Dialog, Field, Link, TextInput, cls };