@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/components/Breadcrumb/components/Item/Item.variants.js

@@ -1,64 +1,52 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const i = t(
-  ["group", "font-semibold", "text-inherit"],
+import { c as e } from "../../../../index-BNmRGtA6.js";
+const r = e(
+  ["text-sm", "leading-5", "text-gray-400"],
   {
     variants: {
-      size: {
-        sm: "text-xs",
-        base: "text-sm",
-        lg: "text-base",
-        xl: "text-lg"
+      isActive: {
+        true: "",
+        false: "cursor-auto"
       }
     },
     defaultVariants: {
-      size: "base"
-    }
-  }
-), o = t(["text-inherit"], {
-  variants: {
-    isActive: {
-      true: "",
-      false: ["text-slate-400", "cursor-auto"]
-    }
-  },
-  defaultVariants: {
-    isActive: !0
-  },
-  compoundVariants: [
-    {
-      isActive: !0,
-      class: [
-        "group-focus-within:no-underline",
-        "group-focus-within:outline",
-        "group-focus-within:outline-2",
-        "group-focus-within:outline-offset-4",
-        "group-focus-within:outline-slate-500",
-        "group-focus-within:rounded-sm",
-        "group-hover:rounded-sm",
-        "hover:no-underline",
-        "hover:text-slate-500"
-      ]
+      isActive: !0
     },
-    {
-      isActive: void 0,
-      class: [
-        "group-focus-within:no-underline",
-        "group-focus-within:outline",
-        "group-focus-within:outline-2",
-        "group-focus-within:outline-offset-4",
-        "group-focus-within:outline-slate-500",
-        "group-focus-within:rounded-sm",
-        "group-hover:rounded-sm",
-        "hover:no-underline",
-        "hover:text-slate-500"
-      ]
-    }
-  ]
-}), s = t(["text-inherit"], {
+    compoundVariants: [
+      {
+        isActive: !0,
+        class: [
+          "group-[&:has(:focus-visible)]:no-underline",
+          "group-[&:has(:focus-visible)]:outline-2",
+          "group-[&:has(:focus-visible)]:outline-offset-6",
+          "group-[&:has(:focus-visible)]:outline-gray-500",
+          "group-[&:has(:focus-visible)]:text-gray-500",
+          "group-[&:has(:focus-visible)]:rounded-xs",
+          "group-hover:rounded-xs",
+          "hover:no-underline",
+          "hover:text-gray-500"
+        ]
+      },
+      {
+        isActive: void 0,
+        class: [
+          "group-[&:has(:focus-visible)]:no-underline",
+          "group-[&:has(:focus-visible)]:outline-2",
+          "group-[&:has(:focus-visible)]:outline-offset-6",
+          "group-[&:has(:focus-visible)]:outline-gray-500",
+          "group-[&:has(:focus-visible)]:text-gray-500",
+          "group-[&:has(:focus-visible)]:rounded-xs",
+          "group-hover:rounded-xs",
+          "hover:no-underline",
+          "hover:text-gray-500"
+        ]
+      }
+    ]
+  }
+), o = e(["text-sm", "leading-5"], {
   variants: {
     isActive: {
-      true: "",
-      false: ["text-slate-400"]
+      true: "text-gray-500",
+      false: ["text-gray-400", "cursor-default"]
     }
   },
   defaultVariants: {
@@ -66,7 +54,6 @@ const i = t(
   }
 });
 export {
-  i as breadcrumbItemVariants,
-  s as breadcrumbLabelVariants,
-  o as breadcrumbLinkVariants
+  o as breadcrumbLabelVariants,
+  r as breadcrumbLinkVariants
 };

package/dist/components/Button/Button.js

@@ -1,38 +1,42 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { S as u } from "../../index-Bk324h27.js";
-import { cn as c } from "../../utils/index.js";
-import { buttonVariants as l } from "./Button.variants.js";
-const x = i(
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { S as l } from "../../index-tIydFizp.js";
+import { cn as x } from "../../utils/index.js";
+import { buttonVariants as B } from "./Button.variants.js";
+const C = c(
   ({
-    className: t,
-    variant: r,
-    theme: m,
-    size: a,
-    version: f,
+    appearance: t,
+    asChild: r = !1,
+    className: m,
     disabled: o = !1,
-    asChild: n = !1,
-    ...p
-  }, s) => /* @__PURE__ */ e(
-    n ? u : "button",
+    shape: a,
+    size: f,
+    theme: n,
+    variant: p,
+    version: s,
+    ...e
+  }, i) => /* @__PURE__ */ u(
+    r ? l : "button",
     {
-      ref: s,
-      "data-theme": m,
-      className: c(
-        l({
-          variant: r,
+      ref: i,
+      "data-theme": n,
+      className: x(
+        B({
+          appearance: t,
+          className: m,
           disabled: o,
-          size: a,
-          className: t,
-          version: f
+          shape: a,
+          size: f,
+          variant: p,
+          version: s
         })
       ),
       disabled: o,
-      ...p
+      ...e
     }
   )
 );
-x.displayName = "Button";
+C.displayName = "Button";
 export {
-  x as Button
+  C as Button
 };

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

@@ -1,5 +1,5 @@
 import { c as r } from "../../index-BNmRGtA6.js";
-const e = r(
+const o = r(
   [
     "border",
     "cursor-pointer",
@@ -9,7 +9,7 @@ const e = r(
     "focus-visible:ring-1",
     "focus-visible:ring-ring",
     "font-semibold",
-    "gap-2",
+    "gap-[7px]",
     "inline-flex",
     "items-center",
     "justify-center",
@@ -17,7 +17,8 @@ const e = r(
     "transition-colors",
     "whitespace-nowrap",
     "h-10",
-    "p-4",
+    "px-4",
+    "py-2",
     "text-sm",
     "border-kubefirst-primary",
     "bg-kubefirst-primary",
@@ -38,13 +39,25 @@ const e = r(
         primary: ["text-white"],
         secondary: ["bg-white"],
         danger: [
-          "border-red-600",
-          "bg-red-600",
+          "border-red-700",
+          "bg-red-700",
           "text-white",
-          "hover:bg-red-700",
-          "hover:border-red-700"
+          "hover:bg-red-800",
+          "hover:border-red-800",
+          "colony:border-red-700",
+          "colony:bg-red-700",
+          "colony:text-white",
+          "colony:hover:bg-red-800",
+          "colony:hover:border-red-800",
+          "civo:border-red-700",
+          "civo:bg-red-700",
+          "civo:text-white",
+          "civo:hover:bg-red-800",
+          "civo:hover:border-red-800"
         ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"],
+        text: ["bg-transparent", "border-transparent", "text-slate-500"]
+      },
+      shape: {
         circle: ["rounded-full", "p-1"]
       },
       version: {
@@ -58,6 +71,16 @@ const e = r(
       size: {
         medium: "",
         large: ""
+      },
+      appearance: {
+        compact: [
+          "px-2",
+          "py-1",
+          "h-auto",
+          "text-[0.8125rem]",
+          "leading-[1.375rem]",
+          "h-[30px]"
+        ]
       }
     },
     compoundVariants: [
@@ -78,10 +101,11 @@ const e = r(
           "colony:hover:bg-pink-50",
           "civo:bg-white",
           "civo:hover:bg-white",
-          "civo:text-[#324154]",
-          "civo:border-[#cbd5e0]",
-          "civo:hover:text-[#5d6776]",
-          "civo:hover:border-[#d6dde6]"
+          "civo:text-slate-700",
+          "civo:border-slate-300",
+          "civo:hover:text-slate-700",
+          "civo:hover:border-slate-300",
+          "civo:hover:bg-slate-50"
         ]
       },
       {
@@ -94,15 +118,49 @@ const e = r(
           "colony:bg-zinc-200",
           "colony:border-zinc-200",
           "colony:text-zinc-500",
-          "civo:bg-zinc-200",
-          "civo:border-zinc-200",
-          "civo:text-zinc-500"
+          "civo:bg-civo-primary/45",
+          "civo:border-civo-primary/5",
+          "civo:text-white"
         ]
       },
       {
         variant: "secondary",
         disabled: !0,
-        class: ["bg-white", "border-zinc-500", "text-zinc-500"]
+        class: [
+          "bg-white",
+          "border-zinc-500",
+          "text-zinc-500",
+          "civo:border-slate-300/45",
+          "civo:bg-white",
+          "civo:text-slate-700/45"
+        ]
+      },
+      {
+        variant: "danger",
+        version: "alternate",
+        class: [
+          "border-red-700",
+          "text-red-700",
+          "bg-white",
+          "hover:bg-red-50",
+          "colony:border-red-700",
+          "colony:text-red-700",
+          "colony:bg-white",
+          "colony:hover:bg-red-50",
+          "civo:border-red-700",
+          "civo:text-red-700",
+          "civo:bg-white",
+          "civo:hover:bg-red-50"
+        ]
+      },
+      {
+        variant: "danger",
+        disabled: !0,
+        class: [
+          "civo:text-white",
+          "civo:bg-red-700/45",
+          "civo:border-transparent"
+        ]
       },
       {
         variant: "text",
@@ -121,7 +179,7 @@ const e = r(
           "civo:border-transparent",
           "civo:hover:border-transparent",
           "civo:hover:text-civo-primary",
-          "civo:hover:bg-blue-50"
+          "civo:hover:bg-transparent"
         ]
       },
       {
@@ -164,7 +222,7 @@ const e = r(
         ]
       },
       {
-        variant: "circle",
+        shape: "circle",
         size: "medium",
         disabled: !1,
         class: [
@@ -176,16 +234,12 @@ const e = r(
           "hover:text-kubefirst-primary",
           "w-8",
           "h-8",
-          "[&>svg]:w-5",
-          "[&>svg]:h-5",
           "colony:text-slate-400",
           "colony:bg-transparent",
           "colony:border-transparent",
           "colony:hover:border-transparent",
           "colony:hover:bg-colony-primary/5",
           "colony:hover:text-colony-primary",
-          "colony:w-8",
-          "colony:h-8",
           "colony:[&>svg]:w-5",
           "colony:[&>svg]:h-5",
           "civo:text-slate-400",
@@ -194,14 +248,12 @@ const e = r(
           "civo:hover:border-transparent",
           "civo:hover:bg-civo-primary/5",
           "civo:hover:text-civo-primary",
-          "civo:w-8",
-          "civo:h-8",
           "civo:[&>svg]:w-5",
           "civo:[&>svg]:h-5"
         ]
       },
       {
-        variant: "circle",
+        shape: "circle",
         size: "large",
         disabled: !1,
         class: [
@@ -238,7 +290,41 @@ const e = r(
         ]
       },
       {
-        variant: "circle",
+        variant: "danger",
+        shape: "circle",
+        size: "large",
+        disabled: !1,
+        class: [
+          "text-red-700",
+          "hover:text-red-700",
+          "hover:bg-red-50",
+          "colony:text-red-700",
+          "colony:hover:text-red-700",
+          "colony:hover:bg-red-50",
+          "civo:text-red-700",
+          "civo:hover:text-red-700",
+          "civo:hover:bg-red-50"
+        ]
+      },
+      {
+        variant: "danger",
+        shape: "circle",
+        size: "medium",
+        disabled: !1,
+        class: [
+          "text-red-700",
+          "hover:text-red-700",
+          "hover:bg-red-50",
+          "colony:text-red-700",
+          "colony:hover:text-red-700",
+          "colony:hover:bg-red-50",
+          "civo:text-red-700",
+          "civo:hover:text-red-700",
+          "civo:hover:bg-red-50"
+        ]
+      },
+      {
+        shape: "circle",
         size: "medium",
         disabled: !0,
         class: [
@@ -269,10 +355,11 @@ const e = r(
     defaultVariants: {
       variant: "primary",
       version: "default",
-      disabled: !1
+      disabled: !1,
+      size: "medium"
     }
   }
 );
 export {
-  e as buttonVariants
+  o as buttonVariants
 };