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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { A as t } from "../../../AdditionalOptions-C2FDVZhu.js";
+import { EmptyList as e } from "./EmptyList.js";
+import { List as m } from "./List/List.js";
+import { Wrapper as s } from "./Wrapper.js";
+export {
+  t as AdditionalOptions,
+  e as EmptyList,
+  m as List,
+  s as 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 {};

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

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

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

@@ -0,0 +1,15 @@
+import { ComponentRef, RefObject } from 'react';
+import { SelectProps, Option } from '../Select.types';
+type UseSelectParams = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    disabled: boolean;
+    internalValue?: Option;
+    onBlur?: SelectProps['onBlur'];
+};
+export declare const useSelect: ({ ulRef, inputRef, disabled, internalValue, onBlur, }: UseSelectParams) => {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    wrapperInputRef: RefObject<HTMLDivElement | null>;
+    handleOpen: () => void;
+};
+export {};

package/dist/components/Select/hooks/useSelect.js

@@ -0,0 +1,103 @@
+import { useRef as m, useEffect as c, useCallback as w } from "react";
+import { useSelectContext as L } from "../contexts/select.hook.js";
+const y = ({
+  ulRef: f,
+  inputRef: r,
+  disabled: E,
+  internalValue: u,
+  onBlur: g
+}) => {
+  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
+  c(() => {
+    const e = new AbortController(), s = (l) => {
+      l.key === "Escape" && n(!1);
+    }, o = (l) => {
+      t.current?.contains(l.target) || n(!1);
+    };
+    return document.addEventListener("keydown", s, {
+      signal: e.signal
+    }), document.addEventListener("mousedown", o, {
+      signal: e.signal
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        document.hidden && n(!1);
+      },
+      {
+        signal: e.signal
+      }
+    ), a.current?.addEventListener(
+      "focusin",
+      (l) => {
+        !E && l.target?.matches(":focus-visible") && n(!0);
+      },
+      { signal: e.signal }
+    ), () => {
+      e.abort();
+    };
+  }, [n, t]), c(() => {
+    const e = new AbortController();
+    return a.current?.addEventListener(
+      "keydown",
+      (s) => {
+        if (s.key === "ArrowDown") {
+          const o = f.current?.querySelector("li");
+          o && o.focus();
+        }
+      },
+      { signal: e.signal }
+    ), () => {
+      e.abort();
+    };
+  }, [a, f]), c(() => {
+    const e = new AbortController();
+    return r?.current?.addEventListener(
+      "focusin",
+      () => {
+        v(u?.value ?? ""), d(!1);
+      },
+      { signal: e.signal }
+    ), r?.current?.addEventListener(
+      "focusout",
+      () => {
+        d(!0);
+      },
+      { signal: e.signal }
+    ), a.current?.addEventListener(
+      "focus",
+      () => {
+        d(!1);
+      },
+      { signal: e.signal }
+    ), t.current?.addEventListener(
+      "focusout",
+      (s) => {
+        t.current?.contains(s.relatedTarget) || n(!1);
+      },
+      { signal: e.signal }
+    ), () => {
+      e.abort();
+    };
+  }, [i]), c(() => {
+    r?.current && (r.current.value = i && u?.value || "");
+  }, [u, i]), c(() => {
+    const e = new AbortController();
+    return t.current?.addEventListener("focusout", (s) => {
+      const o = s.relatedTarget;
+      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
+    }), () => {
+      e.abort();
+    };
+  }, [n, t, v, g, i]);
+  const b = w(() => {
+    n(!0), requestAnimationFrame(() => r?.current?.focus());
+  }, [r, n]);
+  return {
+    wrapperRef: t,
+    wrapperInputRef: a,
+    handleOpen: b
+  };
+};
+export {
+  y as useSelect
+};

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
+import { SidebarChildrenProps, SidebarProps } from './Sidebar.types';
+/**
+ * A compound component for building application sidebars.
+ * Includes sub-components for logo, navigation, groups, options, and footer.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar canResize minWith={200} maxWith={400} theme="dark">
+ *   <Sidebar.Logo>
+ *     <img src="/logo.svg" alt="Logo" />
+ *   </Sidebar.Logo>
+ *   <Sidebar.Navigation>
+ *     <Sidebar.NavigationGroup label="Menu">
+ *       <Sidebar.NavigationOption href="/" icon={<Home />}>
+ *         Home
+ *       </Sidebar.NavigationOption>
+ *     </Sidebar.NavigationGroup>
+ *   </Sidebar.Navigation>
+ *   <Sidebar.Footer>Version 1.0</Sidebar.Footer>
+ * </Sidebar>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-sidebar--docs Storybook}
+ */
+declare const Sidebar: FC<SidebarProps> & SidebarChildrenProps;
+export { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator, Sidebar, };