@twintag/twintag-form 0.5.0 → 0.6.0

package/dist/twintag-form.webcomponent.js

@@ -174,7 +174,7 @@ function Be({ n: e, i: t, v: r = [] }, o, n, i) {
   };
 }
 let at = /* @__PURE__ */ new Map();
-function Ae(e) {
+function Re(e) {
   if (e.d) {
     let t = [], r = be(
       // merge all conditions into a selector string
@@ -273,8 +273,8 @@ function ct(e, t, r, o, n = []) {
           continue;
         }
         if (x[1] == "l") {
-          for (let E of S(C))
-            h.push(...i(E, {
+          for (let F of S(C))
+            h.push(...i(F, {
               n: s,
               p: (k = T[x[7]], // Set layer (first reset, than set)
               a & ~T.o | k),
@@ -284,12 +284,12 @@ function ct(e, t, r, o, n = []) {
           continue;
         }
         if (x[1] == "i") {
-          h.push(...S(C).map((E) => ({
+          h.push(...S(C).map((F) => ({
             // before all layers
             p: -1,
             o: 0,
             r: [],
-            d: x + " " + E
+            d: x + " " + F
           })));
           continue;
         }
@@ -302,20 +302,20 @@ function ct(e, t, r, o, n = []) {
             ],
             d: i(C, {
               p: T.d
-            }, f).map(Ae).join("")
+            }, f).map(Re).join("")
           });
           continue;
         }
         if (x[1] == "f") {
-          h.push(...S(C).map((E) => ({
+          h.push(...S(C).map((F) => ({
             p: T.d,
             o: 0,
             r: [
               x
             ],
-            d: i(E, {
+            d: i(F, {
               p: T.d
-            }, f).map(Ae).join("")
+            }, f).map(Re).join("")
           })));
           continue;
         }
@@ -325,25 +325,25 @@ function ct(e, t, r, o, n = []) {
           a,
           u,
           l
-        ])) : (C || C === 0) && (x = x.replace(/[A-Z]/g, (E) => "-" + E.toLowerCase()), y += 1, w = Math.max(w, (D = x)[0] == "-" ? 0 : it(D) + (/^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7,8}$)|([fl].{5}l|g.{8}$|pl))/.test(D) ? +!!RegExp.$1 || /* +1 */
+        ])) : (C || C === 0) && (x = x.replace(/[A-Z]/g, (F) => "-" + F.toLowerCase()), y += 1, w = Math.max(w, (D = x)[0] == "-" ? 0 : it(D) + (/^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7,8}$)|([fl].{5}l|g.{8}$|pl))/.test(D) ? +!!RegExp.$1 || /* +1 */
         -!!RegExp.$2 : (
           /* -1 */
           0
-        )) + 1), b += (b ? ";" : "") + S(C).map((E) => f.s(
+        )) + 1), b += (b ? ";" : "") + S(C).map((F) => f.s(
           x,
           // support theme(...) function in values
           // calc(100vh - theme('spacing.12'))
-          Me("" + E, f.theme) + (u ? " !important" : "")
+          Me("" + F, f.theme) + (u ? " !important" : "")
         )).join(";"));
       else if (x[0] == "@" || x.includes("&")) {
-        let E = a;
-        x[0] == "@" && (x = x.replace(/\bscreen\(([^)]+)\)/g, (he, Y) => {
-          let V = f.theme("screens", Y);
-          return V ? (E |= 67108864, /* Shifts.screens */
+        let F = a;
+        x[0] == "@" && (x = x.replace(/\bscreen\(([^)]+)\)/g, (he, J) => {
+          let V = f.theme("screens", J);
+          return V ? (F |= 67108864, /* Shifts.screens */
           De(V, "")) : he;
-        }), E |= ze(x)), h.push(...i(C, {
+        }), F |= ze(x)), h.push(...i(C, {
           n: s,
-          p: E,
+          p: F,
           r: [
             ...c,
             x
@@ -548,23 +548,23 @@ function ue(e) {
 function d(e, t, r) {
   return [
     e,
-    Re(t, r)
+    Ae(t, r)
   ];
 }
-function Re(e, t) {
+function Ae(e, t) {
   return typeof e == "function" ? e : typeof e == "string" && /^[\w-]+$/.test(e) ? (
     // a CSS property alias
     (r, o) => ({
-      [e]: t ? t(r, o) : Ee(r, 1)
+      [e]: t ? t(r, o) : Fe(r, 1)
     })
   ) : (r) => (
     // CSSObject, shortcut or apply
     e || {
-      [r[1]]: Ee(r, 2)
+      [r[1]]: Fe(r, 2)
     }
   );
 }
-function Ee(e, t, r = e.slice(t).find(Boolean) || e.$$ || e.input) {
+function Fe(e, t, r = e.slice(t).find(Boolean) || e.$$ || e.input) {
   return e.input[0] == "-" ? `calc(${r} * -1)` : r;
 }
 function p(e, t, r, o) {
@@ -582,7 +582,7 @@ function Tt(e, t, r) {
   return (n, i) => {
     let l = pt(e || n[1]), s = i.theme(l, n.$$) ?? P(n.$$, l, i);
     if (s != null)
-      return n._ = Ee(n, 0, s), o(n, i, l);
+      return n._ = Fe(n, 0, s), o(n, i, l);
   };
 }
 function $(e, t = {}, r) {
@@ -749,15 +749,15 @@ function Ne(e, t, r, o, n, i) {
       return a;
   }
 }
-function At(e) {
+function Rt(e) {
   var t;
-  return Fe(e[0], typeof (t = e[1]) == "function" ? t : () => t);
+  return Ee(e[0], typeof (t = e[1]) == "function" ? t : () => t);
 }
-function Rt(e) {
+function At(e) {
   var t, r;
-  return Array.isArray(e) ? Fe(e[0], Re(e[1], e[2])) : Fe(e, Re(t, r));
+  return Array.isArray(e) ? Ee(e[0], Ae(e[1], e[2])) : Ee(e, Ae(t, r));
 }
-function Fe(e, t) {
+function Ee(e, t) {
   return ut(e, (r, o, n, i) => {
     let l = o.exec(r);
     if (l)
@@ -768,7 +768,7 @@ function Fe(e, t) {
   });
 }
 function ut(e, t) {
-  let r = S(e).map(Et);
+  let r = S(e).map(Ft);
   return (o, n, i) => {
     for (let l of r) {
       let s = t(o, l, n, i);
@@ -777,12 +777,12 @@ function ut(e, t) {
     }
   };
 }
-function Et(e) {
+function Ft(e) {
   return typeof e == "string" ? RegExp("^" + e + (e.includes("$") || e.slice(-1) == "-" ? "" : "$")) : e;
 }
-function Ft(e, t) {
+function Et(e, t) {
   let r = ft(e), o = function({ theme: a, darkMode: c, darkColor: u = Le, variants: f, rules: h, hash: b, stringify: w, ignorelist: y, finalize: k }) {
-    let D = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), he = ut(y, (v, R) => R.test(v));
+    let D = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map(), he = ut(y, (v, A) => A.test(v));
     f.push([
       "dark",
       Array.isArray(c) || c == "class" ? `${S(c)[1] || ".dark"} &` : typeof c == "string" && c != "media" ? c : (
@@ -790,17 +790,17 @@ function Ft(e, t) {
         "@media (prefers-color-scheme:dark)"
       )
     ]);
-    let Y = typeof b == "function" ? (v) => b(v, pe) : b ? pe : qe;
-    Y !== qe && k.push((v) => {
-      var R;
+    let J = typeof b == "function" ? (v) => b(v, pe) : b ? pe : qe;
+    J !== qe && k.push((v) => {
+      var A;
       return {
         ...v,
-        n: v.n && Y(v.n),
-        d: (R = v.d) == null ? void 0 : R.replace(/--(tw(?:-[\w-]+)?)\b/g, (L, me) => "--" + Y(me).replace("#", ""))
+        n: v.n && J(v.n),
+        d: (A = v.d) == null ? void 0 : A.replace(/--(tw(?:-[\w-]+)?)\b/g, (L, me) => "--" + J(me).replace("#", ""))
       };
     });
     let V = {
-      theme: function({ extend: v = {}, ...R }) {
+      theme: function({ extend: v = {}, ...A }) {
         let L = {}, me = {
           get colors() {
             return Z("colors");
@@ -810,49 +810,49 @@ function Ft(e, t) {
           negative() {
             return {};
           },
-          breakpoints(A) {
-            let F = {};
-            for (let W in A)
-              typeof A[W] == "string" && (F["screen-" + W] = A[W]);
-            return F;
+          breakpoints(R) {
+            let E = {};
+            for (let W in R)
+              typeof R[W] == "string" && (E["screen-" + W] = R[W]);
+            return E;
           }
         };
         return Z;
-        function Z(A, F, W, Q) {
-          if (A) {
-            if ({ 1: A, 2: Q } = // eslint-disable-next-line no-sparse-arrays
-            /^(\S+?)(?:\s*\/\s*([^/]+))?$/.exec(A) || [
+        function Z(R, E, W, Q) {
+          if (R) {
+            if ({ 1: R, 2: Q } = // eslint-disable-next-line no-sparse-arrays
+            /^(\S+?)(?:\s*\/\s*([^/]+))?$/.exec(R) || [
               ,
-              A
-            ], /[.[]/.test(A)) {
+              R
+            ], /[.[]/.test(R)) {
               let B = [];
-              A.replace(/\[([^\]]+)\]|([^.[]+)/g, (N, ee, wt = ee) => B.push(wt)), A = B.shift(), W = F, F = B.join("-");
+              R.replace(/\[([^\]]+)\]|([^.[]+)/g, (N, ee, wt = ee) => B.push(wt)), R = B.shift(), W = E, E = B.join("-");
             }
-            let U = L[A] || // two-step deref to allow extend section to reference base section
+            let U = L[R] || // two-step deref to allow extend section to reference base section
             Object.assign(Object.assign(
               // Make sure to not get into recursive calls
-              L[A] = {},
-              Ue(R, A)
-            ), Ue(v, A));
-            if (F == null)
+              L[R] = {},
+              Ue(A, R)
+            ), Ue(v, R));
+            if (E == null)
               return U;
-            F || (F = "DEFAULT");
-            let _ = U[F] ?? F.split("-").reduce((B, N) => B == null ? void 0 : B[N], U) ?? W;
+            E || (E = "DEFAULT");
+            let _ = U[E] ?? E.split("-").reduce((B, N) => B == null ? void 0 : B[N], U) ?? W;
             return Q ? z(_, {
               opacityValue: Me(Q, Z)
             }) : _;
           }
           let K = {};
           for (let U of [
-            ...Object.keys(R),
+            ...Object.keys(A),
             ...Object.keys(v)
           ])
             K[U] = Z(U);
           return K;
         }
-        function Ue(A, F) {
-          let W = A[F];
-          return typeof W == "function" && (W = W(me)), W && /color|fill|stroke/i.test(F) ? function Q(K, U = []) {
+        function Ue(R, E) {
+          let W = R[E];
+          return typeof W == "function" && (W = W(me)), W && /color|fill|stroke/i.test(E) ? function Q(K, U = []) {
             let _ = {};
             for (let B in K) {
               let N = K[B], ee = [
@@ -866,25 +866,25 @@ function Ft(e, t) {
         }
       }(a),
       e: nt,
-      h: Y,
-      s(v, R) {
-        return w(v, R, V);
+      h: J,
+      s(v, A) {
+        return w(v, A, V);
       },
-      d(v, R, L) {
-        return u(v, R, V, L);
+      d(v, A, L) {
+        return u(v, A, V, L);
       },
       v(v) {
-        return D.has(v) || D.set(v, Ne(v, f, x, At, V) || "&:" + v), D.get(v);
+        return D.has(v) || D.set(v, Ne(v, f, x, Rt, V) || "&:" + v), D.get(v);
       },
-      r(v, R) {
+      r(v, A) {
         let L = JSON.stringify([
           v,
-          R
+          A
         ]);
-        return C.has(L) || C.set(L, !he(v, V) && Ne(v, h, E, Rt, V, R)), C.get(L);
+        return C.has(L) || C.set(L, !he(v, V) && Ne(v, h, F, At, V, A)), C.get(L);
       },
       f(v) {
-        return k.reduce((R, L) => L(R, V), v);
+        return k.reduce((A, L) => L(A, V), v);
       }
     };
     return V;
@@ -893,7 +893,7 @@ function Ft(e, t) {
     t.insert(a, i.length, c), i.push(c), l.add(a);
   });
   function s(a) {
-    let c = o.f(a), u = Ae(c);
+    let c = o.f(a), u = Re(c);
     if (u && !l.has(u)) {
       l.add(u);
       let f = lt(i, a);
@@ -1064,7 +1064,7 @@ function Dt(e, t = !0) {
         c >= 0 && l.splice(c, 1);
       }
     };
-  }(), o = Ft({
+  }(), o = Et({
     ...e,
     // in production use short hashed class names
     hash: e.hash ?? t
@@ -1091,7 +1091,21 @@ function ke(e) {
     mode: "open"
   });
 }
-var Bt = Object.defineProperty, Mt = (e, t, r) => t in e ? Bt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, ie = (e, t, r) => (Mt(e, typeof t != "symbol" ? t + "" : t, r), r);
+var We, ie = yt;
+if (process.env.NODE_ENV === "production")
+  We = ie.createRoot, ie.hydrateRoot;
+else {
+  var Ge = ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  We = function(e, t) {
+    Ge.usingClientEntryPoint = !0;
+    try {
+      return ie.createRoot(e, t);
+    } finally {
+      Ge.usingClientEntryPoint = !1;
+    }
+  };
+}
+var Bt = Object.defineProperty, Mt = (e, t, r) => t in e ? Bt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, ae = (e, t, r) => (Mt(e, typeof t != "symbol" ? t + "" : t, r), r);
 const Vt = {
   stringify: (e) => e,
   parse: (e) => e
@@ -1121,7 +1135,7 @@ const Vt = {
   boolean: qt,
   function: Ht,
   json: It
-}, Ce = Symbol.for("r2wc.render"), ae = Symbol.for("r2wc.connected"), J = Symbol.for("r2wc.context"), H = Symbol.for("r2wc.props");
+}, Ce = Symbol.for("r2wc.render"), le = Symbol.for("r2wc.connected"), G = Symbol.for("r2wc.context"), H = Symbol.for("r2wc.props");
 function Pt(e, t, r) {
   var o, n, i;
   t.props || (t.props = e.propTypes ? Object.keys(e.propTypes) : []);
@@ -1133,7 +1147,7 @@ function Pt(e, t, r) {
   }
   class u extends HTMLElement {
     constructor() {
-      super(), ie(this, o, !0), ie(this, n), ie(this, i, {}), ie(this, "container"), t.shadow ? this.container = this.attachShadow({
+      super(), ae(this, o, !0), ae(this, n), ae(this, i, {}), ae(this, "container"), t.shadow ? this.container = this.attachShadow({
         mode: t.shadow
       }) : this.container = this, this[H].container = this.container;
       for (const h of l) {
@@ -1145,17 +1159,17 @@ function Pt(e, t, r) {
       return Object.keys(c);
     }
     connectedCallback() {
-      this[ae] = !0, this[Ce]();
+      this[le] = !0, this[Ce]();
     }
     disconnectedCallback() {
-      this[ae] = !1, this[J] && r.unmount(this[J]);
+      this[le] = !1, this[G] && r.unmount(this[G]), delete this[G];
     }
     attributeChangedCallback(h, b, w) {
       const y = c[h], k = s[y], D = Se[k];
       y in s && D != null && D.parse && (this[H][y] = D.parse(w, this), this[Ce]());
     }
-    [(o = ae, n = J, i = H, Ce)]() {
-      this[ae] && (this[J] ? r.update(this[J], this[H]) : this[J] = r.mount(
+    [(o = le, n = G, i = H, Ce)]() {
+      this[le] && (this[G] ? r.update(this[G], this[H]) : this[G] = r.mount(
         this.container,
         e,
         this[H]
@@ -1185,20 +1199,6 @@ function Pt(e, t, r) {
 function _t(e = "") {
   return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
-var We, le = yt;
-if (process.env.NODE_ENV === "production")
-  We = le.createRoot, le.hydrateRoot;
-else {
-  var Ge = le.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  We = function(e, t) {
-    Ge.usingClientEntryPoint = !0;
-    try {
-      return le.createRoot(e, t);
-    } finally {
-      Ge.usingClientEntryPoint = !1;
-    }
-  };
-}
 function Nt(e, t, r) {
   const o = We(e), n = ot.createElement(t, r);
   return o.render(n), {
@@ -2717,7 +2717,7 @@ let rr = {
     opacitySection: "opacity"
   }),
   // Gradient Color Stops
-  d("bg-gradient-to-([trbl]|[tb][rl])", "backgroundImage", ({ 1: e }) => `linear-gradient(to ${G(e, " ")},var(--tw-gradient-stops))`),
+  d("bg-gradient-to-([trbl]|[tb][rl])", "backgroundImage", ({ 1: e }) => `linear-gradient(to ${Y(e, " ")},var(--tw-gradient-stops))`),
   $("from-", {
     section: "gradientColorStops",
     opacityVariable: !1,
@@ -2800,8 +2800,8 @@ let rr = {
       e
     ];
     return {
-      [`border-${G(r[0])}-radius`]: t,
-      [`border-${G(r[1])}-radius`]: t
+      [`border-${Y(r[0])}-radius`]: t,
+      [`border-${Y(r[1])}-radius`]: t
     };
   }),
   // Border Collapse
@@ -2854,8 +2854,8 @@ let rr = {
     return {
       "&>:not([hidden])~:not([hidden])": {
         [`--tw-divide-${e}-reverse`]: "0",
-        [`border-${G(r[0])}Width`]: `calc(${t} * calc(1 - var(--tw-divide-${e}-reverse)))`,
-        [`border-${G(r[1])}Width`]: `calc(${t} * var(--tw-divide-${e}-reverse))`
+        [`border-${Y(r[0])}Width`]: `calc(${t} * calc(1 - var(--tw-divide-${e}-reverse)))`,
+        [`border-${Y(r[1])}Width`]: `calc(${t} * var(--tw-divide-${e}-reverse))`
       }
     };
   }),
@@ -3113,7 +3113,7 @@ function se(e) {
 function Ye(e) {
   return (typeof e == "string" ? e : e[1]).replace("col", "column");
 }
-function G(e, t = "-") {
+function Y(e, t = "-") {
   let r = [];
   for (let o of e)
     r.push({
@@ -3162,8 +3162,8 @@ function X(e, t = "") {
       y: "tb"
     }[r] || r + r;
     return n ? {
-      ...de(e + "-" + G(n[0]) + t, o),
-      ...de(e + "-" + G(n[1]) + t, o)
+      ...de(e + "-" + Y(n[0]) + t, o),
+      ...de(e + "-" + Y(n[1]) + t, o)
     } : de(e + t, o);
   };
 }
@@ -4200,8 +4200,8 @@ function g(e, t) {
 let bt = {
   ...ge,
   colors: ht
-}, [Ar, Rr] = bt.fontSize.base, { spacing: q, borderWidth: tt, borderRadius: rt } = bt;
-function Er({ strategy: e } = {}) {
+}, [Rr, Ar] = bt.fontSize.base, { spacing: q, borderWidth: tt, borderRadius: rt } = bt;
+function Fr({ strategy: e } = {}) {
   let t = {};
   return e !== "base" && (t.rules = [
     [
@@ -4259,8 +4259,8 @@ let $e = [
       "padding-right": q[3],
       "padding-bottom": q[2],
       "padding-left": q[3],
-      "font-size": Ar,
-      "line-height": Rr,
+      "font-size": Rr,
+      "line-height": Ar,
       "--tw-shadow": "0 0 #0000",
       "&:focus": {
         outline: "2px solid transparent",
@@ -4452,7 +4452,7 @@ let $e = [
     }
   }
 ];
-function Fr(e) {
+function Er(e) {
   switch (e) {
     case "%20":
       return " ";
@@ -4467,21 +4467,21 @@ function Fr(e) {
   }
 }
 function ce(e) {
-  return "data:image/svg+xml," + encodeURIComponent(e.trim().replace(/\s+/g, " ").replace(/"/g, "'")).replace(/%[\dA-F]{2}/g, Fr);
+  return "data:image/svg+xml," + encodeURIComponent(e.trim().replace(/\s+/g, " ").replace(/"/g, "'")).replace(/%[\dA-F]{2}/g, Er);
 }
 const Wr = ft({
   theme: {
     extend: {
       colors: {
-        primary: "var(--clr-primary,black)",
-        accent: "var(--clr-accent,blue)",
-        label: "var(--clr-label,black)",
-        input: "var(--clr-input,black)",
-        placeholder: "var(--clr-placeholder,#94a3b8)",
-        "category-label": "var(--clr-category-label,black)"
+        primary: "var(--tt-clr-primary,black)",
+        accent: "var(--tt-clr-accent,blue)",
+        label: "var(--tt-clr-label,black)",
+        input: "var(--tt-clr-input,black)",
+        placeholder: "var(--tt-clr-placeholder,#94a3b8)",
+        "category-label": "var(--tt-clr-category-label,black)"
       },
       fontFamily: {
-        "ff-text": ["var(--ff-text)", "Helvetica", "Arial", "sans-serif"]
+        "ff-text": ["var(--tt-ff-text)", "Helvetica", "Arial", "sans-serif"]
       }
     }
   },
@@ -4489,13 +4489,13 @@ const Wr = ft({
     tr(),
     $r(),
     zr(),
-    Er()
+    Fr()
   ]
 }), Or = Dt(Wr), jr = Jt(xt, {
-  props: {
+  props: /* @__PURE__ */ Object.create({
     config: "json",
     options: "json"
-  },
+  }),
   shadow: "open"
 });
 class Dr extends Or(jr) {

package/lib/__stories__/Form.stories.tsx

@@ -1,7 +1,7 @@
-import { TwintagForm } from '@twintag-form/index';
+import { TwintagForm } from '@twintag/twintag-form/index';
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj, Decorator } from '@storybook/react';
 
 import { withActions } from '@storybook/addon-actions/decorator';
 
@@ -17,7 +17,7 @@ const meta: Meta<typeof TwintagForm> = {
       handles: ['twintag-form-valid', 'twintag-form-invalid'],
     },
   },
-  decorators: [withActions as any],
+  decorators: [withActions as unknown as Decorator],
 };
 
 export default meta;

package/lib/components/Form/index.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
 type FormRef = Ref<{
-  validate: () => void;
+  validate?: () => void;
 } | null>;
 
 type Props = {

package/lib/components/Input/__styles.ts

@@ -11,10 +11,10 @@ export const containerStyle = tv({
 export const checkboxStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'flex gap-4 items-center w-full',
+      className: 'flex w-full items-center gap-4',
     }),
     checkbox:
-      'flex appearance-none items-center justify-center bg-white outline-none ring-0 border-2 border-primary focus:ring-0 focus:border-accent',
+      'border-primary focus:border-accent flex appearance-none items-center justify-center border-2 bg-white outline-none ring-0 focus:ring-0',
   },
   variants: {
     variant: {
@@ -34,23 +34,23 @@ export const checkboxStyle = tv({
 export const fileStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'w-full block',
+      className: 'block w-full',
     }),
     span: '',
     input:
-      'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
+      'w-full cursor-pointer border-2 border-transparent ring-0 focus:ring-0',
   },
   variants: {
     variant: {
       alpha: {
         container: 'grid gap-1.5',
         input:
-          'flex items-center justify-between gap-4 rounded-md px-3 py-2 border-slate-700/10 peer-focus:border-accent',
+          'peer-focus:border-accent flex items-center justify-between gap-4 rounded-md border-slate-700/10 px-3 py-2',
       },
       beta: {
         container: 'grid gap-0',
         input:
-          'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
+          'peer-focus:border-b-accent flex items-center justify-between gap-4 border-b-slate-700/10 py-2',
       },
     },
   },
@@ -66,18 +66,18 @@ export const simpleStyle = tv({
     }),
     span: '',
     input:
-      'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-input',
+      'placeholder:text-placeholder text-input w-full border-2 border-transparent ring-0 focus:ring-0',
   },
   variants: {
     variant: {
       alpha: {
         container: 'grid gap-1.5',
-        input: 'rounded-md border-slate-700/10 focus:border-accent',
+        input: 'focus:border-accent rounded-md border-slate-700/10',
       },
       beta: {
         container: 'grid gap-0',
         input:
-          'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
+          'focus:border-b-accent border-b-slate-700/10 px-0 focus:border-transparent',
       },
     },
   },
@@ -100,16 +100,16 @@ export const toggleStyle = tv({
       alpha: {
         container: 'flex justify-between',
         input:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
         thumb:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
       },
       beta: {
         container: 'flex justify-between',
         input:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
         thumb:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
       },
     },
   },
@@ -119,11 +119,11 @@ export const toggleStyle = tv({
 });
 
 export const submitStyle = tv({
-  base: 'w-max max-w-full mt-2',
+  base: 'mt-2 w-max max-w-full',
   variants: {
     variant: {
-      alpha: 'bg-primary text-white px-4 py-2 rounded-md',
-      beta: 'bg-primary text-white px-4 py-2',
+      alpha: 'bg-primary rounded-md px-4 py-2 text-white',
+      beta: 'bg-primary px-4 py-2 text-white',
     },
   },
   defaultVariants: {

package/lib/components/Input/checkbox.tsx

@@ -5,7 +5,7 @@ import { useController, useFormContext } from 'react-hook-form';
 import { CheckIcon } from '@heroicons/react/24/outline';
 import * as RdxCheckbox from '@radix-ui/react-checkbox';
 
-import { Label } from '@twintag-form/components';
+import { Label } from '@twintag/twintag-form/components';
 import { type CommonProps } from './__props';
 import { checkboxStyle } from './__styles';