@konstructio/ui 0.1.2-alpha.6 → 0.1.2-alpha.61

package/dist/components/Select/components/List/List.types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentRef, RefObject } from 'react';
+import { SelectProps } from '../../Select.types';
+export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
+    className?: string;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    isLoading: boolean;
+    itemClassName?: string;
+    searchable?: boolean;
+    listItemSecondRowClassName?: string;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
+    onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
+    noOptionsText?: SelectProps['noOptionsText'];
+};

package/dist/components/Select/components/List/List.variants.d.ts

@@ -0,0 +1 @@
+export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListItemProps } from './ListItem.types';
+export declare const ListItem: FC<ListItemProps>;

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
+};

package/dist/components/Select/components/ListItem/ListItem.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../../Select.types';
+export type ListItemProps = Option & {
+    isEmpty?: boolean;
+    className?: string;
+    listItemSecondRowClassName?: string;
+    isClickable: boolean;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+};

package/dist/components/Select/components/ListItem/ListItem.variants.d.ts

@@ -0,0 +1 @@
+export declare const listItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -1,8 +1,8 @@
 import { c as r } from "../../../../index-D29mdTf5.js";
 const t = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,10 +12,11 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
   t as listItemVariants

package/dist/components/Select/components/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { SelectProps } from '../Select.types';
+export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & RefAttributes<ComponentRef<'input'>>>;

package/dist/components/Select/components/Wrapper.js

