@konstructio/ui 0.0.12-alpha.2 → 0.0.12-alpha.20

package/dist/components/NumberInput/NumberInput.js

@@ -1,44 +1,44 @@
 import { jsxs as y, jsx as u } from "react/jsx-runtime";
-import { R as j } from "../../index-Z1voPZOH.js";
-import p, { forwardRef as d, useId as E, useState as T, useCallback as x } from "react";
-import { cn as h } from "../../utils/index.js";
-import { labelVariants as $, buttonVariants as P, numberInputVariants as L } from "./NumberInput.variants.js";
-import { P as a } from "../../index-C5psggHV.js";
-import { useTheme as W } from "../../contexts/theme.hook.js";
-function v() {
-  return v = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
+import { R as w } from "../../index-CbTU3cnP.js";
+import p, { forwardRef as d, useId as _, useCallback as j } from "react";
+import { cn as v } from "../../utils/index.js";
+import { labelVariants as E, buttonVariants as x, numberInputVariants as T } from "./NumberInput.variants.js";
+import { P as s } from "../../index-C5psggHV.js";
+import { useTheme as $ } from "../../contexts/theme.hook.js";
+function h() {
+  return h = Object.assign || function(e) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, v.apply(this, arguments);
+  }, h.apply(this, arguments);
 }
-function V(e, o) {
+function L(e, i) {
   if (e == null) return {};
-  var r = M(e, o), t, n;
+  var r = W(e, i), t, n;
   if (Object.getOwnPropertySymbols) {
-    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]);
+    var o = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < o.length; n++)
+      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
   return r;
 }
-function M(e, o) {
+function W(e, i) {
   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]);
+  var r = {}, t = Object.keys(e), n, o;
+  for (o = 0; o < t.length; o++)
+    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var O = d(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, f = V(e, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", v({
-    ref: o,
+var g = d(function(e, i) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = L(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", h({
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -52,45 +52,45 @@ var O = d(function(e, o) {
     y2: "12"
   }));
 });
-O.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+g.propTypes = {
+  color: s.string,
+  size: s.oneOfType([s.string, s.number])
 };
-O.displayName = "Minus";
+g.displayName = "Minus";
 function b() {
   return b = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
   }, b.apply(this, arguments);
 }
-function R(e, o) {
+function V(e, i) {
   if (e == null) return {};
-  var r = S(e, o), t, n;
+  var r = M(e, i), t, n;
   if (Object.getOwnPropertySymbols) {
-    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]);
+    var o = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < o.length; n++)
+      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
   return r;
 }
-function S(e, o) {
+function M(e, i) {
   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]);
+  var r = {}, t = Object.keys(e), n, o;
+  for (o = 0; o < t.length; o++)
+    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var g = d(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, f = R(e, ["color", "size"]);
+var O = d(function(e, i) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = V(e, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", b({
-    ref: o,
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -109,40 +109,40 @@ var g = d(function(e, o) {
     y2: "12"
   }));
 });
