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

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

@@ -1,43 +1,12 @@
-import { c as a } from "../../index-BNmRGtA6.js";
-const e = a(
-  ["text-slate-500", "cursor-pointer"],
-  {
-    variants: {
-      size: {
-        sm: "",
-        base: "",
-        lg: "",
-        xl: ""
-      }
-    }
-  }
-), t = a(["flex", "gap-1", "items-center"], {
-  variants: {
-    size: {
-      sm: "",
-      base: "",
-      lg: "",
-      xl: ""
-    }
-  },
-  defaultVariants: {
-    size: "base"
-  }
-}), r = a("text-[#abadc6]", {
-  variants: {
-    size: {
-      sm: ["w-3", "h-3"],
-      base: ["w-4", "h-4"],
-      lg: ["w-5", "h-5"],
-      xl: ["w-6", "h-6"]
-    }
-  },
-  defaultVariants: {
-    size: "base"
-  }
-});
+import { c as e } from "../../index-BNmRGtA6.js";
+const r = e([
+  "text-slate-500",
+  "text-md",
+  "flex",
+  "gap-2",
+  "items-center"
+]), a = e(["flex", "gap-1", "items-center"]);
 export {
-  t as breadcrumbVariants,
-  e as breadcrumbWrapperVariants,
-  r as chevronVariants
+  a as breadcrumbVariants,
+  r as breadcrumbWrapperVariants
 };

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

@@ -1,49 +1,49 @@
-import { jsx as a, Fragment as f } from "react/jsx-runtime";
-import { cn as n } from "../../../../utils/index.js";
-import { u as b, L as h } from "../../../../useBreadcrumb-BsIeMoR1.js";
-import { breadcrumbLinkVariants as c, breadcrumbLabelVariants as p, breadcrumbItemVariants as k } from "./Item.variants.js";
-const V = ({
+import { jsx as a, Fragment as p } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { u as f, L as h } from "../../../../useBreadcrumb-DMERrNkJ.js";
+import { breadcrumbLinkVariants as o, breadcrumbLabelVariants as b } from "./Item.variants.js";
+const g = ({
   isActive: r,
-  isLast: d,
-  label: s,
-  size: l,
-  target: m,
-  theme: t,
-  to: e
+  isLast: t,
+  label: n,
+  target: i,
+  theme: c,
+  to: e,
+  component: d = "a"
 }) => {
-  const { isInsideRouter: o } = b(), i = (u) => {
+  const { isInsideRouter: l } = f(), s = (u) => {
     e === "#" && u.preventDefault();
   };
   return /* @__PURE__ */ a(
     "li",
     {
-      "aria-current": d ? "page" : void 0,
-      className: n(k({ size: l })),
-      "data-theme": t,
-      children: e ? /* @__PURE__ */ a(f, { children: o ? /* @__PURE__ */ a(
+      "aria-current": t ? "page" : void 0,
+      className: "group font-medium text-inherit",
+      "data-theme": c,
+      children: e ? /* @__PURE__ */ a(p, { children: l ? /* @__PURE__ */ a(
         h,
         {
           to: e,
-          target: m,
-          className: n(c({ isActive: r })),
+          target: i,
+          className: m(o({ isActive: r })),
           "aria-disabled": r ? "true" : "false",
-          onClick: i,
-          children: s
+          onClick: s,
+          children: n
         }
       ) : /* @__PURE__ */ a(
-        "a",
+        d,
         {
           href: e,
-          target: m,
-          className: n(c({ isActive: r })),
+          target: i,
+          className: m(o({ isActive: r })),
           "aria-disabled": r ? "true" : "false",
-          onClick: i,
-          children: s
+          onClick: s,
+          children: n
         }
-      ) }) : /* @__PURE__ */ a("span", { className: n(p({ isActive: r })), children: s })
+      ) }) : /* @__PURE__ */ a("span", { className: m(b({ isActive: r })), children: n })
     }
   );
 };
 export {
-  V as Item
+  g as Item
 };

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/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,4 +1,4 @@
-import { u } from "../../../useBreadcrumb-BsIeMoR1.js";
+import { u } from "../../../useBreadcrumb-DMERrNkJ.js";
 export {
   u as useBreadcrumb
 };

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-B5MIi2tR.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"
         ]
       },
       {
@@ -160,11 +218,11 @@ const e = r(
           "colony:text-zinc-400",
           "civo:bg-white",
           "civo:border-white",
-          "civo:text-zinc-400"
+          "civo:text-civo-primary/45"
         ]
       },
       {
-        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
 };