solid-uix 0.1.1 → 0.2.0

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

@@ -0,0 +1,26 @@
+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

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

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

@@ -0,0 +1,19 @@
+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

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

package/dist/main.css

@@ -1 +1 @@
-._button_14ajs_1{height:48px;box-sizing:border-box;border:none;width:100%;background:#ec5990;border-radius:6px;padding:0 10px;transition:all .3s;margin-top:1rem;font-family:Inter;font-weight:500;font-size:16px;line-height:22px;letter-spacing:0%;text-align:center;color:#fff}._button_14ajs_1:focus{outline:1px solid white}
+: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)}

package/dist/main.d.ts

@@ -1 +1,2 @@
 export { Button } from './button/button';
+export { Label } from './label/label';

package/dist/main.js

@@ -1,8 +1,8 @@
-import { createRenderEffect as g, untrack as x, sharedConfig as y, mergeProps as P } from "solid-js";
-const S = ["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"], O = /* @__PURE__ */ new Set(["className", "value", "readOnly", "noValidate", "formNoValidate", "isMap", "noModule", "playsInline", ...S]), _ = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), j = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+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), {
   className: "class",
   htmlFor: "for"
-}), B = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+}), I = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   class: "className",
   novalidate: {
     $: "noValidate",
@@ -31,12 +31,12 @@ const S = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "cont
     TEXTAREA: 1
   }
 });
-function M(i, e) {
-  const t = B[i];
+function V(i, e) {
+  const t = I[i];
   return typeof t == "object" ? t[e] ? t.$ : void 0 : t;
 }
-const k = /* @__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 I(i, e, 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]) {
@@ -46,29 +46,29 @@ function I(i, e, t) {
     for (; e[o - 1] === t[s - 1]; )
       o--, s--;
     if (o === f) {
-      const d = s < l ? n ? t[n - 1].nextSibling : t[s - n] : c;
-      for (; n < s; ) i.insertBefore(t[n++], d);
+      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 d = e[--o].nextSibling;
-      i.insertBefore(t[n++], e[f++].nextSibling), i.insertBefore(t[--s], d), e[o] = t[s];
+      const a = e[--o].nextSibling;
+      i.insertBefore(t[n++], e[f++].nextSibling), i.insertBefore(t[--s], a), e[o] = t[s];
     } else {
       if (!r) {
         r = /* @__PURE__ */ new Map();
-        let a = n;
-        for (; a < s; ) r.set(t[a], a++);
+        let u = n;
+        for (; u < s; ) r.set(t[u], u++);
       }
-      const d = r.get(e[f]);
-      if (d != null)
-        if (n < d && d < s) {
-          let a = f, u = 1, h;
-          for (; ++a < o && a < s && !((h = r.get(e[a])) == null || h !== d + u); )
-            u++;
-          if (u > d - n) {
+      const a = r.get(e[f]);
+      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); )
+            d++;
+          if (d > a - n) {
             const $ = e[f];
-            for (; n < d; ) i.insertBefore(t[n++], $);
+            for (; n < a; ) i.insertBefore(t[n++], $);
           } else i.replaceChild(t[n++], e[f++]);
         } else f++;
       else e[f++].remove();
@@ -76,7 +76,7 @@ function I(i, e, t) {
   }
 }
 const E = "_$DX_DELEGATE";
