@twintag/twintag-form 1.0.0-beta.1 → 1.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @twintag/twintag-form@1.0.0-beta.1 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> @twintag/twintag-form@1.0.1 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
 > tsc && vite build
 
 vite v4.4.9 building for production...
@@ -14,8 +14,8 @@ computing gzip size...
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/prettier.config.d.mts
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/dev/main.d.ts
 [vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/vite.config.d.ts
-dist/twintag-form.webcomponent.js  119.20 kB │ gzip: 33.33 kB
-dist/twintag-form.react.js         247.16 kB │ gzip: 56.86 kB
-[vite:dts] Declaration files built in 3364ms.
+dist/twintag-form.webcomponent.js  119.25 kB │ gzip: 33.34 kB
+dist/twintag-form.react.js         247.12 kB │ gzip: 56.86 kB
+[vite:dts] Declaration files built in 3571ms.
 
-✓ built in 6.11s
+✓ built in 6.37s

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @twintag/twintag-form
 
+## 1.0.1
+
+### Patch Changes
+
+- 842d936: fix: ui refinements
+
+## 1.0.0
+
+### Major Changes
+
+- d84b6f7: refactor: design system update
+
+### Patch Changes
+
+- fix: remove dependency that breaks `npm install`
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

package/dev/index.css

@@ -5,8 +5,9 @@
 @tailwind utilities;
 
 :root {
+  --tf-label: 222.2 47.4% 11.2%;
+  --tf-category: 222.2 47.4% 11.2%;
   --tf-background: 0 0% 100%;
-  --tf-foreground: 222.2 47.4% 11.2%;
 
   --tf-muted: 210 40% 96.1%;
   --tf-muted-foreground: 215.4 16.3% 46.9%;

package/dist/twintag-form.react.js

@@ -7492,7 +7492,7 @@ const kc = /* @__PURE__ */ Ce((e, t) => /* @__PURE__ */ G(Xe.label, fe({}, e, {
   }
 }))), ta = kc, Cc = Me({
   base: [
-    "text-sm font-medium leading-none text-primary-foreground",
+    "text-sm leading-none text-label",
     "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
   ]
 }), ra = be.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ p.jsx(
@@ -8477,7 +8477,7 @@ const Nl = ({ label: e, bind: t, options: r }) => {
 }, Pl = Me({
   slots: {
     container: "w-full space-y-4",
-    heading: "font-tf-font text-sm font-bold text-foreground",
+    heading: "font-tf-font text-sm text-category",
     items: "grid gap-4"
   }
 }), $a = ({ label: e, children: t }) => {

package/dist/twintag-form.webcomponent.js

@@ -47,20 +47,20 @@ const ut = {
   json: ht
 }, fe = Symbol.for("r2wc.render"), ne = Symbol.for("r2wc.connected"), B = Symbol.for("r2wc.context"), V = Symbol.for("r2wc.props");
 function xt(e, t, r) {
-  var n, o, s;
+  var n, o, l;
   t.props || (t.props = e.propTypes ? Object.keys(e.propTypes) : []);
-  const l = (Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props)).filter((f) => f !== "container"), a = {}, i = {}, d = {};
-  for (const f of l) {
+  const s = (Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props)).filter((f) => f !== "container"), a = {}, i = {}, d = {};
+  for (const f of s) {
     a[f] = Array.isArray(t.props) ? "string" : t.props[f];
     const m = yt(f);
     i[f] = m, d[m] = f;
   }
   class u extends HTMLElement {
     constructor() {
-      super(), re(this, n, !0), re(this, o), re(this, s, {}), re(this, "container"), t.shadow ? this.container = this.attachShadow({
+      super(), re(this, n, !0), re(this, o), re(this, l, {}), re(this, "container"), t.shadow ? this.container = this.attachShadow({
         mode: t.shadow
       }) : this.container = this, this[V].container = this.container;
-      for (const m of l) {
+      for (const m of s) {
         const b = i[m], h = this.getAttribute(b), x = a[m], v = de[x];
         h && v != null && v.parse && (this[V][m] = v.parse(h, this));
       }
@@ -78,7 +78,7 @@ function xt(e, t, r) {
       const x = d[m], v = a[x], D = de[v];
       x in a && D != null && D.parse && (this[V][x] = D.parse(h, this), this[fe]());
     }
-    [(n = ne, o = B, s = V, fe)]() {
+    [(n = ne, o = B, l = V, fe)]() {
       this[ne] && (this[B] ? r.update(this[B], this[V]) : this[B] = r.mount(
         this.container,
         e,
@@ -86,7 +86,7 @@ function xt(e, t, r) {
       ));
     }
   }
-  for (const f of l) {
+  for (const f of s) {
     const m = i[f], b = a[f];
     Object.defineProperty(u.prototype, f, {
       enumerable: !0,
@@ -271,30 +271,30 @@ let zt = [
   /* re */
   "quire"
 ];
-function $e({ n: e, i: t, v: r = [] }, n, o, s) {
+function $e({ n: e, i: t, v: r = [] }, n, o, l) {
   e && (e = Fe({
     n: e,
     i: t,
     v: r
-  })), s = [
-    ...k(s)
+  })), l = [
+    ...k(l)
   ];
   for (let a of r) {
     let i = n.theme("screens", a);
     for (let d of k(i && Re(i) || n.v(a))) {
-      var l;
-      s.push(d), o |= i ? 67108864 | /* Shifts.screens */
+      var s;
+      l.push(d), o |= i ? 67108864 | /* Shifts.screens */
       ke(d) : a == "dark" ? 1073741824 : (
         /* Shifts.darkMode */
-        d[0] == "@" ? ke(d) : (l = d, // use first found pseudo-class
-        1 << ~(/:([a-z-]+)/.test(l) && ~zt.indexOf(RegExp.$1.slice(2, 7)) || -18))
+        d[0] == "@" ? ke(d) : (s = d, // use first found pseudo-class
+        1 << ~(/:([a-z-]+)/.test(s) && ~zt.indexOf(RegExp.$1.slice(2, 7)) || -18))
       );
     }
   }
   return {
     n: e,
     p: o,
-    r: s,
+    r: l,
     i: t
   };
 }
@@ -305,23 +305,23 @@ function Se(e) {
       // merge all conditions into a selector string
       e.r.reduce((n, o) => o[0] == "@" ? (t.push(o), n) : (
         // Go over the selector and replace the matching multiple selectors if any
-        o ? ue(n, (s) => ue(
+        o ? ue(n, (l) => ue(
           o,
           // If the current condition has a nested selector replace it
-          (l) => {
-            let a = /(:merge\(.+?\))(:[a-z-]+|\\[.+])/.exec(l);
+          (s) => {
+            let a = /(:merge\(.+?\))(:[a-z-]+|\\[.+])/.exec(s);
             if (a) {
-              let i = s.indexOf(a[1]);
+              let i = l.indexOf(a[1]);
               return ~i ? (
                 // [':merge(.group):hover .rule', ':merge(.group):focus &'] -> ':merge(.group):focus:hover .rule'
                 // ':merge(.group)' + ':focus' + ':hover .rule'
-                s.slice(0, i) + a[0] + s.slice(i + a[1].length)
+                l.slice(0, i) + a[0] + l.slice(i + a[1].length)
               ) : (
                 // [':merge(.peer):focus~&', ':merge(.group):hover &'] -> ':merge(.peer):focus~:merge(.group):hover &'
-                me(s, l)
+                me(l, s)
               );
             }
-            return me(l, s);
+            return me(s, l);
           }
         )) : n
       ), "&"),
@@ -367,15 +367,15 @@ function H(e, t = {}) {
   if (e.includes("<alpha-value>"))
     return e.replace("<alpha-value>", o);
   if (e[0] == "#" && (e.length == 4 || e.length == 7)) {
-    let s = (e.length - 1) / 3, l = [
+    let l = (e.length - 1) / 3, s = [
       17,
       1,
       0.062272
-    ][s - 1];
+    ][l - 1];
     return `rgba(${[
-      ge(e.substr(1, s), l),
-      ge(e.substr(1 + s, s), l),
-      ge(e.substr(1 + 2 * s, s), l),
+      ge(e.substr(1, l), s),
+      ge(e.substr(1 + l, l), s),
+      ge(e.substr(1 + 2 * l, l), s),
       o
     ]})`;
   }
@@ -385,21 +385,21 @@ function H(e, t = {}) {
   );
 }
 function et(e, t, r, n, o = []) {
-  return function s(l, { n: a, p: i, r: d = [], i: u }, f) {
+  return function l(s, { n: a, p: i, r: d = [], i: u }, f) {
     let m = [], b = "", h = 0, x = 0;
-    for (let y in l || {}) {
+    for (let y in s || {}) {
       var v, D;
-      let S = l[y];
+      let S = s[y];
       if (y[0] == "@") {
         if (!S)
           continue;
         if (y[1] == "a") {
-          m.push(...je(a, i, le("" + S), f, i, d, u, !0));
+          m.push(...je(a, i, se("" + S), f, i, d, u, !0));
           continue;
         }
         if (y[1] == "l") {
           for (let E of k(S))
-            m.push(...s(E, {
+            m.push(...l(E, {
               n: a,
               p: (v = C[y[7]], // Set layer (first reset, than set)
               i & ~C.o | v),
@@ -425,7 +425,7 @@ function et(e, t, r, n, o = []) {
             r: [
               y
             ],
-            d: s(S, {
+            d: l(S, {
               p: C.d
             }, f).map(Se).join("")
           });
@@ -438,7 +438,7 @@ function et(e, t, r, n, o = []) {
             r: [
               y
             ],
-            d: s(E, {
+            d: l(E, {
               p: C.d
             }, f).map(Se).join("")
           })));
@@ -449,7 +449,7 @@ function et(e, t, r, n, o = []) {
         y == "label" && S ? a = S + ae(JSON.stringify([
           i,
           u,
-          l
+          s
         ])) : (S || S === 0) && (y = y.replace(/[A-Z]/g, (E) => "-" + E.toLowerCase()), x += 1, h = Math.max(h, (D = y)[0] == "-" ? 0 : Xe(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 */
@@ -466,7 +466,7 @@ function et(e, t, r, n, o = []) {
           let U = f.theme("screens", G);
           return U ? (E |= 67108864, /* Shifts.screens */
           Re(U, "")) : ce;
-        }), E |= ke(y)), m.push(...s(S, {
+        }), E |= ke(y)), m.push(...l(S, {
           n: a,
           p: E,
           r: [
@@ -476,7 +476,7 @@ function et(e, t, r, n, o = []) {
           i: u
         }, f));
       } else
-        m.push(...s(S, {
+        m.push(...l(S, {
           p: i,
           r: [
             ...d,
@@ -504,8 +504,8 @@ function et(e, t, r, n, o = []) {
   }(e, $e(t, r, n, o), r);
 }
 function De(e, t) {
-  return e.replace(/theme\((["'`])?(.+?)\1(?:\s*,\s*(["'`])?(.+?)\3)?\)/g, (r, n, o, s, l = "") => {
-    let a = t(o, l);
+  return e.replace(/theme\((["'`])?(.+?)\1(?:\s*,\s*(["'`])?(.+?)\3)?\)/g, (r, n, o, l, s = "") => {
+    let a = t(o, s);
     return typeof a == "function" && /color|fill|stroke/i.test(o) ? H(a) : "" + k(a).filter((i) => Object(i) !== i);
   });
 }
@@ -524,9 +524,9 @@ function tt(e, t) {
     });
   return n;
 }
-function se(e, t, r = C.u, n, o) {
-  let s = [];
-  for (let l of e)
+function le(e, t, r = C.u, n, o) {
+  let l = [];
+  for (let s of e)
     for (let a of function(i, d, u, f, m) {
       i = {
         ...i,
@@ -538,7 +538,7 @@ function se(e, t, r = C.u, n, o) {
       }(i, d);
       return b ? (
         // a list of class names
-        typeof b == "string" ? ({ r: f, p: u } = $e(i, d, u, f), tt(se(le(b), d, u, f, i.i), i.n)) : Array.isArray(b) ? b.map((h) => {
+        typeof b == "string" ? ({ r: f, p: u } = $e(i, d, u, f), tt(le(se(b), d, u, f, i.i), i.n)) : Array.isArray(b) ? b.map((h) => {
           var x, v;
           return {
             o: 0,
@@ -561,14 +561,14 @@ function se(e, t, r = C.u, n, o) {
           }
         ]
       );
-    }(l, t, r, n, o))
-      s.splice(Qe(s, a), 0, a);
-  return s;
+    }(s, t, r, n, o))
+      l.splice(Qe(l, a), 0, a);
+  return l;
 }
-function je(e, t, r, n, o, s, l, a) {
-  return tt((a ? r.flatMap((i) => se([
+function je(e, t, r, n, o, l, s, a) {
+  return tt((a ? r.flatMap((i) => le([
     i
-  ], n, o, s, l)) : se(r, n, o, s, l)).map((i) => (
+  ], n, o, l, s)) : le(r, n, o, l, s)).map((i) => (
     // do not move defaults
     // move only rules with a name unless they are in the base layer
     i.p & C.o && (i.n || t == C.b) ? {
@@ -580,24 +580,24 @@ function je(e, t, r, n, o, s, l, a) {
 }
 function Tt(e, t, r, n) {
   var o;
-  return o = (s, l) => {
-    let { n: a, p: i, r: d, i: u } = $e(s, l, t);
-    return r && je(a, t, r, l, i, d, u, n);
+  return o = (l, s) => {
+    let { n: a, p: i, r: d, i: u } = $e(l, s, t);
+    return r && je(a, t, r, s, i, d, u, n);
   }, Ze.set(e, o), e;
 }
 function be(e, t, r) {
   if (e[e.length - 1] != "(") {
-    let n = [], o = !1, s = !1, l = "";
+    let n = [], o = !1, l = !1, s = "";
     for (let a of e)
       if (!(a == "(" || /[~@]$/.test(a))) {
         if (a[0] == "!" && (a = a.slice(1), o = !o), a.endsWith(":")) {
           n[a == "dark:" ? "unshift" : "push"](a.slice(0, -1));
           continue;
         }
-        a[0] == "-" && (a = a.slice(1), s = !s), a.endsWith("-") && (a = a.slice(0, -1)), a && a != "&" && (l += (l && "-") + a);
+        a[0] == "-" && (a = a.slice(1), l = !l), a.endsWith("-") && (a = a.slice(0, -1)), a && a != "&" && (s += (s && "-") + a);
       }
-    l && (s && (l = "-" + l), t[0].push({
-      n: l,
+    s && (l && (s = "-" + s), t[0].push({
+      n: s,
       v: n.filter(At),
       i: o
     }));
@@ -607,24 +607,24 @@ function At(e, t, r) {
   return r.indexOf(e) == t;
 }
 let He = /* @__PURE__ */ new Map();
-function le(e) {
+function se(e) {
   let t = He.get(e);
   if (!t) {
     let r = [], n = [
       []
-    ], o = 0, s = 0, l = null, a = 0, i = (d, u = 0) => {
+    ], o = 0, l = 0, s = null, a = 0, i = (d, u = 0) => {
       o != a && (r.push(e.slice(o, a + u)), d && be(r, n)), o = a + 1;
     };
     for (; a < e.length; a++) {
       let d = e[a];
-      if (s)
-        e[a - 1] != "\\" && (s += +(d == "[") || -(d == "]"));
+      if (l)
+        e[a - 1] != "\\" && (l += +(d == "[") || -(d == "]"));
       else if (d == "[")
-        s += 1;
-      else if (l)
-        e[a - 1] != "\\" && l.test(e.slice(a)) && (l = null, o = a + RegExp.lastMatch.length);
+        l += 1;
+      else if (s)
+        e[a - 1] != "\\" && s.test(e.slice(a)) && (s = null, o = a + RegExp.lastMatch.length);
       else if (d == "/" && e[a - 1] != "\\" && (e[a + 1] == "*" || e[a + 1] == "/"))
-        l = e[a + 1] == "*" ? /^\*\// : /^[\r\n]/;
+        s = e[a + 1] == "*" ? /^\*\// : /^[\r\n]/;
       else if (d == "(")
         i(), r.push(d);
       else if (d == ":")
@@ -699,15 +699,15 @@ function p(e, t, r, n) {
   ];
 }
 function Et(e, t, r) {
-  let n = typeof t == "string" ? (o, s) => ({
-    [t]: r ? r(o, s) : o._
-  }) : t || (({ 1: o, _: s }, l, a) => ({
-    [o || a]: s
+  let n = typeof t == "string" ? (o, l) => ({
+    [t]: r ? r(o, l) : o._
+  }) : t || (({ 1: o, _: l }, s, a) => ({
+    [o || a]: l
   }));
-  return (o, s) => {
-    let l = rt(e || o[1]), a = s.theme(l, o.$$) ?? I(o.$$, l, s);
+  return (o, l) => {
+    let s = rt(e || o[1]), a = l.theme(s, o.$$) ?? I(o.$$, s, l);
     if (a != null)
-      return o._ = ze(o, 0, a), n(o, s, l);
+      return o._ = ze(o, 0, a), n(o, l, s);
   };
 }
 function z(e, t = {}, r) {
@@ -718,10 +718,10 @@ function z(e, t = {}, r) {
 }
 function Ft(e = {}, t) {
   return (r, n) => {
-    let { section: o = rt(r[0]).replace("-", "") + "Color" } = e, [s, l] = Rt(r.$$);
-    if (!s)
+    let { section: o = rt(r[0]).replace("-", "") + "Color" } = e, [l, s] = Rt(r.$$);
+    if (!l)
       return;
-    let a = n.theme(o, s) || I(s, o, n);
+    let a = n.theme(o, l) || I(l, o, n);
     if (!a || typeof a == "object")
       return;
     let {
@@ -732,7 +732,7 @@ function Ft(e = {}, t) {
       opacitySection: d = o.replace("Color", "Opacity"),
       property: u = o,
       selector: f
-    } = e, m = n.theme(d, l || "DEFAULT") || l && I(l, d, n), b = t || (({ _: x }) => {
+    } = e, m = n.theme(d, s || "DEFAULT") || s && I(s, d, n), b = t || (({ _: x }) => {
       let v = ie(u, x);
       return f ? {
         [f]: v
@@ -749,7 +749,7 @@ function Ft(e = {}, t) {
     };
     let h = b(r, n);
     if (!r.dark) {
-      let x = n.d(o, s, a);
+      let x = n.d(o, l, a);
       x && x !== a && (r._ = {
         value: H(x, {
           opacityVariable: i || void 0,
@@ -826,15 +826,15 @@ function nt({ presets: e = [], ...t }) {
       finalize: t.finalize
     }
   ])) {
-    let { preflight: o, darkMode: s = r.darkMode, darkColor: l = r.darkColor, theme: a, variants: i, rules: d, ignorelist: u, hash: f = r.hash, stringify: m = r.stringify, finalize: b } = typeof n == "function" ? n(r) : n;
+    let { preflight: o, darkMode: l = r.darkMode, darkColor: s = r.darkColor, theme: a, variants: i, rules: d, ignorelist: u, hash: f = r.hash, stringify: m = r.stringify, finalize: b } = typeof n == "function" ? n(r) : n;
     r = {
       // values defined by user or previous presets take precedence
       preflight: r.preflight !== !1 && o !== !1 && [
         ...r.preflight,
         ...k(o)
       ],
-      darkMode: s,
-      darkColor: l,
+      darkMode: l,
+      darkColor: s,
       theme: {
         ...r.theme,
         ...a,
@@ -865,11 +865,11 @@ function nt({ presets: e = [], ...t }) {
   }
   return r;
 }
-function Ie(e, t, r, n, o, s) {
-  for (let l of t) {
-    let a = r.get(l);
-    a || r.set(l, a = n(l));
-    let i = a(e, o, s);
+function Ie(e, t, r, n, o, l) {
+  for (let s of t) {
+    let a = r.get(s);
+    a || r.set(s, a = n(s));
+    let i = a(e, o, l);
     if (i)
       return i;
   }
@@ -883,20 +883,20 @@ function $t(e) {
   return Array.isArray(e) ? Te(e[0], Ce(e[1], e[2])) : Te(e, Ce(t, r));
 }
 function Te(e, t) {
-  return ot(e, (r, n, o, s) => {
-    let l = n.exec(r);
-    if (l)
+  return ot(e, (r, n, o, l) => {
+    let s = n.exec(r);
+    if (s)
       return (
         // MATCH.$_ = value
-        l.$$ = r.slice(l[0].length), l.dark = s, t(l, o)
+        s.$$ = r.slice(s[0].length), s.dark = l, t(s, o)
       );
   });
 }
 function ot(e, t) {
   let r = k(e).map(Dt);
-  return (n, o, s) => {
-    for (let l of r) {
-      let a = t(n, l, o, s);
+  return (n, o, l) => {
+    for (let s of r) {
+      let a = t(n, s, o, l);
       if (a)
         return a;
     }
@@ -951,7 +951,7 @@ function jt(e, t) {
               T
             ], /[.[]/.test(T)) {
               let L = [];
-              T.replace(/\[([^\]]+)\]|([^.[]+)/g, (P, Q, lt = Q) => L.push(lt)), T = L.shift(), R = F, F = L.join("-");
+              T.replace(/\[([^\]]+)\]|([^.[]+)/g, (P, Q, st = Q) => L.push(st)), T = L.shift(), R = F, F = L.join("-");
             }
             let M = j[T] || // two-step deref to allow extend section to reference base section
             Object.assign(Object.assign(
@@ -1013,28 +1013,28 @@ function jt(e, t) {
       }
     };
     return U;
-  }(r), o = /* @__PURE__ */ new Map(), s = [], l = /* @__PURE__ */ new Set();
+  }(r), o = /* @__PURE__ */ new Map(), l = [], s = /* @__PURE__ */ new Set();
   t.resume((i) => o.set(i, i), (i, d) => {
-    t.insert(i, s.length, d), s.push(d), l.add(i);
+    t.insert(i, l.length, d), l.push(d), s.add(i);
   });
   function a(i) {
     let d = n.f(i), u = Se(d);
-    if (u && !l.has(u)) {
-      l.add(u);
-      let f = Qe(s, i);
-      t.insert(u, f, i), s.splice(f, 0, i);
+    if (u && !s.has(u)) {
+      s.add(u);
+      let f = Qe(l, i);
+      t.insert(u, f, i), l.splice(f, 0, i);
     }
     return d.n;
   }
   return Object.defineProperties(function(d) {
     if (!o.size)
       for (let f of k(r.preflight))
-        typeof f == "function" && (f = f(n)), f && (typeof f == "string" ? je("", C.b, le(f), n, C.b, [], !1, !0) : et(f, {}, n, C.b)).forEach(a);
+        typeof f == "function" && (f = f(n)), f && (typeof f == "string" ? je("", C.b, se(f), n, C.b, [], !1, !0) : et(f, {}, n, C.b)).forEach(a);
     d = "" + d;
     let u = o.get(d);
     if (!u) {
       let f = /* @__PURE__ */ new Set();
-      for (let m of se(le(d), n))
+      for (let m of le(se(d), n))
         f.add(m.c).add(a(m));
       u = [
         ...f
@@ -1048,15 +1048,15 @@ function jt(e, t) {
     theme: n.theme,
     config: r,
     snapshot() {
-      let i = t.snapshot(), d = new Set(l), u = new Map(o), f = [
-        ...s
+      let i = t.snapshot(), d = new Set(s), u = new Map(o), f = [
+        ...l
       ];
       return () => {
-        i(), l = d, o = u, s = f;
+        i(), s = d, o = u, l = f;
       };
     },
     clear() {
-      t.clear(), l = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), s = [];
+      t.clear(), s = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), l = [];
     },
     destroy() {
       this.clear(), t.destroy();
@@ -1088,19 +1088,19 @@ function Wt(e) {
     }
   };
   function r(o) {
-    for (let { type: s, target: l } of o)
-      if (s[0] == "a")
-        n(l);
+    for (let { type: l, target: s } of o)
+      if (l[0] == "a")
+        n(s);
       else
-        for (let a of l.querySelectorAll("[class]"))
+        for (let a of s.querySelectorAll("[class]"))
           n(a);
     t.takeRecords();
   }
   function n(o) {
     var a;
-    let s, l = (a = o.getAttribute) == null ? void 0 : a.call(o, "class");
-    l && Lt(l, s = e(l)) && // Not using `target.className = ...` as that is read-only for SVGElements
-    o.setAttribute("class", s);
+    let l, s = (a = o.getAttribute) == null ? void 0 : a.call(o, "class");
+    s && Lt(s, l = e(s)) && // Not using `target.className = ...` as that is read-only for SVGElements
+    o.setAttribute("class", l);
   }
 }
 function Ut(e) {
@@ -1149,32 +1149,32 @@ function Mt(e, t = !0) {
         }, i.disconnect = Oe, i;
       } catch {
       }
-    let s = document.createElement("style");
-    s.media = "not all", document.head.prepend(s);
-    let l = [
-      he(s)
+    let l = document.createElement("style");
+    l.media = "not all", document.head.prepend(l);
+    let s = [
+      he(l)
     ], a = /* @__PURE__ */ new WeakMap();
     return {
       get target() {
-        return l[0].target;
+        return s[0].target;
       },
       snapshot() {
-        let i = l.map((d) => d.snapshot());
+        let i = s.map((d) => d.snapshot());
         return () => i.forEach((d) => d());
       },
       clear() {
-        l.forEach((i) => i.clear());
+        s.forEach((i) => i.clear());
       },
       destroy() {
-        l.forEach((i) => i.destroy());
+        s.forEach((i) => i.destroy());
       },
       insert(i, d, u) {
-        l[0].insert(i, d, u);
+        s[0].insert(i, d, u);
         let f = this.target.cssRules[d];
-        l.forEach((m, b) => b && m.target.insertRule(f.cssText, d));
+        s.forEach((m, b) => b && m.target.insertRule(f.cssText, d));
       },
       resume(i, d) {
-        return l[0].resume(i, d);
+        return s[0].resume(i, d);
       },
       connect(i) {
         let d = document.createElement("style");
@@ -1182,11 +1182,11 @@ function Mt(e, t = !0) {
         let u = he(d), { cssRules: f } = this.target;
         for (let m = 0; m < f.length; m++)
           u.target.insertRule(f[m].cssText, m);
-        l.push(u), a.set(i, u);
+        s.push(u), a.set(i, u);
       },
       disconnect(i) {
-        let d = l.indexOf(a.get(i));
-        d >= 0 && l.splice(d, 1);
+        let d = s.indexOf(a.get(i));
+        d >= 0 && s.splice(d, 1);
       }
     };
   }(), n = jt({
@@ -1194,8 +1194,8 @@ function Mt(e, t = !0) {
     // in production use short hashed class names
     hash: e.hash ?? t
   }, r), o = Wt(n);
-  return function(l) {
-    return class extends l {
+  return function(s) {
+    return class extends s {
       connectedCallback() {
         var i;
         (i = super.connectedCallback) == null || i.call(this), r.connect(this), o.observe(xe(this));
@@ -1247,11 +1247,11 @@ let Pt = [
 function Bt() {
   return ({ stringify: e }) => ({
     stringify(t, r, n) {
-      let o = "", s = Ht(t);
-      s && (o += e(s, r, n) + ";");
-      let l = It(t), a = Nt(t, r);
+      let o = "", l = Ht(t);
+      l && (o += e(l, r, n) + ";");
+      let s = It(t), a = Nt(t, r);
       for (let i of Pt)
-        l & i[1] && (o += e(i[0] + t, r, n) + ";"), a & i[1] && (o += e(t, i[0] + r, n) + ";");
+        s & i[1] && (o += e(i[0] + t, r, n) + ";"), a & i[1] && (o += e(t, i[0] + r, n) + ";");
       return o + e(t, r, n);
     }
   });
@@ -2064,10 +2064,10 @@ function $(e, t, r = 0) {
     n[r] = r + t;
   return n;
 }
-function O(e, t = "", r = 1, n = 0, o = 1, s = {}) {
+function O(e, t = "", r = 1, n = 0, o = 1, l = {}) {
   for (; n <= e; n += o)
-    s[n] = n / r + t;
-  return s;
+    l[n] = n / r + t;
+  return l;
 }
 function g(e) {
   return ({ theme: t }) => t(e);
@@ -2383,23 +2383,23 @@ let qt = {
   /* LAYOUT */
   p("aspect-", "aspectRatio"),
   c("container", (e, { theme: t }) => {
-    let { screens: r = t("screens"), center: n, padding: o } = t("container"), s = {
+    let { screens: r = t("screens"), center: n, padding: o } = t("container"), l = {
       width: "100%",
       marginRight: n && "auto",
       marginLeft: n && "auto",
-      ...l("xs")
+      ...s("xs")
     };
     for (let a in r) {
       let i = r[a];
-      typeof i == "string" && (s[Re(i)] = {
+      typeof i == "string" && (l[Re(i)] = {
         "&": {
           maxWidth: i,
-          ...l(a)
+          ...s(a)
         }
       });
     }
-    return s;
-    function l(a) {
+    return l;
+    function s(a) {
       let i = o && (typeof o == "string" ? o : o[a] || o.DEFAULT);
       if (i)
         return {
@@ -2957,10 +2957,10 @@ let qt = {
   // Transition Delay
   p("delay(?:$|-)", "transitionDelay", "transitionDelay", W),
   p("animate(?:$|-)", "animation", (e, { theme: t, h: r, e: n }) => {
-    let o = W(e), s = o.split(" "), l = t("keyframes", s[0]);
-    return l ? {
-      ["@keyframes " + (s[0] = n(r(s[0])))]: l,
-      animation: s.join(" ")
+    let o = W(e), l = o.split(" "), s = t("keyframes", l[0]);
+    return s ? {
+      ["@keyframes " + (l[0] = n(r(l[0])))]: s,
+      animation: l.join(" ")
     } : {
       animation: o
     };
@@ -3194,8 +3194,8 @@ function Be(e = "") {
       // hue-rotate can be negated
       `${n[0] == "h" ? "-?" : ""}(${e}${n})(?:$|-)`,
       n,
-      ({ 1: o, _: s }) => ({
-        [`--tw-${o}`]: k(s).map((l) => `${n}(${l})`).join(" "),
+      ({ 1: o, _: l }) => ({
+        [`--tw-${o}`]: k(l).map((s) => `${n}(${s})`).join(" "),
         ...r
       })
     ))
@@ -3320,9 +3320,9 @@ let Yt = [
   // => '.group:focus .group-focus:selector'
   [
     "((group|peer)(~[^-[]+)?)(-\\[(.+)]|[-[].+?)(\\/.+)?",
-    ({ 2: e, 3: t = "", 4: r, 5: n = "", 6: o = t }, { e: s, h: l, v: a }) => {
+    ({ 2: e, 3: t = "", 4: r, 5: n = "", 6: o = t }, { e: l, h: s, v: a }) => {
       let i = ee(n) || (r[0] == "[" ? r : a(r.slice(1)));
-      return `${(i.includes("&") ? i : "&" + i).replace(/&/g, `:merge(.${s(l(e + o))})`)}${e[0] == "p" ? "~" : " "}&`;
+      return `${(i.includes("&") ? i : "&" + i).replace(/&/g, `:merge(.${l(s(e + o))})`)}${e[0] == "p" ? "~" : " "}&`;
     }
   ],
   // direction variants
@@ -3509,7 +3509,7 @@ let Xt = {
   700: "#15803d",
   800: "#166534",
   900: "#14532d"
-}, sr = {
+}, lr = {
   50: "#ecfdf5",
   100: "#d1fae5",
   200: "#a7f3d0",
@@ -3520,7 +3520,7 @@ let Xt = {
   700: "#047857",
   800: "#065f46",
   900: "#064e3b"
-}, lr = {
+}, sr = {
   50: "#f0fdfa",
   100: "#ccfbf1",
   200: "#99f6e4",
@@ -3643,8 +3643,8 @@ let Xt = {
   yellow: or,
   lime: ir,
   green: ar,
-  emerald: sr,
-  teal: lr,
+  emerald: lr,
+  teal: sr,
   cyan: cr,
   sky: pr,
   blue: dr,
@@ -3661,7 +3661,7 @@ function yr({ disablePreflight: e } = {}) {
     disablePreflight: e
   });
 }
-var at = {}, st = {};
+var at = {}, lt = {};
 (function(e) {
   Object.defineProperty(e, "__esModule", {
     value: !0
@@ -3677,7 +3677,7 @@ var at = {}, st = {};
       t(o)
     ])) : r;
   }
-})(st);
+})(lt);
 var wr = {
   content: [],
   presets: [],
@@ -4678,10 +4678,10 @@ var wr = {
       return o;
     }
   });
-  const t = st, r = /* @__PURE__ */ n(wr);
-  function n(s) {
-    return s && s.__esModule ? s : {
-      default: s
+  const t = lt, r = /* @__PURE__ */ n(wr);
+  function n(l) {
+    return l && l.__esModule ? l : {
+      default: l
     };
   }
   const o = (0, t.cloneDeep)(r.default.theme);
@@ -4693,8 +4693,9 @@ const kr = {
   theme: {
     extend: {
       colors: {
+        category: "hsl(var(--tf-category) / <alpha-value>)",
+        label: "hsl(var(--tf-label) / <alpha-value>)",
         background: "hsl(var(--tf-background) / <alpha-value>)",
-        foreground: "hsl(var(--tf-foreground) / <alpha-value>)",
         primary: {
           DEFAULT: "hsl(var(--tf-primary) / <alpha-value>)",
           foreground: "hsl(var(--tf-primary-foreground) / <alpha-value>)"

package/lib/common/label.tsx

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 
 const labelVariants = tv({
   base: [
-    'text-sm font-medium leading-none text-primary-foreground',
+    'text-sm leading-none text-label',
     'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
   ],
 });

package/lib/components/category.tsx

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 const categoryStyle = tv({
   slots: {
     container: 'w-full space-y-4',
-    heading: 'font-tf-font text-sm font-bold text-foreground',
+    heading: 'font-tf-font text-sm text-category',
     items: 'grid gap-4',
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.1",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -43,9 +43,9 @@
     "tailwindcss": "^3.3.6",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.0.3",
-    "eslint-config-custom": "1.0.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.2.0"
+    "twintag-types": "0.2.0",
+    "eslint-config-custom": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/tailwind.config.ts

@@ -7,8 +7,9 @@ const config = {
   theme: {
     extend: {
       colors: {
+        category: 'hsl(var(--tf-category) / <alpha-value>)',
+        label: 'hsl(var(--tf-label) / <alpha-value>)',
         background: 'hsl(var(--tf-background) / <alpha-value>)',
-        foreground: 'hsl(var(--tf-foreground) / <alpha-value>)',
         primary: {
           DEFAULT: 'hsl(var(--tf-primary) / <alpha-value>)',
           foreground: 'hsl(var(--tf-primary-foreground) / <alpha-value>)',