@konstructio/ui 0.1.2-alpha.1 → 0.1.2-alpha.101

package/dist/components/TagSelect/components/Item/Item.variants.js

@@ -1,32 +1,23 @@
-import { c as e } from "../../../../index-D29mdTf5.js";
-const t = e(
-  [
-    "cursor-pointer",
-    "py-1.5",
-    "px-2",
-    "last:pb-2",
-    "first:pt-2",
-    "h-full",
-    "hover:bg-purple-100"
-  ],
-  {
-    variants: {
-      isSelected: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        isSelected: !0,
-        class: ["bg-purple-100"]
-      }
-    ],
-    defaultVariants: {
-      isSelected: !1
-    }
-  }
-);
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var a = e([
+  "cursor-pointer",
+  "py-1.5",
+  "px-2",
+  "last:pb-2",
+  "first:pt-2",
+  "h-full",
+  "hover:bg-purple-100"
+], {
+  variants: { isSelected: {
+    true: "",
+    false: ""
+  } },
+  compoundVariants: [{
+    isSelected: !0,
+    class: ["bg-purple-100"]
+  }],
+  defaultVariants: { isSelected: !1 }
+});
 export {
-  t as wrapperVariants
+  a as wrapperVariants
 };

package/dist/components/TagSelect/components/List/List.js

@@ -1,11 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as m } from "../../../../utils/index.js";
+import { t as a } from "../../../../utils-Cx-WzRZF.js";
+import { useTagSelect as m } from "../../contexts/TagSelect.hook.js";
 import { Item as s } from "../Item/Item.js";