-function V(i, e, t, l) {
+function _(i, e, t, l) {
   let o;
   const s = () => {
     const n = document.createElement("template");
@@ -84,7 +84,7 @@ function V(i, e, t, l) {
   }, f = () => (o || (o = s())).cloneNode(!0);
   return f.cloneNode = f, f;
 }
-function D(i, e = window.document) {
+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];
@@ -94,13 +94,13 @@ function D(i, e = window.document) {
 function w(i, e, t) {
   m(i) || (t == null ? i.removeAttribute(e) : i.setAttribute(e, t));
 }
-function H(i, e, t) {
+function F(i, e, t) {
   m(i) || (t ? i.setAttribute(e, "") : i.removeAttribute(e));
 }
-function U(i, e) {
+function G(i, e) {
   m(i) || (e == null ? i.removeAttribute("class") : i.className = e);
 }
-function F(i, e, t, l) {
+function K(i, e, t, l) {
   if (l)
     Array.isArray(t) ? (i[`$$${e}`] = t[0], i[`$$${e}Data`] = t[1]) : i[`$$${e}`] = t;
   else if (Array.isArray(t)) {
@@ -108,7 +108,7 @@ function F(i, e, t, l) {
     i.addEventListener(e, t[0] = (s) => o.call(i, t[1], s));
   } else i.addEventListener(e, t, typeof t != "function" && t);
 }
-function G(i, e, 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++) {
@@ -121,7 +121,7 @@ function G(i, e, t = {}) {
   }
   return t;
 }
-function K(i, e, 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;
@@ -133,16 +133,16 @@ function K(i, e, t) {
     o = e[s], o !== t[s] && (l.setProperty(s, o), t[s] = o);
   return t;
 }
-function R(i, e = {}, t, l) {
+function P(i, e = {}, t, l) {
   const o = {};
-  return g(() => typeof e.ref == "function" && q(e.ref, i)), g(() => Y(i, e, t, !0, o, !0)), o;
+  return g(() => typeof e.ref == "function" && X(e.ref, i)), g(() => Y(i, e, t, !0, o, !0)), o;
 }
-function q(i, e, t) {
-  return x(() => i(e, t));
+function X(i, e, t) {
+  return O(() => i(e, t));
 }
-function X(i, e, t, l) {
-  if (typeof e != "function") return b(i, e, l, t);
-  g((o) => b(i, e(), o, t), l);
+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 Y(i, e, t, l, o = {}, s = !1) {
   e || (e = {});
@@ -169,34 +169,34 @@ function T(i, e, t) {
   for (let o = 0, s = l.length; o < s; o++) i.classList.toggle(l[o], t);
 }
 function N(i, e, t, l, o, s, f) {
-  let n, c, r, d, a;
-  if (e === "style") return K(i, t, l);
-  if (e === "classList") return G(i, t, l);
+  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;
   if (e === "ref")
     s || t(i);
   else if (e.slice(0, 3) === "on:") {
-    const u = e.slice(3);
-    l && i.removeEventListener(u, l, typeof l != "function" && l), t && i.addEventListener(u, t, typeof t != "function" && t);
+    const d = e.slice(3);
+    l && i.removeEventListener(d, l, typeof l != "function" && l), t && i.addEventListener(d, t, typeof t != "function" && t);
   } else if (e.slice(0, 10) === "oncapture:") {
-    const u = e.slice(10);
-    l && i.removeEventListener(u, l, !0), t && i.addEventListener(u, t, !0);
+    const d = e.slice(10);
+    l && i.removeEventListener(d, l, !0), t && i.addEventListener(d, t, !0);
   } else if (e.slice(0, 2) === "on") {
-    const u = e.slice(2).toLowerCase(), h = k.has(u);
+    const d = e.slice(2).toLowerCase(), h = D.has(d);
     if (!h && l) {
       const $ = Array.isArray(l) ? l[0] : l;
-      i.removeEventListener(u, $);
+      i.removeEventListener(d, $);
     }
-    (h || t) && (F(i, u, t, h), h && D([u]));
+    (h || t) && (K(i, d, t, h), h && U([d]));
   } else if (e.slice(0, 5) === "attr:")
     w(i, e.slice(5), t);
   else if (e.slice(0, 5) === "bool:")
-    H(i, e.slice(5), t);
-  else if ((a = e.slice(0, 5) === "prop:") || (r = _.has(e)) || (d = M(e, i.tagName)) || (c = O.has(e)) || (n = i.nodeName.includes("-") || "is" in f)) {
-    if (a)
+    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)) {
+    if (u)
       e = e.slice(5), c = !0;
     else if (m(i)) return t;
-    e === "class" || e === "className" ? U(i, t) : n && !c && !r ? i[J(e)] = t : i[d || e] = t;
+    e === "class" || e === "className" ? G(i, t) : n && !c && !r ? i[J(e)] = t : i[a || e] = t;
   } else
     w(i, j[e] || e, t);
   return t;
@@ -237,7 +237,7 @@ function Q(i) {
   } else n();
   s(l);
 }
-function b(i, e, t, l, o) {
+function A(i, e, t, l, o) {
   const s = m(i);
   if (s) {
     !t && (t = [...i.childNodes]);
@@ -257,24 +257,24 @@ function b(i, e, t, l, o) {
     t !== "" && typeof t == "string" ? t = i.firstChild.data = e : t = i.textContent = e;
   } else if (e == null || f === "boolean") {
     if (s) return t;
-    t = A(i, t, l);
+    t = b(i, t, l);
   } else {
     if (f === "function")
       return g(() => {
         let n = e();
         for (; typeof n == "function"; ) n = n();
-        t = b(i, n, t, l);
+        t = A(i, n, t, l);
       }), () => t;
     if (Array.isArray(e)) {
       const n = [], c = t && Array.isArray(t);
       if (C(n, e, t, o))
-        return g(() => t = b(i, n, t, l, !0)), () => t;
+        return g(() => t = A(i, n, t, l, !0)), () => t;
       if (s)
         return n.length ? t = [...i.childNodes] : t;
-      n.length === 0 ? t = A(i, t, l) : c ? t.length === 0 ? L(i, n, l) : I(i, t, n) : (t && A(i), L(i, n)), t = n;
+      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;
     } else if (e.nodeType) {
       if (s && e.parentNode) return t = e;
-      Array.isArray(t) ? A(i, t, null, e) : t == null || t === "" || !i.firstChild ? i.appendChild(e) : i.replaceChild(e, i.firstChild), 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;
     }
   }
   return t;
@@ -294,8 +294,8 @@ function C(i, e, t, l) {
       } else
         i.push(n), o = !0;
     else {
-      const d = String(n);
-      c && c.nodeType === 3 && c.data === d ? i.push(c) : i.push(document.createTextNode(d));
+      const a = String(n);
+      c && c.nodeType === 3 && c.data === a ? i.push(c) : i.push(document.createTextNode(a));
     }
   }
   return o;
@@ -303,7 +303,7 @@ function C(i, e, t, l) {
 function L(i, e, t = null) {
   for (let l = 0, o = e.length; l < o; l++) i.insertBefore(e[l], t);
 }
-function A(i, e, t, l) {
+function b(i, e, t, l) {
   if (t === void 0) return i.textContent = "";
   const o = l || document.createTextNode("");
   if (e.length) {
@@ -318,18 +318,30 @@ function A(i, e, t, l) {
   } else i.insertBefore(o, t);
   return [o];
 }
-const W = "_button_14ajs_1", Z = {
+const W = "_button_knpbv_1", Z = {
   button: W
 };
-var z = /* @__PURE__ */ V("<button type=button>");
-const v = (i) => (() => {
+var z = /* @__PURE__ */ _("<button type=button>");
+const ie = (i) => (() => {
   var e = z();
-  return R(e, P(i, {
+  return P(e, x(i, {
     get class() {
       return Z.button;
     }
-  }), !1), X(e, () => i.children), e;
+  }), !1), S(e, () => i.children), e;
+})(), p = "_label_16ku5_1", v = {
+  label: p
+};
+var ee = /* @__PURE__ */ _("<label>");
+const ne = (i) => (() => {
+  var e = ee();
+  return P(e, x({
+    get class() {
+      return v.label;
+    }
+  }, i), !1), S(e, () => i.children), e;
 })();
 export {
-  v as Button
+  ie as Button,
+  ne as Label
 };

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(y,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-js"],d):(y=typeof globalThis<"u"?globalThis:y||self,d(y["solid-uix"]={},y.solid))})(this,function(y,d){"use strict";const L=["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"],P=new Set(["className","value","readOnly","noValidate","formNoValidate","isMap","noModule","playsInline",...L]),S=new Set(["innerHTML","textContent","innerText","children"]),j=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),O=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 _(i,e){const t=O[i];return typeof t=="object"?t[e]?t.$:void 0:t}const B=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 M(i,e,t){let f=t.length,o=e.length,s=f,l=0,n=0,c=e[o-1].nextSibling,r=null;for(;l<o||n<s;){if(e[l]===t[n]){l++,n++;continue}for(;e[o-1]===t[s-1];)o--,s--;if(o===l){const u=s<f?n?t[n-1].nextSibling:t[s-n]:c;for(;n<s;)i.insertBefore(t[n++],u)}else if(s===n)for(;l<o;)(!r||!r.has(e[l]))&&e[l].remove(),l++;else if(e[l]===t[s-1]&&t[n]===e[o-1]){const u=e[--o].nextSibling;i.insertBefore(t[n++],e[l++].nextSibling),i.insertBefore(t[--s],u),e[o]=t[s]}else{if(!r){r=new Map;let h=n;for(;h<s;)r.set(t[h],h++)}const u=r.get(e[l]);if(u!=null)if(n<u&&u<s){let h=l,a=1,g;for(;++h<o&&h<s&&!((g=r.get(e[h]))==null||g!==u+a);)a++;if(a>u-n){const E=e[l];for(;n<u;)i.insertBefore(t[n++],E)}else i.replaceChild(t[n++],e[l++])}else l++;else e[l++].remove()}}}const T="_$DX_DELEGATE";function k(i,e,t,f){let o;const s=()=>{const n=document.createElement("template");return n.innerHTML=i,n.content.firstChild},l=()=>(o||(o=s())).cloneNode(!0);return l.cloneNode=l,l}function I(i,e=window.document){const t=e[T]||(e[T]=new Set);for(let f=0,o=i.length;f<o;f++){const s=i[f];t.has(s)||(t.add(s),e.addEventListener(s,Y))}}function C(i,e,t){m(i)||(t==null?i.removeAttribute(e):i.setAttribute(e,t))}function V(i,e,t){m(i)||(t?i.setAttribute(e,""):i.removeAttribute(e))}function R(i,e){m(i)||(e==null?i.removeAttribute("class"):i.className=e)}function D(i,e,t,f){if(f)Array.isArray(t)?(i[`$$${e}`]=t[0],i[`$$${e}Data`]=t[1]):i[`$$${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)}function H(i,e,t={}){const f=Object.keys(e||{}),o=Object.keys(t);let s,l;for(s=0,l=o.length;s<l;s++){const n=o[s];!n||n==="undefined"||e[n]||(w(i,n,!1),delete t[n])}for(s=0,l=f.length;s<l;s++){const n=f[s],c=!!e[n];!n||n==="undefined"||t[n]===c||!c||(w(i,n,!0),t[n]=c)}return t}function U(i,e,t){if(!e)return t?C(i,"style"):e;const f=i.style;if(typeof e=="string")return f.cssText=e;typeof t=="string"&&(f.cssText=t=void 0),t||(t={}),e||(e={});let o,s;for(s in t)e[s]==null&&f.removeProperty(s),delete t[s];for(s in e)o=e[s],o!==t[s]&&(f.setProperty(s,o),t[s]=o);return t}function q(i,e={},t,f){const o={};return d.createRenderEffect(()=>typeof e.ref=="function"&&F(e.ref,i)),d.createRenderEffect(()=>K(i,e,t,!0,o,!0)),o}function F(i,e,t){return d.untrack(()=>i(e,t))}function G(i,e,t,f){if(typeof e!="function")return b(i,e,f,t);d.createRenderEffect(o=>b(i,e(),o,t),f)}function K(i,e,t,f,o={},s=!1){e||(e={});for(const l in o)if(!(l in e)){if(l==="children")continue;o[l]=N(i,l,null,o[l],t,s,e)}for(const l in e){if(l==="children")continue;const n=e[l];o[l]=N(i,l,n,o[l],t,s,e)}}function m(i){return!!d.sharedConfig.context&&!d.sharedConfig.done&&(!i||i.isConnected)}function X(i){return i.toLowerCase().replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function w(i,e,t){const f=e.trim().split(/\s+/);for(let o=0,s=f.length;o<s;o++)i.classList.toggle(f[o],t)}function N(i,e,t,f,o,s,l){let n,c,r,u,h;if(e==="style")return U(i,t,f);if(e==="classList")return H(i,t,f);if(t===f)return f;if(e==="ref")s||t(i);else if(e.slice(0,3)==="on:"){const a=e.slice(3);f&&i.removeEventListener(a,f,typeof f!="function"&&f),t&&i.addEventListener(a,t,typeof t!="function"&&t)}else if(e.slice(0,10)==="oncapture:"){const a=e.slice(10);f&&i.removeEventListener(a,f,!0),t&&i.addEventListener(a,t,!0)}else if(e.slice(0,2)==="on"){const a=e.slice(2).toLowerCase(),g=B.has(a);if(!g&&f){const E=Array.isArray(f)?f[0]:f;i.removeEventListener(a,E)}(g||t)&&(D(i,a,t,g),g&&I([a]))}else if(e.slice(0,5)==="attr:")C(i,e.slice(5),t);else if(e.slice(0,5)==="bool:")V(i,e.slice(5),t);else if((h=e.slice(0,5)==="prop:")||(r=S.has(e))||(u=_(e,i.tagName))||(c=P.has(e))||(n=i.nodeName.includes("-")||"is"in l)){if(h)e=e.slice(5),c=!0;else if(m(i))return t;e==="class"||e==="className"?R(i,t):n&&!c&&!r?i[X(e)]=t:i[u||e]=t}else C(i,j[e]||e,t);return t}function Y(i){if(d.sharedConfig.registry&&d.sharedConfig.events&&d.sharedConfig.events.find(([c,r])=>r===i))return;let e=i.target;const t=`$$${i.type}`,f=i.target,o=i.currentTarget,s=c=>Object.defineProperty(i,"target",{configurable:!0,value:c}),l=()=>{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}return e.host&&typeof e.host!="string"&&!e.host._$host&&e.contains(i.target)&&s(e.host),!0},n=()=>{for(;l()&&(e=e._$host||e.parentNode||e.host););};if(Object.defineProperty(i,"currentTarget",{configurable:!0,get(){return e||document}}),d.sharedConfig.registry&&!d.sharedConfig.done&&(d.sharedConfig.done=_$HY.done=!0),i.composedPath){const c=i.composedPath();s(c[0]);for(let r=0;r<c.length-2&&(e=c[r],!!l());r++){if(e._$host){e=e._$host,n();break}if(e.parentNode===o)break}}else n();s(f)}function b(i,e,t,f,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)}t=n}for(;typeof t=="function";)t=t();if(e===t)return t;const l=typeof e;if(i=i,l==="string"||l==="number"){if(s||l==="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||l==="boolean"){if(s)return t;t=A(i,t,f)}else{if(l==="function")return d.createRenderEffect(()=>{let n=e();for(;typeof n=="function";)n=n();t=b(i,n,t,f)}),()=>t;if(Array.isArray(e)){const n=[],c=t&&Array.isArray(t);if($(n,e,t,o))return d.createRenderEffect(()=>t=b(i,n,t,f,!0)),()=>t;if(s)return n.length?t=[...i.childNodes]:t;n.length===0?t=A(i,t,f):c?t.length===0?x(i,n,f):M(i,t,n):(t&&A(i),x(i,n)),t=n}else if(e.nodeType){if(s&&e.parentNode)return t=e;Array.isArray(t)?A(i,t,null,e):t==null||t===""||!i.firstChild?i.appendChild(e):i.replaceChild(e,i.firstChild),t=e}}return t}function $(i,e,t,f){let o=!1;for(let s=0,l=e.length;s<l;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=$(i,n,c)||o;else if(r==="function")if(f){for(;typeof n=="function";)n=n();o=$(i,Array.isArray(n)?n:[n],Array.isArray(c)?c:[c])||o}else i.push(n),o=!0;else{const u=String(n);c&&c.nodeType===3&&c.data===u?i.push(c):i.push(document.createTextNode(u))}}return o}function x(i,e,t=null){for(let f=0,o=e.length;f<o;f++)i.insertBefore(e[f],t)}function A(i,e,t,f){if(t===void 0)return i.textContent="";const o=f||document.createTextNode("");if(e.length){let s=!1;for(let l=e.length-1;l>=0;l--){const n=e[l];if(o!==n){const c=n.parentNode===i;!s&&!l?c?i.replaceChild(o,n):i.insertBefore(o,t):c&&n.remove()}else s=!0}}else i.insertBefore(o,t);return[o]}const Q={button:"_button_14ajs_1"};var W=k("<button type=button>");const Z=i=>(()=>{var e=W();return q(e,d.mergeProps(i,{get class(){return Q.button}}),!1),G(e,()=>i.children),e})();y.Button=Z,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+(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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-uix",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/main.umd.cjs",
   "module": "./dist/main.js",
@@ -19,6 +19,9 @@
     "dist",
     "README.md"
   ],
+  "workspaces": [
+    "src-storybook"
+  ],
   "peerDependencies": {
     "solid-js": "^1.9.5"
   },
@@ -34,7 +37,8 @@
   },
   "scripts": {
     "build": "tsc && vite build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "start": "cd src-storybook && npm start"
   },
   "author": "thorn_pear",
   "license": "ISC",