@konstructio/ui 0.1.3 → 0.1.5

package/dist/{Breadcrumb-DzavonoC.js → Breadcrumb-BiiOnn0p.js}

@@ -3,7 +3,7 @@ import { t as x } from "./prop-types-qsAjMBb1.js";
 import { t as y } from "./utils-DnIJruo0.js";
 import { breadcrumbVariants as S, breadcrumbWrapperVariants as z } from "./components/Breadcrumb/Breadcrumb.variants.js";
 import { BackButton as C } from "./components/Breadcrumb/components/BackButton/BackButton.js";
-import { t as P } from "./CollapsedSteps-CkMuzOHx.js";
+import { t as P } from "./CollapsedSteps-Dy2I7XDd.js";
 import { Item as $ } from "./components/Breadcrumb/components/Item/Item.js";
 import b, { Fragment as k, forwardRef as E, useId as L } from "react";
 import { Fragment as R, jsx as i, jsxs as d } from "react/jsx-runtime";

package/dist/{CollapsedSteps-CkMuzOHx.js → CollapsedSteps-Dy2I7XDd.js}

@@ -1,43 +1,43 @@
-import { o as g } from "./rolldown-runtime-B28h4lGi.js";
-import { a as h, n as v, r as u, t as y } from "./dist-D0f-mfFj.js";
+import { o as h } from "./rolldown-runtime-B28h4lGi.js";
+import { a as g, n as v, r as d, t as y } from "./dist-D0f-mfFj.js";
 import { t as b } from "./prop-types-qsAjMBb1.js";
 import { n as x, t as w } from "./useBreadcrumb-Ta3_czcd.js";
-import { t as d } from "./utils-DnIJruo0.js";
+import { t as u } from "./utils-DnIJruo0.js";
 import l, { forwardRef as O } from "react";
