@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.50

package/dist/components/Radio/Radio.js

@@ -1,53 +1,54 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as g, useId as j, useCallback as w } from "react";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { Typography as d } from "../Typography/Typography.js";
 import { cn as a } from "../../utils/index.js";
-import { radioVariants as y, labelRadioVariants as t, wrapperRadioVariants as F } from "./Radio.variants.js";
-const $ = g(
+import { radioVariants as F, labelRadioVariants as p, wrapperRadioVariants as $ } from "./Radio.variants.js";
+const C = V(
   ({
     checked: r = !1,
-    className: p,
-    defaultChecked: o,
+    className: f,
+    defaultChecked: l,
     disabled: e,
-    label: f,
-    labelTextClassName: N,
-    description: l,
-    descriptionClassName: h,
-    name: i,
-    theme: x,
-    value: m,
-    wrapperClassName: R,
-    onChange: c
-  }, u) => {
-    const d = `${j()}-${i}`, b = w(
-      (V) => {
-        c?.(V);
+    label: N,
+    labelTextClassName: h,
+    description: o,
+    descriptionClassName: x,
+    name: m,
+    theme: R,
+    value: n,
+    wrapperClassName: u,
+    onChange: i
+  }, y) => {
+    const t = `${j()}-${m}`, b = w(
+      (g) => {
+        i?.(g);
       },
-      [c]
+      [i]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "label",
       {
-        htmlFor: d,
+        htmlFor: t,
         className: a(
-          F({
-            className: R,
+          $({
+            className: u,
             disabled: e || !1
           })
         ),
-        "data-theme": x,
+        "data-theme": R,
         children: [
           /* @__PURE__ */ s(
             "input",
             {
-              ref: u,
-              id: d,
+              ref: y,
+              id: t,
               type: "radio",
-              name: i,
-              value: m,
+              name: m,
+              value: n,
               checked: r,
-              defaultChecked: o,
+              defaultChecked: l,
               className: "hidden peer",
-              onChange: () => b(m),
+              onChange: () => b(n),
               disabled: e
             }
           ),
@@ -55,31 +56,33 @@ const $ = g(
             "span",
             {
               className: a(
-                y({
-                  className: p,
+                F({
+                  className: f,
                   disabled: e || !1,
-                  checked: r || o || !1
+                  checked: r || l || !1
                 })
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: a(l && "flex flex-col gap-1"), children: [
+          /* @__PURE__ */ c("div", { className: a(o && "flex flex-col gap-1"), children: [
             /* @__PURE__ */ s(
-              "span",
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: N })
+                  p({ className: h })
                 ),
-                children: f
+                children: N
               }
             ),
-            l && /* @__PURE__ */ s(
-              "span",
+            o && /* @__PURE__ */ s(
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: h })
+                  p({ className: x })
                 ),
-                children: l
+                children: o
               }
             )
           ] })
@@ -88,7 +91,7 @@ const $ = g(
     );
   }
 );
-$.displayName = "KonstructRadio";
+C.displayName = "KonstructRadio";
 export {
-  $ as Radio
+  C as Radio
 };

package/dist/components/Radio/Radio.variants.js

@@ -15,7 +15,8 @@ const a = e(
 ), o = e(
   [
     "border",
-    "border-gray-300",
+    "border-zinc-400",
+    "dark:border-metal-600",
     "duration-300",
     "inline-block",
     "rounded-full",
@@ -61,22 +62,25 @@ const a = e(
         disabled: !0,
         checked: !0,
         class: [
-          "peer-checked:border-gray-300",
-          "peer-checked:before:bg-gray-300",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-300",
           "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed"
+          "[&+span]:cursor-not-allowed",
+          "dark:peer-checked:before:bg-aurora-500/50",
+          "dark:peer-checked:border-aurora-500/50"
         ]
       },
       {
         disabled: !0,
         checked: !1,
         class: [
-          "peer-checked:border-gray-200",
-          "peer-checked:border-gray-200",
-          "peer-checked:before:bg-gray-200",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-50",
           "cursor-not-allowed",
           "[&+span]:cursor-not-allowed",
-          "bg-gray-50"
+          "bg-gray-50",
+          "dark:bg-metal-800",
+          "dark:bg-metal-800"
         ]
       }
     ],

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,10 +1,5 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
-  "flex",
-  "items-center",
-  "p-0",
-  "border-2"
-]);
+const e = r(["flex", "items-center", "p-0", "border"]);
 export {
   e as radioCardVariants
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { S as k } from "../../index-DQH6odE9.js";
+import { S as k } from "../../index-BvoZGpli.js";
 import { useState as x, useCallback as C } from "react";
 import { cn as r } from "../../utils/index.js";
 import { Radio as G } from "../Radio/Radio.js";
@@ -8,11 +8,11 @@ const y = ({
   asChild: m,
   className: s,
   defaultChecked: c,
-  name: a,
-  options: i,
-  theme: d,
-  wrapperClassName: n,
-  direction: p,
+  direction: a,
+  name: i,
+  options: d,
+  theme: n,
+  wrapperClassName: p,
   onValueChange: t
 }) => {
   const f = m ? k : "div", [l, S] = x(
@@ -27,14 +27,14 @@ const y = ({
     f,
     {
       className: r(
-        R({ className: n, direction: p })
+        R({ className: p, direction: a })
       ),
-      "data-theme": d,
-      children: i.map(({ value: o, ...N }) => /* @__PURE__ */ e(
+      "data-theme": n,
+      children: d.map(({ value: o, ...N }) => /* @__PURE__ */ e(
         G,
         {
           value: o,
-          name: a,
+          name: i,
           className: r(s),
           checked: l === o,
           onChange: () => h(o),

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as g, T as R, a as V, b as c } from "../../index-C84F4YyO.js";
+import { R as g, T as R, a as V, b as c } from "../../index-gSPwC-1I.js";
 import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
 import { cn as a } from "../../utils/index.js";
 import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";

package/dist/components/Select/Select.js

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { cn as l } from "../../utils/index.js";
+import { SelectProvider as N } from "./contexts/select.provider.js";
+import { Wrapper as j } from "./components/Wrapper.js";
+const W = v(
+  ({
+    error: t,
+    errorClassName: r,
+    helperText: s,
+    helperTextClassName: a,
+    highlightSearch: c,
+    mainWrapperClassName: o,
+    name: m,
+    value: p,
+    options: d,
+    onChange: f,
+    onBlur: i,
+    ...n
+  }, x) => /* @__PURE__ */ e(
+    N,
+    {
+      highlightSearch: c,
+      name: m,
+      value: p,
+      options: d,
+      onBlur: i,
+      onChange: f,
+      children: /* @__PURE__ */ h("div", { className: l("relative w-full", o), children: [
+        /* @__PURE__ */ e(
+          j,
+          {
+            error: t,
+            name: m,
+            ref: x,
+            onBlur: i,
+            ...n
+          }
+        ),
+        t ? /* @__PURE__ */ e("span", { className: l("text-xs text-red-700", r), children: t }) : null,
+        !t && s ? /* @__PURE__ */ e("span", { className: l("text-xs text-metal-600", a), children: s }) : null
+      ] })
+    }
+  )
+);
+export {
+  W as Select
+};

package/dist/components/{Dropdown/Dropdown.variants.js → Select/Select.variants.js}

@@ -22,8 +22,9 @@ const a = e(
     "aria-expanded:text-aurora-500",
     "kubefirst:aria-expanded:border-kubefirst-primary",
     "kubefirst:aria-expanded:text-kubefirst-secondary",
-    "dark:border-slate-600",
-    "dark:focus-visible:bg-slate-800"
+    "dark:border-metal-700",
+    "dark:focus-visible:bg-metal-800",
+    "dark:bg-metal-800"
   ],
   {
     variants: {
@@ -35,10 +36,15 @@ const a = e(
           "kubefirst:text-red-600"
         ],
         false: ""
+      },
+      disabled: {
+        true: ["cursor-default", "bg-gray-100", "dark:bg-metal-700/80"],
+        false: []
       }
     },
     defaultVariants: {
-      hasError: !1
+      hasError: !1,
+      disabled: !1
     }
   }
 ), t = e([
@@ -46,24 +52,24 @@ const a = e(
   "bg-transparent",
   "border-none",
   "outline-none",
-  "text-zinc-700",
+  "text-metal-700",
   "text-sm",
   "capitalize",
   "placeholder:text-sm",
   "placeholder:normal-case",
   "placeholder:select-none",
-  "dark:placeholder:text-slate-400",
-  "dark:text-slate-50"
-]), n = e([
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
+]), d = e([
   "mb-1",
   "cursor-pointer",
   "text-sm",
-  "leading-[20px]",
+  "leading-5",
   "tracking-[0.1px]",
-  "dark:text-slate-50"
+  "dark:text-metal-50"
 ]);
 export {
-  a as dropdownVariants,
   t as inputVariants,
-  n as labelVariants
+  d as labelVariants,
+  a as selectVariants
 };

package/dist/components/Select/components/List/List.js

@@ -0,0 +1,172 @@
+import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import { S as Z } from "../../../../index-BvoZGpli.js";
+import { d as B } from "../../../../debounce-BFejQm9P.js";
+import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
+import { Loading as R } from "../../../Loading/Loading.js";
+import { cn as o } from "../../../../utils/index.js";
+import { useNavigationUlList as W } from "../../hooks/useNavigationList.js";
+import { ListItem as b } from "../ListItem/ListItem.js";
+import { listVariants as X } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as Y } from "../../constants/pagination.js";
+import { useSelectContext as $ } from "../../contexts/select.hook.js";
+const fe = G(
+  ({
+    additionalOptions: F,
+    className: N,
+    inputRef: l,
+    isLoading: E,
+    itemClassName: i,
+    name: I,
+    searchable: x = !1,
+    listItemSecondRowClassName: c,
+    wrapperInputRef: S,
+    isInfiniteScrollEnabled: u,
+    onFetchMoreOptions: f,
+    noOptionsText: y
+  }, j) => {
+    const n = C(null), m = C(null), [p, L] = J(!1), {
+      isOpen: O,
+      searchTerm: g,
+      canFilter: P,
+      canContinueFetching: a,
+      page: d,
+      options: w,
+      isTyping: k,
+      setOptions: T,
+      setPage: U,
+      setCanContinueFetching: _
+    } = $();
+    K(j, () => n.current, [n]);
+    const h = x && P ? w.filter((e) => {
+      const t = g.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+    }) : w;
+    W({
+      ulRef: n,
+      wrapperInputRef: S,
+      searchable: x,
+      filteredOptions: h
+    });
+    const q = h.filter(
+      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
+    ), z = h.length === 0, A = M(
+      () => B(async (e) => {
+        const [t] = e;
+        if (t.isIntersecting && !p && f && a)
+          try {
+            L(!0);
+            const s = d + 1, { data: v, hasMore: D } = await f({
+              page: s,
+              pageSize: Y,
+              termOfSearch: g
+            });
+            U(s), _(D), T((H) => [...H, ...v]);
+          } catch {
+            console.error("Error fetching more options");
+          } finally {
+            L(!1);
+          }
+      }, 100),
+      [p, f, g, d]
+    );
+    return Q(() => {
+      if (u && a && m.current && !k) {
+        const e = new IntersectionObserver(A, {
+          threshold: 0.1
+        });
+        return e.observe(m.current), () => e.disconnect();
+      }
+    }, [
+      u,
+      a,
+      p,
+      k,
+      d
+    ]), /* @__PURE__ */ V(
+      "ul",
+      {
+        ref: n,
+        title: I,
+        role: "listbox",
+        className: o(X({ className: N })),
+        "data-state": O ? "open" : "closed",
+        children: [
+          E ? /* @__PURE__ */ r(
+            b,
+            {
+              className: o("select-none", i),
+              isClickable: !1,
+              inputRef: l,
+              value: "Loading...",
+              label: "Loading...",
+              listItemSecondRowClassName: c
+            }
+          ) : z ? /* @__PURE__ */ r(
+            b,
+            {
+              isEmpty: !0,
+              className: o("select-none", i),
+              isClickable: !1,
+              inputRef: l,
+              value: y ?? "",
+              label: y ?? "No options",
+              listItemSecondRowClassName: c
+            }
+          ) : q.map((e) => /* @__PURE__ */ r(
+            b,
+            {
+              className: o("select-none", i),
+              isClickable: !0,
+              inputRef: l,
+              listItemSecondRowClassName: c,
+              ...e
+            },
+            e.value
+          )),
+          u && a && /* @__PURE__ */ r(
+            "li",
+            {
+              ref: m,
+              role: "option",
+              "data-action": "true",
+              className: "flex items-center justify-center py-3",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+            }
+          ),
+          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(
+            Z,
+            {
+              className: o(
+                "flex",
+                "min-h-10",
+                "py-2",
+                "px-6",
+                "w-full",
+                "h-full",
+                "gap-1",
+                "items-center",
+                "text-sm",
+                "[&>svg]:-ml-1",
+                "[&>svg]:w-3.5",
+                "[&>svg]:h-3.5",
+                "[&>svg]:shrink-0",
+                "cursor-pointer",
+                "select-none",
+                "hover:bg-gray-50",
+                "hover:dark:bg-metal-700",
+                "focus:outline-0",
+                "text-blue-600",
+                "dark:text-aurora-500"
+              ),
+              children: e
+            }
+          ) }, t))
+        ]
+      }
+    );
+  }
+);
+export {
+  fe as List
+};

package/dist/components/{Dropdown → Select}/components/List/List.variants.js

@@ -1,5 +1,6 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const t = o([
+import { c as t } from "../../../../index-D29mdTf5.js";
+const o = t([
+  "scrollbar",
   "absolute",
   "bg-white",
   "border",
@@ -11,18 +12,20 @@ const t = o([
   "top-full",
   "w-full",
   "z-10",
-  "max-h-[185px]",
+  "max-h-44",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
   "animate-in",
   "fade-in-50",
   "zoom-in-95",
-  "duration-[200ms]",
-  "dark:bg-slate-800",
-  "dark:border-slate-700",
-  "dark:text-slate-50"
+  "duration-200",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50",
+  "[&>li:first-child]:mt-2",
+  "[&>li:last-child]:mb-2"
 ]);
 export {
-  t as listVariants
+  o as listVariants
 };

package/dist/components/Select/components/ListItem/ListItem.js

@@ -0,0 +1,117 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useRef as I, useCallback as u } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { listItemVariants as L } from "./ListItem.variants.js";
+import { useSelectContext as V } from "../../contexts/select.hook.js";
+function j(c, r) {
+  const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n(
+    "mark",
+    {
+      className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
+      children: a
+    },
+    t
+  ) : /* @__PURE__ */ n("span", { children: a }, t));
+}
+const K = ({
+  isEmpty: c,
+  isClickable: r,
+  className: i,
+  inputRef: o,
+  listItemSecondRowClassName: a,
+  ...t
+}) => {
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = V(), b = I(null), f = u(
+    (e) => {
+      x(e.value, o), g(!1);
+    },
+    [x, g]
+  ), N = u(
+    (e, l) => {
+      e.key === "Enter" && (e.stopPropagation(), f(l));
+    },
+    [f]
+  ), w = u(
+    ({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
+      if (c)
+        return /* @__PURE__ */ n(
+          y,
+          {
+            variant: "body2",
+            className: "text-zinc-800 dark:text-metal-50 italic",
+            children: e
+          }
+        );
+      if (typeof e != "string")
+        return e;
+      const k = h && m.length > 0 ? j(e, m) : [e];
+      return /* @__PURE__ */ d(
+        y,
+        {
+          variant: "body2",
+          className: "text-zinc-700 dark:text-metal-50 font-medium",
+          children: [
+            l ? /* @__PURE__ */ d(
+              "span",
+              {
+                className: s("flex gap-2 items-center", C),
+                children: [
+                  k,
+                  " ",
+                  l
+                ]
+              }
+            ) : k,
+            p ? /* @__PURE__ */ n(
+              "span",
+              {
+                className: s(
+                  "block font-normal text-sm text-metal-800 dark:text-metal-50",
+                  a
+                ),
+                children: p
+              }
+            ) : null
+          ]
+        }
+      );
+    },
+    [h, m]
+  );
+  return /* @__PURE__ */ d(
+    "li",
+    {
+      ref: b,
+      role: "option",
+      "data-action": "false",
+      className: s(L({ className: i })),
+      tabIndex: 0,
+      onClick: (e) => {
+        r && (f(t), e.stopPropagation());
+      },
+      onKeyDown: (e) => N(e, t),
+      children: [
+        t.leftIcon ? /* @__PURE__ */ n(
+          "span",
+          {
+            className: s(
+              "w-4 h-4 flex justify-center",
+              {
+                "items-center": !t.subLabel,
+                "items-baseline -tranmetal-y-2": !!t.subLabel
+              },
+              t.leftIconClassName
+            ),
+            children: t.leftIcon
+          }
+        ) : null,
+        w(t)
+      ]
+    }
+  );
+};
+export {
+  K as ListItem
+};