@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.111

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,50 +1,29 @@
-import { jsx as e } from "react/jsx-runtime";
-import { S as k } from "../../index-DQH6odE9.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";
-import { radioGroupVariants as R } from "./RadioGroup.variants.js";
-const y = ({
-  asChild: m,
-  className: s,
-  defaultChecked: c,
-  name: a,
-  options: i,
-  theme: d,
-  wrapperClassName: n,
-  direction: p,
-  onValueChange: t
-}) => {
-  const f = m ? k : "div", [l, S] = x(
-    () => c
-  ), h = C(
-    (o) => {
-      S(o), t?.(o);
-    },
-    [t]
-  );
-  return /* @__PURE__ */ e(
-    f,
-    {
-      className: r(
-        R({ className: n, direction: p })
-      ),
-      "data-theme": d,
-      children: i.map(({ value: o, ...N }) => /* @__PURE__ */ e(
-        G,
-        {
-          value: o,
-          name: a,
-          className: r(s),
-          checked: l === o,
-          onChange: () => h(o),
-          ...N
-        },
-        o
-      ))
-    }
-  );
+import { t as R } from "../../dist-xCbHbMLA.js";
+import { t as r } from "../../utils-DnIJruo0.js";
+import { Radio as g } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+import { useState as k } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var A = ({ asChild: m, className: n, defaultChecked: a, direction: i, name: c, options: d, theme: p, value: t, wrapperClassName: l, onValueChange: f }) => {
+  const h = m ? R : "div", e = t !== void 0, [S, C] = k(() => a), N = e ? t ?? void 0 : S, x = (o) => {
+    e || C(o), f?.(o);
+  };
+  return /* @__PURE__ */ s(h, {
+    className: r(j({
+      className: l,
+      direction: i
+    })),
+    "data-theme": p,
+    children: d.map(({ value: o, ...G }) => /* @__PURE__ */ s(g, {
+      value: o,
+      name: c,
+      className: r(n),
+      checked: N === o,
+      onChange: () => x(o),
+      ...G
+    }, o))
+  });
 };
 export {
-  y as RadioGroup
+  A as RadioGroup
 };

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -1,15 +1,11 @@
-import { c as o } from "../../index-D29mdTf5.js";
-const r = o(["flex"], {
-  variants: {
-    direction: {
-      row: ["flex-row", "gap-8"],
-      col: ["flex-col", "gap-4"]
-    }
-  },
-  defaultVariants: {
-    direction: "col"
-  }
+import { t as a } from "../../dist-B9GE4SXf.js";
+var o = a(["flex"], {
+  variants: { direction: {
+    row: ["flex-row", "gap-8"],
+    col: ["flex-col", "gap-4"]
+  } },
+  defaultVariants: { direction: "col" }
 });
 export {
-  r as radioGroupVariants
+  o as radioGroupVariants
 };

package/dist/components/Range/Range.js

@@ -1,62 +1,54 @@
-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-l3NwplN0.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";
-const q = v(
-  ({
-    label: n,
-    defaultValue: u = [0, 100],
-    name: m,
-    theme: o,
-    size: l,
-    showValue: f,
-    ...d
-  }, h) => {
-    const t = b(null), [s, p] = j(u);
-    k(h, () => t.current, [t]), w(() => {
-      t.current && (t.current.value = `[${s.toString()}]`);
-    }, [s]);
-    const x = y(
-      (N) => p(N),
-      []
-    );
-    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": o, children: [
-      /* @__PURE__ */ r(
-        "div",
-        {
-          className: a(
-            "flex items-center",
-            n ? "justify-between" : "justify-end"
-          ),
+import { t as e } from "../../utils-DnIJruo0.js";
+import { i as v, n as V, r as i, t as S } from "../../dist-CNui_Egg.js";
+import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as w } from "./Range.variants.js";
+import { forwardRef as y, useEffect as b, useImperativeHandle as k, useRef as C, useState as T } from "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var q = y(({ label: n, labelWrapperClassName: m, defaultValue: u = [0, 100], name: d, theme: f, size: l, showValue: o, ...h }, p) => {
+  const r = C(null), [t, x] = T(u);
+  k(p, () => r.current, [r]), b(() => {
+    r.current && (r.current.value = `[${t.toString()}]`);
+  }, [t]);
+  const N = (g) => {
+    x(g);
+  };
+  return /* @__PURE__ */ s("div", {
+    className: "w-full relative flex flex-col gap-3",
+    "data-theme": f,
+    children: [
+      /* @__PURE__ */ s("div", {
+        className: e("flex items-center", n ? "justify-between" : "justify-end", m),
+        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, o ? /* @__PURE__ */ s("span", {
+          className: "text-xs",
           children: [
-            n ? /* @__PURE__ */ e("label", { children: n }) : null,
-            f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
-              s[0],
-              " - ",
-              s[1]
-            ] }) : null
+            t[0],
+            " - ",
+            t[1]
           ]
-        }
-      ),
-      /* @__PURE__ */ e("input", { ref: t, name: m, className: "hidden", type: "text" }),
-      /* @__PURE__ */ r(
-        g,
-        {
-          value: s,
-          className: a(S()),
-          onValueChange: x,
-          ...d,
-          children: [
-            /* @__PURE__ */ e(R, { className: a(T({ size: l })), children: /* @__PURE__ */ e(V, { className: a(C()) }) }),
-            /* @__PURE__ */ e(c, { className: a(i({ size: l })) }),
-            /* @__PURE__ */ e(c, { className: a(i({ size: l })) })
-          ]
-        }
-      )
-    ] });
-  }
-);
+        }) : null]
+      }),
+      /* @__PURE__ */ a("input", {
+        ref: r,
+        name: d,
+        className: "hidden",
+        type: "text"
+      }),
+      /* @__PURE__ */ s(S, {
+        value: t,
+        className: e(j()),
+        onValueChange: N,
+        ...h,
+        children: [
+          /* @__PURE__ */ a(v, {
+            className: e(w({ size: l })),
+            children: /* @__PURE__ */ a(V, { className: e(R()) })
+          }),
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) }),
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) })
+        ]
+      })
+    ]
+  });
+});
 export {
   q as Range
 };

