@konstructio/ui 0.0.12-alpha.0 → 0.0.12-alpha.10

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
+};

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

@@ -0,0 +1,31 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { a as r, C as o, b as l } from "../../../index-DyKo5ZJT.js";
+import { cn as m } from "../../../utils/index.js";
+import { DialogOverlay as p } from "./DialogOverlay.js";
+import { X as c } from "../../../x-DU-Zw-L_.js";
+const f = i(({ className: e, children: s, ...n }, d) => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ a(p, {}),
+  /* @__PURE__ */ t(
+    o,
+    {
+      ref: d,
+      className: m(
+        "fixed text-white left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        e
+      ),
+      ...n,
+      children: [
+        s,
+        /* @__PURE__ */ t(l, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white", children: [
+          /* @__PURE__ */ a(c, { className: "h-4 w-4" }),
+          /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+f.displayName = o.displayName;
+export {
+  f as DialogContent
+};

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

@@ -0,0 +1,19 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { O as a } from "../../../index-DyKo5ZJT.js";
+import { cn as m } from "../../../utils/index.js";
+const r = i(({ className: t, ...e }, o) => /* @__PURE__ */ s(
+  a,
+  {
+    ref: o,
+    className: m(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      t
+    ),
+    ...e
+  }
+));
+r.displayName = a.displayName;
+export {
+  r as DialogOverlay
+};

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

@@ -0,0 +1,20 @@
+import { CommandEmpty as r } from "./CommandEmpty.js";
+import { CommandGroup as p } from "./CommandGroup.js";
+import { CommandInput as a } from "./CommandInput.js";
+import { CommandItem as f } from "./CommandItem.js";
+import { CommandList as C } from "./CommandList.js";
+import { CommandSeparator as u } from "./CommandSeparator.js";
+import { CommandShortcut as I } from "./CommandShortcut.js";
+import { DialogContent as c } from "./DialogContent.js";
+import { Command as h } from "./Command.js";
+export {
+  h as Command,
+  r as CommandEmpty,
+  p as CommandGroup,
+  a as CommandInput,
+  f as CommandItem,
+  C as CommandList,
+  u as CommandSeparator,
+  I as CommandShortcut,
+  c as DialogContent
+};

package/dist/components/Command/contexts/Command.context.js

@@ -0,0 +1,13 @@
+import { createContext as e } from "react";
+const t = {
+  isOpen: !1,
+  setOpen: () => {
+    throw new Error("onOpen is not implemented");
+  },
+  toggleOpen: () => {
+    throw new Error("toggleOpen is not implemented");
+  }
+}, o = e(t);
+export {
+  o as CommandContext
+};

package/dist/components/Command/contexts/Command.provider.js

@@ -0,0 +1,24 @@
+import { CommandContext as s } from "./Command.context.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as e } from "react";
+import { useToggle as p } from "../../../hooks/useToggle.js";
+const f = ({ children: t }) => {
+  const [r, o] = p(!1), n = e(
+    (l) => o(l),
+    [o]
+  ), m = e(() => o(), [o]);
+  return /* @__PURE__ */ a(
+    s.Provider,
+    {
+      value: {
+        isOpen: r,
+        setOpen: n,
+        toggleOpen: m
+      },
+      children: t
+    }
+  );
+};
+export {
+  f as CommandProvider
+};

package/dist/components/Command/contexts/index.js

@@ -0,0 +1,6 @@
+import { CommandContext as r } from "./Command.context.js";
+import { CommandProvider as t } from "./Command.provider.js";
+export {
+  r as CommandContext,
+  t as CommandProvider
+};

package/dist/components/Divider/Divider.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { dividerVariants as a } from "./Divider.variants.js";
+const d = ({
+  className: i,
+  ...r
+}) => /* @__PURE__ */ e("div", { className: a({ className: i }), ...r });
+d.displayName = "Divider";
+export {
+  d as Divider
+};

package/dist/components/Divider/Divider.variants.js

@@ -0,0 +1,14 @@
+import { c as a } from "../../index-BNmRGtA6.js";
+const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  i as dividerVariants
+};

package/dist/components/Dropdown/Dropdown.js

@@ -1,10 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import "./components/List/List.js";
+import { forwardRef as f } from "react";
+import { DropdownProvider as i } from "./contexts/dropdown.provider.js";
 import { Wrapper as t } from "./components/Wrapper.js";
-import "./contexts/dropdown.context.js";
-import { DropdownProvider as f } from "./contexts/dropdown.provider.js";
-const s = i(({ onChange: o, ...p }, m) => /* @__PURE__ */ r(f, { onChange: o, children: /* @__PURE__ */ r(t, { ref: m, ...p }) }));
+const a = f(({ onChange: o, ...p }, m) => /* @__PURE__ */ r(i, { onChange: o, children: /* @__PURE__ */ r(t, { ref: m, ...p }) }));
 export {
-  s as Dropdown
+  a as Dropdown
 };

package/dist/components/Dropdown/Dropdown.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(
+const t = e(
   [
     "border",
     "cursor-pointer",
@@ -13,7 +13,8 @@ const a = e(
     "rounded-md",
     "transition-all",
     "w-full",
-    "outline-none"
+    "outline-none",
+    "h-9"
   ],
   {
     variants: {
@@ -35,7 +36,25 @@ const a = e(
       theme: "kubefirst"
     }
   }
+), a = e(
+  [
+    "mb-1",
+    "cursor-pointer",
+    "text-[14px]",
+    "leading-[20px]",
+    "tracking-[0.1px]"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      }
+    }
+  }
 );
 export {
-  a as dropdownVariants
+  t as dropdownVariants,
+  a as labelVariants
 };

package/dist/components/Dropdown/components/List/List.js

@@ -1,26 +1,25 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as p, useRef as a, useImperativeHandle as u } from "react";
+import { forwardRef as a, useRef as p, useImperativeHandle as u } from "react";
 import { cn as c } from "../../../../utils/index.js";
 import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
-import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
-import "../../contexts/dropdown.context.js";
-import { ListItem as v } from "../ListItem/ListItem.js";
-import { listVariants as L } from "./List.variants.js";
-const C = p(
+import { ListItem as x } from "../ListItem/ListItem.js";
+import { listVariants as v } from "./List.variants.js";
+import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
+const j = a(
   ({ options: i, theme: t, wrapperRef: m, wrapperInputRef: s, name: l }, n) => {
-    const r = a(null), { isOpen: f } = x();
+    const r = p(null), { isOpen: f } = L();
     return u(n, () => r.current, [r]), d({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
       "ul",
       {
         ref: r,
         title: l,
         role: "listbox",
-        className: c(L({ theme: t }), f ? "flex" : "hidden"),
-        children: i.map((o) => /* @__PURE__ */ e(v, { theme: t, ...o }, o.value))
+        className: c(v({ theme: t }), f ? "flex" : "hidden"),
+        children: i.map((o) => /* @__PURE__ */ e(x, { theme: t, ...o }, o.value))
       }
     );
   }
 );
 export {
-  C as List
+  j as List
 };

package/dist/components/Dropdown/components/List/List.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../../../index-BNmRGtA6.js";
-const t = r(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const o = t(
   [
     "absolute",
     "bg-white",
@@ -20,7 +20,7 @@ const t = r(
     variants: {
       theme: {
         colony: ["border-red-400"],
-        kubefirst: ["border-kubefirst-primary"],
+        kubefirst: ["text-zinc-700"],
         civo: ""
       }
     },
@@ -30,5 +30,5 @@ const t = r(
   }
 );
 export {
-  t as listVariants
+  o as listVariants
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,37 +1,37 @@
-import { jsxs as i, jsx as f } from "react/jsx-runtime";
-import { useRef as u, useCallback as s } from "react";
-import { cn as p } from "../../../../utils/index.js";
-import { useDropdownContext as d } from "../../contexts/dropdown.hook.js";
-import "../../contexts/dropdown.context.js";
-import { listItemVariants as x } from "./ListItem.variants.js";
-const b = ({ theme: o, ...e }) => {
-  const { setValue: n, toggleOpen: r } = d(), c = u(null), l = s(
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useRef as p, useCallback as s } from "react";
+import { cn as d } from "../../../../utils/index.js";
+import { listItemVariants as u } from "./ListItem.variants.js";
+import { Typography as h } from "../../../Typography/Typography.js";
+import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
+const g = ({ theme: a, ...e }) => {
+  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
     (t) => {
       n(t), r(!1);
     },
     [n, r]
-  ), m = s(
-    (t, a) => {
-      t.key === "Enter" && l(a);
+  ), i = s(
+    (t, m) => {
+      t.key === "Enter" && l(m);
     },
     [l]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ f(
     "li",
     {
       ref: c,
       role: "option",
-      className: p(x({ theme: o })),
+      className: d(u({ theme: a })),
       tabIndex: 0,
       onClick: () => l(e),
-      onKeyDown: (t) => m(t, e),
+      onKeyDown: (t) => i(t, e),
       children: [
-        e.leftIcon ? /* @__PURE__ */ f("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
-        e.label
+        e.leftIcon ? /* @__PURE__ */ o("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
+        /* @__PURE__ */ o(h, { variant: "body2", className: "text-zinc-700", children: e.label })
       ]
     }
   );
 };
 export {
-  b as ListItem
+  g as ListItem
 };

package/dist/components/Dropdown/components/ListItem/ListItem.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../../../index-BNmRGtA6.js";
-const t = e(
+const o = e(
   [
     "cursor-pointer",
     "py-2",
@@ -10,12 +10,14 @@ const t = e(
     "w-full",
     "flex",
     "items-center",
-    "gap-3"
+    "gap-3",
+    "hover:bg-slate-50",
+    "focus:bg-slate-50"
   ],
   {
     variants: {
       theme: {
-        kubefirst: ["focus:bg-purple-100", "hover:bg-purple-100"],
+        kubefirst: [""],
         colony: ["focus:bg-red-100", "hover:bg-red-100"],
         civo: ""
       }
@@ -26,5 +28,5 @@ const t = e(
   }
 );
 export {
-  t as listItemVariants
+  o as listItemVariants
 };

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,72 +1,99 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as F, useId as L, useRef as N, useImperativeHandle as $, useEffect as f } from "react";
-import { cn as R } from "../../../utils/index.js";
-import "../../../contexts/theme.context.js";
-import { useTheme as A } from "../../../contexts/theme.hook.js";
-import "../../../js.cookie-OLEfuq_g.js";
-import { dropdownVariants as H } from "../Dropdown.variants.js";
-import { useDropdown as U } from "../hooks/useDropdown.js";
-import { useDropdownContext as W } from "../contexts/dropdown.hook.js";
-import "../contexts/dropdown.context.js";
-import { List as q } from "./List/List.js";
-import { C as z } from "../../../chevron-up-CvquEaNg.js";
-const _ = F(
-  ({ theme: g, label: p, placeholder: O, name: o, options: a, defaultValue: c }, j) => {
-    const d = L(), r = N(null), u = N(null), { wrapperRef: n, wrapperInputRef: h, handleOpen: y, handleOpenIfClosed: E } = U({ ulRef: u }), { isOpen: x, value: e, setValue: w, toggleOpen: b } = W(), { theme: T } = A(), v = g ?? T, i = o ? `${d}-${o}` : d;
-    $(j, () => r.current, [r]), f(() => {
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as $, useId as A, useRef as y, useImperativeHandle as H, useEffect as d } from "react";
+import { cn as p } from "../../../utils/index.js";
+import { labelVariants as U, dropdownVariants as V } from "../Dropdown.variants.js";
+import { useDropdown as W } from "../hooks/useDropdown.js";
+import { List as B } from "./List/List.js";
+import { Typography as R } from "../../Typography/Typography.js";
+import { C as G } from "../../../chevron-up-DgLBQCKD.js";
+import { useDropdownContext as J } from "../contexts/dropdown.hook.js";
+import { useTheme as K } from "../../../contexts/theme.hook.js";
+const te = $(
+  ({
+    theme: O,
+    label: u,
+    labelClassName: T,
+    placeholder: j,
+    name: o,
+    options: c,
+    defaultValue: m,
+    required: h
+  }, z) => {
+    const x = A(), r = y(null), b = y(null), { wrapperRef: n, wrapperInputRef: w, handleOpen: E, handleOpenIfClosed: k } = W({ ulRef: b }), { isOpen: v, value: e, setValue: N, toggleOpen: C } = J(), { theme: D } = K(), f = O ?? D, l = o ? `${x}-${o}` : x;
+    H(z, () => r.current, [r]), d(() => {
       r.current && (r.current.value = e ? e.value : "");
-    }, [e]), f(() => {
-      if (c) {
-        const s = a.find(
-          (l) => l.value === c
+    }, [e]), d(() => {
+      if (m) {
+        const a = c.find(
+          (s) => s.value === m
         );
-        s && w(s);
+        a && N(a);
       }
-    }, [c, a, w]), f(() => {
-      var l;
-      const s = new AbortController();
-      return (l = n.current) == null || l.addEventListener("focusout", (D) => {
-        var I;
-        const C = D.relatedTarget;
-        (!C || !((I = n.current) != null && I.contains(C))) && b(!1);
+    }, [m, c, N]), d(() => {
+      var s;
+      const a = new AbortController();
+      return (s = n.current) == null || s.addEventListener("focusout", (L) => {
+        var g;
+        const I = L.relatedTarget;
+        (!I || !((g = n.current) != null && g.contains(I))) && C(!1);
       }), () => {
-        s.abort();
+        a.abort();
       };
-    }, [b, n]);
-    const k = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ m("div", { ref: n, className: "flex flex-col w-full relative", children: [
-      p ? /* @__PURE__ */ t(
+    }, [C, n]);
+    const F = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
+    return /* @__PURE__ */ i("div", { ref: n, className: "flex flex-col w-full relative", children: [
+      u ? /* @__PURE__ */ i(
         "label",
         {
-          id: i,
-          className: "m-2 cursor-pointer",
-          htmlFor: i,
-          onClick: E,
-          children: p
+          id: l,
+          className: p(
+            U({ theme: f }),
+            T
+          ),
+          htmlFor: l,
+          onClick: k,
+          children: [
+            u,
+            h ? /* @__PURE__ */ t("span", { className: "text-red-500", children: "*" }) : null
+          ]
         }
       ) : null,
-      /* @__PURE__ */ m(
+      /* @__PURE__ */ i(
         "div",
         {
-          ref: h,
-          id: i,
-          className: R(H({ theme: v })),
+          ref: w,
+          id: l,
+          className: p(V({ theme: f })),
           role: "combobox",
-          onClick: y,
-          "aria-expanded": x,
+          onClick: E,
+          "aria-expanded": v,
           tabIndex: 0,
-          "aria-labelledby": i,
+          "aria-labelledby": l,
           children: [
-            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ m("span", { className: "flex gap-3 items-center", children: [
-              k(),
-              e.label
-            ] }) : O }),
+            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ i(
+              R,
+              {
+                variant: "body2",
+                className: "flex gap-3 items-center text-zinc-700",
+                children: [
+                  F(),
+                  e.label
+                ]
+              }
+            ) : /* @__PURE__ */ t(
+              R,
+              {
+                variant: "body2",
+                className: "flex gap-3 items-center text-zinc-700",
+                children: j
+              }
+            ) }),
             /* @__PURE__ */ t(
-              z,
+              G,
               {
-                className: R(
-                  "w-4 h-4 text-inherit transition-all duration-50",
-                  x ? "rotate-0" : "rotate-180"
+                className: p(
+                  "w-4 h-4 text-zinc-500 transition-all duration-50",
+                  v ? "rotate-0" : "rotate-180"
                 )
               }
             )
@@ -80,23 +107,24 @@ const _ = F(
           type: "text",
           name: o,
           className: "hidden",
-          "aria-hidden": "true"
+          "aria-hidden": "true",
+          required: h
         }
       ),
       /* @__PURE__ */ t(
-        q,
+        B,
         {
-          ref: u,
+          ref: b,
           name: o,
           wrapperRef: n,
-          wrapperInputRef: h,
-          options: a,
-          theme: v
+          wrapperInputRef: w,
+          options: c,
+          theme: f
         }
       )
     ] });
   }
 );
 export {
-  _ as Wrapper
+  te as Wrapper
 };

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,16 +1,16 @@
 import { jsx as u } from "react/jsx-runtime";
 import { useState as i, useCallback as c } from "react";
-import { useToggle as d } from "../../../hooks/useToggle.js";
-import { DropdownContext as f } from "./dropdown.context.js";
+import { DropdownContext as d } from "./dropdown.context.js";
+import { useToggle as f } from "../../../hooks/useToggle.js";
 const w = ({ children: t, onChange: o }) => {
-  const [e, s] = d(!1), [l, p] = i(null), m = c(
+  const [e, s] = f(!1), [l, p] = i(null), m = c(
     (r) => {
       o == null || o(r), p(r);
     },
     [o]
   );
   return /* @__PURE__ */ u(
-    f.Provider,
+    d.Provider,
     {
       value: { value: l, isOpen: e, setValue: m, toggleOpen: s },
       children: t

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,20 +1,18 @@
 import { useRef as u, useEffect as f, useCallback as p } from "react";
-import { useDropdownContext as w } from "../contexts/dropdown.hook.js";
-import "react/jsx-runtime";
-import "../contexts/dropdown.context.js";
-const k = ({ ulRef: a }) => {
-  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = w();
+import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
+const E = ({ ulRef: i }) => {
+  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = m();
   f(() => {
     var r;
     const n = new AbortController(), s = (t) => {
       t.key === "Escape" && e(!1);
-    }, i = (t) => {
+    }, a = (t) => {
       var d;
       (d = l.current) != null && d.contains(t.target) || e(!1);
     };
     return document.addEventListener("keydown", s, {
       signal: n.signal
-    }), document.addEventListener("mousedown", i, {
+    }), document.addEventListener("mousedown", a, {
       signal: n.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -38,10 +36,10 @@ const k = ({ ulRef: a }) => {
     const n = new AbortController();
     return (s = o.current) == null || s.addEventListener(
       "keydown",
-      (i) => {
+      (a) => {
         var r;
-        if (i.key === "ArrowDown") {
-          const t = (r = a.current) == null ? void 0 : r.querySelector("li");
+        if (a.key === "ArrowDown") {
+          const t = (r = i.current) == null ? void 0 : r.querySelector("li");
           t && t.focus();
         }
       },
@@ -49,17 +47,17 @@ const k = ({ ulRef: a }) => {
     ), () => {
       n.abort();
     };
-  }, [o, a]);
-  const g = p(() => e(!0), [e]), m = p(() => {
+  }, [o, i]);
+  const g = p(() => e(!0), [e]), w = p(() => {
     c || e(!1);
   }, [c, e]);
   return {
     wrapperRef: l,
     wrapperInputRef: o,
     handleOpen: g,
-    handleOpenIfClosed: m
+    handleOpenIfClosed: w
   };
 };
 export {
-  k as useDropdown
+  E as useDropdown
 };