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

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

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.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.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,36 +1,37 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useRef as u, useCallback as r } from "react";
+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 p } from "./ListItem.variants.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 C = ({ theme: o, ...e }) => {
-  const { setValue: n, toggleOpen: s } = x(), c = u(null), t = r(
-    (l) => {
-      n(l), s(!1);
+const g = ({ theme: a, ...e }) => {
+  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
+    (t) => {
+      n(t), r(!1);
     },
-    [n, s]
-  ), a = r(
-    (l, m) => {
-      l.key === "Enter" && t(m);
+    [n, r]
+  ), i = s(
+    (t, m) => {
+      t.key === "Enter" && l(m);
     },
-    [t]
+    [l]
   );
   return /* @__PURE__ */ f(
     "li",
     {
       ref: c,
       role: "option",
-      className: d(p({ theme: o })),
+      className: d(u({ theme: a })),
       tabIndex: 0,
-      onClick: () => t(e),
-      onKeyDown: (l) => a(l, e),
+      onClick: () => l(e),
+      onKeyDown: (t) => i(t, e),
       children: [
-        e.leftIcon ? /* @__PURE__ */ i("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 {
-  C 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,69 +1,99 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as F, useId as L, useRef as N, useImperativeHandle as $, useEffect as m } from "react";
-import { cn as R } from "../../../utils/index.js";
-import { dropdownVariants as A } from "../Dropdown.variants.js";
-import { useDropdown as H } from "../hooks/useDropdown.js";
-import { List as U } from "./List/List.js";
-import { C as W } from "../../../chevron-up-DgLBQCKD.js";
-import { useDropdownContext as q } from "../contexts/dropdown.hook.js";
-import { useTheme as z } from "../../../contexts/theme.hook.js";
-const X = 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 } = H({ ulRef: u }), { isOpen: x, value: e, setValue: w, toggleOpen: b } = q(), { theme: T } = z(), v = g ?? T, s = o ? `${d}-${o}` : d;
-    $(j, () => r.current, [r]), m(() => {
+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]), m(() => {
-      if (c) {
-        const l = a.find(
-          (i) => i.value === c
+    }, [e]), d(() => {
+      if (m) {
+        const a = c.find(
+          (s) => s.value === m
         );
-        l && w(l);
+        a && N(a);
       }
-    }, [c, a, w]), m(() => {
-      var i;
-      const l = new AbortController();
-      return (i = n.current) == null || i.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);
       }), () => {
-        l.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__ */ f("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: s,
-          className: "m-2 cursor-pointer",
-          htmlFor: s,
-          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__ */ f(
+      /* @__PURE__ */ i(
         "div",
         {
-          ref: h,
-          id: s,
-          className: R(A({ 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": s,
+          "aria-labelledby": l,
           children: [
-            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ f("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(
-              W,
+              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"
                 )
               }
             )
@@ -77,23 +107,24 @@ const X = F(
           type: "text",
           name: o,
           className: "hidden",
-          "aria-hidden": "true"
+          "aria-hidden": "true",
+          required: h
         }
       ),
       /* @__PURE__ */ t(
-        U,
+        B,
         {
-          ref: u,
+          ref: b,
           name: o,
           wrapperRef: n,
-          wrapperInputRef: h,
-          options: a,
-          theme: v
+          wrapperInputRef: w,
+          options: c,
+          theme: f
         }
       )
     ] });
   }
 );
 export {
-  X as Wrapper
+  te as Wrapper
 };