solid-uix 0.2.0 → 0.3.0

package/README.md

@@ -1,5 +1,9 @@
 # Solid UIX
 
+<p align="center">
+  <a href="https://solid-uix.vercel.app">Storybook</a> 
+</p>
+
 ### Install
 
 ```sh
@@ -9,8 +13,20 @@ npm install solid-uix
 ### Quick start
 
 ```js
+import { Button, TextInput, Checkbox, Field } from "solid-uix";
 import "solid-uix/dist/main.css";
-import { Button } from "solid-uix";
 
-<Button>Example</Button>;
+const Example = () => {
+  return (
+    <form>
+      <Field>
+        <Field.Label>Email</Field.Label>
+        <TextInput name="email" />
+      </Field>
+
+      <Checkbox name="consent" label="I agree" />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+};
 ```

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './checkbox.types';
+export declare const Checkbox: (props: CheckboxProps) => import("solid-js").JSX.Element;

package/dist/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    component: (props: import('./checkbox.types').CheckboxProps) => import("solid-js").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        label: string;
+        disabled: boolean;
+        error: boolean;
+        onChange: import('storybook/test').Mock<(...args: any[]) => any>;
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {};
+};
+export declare const Disabled: {
+    args: {
+        disabled: boolean;
+    };
+};
+export declare const Error: {
+    args: {
+        error: boolean;
+    };
+};

package/dist/checkbox/checkbox.types.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+export type CheckboxProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    error?: boolean;
+};

package/dist/field/field.context.d.ts

@@ -0,0 +1,3 @@
+import { FieldContextValue, FieldProviderProps } from './field.types';
+export declare const useFieldContext: () => FieldContextValue;
+export declare const FieldProvider: (props: FieldProviderProps) => import("solid-js").JSX.Element;

package/dist/field/field.d.ts

@@ -0,0 +1,6 @@
+import { FieldLabelProps, FieldMessageProps, FieldProps } from './field.types';
+export declare const Field: {
+    (props: FieldProps): import("solid-js").JSX.Element;
+    Label: (props: FieldLabelProps) => import("solid-js").JSX.Element;
+    Message: (props: FieldMessageProps) => import("solid-js").JSX.Element;
+};

package/dist/field/field.types.d.ts

@@ -0,0 +1,19 @@
+import { Accessor, JSX, ParentProps } from 'solid-js';
+import { Message, MessageLevel } from '../utils/message';
+export type FieldProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    error?: string | boolean;
+};
+export type FieldProviderProps = ParentProps & {
+    error: boolean;
+};
+export type FieldLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement>;
+export type FieldMessageProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
+    level?: MessageLevel;
+};
+export type FieldContextValue = {
+    error: Accessor<boolean>;
+    fieldId: string;
+    ariaDescribedBy: Accessor<string | undefined>;
+    ariaErrorMessage: Accessor<string | undefined>;
+    setMessage(message: Message): void;
+};

package/dist/list/list.d.ts

@@ -0,0 +1,5 @@
+import { ListItemProps, ListProps } from './list.types';
+export declare const List: {
+    (props: ListProps): import("solid-js").JSX.Element;
+    Item: (props: ListItemProps) => import("solid-js").JSX.Element;
+};

package/dist/list/list.types.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js';
+export type ListProps = JSX.LabelHTMLAttributes<HTMLUListElement>;
+export type ListItemProps = JSX.LabelHTMLAttributes<HTMLLIElement>;

package/dist/main.css

@@ -1 +1 @@
-:root{--colors-black-100: #efeff4;--colors-black-100-transparent: #efeff410;--colors-black-150: #d9d9df;--colors-black-200: #c1c2cb;--colors-black-300: #acadb6;--colors-black-400: #9495a0;--colors-black-500: #777987;--colors-black-600: #61636d;--colors-black-700: #494a56;--colors-black-800: #22232a;--colors-black-850: #17181e;--colors-black-900: #0a0b11;--colors-accent-500: #ec5990;color:var(--colors-black-100);background-color:var(--colors-black-900);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}._button_knpbv_1{height:48px;box-sizing:border-box;border:none;width:100%;min-width:164px;background:var(--colors-accent-500);border-radius:6px;padding:0 10px;transition:background .3s;font-family:Inter;font-weight:500;font-size:16px;line-height:22px;letter-spacing:0%;text-align:center;color:var(--colors-black-100);cursor:pointer}._button_knpbv_1:disabled{background:var(--colors-black-700);pointer-events:none}._button_knpbv_1:focus-visible{outline:1px solid var(--colors-black-100)}._label_16ku5_1{margin-bottom:6px;font-family:Inter;font-weight:400;font-size:14px;line-height:18px;letter-spacing:0%;color:var(--colors-black-300)}
+:root{--colors-black-100: #efeff4;--colors-black-150: #d9d9df;--colors-black-200: #c1c2cb;--colors-black-300: #acadb6;--colors-black-400: #9495a0;--colors-black-500: #777987;--colors-black-600: #61636d;--colors-black-700: #494a56;--colors-black-800: #22232a;--colors-black-850: #17181e;--colors-black-900: #0a0b11;--colors-white-50-transparent: #ffffff0d;--colors-accent-400: #f7689d;--colors-accent-500: #ec5990;--colors-accent-600: #d8497d;--colors-error-400: #ff6645;--colors-error-500: #ec441f;color-scheme:light dark;color:var(--colors-black-100);background-color:var(--colors-black-900);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}._button_1xfap_1{height:48px;box-sizing:border-box;border:none;width:100%;min-width:164px;background:var(--colors-accent-500);border-radius:6px;padding:0 10px;transition:background .3s;font-family:Inter;font-weight:500;font-size:16px;line-height:22px;letter-spacing:0%;text-align:center;color:var(--colors-black-900);cursor:pointer}._button_1xfap_1:hover{background:var(--colors-accent-400)}._button_1xfap_1:disabled{background:var(--colors-black-700);color:var(--colors-black-400);cursor:not-allowed}._button_1xfap_1:focus-visible{outline:solid 2px var(--colors-accent-500);outline-offset:2px}._input_1nlce_1{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:48px;width:100%;padding:12px;box-sizing:border-box;border:1px solid var(--colors-black-500);border-radius:6px;outline:none;background-color:var(--colors-black-900);font-family:Inter;font-weight:400;font-size:16px;line-height:22px;letter-spacing:0%;color:var(--colors-black-100)}._input_1nlce_1:focus{border-color:var(--colors-black-200)}._input_1nlce_1:disabled{border-color:var(--colors-black-700);color:var(--colors-black-600);cursor:not-allowed}._input_1nlce_1[aria-invalid=true]{border-color:var(--colors-error-500)}._input_1nlce_1[aria-invalid=true]:focus{border-color:var(--colors-error-400)}._checkbox_1npj4_1{position:relative;display:inline-flex;align-items:center;gap:6px}._input_1npj4_8{position:absolute;margin:0;opacity:0;height:100%;width:100%;cursor:pointer;outline:none}._indicator_1npj4_18{display:block;width:20px;height:20px;border:1.5px solid var(--colors-black-400);border-radius:50%}._input_1npj4_8:checked+._indicator_1npj4_18{content:url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2020%2020'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M15.7958%207.18239L8.41335%2014.5648C8.34906%2014.6293%208.27265%2014.6805%208.18853%2014.7155C8.1044%2014.7504%208.01421%2014.7684%207.92311%2014.7684C7.83202%2014.7684%207.74183%2014.7504%207.6577%2014.7155C7.57358%2014.6805%207.49717%2014.6293%207.43288%2014.5648L4.20306%2011.335C4.13868%2011.2706%204.08762%2011.1942%204.05277%2011.1101C4.01793%2011.026%204%2010.9358%204%2010.8448C4%2010.7537%204.01793%2010.6636%204.05277%2010.5794C4.08762%2010.4953%204.13868%2010.4189%204.20306%2010.3545C4.26744%2010.2901%204.34387%2010.2391%204.42799%2010.2042C4.5121%2010.1694%204.60226%2010.1515%204.6933%2010.1515C4.78435%2010.1515%204.8745%2010.1694%204.95862%2010.2042C5.04273%2010.2391%205.11916%2010.2901%205.18354%2010.3545L7.92369%2013.0947L14.8165%206.20306C14.9465%206.07304%2015.1228%206%2015.3067%206C15.4906%206%2015.6669%206.07304%2015.7969%206.20306C15.927%206.33308%2016%206.50943%2016%206.6933C16%206.87718%2015.927%207.05352%2015.7969%207.18354L15.7958%207.18239Z'%20/%3e%3c/svg%3e");background:var(--colors-accent-500);border-color:var(--colors-accent-500)}._input_1npj4_8:focus-visible+._indicator_1npj4_18{outline:solid 2px var(--colors-accent-500);outline-offset:2px}._label_1npj4_37{font-family:Inter;font-weight:400;font-size:14px;line-height:18px;letter-spacing:0;color:var(--colors-black-100)}._checkbox_1npj4_1._disabled_1npj4_46{opacity:.5}._input_1npj4_8:disabled{cursor:not-allowed}._input_1npj4_8[aria-invalid=true]+._indicator_1npj4_18{border-color:var(--colors-error-500)}._input_1npj4_8[aria-invalid=true]:checked+._indicator_1npj4_18{background:var(--colors-error-500)}._field_1ijme_1{display:flex;flex-direction:column;width:100%}._label_1ijme_7{width:fit-content;margin-bottom:6px;font-family:Inter;font-weight:400;font-size:14px;line-height:18px;letter-spacing:0;color:var(--colors-black-300)}._message_1ijme_19{margin:6px 0 0;font-family:Inter;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0%;color:var(--colors-black-400)}._message_1ijme_19._error_1ijme_31{color:var(--colors-error-400)}

package/dist/main.d.ts

@@ -1,2 +1,4 @@
 export { Button } from './button/button';
-export { Label } from './label/label';
+export { TextInput } from './text_input/text_input';
+export { Checkbox } from './checkbox/checkbox';
+export { Field } from './field/field';

package/dist/main.js

@@ -1,8 +1,8 @@
-import { createRenderEffect as g, untrack as O, sharedConfig as y, mergeProps as x } from "solid-js";
-const k = ["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"], B = /* @__PURE__ */ new Set(["className", "value", "readOnly", "noValidate", "formNoValidate", "isMap", "noModule", "playsInline", ...k]), M = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), j = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+import { createMemo as N, createRenderEffect as h, untrack as K, sharedConfig as g, mergeProps as $, createContext as R, useContext as X, createUniqueId as B, createSignal as p, createComponent as O, splitProps as E, Show as Y } from "solid-js";
+const J = ["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"], Q = /* @__PURE__ */ new Set(["className", "value", "readOnly", "noValidate", "formNoValidate", "isMap", "noModule", "playsInline", ...J]), W = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), Z = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   className: "class",
   htmlFor: "for"
-}), I = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+}), z = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   class: "className",
   novalidate: {
     $: "noValidate",
@@ -31,317 +31,470 @@ const k = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "cont
     TEXTAREA: 1
   }
 });
-function V(i, e) {
-  const t = I[i];
+function v(s, e) {
+  const t = z[s];
   return typeof t == "object" ? t[e] ? t.$ : void 0 : t;
 }
-const D = /* @__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"]);
-function H(i, e, t) {
-  let l = t.length, o = e.length, s = l, f = 0, n = 0, c = e[o - 1].nextSibling, r = null;
-  for (; f < o || n < s; ) {
-    if (e[f] === t[n]) {
-      f++, n++;
+const ee = /* @__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"]), te = (s) => N(() => s());
+function se(s, e, t) {
+  let n = t.length, i = e.length, l = n, c = 0, o = 0, r = e[i - 1].nextSibling, f = null;
+  for (; c < i || o < l; ) {
+    if (e[c] === t[o]) {
+      c++, o++;
       continue;
     }
-    for (; e[o - 1] === t[s - 1]; )
-      o--, s--;
-    if (o === f) {
-      const a = s < l ? n ? t[n - 1].nextSibling : t[s - n] : c;
-      for (; n < s; ) i.insertBefore(t[n++], a);
-    } else if (s === n)
-      for (; f < o; )
-        (!r || !r.has(e[f])) && e[f].remove(), f++;
-    else if (e[f] === t[s - 1] && t[n] === e[o - 1]) {
-      const a = e[--o].nextSibling;
-      i.insertBefore(t[n++], e[f++].nextSibling), i.insertBefore(t[--s], a), e[o] = t[s];
+    for (; e[i - 1] === t[l - 1]; )
+      i--, l--;
+    if (i === c) {
+      const a = l < n ? o ? t[o - 1].nextSibling : t[l - o] : r;
+      for (; o < l; ) s.insertBefore(t[o++], a);
+    } else if (l === o)
+      for (; c < i; )
+        (!f || !f.has(e[c])) && e[c].remove(), c++;
+    else if (e[c] === t[l - 1] && t[o] === e[i - 1]) {
+      const a = e[--i].nextSibling;
+      s.insertBefore(t[o++], e[c++].nextSibling), s.insertBefore(t[--l], a), e[i] = t[l];
     } else {
-      if (!r) {
-        r = /* @__PURE__ */ new Map();
-        let u = n;
-        for (; u < s; ) r.set(t[u], u++);
+      if (!f) {
+        f = /* @__PURE__ */ new Map();
+        let u = o;
+        for (; u < l; ) f.set(t[u], u++);
       }
-      const a = r.get(e[f]);
+      const a = f.get(e[c]);
       if (a != null)
-        if (n < a && a < s) {
-          let u = f, d = 1, h;
-          for (; ++u < o && u < s && !((h = r.get(e[u])) == null || h !== a + d); )
+        if (o < a && a < l) {
+          let u = c, d = 1, y;
+          for (; ++u < i && u < l && !((y = f.get(e[u])) == null || y !== a + d); )
             d++;
-          if (d > a - n) {
-            const $ = e[f];
-            for (; n < a; ) i.insertBefore(t[n++], $);
-          } else i.replaceChild(t[n++], e[f++]);
-        } else f++;
-      else e[f++].remove();
+          if (d > a - o) {
+            const P = e[c];
+            for (; o < a; ) s.insertBefore(t[o++], P);
+          } else s.replaceChild(t[o++], e[c++]);
+        } else c++;
+      else e[c++].remove();
     }
   }
 }
-const E = "_$DX_DELEGATE";
-function _(i, e, t, l) {
-  let o;
-  const s = () => {
-    const n = document.createElement("template");
-    return n.innerHTML = i, n.content.firstChild;
-  }, f = () => (o || (o = s())).cloneNode(!0);
-  return f.cloneNode = f, f;
+const D = "_$DX_DELEGATE";
+function b(s, e, t, n) {
+  let i;
+  const l = () => {
+    const o = document.createElement("template");
+    return o.innerHTML = s, o.content.firstChild;
+  }, c = () => (i || (i = l())).cloneNode(!0);
+  return c.cloneNode = c, c;
 }
-function U(i, e = window.document) {
-  const t = e[E] || (e[E] = /* @__PURE__ */ new Set());
-  for (let l = 0, o = i.length; l < o; l++) {
-    const s = i[l];
-    t.has(s) || (t.add(s), e.addEventListener(s, Q));
+function ne(s, e = window.document) {
+  const t = e[D] || (e[D] = /* @__PURE__ */ new Set());
+  for (let n = 0, i = s.length; n < i; n++) {
+    const l = s[n];
+    t.has(l) || (t.add(l), e.addEventListener(l, de));
   }
 }
-function w(i, e, t) {
-  m(i) || (t == null ? i.removeAttribute(e) : i.setAttribute(e, t));
+function M(s, e, t) {
+  w(s) || (t == null ? s.removeAttribute(e) : s.setAttribute(e, t));
 }
-function F(i, e, t) {
-  m(i) || (t ? i.setAttribute(e, "") : i.removeAttribute(e));
+function ie(s, e, t) {
+  w(s) || (t ? s.setAttribute(e, "") : s.removeAttribute(e));
 }
-function G(i, e) {
-  m(i) || (e == null ? i.removeAttribute("class") : i.className = e);
+function L(s, e) {
+  w(s) || (e == null ? s.removeAttribute("class") : s.className = e);
 }
-function K(i, e, t, l) {
-  if (l)
-    Array.isArray(t) ? (i[`$$${e}`] = t[0], i[`$$${e}Data`] = t[1]) : i[`$$${e}`] = t;
+function oe(s, e, t, n) {
+  if (n)
+    Array.isArray(t) ? (s[`$$${e}`] = t[0], s[`$$${e}Data`] = t[1]) : s[`$$${e}`] = t;
   else if (Array.isArray(t)) {
-    const o = t[0];
-    i.addEventListener(e, t[0] = (s) => o.call(i, t[1], s));
-  } else i.addEventListener(e, t, typeof t != "function" && t);
+    const i = t[0];
+    s.addEventListener(e, t[0] = (l) => i.call(s, t[1], l));
+  } else s.addEventListener(e, t, typeof t != "function" && t);
 }
-function R(i, e, t = {}) {
-  const l = Object.keys(e || {}), o = Object.keys(t);
-  let s, f;
-  for (s = 0, f = o.length; s < f; s++) {
-    const n = o[s];
-    !n || n === "undefined" || e[n] || (T(i, n, !1), delete t[n]);
+function le(s, e, t = {}) {
+  const n = 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] || (F(s, o, !1), delete t[o]);
   }
-  for (s = 0, f = l.length; s < f; s++) {
-    const n = l[s], c = !!e[n];
-    !n || n === "undefined" || t[n] === c || !c || (T(i, n, !0), t[n] = c);
+  for (l = 0, c = n.length; l < c; l++) {
+    const o = n[l], r = !!e[o];
+    !o || o === "undefined" || t[o] === r || !r || (F(s, o, !0), t[o] = r);
   }
   return t;
 }
-function q(i, e, t) {
-  if (!e) return t ? w(i, "style") : e;
-  const l = i.style;
-  if (typeof e == "string") return l.cssText = e;
-  typeof t == "string" && (l.cssText = t = void 0), t || (t = {}), e || (e = {});
-  let o, s;
-  for (s in t)
-    e[s] == null && l.removeProperty(s), delete t[s];
-  for (s in e)
-    o = e[s], o !== t[s] && (l.setProperty(s, o), t[s] = o);
+function re(s, e, t) {
+  if (!e) return t ? M(s, "style") : e;
+  const n = s.style;
+  if (typeof e == "string") return n.cssText = e;
+  typeof t == "string" && (n.cssText = t = void 0), t || (t = {}), e || (e = {});
+  let i, l;
+  for (l in t)
+    e[l] == null && n.removeProperty(l), delete t[l];
+  for (l in e)
+    i = e[l], i !== t[l] && (n.setProperty(l, i), t[l] = i);
   return t;
 }
-function P(i, e = {}, t, l) {
-  const o = {};
-  return g(() => typeof e.ref == "function" && X(e.ref, i)), g(() => Y(i, e, t, !0, o, !0)), o;
+function x(s, e = {}, t, n) {
+  const i = {};
+  return n || h(() => i.children = C(s, e.children, i.children)), h(() => typeof e.ref == "function" && ce(e.ref, s)), h(() => fe(s, e, t, !0, i, !0)), i;
 }
-function X(i, e, t) {
-  return O(() => i(e, t));
+function ce(s, e, t) {
+  return K(() => s(e, t));
 }
-function S(i, e, t, l) {
-  if (typeof e != "function") return A(i, e, l, t);
-  g((o) => A(i, e(), o, t), l);
+function _(s, e, t, n) {
+  if (t !== void 0 && !n && (n = []), typeof e != "function") return C(s, e, n, t);
+  h((i) => C(s, e(), i, t), n);
 }
-function Y(i, e, t, l, o = {}, s = !1) {
+function fe(s, e, t, n, i = {}, l = !1) {
   e || (e = {});
-  for (const f in o)
-    if (!(f in e)) {
-      if (f === "children") continue;
-      o[f] = N(i, f, null, o[f], t, s, e);
+  for (const c in i)
+    if (!(c in e)) {
+      if (c === "children") continue;
+      i[c] = V(s, c, null, i[c], t, l, e);
     }
-  for (const f in e) {
-    if (f === "children")
+  for (const c in e) {
+    if (c === "children")
       continue;
-    const n = e[f];
-    o[f] = N(i, f, n, o[f], t, s, e);
+    const o = e[c];
+    i[c] = V(s, c, o, i[c], t, l, e);
   }
 }
-function m(i) {
-  return !!y.context && !y.done && (!i || i.isConnected);
+function w(s) {
+  return !!g.context && !g.done && (!s || s.isConnected);
 }
-function J(i) {
-  return i.toLowerCase().replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+function ae(s) {
+  return s.toLowerCase().replace(/-([a-z])/g, (e, t) => t.toUpperCase());
 }
-function T(i, e, t) {
-  const l = e.trim().split(/\s+/);
-  for (let o = 0, s = l.length; o < s; o++) i.classList.toggle(l[o], t);
+function F(s, e, t) {
+  const n = e.trim().split(/\s+/);
+  for (let i = 0, l = n.length; i < l; i++) s.classList.toggle(n[i], t);
 }
-function N(i, e, t, l, o, s, f) {
-  let n, c, r, a, u;
-  if (e === "style") return q(i, t, l);
-  if (e === "classList") return R(i, t, l);
-  if (t === l) return l;
+function V(s, e, t, n, i, l, c) {
+  let o, r, f, a, u;
+  if (e === "style") return re(s, t, n);
+  if (e === "classList") return le(s, t, n);
+  if (t === n) return n;
   if (e === "ref")
-    s || t(i);
+    l || t(s);
   else if (e.slice(0, 3) === "on:") {
     const d = e.slice(3);
-    l && i.removeEventListener(d, l, typeof l != "function" && l), t && i.addEventListener(d, t, typeof t != "function" && t);
+    n && s.removeEventListener(d, n, typeof n != "function" && n), t && s.addEventListener(d, t, typeof t != "function" && t);
   } else if (e.slice(0, 10) === "oncapture:") {
     const d = e.slice(10);
-    l && i.removeEventListener(d, l, !0), t && i.addEventListener(d, t, !0);
+    n && s.removeEventListener(d, n, !0), t && s.addEventListener(d, t, !0);
   } else if (e.slice(0, 2) === "on") {
-    const d = e.slice(2).toLowerCase(), h = D.has(d);
-    if (!h && l) {
-      const $ = Array.isArray(l) ? l[0] : l;
-      i.removeEventListener(d, $);
+    const d = e.slice(2).toLowerCase(), y = ee.has(d);
+    if (!y && n) {
+      const P = Array.isArray(n) ? n[0] : n;
+      s.removeEventListener(d, P);
     }
-    (h || t) && (K(i, d, t, h), h && U([d]));
+    (y || t) && (oe(s, d, t, y), y && ne([d]));
   } else if (e.slice(0, 5) === "attr:")
-    w(i, e.slice(5), t);
+    M(s, e.slice(5), t);
   else if (e.slice(0, 5) === "bool:")
-    F(i, e.slice(5), t);
-  else if ((u = e.slice(0, 5) === "prop:") || (r = M.has(e)) || (a = V(e, i.tagName)) || (c = B.has(e)) || (n = i.nodeName.includes("-") || "is" in f)) {
+    ie(s, e.slice(5), t);
+  else if ((u = e.slice(0, 5) === "prop:") || (f = W.has(e)) || (a = v(e, s.tagName)) || (r = Q.has(e)) || (o = s.nodeName.includes("-") || "is" in c)) {
     if (u)
-      e = e.slice(5), c = !0;
-    else if (m(i)) return t;
-    e === "class" || e === "className" ? G(i, t) : n && !c && !r ? i[J(e)] = t : i[a || e] = t;
+      e = e.slice(5), r = !0;
+    else if (w(s)) return t;
+    e === "class" || e === "className" ? L(s, t) : o && !r && !f ? s[ae(e)] = t : s[a || e] = t;
   } else
-    w(i, j[e] || e, t);
+    M(s, Z[e] || e, t);
   return t;
 }
-function Q(i) {
-  if (y.registry && y.events && y.events.find(([c, r]) => r === i))
+function de(s) {
+  if (g.registry && g.events && g.events.find(([r, f]) => f === s))
     return;
-  let e = i.target;
-  const t = `$$${i.type}`, l = i.target, o = i.currentTarget, s = (c) => Object.defineProperty(i, "target", {
+  let e = s.target;
+  const t = `$$${s.type}`, n = s.target, i = s.currentTarget, l = (r) => Object.defineProperty(s, "target", {
     configurable: !0,
-    value: c
-  }), f = () => {
-    const c = e[t];
-    if (c && !e.disabled) {
-      const r = e[`${t}Data`];
-      if (r !== void 0 ? c.call(e, r, i) : c.call(e, i), i.cancelBubble) return;
+    value: r
+  }), c = () => {
+    const r = e[t];
+    if (r && !e.disabled) {
+      const f = e[`${t}Data`];
+      if (f !== void 0 ? r.call(e, f, s) : r.call(e, s), s.cancelBubble) return;
     }
-    return e.host && typeof e.host != "string" && !e.host._$host && e.contains(i.target) && s(e.host), !0;
-  }, n = () => {
-    for (; f() && (e = e._$host || e.parentNode || e.host); ) ;
+    return e.host && typeof e.host != "string" && !e.host._$host && e.contains(s.target) && l(e.host), !0;
+  }, o = () => {
+    for (; c() && (e = e._$host || e.parentNode || e.host); ) ;
   };
-  if (Object.defineProperty(i, "currentTarget", {
+  if (Object.defineProperty(s, "currentTarget", {
     configurable: !0,
     get() {
       return e || document;
     }
-  }), y.registry && !y.done && (y.done = _$HY.done = !0), i.composedPath) {
-    const c = i.composedPath();
-    s(c[0]);
-    for (let r = 0; r < c.length - 2 && (e = c[r], !!f()); r++) {
+  }), g.registry && !g.done && (g.done = _$HY.done = !0), s.composedPath) {
+    const r = s.composedPath();
+    l(r[0]);
+    for (let f = 0; f < r.length - 2 && (e = r[f], !!c()); f++) {
       if (e._$host) {
-        e = e._$host, n();
+        e = e._$host, o();
         break;
       }
-      if (e.parentNode === o)
+      if (e.parentNode === i)
         break;
     }
-  } else n();
-  s(l);
+  } else o();
+  l(n);
 }
-function A(i, e, t, l, o) {
-  const s = m(i);
-  if (s) {
-    !t && (t = [...i.childNodes]);
-    let n = [];
-    for (let c = 0; c < t.length; c++) {
-      const r = t[c];
-      r.nodeType === 8 && r.data.slice(0, 2) === "!$" ? r.remove() : n.push(r);
+function C(s, e, t, n, i) {
+  const l = w(s);
+  if (l) {
+    !t && (t = [...s.childNodes]);
+    let r = [];
+    for (let f = 0; f < t.length; f++) {
+      const a = t[f];
+      a.nodeType === 8 && a.data.slice(0, 2) === "!$" ? a.remove() : r.push(a);
     }
-    t = n;
+    t = r;
   }
   for (; typeof t == "function"; ) t = t();
   if (e === t) return t;
-  const f = typeof e;
-  if (i = i, f === "string" || f === "number") {
-    if (s || f === "number" && (e = e.toString(), e === t))
+  const c = typeof e, o = n !== void 0;
+  if (s = o && t[0] && t[0].parentNode || s, c === "string" || c === "number") {
+    if (l || c === "number" && (e = e.toString(), e === t))
       return t;
-    t !== "" && typeof t == "string" ? t = i.firstChild.data = e : t = i.textContent = e;
-  } else if (e == null || f === "boolean") {
-    if (s) return t;
-    t = b(i, t, l);
+    if (o) {
+      let r = t[0];
+      r && r.nodeType === 3 ? r.data !== e && (r.data = e) : r = document.createTextNode(e), t = m(s, t, n, r);
+    } else
+      t !== "" && typeof t == "string" ? t = s.firstChild.data = e : t = s.textContent = e;
+  } else if (e == null || c === "boolean") {
+    if (l) return t;
+    t = m(s, t, n);
   } else {
-    if (f === "function")
-      return g(() => {
-        let n = e();
-        for (; typeof n == "function"; ) n = n();
-        t = A(i, n, t, l);
+    if (c === "function")
+      return h(() => {
+        let r = e();
+        for (; typeof r == "function"; ) r = r();
+        t = C(s, r, t, n);
       }), () => t;
     if (Array.isArray(e)) {
-      const n = [], c = t && Array.isArray(t);
-      if (C(n, e, t, o))
-        return g(() => t = A(i, n, t, l, !0)), () => t;
-      if (s)
-        return n.length ? t = [...i.childNodes] : t;
-      n.length === 0 ? t = b(i, t, l) : c ? t.length === 0 ? L(i, n, l) : H(i, t, n) : (t && b(i), L(i, n)), t = n;
+      const r = [], f = t && Array.isArray(t);
+      if (I(r, e, t, i))
+        return h(() => t = C(s, r, t, n, !0)), () => t;
+      if (l) {
+        if (!r.length) return t;
+        if (n === void 0) return t = [...s.childNodes];
+        let a = r[0];
+        if (a.parentNode !== s) return t;
+        const u = [a];
+        for (; (a = a.nextSibling) !== n; ) u.push(a);
+        return t = u;
+      }
+      if (r.length === 0) {
+        if (t = m(s, t, n), o) return t;
+      } else f ? t.length === 0 ? U(s, r, n) : se(s, t, r) : (t && m(s), U(s, r));
+      t = r;
     } else if (e.nodeType) {
-      if (s && e.parentNode) return t = e;
-      Array.isArray(t) ? b(i, t, null, e) : t == null || t === "" || !i.firstChild ? i.appendChild(e) : i.replaceChild(e, i.firstChild), t = e;
+      if (l && e.parentNode) return t = o ? [e] : e;
+      if (Array.isArray(t)) {
+        if (o) return t = m(s, t, n, e);
+        m(s, t, null, e);
+      } else t == null || t === "" || !s.firstChild ? s.appendChild(e) : s.replaceChild(e, s.firstChild);
+      t = e;
     }
   }
   return t;
 }
-function C(i, e, t, l) {
-  let o = !1;
-  for (let s = 0, f = e.length; s < f; s++) {
-    let n = e[s], c = t && t[i.length], r;
-    if (!(n == null || n === !0 || n === !1)) if ((r = typeof n) == "object" && n.nodeType)
-      i.push(n);
-    else if (Array.isArray(n))
-      o = C(i, n, c) || o;
-    else if (r === "function")
-      if (l) {
-        for (; typeof n == "function"; ) n = n();
-        o = C(i, Array.isArray(n) ? n : [n], Array.isArray(c) ? c : [c]) || o;
+function I(s, e, t, n) {
+  let i = !1;
+  for (let l = 0, c = e.length; l < c; l++) {
+    let o = e[l], r = t && t[s.length], f;
+    if (!(o == null || o === !0 || o === !1)) if ((f = typeof o) == "object" && o.nodeType)
+      s.push(o);
+    else if (Array.isArray(o))
+      i = I(s, o, r) || i;
+    else if (f === "function")
+      if (n) {
+        for (; typeof o == "function"; ) o = o();
+        i = I(s, Array.isArray(o) ? o : [o], Array.isArray(r) ? r : [r]) || i;
       } else
-        i.push(n), o = !0;
+        s.push(o), i = !0;
     else {
-      const a = String(n);
-      c && c.nodeType === 3 && c.data === a ? i.push(c) : i.push(document.createTextNode(a));
+      const a = String(o);
+      r && r.nodeType === 3 && r.data === a ? s.push(r) : s.push(document.createTextNode(a));
     }
   }
-  return o;
+  return i;
 }
-function L(i, e, t = null) {
-  for (let l = 0, o = e.length; l < o; l++) i.insertBefore(e[l], t);
+function U(s, e, t = null) {
+  for (let n = 0, i = e.length; n < i; n++) s.insertBefore(e[n], t);
 }
-function b(i, e, t, l) {
-  if (t === void 0) return i.textContent = "";
-  const o = l || document.createTextNode("");
+function m(s, e, t, n) {
+  if (t === void 0) return s.textContent = "";
+  const i = n || document.createTextNode("");
   if (e.length) {
-    let s = !1;
-    for (let f = e.length - 1; f >= 0; f--) {
-      const n = e[f];
-      if (o !== n) {
-        const c = n.parentNode === i;
-        !s && !f ? c ? i.replaceChild(o, n) : i.insertBefore(o, t) : c && n.remove();
-      } else s = !0;
+    let l = !1;
+    for (let c = e.length - 1; c >= 0; c--) {
+      const o = e[c];
+      if (i !== o) {
+        const r = o.parentNode === s;
+        !l && !c ? r ? s.replaceChild(i, o) : s.insertBefore(i, t) : r && o.remove();
+      } else l = !0;
     }
-  } else i.insertBefore(o, t);
-  return [o];
+  } else s.insertBefore(i, t);
+  return [i];
 }
-const W = "_button_knpbv_1", Z = {
-  button: W
+const ue = "_button_1xfap_1", ge = {
+  button: ue
 };
-var z = /* @__PURE__ */ _("<button type=button>");
-const ie = (i) => (() => {
-  var e = z();
-  return P(e, x(i, {
+var he = /* @__PURE__ */ b("<button type=button>");
+const Ue = (s) => (() => {
+  var e = he();
+  return x(e, $(s, {
     get class() {
-      return Z.button;
+      return ge.button;
     }
-  }), !1), S(e, () => i.children), e;
-})(), p = "_label_16ku5_1", v = {
-  label: p
+  }), !1, !0), _(e, () => s.children), e;
+})(), T = (...s) => s.filter(Boolean).join(" "), ye = (s) => s.level === "error", H = (s) => {
+  if (s.length)
+    return s.map((e) => e.id).join(" ");
+}, be = () => {
+}, S = (s) => () => s, me = {
+  fieldId: "",
+  error: S(!1),
+  ariaDescribedBy: S(void 0),
+  ariaErrorMessage: S(void 0),
+  setMessage: be
+}, q = R(me, {}), k = () => X(q), _e = (s) => {
+  const e = B(), [t, n] = p([]), i = N(() => s.error), l = N(() => H(t())), c = N(() => H(t().filter(ye))), o = (r) => {
+    n((f) => [...f, r]);
+  };
+  return O(q.Provider, {
+    value: {
+      fieldId: e,
+      error: i,
+      setMessage: o,
+      ariaDescribedBy: l,
+      ariaErrorMessage: c
+    },
+    get children() {
+      return s.children;
+    }
+  });
+}, $e = "_input_1nlce_1", xe = {
+  input: $e
 };
-var ee = /* @__PURE__ */ _("<label>");
-const ne = (i) => (() => {
-  var e = ee();
-  return P(e, x({
-    get class() {
-      return v.label;
+var Ae = /* @__PURE__ */ b("<input>");
+const He = (s) => {
+  const [e, t] = E(s, ["error", "class"]), n = k();
+  return (() => {
+    var i = Ae();
+    return x(i, $(t, {
+      get class() {
+        return T(xe.input, e.class);
+      },
+      get id() {
+        return n.fieldId;
+      },
+      type: "text",
+      get "aria-describedby"() {
+        return n.ariaDescribedBy();
+      },
+      get "aria-invalid"() {
+        return n.error() || !!e.error;
+      },
+      get "aria-errormessage"() {
+        return n.ariaErrorMessage();
+      }
+    }), !1, !1), i;
+  })();
+}, Ce = "_checkbox_1npj4_1", Ee = "_input_1npj4_8", we = "_indicator_1npj4_18", Te = "_label_1npj4_37", Ne = "_disabled_1npj4_46", A = {
+  checkbox: Ce,
+  input: Ee,
+  indicator: we,
+  label: Te,
+  disabled: Ne
+};
+var Le = /* @__PURE__ */ b("<span><input><span>"), Me = /* @__PURE__ */ b("<label>");
+const qe = (s) => {
+  const [e, t] = E(s, ["label", "error", "class"]), n = B();
+  return (() => {
+    var i = Le(), l = i.firstChild, c = l.nextSibling;
+    return x(l, $(t, {
+      id: n,
+      type: "checkbox",
+      get class() {
+        return A.input;
+      },
+      get "aria-invalid"() {
+        return !!e.error;
+      }
+    }), !1, !1), _(i, (() => {
+      var o = te(() => !!e.label);
+      return () => o() && (() => {
+        var r = Me();
+        return M(r, "for", n), _(r, () => e.label), h(() => L(r, A.label)), r;
+      })();
+    })(), null), h((o) => {
+      var r = T(A.checkbox, e.class, t.disabled && A.disabled), f = A.indicator;
+      return r !== o.e && L(i, o.e = r), f !== o.t && L(c, o.t = f), o;
+    }, {
+      e: void 0,
+      t: void 0
+    }), i;
+  })();
+}, je = "_field_1ijme_1", Pe = "_label_1ijme_7", Se = "_message_1ijme_19", Ie = "_error_1ijme_31", j = {
+  field: je,
+  label: Pe,
+  message: Se,
+  error: Ie
+};
+var Be = /* @__PURE__ */ b("<div>"), Oe = /* @__PURE__ */ b("<label>"), ke = /* @__PURE__ */ b("<p>");
+const G = (s) => {
+  const [e, t] = E(s, ["class", "error"]);
+  return O(_e, {
+    get error() {
+      return !!e.error;
+    },
+    get children() {
+      var n = Be();
+      return x(n, $(t, {
+        get class() {
+          return T(j.field, e.class);
+        }
+      }), !1, !0), _(n, () => s.children), n;
     }
-  }, i), !1), S(e, () => i.children), e;
-})();
+  });
+}, De = (s) => {
+  const [e, t] = E(s, ["class"]), n = k();
+  return (() => {
+    var i = Oe();
+    return x(i, $(t, {
+      get for() {
+        return n.fieldId;
+      },
+      get class() {
+        return T(j.label, e.class);
+      }
+    }), !1, !0), _(i, () => t.children), i;
+  })();
+}, Fe = (s) => {
+  const [e, t] = E(s, ["class", "level"]), n = k(), i = B();
+  return n.setMessage({
+    level: e.level || "info",
+    id: i
+  }), O(Y, {
+    get when() {
+      return t.children;
+    },
+    get children() {
+      var l = ke();
+      return x(l, $(t, {
+        id: i,
+        get class() {
+          return T(j.message, e.class, e.level === "error" && j.error);
+        }
+      }), !1, !0), _(l, () => t.children), l;
+    }
+  });
+};
+G.Label = De;
+G.Message = Fe;
 export {
-  ie as Button,
-  ne as Label
+  Ue as Button,
+  qe as Checkbox,
+  G as Field,
+  He as TextInput
 };

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(y,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-js"],a):(y=typeof globalThis<"u"?globalThis:y||self,a(y["solid-uix"]={},y.solid))})(this,function(y,a){"use strict";const _=["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"],j=new Set(["className","value","readOnly","noValidate","formNoValidate","isMap","noModule","playsInline",..._]),O=new Set(["innerHTML","textContent","innerText","children"]),k=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),B=Object.assign(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 M(n,e){const t=B[n];return typeof t=="object"?t[e]?t.$:void 0:t}const I=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]);function V(n,e,t){let l=t.length,o=e.length,s=l,f=0,i=0,c=e[o-1].nextSibling,r=null;for(;f<o||i<s;){if(e[f]===t[i]){f++,i++;continue}for(;e[o-1]===t[s-1];)o--,s--;if(o===f){const u=s<l?i?t[i-1].nextSibling:t[s-i]:c;for(;i<s;)n.insertBefore(t[i++],u)}else if(s===i)for(;f<o;)(!r||!r.has(e[f]))&&e[f].remove(),f++;else if(e[f]===t[s-1]&&t[i]===e[o-1]){const u=e[--o].nextSibling;n.insertBefore(t[i++],e[f++].nextSibling),n.insertBefore(t[--s],u),e[o]=t[s]}else{if(!r){r=new Map;let h=i;for(;h<s;)r.set(t[h],h++)}const u=r.get(e[f]);if(u!=null)if(i<u&&u<s){let h=f,d=1,g;for(;++h<o&&h<s&&!((g=r.get(e[h]))==null||g!==u+d);)d++;if(d>u-i){const E=e[f];for(;i<u;)n.insertBefore(t[i++],E)}else n.replaceChild(t[i++],e[f++])}else f++;else e[f++].remove()}}}const T="_$DX_DELEGATE";function w(n,e,t,l){let o;const s=()=>{const i=document.createElement("template");return i.innerHTML=n,i.content.firstChild},f=()=>(o||(o=s())).cloneNode(!0);return f.cloneNode=f,f}function R(n,e=window.document){const t=e[T]||(e[T]=new Set);for(let l=0,o=n.length;l<o;l++){const s=n[l];t.has(s)||(t.add(s),e.addEventListener(s,Y))}}function $(n,e,t){m(n)||(t==null?n.removeAttribute(e):n.setAttribute(e,t))}function D(n,e,t){m(n)||(t?n.setAttribute(e,""):n.removeAttribute(e))}function H(n,e){m(n)||(e==null?n.removeAttribute("class"):n.className=e)}function U(n,e,t,l){if(l)Array.isArray(t)?(n[`$$${e}`]=t[0],n[`$$${e}Data`]=t[1]):n[`$$${e}`]=t;else if(Array.isArray(t)){const o=t[0];n.addEventListener(e,t[0]=s=>o.call(n,t[1],s))}else n.addEventListener(e,t,typeof t!="function"&&t)}function q(n,e,t={}){const l=Object.keys(e||{}),o=Object.keys(t);let s,f;for(s=0,f=o.length;s<f;s++){const i=o[s];!i||i==="undefined"||e[i]||(x(n,i,!1),delete t[i])}for(s=0,f=l.length;s<f;s++){const i=l[s],c=!!e[i];!i||i==="undefined"||t[i]===c||!c||(x(n,i,!0),t[i]=c)}return t}function F(n,e,t){if(!e)return t?$(n,"style"):e;const l=n.style;if(typeof e=="string")return l.cssText=e;typeof t=="string"&&(l.cssText=t=void 0),t||(t={}),e||(e={});let o,s;for(s in t)e[s]==null&&l.removeProperty(s),delete t[s];for(s in e)o=e[s],o!==t[s]&&(l.setProperty(s,o),t[s]=o);return t}function N(n,e={},t,l){const o={};return a.createRenderEffect(()=>typeof e.ref=="function"&&G(e.ref,n)),a.createRenderEffect(()=>K(n,e,t,!0,o,!0)),o}function G(n,e,t){return a.untrack(()=>n(e,t))}function L(n,e,t,l){if(typeof e!="function")return b(n,e,l,t);a.createRenderEffect(o=>b(n,e(),o,t),l)}function K(n,e,t,l,o={},s=!1){e||(e={});for(const f in o)if(!(f in e)){if(f==="children")continue;o[f]=P(n,f,null,o[f],t,s,e)}for(const f in e){if(f==="children")continue;const i=e[f];o[f]=P(n,f,i,o[f],t,s,e)}}function m(n){return!!a.sharedConfig.context&&!a.sharedConfig.done&&(!n||n.isConnected)}function X(n){return n.toLowerCase().replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function x(n,e,t){const l=e.trim().split(/\s+/);for(let o=0,s=l.length;o<s;o++)n.classList.toggle(l[o],t)}function P(n,e,t,l,o,s,f){let i,c,r,u,h;if(e==="style")return F(n,t,l);if(e==="classList")return q(n,t,l);if(t===l)return l;if(e==="ref")s||t(n);else if(e.slice(0,3)==="on:"){const d=e.slice(3);l&&n.removeEventListener(d,l,typeof l!="function"&&l),t&&n.addEventListener(d,t,typeof t!="function"&&t)}else if(e.slice(0,10)==="oncapture:"){const d=e.slice(10);l&&n.removeEventListener(d,l,!0),t&&n.addEventListener(d,t,!0)}else if(e.slice(0,2)==="on"){const d=e.slice(2).toLowerCase(),g=I.has(d);if(!g&&l){const E=Array.isArray(l)?l[0]:l;n.removeEventListener(d,E)}(g||t)&&(U(n,d,t,g),g&&R([d]))}else if(e.slice(0,5)==="attr:")$(n,e.slice(5),t);else if(e.slice(0,5)==="bool:")D(n,e.slice(5),t);else if((h=e.slice(0,5)==="prop:")||(r=O.has(e))||(u=M(e,n.tagName))||(c=j.has(e))||(i=n.nodeName.includes("-")||"is"in f)){if(h)e=e.slice(5),c=!0;else if(m(n))return t;e==="class"||e==="className"?H(n,t):i&&!c&&!r?n[X(e)]=t:n[u||e]=t}else $(n,k[e]||e,t);return t}function Y(n){if(a.sharedConfig.registry&&a.sharedConfig.events&&a.sharedConfig.events.find(([c,r])=>r===n))return;let e=n.target;const t=`$$${n.type}`,l=n.target,o=n.currentTarget,s=c=>Object.defineProperty(n,"target",{configurable:!0,value:c}),f=()=>{const c=e[t];if(c&&!e.disabled){const r=e[`${t}Data`];if(r!==void 0?c.call(e,r,n):c.call(e,n),n.cancelBubble)return}return e.host&&typeof e.host!="string"&&!e.host._$host&&e.contains(n.target)&&s(e.host),!0},i=()=>{for(;f()&&(e=e._$host||e.parentNode||e.host););};if(Object.defineProperty(n,"currentTarget",{configurable:!0,get(){return e||document}}),a.sharedConfig.registry&&!a.sharedConfig.done&&(a.sharedConfig.done=_$HY.done=!0),n.composedPath){const c=n.composedPath();s(c[0]);for(let r=0;r<c.length-2&&(e=c[r],!!f());r++){if(e._$host){e=e._$host,i();break}if(e.parentNode===o)break}}else i();s(l)}function b(n,e,t,l,o){const s=m(n);if(s){!t&&(t=[...n.childNodes]);let i=[];for(let c=0;c<t.length;c++){const r=t[c];r.nodeType===8&&r.data.slice(0,2)==="!$"?r.remove():i.push(r)}t=i}for(;typeof t=="function";)t=t();if(e===t)return t;const f=typeof e;if(n=n,f==="string"||f==="number"){if(s||f==="number"&&(e=e.toString(),e===t))return t;t!==""&&typeof t=="string"?t=n.firstChild.data=e:t=n.textContent=e}else if(e==null||f==="boolean"){if(s)return t;t=A(n,t,l)}else{if(f==="function")return a.createRenderEffect(()=>{let i=e();for(;typeof i=="function";)i=i();t=b(n,i,t,l)}),()=>t;if(Array.isArray(e)){const i=[],c=t&&Array.isArray(t);if(C(i,e,t,o))return a.createRenderEffect(()=>t=b(n,i,t,l,!0)),()=>t;if(s)return i.length?t=[...n.childNodes]:t;i.length===0?t=A(n,t,l):c?t.length===0?S(n,i,l):V(n,t,i):(t&&A(n),S(n,i)),t=i}else if(e.nodeType){if(s&&e.parentNode)return t=e;Array.isArray(t)?A(n,t,null,e):t==null||t===""||!n.firstChild?n.appendChild(e):n.replaceChild(e,n.firstChild),t=e}}return t}function C(n,e,t,l){let o=!1;for(let s=0,f=e.length;s<f;s++){let i=e[s],c=t&&t[n.length],r;if(!(i==null||i===!0||i===!1))if((r=typeof i)=="object"&&i.nodeType)n.push(i);else if(Array.isArray(i))o=C(n,i,c)||o;else if(r==="function")if(l){for(;typeof i=="function";)i=i();o=C(n,Array.isArray(i)?i:[i],Array.isArray(c)?c:[c])||o}else n.push(i),o=!0;else{const u=String(i);c&&c.nodeType===3&&c.data===u?n.push(c):n.push(document.createTextNode(u))}}return o}function S(n,e,t=null){for(let l=0,o=e.length;l<o;l++)n.insertBefore(e[l],t)}function A(n,e,t,l){if(t===void 0)return n.textContent="";const o=l||document.createTextNode("");if(e.length){let s=!1;for(let f=e.length-1;f>=0;f--){const i=e[f];if(o!==i){const c=i.parentNode===n;!s&&!f?c?n.replaceChild(o,i):n.insertBefore(o,t):c&&i.remove()}else s=!0}}else n.insertBefore(o,t);return[o]}const Q={button:"_button_knpbv_1"};var W=w("<button type=button>");const Z=n=>(()=>{var e=W();return N(e,a.mergeProps(n,{get class(){return Q.button}}),!1),L(e,()=>n.children),e})(),z={label:"_label_16ku5_1"};var J=w("<label>");const p=n=>(()=>{var e=J();return N(e,a.mergeProps({get class(){return z.label}},n),!1),L(e,()=>n.children),e})();y.Button=Z,y.Label=p,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+(function(h,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-js"],f):(h=typeof globalThis<"u"?globalThis:h||self,f(h["solid-uix"]={},h.solid))})(this,function(h,f){"use strict";const R=["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"],D=new Set(["className","value","readOnly","noValidate","formNoValidate","isMap","noModule","playsInline",...R]),V=new Set(["innerHTML","textContent","innerText","children"]),U=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),q=Object.assign(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 H(n,e){const t=q[n];return typeof t=="object"?t[e]?t.$:void 0:t}const G=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),K=n=>f.createMemo(()=>n());function X(n,e,t){let i=t.length,s=e.length,o=i,c=0,r=0,l=e[s-1].nextSibling,a=null;for(;c<s||r<o;){if(e[c]===t[r]){c++,r++;continue}for(;e[s-1]===t[o-1];)s--,o--;if(s===c){const d=o<i?r?t[r-1].nextSibling:t[o-r]:l;for(;r<o;)n.insertBefore(t[r++],d)}else if(o===r)for(;c<s;)(!a||!a.has(e[c]))&&e[c].remove(),c++;else if(e[c]===t[o-1]&&t[r]===e[s-1]){const d=e[--s].nextSibling;n.insertBefore(t[r++],e[c++].nextSibling),n.insertBefore(t[--o],d),e[s]=t[o]}else{if(!a){a=new Map;let g=r;for(;g<o;)a.set(t[g],g++)}const d=a.get(e[c]);if(d!=null)if(r<d&&d<o){let g=c,u=1,m;for(;++g<s&&g<o&&!((m=a.get(e[g]))==null||m!==d+u);)u++;if(u>d-r){const S=e[c];for(;r<d;)n.insertBefore(t[r++],S)}else n.replaceChild(t[r++],e[c++])}else c++;else e[c++].remove()}}}const p="_$DX_DELEGATE";function y(n,e,t,i){let s;const o=()=>{const r=document.createElement("template");return r.innerHTML=n,r.content.firstChild},c=()=>(s||(s=o())).cloneNode(!0);return c.cloneNode=c,c}function Y(n,e=window.document){const t=e[p]||(e[p]=new Set);for(let i=0,s=n.length;i<s;i++){const o=n[i];t.has(o)||(t.add(o),e.addEventListener(o,te))}}function T(n,e,t){x(n)||(t==null?n.removeAttribute(e):n.setAttribute(e,t))}function Q(n,e,t){x(n)||(t?n.setAttribute(e,""):n.removeAttribute(e))}function P(n,e){x(n)||(e==null?n.removeAttribute("class"):n.className=e)}function W(n,e,t,i){if(i)Array.isArray(t)?(n[`$$${e}`]=t[0],n[`$$${e}Data`]=t[1]):n[`$$${e}`]=t;else if(Array.isArray(t)){const s=t[0];n.addEventListener(e,t[0]=o=>s.call(n,t[1],o))}else n.addEventListener(e,t,typeof t!="function"&&t)}function Z(n,e,t={}){const i=Object.keys(e||{}),s=Object.keys(t);let o,c;for(o=0,c=s.length;o<c;o++){const r=s[o];!r||r==="undefined"||e[r]||(I(n,r,!1),delete t[r])}for(o=0,c=i.length;o<c;o++){const r=i[o],l=!!e[r];!r||r==="undefined"||t[r]===l||!l||(I(n,r,!0),t[r]=l)}return t}function z(n,e,t){if(!e)return t?T(n,"style"):e;const i=n.style;if(typeof e=="string")return i.cssText=e;typeof t=="string"&&(i.cssText=t=void 0),t||(t={}),e||(e={});let s,o;for(o in t)e[o]==null&&i.removeProperty(o),delete t[o];for(o in e)s=e[o],s!==t[o]&&(i.setProperty(o,s),t[o]=s);return t}function b(n,e={},t,i){const s={};return i||f.createRenderEffect(()=>s.children=C(n,e.children,s.children)),f.createRenderEffect(()=>typeof e.ref=="function"&&v(e.ref,n)),f.createRenderEffect(()=>J(n,e,t,!0,s,!0)),s}function v(n,e,t){return f.untrack(()=>n(e,t))}function _(n,e,t,i){if(t!==void 0&&!i&&(i=[]),typeof e!="function")return C(n,e,i,t);f.createRenderEffect(s=>C(n,e(),s,t),i)}function J(n,e,t,i,s={},o=!1){e||(e={});for(const c in s)if(!(c in e)){if(c==="children")continue;s[c]=B(n,c,null,s[c],t,o,e)}for(const c in e){if(c==="children")continue;const r=e[c];s[c]=B(n,c,r,s[c],t,o,e)}}function x(n){return!!f.sharedConfig.context&&!f.sharedConfig.done&&(!n||n.isConnected)}function ee(n){return n.toLowerCase().replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function I(n,e,t){const i=e.trim().split(/\s+/);for(let s=0,o=i.length;s<o;s++)n.classList.toggle(i[s],t)}function B(n,e,t,i,s,o,c){let r,l,a,d,g;if(e==="style")return z(n,t,i);if(e==="classList")return Z(n,t,i);if(t===i)return i;if(e==="ref")o||t(n);else if(e.slice(0,3)==="on:"){const u=e.slice(3);i&&n.removeEventListener(u,i,typeof i!="function"&&i),t&&n.addEventListener(u,t,typeof t!="function"&&t)}else if(e.slice(0,10)==="oncapture:"){const u=e.slice(10);i&&n.removeEventListener(u,i,!0),t&&n.addEventListener(u,t,!0)}else if(e.slice(0,2)==="on"){const u=e.slice(2).toLowerCase(),m=G.has(u);if(!m&&i){const S=Array.isArray(i)?i[0]:i;n.removeEventListener(u,S)}(m||t)&&(W(n,u,t,m),m&&Y([u]))}else if(e.slice(0,5)==="attr:")T(n,e.slice(5),t);else if(e.slice(0,5)==="bool:")Q(n,e.slice(5),t);else if((g=e.slice(0,5)==="prop:")||(a=V.has(e))||(d=H(e,n.tagName))||(l=D.has(e))||(r=n.nodeName.includes("-")||"is"in c)){if(g)e=e.slice(5),l=!0;else if(x(n))return t;e==="class"||e==="className"?P(n,t):r&&!l&&!a?n[ee(e)]=t:n[d||e]=t}else T(n,U[e]||e,t);return t}function te(n){if(f.sharedConfig.registry&&f.sharedConfig.events&&f.sharedConfig.events.find(([l,a])=>a===n))return;let e=n.target;const t=`$$${n.type}`,i=n.target,s=n.currentTarget,o=l=>Object.defineProperty(n,"target",{configurable:!0,value:l}),c=()=>{const l=e[t];if(l&&!e.disabled){const a=e[`${t}Data`];if(a!==void 0?l.call(e,a,n):l.call(e,n),n.cancelBubble)return}return e.host&&typeof e.host!="string"&&!e.host._$host&&e.contains(n.target)&&o(e.host),!0},r=()=>{for(;c()&&(e=e._$host||e.parentNode||e.host););};if(Object.defineProperty(n,"currentTarget",{configurable:!0,get(){return e||document}}),f.sharedConfig.registry&&!f.sharedConfig.done&&(f.sharedConfig.done=_$HY.done=!0),n.composedPath){const l=n.composedPath();o(l[0]);for(let a=0;a<l.length-2&&(e=l[a],!!c());a++){if(e._$host){e=e._$host,r();break}if(e.parentNode===s)break}}else r();o(i)}function C(n,e,t,i,s){const o=x(n);if(o){!t&&(t=[...n.childNodes]);let l=[];for(let a=0;a<t.length;a++){const d=t[a];d.nodeType===8&&d.data.slice(0,2)==="!$"?d.remove():l.push(d)}t=l}for(;typeof t=="function";)t=t();if(e===t)return t;const c=typeof e,r=i!==void 0;if(n=r&&t[0]&&t[0].parentNode||n,c==="string"||c==="number"){if(o||c==="number"&&(e=e.toString(),e===t))return t;if(r){let l=t[0];l&&l.nodeType===3?l.data!==e&&(l.data=e):l=document.createTextNode(e),t=$(n,t,i,l)}else t!==""&&typeof t=="string"?t=n.firstChild.data=e:t=n.textContent=e}else if(e==null||c==="boolean"){if(o)return t;t=$(n,t,i)}else{if(c==="function")return f.createRenderEffect(()=>{let l=e();for(;typeof l=="function";)l=l();t=C(n,l,t,i)}),()=>t;if(Array.isArray(e)){const l=[],a=t&&Array.isArray(t);if(N(l,e,t,s))return f.createRenderEffect(()=>t=C(n,l,t,i,!0)),()=>t;if(o){if(!l.length)return t;if(i===void 0)return t=[...n.childNodes];let d=l[0];if(d.parentNode!==n)return t;const g=[d];for(;(d=d.nextSibling)!==i;)g.push(d);return t=g}if(l.length===0){if(t=$(n,t,i),r)return t}else a?t.length===0?O(n,l,i):X(n,t,l):(t&&$(n),O(n,l));t=l}else if(e.nodeType){if(o&&e.parentNode)return t=r?[e]:e;if(Array.isArray(t)){if(r)return t=$(n,t,i,e);$(n,t,null,e)}else t==null||t===""||!n.firstChild?n.appendChild(e):n.replaceChild(e,n.firstChild);t=e}}return t}function N(n,e,t,i){let s=!1;for(let o=0,c=e.length;o<c;o++){let r=e[o],l=t&&t[n.length],a;if(!(r==null||r===!0||r===!1))if((a=typeof r)=="object"&&r.nodeType)n.push(r);else if(Array.isArray(r))s=N(n,r,l)||s;else if(a==="function")if(i){for(;typeof r=="function";)r=r();s=N(n,Array.isArray(r)?r:[r],Array.isArray(l)?l:[l])||s}else n.push(r),s=!0;else{const d=String(r);l&&l.nodeType===3&&l.data===d?n.push(l):n.push(document.createTextNode(d))}}return s}function O(n,e,t=null){for(let i=0,s=e.length;i<s;i++)n.insertBefore(e[i],t)}function $(n,e,t,i){if(t===void 0)return n.textContent="";const s=i||document.createTextNode("");if(e.length){let o=!1;for(let c=e.length-1;c>=0;c--){const r=e[c];if(s!==r){const l=r.parentNode===n;!o&&!c?l?n.replaceChild(s,r):n.insertBefore(s,t):l&&r.remove()}else o=!0}}else n.insertBefore(s,t);return[s]}const ne={button:"_button_1xfap_1"};var ie=y("<button type=button>");const se=n=>(()=>{var e=ie();return b(e,f.mergeProps(n,{get class(){return ne.button}}),!1,!0),_(e,()=>n.children),e})(),A=(...n)=>n.filter(Boolean).join(" "),re=n=>n.level==="error",k=n=>{if(n.length)return n.map(e=>e.id).join(" ")},oe=()=>{},M=n=>()=>n,le={fieldId:"",error:M(!1),ariaDescribedBy:M(void 0),ariaErrorMessage:M(void 0),setMessage:oe},F=f.createContext(le,{}),j=()=>f.useContext(F),ce=n=>{const e=f.createUniqueId(),[t,i]=f.createSignal([]),s=f.createMemo(()=>n.error),o=f.createMemo(()=>k(t())),c=f.createMemo(()=>k(t().filter(re))),r=l=>{i(a=>[...a,l])};return f.createComponent(F.Provider,{value:{fieldId:e,error:s,setMessage:r,ariaDescribedBy:o,ariaErrorMessage:c},get children(){return n.children}})},fe={input:"_input_1nlce_1"};var ae=y("<input>");const de=n=>{const[e,t]=f.splitProps(n,["error","class"]),i=j();return(()=>{var s=ae();return b(s,f.mergeProps(t,{get class(){return A(fe.input,e.class)},get id(){return i.fieldId},type:"text",get"aria-describedby"(){return i.ariaDescribedBy()},get"aria-invalid"(){return i.error()||!!e.error},get"aria-errormessage"(){return i.ariaErrorMessage()}}),!1,!1),s})()},E={checkbox:"_checkbox_1npj4_1",input:"_input_1npj4_8",indicator:"_indicator_1npj4_18",label:"_label_1npj4_37",disabled:"_disabled_1npj4_46"};var ue=y("<span><input><span>"),ge=y("<label>");const he=n=>{const[e,t]=f.splitProps(n,["label","error","class"]),i=f.createUniqueId();return(()=>{var s=ue(),o=s.firstChild,c=o.nextSibling;return b(o,f.mergeProps(t,{id:i,type:"checkbox",get class(){return E.input},get"aria-invalid"(){return!!e.error}}),!1,!1),_(s,(()=>{var r=K(()=>!!e.label);return()=>r()&&(()=>{var l=ge();return T(l,"for",i),_(l,()=>e.label),f.createRenderEffect(()=>P(l,E.label)),l})()})(),null),f.createRenderEffect(r=>{var l=A(E.checkbox,e.class,t.disabled&&E.disabled),a=E.indicator;return l!==r.e&&P(s,r.e=l),a!==r.t&&P(c,r.t=a),r},{e:void 0,t:void 0}),s})()},w={field:"_field_1ijme_1",label:"_label_1ijme_7",message:"_message_1ijme_19",error:"_error_1ijme_31"};var ye=y("<div>"),me=y("<label>"),be=y("<p>");const L=n=>{const[e,t]=f.splitProps(n,["class","error"]);return f.createComponent(ce,{get error(){return!!e.error},get children(){var i=ye();return b(i,f.mergeProps(t,{get class(){return A(w.field,e.class)}}),!1,!0),_(i,()=>n.children),i}})},_e=n=>{const[e,t]=f.splitProps(n,["class"]),i=j();return(()=>{var s=me();return b(s,f.mergeProps(t,{get for(){return i.fieldId},get class(){return A(w.label,e.class)}}),!1,!0),_(s,()=>t.children),s})()},$e=n=>{const[e,t]=f.splitProps(n,["class","level"]),i=j(),s=f.createUniqueId();return i.setMessage({level:e.level||"info",id:s}),f.createComponent(f.Show,{get when(){return t.children},get children(){var o=be();return b(o,f.mergeProps(t,{id:s,get class(){return A(w.message,e.class,e.level==="error"&&w.error)}}),!1,!0),_(o,()=>t.children),o}})};L.Label=_e,L.Message=$e,h.Button=se,h.Checkbox=he,h.Field=L,h.TextInput=de,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/dist/text_input/text_input.d.ts

@@ -0,0 +1,2 @@
+import { TextInputProps } from './text_input.types';
+export declare const TextInput: (props: TextInputProps) => import("solid-js").JSX.Element;

package/dist/text_input/text_input.types.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+export type TextInputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
+    error?: boolean;
+};

package/dist/utils/cls.d.ts

@@ -0,0 +1,3 @@
+type ClassName = string | undefined | boolean;
+export declare const cls: (...classes: ClassName[]) => string;
+export {};

package/dist/utils/message.d.ts

@@ -0,0 +1,7 @@
+export type MessageLevel = "info" | "warning" | "error";
+export type Message = {
+    level: MessageLevel;
+    id: string;
+};
+export declare const isError: (message: Message) => boolean;
+export declare const getMessageIds: (messages: Message[]) => string | undefined;

package/dist/utils/noop.d.ts

@@ -0,0 +1,3 @@
+import { Accessor } from 'solid-js';
+export declare const noop: () => void;
+export declare const noopAccessor: <T>(value: T) => Accessor<T>;

package/dist/utils/string.d.ts

@@ -0,0 +1 @@
+export declare const isString: (string: unknown) => string is string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-uix",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/main.umd.cjs",
   "module": "./dist/main.js",

package/dist/button/button.stories.d.ts

@@ -1,26 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (props: import('./button.types').ButtonProps) => import("solid-js").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {};
-    args: {
-        children: string;
-        disabled: boolean;
-        onClick: import('storybook/test').Mock<(...args: any[]) => any>;
-    };
-};
-export default _default;
-export declare const Primary: {
-    args: {
-        children: string;
-    };
-};
-export declare const Disabled: {
-    args: {
-        children: string;
-        disabled: boolean;
-    };
-};

package/dist/label/label.d.ts

@@ -1,2 +0,0 @@
-import { LabelProps } from './label.types';
-export declare const Label: (props: LabelProps) => import("solid-js").JSX.Element;

package/dist/label/label.stories.d.ts

@@ -1,19 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (props: import('./label.types').LabelProps) => import("solid-js").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {};
-    args: {
-        children: string;
-        onClick: import('storybook/test').Mock<(...args: any[]) => any>;
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {
-        children: string;
-    };
-};

package/dist/label/label.types.d.ts

@@ -1,2 +0,0 @@
-import { JSX } from 'solid-js';
-export type LabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement>;