-import { wrapperVariants as a } from "./List.variants.js";
-import { useTagSelect as i } from "../../contexts/TagSelect.hook.js";
-const f = ({ theme: o }) => {
-  const { tags: e } = i();
-  return /* @__PURE__ */ t("ul", { role: "listbox", "data-theme": o, className: m(a()), children: e.length > 0 ? e.map((r) => /* @__PURE__ */ t(s, { option: r }, r.id)) : /* @__PURE__ */ t("span", { className: "text-center text-sm px-4 py-2", children: "There is not options available" }) });
+import { wrapperVariants as i } from "./List.variants.js";
+import { jsx as t } from "react/jsx-runtime";
+var f = ({ theme: o }) => {
+  const { tags: e } = m();
+  return /* @__PURE__ */ t("ul", {
+    role: "listbox",
+    "data-theme": o,
+    className: a(i()),
+    children: e.length > 0 ? e.map((r) => /* @__PURE__ */ t(s, { option: r }, r.id)) : /* @__PURE__ */ t("span", {
+      className: "text-center text-sm px-4 py-2",
+      children: "There is not options available"
+    })
+  });
 };
 export {
   f as List

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

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const a = o([
+import { t as r } from "../../../../dist-B9GE4SXf.js";
+var o = r([
   "absolute",
   "bg-white",
   "border",
@@ -19,5 +19,5 @@ const a = o([
   "border-gray-200"
 ]);
 export {
-  a as wrapperVariants
+  o as wrapperVariants
 };

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,86 +1,4 @@
-import "../Item/Item.js";
-import { List as g } from "../List/List.js";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { forwardRef as w, useId as T, useImperativeHandle as b } from "react";
-import { Tag as C } from "../../../Tag/Tag.js";
-import { cn as r } from "../../../../utils/index.js";
-import { useTagSelect as S } from "../../hooks/useTagSelect.js";
-import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
-import { X as O } from "../../../../x-BPcqkRZd.js";
-import { C as V } from "../../../../chevron-up-RLP4nX7V.js";
-import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
-const B = w(
-  ({
-    label: o,
-    labelClassName: c,
-    name: t,
-    placeholder: p = "Select a value...",
-    theme: d,
-    wrapperClassName: f
-  }, h) => {
-    const i = T(), { selectedTags: n, isOpen: s, onOpen: u, onRemoveTag: x, inputRef: l } = j(), { wrapperRef: N, handleOpen: v } = S();
-    return b(h, () => l.current, [l]), /* @__PURE__ */ m(
-      "div",
-      {
-        ref: N,
-        className: r(
-          I({
-            className: f
-          })
-        ),
-        "data-theme": d,
-        children: [
-          o ? /* @__PURE__ */ e(
-            "label",
-            {
-              htmlFor: t ?? i,
-              className: r(
-                k({
-                  className: c
-                })
-              ),
-              onClick: () => u(!0),
-              children: o
-            }
-          ) : null,
-          /* @__PURE__ */ m(
-            "div",
-            {
-              id: t ?? i,
-              className: r(R()),
-              role: "combobox",
-              onClick: v,
-              "aria-expanded": s,
-              children: [
-                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: p }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((a) => /* @__PURE__ */ e(
-                  C,
-                  {
-                    ...a,
-                    className: "select-none",
-                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
-                    "data-value": a.label
-                  },
-                  a.id
-                )) }),
-                /* @__PURE__ */ e(
-                  V,
-                  {
-                    className: r(
-                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      s ? "rotate-0" : "rotate-180"
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
-          s ? /* @__PURE__ */ e(g, {}) : null
-        ]
-      }
-    );
-  }
-);
+import { t as p } from "../../../../Wrapper-DwxJAkNQ.js";
 export {
-  B as Wrapper
+  p as Wrapper
 };

package/dist/components/TagSelect/components/index.js

@@ -1,8 +1,8 @@
-import { Item as e } from "./Item/Item.js";
-import { List as t } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper/Wrapper.js";
+import { t as m } from "../../../Wrapper-DwxJAkNQ.js";
+import { Item as t } from "./Item/Item.js";
+import { List as i } from "./List/List.js";
 export {
-  e as Item,
-  t as List,
-  f as Wrapper
+  t as Item,
+  i as List,
+  m as Wrapper
 };

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

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = {
+var t = {
   tags: [],
   selectedTags: [],
   isOpen: !1,

package/dist/components/TagSelect/contexts/TagSelect.hook.js

@@ -1,11 +1,10 @@
-import { useContext as t } from "react";
-import { TagSelectContext as o } from "./TagSelect.context.js";
-const c = () => {
-  const e = t(o);
-  if (!e)
-    throw new Error("useTagSelect must be used within a TagSelectProvider");
+import { TagSelectContext as t } from "./TagSelect.context.js";
+import { useContext as r } from "react";
+var a = () => {
+  const e = r(t);
+  if (!e) throw new Error("useTagSelect must be used within a TagSelectProvider");
   return e;
 };
 export {
-  c as useTagSelect
+  a as useTagSelect
 };

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

@@ -1,68 +1,52 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useRef as R, useState as T, useCallback as l } from "react";
-import { TagSelectContext as x } from "./TagSelect.context.js";
-import { useToggle as w } from "../../../hooks/useToggle.js";
-const k = ({
-  children: m,
-  defaultOptions: n = [],
-  multiselect: d = !0
-}) => {
-  const i = R(null), [p, a] = w(!1), [S, g] = T(n), [r, u] = T([]), o = l((t) => {
+import { useToggle as I } from "../../../hooks/useToggle.js";
+import { TagSelectContext as R } from "./TagSelect.context.js";
+import { useCallback as l, useRef as x, useState as T } from "react";
+import { jsx as w } from "react/jsx-runtime";
+var k = ({ children: m, defaultOptions: n = [], multiselect: d = !0 }) => {
+  const i = x(null), [p, c] = I(!1), [S, g] = T(n), [a, u] = T([]), o = l((t) => {
     if (i.current) {
-      const s = t.map(({ id: c, label: e }) => ({
-        id: c,
+      const s = t.map(({ id: r, label: e }) => ({
+        id: r,
         value: e
       }));
       i.current.value = JSON.stringify(s);
     }
-  }, []), f = l(
-    (t) => {
-      const s = [...d ? r : [], t];
-      u(s);
-      const c = s.map((e) => e.id);
-      g(() => d ? n.filter(
-        (e) => !c.includes(e.id)
-      ) : n.map((e) => ({
-        ...e,
-        isSelected: c.includes(e.id)
-      }))), o(s), a(!1);
+  }, []), f = l((t) => {
+    const s = [...d ? a : [], t];
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => d ? n.filter((e) => !r.includes(e.id)) : n.map((e) => ({
+      ...e,
+      isSelected: r.includes(e.id)
+    }))), o(s), c(!1);
+  }, [
+    n,
+    o,
+    d,
+    a,
+    c
+  ]), v = l((t) => {
+    const s = a.filter((e) => e.id !== t.id);
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => n.filter((e) => !r.includes(e.id))), o(s);
+  }, [
+    n,
+    o,
+    a
+  ]), h = l((t) => c(t), [c]);
+  return /* @__PURE__ */ w(R.Provider, {
+    value: {
+      tags: S,
+      selectedTags: a,
+      isOpen: p,
+      inputRef: i,
+      onSelectTag: f,
+      onRemoveTag: v,
+      onOpen: h
     },
-    [
-      n,
-      o,
-      d,
-      r,
-      a
-    ]
-  ), v = l(
-    (t) => {
-      const s = r.filter((e) => e.id !== t.id);
-      u(s);
-      const c = s.map((e) => e.id);
-      g(
-        () => n.filter((e) => !c.includes(e.id))
-      ), o(s);
-    },
-    [n, o, r]
-  ), h = l(
-    (t) => a(t),
-    [a]
-  );
-  return /* @__PURE__ */ I(
-    x.Provider,
-    {
-      value: {
-        tags: S,
-        selectedTags: r,
-        isOpen: p,
-        inputRef: i,
-        onSelectTag: f,
-        onRemoveTag: v,
-        onOpen: h
-      },
-      children: m
-    }
-  );
+    children: m
+  });
 };
 export {
   k as TagSelectProvider

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

@@ -1,6 +1,6 @@
-import { useTagSelect as o } from "./TagSelect.hook.js";
-import { TagSelectProvider as a } from "./TagSelect.provider.js";
+import { useTagSelect as r } from "./TagSelect.hook.js";
+import { TagSelectProvider as t } from "./TagSelect.provider.js";
 export {
-  a as TagSelectProvider,
-  o as useTagSelect
+  t as TagSelectProvider,
+  r as useTagSelect
 };

package/dist/components/TagSelect/hooks/useTagSelect.js

@@ -1,32 +1,23 @@
-import { useRef as l, useEffect as c, useCallback as u } from "react";
-import { useTagSelect as i } from "../contexts/TagSelect.hook.js";
-const g = () => {
-  const n = l(null), { onOpen: e } = i();
-  c(() => {
-    const t = new AbortController(), s = (a) => {
+import { useTagSelect as o } from "../contexts/TagSelect.hook.js";
+import { useCallback as l, useEffect as c, useRef as u } from "react";
+var f = () => {
+  const n = u(null), { onOpen: e } = o();
+  return c(() => {
+    const t = new AbortController(), r = (a) => {
       a.key === "Escape" && e(!1);
-    }, o = (a) => {
+    }, s = (a) => {
       n.current?.contains(a.target) || e(!1);
     };
-    return document.addEventListener("keydown", s, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", o, {
-      signal: t.signal
-    }), () => {
+    return document.addEventListener("keydown", r, { signal: t.signal }), document.addEventListener("mousedown", s, { signal: t.signal }), () => {
       t.abort();
     };
-  }, [e, n]);
-  const r = u(
-    (t) => {
-      t.target?.closest("[data-value]") || e(!0);
-    },
-    [e]
-  );
-  return {
+  }, [e, n]), {
     wrapperRef: n,
-    handleOpen: r
+    handleOpen: l((t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    }, [e])
   };
 };
 export {
-  g as useTagSelect
+  f as useTagSelect
 };

package/dist/components/TextArea/TextArea.js

@@ -1,36 +1,30 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { forwardRef as x, useId as u } from "react";
-import { cn as h } from "../../utils/index.js";
-import { textAreaVariants as p } from "./TextArea.variants.js";
-const I = x(
-  ({
-    initialValue: m,
-    label: e,
-    name: l,
-    placeholder: s,
-    rows: c = 3,
-    theme: i,
-    className: n,
-    ...r
-  }, d) => {
-    const t = u(), a = l ? `${t}-name` : t;
-    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-2", "data-theme": i, children: [
-      e ? /* @__PURE__ */ o("label", { htmlFor: a, className: "cursor-pointer", children: e }) : null,
-      /* @__PURE__ */ o(
-        "textarea",
-        {
-          id: a,
-          ref: d,
-          className: h(p({ className: n })),
-          rows: c,
-          placeholder: s,
-          value: m ?? r.value,
-          ...r
-        }
-      )
-    ] });
-  }
-);
+import { t as m } from "../../utils-Cx-WzRZF.js";
+import { textAreaVariants as h } from "./TextArea.variants.js";
+import { forwardRef as u, useId as p } from "react";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+var g = u(({ initialValue: s, label: r, labelWrapperClassName: o, name: i, placeholder: c, rows: d = 3, theme: n, className: f, ...a }, x) => {
+  const t = p(), l = i ? `${t}-name` : t;
+  return /* @__PURE__ */ v("div", {
+    className: "flex flex-col gap-2",
+    "data-theme": n,
+    children: [r ? /* @__PURE__ */ e("div", {
+      className: m(o),
+      children: /* @__PURE__ */ e("label", {
+        htmlFor: l,
+        className: "cursor-pointer",
+        children: r
+      })
+    }) : null, /* @__PURE__ */ e("textarea", {
+      id: l,
+      ref: x,
+      className: m(h({ className: f })),
+      rows: d,
+      placeholder: c,
+      value: s ?? a.value,
+      ...a
+    })]
+  });
+});
 export {
-  I as TextArea
+  g as TextArea
 };

package/dist/components/TextArea/TextArea.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const o = r([
+import { t as r } from "../../dist-B9GE4SXf.js";
+var i = r([
   "border",
   "border-gray-200",
   "disabled:cursor-not-allowed",
@@ -16,5 +16,5 @@ const o = r([
   "focus:ring-kubefirst-primary"
 ]);
 export {
-  o as textAreaVariants
+  i as textAreaVariants
 };

package/dist/components/TimePicker/TimePicker.js

@@ -1,8 +1,17 @@
+import { TimePickerProvider as c } from "./contexts/time-picker.provider.js";
+import { Wrapper as a } from "./components/Wrapper/Wrapper.js";
 import { jsx as r } from "react/jsx-runtime";
-import { TimePickerProvider as m } from "./contexts/time-picker.provider.js";
-import { Wrapper as o } from "./components/Wrapper/Wrapper.js";
-const p = ({ format: i = "12", ...e }) => /* @__PURE__ */ r(m, { format: i, children: /* @__PURE__ */ r(o, { ...e }) });
-p.displayName = "TimePicker";
+var s = ({ format: e = "12", mode: i = "select", showList: m = !0, time: o, onChange: t, ...p }) => /* @__PURE__ */ r(c, {
+  format: e,
+  time: o,
+  onChange: t,
+  children: /* @__PURE__ */ r(a, {
+    mode: i,
+    showList: m,
+    ...p
+  })
+});
+s.displayName = "KonstructTimePicker";
 export {
-  p as TimePicker
+  s as TimePicker
 };

package/dist/components/TimePicker/TimePicker.variants.js

@@ -1,46 +1,57 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const t = r([
+import { t } from "../../dist-B9GE4SXf.js";
+var r = t([
   "border",
   "rounded",
-  "p-[0.625rem]",
+  "p-2.5",
   "w-full",
   "flex",
   "items-center",
   "justify-between",
+  "bg-white",
   "border-gray-300",
+  "dark:border-metal-700",
+  "dark:bg-metal-800",
   "cursor-pointer",
   "transition-all",
   "transition-duration-100",
   "data-[open=true]:border-aurora-500",
-  "text-sm"
-]), o = r([
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]), e = t([
   "snap-y",
   "snap-mandatory",
   "overflow-y-scroll",
   "scrollbar-none",
   "flex",
-  "flex-col"
-]), n = r([
-  "w-[60px]",
-  "h-[40px]",
+  "flex-col",
+  "dark:text-metal-50"
+]), o = t([
+  "w-15",
+  "h-10",
   "snap-start",
   "rounded",
   "transition-all",
   "transition-duration-100",
-  "focus-within:outline-2",
+  "outline-none",
   "border-2",
   "border-transparent",
-  "outline-none",
   "hover:bg-gray-100",
-  "hover:border-2",
-  "hover:border-white",
+  "focus-within:bg-gray-100",
   "data-[active=true]:bg-blue-600",
-  "data-[active=true]:hover:border-blue-200",
   "data-[active=true]:text-white",
   "data-[active=true]:font-medium",
-  "focus-visible:border-blue-200",
-  "focus-within:border-blue-200"
-]), a = r([
+  "data-[active=true]:hover:border-blue-200",
+  "data-[active=true]:focus-within:bg-blue-600",
+  "data-[active=true]:focus-within:border-blue-200",
+  "dark:data-[active=true]:bg-aurora-500",
+  "dark:data-[active=true]:text-metal-900",
+  "dark:data-[active=true]:hover:border-aurora-50",
+  "dark:data-[active=true]:focus-within:bg-aurora-500",
+  "dark:data-[active=true]:focus-within:border-aurora-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus-within:bg-metal-700"
+]), i = t([
   "flex",
   "items-center",
   "justify-center",
@@ -50,12 +61,11 @@ const t = r([
   "px-6",
   "py-3",
   "outline-none",
-  "focus:border-blue-200",
   "text-sm"
 ]);
 export {
-  a as buttonVariants,
-  n as liVariants,
-  t as timePickerVariants,
-  o as ulVariants
+  i as buttonVariants,
+  o as liVariants,
+  r as timePickerVariants,
+  e as ulVariants
 };