-g.propTypes = {
-  color: a.string,
-  size: a.oneOfType([a.string, a.number])
+O.propTypes = {
+  color: s.string,
+  size: s.oneOfType([s.string, s.number])
 };
-g.displayName = "Plus";
-const J = d(
+O.displayName = "Plus";
+const G = d(
   ({
     className: e,
-    init: o,
-    label: r,
-    max: t = -1 / 0,
-    min: n = 1 / 0,
-    name: i,
-    theme: f,
-    onChange: s
-  }, k) => {
-    const { theme: I } = W(), m = f ?? I, N = E(), [c, w] = T(() => o || 0), z = x(() => {
-      let l = 0;
-      n === 1 / 0 ? l = c - 1 : l = Math.max(n, c - 1), w(l), s == null || s(l);
-    }, [c, n, s]), _ = x(() => {
-      let l = 0;
-      t === -1 / 0 ? l = c + 1 : l = Math.min(t, c + 1), w(l), s == null || s(l);
-    }, [c, t, s]);
+    label: i,
+    max: r = -1 / 0,
+    min: t = 1 / 0,
+    name: n,
+    theme: o,
+    value: f,
+    onChange: l
+  }, P) => {
+    const { theme: k } = $(), m = o ?? k, I = _(), a = f ?? 0, N = j(() => {
+      let c = 0;
+      t === 1 / 0 ? c = a - 1 : c = Math.max(t, a - 1), l == null || l({ target: { value: c } });
+    }, [a, t, l]), z = j(() => {
+      let c = 0;
+      r === -1 / 0 ? c = a + 1 : c = Math.min(r, a + 1), l == null || l({ target: { value: c } });
+    }, [a, r, l]);
     return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1", children: [
-      r ? /* @__PURE__ */ u(
+      i ? /* @__PURE__ */ u(
         "label",
         {
-          htmlFor: i ?? N,
-          className: h(
-            $({
+          htmlFor: n ?? I,
+          className: v(
+            E({
               theme: m
             })
           ),
-          children: r
+          children: i
         }
       ) : null,
       /* @__PURE__ */ y("div", { className: "flex items-center", role: "presentation", children: [
@@ -150,41 +150,41 @@ const J = d(
           "button",
           {
             type: "button",
-            onClick: z,
-            className: h(
-              P({ theme: m, button: "rigth" })
+            onClick: N,
+            className: v(
+              x({ theme: m, button: "rigth" })
             ),
             children: [
-              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(j, { children: "Decrement" })
+              /* @__PURE__ */ u(g, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(w, { children: "Decrement" })
             ]
           }
         ),
         /* @__PURE__ */ u(
           "input",
           {
-            ref: k,
+            ref: P,
             type: "number",
-            value: c,
-            name: i,
-            className: h(
-              L({ className: e, theme: m })
+            value: a,
+            name: n,
+            className: v(
+              T({ className: e, theme: m })
             ),
             readOnly: !0,
-            "aria-label": r
+            "aria-label": typeof i == "string" ? i : "number input"
           }
         ),
         /* @__PURE__ */ y(
           "button",
           {
             type: "button",
-            onClick: _,
-            className: h(
-              P({ theme: m, button: "left" })
+            onClick: z,
+            className: v(
+              x({ theme: m, button: "left" })
             ),
             children: [
-              /* @__PURE__ */ u(g, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(j, { children: "Increment" })
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(w, { children: "Increment" })
             ]
           }
         )
@@ -193,5 +193,5 @@ const J = d(
   }
 );
 export {
-  J as NumberInput
+  G as NumberInput
 };

package/dist/components/NumberInput/NumberInput.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
+const n = e(
   [
     "[&::-webkit-inner-spin-button]:appearance-none",
     "[&::-webkit-outer-spin-button]:appearance-none",
@@ -9,14 +9,16 @@ const t = e(
     "border-x-0",
     "focus-visible:outline-none",
     "focus-visible:ring-transparent",
-    "p-1",
-    "text-center"
+    "h-9",
+    "max-w-16",
+    "text-right",
+    "px-3"
   ],
   {
     variants: {
       theme: {
-        colony: ["border-red-700", "text-red-700"],
-        kubefirst: ["border-kubefirst-primary", "text-kubefirst-primary"],
+        colony: [],
+        kubefirst: [],
         civo: ""
       }
     },
@@ -25,30 +27,32 @@ const t = e(
     }
   }
 ), a = e(
-  ["p-2", "items-center", "justify-center", "border"],
+  [
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
+    "border",
+    "text-slate-400"
+  ],
   {
     variants: {
       theme: {
-        colony: ["border-red-700", "text-red-700", "hover:bg-red-50"],
-        kubefirst: [
-          "border-kubefirst-primary",
-          "text-kubefirst-primary",
-          "hover:text-kubefirst-secondary",
-          "hover:border-kubefirst-secondary",
-          "hover:bg-purple-100"
-        ],
+        colony: [],
+        kubefirst: [],
         civo: ""
       },
       button: {
-        left: ["rounded-e-sm"],
-        rigth: ["rounded-s-sm"]
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
       }
     },
     defaultVariants: {
       theme: "kubefirst"
     }
   }
-), n = e(["pl-1", "text-base", "cursor-pointer"], {
+), r = e(["cursor-pointer"], {
   variants: {
     variant: {
       default: ""
@@ -66,6 +70,6 @@ const t = e(
 });
 export {
   a as buttonVariants,
-  n as labelVariants,
-  t as numberInputVariants
+  r as labelVariants,
+  n as numberInputVariants
 };

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as V, T as v, a as T, b as c } from "../../index-C6WtlN_F.js";
+import { R as V, T as v, a as T, b as c } from "../../index-BzaHYXkt.js";
 import { forwardRef as b, useRef as j, useState as k, useImperativeHandle as w, useEffect as y, useCallback as C } from "react";
 import { cn as t } from "../../utils/index.js";
 import { rangeOutsideVariants as S, trackVariants as $, thumbVariants as i, rangeVariants as E } from "./Range.variants.js";

package/dist/components/Sidebar/Sidebar.variants.js

@@ -11,7 +11,8 @@ const r = a(
     "px-4",
     "relative",
     "transition-all",
-    "w-[256px]"
+    "w-[72px]",
+    "md:w-[256px]"
   ],
   {
     variants: {

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,29 +1,21 @@
 import { c as t } from "../../../../index-BNmRGtA6.js";
-const s = t(
+const o = t(
   [
-    "px-4",
-    "py-5",
+    "md:px-4",
+    "md:py-5",
     "flex",
     "flex-col",
-    "items-center",
-    "items-center",
     "justify-center",
     "gap-1",
     "group",
     "relative",
     "mb-8",
-    "[&>span]:text-gray-100",
-    "[&>span]:text-xs",
-    "[&>span]:font-semibold",
-    "[&>span]:pl-14",
-    "[&>span]:-mt-2",
+    "[&>p]:pl-14",
+    "[&>p]:-mt-2",
     "[&>img]:pt-3",
-    "[&>*>span]:text-gray-100",
-    "[&>*>span]:text-xs",
-    "[&>*>span]:font-semibold",
-    "[&>*>span]:absolute",
-    "[&>*>span]:bottom-0",
-    "[&>*>span]:-mt-2",
+    "[&>*>p]:absolute",
+    "[&>*>p]:bottom-0",
+    "[&>*>p]:-mt-2",
     "[&>*>img]:pt-3",
     "cursor-pointer"
   ],
@@ -41,5 +33,5 @@ const s = t(
   }
 );
 export {
-  s as logoVariants
+  o as logoVariants
 };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const e = t(["flex", "flex-col"], {
+import { c as a } from "../../../../index-BNmRGtA6.js";
+const e = a(["flex", "flex-col", "gap-1"], {
   variants: {
     theme: {
       colony: "",

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js

@@ -1,5 +1,5 @@
-import { c as e } from "../../../../index-BNmRGtA6.js";
-const a = e(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const a = t(
   [
     "[&>a]:flex",
     "[&>a]:gap-2",
@@ -11,9 +11,10 @@ const a = e(
     "font-normal",
     "font-normal",
     "gap-2",
-    "hover:rounded-xl",
-    "px-4",
-    "py-2.5",
+    "rounded-xl",
+    "md:px-4",
+    "md:py-2.5",
+    "p-2",
     "text-black",
     "w-full"
   ],

package/dist/components/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { R as v, T, b as V } from "../../index-C6WtlN_F.js";
+import { R as v, T, b as V } from "../../index-BzaHYXkt.js";
 import { forwardRef as b, useRef as R, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
 import { cn as a } from "../../utils/index.js";
 import { trackVariants as y, thumbVariants as C, sliderVariants as S } from "./Slider.variants.js";

package/dist/components/Switch/Switch.js

@@ -4,7 +4,7 @@ import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeH
 import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
 import { u as O } from "../../index-B_6_jmOO.js";
 import { u as V, a as D } from "../../index-4ecjw_Aj.js";
-import { P as g } from "../../index-BTeAm7mx.js";
+import { P as g } from "../../index-D7QNmo_D.js";
 import { cn as x } from "../../utils/index.js";
 import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
 import { useTheme as W } from "../../contexts/theme.hook.js";

package/dist/components/Switch/Switch.variants.js

@@ -1,8 +1,8 @@
 import { c as t } from "../../index-BNmRGtA6.js";
 const e = t(
   [
-    "w-12",
-    "h-7",
+    "w-[44px]",
+    "h-[22px]",
     "flex",
     "items-center",
     "rounded-full",
@@ -28,8 +28,8 @@ const e = t(
 ), r = t(
   [
     "block",
-    "w-6",
-    "h-6",
+    "w-[18px]",
+    "h-[18px]",
     "bg-white",
     "rounded-full",
     "shadow-md",

package/dist/components/Table/Table.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as p } from "../../utils/index.js";
+import { tableVariants as f } from "./Table.variants.js";
+import { Head as s } from "./components/Head.js";
+import { Row as l } from "./components/Row.js";
+import { Filter as n } from "./components/Filter.js";
+import { Body as c } from "./components/Body.js";
+import { useTheme as d } from "../../contexts/theme.hook.js";
+const o = ({ children: r, className: t, theme: m, ...e }) => {
+  const { theme: i } = d();
+  return /* @__PURE__ */ a(
+    "table",
+    {
+      className: p(
+        f({
+          className: t,
+          theme: m ?? i
+        })
+      ),
+      ...e,
+      children: r
+    }
+  );
+};
+o.Head = s;
+o.Row = l;
+o.Filter = n;
+o.Body = c;
+export {
+  o as Table
+};

package/dist/components/Table/Table.variants.js

@@ -0,0 +1,78 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t(
+  [
+    "table-auto",
+    "w-full",
+    "border-collapse",
+    "border-spacing-0",
+    "rounded",
+    "shadow-sm"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), a = t(
+  [
+    "h-8",
+    "text-inherit",
+    "[&>td]:py-3",
+    "[&>td]:px-4",
+    "text-slate-700",
+    "hover:bg-zinc-100",
+    "hover:cursor-pointer"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      isSelected: {
+        true: "bg-purple-50",
+        false: ""
+      }
+    }
+  }
+), o = t(
+  [
+    "h-[18px]",
+    "bg-slate-100",
+    "[&>tr>th]:py-3",
+    "[&>tr>th]:px-4",
+    "[&>tr>th]:uppercase",
+    "text-left"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      }
+    }
+  }
+), s = t([], {
+  variants: {
+    theme: {
+      kubefirst: "",
+      colony: "",
+      civo: ""
+    }
+  }
+});
+export {
+  s as bodyVariants,
+  o as headVariants,
+  a as rowVariants,
+  r as tableVariants
+};

package/dist/components/Table/components/Body.js

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import { bodyVariants as n } from "../Table.variants.js";
+import { cn as i } from "../../../utils/index.js";
+import { useTheme as p } from "../../../contexts/theme.hook.js";
+const d = ({
+  children: o,
+  className: t,
+  theme: e,
+  ...m
+}) => {
+  const { theme: r } = p();
+  return /* @__PURE__ */ s(
+    "tbody",
+    {
+      className: i(
+        n({
+          className: t,
+          theme: e ?? r
+        })
+      ),
+      ...m,
+      children: o
+    }
+  );
+};
+export {
+  d as Body
+};

package/dist/components/Table/components/Filter.js

@@ -0,0 +1,9 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Input as i } from "../../Input/Input.js";
+const o = ({ children: s, ...r }) => /* @__PURE__ */ t("div", { className: "flex px-4 py-6 rounded-t", children: [
+  /* @__PURE__ */ e(i, { className: "!w-1/3", ...r }),
+  /* @__PURE__ */ e("div", { className: "w-1/4 flex justify-end", children: s })
+] });
+export {
+  o as Filter
+};

package/dist/components/Table/components/Head.js

@@ -0,0 +1,28 @@
+import { jsx as a } from "react/jsx-runtime";
+import { headVariants as s } from "../Table.variants.js";
+import { cn as h } from "../../../utils/index.js";
+import { useTheme as n } from "../../../contexts/theme.hook.js";
+const d = ({
+  children: e,
+  className: t,
+  theme: m,
+  ...o
+}) => {
+  const { theme: r } = n();
+  return /* @__PURE__ */ a(
+    "thead",
+    {
+      className: h(
+        s({
+          className: t,
+          theme: m ?? r
+        })
+      ),
+      ...o,
+      children: e
+    }
+  );
+};
+export {
+  d as Head
+};