solid-uix 0.5.0 → 0.5.1

package/dist/main.js

@@ -1,324 +1,426 @@
-import { template as i, spread as u, mergeProps as c, insert as d, createComponent as x, memo as E, setAttribute as N, effect as O, className as M, use as U } from "solid-js/web";
-import { mergeProps as z, splitProps as g, createContext as S, useContext as w, createUniqueId as p, createSignal as P, createMemo as k, createEffect as L, children as A, Show as G } from "solid-js";
-const _ = (...e) => e.filter(Boolean).join(" "), J = "_button_1x3l8_1", K = "_solid_1x3l8_29", Q = "_outlined_1x3l8_44", W = "_link_1x3l8_60", T = {
-  button: J,
-  solid: K,
-  outlined: Q,
-  link: W
+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 X = /* @__PURE__ */ i("<button type=button>");
-const Y = {
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button>`);
+var defaultProps = {
   variant: "solid"
-}, Ue = (e) => {
-  const t = z(Y, e), [n, r] = g(t, ["class", "variant"]);
+};
+var Button = (props) => {
+  const merged = mergeProps(defaultProps, props);
+  const [local, rest] = splitProps(merged, ["class", "variant"]);
   return (() => {
-    var s = X();
-    return u(s, c(r, {
-      get class() {
-        return _(T.button, n.class, n.variant === "solid" && T.solid, n.variant === "outlined" && T.outlined);
+    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), d(s, () => r.children), s;
+    }), false, true);
+    insert(_el$, () => rest.children);
+    return _el$;
   })();
-}, Z = "_link_yqbjv_1", ee = "_underline_yqbjv_14", te = "_secondary_yqbjv_18", re = "_disabled_yqbjv_22", D = {
-  link: Z,
-  underline: ee,
-  secondary: te,
-  disabled: re
 };
-var ne = /* @__PURE__ */ i("<a>");
-const ze = (e) => {
-  const [t, n] = g(e, ["class", "disabled", "color", "underline"]);
+var _tmpl$2 = /* @__PURE__ */ template(`<a>`);
+var Link = (props) => {
+  const [local, rest] = splitProps(props, ["class", "reset", "disabled", "color", "underline"]);
   return (() => {
-    var r = ne();
-    return u(r, c(n, {
-      get class() {
-        return _(D.link, t.class, t.disabled && D.disabled, t.color === "secondary" && D.secondary, t.underline === "always" && D.underline);
+    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-disabled"() {
-        return t.disabled;
+      get ["aria-disabled"]() {
+        return local.disabled;
       }
-    }), !1, !0), d(r, () => n.children), r;
+    }), false, true);
+    insert(_el$, () => rest.children);
+    return _el$;
   })();
-}, se = "_checkbox_1npj4_1", le = "_input_1npj4_8", oe = "_indicator_1npj4_18", ae = "_label_1npj4_37", ie = "_disabled_1npj4_46", $ = {
-  checkbox: se,
-  input: le,
-  indicator: oe,
-  label: ae,
-  disabled: ie
-}, ce = (e) => e.level === "error", q = (e) => {
-  if (e.length)
-    return e.map((t) => t.id).join(" ");
-}, m = () => {
-}, h = (e) => () => e, F = () => () => {
-}, de = {
+};
+
+// 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 () => {
+  };
+};
+
+// src/field/field.context.tsx
+var defaultValue = {
   fieldId: void 0,
-  error: h(!1),
-  ariaDescribedBy: h(void 0),
-  ariaErrorMessage: h(void 0),
-  setMessage: m
-}, R = S(de, {}), B = () => w(R), ue = (e) => {
-  const t = p(), [n, r] = P([]), s = k(() => e.error), l = k(() => q(n())), b = k(() => q(n().filter(ce))), f = (o) => {
-    r((a) => [...a, o]);
+  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 x(R.Provider, {
+  return createComponent(FieldContext.Provider, {
     value: {
-      fieldId: t,
-      error: s,
-      setMessage: f,
-      ariaDescribedBy: l,
-      ariaErrorMessage: b
+      fieldId,
+      error,
+      setMessage,
+      ariaDescribedBy,
+      ariaErrorMessage
     },
     get children() {
-      return e.children;
+      return props.children;
     }
   });
 };
-var _e = /* @__PURE__ */ i("<span><input><span>"), ge = /* @__PURE__ */ i("<label>");
-const Ge = (e) => {
-  const [t, n] = g(e, ["label", "error", "class"]), r = B(), s = p();
+
+// 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 l = _e(), b = l.firstChild, f = b.nextSibling;
-    return u(b, c(n, {
-      id: s,
-      type: "checkbox",
-      get class() {
-        return $.input;
+    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 r.ariaDescribedBy();
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
       },
-      get "aria-invalid"() {
-        return r.error() || !!t.error;
+      get ["aria-invalid"]() {
+        return context.error() || !!local.error;
       },
-      get "aria-errormessage"() {
-        return r.ariaErrorMessage();
+      get ["aria-errormessage"]() {
+        return context.ariaErrorMessage();
       }
-    }), !1, !1), d(l, (() => {
-      var o = E(() => !!t.label);
-      return () => o() && (() => {
-        var a = ge();
-        return N(a, "for", s), d(a, () => t.label), O(() => M(a, $.label)), a;
+    }), 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), O((o) => {
-      var a = _($.checkbox, t.class, n.disabled && $.disabled), C = $.indicator;
-      return a !== o.e && M(l, o.e = a), C !== o.t && M(f, o.t = C), o;
+    })(), 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
-    }), l;
+    });
+    return _el$;
   })();
-}, be = "_input_vvaje_1", ve = {
-  input: be
 };
-var fe = /* @__PURE__ */ i("<input>");
-const Je = (e) => {
-  const [t, n] = g(e, ["error", "class"]), r = B();
+var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
+var TextInput = (props) => {
+  const [local, rest] = splitProps(props, ["error", "class"]);
+  const context = useFieldContext();
   return (() => {
-    var s = fe();
-    return u(s, c(n, {
-      get class() {
-        return _(ve.input, t.class);
+    var _el$ = _tmpl$4();
+    spread(_el$, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx4.input, local.class);
       },
       get id() {
-        return r.fieldId;
+        return context.fieldId;
       },
-      get "aria-describedby"() {
-        return r.ariaDescribedBy();
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
       },
-      get "aria-invalid"() {
-        return r.error() || !!t.error;
+      get ["aria-invalid"]() {
+        return context.error() || !!local.error;
       },
-      get "aria-errormessage"() {
-        return r.ariaErrorMessage();
+      get ["aria-errormessage"]() {
+        return context.ariaErrorMessage();
       }
-    }), !1, !1), s;
+    }), false, false);
+    return _el$;
   })();
-}, $e = {
+};
+var defaultValue2 = {
   setDialogRef() {
   },
-  ariaLabelledBy: h(void 0),
-  ariaDescribedBy: h(void 0),
-  setTitleId: F(),
-  setDescriptionId: F(),
-  openDialog: m,
-  closeDialog: m,
-  onOpenChange: m,
-  onBeforeClose: m
-}, H = S($e), y = () => w(H), me = (e) => {
-  let t;
-  const n = (C) => {
-    t = C;
-  }, [r, s] = P(), [l, b] = P(), f = k(() => e.isOpen), o = () => {
-    t?.showModal(), e.onOpenChange?.(!0);
-  }, a = () => {
-    t?.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 L(() => {
-    f() ? o() : a();
-  }), x(H.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: r,
-        ariaDescribedBy: l,
-        setDialogRef: n,
-        setTitleId: s,
-        setDescriptionId: b,
-        openDialog: o,
-        closeDialog: a,
-        onOpenChange: e.onOpenChange,
-        onBeforeClose: e.onBeforeClose
+        ariaLabelledBy,
+        ariaDescribedBy,
+        setDialogRef,
+        setTitleId,
+        setDescriptionId,
+        openDialog,
+        closeDialog,
+        onOpenChange: props.onOpenChange,
+        onBeforeClose: props.onBeforeClose
       };
     },
     get children() {
-      return e.children;
+      return props.children;
     }
   });
-}, he = "_dialog_1klsa_1", xe = "_title_1klsa_16", pe = "_description_1klsa_26", ye = "_actions_1klsa_37", I = {
-  dialog: he,
-  title: xe,
-  description: pe,
-  actions: ye
 };
-var Ce = /* @__PURE__ */ i("<dialog>"), De = /* @__PURE__ */ i("<h2>"), ke = /* @__PURE__ */ i("<p>"), je = /* @__PURE__ */ i("<div>");
-const v = (e) => x(me, c(e, {
-  get children() {
-    return e.children;
-  }
-})), Be = (e) => {
-  const t = y(), n = A(() => e.children);
-  return L(() => {
-    const r = n();
-    r instanceof HTMLElement && (r.onclick = t.openDialog);
-  }), E(n);
-}, Ie = (e) => {
-  const t = y();
+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 n = Ce();
-    return U((r) => {
-      e.ref = r, t.setDialogRef(r);
-    }, n), u(n, c(e, {
-      get class() {
-        return _(I.dialog, e.class);
+    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-labelledby"() {
-        return t.ariaLabelledBy();
+      get ["aria-labelledby"]() {
+        return context.ariaLabelledBy();
       },
-      get "aria-describedby"() {
-        return t.ariaDescribedBy();
+      get ["aria-describedby"]() {
+        return context.ariaDescribedBy();
       },
-      onClose: () => t.onOpenChange?.(!1),
+      "onClose": () => context.onOpenChange?.(false),
       get onCancel() {
-        return t.onBeforeClose;
+        return context.onBeforeClose;
       }
-    }), !1, !0), d(n, () => e.children), n;
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
   })();
-}, Me = (e) => {
-  const t = y(), n = p();
-  return t.setTitleId(n), (() => {
-    var r = De();
-    return u(r, c(e, {
-      id: n,
-      get class() {
-        return _(I.title, e.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), d(r, () => e.children), r;
+    }), false, true);
+    insert(_el$2, () => props.children);
+    return _el$2;
   })();
-}, Te = (e) => {
-  const t = y(), n = p();
-  return t.setDescriptionId(n), (() => {
-    var r = ke();
-    return u(r, c(e, {
-      id: n,
-      get class() {
-        return _(I.description, e.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), d(r, () => e.children), r;
+    }), false, true);
+    insert(_el$3, () => props.children);
+    return _el$3;
   })();
-}, Pe = (e) => {
-  const t = y(), n = A(() => e.children);
-  return L(() => {
-    const r = n();
-    r instanceof HTMLElement && (r.onclick = t.closeDialog);
-  }), E(n);
-}, Ee = (e) => (() => {
-  var t = je();
-  return u(t, c(e, {
-    get class() {
-      return _(I.actions, e.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), d(t, () => e.children), t;
-})();
-v.Trigger = Be;
-v.Content = Ie;
-v.Title = Me;
-v.Description = Te;
-v.Close = Pe;
-v.Actions = Ee;
-const Le = "_field_1ijme_1", Oe = "_label_1ijme_7", qe = "_message_1ijme_19", Fe = "_error_1ijme_31", j = {
-  field: Le,
-  label: Oe,
-  message: qe,
-  error: Fe
+  });
+  return memo(child);
+};
+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;
+  })();
 };
-var Se = /* @__PURE__ */ i("<div>"), we = /* @__PURE__ */ i("<label>"), Ae = /* @__PURE__ */ i("<p>");
-const V = (e) => {
-  const [t, n] = g(e, ["class", "error"]);
-  return x(ue, {
+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 !!t.error;
+      return !!local.error;
     },
     get children() {
-      var r = Se();
-      return u(r, c(n, {
-        get class() {
-          return _(j.field, t.class);
+      var _el$ = _tmpl$6();
+      spread(_el$, mergeProps$1(rest, {
+        get ["class"]() {
+          return cls(sx6.field, local.class);
         }
-      }), !1, !0), d(r, () => e.children), r;
+      }), false, true);
+      insert(_el$, () => props.children);
+      return _el$;
     }
   });
-}, Re = (e) => {
-  const [t, n] = g(e, ["class"]), r = B();
+};
+var FieldLabel = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  const context = useFieldContext();
   return (() => {
-    var s = we();
-    return u(s, c(n, {
-      get for() {
-        return r.fieldId;
+    var _el$2 = _tmpl$24();
+    spread(_el$2, mergeProps$1(rest, {
+      get ["for"]() {
+        return context.fieldId;
       },
-      get class() {
-        return _(j.label, t.class);
+      get ["class"]() {
+        return cls(sx6.label, local.class);
       }
-    }), !1, !0), d(s, () => n.children), s;
+    }), false, true);
+    insert(_el$2, () => rest.children);
+    return _el$2;
   })();
-}, He = (e) => {
-  const [t, n] = g(e, ["class", "level"]), r = B(), s = p();
-  return r.setMessage({
-    level: t.level || "info",
-    id: s
-  }), x(G, {
+};
+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 n.children;
+      return rest.children;
     },
     get children() {
-      var l = Ae();
-      return u(l, c(n, {
-        id: s,
-        get class() {
-          return _(j.message, t.class, t.level === "error" && j.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), d(l, () => n.children), l;
+      }), false, true);
+      insert(_el$3, () => rest.children);
+      return _el$3;
     }
   });
 };
-V.Label = Re;
-V.Message = He;
-export {
-  Ue as Button,
-  Ge as Checkbox,
-  v as Dialog,
-  V as Field,
-  ze as Link,
-  Je as TextInput,
-  T as buttonSx,
-  _ as cls
-};
-//# sourceMappingURL=main.js.map
+Field.Label = FieldLabel;
+Field.Message = FieldMessage;
+
+export { Button, Checkbox, Dialog, Field, Link, TextInput, cls };