@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.3

package/dist/components/Alert/Alert.js

@@ -0,0 +1,58 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useRef as V, useState as v, useMemo as x, isValidElement as k, useCallback as w, useEffect as y } from "react";
+import { V as A } from "../../index-CbTU3cnP.js";
+import { cn as c } from "../../utils/index.js";
+import { closeButtonVariants as E, alertVariants as T } from "./Alert.variants.js";
+import { useTheme as g } from "../../contexts/theme.hook.js";
+import { X as j } from "../../x-DU-Zw-L_.js";
+const I = ({
+  theme: u,
+  type: s,
+  content: t,
+  isVisible: n = !0,
+  showCloseButton: d = !1
+}) => {
+  const r = V(null), [p, f] = v(n), { theme: h } = g(), l = u ?? h, b = x(
+    () => k(t) ? t : /* @__PURE__ */ o("p", { children: t }),
+    [t]
+  ), C = w(() => {
+    const e = r.current;
+    e && e.setAttribute("data-state", "hidden");
+  }, []);
+  return y(() => {
+    var i;
+    const e = new AbortController();
+    return (i = r.current) == null || i.addEventListener(
+      "animationend",
+      () => {
+        var a;
+        (a = r.current) == null || a.style.setProperty("display", "none"), f(!1);
+      },
+      { signal: e.signal }
+    ), () => e.abort();
+  }, []), p ? /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: c(T({ theme: l, type: s, isVisible: n })),
+      "data-state": n ? "visible" : "hidden",
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        b,
+        d ? /* @__PURE__ */ m("button", { role: "button", onClick: C, children: [
+          /* @__PURE__ */ o(
+            j,
+            {
+              className: c(E({ theme: l, type: s }))
+            }
+          ),
+          /* @__PURE__ */ o(A, { children: "Dismiss alert" })
+        ] }) : null
+      ]
+    }
+  ) : null;
+};
+export {
+  I as Alert
+};

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

