@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/Command/components/DialogContent.js

@@ -1,37 +1,31 @@
-import { jsx as m, jsxs as c } from "react/jsx-runtime";
-import { c as p } from "../../../compiler-runtime-DA41awpA.js";
-import { forwardRef as u } from "react";
-import { C as f, a as g, b as h } from "../../../index-C6mt--X_.js";
-import { cn as b } from "../../../utils/index.js";
-import { DialogOverlay as x } from "./DialogOverlay.js";
-import { X as y } from "../../../x-Eoa9FJjA.js";
-const w = u((r, d) => {
-  const t = p.c(13);
-  let e, o, a;
-  t[0] !== r ? ({
-    className: o,
-    children: e,
-    ...a
-  } = r, t[0] = r, t[1] = e, t[2] = o, t[3] = a) : (e = t[1], o = t[2], a = t[3]);
-  let l;
-  t[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ m(x, {}), t[4] = l) : l = t[4];
-  let s;
-  t[5] !== o ? (s = b("fixed text-white left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", o), t[5] = o, t[6] = s) : s = t[6];
-  let n;
-  t[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ c(g, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white", children: [
-    /* @__PURE__ */ m(y, { className: "h-4 w-4" }),
-    /* @__PURE__ */ m("span", { className: "sr-only", children: "Close" })
-  ] }), t[7] = n) : n = t[7];
-  let i;
-  return t[8] !== e || t[9] !== a || t[10] !== d || t[11] !== s ? (i = /* @__PURE__ */ c(h, { children: [
-    l,
-    /* @__PURE__ */ c(f, { ref: d, className: s, ...a, children: [
-      e,
-      n
-    ] })
-  ] }), t[8] = e, t[9] = a, t[10] = d, t[11] = s, t[12] = i) : i = t[12], i;
-});
-w.displayName = f.displayName;
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { a as r, C as o, b as l } from "../../../index-DWyM654o.js";
+import { cn as m } from "../../../utils/index.js";
+import { DialogOverlay as p } from "./DialogOverlay.js";
+import { X as c } from "../../../x-Eoa9FJjA.js";
+const f = i(({ className: e, children: s, ...n }, d) => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ a(p, {}),
+  /* @__PURE__ */ t(
+    o,
+    {
+      ref: d,
+      className: m(
+        "fixed text-white left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        e
+      ),
+      ...n,
+      children: [
+        s,
+        /* @__PURE__ */ t(l, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white", children: [
+          /* @__PURE__ */ a(c, { className: "h-4 w-4" }),
+          /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+f.displayName = o.displayName;
 export {
-  w as DialogContent
+  f as DialogContent
 };

package/dist/components/Command/components/DialogOverlay.js

@@ -1,21 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as p } from "../../../compiler-runtime-DA41awpA.js";
+import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { O as m } from "../../../index-C6mt--X_.js";
-import { cn as n } from "../../../utils/index.js";
-const c = d((i, l) => {
-  const a = p.c(9);
-  let e, t;
-  a[0] !== i ? ({
-    className: e,
-    ...t
-  } = i, a[0] = i, a[1] = e, a[2] = t) : (e = a[1], t = a[2]);
-  let o;
-  a[3] !== e ? (o = n("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 delay-200", e), a[3] = e, a[4] = o) : o = a[4];
-  let s;
-  return a[5] !== t || a[6] !== l || a[7] !== o ? (s = /* @__PURE__ */ r(m, { ref: l, className: o, ...t }), a[5] = t, a[6] = l, a[7] = o, a[8] = s) : s = a[8], s;
-});
-c.displayName = m.displayName;
+import { O as a } from "../../../index-DWyM654o.js";
+import { cn as i } from "../../../utils/index.js";
+const m = d(({ className: t, ...e }, o) => /* @__PURE__ */ s(
+  a,
+  {
+    ref: o,
+    className: i(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 delay-200",
+      t
+    ),
+    ...e
+  }
+));
+m.displayName = a.displayName;
 export {
-  c as DialogOverlay
+  m as DialogOverlay
 };

package/dist/components/Command/contexts/Command.provider.js

@@ -1,26 +1,24 @@
-import { CommandContext as a } from "./Command.context.js";
-import { jsx as g } from "react/jsx-runtime";
-import { c as d } from "../../../compiler-runtime-DA41awpA.js";
-import { useToggle as u } from "../../../hooks/useToggle.js";
-const C = (c) => {
-  const e = d.c(11), {
-    children: s
-  } = c, [i, t] = u(!1);
-  let l;
-  e[0] !== t ? (l = (f) => t(f), e[0] = t, e[1] = l) : l = e[1];
-  const m = l;
-  let n;
-  e[2] !== t ? (n = () => t(), e[2] = t, e[3] = n) : n = e[3];
-  const p = n;
-  let o;
-  e[4] !== m || e[5] !== p || e[6] !== i ? (o = {
-    isOpen: i,
-    setOpen: m,
-    toggleOpen: p
-  }, e[4] = m, e[5] = p, e[6] = i, e[7] = o) : o = e[7];
-  let r;
-  return e[8] !== s || e[9] !== o ? (r = /* @__PURE__ */ g(a.Provider, { value: o, children: s }), e[8] = s, e[9] = o, e[10] = r) : r = e[10], r;
+import { CommandContext as s } from "./Command.context.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as e } from "react";
+import { useToggle as p } from "../../../hooks/useToggle.js";
+const f = ({ children: t }) => {
+  const [r, o] = p(!1), n = e(
+    (l) => o(l),
+    [o]
+  ), m = e(() => o(), [o]);
+  return /* @__PURE__ */ a(
+    s.Provider,
+    {
+      value: {
+        isOpen: r,
+        setOpen: n,
+        toggleOpen: m
+      },
+      children: t
+    }
+  );
 };
 export {
-  C as CommandProvider
+  f as CommandProvider
 };

package/dist/components/Counter/Counter.js

@@ -1,208 +1,211 @@
-import { jsx as m, jsxs as w } from "react/jsx-runtime";
-import { c as ne } from "../../compiler-runtime-DA41awpA.js";
-import { R as X } from "../../index-BKjcReYh.js";
-import N, { forwardRef as H, useId as re } from "react";
-import { cn as j } from "../../utils/index.js";
-import { labelVariants as oe, buttonVariants as Y, counterVariants as ie } from "./Counter.variants.js";
-import { Typography as le } from "../Typography/Typography.js";
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as j } from "../../index-BKjcReYh.js";
+import m, { forwardRef as g, useId as T, useCallback as N } from "react";
+import { cn as p } from "../../utils/index.js";
+import { labelVariants as W, buttonVariants as k, counterVariants as V } from "./Counter.variants.js";
+import { Typography as M } from "../Typography/Typography.js";
 import { P as a } from "../../index-BOE_3f_Z.js";
-function A() {
-  return A = Object.assign || function(t) {
+function v() {
+  return v = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
-      var e = arguments[o];
-      for (var n in e)
-        Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
-    return t;
-  }, A.apply(this, arguments);
+    return e;
+  }, v.apply(this, arguments);
 }
-function ae(t, o) {
-  if (t == null) return {};
-  var e = se(t, o), n, r;
+function R(e, o) {
+  if (e == null) return {};
+  var r = C(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < i.length; r++)
-      n = i[r], !(o.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (e[n] = t[n]);
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
-  return e;
+  return r;
 }
-function se(t, o) {
-  if (t == null) return {};
-  var e = {}, n = Object.keys(t), r, i;
-  for (i = 0; i < n.length; i++)
-    r = n[i], !(o.indexOf(r) >= 0) && (e[r] = t[r]);
-  return e;
+function C(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
 }
-var J = H(function(t, o) {
-  var e = t.color, n = e === void 0 ? "currentColor" : e, r = t.size, i = r === void 0 ? 24 : r, s = ae(t, ["color", "size"]);
-  return /* @__PURE__ */ N.createElement("svg", A({
+var O = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = R(e, ["color", "size"]);
+  return /* @__PURE__ */ m.createElement("svg", v({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
     height: i,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: t,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ N.createElement("line", {
+  }, l), /* @__PURE__ */ m.createElement("line", {
     x1: "5",
     y1: "12",
     x2: "19",
     y2: "12"
   }));
 });
-J.propTypes = {
+O.propTypes = {
   color: a.string,
   size: a.oneOfType([a.string, a.number])
 };
-J.displayName = "Minus";
-function G() {
-  return G = Object.assign || function(t) {
+O.displayName = "Minus";
+function b() {
+  return b = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
-      var e = arguments[o];
-      for (var n in e)
-        Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
-    return t;
-  }, G.apply(this, arguments);
+    return e;
+  }, b.apply(this, arguments);
 }
-function ce(t, o) {
-  if (t == null) return {};
-  var e = me(t, o), n, r;
+function B(e, o) {
+  if (e == null) return {};
+  var r = D(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < i.length; r++)
-      n = i[r], !(o.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (e[n] = t[n]);
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
-  return e;
+  return r;
 }
-function me(t, o) {
-  if (t == null) return {};
-  var e = {}, n = Object.keys(t), r, i;
-  for (i = 0; i < n.length; i++)
-    r = n[i], !(o.indexOf(r) >= 0) && (e[r] = t[r]);
-  return e;
+function D(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
 }
-var K = H(function(t, o) {
-  var e = t.color, n = e === void 0 ? "currentColor" : e, r = t.size, i = r === void 0 ? 24 : r, s = ce(t, ["color", "size"]);
-  return /* @__PURE__ */ N.createElement("svg", G({
+var w = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = B(e, ["color", "size"]);
+  return /* @__PURE__ */ m.createElement("svg", b({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
     height: i,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: t,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ N.createElement("line", {
+  }, l), /* @__PURE__ */ m.createElement("line", {
     x1: "12",
     y1: "5",
     x2: "12",
     y2: "19"
-  }), /* @__PURE__ */ N.createElement("line", {
+  }), /* @__PURE__ */ m.createElement("line", {
     x1: "5",
     y1: "12",
     x2: "19",
     y2: "12"
   }));
 });
-K.propTypes = {
+w.propTypes = {
   color: a.string,
   size: a.oneOfType([a.string, a.number])
 };
-K.displayName = "Plus";
-const ge = H((t, o) => {
-  const e = ne.c(46), {
-    canDecrement: n,
-    canIncrement: r,
-    className: i,
-    decrementButtonClassName: s,
-    incrementButtonClassName: W,
-    isRequired: R,
-    label: O,
-    labelWrapperClassName: T,
-    max: Q,
-    min: U,
-    name: f,
-    theme: V,
-    value: Z,
-    onChange: u
-  } = t, ee = n === void 0 ? !0 : n, te = r === void 0 ? !0 : r, P = Q === void 0 ? -1 / 0 : Q, k = U === void 0 ? 1 / 0 : U, B = re(), l = Z ?? 0;
-  let _;
-  e[0] !== l || e[1] !== k || e[2] !== u ? (_ = () => {
-    let c;
-    k === 1 / 0 ? c = l - 1 : c = Math.max(k, l - 1), u?.({
-      target: {
-        value: c
-      }
-    });
-  }, e[0] = l, e[1] = k, e[2] = u, e[3] = _) : _ = e[3];
-  const D = _;
-  let I;
-  e[4] !== l || e[5] !== P || e[6] !== u ? (I = () => {
-    let c;
-    P === -1 / 0 ? c = l + 1 : c = Math.min(P, l + 1), u?.({
-      target: {
-        value: c
-      }
-    });
-  }, e[4] = l, e[5] = P, e[6] = u, e[7] = I) : I = e[7];
-  const M = I;
-  let p;
-  e[8] !== B || e[9] !== R || e[10] !== O || e[11] !== T || e[12] !== f ? (p = O ? /* @__PURE__ */ m("div", { className: j(T), children: /* @__PURE__ */ w(le, { component: "label", htmlFor: f ?? B, variant: "labelLarge", className: j(oe()), children: [
-    "Number of nodes",
-    " ",
-    R && /* @__PURE__ */ m("span", { className: "text-red-600 dark:text-red-500", children: "*" })
-  ] }) }) : null, e[8] = B, e[9] = R, e[10] = O, e[11] = T, e[12] = f, e[13] = p) : p = e[13];
-  let d;
-  e[14] !== s ? (d = j(Y({
-    button: "rigth",
-    className: s
-  })), e[14] = s, e[15] = d) : d = e[15];
-  const S = !ee;
-  let z, C;
-  e[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = /* @__PURE__ */ m(J, { className: "w-4 h-4" }), C = /* @__PURE__ */ m(X, { children: "Decrement" }), e[16] = z, e[17] = C) : (z = e[16], C = e[17]);
-  let h;
-  e[18] !== D || e[19] !== d || e[20] !== S ? (h = /* @__PURE__ */ w("button", { type: "button", onClick: D, className: d, disabled: S, children: [
-    z,
-    C
-  ] }), e[18] = D, e[19] = d, e[20] = S, e[21] = h) : h = e[21];
-  let v;
-  e[22] !== i ? (v = j(ie({
-    className: i
-  })), e[22] = i, e[23] = v) : v = e[23];
-  const q = typeof O == "string" ? O : "number input";
-  let y;
-  e[24] !== l || e[25] !== f || e[26] !== o || e[27] !== v || e[28] !== q ? (y = /* @__PURE__ */ m("input", { ref: o, type: "number", value: l, name: f, className: v, readOnly: !0, "aria-label": q }), e[24] = l, e[25] = f, e[26] = o, e[27] = v, e[28] = q, e[29] = y) : y = e[29];
-  let b;
-  e[30] !== W ? (b = j(Y({
-    button: "left",
-    className: W
-  })), e[30] = W, e[31] = b) : b = e[31];
-  const F = !te;
-  let E, $;
-  e[32] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = /* @__PURE__ */ m(K, { className: "w-4 h-4" }), $ = /* @__PURE__ */ m(X, { children: "Increment" }), e[32] = E, e[33] = $) : (E = e[32], $ = e[33]);
-  let g;
-  e[34] !== M || e[35] !== b || e[36] !== F ? (g = /* @__PURE__ */ w("button", { type: "button", onClick: M, className: b, disabled: F, children: [
-    E,
-    $
-  ] }), e[34] = M, e[35] = b, e[36] = F, e[37] = g) : g = e[37];
-  let x;
-  e[38] !== h || e[39] !== y || e[40] !== g ? (x = /* @__PURE__ */ w("div", { className: "flex items-center", role: "presentation", children: [
-    h,
-    y,
-    g
-  ] }), e[38] = h, e[39] = y, e[40] = g, e[41] = x) : x = e[41];
-  let L;
-  return e[42] !== x || e[43] !== p || e[44] !== V ? (L = /* @__PURE__ */ w("div", { className: "flex flex-col gap-2", "data-theme": V, children: [
-    p,
-    x
-  ] }), e[42] = x, e[43] = p, e[44] = V, e[45] = L) : L = e[45], L;
-});
+w.displayName = "Plus";
+const K = g(
+  ({
+    canDecrement: e = !0,
+    canIncrement: o = !0,
+    className: r,
+    decrementButtonClassName: t,
+    incrementButtonClassName: n,
+    isRequired: i,
+    label: l,
+    labelWrapperClassName: P,
+    max: y = -1 / 0,
+    min: h = 1 / 0,
+    name: x,
+    theme: z,
+    value: I,
+    onChange: d
+  }, _) => {
+    const E = T(), s = I ?? 0, L = N(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), d?.({ target: { value: c } });
+    }, [s, h, d]), $ = N(() => {
+      let c = 0;
+      y === -1 / 0 ? c = s + 1 : c = Math.min(y, s + 1), d?.({ target: { value: c } });
+    }, [s, y, d]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-2", "data-theme": z, children: [
+      l ? /* @__PURE__ */ u("div", { className: p(P), children: /* @__PURE__ */ f(
+        M,
+        {
+          component: "label",
+          htmlFor: x ?? E,
+          variant: "labelLarge",
+          className: p(W()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600 dark:text-red-500", children: "*" })
+          ]
+        }
+      ) }) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: p(
+              k({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: _,
+            type: "number",
+            value: s,
+            name: x,
+            className: p(V({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: $,
+            className: p(
+              k({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Increment" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
 export {
-  ge as Counter
+  K as Counter
 };

package/dist/components/Counter/Counter.variants.js

@@ -1,12 +1,59 @@
 import { c as e } from "../../index-D29mdTf5.js";
-const t = e(["[&::-webkit-inner-spin-button]:appearance-none", "[&::-webkit-outer-spin-button]:appearance-none", "[-moz-appearance:textfield]", "appearance-none", "border", "border-x-0", "focus-visible:outline-none", "focus-visible:ring-transparent", "h-9", "max-w-16", "text-right", "px-3", "border-gray-300", "text-slate-800", "bg-white", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-metal-50"]), r = e(["h-9", "w-9", "flex", "items-center", "justify-center", "border", "text-slate-500", "border-gray-300", "bg-white", "cursor-pointer", "hover:bg-aurora-50", "hover:text-slate-600", "disabled:hover:bg-white", "disabled:bg-white", "disabled:text-slate-400", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-aurora-500", "dark:hover:bg-aurora-900", "dark:hover:text-aurora-500", "dark:disabled:text-metal-400", "dark:disabled:hover:bg-metal-800", "dark:disabled:bg-metal-800", "disabled:cursor-not-allowed"], {
-  variants: {
-    button: {
-      left: ["rounded-e"],
-      rigth: ["rounded-s"]
+const t = e([
+  "[&::-webkit-inner-spin-button]:appearance-none",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[-moz-appearance:textfield]",
+  "appearance-none",
+  "border",
+  "border-x-0",
+  "focus-visible:outline-none",
+  "focus-visible:ring-transparent",
+  "h-9",
+  "max-w-16",
+  "text-right",
+  "px-3",
+  "border-gray-300",
+  "text-slate-800",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50"
+]), r = e(
+  [
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
+    "border",
+    "text-slate-500",
+    "border-gray-300",
+    "bg-white",
+    "cursor-pointer",
+    "hover:bg-aurora-50",
+    "hover:text-slate-600",
+    "disabled:hover:bg-white",
+    "disabled:bg-white",
+    "disabled:text-slate-400",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "dark:text-aurora-500",
+    "dark:hover:bg-aurora-900",
+    "dark:hover:text-aurora-500",
+    "dark:disabled:text-metal-400",
+    "dark:disabled:hover:bg-metal-800",
+    "dark:disabled:bg-metal-800",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      button: {
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
+      }
     }
   }
-}), o = e(["cursor-pointer"], {
+), o = e(["cursor-pointer"], {
   variants: {
     variant: {
       default: ""