@konstructio/ui 0.0.5 → 0.0.6

package/dist/{AlertDialogTrigger-lenvKoGF.js → AlertDialogTrigger-D4Tm_9M0.js}

@@ -2,8 +2,8 @@ import { jsx as c, jsxs as U, Fragment as j } from "react/jsx-runtime";
 import * as i from "react";
 import { u as xe, b as Y, c as ee, d as R, e as Le, a as ke } from "./index-8vgf-x5i.js";
 import { u as O, S as We, a as $e } from "./index-DoOsnuB6.js";
-import { D as Ue, P as Ge } from "./index-O3j1K921.js";
-import { P } from "./index-OOfdXoxx.js";
+import { D as Ue, P as Ge } from "./index-BedjZUuB.js";
+import { P } from "./index-BaNV0qac.js";
 import { P as G } from "./index-D4Q2rMby.js";
 import { R as Ke } from "./Combination-Cmu9JRkv.js";
 import "./contexts/theme.context.js";

package/dist/{Modal-Bg9UG35z.js → Modal-Ca3bkvvt.js}

@@ -1,12 +1,12 @@
 import { jsx as _, jsxs as Q } from "react/jsx-runtime";
-import { r as _r } from "./index-OOfdXoxx.js";
+import { r as _r } from "./index-BaNV0qac.js";
 import { Body as Mr } from "./components/Modal/components/Body/Body.js";
 import { Footer as kr } from "./components/Modal/components/Footer/Footer.js";
 import { Header as Lr } from "./components/Modal/components/Header/Header.js";
 import N, { createContext as Rr, forwardRef as Re, useState as Z, useRef as ee, useCallback as R, useEffect as Wr, useMemo as Br, Fragment as Ur, PureComponent as Gr, Children as q, isValidElement as $ } from "react";
 import { P as We, p as l } from "./index-D68N8v8R.js";
 import { c as se, a as Hr, u as jr, R as Vr } from "./Combination-Cmu9JRkv.js";
-import { R as qr } from "./index-ffjBR8Av.js";
+import { R as qr } from "./index-BtibbG81.js";
 import "./contexts/theme.context.js";
 import { useTheme as $r } from "./contexts/theme.hook.js";
 import "./js.cookie-OLEfuq_g.js";

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { R as h, A as f, P as x, O as g, C as u, T as C, D as b, a as y, b as O } from "../../AlertDialogTrigger-lenvKoGF.js";
+import { R as h, A as f, P as x, O as g, C as u, T as C, D as b, a as y, b as O } from "../../AlertDialogTrigger-D4Tm_9M0.js";
 import "../../contexts/theme.context.js";
 import { useTheme as A } from "../../contexts/theme.hook.js";
 import "react";

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

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { A as a } from "../../../AlertDialogTrigger-lenvKoGF.js";
+import { A as a } from "../../../AlertDialogTrigger-D4Tm_9M0.js";
 import "../../../contexts/theme.context.js";
 import "../../../contexts/theme.hook.js";
 import "react";

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

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

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,14 +1,14 @@
 import { jsxs as C, jsx as t } from "react/jsx-runtime";
-import { forwardRef as R, useRef as i, useId as A, useImperativeHandle as T } from "react";
+import { forwardRef as R, useRef as p, useId as A, useImperativeHandle as O } from "react";
 import "../../contexts/theme.context.js";