@@ -0,0 +1,246 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as te, useId as ae, useRef as w, useMemo as re, useImperativeHandle as ne, useEffect as le } from "react";
+import { Typography as se } from "../../Typography/Typography.js";
+import { cn as n } from "../../../utils/index.js";
+import { labelVariants as oe, inputVariants as ce, selectVariants as ie } from "../Select.variants.js";
+import { useSelect as me } from "../hooks/useSelect.js";
+import { List as pe } from "./List/List.js";
+import { c as ue } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as fe } from "../../../assets/icons/components/Loader.js";
+import { C as de } from "../../../chevron-up-IlDPxR7j.js";
+import { useSelectContext as xe } from "../contexts/select.hook.js";
+const he = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], ve = ue("search", he), ze = te(
+  ({
+    additionalOptions: z,
+    className: O,
+    defaultValue: x,
+    disabled: t = !1,
+    error: f,
+    iconClassName: R,
+    inputClassName: F,
+    isInfiniteScrollEnabled: S = !1,
+    isLoading: g,
+    isRequired: h,
+    label: v,
+    labelAction: T,
+    labelClassName: E,
+    labelWrapperClassName: M,
+    listClassName: W,
+    listItemClassName: _,
+    listItemSecondRowClassName: $,
+    name: d,
+    noOptionsText: H,
+    placeholder: N,
+    searchable: k = !1,
+    showSearchIcon: C,
+    theme: P,
+    wrapperClassName: U,
+    onFetchMoreOptions: q,
+    onBlur: A,
+    onSearchChange: B,
+    ...y
+  }, D) => {
+    const I = ae(), c = w(null), j = w(null), G = w(0), {
+      isOpen: i,
+      options: l,
+      searchTerm: J,
+      value: s,
+      setCanFilter: K,
+      setSearchTerm: Q,
+      setValue: m,
+      toggleOpen: X
+    } = xe(), e = re(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Y, wrapperInputRef: L, handleOpen: V } = me({
+      ulRef: j,
+      inputRef: c,
+      disabled: t,
+      internalValue: e,
+      onBlur: A
+    }), p = d ? `${I}-${d}` : I;
+    ne(D, () => c.current, [c]), le(() => {
+      if (x && !s) {
+        const a = l && l.find((u) => u.value === x);
+        a && m(a.value);
+      }
+    }, [x, l, m, s]);
+    const Z = (a) => {
+      const u = a.target.value;
+      K(!0), m(""), Q(u ?? ""), B?.(u);
+      const b = l.find(
+        (ee) => ee.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+      );
+      m(b ? b.value : e?.value ?? "");
+    };
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: Y,
+        className: n("flex flex-col gap-2 w-full relative", U),
+        "data-theme": P,
+        children: [
+          v ? /* @__PURE__ */ o(
+            "div",
+            {
+              className: n(
+                "flex items-center justify-between",
+                M
+              ),
+              children: [
+                /* @__PURE__ */ o(
+                  "label",
+                  {
+                    id: p,
+                    className: n(oe({ className: E })),
+                    htmlFor: p,
+                    onClick: () => !t && V(),
+                    children: [
+                      v,
+                      h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
+                    ]
+                  }
+                ),
+                T
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: L,
+              id: p,
+              className: n(
+                ie({ className: O, hasError: !!f, disabled: t })
+              ),
+              role: "combobox",
+              onClick: () => !t && X(!i),
+              "aria-expanded": i,
+              tabIndex: G.current,
+              "aria-labelledby": p,
+              children: [
+                /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
+                  C && /* @__PURE__ */ r(
+                    ve,
+                    {
+                      className: n(
+                        "w-4",
+                        "h-4",
+                        "text-zinc-500",
+                        "select-none",
+                        "transition-colors",
+                        "duration-300",
+                        "dark:text-metal-300",
+                        "dark:group-focus-within:text-metal-50"
+                      )
+                    }
+                  ),
+                  k ? /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "text",
+                      value: i ? J : e?.label ?? s ?? "",
+                      onChange: Z,
+                      placeholder: N,
+                      className: n(ce({ className: F }), {
+                        "text-red-700 placeholder:text-red-700": !!f
+                      }),
+                      onClick: (a) => {
+                        a.stopPropagation(), t || V();
+                      },
+                      "aria-label": v || N,
+                      "aria-labelledby": p,
+                      required: h,
+                      autoComplete: "off",
+                      autoCapitalize: "words",
+                      disabled: t,
+                      tabIndex: -1,
+                      ...y
+                    }
+                  ) : /* @__PURE__ */ o(
+                    se,
+                    {
+                      variant: "body2",
+                      className: n(
+                        "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
+                        {
+                          "text-red-700": !!f,
+                          "select-none": !e,
+                          "text-metal-800 dark:text-metal-50": e,
+                          "text-metal-400/50 dark:text-metal-50/50": t
+                        },
+                        e?.wrapperClassNameOnSelectedValue
+                      ),
+                      children: [
+                        e?.label || N,
+                        " ",
+                        e?.showRightComponentOnselectedValue ? e?.rightComponent : null
+                      ]
+                    }
+                  )
+                ] }),
+                g ? /* @__PURE__ */ r(
+                  fe,
+                  {
+                    size: 16,
+                    className: "text-metal-400 animate-spin select-none"
+                  }
+                ) : !C && /* @__PURE__ */ r(
+                  de,
+                  {
+                    "data-state": i ? "open" : "closed",
+                    className: n(
+                      "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-metal-50",
+                      R,
+                      {
+                        "text-red-700": !!f,
+                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: c,
+              type: "text",
+              name: d,
+              className: "hidden",
+              "aria-hidden": "true",
+              required: h,
+              inert: !0,
+              defaultValue: e?.value ?? s ?? void 0,
+              ...y
+            }
+          ),
+          i && /* @__PURE__ */ r(
+            pe,
+            {
+              ref: j,
+              additionalOptions: z,
+              className: W,
+              itemClassName: _,
+              name: d,
+              wrapperInputRef: L,
+              inputRef: c,
+              options: l,
+              isLoading: !!g,
+              searchable: k,
+              listItemSecondRowClassName: $,
+              isInfiniteScrollEnabled: S,
+              onFetchMoreOptions: q,
+              noOptionsText: H
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  ze as Wrapper
+};

package/dist/components/Select/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EmptyList';
+export * from './List/List';
+export * from './Wrapper';

package/dist/components/Select/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/components/Select/constants/index.js

@@ -0,0 +1,4 @@
+import { DEFAULT_LIST_SIZE as E } from "./pagination.js";
+export {
+  E as DEFAULT_LIST_SIZE
+};

package/dist/components/Select/constants/pagination.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LIST_SIZE = 10;

package/dist/components/Select/constants/pagination.js

@@ -0,0 +1,4 @@
+const o = 10;
+export {
+  o as DEFAULT_LIST_SIZE
+};

package/dist/components/Select/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './select.hook';
+export * from './select.provider';

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

@@ -0,0 +1,6 @@
+import { useSelectContext as r } from "./select.hook.js";
+import { SelectProvider as x } from "./select.provider.js";
+export {
+  x as SelectProvider,
+  r as useSelectContext
+};

package/dist/components/Select/contexts/select.context.d.ts

@@ -0,0 +1,21 @@
+import { ComponentRef, Dispatch, RefObject, SetStateAction } from 'react';
+import { Option } from '../Select.types';
+export type SelectContextType = {
+    highlightSearchEnabled: boolean;
+    isOpen: boolean;
+    searchTerm: string;
+    value?: string;
+    canFilter: boolean;
+    canContinueFetching: boolean;
+    page: number;
+    options: Option[];
+    isTyping?: boolean;
+    setOptions: Dispatch<SetStateAction<Option[]>>;
+    setPage: Dispatch<SetStateAction<number>>;
+    setCanContinueFetching: Dispatch<SetStateAction<boolean>>;
+    setCanFilter: Dispatch<SetStateAction<boolean>>;
+    setSearchTerm: Dispatch<SetStateAction<string>>;
+    setValue: (value: string, inputRef?: RefObject<ComponentRef<'input'> | null>) => void;
+    toggleOpen: (value?: boolean) => void;
+};
+export declare const SelectContext: import('react').Context<SelectContextType>;

package/dist/components/Select/contexts/select.context.js

@@ -0,0 +1,36 @@
+import { createContext as e } from "react";
+const r = e({
+  highlightSearchEnabled: !1,
+  isOpen: !1,
+  searchTerm: "",
+  value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
+  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 {
+  r as SelectContext
+};

package/dist/components/Select/contexts/select.hook.d.ts

@@ -0,0 +1,2 @@
+import { SelectContextType } from './select.context';
+export declare const useSelectContext: () => SelectContextType;

package/dist/components/Select/contexts/select.hook.js

@@ -0,0 +1,11 @@
+import { useContext as e } from "react";
+import { SelectContext as o } from "./select.context.js";
+const c = () => {
+  const t = e(o);
+  if (!t)
+    throw new Error("useSelectContext must be used within a SelectProvider");
+  return t;
+};
+export {
+  c as useSelectContext
+};

package/dist/components/Select/contexts/select.provider.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { SelectProps, Option } from '../Select.types';
+export declare const SelectProvider: FC<PropsWithChildren & {
+    highlightSearch?: boolean;
+    name?: string;
+    value?: string;
+    options: Option[];
+    onChange?: SelectProps['onChange'];
+    onBlur?: SelectProps['onBlur'];
+}>;

package/dist/components/Select/contexts/select.provider.js

@@ -0,0 +1,58 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as e, useRef as f, useCallback as T, useEffect as p } from "react";
+import { SelectContext as N } from "./select.context.js";
+import { useToggle as O } from "../../../hooks/useToggle.js";
+const c = 1, R = 300, V = ({
+  children: C,
+  value: E,
+  name: i,
+  highlightSearch: S = !1,
+  options: n,
+  onChange: a,
+  onBlur: u
+}) => {
+  const [d, l] = e(n), v = f(S), [F, g] = O(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = f(void 0), D = T(
+    (r, m) => {
+      m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: { value: r, name: i ?? "" } }), u?.(), t.current = setTimeout(() => {
+        h(!1);
+      }, R);
+    },
+    [a, i, u]
+  ), G = T(
+    (r) => {
+      g(r), o(!0), s(c);
+    },
+    [g]
+  );
+  return p(() => {
+    l(n);
+  }, [n.length]), p(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ L(
+    N.Provider,
+    {
+      value: {
+        highlightSearchEnabled: v.current,
+        isOpen: F,
+        searchTerm: P,
+        value: E,
+        canFilter: b,
+        canContinueFetching: A,
+        page: _,
+        options: d,
+        isTyping: y,
+        setOptions: l,
+        setPage: s,
+        setCanContinueFetching: o,
+        setCanFilter: x,
+        setSearchTerm: I,
+        setValue: D,
+        toggleOpen: G
+      },
+      children: C
+    }
+  );
+};
+export {
+  V as SelectProvider
+};

package/dist/components/Select/hooks/useNavigationList.d.ts

@@ -0,0 +1,11 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Select.types';
+type UseNavigationListProps = {
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    searchable?: boolean;
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    filteredOptions: Option[];
+};
+export declare const useNavigationUlList: ({ searchable, ulRef, wrapperInputRef, filteredOptions, }: UseNavigationListProps) => void;
+export {};