@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.46

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,13 +1,13 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { R, A as j, P as T, O as w, C as K, T as P, D as z, a as B, b as E } from "../../index-CPU02rhe.js";
-import { useRef as S, useState as q, useEffect as F } from "react";
+import { R as j, A as T, P as w, O as K, C as P, T as z, D as B, a as E, b as S } from "../../index-D6KzX_ef.js";
+import { useRef as q, useState as F, useEffect as G } from "react";
 import { Button as s } from "../Button/Button.js";
 import { cn as n } from "../../utils/index.js";
-import { useAlertDialog as G } from "./hooks/useAlertDialog.js";
-const H = ({
+import { useAlertDialog as H } from "./hooks/useAlertDialog.js";
+const I = ({
   buttonCancel: {
-    className: o,
-    text: i = "Cancel",
+    className: i,
+    text: o = "Cancel",
     ...c
   } = {},
   buttonConfirm: {
@@ -16,38 +16,40 @@ const H = ({
     ...f
   } = {},
   buttonTriggerClassName: p,
-  buttonTriggerText: u,
-  description: h,
-  showCancelButton: x = !0,
+  buttonTriggerVariant: u,
+  buttonTriggerText: h,
+  description: x,
+  showCancelButton: b = !0,
   theme: a,
-  title: b,
-  wrapperClassName: g,
-  onConfirm: C,
-  ...N
+  title: g,
+  wrapperClassName: C,
+  onConfirm: N,
+  ...y
 }) => {
-  const r = S(null), [y, k] = q(null), { isOpen: A, handleCancel: D, handleConfirm: O, handleOpen: v } = G({
-    onConfirm: C
+  const r = q(null), [k, A] = F(null), { isOpen: D, handleCancel: O, handleConfirm: v, handleOpen: R } = H({
+    onConfirm: N
   });
-  return F(() => {
+  return G(() => {
     if (!r.current || a)
       return;
     const l = r.current.closest("[data-theme]");
-    l && k(l);
-  }, []), /* @__PURE__ */ t(R, { open: A, ...N, children: [
+    l && A(l);
+  }, []), /* @__PURE__ */ t(j, { open: D, ...y, children: [
     /* @__PURE__ */ e(
-      j,
+      T,
       {
         ref: r,
         className: p,
-        text: u,
+        variant: u,
+        text: h,
         "data-theme": a,
-        onOpen: v
+        onOpen: R
       }
     ),
-    /* @__PURE__ */ t(T, { container: y, children: [
-      /* @__PURE__ */ e(w, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
+    /* @__PURE__ */ t(w, { container: k, children: [
+      /* @__PURE__ */ e(K, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
       /* @__PURE__ */ t(
-        K,
+        P,
         {
           "data-theme": a,
           className: n(
@@ -60,7 +62,7 @@ const H = ({
             "-translate-x-2/4",
             "flex",
             "flex-col",
-            "gap-8",
+            "gap-6",
             "p-8",
             "animate-in",
             "fade-in-0",
@@ -70,30 +72,30 @@ const H = ({
             "dark:bg-metal-800",
             "dark:border-metal-700",
             "dark:border-slate-700",
-            g
+            C
           ),
           children: [
-            /* @__PURE__ */ e(P, { className: "text-base text-slate-700 font-semibold", children: b }),
-            /* @__PURE__ */ e(z, { className: "text-sm text-slate-800", children: h }),
-            /* @__PURE__ */ t("div", { className: "flex flex-row gap-5 justify-end", children: [
-              x && /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e(z, { className: "text-base text-slate-700 font-semibold", children: g }),
+            /* @__PURE__ */ e(B, { className: "text-sm text-slate-800", children: x }),
+            /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 justify-end", children: [
+              b && /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
                 s,
                 {
                   type: "button",
                   variant: "secondary",
-                  className: n(o),
-                  onClick: D,
+                  className: n(i),
+                  onClick: O,
                   ...c,
-                  children: i
+                  children: o
                 }
               ) }),
-              /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(
                 s,
                 {
                   type: "button",
                   variant: "primary",
                   className: n(d),
-                  onClick: O,
+                  onClick: v,
                   ...f,
                   children: m
                 }
@@ -105,7 +107,7 @@ const H = ({
     ] })
   ] });
 };
-H.displayName = "KonstructAlertDialog";
+I.displayName = "KonstructAlertDialog";
 export {
-  H as AlertDialog
+  I as AlertDialog
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { A as e } from "../../../index-CPU02rhe.js";
+import { A as e } from "../../../index-D6KzX_ef.js";
 import "react";
 import "../../Button/Button.js";
 import "../../../utils/index.js";

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-CPU02rhe.js";
+import { A as g } from "../../../index-D6KzX_ef.js";
 export {
   g as AlertDialogTrigger
 };

package/dist/components/Badge/Badge.js

@@ -1,32 +1,29 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useRef as y, useState as g, useCallback as N, useEffect as x } from "react";
-import { S } from "../../loader-juvMSJ9L.js";
-import { cn as d } from "../../utils/index.js";
-import { buttonDismissVariants as w, badgeVariants as V } from "./Badge.variants.js";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useRef as v, useState as y, useCallback as N, useEffect as S } from "react";
+import { S as w } from "../../loader-juvMSJ9L.js";
+import { cn as u } from "../../utils/index.js";
+import { buttonDismissVariants as x, badgeVariants as V } from "./Badge.variants.js";
 import { S as D } from "../../index-BvoZGpli.js";
-import { c as L } from "../../createLucideIcon-D4r5Phnh.js";
-const j = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], E = L("x", j), M = ({
-  className: u,
+import { X as j } from "../../x-BXShoIAM.js";
+const X = ({
+  className: c,
   dismissible: p = !1,
   isSelectable: b = !0,
   label: r,
-  leftIcon: o,
-  loading: n = !1,
-  size: i,
+  leftIcon: i,
+  loading: o = !1,
+  size: n,
   variant: l,
   onClick: e,
   onDismiss: m
 }) => {
-  const s = y(null), [f, h] = g("visible"), v = N(
+  const s = v(null), [f, h] = y("visible"), g = N(
     (t) => {
       t.stopPropagation(), m?.(), h("hidden");
     },
     [m]
   );
-  return x(() => {
+  return S(() => {
     const t = new AbortController();
     return s.current?.addEventListener(
       "animationend",
@@ -35,11 +32,11 @@ const j = [
       },
       { signal: t.signal }
     ), () => t.abort();
-  }, []), /* @__PURE__ */ c(
+  }, []), /* @__PURE__ */ d(
     "span",
     {
       ref: s,
-      className: d(V({ variant: l, size: i, className: u }), {
+      className: u(V({ variant: l, size: n, className: c }), {
         "select-none": !b,
         "cursor-pointer": e
       }),
@@ -47,22 +44,22 @@ const j = [
       onClick: e,
       tabIndex: e ? 0 : void 0,
       "aria-label": e ? `${r} badge` : void 0,
-      "aria-busy": n,
+      "aria-busy": o,
       "aria-live": "polite",
       "data-state": f,
       children: [
-        n && /* @__PURE__ */ a(S, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
-        o ? /* @__PURE__ */ a(D, { className: "h-3 w-3", children: o }) : null,
+        o && /* @__PURE__ */ a(w, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
+        i ? /* @__PURE__ */ a(D, { className: "h-3 w-3", children: i }) : null,
         r,
-        p && /* @__PURE__ */ c(
+        p && /* @__PURE__ */ d(
           "button",
           {
             type: "button",
-            className: d(w({ size: i, variant: l })),
-            onClick: v,
+            className: u(x({ size: n, variant: l })),
+            onClick: g,
             "aria-label": "Dismiss",
             children: [
-              /* @__PURE__ */ a(E, { className: "h-full w-full" }),
+              /* @__PURE__ */ a(j, { className: "h-full w-full" }),
               /* @__PURE__ */ a("span", { className: "sr-only", children: "Dismiss" })
             ]
           }
@@ -72,5 +69,5 @@ const j = [
   );
 };
 export {
-  M as Badge
+  X as Badge
 };

package/dist/components/Badge/Badge.variants.js

@@ -61,7 +61,7 @@ const a = e(
         ]
       },
       size: {
-        default: "text-sm leading-4"
+        default: "text-xs leading-4"
       }
     },
     defaultVariants: {

package/dist/components/Button/Button.variants.js

@@ -1,6 +1,7 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const t = r(
+const a = r(
   [
+    "select-none",
     "border",
     "cursor-pointer",
     "disabled:pointer-events-none",
@@ -9,7 +10,7 @@ const t = r(
     "focus-visible:ring-1",
     "focus-visible:ring-ring",
     "font-semibold",
-    "gap-[7px]",
+    "gap-2",
     "inline-flex",
     "items-center",
     "justify-center",
@@ -20,22 +21,24 @@ const t = r(
     "px-4",
     "py-2",
     "text-sm",
+    "bg-aurora-500",
+    "border-aurora-500",
+    "text-metal-900",
+    "focus-visible:bg-aurora-400",
+    "hover:bg-aurora-400",
+    "hover:border-aurora-400",
     "kubefirst:border-kubefirst-primary",
     "kubefirst:bg-kubefirst-primary",
     "kubefirst:hover:bg-kubefirst-secondary",
     "kubefirst:hover:border-kubefirst-secondary",
-    "kubefirst:text-white",
-    "bg-aurora-500",
-    "border-aurora-500",
-    "text-slate-700",
-    "hover:bg-aurora-400",
-    "hover:border-aurora-400"
+    "kubefirst:text-white"
   ],
   {
     variants: {
       variant: {
         primary: "",
         secondary: ["bg-white"],
+        tertiary: [],
         danger: [
           "border-red-700",
           "bg-red-700",
@@ -43,7 +46,18 @@ const t = r(
           "hover:bg-red-800",
           "hover:border-red-800"
         ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"]
+        link: [
+          "bg-transparent",
+          "border-transparent",
+          "text-blue-600",
+          "hover:underline",
+          "hover:text-blue-700",
+          "hover:bg-transparent",
+          "hover:border-transparent",
+          "dark:text-aurora-500",
+          "dark:hover:text-aurora-500",
+          "focus-visible:bg-transparent"
+        ]
       },
       shape: {
         circle: ["rounded-full", "p-1"]
@@ -61,21 +75,29 @@ const t = r(
         large: ""
       },
       appearance: {
-        compact: [
-          "px-2",
-          "py-1",
-          "h-auto",
-          "text-[0.8125rem]",
-          "leading-5.5",
-          "h-[30px]"
-        ]
+        compact: ["px-2", "py-1", "text-[13px]", "leading-5.5", "h-7.5"]
       }
     },
     compoundVariants: [
+      {
+        variant: "primary",
+        disabled: !0,
+        class: [
+          "text-metal-900",
+          "bg-aurora-500",
+          "border-transparent",
+          "kubefirst:bg-zinc-200",
+          "kubefirst:border-zinc-200",
+          "kubefirst:text-zinc-500",
+          "text-gray-700",
+          "opacity-45"
+        ]
+      },
       {
         variant: "secondary",
         disabled: !1,
         class: [
+          "transition-colors",
           "bg-white",
           "hover:bg-white",
           "text-slate-700",
@@ -83,9 +105,11 @@ const t = r(
           "hover:text-slate-700",
           "hover:border-slate-300",
           "hover:bg-slate-50",
+          "focus-visible:bg-slate-50",
           "dark:bg-transparent",
           "dark:text-aurora-500",
           "dark:border-aurora-500",
+          "dark:focus-visible:bg-aurora-900",
           "dark:hover:bg-aurora-900",
           "dark:hover:border-aurora-500",
           "dark:hover:text-aurora-500",
@@ -98,38 +122,62 @@ const t = r(
         ]
       },
       {
-        variant: "primary",
+        variant: "secondary",
         disabled: !0,
         class: [
-          "kubefirst:bg-zinc-200",
-          "kubefirst:border-zinc-200",
+          "kubefirst:bg-white",
+          "kubefirst:border-zinc-500",
           "kubefirst:text-zinc-500",
-          "text-gray-700",
+          "border-slate-300",
+          "bg-white",
+          "text-slate-700",
+          "dark:bg-aurora-900",
+          "dark:border-aurora-500",
+          "dark:text-aurora-500",
           "opacity-45"
         ]
       },
       {
-        variant: "secondary",
+        variant: "tertiary",
+        disabled: !1,
+        class: [
+          "transition-colors",
+          "bg-transparent",
+          "border-transparent",
+          "text-slate-700",
+          "hover:bg-aurora-100",
+          "focus-visible:bg-aurora-100",
+          "hover:text-slate-700",
+          "hover:border-transparent",
+          "dark:bg-transparent",
+          "dark:text-metal-100",
+          "dark:border-transparent",
+          "dark:focus-visible:bg-green-400/15",
+          "dark:hover:bg-green-400/15",
+          "dark:hover:border-transparent",
+          "dark:hover:text-metal-100",
+          "dark:focus-visible:hover:bg-green-400/15"
+        ]
+      },
+      {
+        variant: "tertiary",
         disabled: !0,
         class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-zinc-500",
-          "kubefirst:text-zinc-500",
-          "border-slate-300/45",
+          "border-transparent",
           "bg-white",
-          "text-slate-700/45"
+          "text-slate-700",
+          "opacity-45",
+          "dark:bg-transparent",
+          "dark:border-transparent",
+          "dark:text-metal-100"
         ]
       },
       {
         variant: "danger",
         version: "alternate",
         class: [
-          "kubefirst:border-red-700",
-          "kubefirst:text-red-700",
-          "kubefirst:bg-white",
-          "kubefirst:hover:bg-red-50",
-          "border-red-700",
           "text-red-700",
+          "border-red-700",
           "bg-white",
           "hover:bg-red-50"
         ]
@@ -137,57 +185,22 @@ const t = r(
       {
         variant: "danger",
         disabled: !0,
-        class: ["text-white", "bg-red-700/45", "border-transparent"]
-      },
-      {
-        variant: "text",
-        disabled: !1,
-        version: "default",
-        class: [
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50",
-          "kubefirst:bg-white",
-          "kubefirst:border-transparent",
-          "bg-white",
-          "border-transparent",
-          "text-slate-700",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-transparent"
-        ]
-      },
-      {
-        variant: "text",
-        disabled: !1,
-        version: "alternate",
         class: [
+          "text-red-700",
+          "border-red-700",
           "bg-white",
-          "border-transparent",
-          "text-aurora-500",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-aurora-50",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:border-transparent",
-          "kubefirst:bg-white",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50"
+          "hover:bg-red-50",
+          "opacity-45"
         ]
       },
       {
-        variant: "text",
+        variant: "link",
         disabled: !0,
-        version: ["default", "alternate"],
         class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-white",
-          "kubefirst:text-zinc-400",
-          "bg-white",
-          "border-white",
-          "text-slate-700/45"
+          "bg-transparent",
+          "border-transparent",
+          "text-blue-600",
+          "opacity-45"
         ]
       },
       {
@@ -197,30 +210,21 @@ const t = r(
         class: [
           "w-8",
           "h-8",
-          "text-slate-400",
+          "text-slate-500",
           "bg-transparent",
           "border-transparent",
           "hover:border-transparent",
-          "hover:bg-aurora-500/5",
+          "hover:bg-aurora-50",
+          "focus-visible:bg-aurora-50",
           "hover:text-slate-800",
+          "focus-visible:text-slate-800",
           "[&>svg]:w-5",
           "[&>svg]:h-5",
-          "dark:text-slate-400",
+          "dark:text-metal-400",
+          "dark:focus-visible:text-aurora-500",
           "dark:hover:text-aurora-500",
-          "dark:hover:bg-aurora-900",
-          "kubefirst:text-slate-400",
-          "kubefirst:bg-transparent",
-          "kubefirst:border-transparent",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:bg-kubefirst-primary/5",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst-dark:text-slate-400",
-          "kubefirst-dark:bg-transparent",
-          "kubefirst-dark:border-transparent",
-          "kubefirst-dark:hover:border-transparent",
-          "kubefirst-dark:hover:bg-kubefirst-primary/5",
-          "kubefirst-dark:hover:text-kubefirst-primary",
-          "kubefirst-dark:hover:bg-kubefirst-primary/25"
+          "dark:hover:bg-green-400/15",
+          "dark:focus-visible:bg-green-400/15"
         ]
       },
       {
@@ -236,11 +240,15 @@ const t = r(
         disabled: !1,
         class: [
           "text-red-700",
+          "focus-visible:text-red-700",
           "hover:text-red-700",
+          "focus-visible:bg-red-50",
           "hover:bg-red-50",
-          "dark:text-red-700",
+          "dark:text-red-500",
           "dark:hover:text-red-500",
-          "dark:hover:bg-red-700/25"
+          "dark:focus-visible:text-red-500",
+          "dark:hover:bg-red-950/55",
+          "dark:focus-visible:bg-red-950/55"
         ]
       },
       {
@@ -248,13 +256,15 @@ const t = r(
         size: ["medium", "large"],
         disabled: !0,
         class: [
-          "text-slate-400",
+          "opacity-45",
+          "text-slate-500",
           "bg-transparent",
           "border-transparent",
           "w-8",
           "h-8",
           "[&>svg]:w-5",
-          "[&>svg]:h-5"
+          "[&>svg]:h-5",
+          "dark:text-metal-400"
         ]
       },
       {
@@ -273,5 +283,5 @@ const t = r(
   }
 );
 export {
-  t as buttonVariants
+  a as buttonVariants
 };