@konstructio/ui 0.0.12 → 0.0.13-alpha.2

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-DvFiic6N.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 d } from "react";
+import { O as a } from "../../../index-DvFiic6N.js";
+import { cn as i } from "../../../utils/index.js";
+const m = d(({ className: t, ...e }, o) => /* @__PURE__ */ s(
+  a,
+  {
+    ref: o,
+    className: i(
+      "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 delay-200",
+      t
+    ),
+    ...e
+  }
+));
+m.displayName = a.displayName;
+export {
+  m 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,11 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as o } from "../../utils/index.js";
+import { dividerVariants as a } from "./Divider.variants.js";
+const d = ({
+  className: i,
+  ...r
+}) => /* @__PURE__ */ m("div", { className: o(a({ className: i })), ...r });
+d.displayName = "Divider";
+export {
+  d as Divider
+};

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

@@ -0,0 +1,17 @@
+import { c as a } from "../../index-BNmRGtA6.js";
+const t = a(
+  ["h-[1px]", "bg-zinc-200", "w-full", "border-gray-200"],
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+export {
+  t 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 { 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 }) }));
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { DropdownProvider as d } from "./contexts/dropdown.provider.js";
+import { Wrapper as e } from "./components/Wrapper.js";
+const x = t(({ onChange: p, value: m, name: r, ...f }, i) => /* @__PURE__ */ o(d, { onChange: p, value: m, name: r, children: /* @__PURE__ */ o(e, { name: r, ref: i, ...f }) }));
 export {
-  s as Dropdown
+  x as Dropdown
 };

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

@@ -1,41 +1,34 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(
-  [
-    "border",
-    "cursor-pointer",
-    "ease-in-out",
-    "flex",
-    "items-center",
-    "justify-between",
-    "px-3",
-    "py-1",
-    "relative",
-    "rounded-md",
-    "transition-all",
-    "w-full",
-    "outline-none"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: [
-          "aria-expanded:border-kubefirst-primary",
-          "aria-expanded:text-kubefirst-secondary",
-          "focus-visible:bg-purple-100"
-        ],
-        colony: [
-          "aria-expanded:border-red-400",
-          "aria-expanded:text-red-400",
-          "focus-visible:bg-red-100"
-        ],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+const o = e([
+  "border",
+  "cursor-pointer",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-3",
+  "py-1",
+  "relative",
+  "rounded-md",
+  "transition-all",
+  "w-full",
+  "outline-none",
+  "h-9",
+  "border-gray-200",
+  "aria-expanded:border-kubefirst-primary",
+  "aria-expanded:text-kubefirst-secondary",
+  "focus-visible:bg-zinc-50",
+  "colony:aria-expanded:border-red-400",
+  "colony:aria-expanded:text-red-400",
+  "colony:focus-visible:bg-red-100"
+]), a = e([
+  "mb-1",
+  "cursor-pointer",
+  "text-[14px]",
+  "leading-[20px]",
+  "tracking-[0.1px]"
+]);
 export {
-  a as dropdownVariants
+  o as dropdownVariants,
+  a as labelVariants
 };

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

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

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

@@ -1,34 +1,24 @@
-import { c as r } from "../../../../index-BNmRGtA6.js";
-const t = r(
-  [
-    "absolute",
-    "bg-white",
-    "border",
-    "duration-100",
-    "ease-in-out",
-    "flex-col",
-    "mt-1",
-    "overflow-hidden",
-    "rounded-md",
-    "shadow-sm",
-    "top-full",
-    "transition-all",
-    "w-full",
-    "z-10"
-  ],
-  {
-    variants: {
-      theme: {
-        colony: ["border-red-400"],
-        kubefirst: ["border-kubefirst-primary"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const r = o([
+  "absolute",
+  "bg-white",
+  "border",
+  "duration-100",
+  "ease-in-out",
+  "flex-col",
+  "mt-1",
+  "overflow-hidden",
+  "rounded-md",
+  "shadow-2xs",
+  "top-full",
+  "transition-all",
+  "w-full",
+  "z-10",
+  "max-h-[185px]",
+  "overflow-y-auto",
+  "border-gray-200",
+  "text-zinc-700"
+]);
 export {
-  t as listVariants
+  r 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 u } from "../../../../utils/index.js";
+import { listItemVariants as d } from "./ListItem.variants.js";
+import { Typography as h } from "../../../Typography/Typography.js";
+import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
+const g = ({ isClickable: a, ...e }) => {
+  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
     (t) => {
-      n(t), r(!1);
+      n(t.value), 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: u(d()),
       tabIndex: 0,
-      onClick: () => l(e),
-      onKeyDown: (t) => m(t, e),
+      onClick: () => a && l(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,30 +1,20 @@
-import { c as e } from "../../../../index-BNmRGtA6.js";
-const t = e(
-  [
-    "cursor-pointer",
-    "py-2",
-    "px-2",
-    "h-full",
-    "focus-visible:outline-none",
-    "m-0",
-    "w-full",
-    "flex",
-    "items-center",
-    "gap-3"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: ["focus:bg-purple-100", "hover:bg-purple-100"],
-        colony: ["focus:bg-red-100", "hover:bg-red-100"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const l = o([
+  "cursor-pointer",
+  "py-2",
+  "px-2",
+  "h-full",
+  "focus-visible:outline-none",
+  "m-0",
+  "w-full",
+  "flex",
+  "items-center",
+  "gap-3",
+  "hover:bg-slate-50",
+  "focus:bg-slate-50",
+  "colony:focus:bg-red-100",
+  "colony:hover:bg-red-100"
+]);
 export {
-  t as listItemVariants
+  l as listItemVariants
 };