-import { jsx as a, jsxs as k } from "react/jsx-runtime";
-var c = /* @__PURE__ */ g(b());
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+var c = /* @__PURE__ */ h(b());
 function m() {
   return m = Object.assign || function(e) {
-    for (var n = 1; n < arguments.length; n++) {
-      var o = arguments[n];
+    for (var a = 1; a < arguments.length; a++) {
+      var o = arguments[a];
       for (var r in o) Object.prototype.hasOwnProperty.call(o, r) && (e[r] = o[r]);
     }
     return e;
   }, m.apply(this, arguments);
 }
-function j(e, n) {
+function j(e, a) {
   if (e == null) return {};
-  var o = N(e, n), r, t;
+  var o = N(e, a), r, t;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (t = 0; t < i.length; t++)
-      r = i[t], !(n.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (t = 0; t < n.length; t++)
+      r = n[t], !(a.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
   }
   return o;
 }
-function N(e, n) {
+function N(e, a) {
   if (e == null) return {};
-  for (var o = {}, r = Object.keys(e), t, i = 0; i < r.length; i++)
-    t = r[i], !(n.indexOf(t) >= 0) && (o[t] = e[t]);
+  for (var o = {}, r = Object.keys(e), t, n = 0; n < r.length; n++)
+    t = r[n], !(a.indexOf(t) >= 0) && (o[t] = e[t]);
   return o;
 }
-var p = O(function(e, n) {
-  var o = e.color, r = o === void 0 ? "currentColor" : o, t = e.size, i = t === void 0 ? 24 : t, s = j(e, ["color", "size"]);
+var p = O(function(e, a) {
+  var o = e.color, r = o === void 0 ? "currentColor" : o, t = e.size, n = t === void 0 ? 24 : t, s = j(e, ["color", "size"]);
   return /* @__PURE__ */ l.createElement("svg", m({
-    ref: n,
+    ref: a,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: n,
+    height: n,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: r,
@@ -63,44 +63,44 @@ p.propTypes = {
   size: c.default.oneOfType([c.default.string, c.default.number])
 };
 p.displayName = "MoreHorizontal";
-var f = d("flex w-full items-center gap-1 px-4 py-1.5 text-sm font-semibold outline-none", "text-gray-600 hover:bg-gray-50 focus:bg-gray-50 hover:cursor-pointer", "dark:text-gray-300 dark:hover:bg-metal-700 dark:focus:bg-metal-700"), R = ({ label: e, steps: n }) => {
+var f = u("flex w-full items-center gap-1 px-4 py-1.5 text-sm font-semibold outline-none", "text-gray-600 hover:bg-gray-50 focus:bg-gray-50 hover:cursor-pointer", "dark:text-gray-300 dark:hover:bg-metal-700 dark:focus:bg-metal-700"), R = ({ label: e, steps: a }) => {
   const { isInsideRouter: o } = w();
-  return /* @__PURE__ */ a("li", {
+  return /* @__PURE__ */ i("li", {
     className: "flex items-center",
     children: /* @__PURE__ */ k(y, {
       modal: !1,
-      children: [/* @__PURE__ */ a(h, {
+      children: [/* @__PURE__ */ i(g, {
         "aria-label": e,
-        className: d("flex items-center rounded-xs text-gray-400 hover:text-gray-500", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500", "dark:hover:text-gray-300 cursor-pointer"),
-        children: /* @__PURE__ */ a(p, {
+        className: u("flex items-center rounded-xs text-gray-400 hover:text-gray-500", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500", "dark:hover:text-gray-300 cursor-pointer", "relative tap-target touch-hit-area"),
+        children: /* @__PURE__ */ i(p, {
           className: "w-5 h-5",
           "aria-hidden": "true"
         })
-      }), /* @__PURE__ */ a(v, {
+      }), /* @__PURE__ */ i(v, {
         align: "start",
         sideOffset: 4,
         loop: !0,
-        className: d("z-50 min-w-40 rounded border border-gray-200 bg-white py-2 shadow-xs", "animate-in fade-in-0", "dark:border-metal-700 dark:bg-metal-800"),
-        children: n.map(({ label: r, to: t, target: i, component: s }) => t ? o && !s ? /* @__PURE__ */ a(u, {
+        className: u("z-50 min-w-40 rounded border border-gray-200 bg-white py-2 shadow-xs", "animate-in fade-in-0", "dark:border-metal-700 dark:bg-metal-800"),
+        children: a.map(({ label: r, to: t, target: n, component: s }) => t ? o && !s ? /* @__PURE__ */ i(d, {
           asChild: !0,
-          children: /* @__PURE__ */ a(x, {
+          children: /* @__PURE__ */ i(x, {
             to: t,
-            target: i,
+            target: n,
             className: f,
             children: r
           })
-        }, r) : /* @__PURE__ */ a(u, {
+        }, r) : /* @__PURE__ */ i(d, {
           asChild: !0,
-          children: /* @__PURE__ */ a(s ?? "a", {
+          children: /* @__PURE__ */ i(s ?? "a", {
             href: s ? void 0 : t,
             to: s ? t : void 0,
-            target: i,
+            target: n,
             className: f,
             children: r
           })
-        }, r) : /* @__PURE__ */ a(u, {
+        }, r) : /* @__PURE__ */ i(d, {
           disabled: !0,
-          className: d(f, "cursor-default"),
+          className: u(f, "cursor-default"),
           children: r
         }, r))
       })]

package/dist/{Input-C1Js3pbF.js → Input-CE6J6HIW.js}

@@ -107,8 +107,8 @@ O.propTypes = {
   size: c.default.oneOfType([c.default.string, c.default.number])
 };
 O.displayName = "Eye";
-var ee = w(({ className: e, error: o, helperText: r, helperTextClassName: t, hidePasswordLabel: n = "Hide password", id: a, isRequired: p = !1, isSearch: j = !1, label: k, labelAction: I, labelClassName: _, labelWrapperClassName: z, name: $, showPasswordLabel: T = "Show password", theme: L, type: f = "text", ...W }, S) => {
-  const M = G(), u = a ?? M, N = `${u}-error`, E = `${u}-helper-text`, B = J(f === "password"), [m, C] = Q(() => f !== "password"), s = typeof o == "string" && o.length > 0, h = f === "password", P = !s && !!r, A = K(s && N, P && E), H = m ? O : b;
+var ee = w(({ className: e, error: o, helperText: r, helperTextClassName: t, hidePasswordLabel: n = "Hide password", id: a, isRequired: p = !1, isSearch: j = !1, label: k, labelAction: I, labelClassName: _, labelWrapperClassName: z, name: $, showPasswordLabel: T = "Show password", theme: L, type: u = "text", ...W }, S) => {
+  const M = G(), f = a ?? M, N = `${f}-error`, E = `${f}-helper-text`, B = J(u === "password"), [m, C] = Q(() => u !== "password"), s = typeof o == "string" && o.length > 0, h = u === "password", P = !s && !!r, A = K(s && N, P && E), H = m ? O : b;
   return /* @__PURE__ */ v("div", {
     className: "flex flex-col gap-2 w-full relative",
     "data-theme": L,
@@ -118,7 +118,7 @@ var ee = w(({ className: e, error: o, helperText: r, helperTextClassName: t, hid
         children: [/* @__PURE__ */ v(g, {
           component: "label",
           variant: "labelLarge",
-          htmlFor: u,
+          htmlFor: f,
           className: l("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", _),
           children: [
             k,
@@ -141,10 +141,10 @@ var ee = w(({ className: e, error: o, helperText: r, helperTextClassName: t, hid
           }) : null,
           /* @__PURE__ */ i("input", {
             ...W,
-            id: u,
+            id: f,
             ref: S,
             name: $,
-            type: m ? B.current ? "text" : f : "password",
+            type: m ? B.current ? "text" : u : "password",
             "data-error": s,
             "aria-invalid": s || void 0,
             "aria-describedby": A,
@@ -165,7 +165,7 @@ var ee = w(({ className: e, error: o, helperText: r, helperTextClassName: t, hid
           h ? /* @__PURE__ */ i("button", {
             type: "button",
             "aria-label": m ? n : T,
-            className: l("-translate-y-1/2", "absolute", "cursor-pointer", "right-3", "text-slate-400", "top-1/2"),
+            className: l("-translate-y-1/2", "absolute", "cursor-pointer", "right-3", "rounded outline-none focus-visible:ring-1 focus-visible:ring-aurora-500", "tap-target touch-hit-area", "text-slate-400", "top-1/2"),
             onClick: () => C(!m),
             children: /* @__PURE__ */ i(H, { className: "w-5 h-5" })
           }) : null

package/dist/components/Alert/Alert.js

@@ -1,20 +1,20 @@
 "use client";
 import { t as v } from "../../x-BmNOD9Gr.js";
-import { t as I } from "../../dist-C_jtUTU9.js";
+import { t as N } from "../../dist-C_jtUTU9.js";
 import { t } from "../../utils-DnIJruo0.js";
-import { CheckCircleFilledIcon as N } from "../../assets/icons/components/CheckCircleFilled.js";
+import { CheckCircleFilledIcon as I } from "../../assets/icons/components/CheckCircleFilled.js";
 import { ErrorIcon as g } from "../../assets/icons/components/Error.js";
 import { InfoCircleIcon as b } from "../../assets/icons/components/InfoCircle.js";
 import { WarningTriangleIcon as x } from "../../assets/icons/components/WarningTriangle.js";
 import { alertVariants as V, closeButtonVariants as k, descriptionVariants as w, iconVariants as A, titleVariants as E } from "./Alert.variants.js";
 import { useEffect as j, useRef as P, useState as R } from "react";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-var B = {
-  success: N,
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+var z = {
+  success: I,
   info: b,
   warning: x,
   danger: g
-}, _ = ({ action: o, icon: d, theme: f, type: r, title: i, description: c, isVisible: s = !0, showCloseButton: u = !1 }) => {
+}, X = ({ action: i, icon: d, theme: f, type: e, title: o, description: c, isVisible: s = !0, showCloseButton: u = !1 }) => {
   const a = P(null), [p, h] = R(s), C = () => {
     const n = a.current;
     n && n.setAttribute("data-state", "hidden");
@@ -25,11 +25,11 @@ var B = {
       a.current?.style.setProperty("display", "none"), h(!1);
     }, { signal: n.signal }), () => n.abort();
   }, []), !p) return null;
-  const m = r ? B[r] : null;
+  const m = e ? z[e] : null;
   return /* @__PURE__ */ l("div", {
     ref: a,
     className: t(V({
-      type: r,
+      type: e,
       isVisible: s
     })),
     "data-state": s ? "visible" : "hidden",
@@ -37,29 +37,30 @@ var B = {
     role: "alert",
     "aria-live": "polite",
     children: [
-      d ?? (m && /* @__PURE__ */ e(m, { className: t(A({ type: r })) })),
+      d ?? (m && /* @__PURE__ */ r(m, { className: t(A({ type: e })) })),
       /* @__PURE__ */ l("div", {
         className: "flex flex-col gap-1 flex-1",
-        children: [i && /* @__PURE__ */ e("p", {
-          className: t(E({ type: r })),
-          children: i
-        }), c && /* @__PURE__ */ e("div", {
-          className: t(w({ type: r })),
+        children: [o && /* @__PURE__ */ r("p", {
+          className: t(E({ type: e })),
+          children: o
+        }), c && /* @__PURE__ */ r("div", {
+          className: t(w({ type: e })),
           children: c
         })]
       }),
-      o ? /* @__PURE__ */ e("div", {
+      i ? /* @__PURE__ */ r("div", {
         className: "shrink-0 self-center",
-        children: o
+        children: i
       }) : null,
       u && /* @__PURE__ */ l("button", {
         type: "button",
+        className: t(k({ type: e })),
         onClick: C,
-        children: [/* @__PURE__ */ e(v, { className: t(k({ type: r })) }), /* @__PURE__ */ e(I, { children: "Dismiss alert" })]
+        children: [/* @__PURE__ */ r(v, { className: "size-4" }), /* @__PURE__ */ r(N, { children: "Dismiss alert" })]
       })
     ]
   });
 };
 export {
-  _ as Alert
+  X as Alert
 };

package/dist/components/Alert/Alert.variants.js

@@ -68,7 +68,7 @@ var r = e([
   info: ["text-blue-700", "dark:text-blue-200"],
   warning: ["text-yellow-700", "dark:text-yellow-100"],
   danger: ["text-red-700", "dark:text-rose-200"]
-} } }), o = e(["size-5", "shrink-0"], { variants: { type: {
+} } }), n = e(["size-5", "shrink-0"], { variants: { type: {
   success: ["text-green-600", "dark:text-green-400"],
   info: [
     "text-blue-600",
@@ -77,11 +77,18 @@ var r = e([
   ],
   warning: ["text-yellow-600", "dark:text-yellow-400"],
   danger: ["text-red-600", "dark:text-rose-400"]
-} } }), n = e([
+} } }), o = e([
   "size-4",
   "absolute",
   "right-3",
   "top-3",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
   "cursor-pointer",
   "tap-target",
   "touch-hit-area",
@@ -97,8 +104,8 @@ var r = e([
 } } });
 export {
   r as alertVariants,
-  n as closeButtonVariants,
+  o as closeButtonVariants,
   d as descriptionVariants,
-  o as iconVariants,
+  n as iconVariants,
   a as titleVariants
 };

package/dist/components/Autocomplete/Autocomplete.variants.js

@@ -1,5 +1,5 @@
 import { t as r } from "../../dist-B9GE4SXf.js";
-var e = r([
+var i = r([
   "flex",
   "w-full",
   "rounded-md",
@@ -11,7 +11,8 @@ var e = r([
   "placeholder:text-muted-foreground",
   "focus-visible:outline-none",
   "focus-visible:ring-1",
-  "focus-visible:ring-ring",
+  "focus-visible:ring-aurora-500",
+  "kubefirst:focus-visible:ring-kubefirst-primary",
   "disabled:cursor-not-allowed",
   "disabled:opacity-50",
   "shadow-2xs",
@@ -19,12 +20,12 @@ var e = r([
   "px-2",
   "focus:ring-aurora-500",
   "kubefirst:focus:ring-kubefirst-primary"
-]), i = r([
+]), o = r([
   "pl-1",
   "text-base",
   "cursor-pointer"
 ]);
 export {
-  e as autocompleteVariants,
-  i as labelVariants
+  i as autocompleteVariants,
+  o as labelVariants
 };

package/dist/components/Badge/Badge.js

@@ -2,28 +2,28 @@ import { t as x } from "../../x-C8O1IsaM.js";
 import { LoaderIcon as D } from "../../assets/icons/components/Loader.js";
 import { t as c } from "../../utils-DnIJruo0.js";
 import { badgeVariants as V, buttonDismissVariants as j } from "./Badge.variants.js";
-import { t as p } from "../../dist-CK8FUUUn.js";
+import { t as f } from "../../dist-CK8FUUUn.js";
 import { useEffect as E, useRef as L, useState as P } from "react";
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
-var q = ({ className: b, dismissible: h = !1, isSelectable: g = !0, label: i, leftIcon: n, loading: o = !1, rightIcon: l, size: m, variant: d, onClick: e, onDismiss: v }) => {
-  const u = L(null), [r, N] = P("visible"), y = (t) => {
-    t.stopPropagation(), v?.(), N("hidden");
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+var q = ({ className: b, dismissible: g = !1, isSelectable: h = !0, label: i, leftIcon: n, loading: o = !1, rightIcon: l, size: m, variant: d, onClick: e, onDismiss: v }) => {
+  const u = L(null), [r, N] = P("visible"), y = (a) => {
+    a.stopPropagation(), v?.(), N("hidden");
   };
   return E(() => {
     if (r !== "hidden") return;
-    const t = new AbortController(), a = u.current;
-    return a?.addEventListener("animationend", (w) => {
-      w.target === a && (a.style.setProperty("display", "none"), a.remove());
-    }, { signal: t.signal }), () => t.abort();
-  }, [r]), /* @__PURE__ */ f("span", {
+    const a = new AbortController(), t = u.current;
+    return t?.addEventListener("animationend", (w) => {
+      w.target === t && (t.style.setProperty("display", "none"), t.remove());
+    }, { signal: a.signal }), () => a.abort();
+  }, [r]), /* @__PURE__ */ p("span", {
     ref: u,
     className: c(V({
       variant: d,
       size: m,
       className: b
     }), {
-      "select-none": !g,
-      "cursor-pointer": e
+      "select-none": !h,
+      "cursor-pointer tap-target outline-none focus-visible:ring-1 focus-visible:ring-aurora-500 pointer-coarse:motion-safe:active:scale-95": e
     }),
     role: e ? "button" : void 0,
     onClick: e,
@@ -37,12 +37,12 @@ var q = ({ className: b, dismissible: h = !1, isSelectable: g = !0, label: i, le
         size: 12,
         className: "animate-spin animate-duration-time-2"
       }),
-      n ? /* @__PURE__ */ s(p, {
+      n ? /* @__PURE__ */ s(f, {
         className: "h-3 w-3",
         children: n
       }) : null,
       i,
-      h ? /* @__PURE__ */ f("button", {
+      g ? /* @__PURE__ */ p("button", {
         type: "button",
         className: c(j({
           size: m,
@@ -54,7 +54,7 @@ var q = ({ className: b, dismissible: h = !1, isSelectable: g = !0, label: i, le
           className: "sr-only",
           children: "Dismiss"
         })]
-      }) : l ? /* @__PURE__ */ s(p, {
+      }) : l ? /* @__PURE__ */ s(f, {
         className: "h-3 w-3",
         children: l
       }) : null

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

@@ -69,7 +69,12 @@ var a = e([
   "inline-flex",
   "items-center",
   "justify-center",
+  "relative",
+  "tap-target",
+  "touch-hit-area",
   "focus:outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
   "text-inherit",
   "cursor-pointer",
   "text-gray-700"

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../Breadcrumb-DzavonoC.js";
+import { t as m } from "../../Breadcrumb-BiiOnn0p.js";
 export {
   m as Breadcrumb
 };

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

@@ -12,7 +12,7 @@ var r = t([
   "dark:hover:text-gray-300",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-gray-500"
+  "focus-visible:outline-aurora-500"
 ]);
 export {
   r as backButtonVariants

package/dist/components/Breadcrumb/components/CollapsedSteps/CollapsedSteps.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../../CollapsedSteps-CkMuzOHx.js";
+import { t as p } from "../../../../CollapsedSteps-Dy2I7XDd.js";
 export {
   p as CollapsedSteps
 };

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

@@ -17,7 +17,7 @@ var s = e([
       "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)]:outline-aurora-500",
       "group-[&:has(:focus-visible)]:text-gray-500",
       "group-[&:has(:focus-visible)]:rounded-xs",
       "group-hover:rounded-xs",
@@ -31,7 +31,7 @@ var s = e([
       "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)]:outline-aurora-500",
       "group-[&:has(:focus-visible)]:text-gray-500",
       "group-[&:has(:focus-visible)]:rounded-xs",
       "group-hover:rounded-xs",

package/dist/components/Breadcrumb/components/index.js

@@ -1,6 +1,6 @@
 import { BackButton as t } from "./BackButton/BackButton.js";
 import { Item as r } from "./Item/Item.js";
-import { t as e } from "../../../CollapsedSteps-CkMuzOHx.js";
+import { t as e } from "../../../CollapsedSteps-Dy2I7XDd.js";
 export {
   t as BackButton,
   e as CollapsedSteps,

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

@@ -10,7 +10,8 @@ var a = r([
   "flex",
   "focus-visible:outline-none",
   "focus-visible:ring-1",
-  "focus-visible:ring-ring",
+  "focus-visible:ring-aurora-500",
+  "kubefirst:focus-visible:ring-kubefirst-primary",
   "font-semibold",
   "gap-2",
   "inline-flex",
@@ -19,8 +20,7 @@ var a = r([
   "rounded",
   "transition-[color,background-color,border-color,transform]",
   "duration-150",
-  "active:scale-[0.97]",
-  "motion-reduce:active:scale-100",
+  "pointer-coarse:motion-safe:active:scale-[0.97]",
   "whitespace-nowrap",
   "h-10",
   "pointer-coarse:min-h-11",