-import { useTheme as V } from "../../contexts/theme.hook.js";
+import { useTheme as T } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { useAutocomplete as g } from "./hooks/useAutocomplete.js";
-import { List as j } from "./components/List.js";
-import { labelVariants as y, autocompleteVariants as I } from "./Autocomplete.variants.js";
-const O = R(
+import { useAutocomplete as V } from "./hooks/useAutocomplete.js";
+import { List as g } from "./components/List.js";
+import { labelVariants as j, autocompleteVariants as y } from "./Autocomplete.variants.js";
+const I = R(
   ({
-    autoComplete: p = "off",
+    autoComplete: c = "off",
     className: a,
     label: n,
     labelClassName: u,
@@ -17,24 +17,24 @@ const O = R(
     placeHolderEmptyValues: h = "No values...",
     placeHolderEmptyValuesClassName: f,
     placeholder: x,
-    theme: N,
+    theme: w,
     variant: r,
-    onChange: w
+    onChange: N
   }, b) => {
-    const s = i(null), e = i(null), c = A(), { theme: v } = V(), m = N ?? v;
-    T(b, () => e.current, [e]);
-    const o = g({
+    const s = p(null), o = p(null), i = A(), { theme: v } = T(), m = w ?? v;
+    O(b, () => o.current, [o]);
+    const e = V({
       options: d,
-      inputRef: e,
+      inputRef: o,
       wrapperRef: s,
-      onChange: w
+      onChange: N
     });
     return /* @__PURE__ */ C("div", { ref: s, className: "relative flex flex-col", children: [
       n ? /* @__PURE__ */ t(
         "label",
         {
-          htmlFor: l ?? c,
-          className: y({
+          htmlFor: l ?? i,
+          className: j({
             theme: m,
             variant: r,
             className: u
@@ -45,40 +45,41 @@ const O = R(
       /* @__PURE__ */ t(
         "input",
         {
-          ref: e,
-          id: l ?? c,
+          ref: o,
+          id: l ?? i,
           type: "text",
           name: l,
           role: "combobox",
-          autoComplete: p,
-          className: I({
+          autoComplete: c,
+          className: y({
             theme: m,
             variant: r,
             className: a
           }),
-          onChange: o.handleChange,
-          value: o.value,
-          placeholder: x
+          onChange: e.handleChange,
+          value: e.value,
+          placeholder: x,
+          "aria-expanded": e.showOptions ? "true" : "false"
         }
       ),
-      o.showOptions && /* @__PURE__ */ t("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm", children: /* @__PURE__ */ t(
-        j,
+      e.showOptions && /* @__PURE__ */ t("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm", children: /* @__PURE__ */ t(
+        g,
         {
           className: a,
-          inputRef: e,
+          inputRef: o,
           wrapperRef: s,
-          options: o.newOptions,
+          options: e.newOptions,
           placeholder: h,
           placeholderClassName: f,
           variant: r,
           theme: m,
-          onClick: o.handleSelectValue
+          onClick: e.handleSelectValue
         }
       ) })
     ] });
   }
 );
-O.displayName = "Autocomplete";
+I.displayName = "Autocomplete";
 export {
-  O as Autocomplete
+  I as Autocomplete
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -4,7 +4,7 @@ import "../../contexts/theme.context.js";
 import { useTheme as O } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
 import { breadcrumbVariants as j, breadcrumbItemVariants as w, chevronVariants as x } from "./Breadcrumb.variants.js";
-import { u as P, L as k } from "../../useBreadcrumb-tyxjV-a1.js";
+import { u as P, L as k } from "../../useBreadcrumb-DxYsZvj_.js";
 import { P as m } from "../../index-D68N8v8R.js";
 function h() {
   return h = Object.assign || function(e) {

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,5 +1,5 @@
 import "react";
-import { u as o } from "../../../useBreadcrumb-tyxjV-a1.js";
+import { u as o } from "../../../useBreadcrumb-DxYsZvj_.js";
 export {
   o as useBreadcrumb
 };

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CardProps } from './Card.types';
+declare const Card: FC<CardProps>;
+export { Card };

package/dist/components/Card/Card.js

@@ -0,0 +1,38 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import "../../contexts/theme.context.js";
+import { useTheme as p } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { cardBaseVariants as c, cardVariants as f } from "./Card.variants.js";
+const n = d(
+  ({ className: o, theme: r, isActive: m, canHover: e, ...s }, i) => {
+    const { theme: a } = p();
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: c({
+          theme: r ?? a,
+          isActive: m,
+          canHover: e
+        }),
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: i,
+            className: f({
+              className: o,
+              theme: r ?? a,
+              isActive: m,
+              canHover: e
+            }),
+            ...s
+          }
+        )
+      }
+    );
+  }
+);
+n.displayName = "Card";
+export {
+  n as Card
+};

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './Card.variants';
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+    isActive?: boolean;
+    canHover?: boolean;
+}

package/dist/components/Card/Card.types.js

@@ -0,0 +1 @@
+

package/dist/components/Card/Card.variants.d.ts

@@ -0,0 +1,10 @@
+export declare const cardBaseVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cardVariants: (props?: ({
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Card/Card.variants.js

@@ -0,0 +1,87 @@
+import { c as r } from "../../index-BNmRGtA6.js";
+const o = r(
+  ["border", "border-slate-200", "rounded-xl"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      },
+      isActive: {
+        true: "border-transparent",
+        false: ""
+      },
+      canHover: {
+        true: ["group", "hover:border-transparent"],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), t = r(
+  ["border", "border-4", "p-3", "text-card-foreground", "rounded-xl"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      },
+      isActive: {
+        true: "",
+        false: "border-transparent"
+      },
+      canHover: {
+        true: "cursor-pointer border-transparent",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        theme: "colony",
+        isActive: !0,
+        class: ["border-colony-primary", "shadow"]
+      },
+      {
+        theme: "kubefirst",
+        isActive: !0,
+        class: ["border-kubefirst-primary", "shadow"]
+      },
+      {
+        theme: "civo",
+        isActive: !0,
+        class: ["border-civo-primary", "shadow"]
+      },
+      {
+        theme: "colony",
+        canHover: !0,
+        class: "group-hover:border-colony-primary"
+      },
+      {
+        theme: "kubefirst",
+        canHover: !0,
+        class: "group-hover:border-kubefirst-primary"
+      },
+      {
+        theme: "civo",
+        canHover: !0,
+        class: "group-hover:border-civo-primary"
+      },
+      {
+        canHover: void 0,
+        isActive: void 0,
+        class: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  o as cardBaseVariants,
+  t as cardVariants
+};

package/dist/components/Checkbox/Checkbox.js

@@ -1,26 +1,26 @@
-import { jsxs as N, jsx as p } from "react/jsx-runtime";
-import * as f from "react";
+import { jsxs as N, jsx as f } from "react/jsx-runtime";
+import * as u from "react";
 import j, { forwardRef as S, useId as M, useCallback as A } from "react";
 import { u as H } from "../../index-DoOsnuB6.js";
 import { c as K, a as W, d as I } from "../../index-8vgf-x5i.js";
 import { u as $, a as q } from "../../index-BxeV34ij.js";
 import { P as F } from "../../index-D4Q2rMby.js";
-import { P as _ } from "../../index-OOfdXoxx.js";
+import { P as _ } from "../../index-BaNV0qac.js";
 import { useToggle as V } from "../../hooks/useToggle.js";
 import { checkboxVariants as X, labelVariants as G } from "./Checkbox.variants.js";
 import "../../contexts/theme.context.js";
 import { useTheme as J } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { P as y } from "../../index-D68N8v8R.js";
-function w() {
-  return w = Object.assign || function(e) {
+import { P } from "../../index-D68N8v8R.js";
+function E() {
+  return E = Object.assign || function(e) {
     for (var s = 1; s < arguments.length; s++) {
       var t = arguments[s];
       for (var o in t)
         Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
     }
     return e;
-  }, w.apply(this, arguments);
+  }, E.apply(this, arguments);
 }
 function Q(e, s) {
   if (e == null) return {};
@@ -39,9 +39,9 @@ function U(e, s) {
     n = o[r], !(s.indexOf(n) >= 0) && (t[n] = e[n]);
   return t;
 }
-var E = S(function(e, s) {
-  var t = e.color, o = t === void 0 ? "currentColor" : t, n = e.size, r = n === void 0 ? 24 : n, i = Q(e, ["color", "size"]);
-  return /* @__PURE__ */ j.createElement("svg", w({
+var O = S(function(e, s) {
+  var t = e.color, o = t === void 0 ? "currentColor" : t, n = e.size, r = n === void 0 ? 24 : n, l = Q(e, ["color", "size"]);
+  return /* @__PURE__ */ j.createElement("svg", E({
     ref: s,
     xmlns: "http://www.w3.org/2000/svg",
     width: r,
@@ -52,84 +52,84 @@ var E = S(function(e, s) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, i), /* @__PURE__ */ j.createElement("polyline", {
+  }, l), /* @__PURE__ */ j.createElement("polyline", {
     points: "20 6 9 17 4 12"
   }));
 });
-E.propTypes = {
-  color: y.string,
-  size: y.oneOfType([y.string, y.number])
+O.propTypes = {
+  color: P.string,
+  size: P.oneOfType([P.string, P.number])
 };
-E.displayName = "Check";
-var O = "Checkbox", [Y, be] = K(O), [Z, ee] = Y(O), T = f.forwardRef(
+O.displayName = "Check";
+var R = "Checkbox", [Y, ke] = K(R), [Z, ee] = Y(R), T = u.forwardRef(
   (e, s) => {
     const {
       __scopeCheckbox: t,
       name: o,
       checked: n,
       defaultChecked: r,
-      required: i,
-      disabled: l,
-      value: d = "on",
-      onCheckedChange: v,
-      form: u,
-      ...h
-    } = e, [c, k] = f.useState(null), C = H(s, (a) => k(a)), g = f.useRef(!1), R = c ? u || !!c.closest("form") : !0, [b = !1, P] = W({
+      required: l,
+      disabled: a,
+      value: b = "on",
+      onCheckedChange: C,
+      form: d,
+      ...p
+    } = e, [i, k] = u.useState(null), v = H(s, (c) => k(c)), x = u.useRef(!1), g = i ? d || !!i.closest("form") : !0, [m = !1, w] = W({
       prop: n,
       defaultProp: r,
-      onChange: v
-    }), B = f.useRef(b);
-    return f.useEffect(() => {
-      const a = c == null ? void 0 : c.form;
-      if (a) {
-        const x = () => P(B.current);
-        return a.addEventListener("reset", x), () => a.removeEventListener("reset", x);
+      onChange: C
+    }), B = u.useRef(m);
+    return u.useEffect(() => {
+      const c = i == null ? void 0 : i.form;
+      if (c) {
+        const y = () => w(B.current);
+        return c.addEventListener("reset", y), () => c.removeEventListener("reset", y);
       }
-    }, [c, P]), /* @__PURE__ */ N(Z, { scope: t, state: b, disabled: l, children: [
-      /* @__PURE__ */ p(
+    }, [i, w]), /* @__PURE__ */ N(Z, { scope: t, state: m, disabled: a, children: [
+      /* @__PURE__ */ f(
         _.button,
         {
           type: "button",
           role: "checkbox",
-          "aria-checked": m(b) ? "mixed" : b,
-          "aria-required": i,
-          "data-state": D(b),
-          "data-disabled": l ? "" : void 0,
-          disabled: l,
-          value: d,
-          ...h,
-          ref: C,
-          onKeyDown: I(e.onKeyDown, (a) => {
-            a.key === "Enter" && a.preventDefault();
+          "aria-checked": h(m) ? "mixed" : m,
+          "aria-required": l,
+          "data-state": D(m),
+          "data-disabled": a ? "" : void 0,
+          disabled: a,
+          value: b,
+          ...p,
+          ref: v,
+          onKeyDown: I(e.onKeyDown, (c) => {
+            c.key === "Enter" && c.preventDefault();
           }),
-          onClick: I(e.onClick, (a) => {
-            P((x) => m(x) ? !0 : !x), R && (g.current = a.isPropagationStopped(), g.current || a.stopPropagation());
+          onClick: I(e.onClick, (c) => {
+            w((y) => h(y) ? !0 : !y), g && (x.current = c.isPropagationStopped(), x.current || c.stopPropagation());
           })
         }
       ),
-      R && /* @__PURE__ */ p(
+      g && /* @__PURE__ */ f(
         te,
         {
-          control: c,
-          bubbles: !g.current,
+          control: i,
+          bubbles: !x.current,
           name: o,
-          value: d,
-          checked: b,
-          required: i,
-          disabled: l,
-          form: u,
+          value: b,
+          checked: m,
+          required: l,
+          disabled: a,
+          form: d,
           style: { transform: "translateX(-100%)" },
-          defaultChecked: m(r) ? !1 : r
+          defaultChecked: h(r) ? !1 : r
         }
       )
     ] });
   }
 );
-T.displayName = O;
-var z = "CheckboxIndicator", L = f.forwardRef(
+T.displayName = R;
+var z = "CheckboxIndicator", L = u.forwardRef(
   (e, s) => {
     const { __scopeCheckbox: t, forceMount: o, ...n } = e, r = ee(z, t);
-    return /* @__PURE__ */ p(F, { present: o || m(r.state) || r.state === !0, children: /* @__PURE__ */ p(
+    return /* @__PURE__ */ f(F, { present: o || h(r.state) || r.state === !0, children: /* @__PURE__ */ f(
       _.span,
       {
         "data-state": D(r.state),
@@ -143,27 +143,27 @@ var z = "CheckboxIndicator", L = f.forwardRef(
 );
 L.displayName = z;
 var te = (e) => {
-  const { control: s, checked: t, bubbles: o = !0, defaultChecked: n, ...r } = e, i = f.useRef(null), l = $(t), d = q(s);
-  f.useEffect(() => {
-    const u = i.current, h = window.HTMLInputElement.prototype, k = Object.getOwnPropertyDescriptor(h, "checked").set;
-    if (l !== t && k) {
-      const C = new Event("click", { bubbles: o });
-      u.indeterminate = m(t), k.call(u, m(t) ? !1 : t), u.dispatchEvent(C);
+  const { control: s, checked: t, bubbles: o = !0, defaultChecked: n, ...r } = e, l = u.useRef(null), a = $(t), b = q(s);
+  u.useEffect(() => {
+    const d = l.current, p = window.HTMLInputElement.prototype, k = Object.getOwnPropertyDescriptor(p, "checked").set;
+    if (a !== t && k) {
+      const v = new Event("click", { bubbles: o });
+      d.indeterminate = h(t), k.call(d, h(t) ? !1 : t), d.dispatchEvent(v);
     }
-  }, [l, t, o]);
-  const v = f.useRef(m(t) ? !1 : t);
-  return /* @__PURE__ */ p(
+  }, [a, t, o]);
+  const C = u.useRef(h(t) ? !1 : t);
+  return /* @__PURE__ */ f(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
-      defaultChecked: n ?? v.current,
+      defaultChecked: n ?? C.current,
       ...r,
       tabIndex: -1,
-      ref: i,
+      ref: l,
       style: {
         ...e.style,
-        ...d,
+        ...b,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -172,57 +172,62 @@ var te = (e) => {
     }
   );
 };
-function m(e) {
+function h(e) {
   return e === "indeterminate";
 }
 function D(e) {
-  return m(e) ? "indeterminate" : e ? "checked" : "unchecked";
+  return h(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
 var re = T, oe = L;
 const ve = S(
   ({
-    className: e,
-    defaultChecked: s,
-    disabled: t,
-    label: o,
-    labelClassName: n,
-    name: r,
-    theme: i,
-    variant: l,
-    onChange: d
-  }, v) => {
-    const [u, h] = V(s), c = M(), { theme: k } = J(), C = A(() => {
-      h(), d == null || d();
-    }, [d, h]);
+    ariaLabelledBy: e,
+    className: s,
+    defaultChecked: t,
+    disabled: o,
+    id: n,
+    label: r,
+    labelClassName: l,
+    name: a,
+    theme: b,
+    title: C,
+    variant: d,
+    onChange: p
+  }, i) => {
+    const [k, v] = V(t), x = M(), { theme: g } = J(), m = A(() => {
+      v(), p == null || p();
+    }, [p, v]);
     return /* @__PURE__ */ N("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ p(
+      /* @__PURE__ */ f(
         re,
         {
-          id: r ?? c,
-          checked: u,
-          ref: v,
-          name: r,
-          disabled: t,
+          id: n ?? x,
+          checked: k,
+          ref: i,
+          name: a,
+          disabled: o,
+          "aria-labelledby": e,
+          title: C,
           className: X({
-            className: e,
-            theme: i ?? k,
-            variant: l,
-            checked: u
+            className: s,
+            theme: b ?? g,
+            variant: d,
+            checked: k
           }),
-          onCheckedChange: C,
-          children: /* @__PURE__ */ p(oe, { children: /* @__PURE__ */ p(E, { className: "w-4 h-4 stroke-2" }) })
+          onCheckedChange: m,
+          children: /* @__PURE__ */ f(oe, { children: /* @__PURE__ */ f(O, { className: "w-4 h-4 stroke-2" }) })
         }
       ),
-      o ? /* @__PURE__ */ p(
+      r ? /* @__PURE__ */ f(
         "label",
         {
-          htmlFor: r ?? c,
+          htmlFor: a ?? n,
           className: G({
-            variant: l,
-            theme: i,
-            className: n
+            variant: d,
+            theme: b,
+            className: l
           }),
-          children: o
+          children: r
         }
       ) : null
     ] });