@konstructio/ui 0.0.9 → 0.0.11

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,47 +1,54 @@
 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-D4Tm_9M0.js";
+import { R as C, A as b, P as y, O as N, C as O, T as A, D, a as T, b as v } from "../../AlertDialogTrigger-D4Tm_9M0.js";
 import "../../contexts/theme.context.js";
-import { useTheme as A } from "../../contexts/theme.hook.js";
+import { useTheme as j } from "../../contexts/theme.hook.js";
 import "react";
 import "../../js.cookie-OLEfuq_g.js";
-import { Button as a } from "../Button/Button.js";
-import { useAlertDialog as D } from "./hooks/useAlertDialog.js";
-const B = ({
-  buttonText: l,
-  theme: n,
-  title: o,
-  description: i,
-  onConfirm: s
+import { cn as r } from "../../utils/index.js";
+import { Button as l } from "../Button/Button.js";
+import { useAlertDialog as k } from "./hooks/useAlertDialog.js";
+const G = ({
+  buttonCancelClassName: o,
+  buttonCancelText: i = "Cancel",
+  buttonConfirmClassName: s,
+  buttonConfirmText: c = "OK",
+  buttonText: m,
+  description: d,
+  theme: a,
+  title: p,
+  onConfirm: h
 }) => {
-  const { theme: r } = A(), { isOpen: c, handleCancel: d, handleConfirm: m, handleOpen: p } = D({
-    onConfirm: s
+  const { theme: n } = j(), { isOpen: f, handleCancel: x, handleConfirm: g, handleOpen: u } = k({
+    onConfirm: h
   });
-  return /* @__PURE__ */ t(h, { open: c, children: [
-    /* @__PURE__ */ e(f, { text: l, theme: n, onOpen: p }),
-    /* @__PURE__ */ t(x, { children: [
-      /* @__PURE__ */ e(g, { className: "bg-black opacity-75 inset-0 fixed" }),
-      /* @__PURE__ */ t(u, { className: "bg-white rounded-md fixed top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 flex flex-col gap-8 p-6", children: [
-        /* @__PURE__ */ e(C, { className: "font-bold text-center text-2xl", children: o }),
-        /* @__PURE__ */ e(b, { children: i }),
+  return /* @__PURE__ */ t(C, { open: f, children: [
+    /* @__PURE__ */ e(b, { text: m, theme: a, onOpen: u }),
+    /* @__PURE__ */ t(y, { children: [
+      /* @__PURE__ */ e(N, { className: "bg-black opacity-75 inset-0 fixed" }),
+      /* @__PURE__ */ t(O, { className: "bg-white rounded-md fixed top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 flex flex-col gap-8 p-6", children: [
+        /* @__PURE__ */ e(A, { className: "font-bold text-center text-2xl", children: p }),
+        /* @__PURE__ */ e(D, { children: d }),
         /* @__PURE__ */ t("div", { className: "flex flex-row gap-5 justify-end", children: [
-          /* @__PURE__ */ e(y, { asChild: !0, children: /* @__PURE__ */ e(
-            a,
+          /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(
+            l,
             {
               type: "button",
-              theme: n ?? r,
+              theme: a ?? n,
               variant: "secondary",
-              onClick: d,
-              children: "Cancel"
+              className: r(o),
+              onClick: x,
+              children: i
             }
           ) }),
-          /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ e(
-            a,
+          /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+            l,
             {
               type: "button",
-              theme: n ?? r,
+              theme: a ?? n,
               variant: "danger",
-              onClick: m,
-              children: "OK"
+              className: r(s),
+              onClick: g,
+              children: c
             }
           ) })
         ] })
@@ -50,5 +57,5 @@ const B = ({
   ] });
 };
 export {
-  B as AlertDialog
+  G as AlertDialog
 };

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

@@ -2,10 +2,15 @@ import { PropsWithChildren } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { buttonAlertDialogVariants } from './AlertDialog.variants';
 export interface AlertDialogProps extends PropsWithChildren, VariantProps<typeof buttonAlertDialogVariants> {
-    className?: string;
+    buttonCancelClassName?: string;
+    buttonCancelText?: string;
+    buttonConfirmClassName?: string;
+    buttonConfirmText?: string;
     buttonText?: string;
-    title?: string;
+    className?: string;
     description?: string;
+    o?: string;
+    title?: string;
     onConfirm?: () => void;
 }
 export type UseAlertiDialogProps = {

package/dist/components/Autocomplete/Autocomplete.js

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

package/dist/components/Autocomplete/components/List/List.js

@@ -0,0 +1,60 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as u } from "react";
+import { cn as l } from "../../../../utils/index.js";
+import { useNavigationUlList as b } from "../../hooks/useNavigationList.js";
+import { emptyListVariants as N, listVariants as d, listItemVariants as x, buttonVariants as V } from "./List.variants.js";
+const R = ({
+  className: e,
+  inputRef: a,
+  options: o,
+  placeholder: m,
+  placeholderClassName: c,
+  variant: t,
+  theme: r,
+  wrapperRef: f,
+  onClick: p
+}) => {
+  const n = u(null);
+  return b({ ulRef: n, inputRef: a, wrapperRef: f, options: o }), o.length === 0 ? /* @__PURE__ */ s(
+    "span",
+    {
+      className: l(
+        N({
+          theme: r,
+          variant: t,
+          className: c
+        })
+      ),
+      children: m
+    }
+  ) : /* @__PURE__ */ s(
+    "ul",
+    {
+      ref: n,
+      role: "listbox",
+      className: l(d({ variant: t, theme: r, className: e })),
+      children: o.map(({ value: i }) => /* @__PURE__ */ s(
+        "li",
+        {
+          role: "option",
+          tabIndex: 0,
+          className: l(x({ theme: r, variant: t })),
+          children: /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              role: "button",
+              className: l(V({ theme: r, variant: t })),
+              onClick: () => p(i),
+              children: i
+            }
+          )
+        },
+        i
+      ))
+    }
+  );
+};
+export {
+  R as List
+};

package/dist/components/Autocomplete/components/{List.types.d.ts → List/List.types.d.ts}

@@ -1,7 +1,7 @@
-import { ComponentRef, ReactNode, RefObject } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { Option } from '../Autocomplete.types';
-import { autocompleteVariants } from '../Autocomplete.variants';
+import { ComponentRef, ReactNode, RefObject } from 'react';
+import { Option } from '../../Autocomplete.types';
+import { autocompleteVariants } from '../../Autocomplete.variants';
 export interface Props extends VariantProps<typeof autocompleteVariants> {
     className?: string;
     inputRef: RefObject<ComponentRef<'input'> | null>;

package/dist/components/Autocomplete/components/{List.variants.js → List/List.variants.js}

@@ -1,4 +1,4 @@
-import { c as t } from "../../../index-BNmRGtA6.js";
+import { c as t } from "../../../../index-BNmRGtA6.js";
 const a = t(["max-h-[250px]", "overflow-y-auto"], {
   variants: {
     variant: {

package/dist/components/Autocomplete/components/index.d.ts

@@ -0,0 +1 @@
+export * from './List/List';

package/dist/components/Autocomplete/components/index.js

@@ -0,0 +1,4 @@
+import { List as t } from "./List/List.js";
+export {
+  t as List
+};

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,24 +1,25 @@
-import { jsx as a, jsxs as v, Fragment as g } from "react/jsx-runtime";
-import u, { forwardRef as b, Fragment as y } from "react";
+import { jsx as a, jsxs as g, Fragment as b } from "react/jsx-runtime";
+import d, { forwardRef as y, Fragment as O } from "react";
 import "../../contexts/theme.context.js";
-import { useTheme as O } from "../../contexts/theme.hook.js";
+import { useTheme as j } 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-DxYsZvj_.js";
-import { P as m } from "../../index-D68N8v8R.js";
-function h() {
-  return h = Object.assign || function(e) {
+import { cn as h } from "../../utils/index.js";
+import { breadcrumbVariants as w, breadcrumbItemVariants as x, chevronVariants as P } from "./Breadcrumb.variants.js";
+import { u as k, L as N } from "../../useBreadcrumb-DxYsZvj_.js";
+import { P as c } from "../../index-D68N8v8R.js";
+function f() {
+  return f = Object.assign || function(e) {
     for (var n = 1; n < arguments.length; n++) {
       var t = arguments[n];
       for (var r in t)
         Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
     }
     return e;
-  }, h.apply(this, arguments);
+  }, f.apply(this, arguments);
 }
-function N(e, n) {
+function T(e, n) {
   if (e == null) return {};
-  var t = T(e, n), r, o;
+  var t = L(e, n), r, o;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (o = 0; o < i.length; o++)
@@ -26,16 +27,16 @@ function N(e, n) {
   }
   return t;
 }
-function T(e, n) {
+function L(e, n) {
   if (e == null) return {};
   var t = {}, r = Object.keys(e), o, i;
   for (i = 0; i < r.length; i++)
     o = r[i], !(n.indexOf(o) >= 0) && (t[o] = e[o]);
   return t;
 }
-var f = b(function(e, n) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, o = e.size, i = o === void 0 ? 24 : o, s = N(e, ["color", "size"]);
-  return /* @__PURE__ */ u.createElement("svg", h({
+var p = y(function(e, n) {
+  var t = e.color, r = t === void 0 ? "currentColor" : t, o = e.size, i = o === void 0 ? 24 : o, s = T(e, ["color", "size"]);
+  return /* @__PURE__ */ d.createElement("svg", f({
     ref: n,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -46,60 +47,64 @@ var f = b(function(e, n) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ u.createElement("polyline", {
+  }, s), /* @__PURE__ */ d.createElement("polyline", {
     points: "9 18 15 12 9 6"
   }));
 });
-f.propTypes = {
-  color: m.string,
-  size: m.oneOfType([m.string, m.number])
+p.propTypes = {
+  color: c.string,
+  size: c.oneOfType([c.string, c.number])
 };
-f.displayName = "ChevronRight";
-const I = ({
+p.displayName = "ChevronRight";
+const W = ({
   className: e,
   size: n,
   steps: t,
   theme: r
 }) => {
-  const { theme: o } = O(), { isInsideRouter: i } = P(), s = r ?? o;
+  const { theme: o } = j(), { isInsideRouter: i } = k(), s = r ?? o;
   return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ a(
     "ol",
     {
-      className: j({ theme: s, className: e, size: n }),
-      children: t.map(({ label: l, to: c, target: p }, d) => /* @__PURE__ */ v(y, { children: [
+      className: h(
+        w({ theme: s, className: e, size: n })
+      ),
+      children: t.map(({ label: m, to: l, target: u }, v) => /* @__PURE__ */ g(O, { children: [
         /* @__PURE__ */ a(
           "li",
           {
-            className: w({ theme: s, size: n }),
-            children: c ? /* @__PURE__ */ a(g, { children: i ? /* @__PURE__ */ a(
-              k,
+            className: h(
+              x({ theme: s, size: n })
+            ),
+            children: l ? /* @__PURE__ */ a(b, { children: i ? /* @__PURE__ */ a(
+              N,
               {
-                to: c,
-                target: p,
+                to: l,
+                target: u,
                 className: "hover:underline hover:underline-offset-2",
-                children: l
+                children: m
               }
             ) : /* @__PURE__ */ a(
               "a",
               {
-                href: c,
-                target: p,
+                href: l,
+                target: u,
                 className: "hover:underline hover:underline-offset-2",
-                children: l
+                children: m
               }
-            ) }) : /* @__PURE__ */ a("span", { "aria-current": "page", children: l })
+            ) }) : /* @__PURE__ */ a("span", { "aria-current": "page", children: m })
           }
         ),
-        d !== t.length - 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
-          f,
+        v !== t.length - 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+          p,
           {
-            className: x({ size: n, theme: s })
+            className: h(P({ size: n, theme: s }))
           }
         ) })
-      ] }, l))
+      ] }, m))
     }
   ) });
 };
 export {
-  I as Breadcrumb
+  W as Breadcrumb
 };

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

@@ -1,7 +1,7 @@
 export declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "danger" | "text" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | "text" | "circle" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     theme?: "kubefirst" | "colony" | "civo" | null | undefined;
-    size?: "default" | null | undefined;
     disabled?: boolean | null | undefined;
+    size?: "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
+const a = e(
   [
     "border",
     "cursor-pointer",
@@ -15,7 +15,10 @@ const t = e(
     "justify-center",
     "rounded",
     "transition-colors",
-    "whitespace-nowrap"
+    "whitespace-nowrap",
+    "h-10",
+    "p-4",
+    "text-sm"
   ],
   {
     variants: {
@@ -29,7 +32,8 @@ const t = e(
           "hover:bg-red-700",
           "hover:border-red-700"
         ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"]
+        text: ["bg-transparent", "border-transparent", "text-slate-500"],
+        circle: ["rounded-full", "p-1"]
       },
       version: {
         default: "",
@@ -40,12 +44,13 @@ const t = e(
         colony: "",
         kubefirst: ""
       },
-      size: {
-        default: "h-10 p-4 text-sm"
-      },
       disabled: {
         true: ["text-zinc-500", "border-zinc-200", "bg-zinc-200"],
         false: ""
+      },
+      size: {
+        medium: "",
+        large: ""
       }
     },
     compoundVariants: [
@@ -185,17 +190,146 @@ const t = e(
         variant: "text",
         disabled: !0,
         class: ["bg-transparent", "border-transparent", "text-zinc-400"]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "kubefirst",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-kubefirst-primary/5",
+          "hover:text-kubefirst-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "kubefirst",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-kubefirst-primary/5",
+          "hover:text-kubefirst-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "colony",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-colony-primary/5",
+          "hover:text-colony-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "colony",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-colony-primary/5",
+          "hover:text-colony-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        theme: "civo",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-civo-primary/5",
+          "hover:text-civo-primary",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        theme: "civo",
+        disabled: !1,
+        class: [
+          "text-slate-400",
+          "bg-transparent",
+          "border-transparent",
+          "hover:bg-civo-primary/5",
+          "hover:text-civo-primary",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "medium",
+        disabled: !0,
+        class: [
+          "text-slate-300",
+          "bg-transparent",
+          "border-transparent",
+          "w-8",
+          "h-8",
+          "[&>svg]:w-5",
+          "[&>svg]:h-5"
+        ]
+      },
+      {
+        variant: "circle",
+        size: "large",
+        disabled: !0,
+        class: [
+          "text-slate-300",
+          "bg-transparent",
+          "border-transparent",
+          "w-11",
+          "h-11",
+          "[&>svg]:w-6",
+          "[&>svg]:h-6"
+        ]
       }
     ],
     defaultVariants: {
       variant: "primary",
       theme: "kubefirst",
       version: "default",
-      size: "default",
       disabled: !1
     }
   }
 );
 export {
-  t as buttonVariants
+  a as buttonVariants
 };