@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,205 +0,0 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { forwardRef as K, useId as Q, useRef as R, useImperativeHandle as S, useMemo as X, useEffect as g } from "react";
-import { Loading as Y } from "../../Loading/Loading.js";
-import { Typography as Z } from "../../Typography/Typography.js";
-import { cn as s } from "../../../utils/index.js";
-import { labelVariants as B, inputVariants as ee, dropdownVariants as te } from "../Dropdown.variants.js";
-import { useDropdown as ae } from "../hooks/useDropdown.js";
-import { List as re } from "./List/List.js";
-import { c as T } from "../../../createLucideIcon-D2CN7Ma9.js";
-import { useDropdownContext as ne } from "../contexts/dropdown.hook.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const le = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], oe = T("chevron-up", le);
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const se = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ce = T("search", se), we = K(
-  ({
-    additionalOptions: V,
-    className: _,
-    defaultValue: x,
-    error: f,
-    iconClassName: $,
-    inputClassName: D,
-    isLoading: L,
-    isRequired: h,
-    label: v,
-    labelClassName: F,
-    listClassName: M,
-    listItemClassName: A,
-    name: c,
-    options: n,
-    placeholder: N,
-    searchable: w = !1,
-    showSearchIcon: C,
-    theme: H,
-    wrapperClassName: P,
-    onBlur: j,
-    ...z
-  }, U) => {
-    const I = Q(), t = R(null), E = R(null), { wrapperRef: i, wrapperInputRef: O, handleOpen: k } = ae({
-      ulRef: E,
-      inputRef: t
-    }), { isOpen: m, searchTerm: W, value: l, toggleOpen: q, setValue: y, setSearchTerm: b } = ne(), d = c ? `${I}-${c}` : I;
-    S(U, () => t.current, [t]);
-    const r = X(() => n.find(({ value: e }) => e === l), [n, l]);
-    g(() => {
-      t.current && (t.current.value = l ? r?.value : "");
-    }, [r, l]), g(() => {
-      if (x && !l) {
-        const e = n && n.find((o) => o.value === x);
-        e && y(e.value);
-      }
-    }, [x, n, y, l]), g(() => {
-      const e = new AbortController();
-      return i.current?.addEventListener("focusout", (o) => {
-        const u = o.relatedTarget;
-        (!u || !i.current?.contains(u)) && (b(""), t.current?.value || j?.());
-      }), () => {
-        e.abort();
-      };
-    }, [q, i, b, j, l]);
-    const G = (e) => {
-      const o = e.target.value;
-      b(o);
-      const u = n.find(
-        (J) => J.value.toLocaleLowerCase() === o.toLocaleLowerCase()
-      );
-      u && y(u.value);
-    };
-    return /* @__PURE__ */ p(
-      "div",
-      {
-        ref: i,
-        className: s("flex flex-col w-full relative", P),
-        "data-theme": H,
-        children: [
-          v ? /* @__PURE__ */ p(
-            "label",
-            {
-              id: d,
-              className: s(B({ className: F })),
-              htmlFor: d,
-              onClick: k,
-              children: [
-                v,
-                h && /* @__PURE__ */ a("span", { className: "text-red-600 ml-1", children: "*" })
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ p(
-            "div",
-            {
-              ref: O,
-              id: d,
-              className: s(te({ className: _, hasError: !!f })),
-              role: "combobox",
-              onClick: k,
-              "aria-expanded": m,
-              tabIndex: 0,
-              "aria-labelledby": d,
-              children: [
-                /* @__PURE__ */ p("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  r?.leftIcon && !C && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: r.leftIcon }),
-                  C && /* @__PURE__ */ a(ce, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
-                  w ? /* @__PURE__ */ a(
-                    "input",
-                    {
-                      ref: t,
-                      type: "text",
-                      value: m ? W : r?.label || "",
-                      name: c,
-                      onChange: G,
-                      placeholder: N,
-                      className: s(ee({ className: D }), {
-                        "text-red-700 placeholder:text-red-700": !!f
-                      }),
-                      onClick: (e) => {
-                        e.stopPropagation(), k();
-                      },
-                      "aria-label": v || N,
-                      "aria-labelledby": d,
-                      required: h,
-                      autoComplete: "off",
-                      autoCapitalize: "words",
-                      ...z
-                    }
-                  ) : /* @__PURE__ */ a(
-                    Z,
-                    {
-                      variant: "body2",
-                      className: s(
-                        "flex-1 text-zinc-400 text-sm dark:text-slate-400",
-                        {
-                          "text-red-700": !!f,
-                          "select-none": !r,
-                          "text-slate-800 dark:text-slate-50": r
-                        }
-                      ),
-                      children: r?.label || N
-                    }
-                  )
-                ] }),
-                L ? /* @__PURE__ */ a(Y, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
-                  oe,
-                  {
-                    "data-state": m ? "open" : "closed",
-                    className: s(
-                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
-                      $,
-                      {
-                        "text-red-700": !!f
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          !w && /* @__PURE__ */ a(
-            "input",
-            {
-              ref: t,
-              type: "text",
-              name: c,
-              className: "hidden",
-              "aria-hidden": "true",
-              required: h,
-              ...z
-            }
-          ),
-          m && /* @__PURE__ */ a(
-            re,
-            {
-              ref: E,
-              additionalOptions: V,
-              className: M,
-              itemClassName: A,
-              name: c,
-              wrapperRef: i,
-              wrapperInputRef: O,
-              inputRef: t,
-              options: n,
-              isLoading: !!L,
-              searchable: w
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  we as Wrapper
-};

package/dist/components/Dropdown/components/index.js

@@ -1,8 +0,0 @@
-import { EmptyList as p } from "./EmptyList.js";
-import { List as e } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper.js";
-export {
-  p as EmptyList,
-  e as List,
-  f as Wrapper
-};

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,19 +0,0 @@
-import { createContext as e } from "react";
-const t = e({
-  highlightSearchEnabled: !1,
-  isOpen: !1,
-  searchTerm: "",
-  value: void 0,
-  setSearchTerm() {
-    throw new Error("setSearchTerm function must be overridden");
-  },
-  setValue() {
-    throw new Error("setValue function must be overridden");
-  },
-  toggleOpen() {
-    throw new Error("toggleOpen function must be overridden");
-  }
-});
-export {
-  t as DropdownContext
-};

package/dist/components/Dropdown/contexts/dropdown.hook.js

@@ -1,13 +0,0 @@
-import { useContext as t } from "react";
-import { DropdownContext as r } from "./dropdown.context.js";
-const p = () => {
-  const o = t(r);
-  if (!o)
-    throw new Error(
-      "useDropdownContext must be used within a DropdownProvider"
-    );
-  return o;
-};
-export {
-  p as useDropdownContext
-};

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,30 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as p, useState as d, useCallback as v } from "react";
-import { DropdownContext as S } from "./dropdown.context.js";
-import { useToggle as b } from "../../../hooks/useToggle.js";
-const D = ({ children: s, value: n, name: e, highlightSearch: c = !1, onChange: r, onBlur: t }) => {
-  const l = p(c), [h, i] = b(!1), [m, g] = d(""), u = v(
-    (o, a) => {
-      a?.current && (a.current.value = o), r?.({ target: { value: o, name: e ?? "" } }), t?.();
-    },
-    [r, e, t]
-  );
-  return /* @__PURE__ */ f(
-    S.Provider,
-    {
-      value: {
-        highlightSearchEnabled: l.current,
-        isOpen: h,
-        searchTerm: m,
-        value: n,
-        setSearchTerm: g,
-        setValue: u,
-        toggleOpen: i
-      },
-      children: s
-    }
-  );
-};
-export {
-  D as DropdownProvider
-};

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

@@ -1,6 +0,0 @@
-import { useDropdownContext as e } from "./dropdown.hook.js";
-import { DropdownProvider as t } from "./dropdown.provider.js";
-export {
-  t as DropdownProvider,
-  e as useDropdownContext
-};

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,58 +0,0 @@
-import { useRef as c, useEffect as u, useCallback as f } from "react";
-import { useDropdownContext as g } from "../contexts/dropdown.hook.js";
-const w = ({ ulRef: l, inputRef: i }) => {
-  const o = c(null), t = c(null), { toggleOpen: n } = g();
-  u(() => {
-    const e = new AbortController(), s = (a) => {
-      a.key === "Escape" && n(!1);
-    }, r = (a) => {
-      o.current?.contains(a.target) || n(!1);
-    };
-    return document.addEventListener("keydown", s, {
-      signal: e.signal
-    }), document.addEventListener("mousedown", r, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && n(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), t.current?.addEventListener(
-      "focus",
-      () => {
-        n(!0);
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
-    };
-  }, [n, o]), u(() => {
-    const e = new AbortController();
-    return t.current?.addEventListener(
-      "keydown",
-      (s) => {
-        if (s.key === "ArrowDown") {
-          const r = l.current?.querySelector("li");
-          r && r.focus();
-        }
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
-    };
-  }, [t, l]);
-  const d = f(() => {
-    n(!0), requestAnimationFrame(() => i?.current?.focus());
-  }, [i, n]);
-  return {
-    wrapperRef: o,
-    wrapperInputRef: t,
-    handleOpen: d
-  };
-};
-export {
-  w as useDropdown
-};

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,62 +0,0 @@
-import { useRef as g, useEffect as i } from "react";
-import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-const w = ({
-  inputRef: s,
-  searchable: l,
-  ulRef: t,
-  wrapperInputRef: u,
-  wrapperRef: a
-}) => {
-  const r = g(0), { isOpen: f } = d();
-  i(() => {
-    const c = t.current?.querySelectorAll("li") ?? [], e = Array.from(c).filter(
-      (n) => n.getAttribute("data-action") !== "true"
-    ), o = new AbortController(), m = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, b = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, s?.current && l ? s.current.focus() : u.current?.focus());
-    };
-    return t.current?.addEventListener(
-      "keydown",
-      (n) => {
-        switch (n.preventDefault(), n.key) {
-          case "ArrowDown": {
-            m();
-            break;
-          }
-          case "Tab": {
-            n.shiftKey ? b() : m();
-            break;
-          }
-          case "ArrowUp": {
-            r.current === 0 ? u.current?.focus() : b();
-            break;
-          }
-          case "Enter": {
-            e[r.current]?.click();
-            break;
-          }
-        }
-      },
-      { signal: o.signal }
-    ), () => {
-      o.abort();
-    };
-  }, [t, r, u, s, l]), i(() => {
-    const c = new AbortController();
-    return a.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((o) => o.blur());
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
-    };
-  }, [t, a]), i(() => {
-    f || (r.current = 0);
-  }, [f]);
-};
-export {
-  w as useNavigationUlList
-};

package/dist/components/NumberInput/NumberInput.js

@@ -1,179 +0,0 @@
-import { jsxs as m, jsx as c } from "react/jsx-runtime";
-import { R as O } from "../../index-sp5ZfG6g.js";
-import f, { forwardRef as b, useId as N, useCallback as w } from "react";
-import { cn as y } from "../../utils/index.js";
-import { labelVariants as z, buttonVariants as j, numberInputVariants as _ } from "./NumberInput.variants.js";
-import { P as l } from "../../index-N2OStZoU.js";
-function h() {
-  return h = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var t in r)
-        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
-    }
-    return e;
-  }, h.apply(this, arguments);
-}
-function E(e, o) {
-  if (e == null) return {};
-  var r = $(e, o), t, n;
-  if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < i.length; n++)
-      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
-  }
-  return r;
-}
-function $(e, o) {
-  if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, i;
-  for (i = 0; i < t.length; i++)
-    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
-  return r;
-}
-var g = b(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, u = E(e, ["color", "size"]);
-  return /* @__PURE__ */ f.createElement("svg", h({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, u), /* @__PURE__ */ f.createElement("line", {
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
-  }));
-});
-g.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
-};
-g.displayName = "Minus";
-function v() {
-  return v = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var t in r)
-        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
-    }
-    return e;
-  }, v.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var r = W(e, o), t, n;
-  if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < i.length; n++)
-      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
-  }
-  return r;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var r = {}, t = Object.keys(e), n, i;
-  for (i = 0; i < t.length; i++)
-    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
-  return r;
-}
-var d = b(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, u = L(e, ["color", "size"]);
-  return /* @__PURE__ */ f.createElement("svg", v({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, u), /* @__PURE__ */ f.createElement("line", {
-    x1: "12",
-    y1: "5",
-    x2: "12",
-    y2: "19"
-  }), /* @__PURE__ */ f.createElement("line", {
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
-  }));
-});
-d.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
-};
-d.displayName = "Plus";
-const D = b(
-  ({
-    className: e,
-    label: o,
-    max: r = -1 / 0,
-    min: t = 1 / 0,
-    name: n,
-    theme: i,
-    value: u,
-    onChange: p
-  }, x) => {
-    const P = N(), a = u ?? 0, k = w(() => {
-      let s = 0;
-      t === 1 / 0 ? s = a - 1 : s = Math.max(t, a - 1), p?.({ target: { value: s } });
-    }, [a, t, p]), I = w(() => {
-      let s = 0;
-      r === -1 / 0 ? s = a + 1 : s = Math.min(r, a + 1), p?.({ target: { value: s } });
-    }, [a, r, p]);
-    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", "data-theme": i, children: [
-      o ? /* @__PURE__ */ c("label", { htmlFor: n ?? P, className: y(z()), children: o }) : null,
-      /* @__PURE__ */ m("div", { className: "flex items-center", role: "presentation", children: [
-        /* @__PURE__ */ m(
-          "button",
-          {
-            type: "button",
-            onClick: k,
-            className: y(j({ button: "rigth" })),
-            children: [
-              /* @__PURE__ */ c(g, { className: "w-4 h-4" }),
-              /* @__PURE__ */ c(O, { children: "Decrement" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ c(
-          "input",
-          {
-            ref: x,
-            type: "number",
-            value: a,
-            name: n,
-            className: y(_({ className: e })),
-            readOnly: !0,
-            "aria-label": typeof o == "string" ? o : "number input"
-          }
-        ),
-        /* @__PURE__ */ m(
-          "button",
-          {
-            type: "button",
-            onClick: I,
-            className: y(j({ button: "left" })),
-            children: [
-              /* @__PURE__ */ c(d, { className: "w-4 h-4" }),
-              /* @__PURE__ */ c(O, { children: "Increment" })
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
-export {
-  D as NumberInput
-};

package/dist/components/NumberInput/NumberInput.variants.js

@@ -1,50 +0,0 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const r = e([
-  "[&::-webkit-inner-spin-button]:appearance-none",
-  "[&::-webkit-outer-spin-button]:appearance-none",
-  "[-moz-appearance:textfield]",
-  "appearance-none",
-  "border",
-  "border-x-0",
-  "focus-visible:outline-none",
-  "focus-visible:ring-transparent",
-  "h-9",
-  "max-w-16",
-  "text-right",
-  "px-3",
-  "border-gray-200"
-]), n = e(
-  [
-    "h-9",
-    "w-9",
-    "flex",
-    "items-center",
-    "justify-center",
-    "border",
-    "text-slate-400",
-    "border-gray-200",
-    "cursor-pointer"
-  ],
-  {
-    variants: {
-      button: {
-        left: ["rounded-e"],
-        rigth: ["rounded-s"]
-      }
-    }
-  }
-), a = e(["cursor-pointer"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-export {
-  n as buttonVariants,
-  a as labelVariants,
-  r as numberInputVariants
-};

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

@@ -1,16 +0,0 @@
-import { c as a } from "../../../../index-D29mdTf5.js";
-const p = a([
-  "flex",
-  "gap-1.5",
-  "p-2",
-  "rounded-md",
-  "shadow",
-  "w-full",
-  "max-h-[216px]",
-  "absolute mt-1",
-  "bg-white",
-  "z-10"
-]);
-export {
-  p as wrapperVariants
-};