package/dist/components/Range/Range.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r([
+import { t as r } from "../../dist-B9GE4SXf.js";
+var e = r([
   "relative",
   "flex",
   "items-center",
@@ -12,49 +12,40 @@ const a = r([
   "absolute",
   "h-full",
   "bg-kubefirst-secondary"
-]), t = r(
-  ["relative", "flex-grow", "bg-gray-100", "rounded-full"],
-  {
-    variants: {
-      size: {
-        sm: ["h-1"],
-        md: ["h-2"],
-        lg: ["h-3"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), o = r(
-  [
-    "block",
-    "w-5",
-    "h-5",
-    "rounded-full",
-    "cursor-pointer",
-    "focus-visible:outline-none",
-    "shadow-md",
-    "bg-white",
-    "border",
-    "border-gray-300"
-  ],
-  {
-    variants: {
-      size: {
-        sm: ["w-5", "h-5"],
-        md: ["w-6", "h-6"],
-        lg: ["w-7", "h-7"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
+]), t = r([
+  "relative",
+  "flex-grow",
+  "bg-gray-100",
+  "rounded-full"
+], {
+  variants: { size: {
+    sm: ["h-1"],
+    md: ["h-2"],
+    lg: ["h-3"]
+  } },
+  defaultVariants: { size: "md" }
+}), i = r([
+  "block",
+  "w-5",
+  "h-5",
+  "rounded-full",
+  "cursor-pointer",
+  "focus-visible:outline-none",
+  "shadow-md",
+  "bg-white",
+  "border",
+  "border-gray-300"
+], {
+  variants: { size: {
+    sm: ["w-5", "h-5"],
+    md: ["w-6", "h-6"],
+    lg: ["w-7", "h-7"]
+  } },
+  defaultVariants: { size: "md" }
+});
 export {
   s as rangeOutsideVariants,
-  a as rangeVariants,
-  o as thumbVariants,
+  e as rangeVariants,
+  i as thumbVariants,
   t as trackVariants
 };

package/dist/components/Select/Select.js

@@ -0,0 +1,46 @@
+import { n as y, t as d } from "../../utils-DnIJruo0.js";
+import { t as M } from "../../Wrapper-MmlrJppS.js";
+import { SelectProvider as S } from "./contexts/select.provider.js";
+import { n as b } from "../../AdditionalOptions-D3SZ2WFJ.js";
+import { forwardRef as E, useId as G, useMemo as H } from "react";
+import { jsx as s, jsxs as P } from "react/jsx-runtime";
+var B = E(({ error: e, errorClassName: m, helperText: l, helperTextClassName: x, highlightSearch: h, id: u, mainWrapperClassName: I, name: r, value: g, options: t, onChange: v, onBlur: n, onValueChange: $, ...N }, O) => {
+  const c = G(), o = u ?? (r ? `${c}-${r}` : c), i = `${o}-error`, p = `${o}-helper-text`, a = typeof e == "string" && e.length > 0, f = !a && !!l, j = y(a && i, f && p), k = H(() => t.length ? b(t.at(0)) ? t.flatMap((w) => w.options) : t : [], [t]);
+  return /* @__PURE__ */ s(S, {
+    highlightSearch: h,
+    name: r,
+    value: g,
+    options: k,
+    onBlur: n,
+    onChange: v,
+    onValueChange: $,
+    children: /* @__PURE__ */ P("div", {
+      className: d("relative w-full", I),
+      children: [
+        /* @__PURE__ */ s(M, {
+          describedBy: j,
+          error: e,
+          fieldId: o,
+          name: r,
+          ref: O,
+          onBlur: n,
+          groupedOptions: t,
+          ...N
+        }),
+        a ? /* @__PURE__ */ s("span", {
+          id: i,
+          className: d("text-xs text-red-700 dark:text-red-400", m),
+          children: e
+        }) : null,
+        f ? /* @__PURE__ */ s("span", {
+          id: p,
+          className: d("text-xs text-slate-600 dark:text-slate-200", x),
+          children: l
+        }) : null
+      ]
+    })
+  });
+});
+export {
+  B as Select
+};

package/dist/components/Select/Select.variants.js

@@ -0,0 +1,76 @@
+import { t as e } from "../../dist-B9GE4SXf.js";
+var a = e([
+  "group",
+  "border",
+  "cursor-pointer",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-3",
+  "py-1",
+  "relative",
+  "rounded",
+  "transition-all",
+  "w-full",
+  "outline-none",
+  "h-10",
+  "border-gray-200",
+  "focus-visible:bg-zinc-50",
+  "aria-expanded:border-aurora-500",
+  "aria-expanded:text-aurora-500",
+  "kubefirst:aria-expanded:border-kubefirst-primary",
+  "kubefirst:aria-expanded:text-kubefirst-secondary",
+  "dark:border-metal-700",
+  "dark:focus-visible:bg-metal-800",
+  "dark:bg-metal-800"
+], {
+  variants: {
+    hasError: {
+      true: [
+        "aria-expanded:border-red-600",
+        "aria-expanded:text-red-600",
+        "kubefirst:border-red-600",
+        "kubefirst:text-red-600",
+        "dark:border-red-500"
+      ],
+      false: ""
+    },
+    disabled: {
+      true: [
+        "cursor-default",
+        "bg-gray-100",
+        "dark:bg-metal-700/80"
+      ],
+      false: []
+    }
+  },
+  defaultVariants: {
+    hasError: !1,
+    disabled: !1
+  }
+}), t = e([
+  "flex-1",
+  "bg-transparent",
+  "border-none",
+  "outline-none",
+  "text-metal-700",
+  "text-sm",
+  "capitalize",
+  "placeholder:text-sm",
+  "placeholder:normal-case",
+  "placeholder:select-none",
+  "dark:placeholder:text-metal-400",
+  "dark:text-metal-50"
+]), d = e([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-metal-50"
+]);
+export {
+  t as inputVariants,
+  d as labelVariants,
+  a as selectVariants
+};

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -0,0 +1,4 @@
+import { t } from "../../../../AdditionalOptions-D3SZ2WFJ.js";
+export {
+  t as AdditionalOptions
+};

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.variants.js

@@ -0,0 +1,5 @@
+import { t as e } from "../../../../utils-DnIJruo0.js";
+var r = e("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");
+export {
+  r as additionalOptionSlotClassName
+};

package/dist/components/Select/components/EmptyList.js

@@ -0,0 +1,5 @@
+import { jsx as r } from "react/jsx-runtime";
+var i = () => /* @__PURE__ */ r("div", { children: "EmptyList" });
+export {
+  i as EmptyList
+};

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

@@ -0,0 +1,141 @@
+import { o as $ } from "../../../../rolldown-runtime-Dw9YIBcH.js";
+import { t as n } from "../../../../utils-DnIJruo0.js";
+import { t as R } from "../../../../Loading-u8hXrFJR.js";
+import { t as ee } from "../../../../debounce-BdyZeJQk.js";
+import { useSelectContext as te } from "../../contexts/select.hook.js";
+import { n as re, t as oe } from "../../../../AdditionalOptions-D3SZ2WFJ.js";
+import { listGroupLabelVariants as ae, listVariants as ne } from "./List.variants.js";
+import "../../constants/pagination.js";
+import "../../constants/list.js";
+import { useNavigationUlList as se } from "../../hooks/useNavigationList.js";
+import { ListItem as g } from "../ListItem/ListItem.js";
+import { forwardRef as ie, useEffect as le, useImperativeHandle as ce, useMemo as I, useRef as N, useState as ue } from "react";
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
+var fe = /* @__PURE__ */ $(ee(), 1), ke = ie(({ additionalOptions: P, className: T, groupedOptions: l, id: j, inputRef: c, isLoading: M, itemClassName: u, labelledBy: S, loadingText: C, name: q, searchable: f = !1, listItemSecondRowClassName: p, wrapperInputRef: A, isInfiniteScrollEnabled: h, noOptionsText: E, onFetchMoreOptions: b, visibleItems: F }, U) => {
+  const m = N(null), L = N(null), [v, k] = ue(!1), { canContinueFetching: d, canFilter: y, isOpen: V, isTyping: G, options: H, page: w, searchTerm: a, setCanContinueFetching: z, setOptions: D, setPage: X } = te(), Z = F !== void 0 ? { maxHeight: F * 40 } : void 0;
+  ce(U, () => m.current, [m]);
+  const s = l.length > 0 && re(l[0]), _ = f && y ? H.filter((e) => {
+    const t = a.toLowerCase();
+    return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+  }) : H, x = I(() => {
+    if (!s) return [];
+    const e = l;
+    if (!f || !y || !a) return e;
+    const t = a.toLowerCase();
+    return e.map((r) => ({
+      ...r,
+      options: r.options.filter((i) => i.label.toLowerCase().includes(t))
+    })).filter((r) => r.options.length > 0);
+  }, [
+    s,
+    l,
+    f,
+    y,
+    a
+  ]), B = s ? x.flatMap((e) => e.options) : _;
+  se({
+    ulRef: m,
+    wrapperInputRef: A,
+    searchable: f,
+    filteredOptions: B
+  });
+  const J = _.filter((e, t, r) => t === r.findIndex((i) => i.value === e.value)), K = s ? x.length === 0 : _.length === 0, Q = I(() => (0, fe.default)(async (e) => {
+    const [t] = e;
+    if (t.isIntersecting && !v && b && d) try {
+      k(!0);
+      const r = w + 1, { data: i, hasMore: W } = await b({
+        page: r,
+        pageSize: 10,
+        termOfSearch: a
+      });
+      X(r), z(W), D((Y) => [...Y, ...i]);
+    } catch {
+      console.error("Error fetching more options");
+    } finally {
+      k(!1);
+    }
+  }, 100), [
+    v,
+    b,
+    a,
+    w
+  ]);
+  return le(() => {
+    if (h && d && L.current && !G) {
+      const e = new IntersectionObserver(Q, { threshold: 0.1 });
+      return e.observe(L.current), () => e.disconnect();
+    }
+  }, [
+    h,
+    d,
+    v,
+    G,
+    w
+  ]), /* @__PURE__ */ O("ul", {
+    ref: m,
+    id: j,
+    title: q,
+    role: "listbox",
+    "aria-labelledby": S,
+    className: n(ne({ className: T })),
+    style: Z,
+    "data-state": V ? "open" : "closed",
+    children: [
+      M ? /* @__PURE__ */ o(g, {
+        className: n("select-none", u),
+        isClickable: !1,
+        inputRef: c,
+        value: C ?? "Loading...",
+        label: C ?? "Loading...",
+        listItemSecondRowClassName: p
+      }) : K ? /* @__PURE__ */ o(g, {
+        isEmpty: !0,
+        className: n("select-none", u),
+        isClickable: !1,
+        inputRef: c,
+        value: E ?? "",
+        label: E ?? "No options",
+        listItemSecondRowClassName: p
+      }) : s ? x.map((e) => /* @__PURE__ */ o("li", {
+        role: "presentation",
+        "data-action": "true",
+        children: /* @__PURE__ */ O("ul", {
+          role: "group",
+          "aria-label": e.groupLabel,
+          children: [/* @__PURE__ */ o("li", {
+            role: "presentation",
+            "aria-hidden": "true",
+            "data-action": "true",
+            className: n(ae()),
+            children: e.groupLabel
+          }), e.options.map((t) => /* @__PURE__ */ o(g, {
+            className: n("select-none", u),
+            isClickable: !0,
+            inputRef: c,
+            listItemSecondRowClassName: p,
+            ...t
+          }, t.value))]
+        })
+      }, e.groupLabel)) : J.map((e) => /* @__PURE__ */ o(g, {
+        className: n("select-none", u),
+        isClickable: !0,
+        inputRef: c,
+        listItemSecondRowClassName: p,
+        ...e
+      }, e.value)),
+      h && d && /* @__PURE__ */ o("li", {
+        ref: L,
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-action": "true",
+        className: "flex items-center justify-center py-3",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ o(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+      }),
+      /* @__PURE__ */ o(oe, { additionalOptions: P })
+    ]
+  });
+});
+export {
+  ke as List
+};

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

@@ -0,0 +1,46 @@
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var r = e([
+  "flex",
+  "items-center",
+  "h-8",
+  "px-6",
+  "py-1.5",
+  "text-[11px]",
+  "font-medium",
+  "uppercase",
+  "tracking-[0.25px]",
+  "text-metal-50",
+  "pointer-events-none",
+  "select-none",
+  "cursor-default"
+]), a = e([
+  "scrollbar",
+  "absolute",
+  "bg-white",
+  "border",
+  "flex-col",
+  "mt-1",
+  "overflow-hidden",
+  "rounded",
+  "shadow-2xs",
+  "top-full",
+  "w-full",
+  "z-10",
+  "max-h-44",
+  "overflow-y-auto",
+  "border-gray-200",
+  "text-zinc-700",
+  "animate-in",
+  "fade-in-50",
+  "zoom-in-95",
+  "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 {
+  r as listGroupLabelVariants,
+  a as listVariants
+};