@@ -0,0 +1,77 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const a = t(
+  [
+    "relative",
+    "border",
+    "py-4",
+    "px-5",
+    "rounded",
+    "flex",
+    "gap-2",
+    "items-center",
+    "justify-start",
+    "[&>*]:flex",
+    "[&>*]:gap-2",
+    "[&>*]:items-center",
+    "[&>*]:justify-start",
+    "text-sm",
+    "shadow-sm",
+    "duration-300",
+    "data-[state=hidden]:animate-out",
+    "data-[state=hidden]:fade-out-0",
+    "data-[state=hidden]:zoom-out-95"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      type: {
+        sucess: "",
+        info: [
+          "border-blue-100",
+          "bg-blue-50",
+          "text-zinc-700",
+          "[&>*>svg]:text-blue-600",
+          "shadow-blue-50/40"
+        ],
+        warning: "",
+        danger: ""
+      },
+      isVisible: {
+        true: "",
+        false: "hidden"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      isVisible: !0
+    }
+  }
+), s = t(
+  ["w-4", "h-4", "absolute", "right-2", "top-2", "text-inherit"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      type: {
+        sucess: "",
+        info: ["text-blue-600"],
+        warning: "",
+        danger: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  a as alertVariants,
+  s as closeButtonVariants
+};

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-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 "../../index-BVppSRDQ.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 "../../index-DUA6Y_AE.js";
 import { cn as l } from "../../utils/index.js";
 import { Button as r } from "../Button/Button.js";
 import { useAlertDialog as j } from "./hooks/useAlertDialog.js";

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

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { A as p } from "../../../index-BVppSRDQ.js";
+import { A as p } from "../../../index-DUA6Y_AE.js";
 import "../../Button/Button.js";
 import "../../../contexts/theme.hook.js";
 export {

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useRef as u } from "react";
 import { cn as l } from "../../../../utils/index.js";
-import { emptyListVariants as b, listVariants as N, listItemVariants as d, buttonVariants as x } from "./List.variants.js";
+import { emptyListVariants as b, buttonVariants as N, listItemVariants as d, listVariants as x } from "./List.variants.js";
 import { useNavigationUlList as V } from "../../hooks/useNavigationList.js";
 const R = ({
   className: e,
@@ -32,7 +32,7 @@ const R = ({
     {
       ref: n,
       role: "listbox",
-      className: l(N({ variant: t, theme: r, className: e })),
+      className: l(x({ variant: t, theme: r, className: e })),
       children: o.map(({ value: i }) => /* @__PURE__ */ s(
         "li",
         {
@@ -44,7 +44,7 @@ const R = ({
             {
               type: "button",
               role: "button",
-              className: l(x({ theme: r, variant: t })),
+              className: l(N({ theme: r, variant: t })),
               onClick: () => p(i),
               children: i
             }

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as y } from "react/jsx-runtime";
 import d, { forwardRef as O, useId as j, Fragment as w } from "react";
 import { cn as c } from "../../utils/index.js";
-import { breadcrumbWrapperVariants as x, breadcrumbVariants as P, chevronVariants as T } from "./Breadcrumb.variants.js";
+import { chevronVariants as x, breadcrumbVariants as P, breadcrumbWrapperVariants as T } from "./Breadcrumb.variants.js";
 import { Item as k } from "./components/Item/Item.js";
 import { P as s } from "../../index-C5psggHV.js";
 import { useTheme as N } from "../../contexts/theme.hook.js";
@@ -69,7 +69,7 @@ const V = ({
     {
       "aria-label": o,
       className: c(
-        x({
+        T({
           className: i,
           theme: m
         })
@@ -95,7 +95,7 @@ const V = ({
             u !== r.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", children: /* @__PURE__ */ a(
               p,
               {
-                className: c(T({ size: n, theme: m }))
+                className: c(x({ size: n, theme: m }))
               }
             ) })
           ] }, `${g}-${f}`))

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

@@ -1,7 +1,7 @@
 import { jsx as r, Fragment as p } from "react/jsx-runtime";
 import { cn as n } from "../../../../utils/index.js";
-import { u as b, L as k } from "../../../../useBreadcrumb-CojbXFVD.js";
-import { breadcrumbItemVariants as L, breadcrumbLinkVariants as c, breadcrumbLabelVariants as N } from "./Item.variants.js";
+import { u as b, L as k } from "../../../../useBreadcrumb-BsIeMoR1.js";
+import { breadcrumbLinkVariants as c, breadcrumbLabelVariants as L, breadcrumbItemVariants as N } from "./Item.variants.js";
 import { useTheme as x } from "../../../../contexts/theme.hook.js";
 const j = ({
   isActive: e,
@@ -19,7 +19,7 @@ const j = ({
     "li",
     {
       "aria-current": o ? "page" : void 0,
-      className: n(L({ theme: m, size: d })),
+      className: n(N({ theme: m, size: d })),
       children: a ? /* @__PURE__ */ r(p, { children: u ? /* @__PURE__ */ r(
         k,
         {
@@ -48,7 +48,7 @@ const j = ({
         "span",
         {
           className: n(
-            N({ theme: m, isActive: e })
+            L({ theme: m, isActive: e })
           ),
           children: s
         }

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

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

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsx as h } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { S as u } from "../../index-DoOsnuB6.js";
+import { S as u } from "../../index-B_6_jmOO.js";
 import { cn as l } from "../../utils/index.js";
 import { buttonVariants as x } from "./Button.variants.js";
 import { useTheme as T } from "../../contexts/theme.hook.js";

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { cn as t } from "../../utils/index.js";
-import { cardBaseVariants as n, cardVariants as p } from "./Card.variants.js";
+import { cardVariants as n, cardBaseVariants as p } from "./Card.variants.js";
 import { useTheme as h } from "../../contexts/theme.hook.js";
 const l = f(
   ({ className: s, theme: r, isActive: m, canHover: a, wrapperClassName: d, ...i }, c) => {
@@ -10,7 +10,7 @@ const l = f(
       "div",
       {
         className: t(
-          n({
+          p({
             canHover: a,
             className: d,
             isActive: m,
@@ -22,7 +22,7 @@ const l = f(
           {
             ref: c,
             className: t(
-              p({
+              n({
                 className: s,
                 theme: r ?? e,
                 isActive: m,

package/dist/components/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsxs as S, jsx as f } from "react/jsx-runtime";
 import * as u from "react";
 import j, { forwardRef as _, useId as A, useCallback as H } from "react";
-import { u as K } from "../../index-DoOsnuB6.js";
-import { a as W, d as I, c as $ } from "../../index-8vgf-x5i.js";
-import { u as q, a as F } from "../../index-BxeV34ij.js";
-import { P as V } from "../../index-D4Q2rMby.js";
-import { P as T } from "../../index-1GLoikpT.js";
+import { u as K } from "../../index-B_6_jmOO.js";
+import { a as W, c as $, b as I } from "../../index-Cva-e5M4.js";
+import { u as q, a as F } from "../../index-4ecjw_Aj.js";
+import { P as V } from "../../index-Dj1pom3_.js";
+import { P as T } from "../../index-D7QNmo_D.js";
 import { cn as N } from "../../utils/index.js";
 import { checkboxVariants as X, labelVariants as G } from "./Checkbox.variants.js";
 import { useToggle as J } from "../../hooks/useToggle.js";

package/dist/components/Command/Command.js

@@ -0,0 +1,32 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { R as t, D as s } from "../../index-DyKo5ZJT.js";
+import { V as p } from "../../index-CbTU3cnP.js";
+import { cn as r } from "../../utils/index.js";
+import { wrapperVariants as l } from "./Command.variants.js";
+import { DialogContent as f } from "./components/DialogContent.js";
+import { Command as c } from "./components/Command.js";
+import { CommandGroup as R } from "./components/CommandGroup.js";
+import { CommandItem as v } from "./components/CommandItem.js";
+import { CommandSeparator as G } from "./components/CommandSeparator.js";
+const g = ({
+  children: m,
+  title: a,
+  titleClassName: e,
+  wrapperClassName: n,
+  ...d
+}) => /* @__PURE__ */ o(t, { ...d, children: /* @__PURE__ */ i(f, { className: "overflow-hidden p-0 border-0 !rounded-none", children: [
+  /* @__PURE__ */ o(s, { className: r("hidden", e), children: /* @__PURE__ */ o(p, { children: a }) }),
+  /* @__PURE__ */ o(
+    c,
+    {
+      className: r(l({ className: n })),
+      children: m
+    }
+  )
+] }) });
+export {
+  g as Command,
+  R as CommandGroup,
+  v as CommandItem,
+  G as CommandSeparator
+};

package/dist/components/Command/Command.variants.js

@@ -0,0 +1,97 @@
+import { c as e } from "../../index-BNmRGtA6.js";
+const r = e([], {
+  variants: {
+    theme: {
+      colony: "",
+      kubefirst: "",
+      civo: ""
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst"
+  }
+}), o = e(
+  [
+    "[&_[cmdk-group-heading]]:font-medium",
+    "[&_[cmdk-group-heading]]:px-2",
+    "[&_[cmdk-group-heading]]:text-muted-foreground",
+    "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
+    "[&_[cmdk-group]]:px-2",
+    "[&_[cmdk-input-wrapper]_svg]:h-5",
+    "[&_[cmdk-input-wrapper]_svg]:w-5",
+    "[&_[cmdk-input]]:h-12",
+    "[&_[cmdk-item]]:px-2",
+    "[&_[cmdk-item]]:py-3",
+    "[&_[cmdk-item]_svg]:h-5",
+    "[&_[cmdk-item]_svg]:w-5",
+    "bg-popover",
+    "flex",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "text-popover-foreground",
+    "border",
+    "rounded-md",
+    "border-neutral-900/35",
+    "bg-neutral-900/30"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), n = e(
+  [
+    "bg-transparent",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "flex",
+    "h-10",
+    "outline-none",
+    "placeholder:text-muted-foreground",
+    "py-3",
+    "rounded-md",
+    "text-sm",
+    "w-full",
+    "text-white/80"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), i = e(
+  ["mr-2", "h-4", "w-4", "shrink-0", "opacity-80", "text-white"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  r as commandVariants,
+  n as inputVariants,
+  i as searchInconInputVariants,
+  o as wrapperVariants
+};

package/dist/components/Command/components/Command.js

@@ -0,0 +1,8 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { V as o } from "../../../index-CzSBQN5S.js";
+const s = p(({ className: r, children: a, ...e }, i) => /* @__PURE__ */ m(o, { ref: i, className: r, ...e, children: /* @__PURE__ */ m("div", { className: "w-[500px]", children: a }) }));
+s.displayName = o.displayName;
+export {
+  s as Command
+};

package/dist/components/Command/components/CommandEmpty.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { V as m } from "../../../index-CzSBQN5S.js";
+const r = p((t, e) => /* @__PURE__ */ o(
+  m.Empty,
+  {
+    ref: e,
+    className: "py-6 text-center text-sm",
+    ...t
+  }
+));
+r.displayName = m.Empty.displayName;
+export {
+  r as CommandEmpty
+};

package/dist/components/Command/components/CommandGroup.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { V as o } from "../../../index-CzSBQN5S.js";
+import { cn as a } from "../../../utils/index.js";
+const t = p(({ className: r, ...m }, d) => /* @__PURE__ */ e(
+  o.Group,
+  {
+    ref: d,
+    className: a(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      r
+    ),
+    ...m
+  }
+));
+t.displayName = o.Group.displayName;
+export {
+  t as CommandGroup
+};

package/dist/components/Command/components/CommandInput.js

@@ -0,0 +1,84 @@
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { V as m } from "../../../index-CzSBQN5S.js";
+import s, { forwardRef as u } from "react";
+import { cn as f } from "../../../utils/index.js";
+import { searchInconInputVariants as v, inputVariants as g } from "../Command.variants.js";
+import { P as a } from "../../../index-C5psggHV.js";
+function p() {
+  return p = Object.assign || function(r) {
+    for (var n = 1; n < arguments.length; n++) {
+      var e = arguments[n];
+      for (var t in e)
+        Object.prototype.hasOwnProperty.call(e, t) && (r[t] = e[t]);
+    }
+    return r;
+  }, p.apply(this, arguments);
+}
+function h(r, n) {
+  if (r == null) return {};
+  var e = b(r, n), t, o;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(r);
+    for (o = 0; o < i.length; o++)
+      t = i[o], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (e[t] = r[t]);
+  }
+  return e;
+}
+function b(r, n) {
+  if (r == null) return {};
+  var e = {}, t = Object.keys(r), o, i;
+  for (i = 0; i < t.length; i++)
+    o = t[i], !(n.indexOf(o) >= 0) && (e[o] = r[o]);
+  return e;
+}
+var l = u(function(r, n) {
+  var e = r.color, t = e === void 0 ? "currentColor" : e, o = r.size, i = o === void 0 ? 24 : o, d = h(r, ["color", "size"]);
+  return /* @__PURE__ */ s.createElement("svg", p({
+    ref: n,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, d), /* @__PURE__ */ s.createElement("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
+  }), /* @__PURE__ */ s.createElement("line", {
+    x1: "21",
+    y1: "21",
+    x2: "16.65",
+    y2: "16.65"
+  }));
+});
+l.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+l.displayName = "Search";
+const x = u(({ className: r, ...n }, e) => /* @__PURE__ */ y(
+  "div",
+  {
+    className: "flex items-center px-3 border-b border-neutral-900/35",
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ c(l, { className: f(v({ className: r })) }),
+      /* @__PURE__ */ c(
+        m.Input,
+        {
+          ref: e,
+          className: f(g({ className: r })),
+          ...n
+        }
+      )
+    ]
+  }
+));
+x.displayName = m.Input.displayName;
+export {
+  x as CommandInput
+};

package/dist/components/Command/components/CommandItem.js

@@ -0,0 +1,29 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as i, useContext as p, useCallback as c } from "react";
+import { V as r } from "../../../index-CzSBQN5S.js";
+import { cn as l } from "../../../utils/index.js";
+import { CommandContext as u } from "../contexts/Command.context.js";
+const f = i(({ className: a, onSelect: e, ...s }, o) => {
+  const { setOpen: t } = p(u), n = c(
+    (m) => {
+      e == null || e(m), t(!1);
+    },
+    [t, e]
+  );
+  return /* @__PURE__ */ d(
+    r.Item,
+    {
+      ref: o,
+      className: l(
+        "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        a
+      ),
+      onSelect: n,
+      ...s
+    }
+  );
+});
+f.displayName = r.Item.displayName;
+export {
+  f as CommandItem
+};

package/dist/components/Command/components/CommandList.js

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { V as o } from "../../../index-CzSBQN5S.js";
+import { cn as t } from "../../../utils/index.js";
+const e = s(({ className: m, ...r }, a) => /* @__PURE__ */ i(
+  o.List,
+  {
+    ref: a,
+    className: t("max-h-[300px] overflow-y-auto overflow-x-hidden", m),
+    ...r
+  }
+));
+e.displayName = o.List.displayName;
+export {
+  e as CommandList
+};

package/dist/components/Command/components/CommandSeparator.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { V as r } from "../../../index-CzSBQN5S.js";
+import { cn as t } from "../../../utils/index.js";
+const s = p(({ className: o, ...a }, m) => /* @__PURE__ */ e(
+  r.Separator,
+  {
+    ref: m,
+    className: t("-mx-1 h-px border-t border-neutral-900/45 mb-2", o),
+    ...a
+  }
+));
+s.displayName = r.Separator.displayName;
+export {
+  s as CommandSeparator
+};

package/dist/components/Command/components/CommandShortcut.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as r } from "../../../utils/index.js";
+const a = ({
+  className: t,
+  ...o
+}) => /* @__PURE__ */ m(
+  "span",
+  {
+    className: r(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      t
+    ),
+    ...o
+  }
+);
+a.displayName = "CommandShortcut";
+export {
+  a as CommandShortcut
+};