@majapisoftwares/ui 4.3.17 → 6.0.0

package/bootstrap/modeScript.js

@@ -1,35 +0,0 @@
-const modeScript = `
-  let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-
-  updateMode()
-  darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
-  window.addEventListener('storage', updateModeWithoutTransitions)
-
-  function updateMode() {
-    let isSystemDarkMode = darkModeMediaQuery.matches
-    let isDarkMode = window.localStorage.isDarkMode === 'true' || (!('isDarkMode' in window.localStorage) && isSystemDarkMode)
-
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
-
-    if (isDarkMode === isSystemDarkMode) {
-      delete window.localStorage.isDarkMode
-    }
-  }
-
-  function disableTransitionsTemporarily() {
-    document.documentElement.classList.add('**:transition-none!')
-    window.setTimeout(() => {
-      document.documentElement.classList.remove('**:transition-none!')
-    }, 0)
-  }
-
-  function updateModeWithoutTransitions() {
-    disableTransitionsTemporarily()
-    updateMode()
-  }
-`;
-export default modeScript;

package/bootstrap/nprogress.d.ts

@@ -1 +0,0 @@
-export default function setupNProgress(color?: string): void;

package/bootstrap/nprogress.js

@@ -1,19 +0,0 @@
-import ProgressBar from "@badrap/bar-of-progress";
-import Router from "next/router";
-export default function setupNProgress(color = "#0ea5e9") {
-    const progress = new ProgressBar({
-        size: 2,
-        color,
-        className: "bar-of-progress",
-        delay: 100,
-    });
-    // this fixes safari jumping to the bottom of the page
-    // when closing the search modal using the `esc` key
-    if (typeof window !== "undefined") {
-        progress.start();
-        progress.finish();
-    }
-    Router.events.on("routeChangeStart", () => progress.start());
-    Router.events.on("routeChangeComplete", () => progress.finish());
-    Router.events.on("routeChangeError", () => progress.finish());
-}

package/bootstrap/scrolledScript.d.ts

@@ -1,2 +0,0 @@
-declare const scrolledScript = "\n  window.addEventListener(\"scroll\", () => {\n    if (window.scrollY) {\n      document.documentElement.classList.add(\"scrolled\")\n    } else {\n      document.documentElement.classList.remove(\"scrolled\")\n    }\n  })\n  \n  const isTouchDevice =\n    typeof window !== \"undefined\" &&\n    (!!(\n      typeof window !== \"undefined\" &&\n      (\"ontouchstart\" in window ||\n        (window.DocumentTouch &&\n          typeof document !== \"undefined\" &&\n          document instanceof window.DocumentTouch))\n    ) ||\n      !!(\n        typeof navigator !== \"undefined\" &&\n        (navigator.maxTouchPoints || navigator.msMaxTouchPoints)\n      ));\n  if (isTouchDevice) {\n    document.documentElement.classList.add(\"touch\")\n  }\n";
-export default scrolledScript;

package/bootstrap/scrolledScript.js

@@ -1,27 +0,0 @@
-const scrolledScript = `
-  window.addEventListener("scroll", () => {
-    if (window.scrollY) {
-      document.documentElement.classList.add("scrolled")
-    } else {
-      document.documentElement.classList.remove("scrolled")
-    }
-  })
-  
-  const isTouchDevice =
-    typeof window !== "undefined" &&
-    (!!(
-      typeof window !== "undefined" &&
-      ("ontouchstart" in window ||
-        (window.DocumentTouch &&
-          typeof document !== "undefined" &&
-          document instanceof window.DocumentTouch))
-    ) ||
-      !!(
-        typeof navigator !== "undefined" &&
-        (navigator.maxTouchPoints || navigator.msMaxTouchPoints)
-      ));
-  if (isTouchDevice) {
-    document.documentElement.classList.add("touch")
-  }
-`;
-export default scrolledScript;

package/bootstrap/setupFocusManager.d.ts

@@ -1 +0,0 @@
-export {};

package/bootstrap/setupFocusManager.js

@@ -1,13 +0,0 @@
-import { focusManager } from "@tanstack/react-query";
-focusManager.setEventListener((handleFocus) => {
-    const listener = () => handleFocus();
-    // Listen to visibilitychange
-    if (typeof window !== "undefined" && window.addEventListener) {
-        window.addEventListener("focus", listener, false);
-    }
-    return () => {
-        if (typeof window !== "undefined") {
-            window.removeEventListener("focus", listener);
-        }
-    };
-});

package/bootstrap/suppressConsoleLog.d.ts

@@ -1 +0,0 @@
-export {};

package/bootstrap/suppressConsoleLog.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-console */
-import { isBrowser } from "../utils/isBrowser";
-const consoleLog = console.log;
-if (isBrowser && process.env.NODE_ENV !== "development") {
-    console.log = () => {
-        return consoleLog("Suppressed log in production");
-    };
-}

package/components/Accordion/Accordion.d.ts

@@ -1,16 +0,0 @@
-import { type ComponentProps, type ReactNode } from "react";
-import * as RAccordion from "@radix-ui/react-accordion";
-declare function Accordion({ children, className, ...props }: ComponentProps<typeof RAccordion.Root>): import("react").JSX.Element;
-declare namespace Accordion {
-    var Item: typeof AccordionItem;
-}
-export default Accordion;
-declare function AccordionItem({ children, title, value, className, triggerClassName, contentClassName, contentInnerClassName, }: {
-    children?: ReactNode;
-    title: ReactNode;
-    value?: string;
-    className?: string;
-    triggerClassName?: string;
-    contentClassName?: string;
-    contentInnerClassName?: string;
-}): import("react").JSX.Element;

package/components/Accordion/Accordion.jsx

@@ -1,27 +0,0 @@
-import { ChevronUpIcon } from "@heroicons/react/20/solid";
-import { useId } from "react";
-import * as RAccordion from "@radix-ui/react-accordion";
-import clsx from "../../utils/clsx";
-export default function Accordion({ children, className, ...props }) {
-    return (<RAccordion.Root {...props} className={clsx("flex flex-col gap-2", className)} {...(props.type === "single" ? { collapsible: true } : {})}>
-      {children}
-    </RAccordion.Root>);
-}
-Accordion.Item = AccordionItem;
-function AccordionItem({ children, title, value, className, triggerClassName, contentClassName, contentInnerClassName, }) {
-    const id = useId();
-    value = value || id;
-    return (<RAccordion.Item value={value} className={className}>
-      <RAccordion.Header>
-        <RAccordion.Trigger className={clsx("group focus-visible:ring-opacity-75 flex w-full justify-between rounded-lg bg-zinc-200 px-4 py-2 text-left text-sm font-medium transition hover:bg-zinc-300 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 dark:bg-zinc-800 dark:hover:bg-zinc-700", triggerClassName)}>
-          {title}
-          <ChevronUpIcon className="h-5 w-5 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"/>
-        </RAccordion.Trigger>
-      </RAccordion.Header>
-      <RAccordion.Content className={clsx("data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down overflow-hidden", contentClassName)}>
-        <div className={clsx("px-4 pt-2 pb-2", contentInnerClassName)}>
-          {children}
-        </div>
-      </RAccordion.Content>
-    </RAccordion.Item>);
-}

package/components/Accordion/index.d.ts

@@ -1,3 +0,0 @@
-import Accordion from "./Accordion";
-export * from "./Accordion";
-export default Accordion;

package/components/Accordion/index.jsx

@@ -1,3 +0,0 @@
-import Accordion from "./Accordion";
-export * from "./Accordion";
-export default Accordion;

package/components/Alert/Alert.d.ts

@@ -1,31 +0,0 @@
-import type { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
-declare const styles: {
-    variants: {
-        default: {
-            root: string;
-            icon: string;
-            title: string;
-            content: string;
-        };
-        error: {
-            root: string;
-            icon: string;
-            title: string;
-            content: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            title: string;
-            content: string;
-        };
-    };
-};
-export type AlertProps = {
-    title: ReactNode;
-    variant?: keyof (typeof styles)["variants"];
-    children?: ReactNode;
-    actions?: ReactNode;
-} & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title">;
-export default function Alert({ variant, title, children, className, actions, ...props }: AlertProps): import("react").JSX.Element;
-export {};

package/components/Alert/Alert.jsx

@@ -1,53 +0,0 @@
-import { CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon, } from "@heroicons/react/20/solid";
-import clsx from "../../utils/clsx";
-import Group from "../Group";
-const styles = {
-    variants: {
-        default: {
-            root: "bg-warn-100 dark:bg-warn-900",
-            icon: "text-warn-400",
-            title: "text-warn-800 dark:text-warn-400",
-            content: "text-warn-700 dark:text-warn-200",
-        },
-        error: {
-            root: "bg-error-100 dark:bg-error-900",
-            icon: "text-error-400 dark:text-error-300",
-            title: "text-error-800 dark:text-error-300",
-            content: "text-error-700 dark:text-error-200",
-        },
-        success: {
-            root: "bg-success-100 dark:bg-success-900",
-            icon: "text-success-400",
-            title: "text-success-800 dark:text-success-400",
-            content: "text-success-700 dark:text-success-200",
-        },
-    },
-};
-const icons = {
-    default: ExclamationTriangleIcon,
-    error: XCircleIcon,
-    success: CheckCircleIcon,
-};
-export default function Alert({ variant = "default", title, children, className, actions, ...props }) {
-    const Icon = icons[variant];
-    return (<div className={clsx("rounded-md p-4", styles.variants[variant].root, className)} {...props}>
-      <div className="flex">
-        <div className="shrink-0">
-          <Icon className={clsx("h-5 w-5", styles.variants[variant].icon)} aria-hidden="true"/>
-        </div>
-        <div className="ml-3 flex w-full flex-col items-start justify-between sm:flex-row">
-          <div>
-            <h3 className={clsx("text-sm font-medium", styles.variants[variant].title)}>
-              {title}
-            </h3>
-            {children && (<div className={clsx("mt-2 text-sm", styles.variants[variant].content)}>
-                {children}
-              </div>)}
-          </div>
-          {actions && (<Group className={clsx("-mx-4 mt-1 -mb-2 sm:-mx-2 sm:-my-2", styles.variants[variant].content)}>
-              {actions}
-            </Group>)}
-        </div>
-      </div>
-    </div>);
-}

package/components/Alert/index.d.ts

@@ -1,3 +0,0 @@
-import Alert from "./Alert";
-export * from "./Alert";
-export default Alert;

package/components/Alert/index.jsx

@@ -1,3 +0,0 @@
-import Alert from "./Alert";
-export * from "./Alert";
-export default Alert;

package/components/AntiClickjacking/AntiClickjacking.d.ts

@@ -1 +0,0 @@
-export default function AntiClickjacking(): import("react").JSX.Element;

package/components/AntiClickjacking/AntiClickjacking.jsx

@@ -1,17 +0,0 @@
-export default function AntiClickjacking() {
-    return (<>
-      <style id="antiClickjack">{`
-        body { display: none !important; }
-      `}</style>
-      <script dangerouslySetInnerHTML={{
-            __html: `
-            if (self === top) {
-              var antiClickjack = document.getElementById("antiClickjack");
-              antiClickjack.parentNode.removeChild(antiClickjack);
-            } else {
-              top.location = self.location;
-            }
-          `,
-        }}/>
-    </>);
-}

package/components/AntiClickjacking/index.d.ts

@@ -1,2 +0,0 @@
-import AntiClickjacking from "./AntiClickjacking";
-export default AntiClickjacking;

package/components/AntiClickjacking/index.jsx

@@ -1,2 +0,0 @@
-import AntiClickjacking from "./AntiClickjacking";
-export default AntiClickjacking;

package/components/Aurora/Aurora.d.ts

@@ -1,10 +0,0 @@
-interface AuroraProps {
-    colorStops?: string[];
-    amplitude?: number;
-    blend?: number;
-    time?: number;
-    speed?: number;
-    className?: string;
-}
-export default function Aurora(props: AuroraProps): import("react").JSX.Element;
-export {};

package/components/Aurora/Aurora.jsx

@@ -1,189 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Color, Mesh, Program, Renderer, Triangle } from "ogl";
-import clsx from "../../utils/clsx";
-const VERT = `#version 300 es
-in vec2 position;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-}
-`;
-const FRAG = `#version 300 es
-precision highp float;
-
-uniform float uTime;
-uniform float uAmplitude;
-uniform vec3 uColorStops[3];
-uniform vec2 uResolution;
-uniform float uBlend;
-
-out vec4 fragColor;
-
-vec3 permute(vec3 x) {
-  return mod(((x * 34.0) + 1.0) * x, 289.0);
-}
-
-float snoise(vec2 v){
-  const vec4 C = vec4(
-      0.211324865405187, 0.366025403784439,
-      -0.577350269189626, 0.024390243902439
-  );
-  vec2 i  = floor(v + dot(v, C.yy));
-  vec2 x0 = v - i + dot(i, C.xx);
-  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-  vec4 x12 = x0.xyxy + C.xxzz;
-  x12.xy -= i1;
-  i = mod(i, 289.0);
-
-  vec3 p = permute(
-      permute(i.y + vec3(0.0, i1.y, 1.0))
-    + i.x + vec3(0.0, i1.x, 1.0)
-  );
-
-  vec3 m = max(
-      0.5 - vec3(
-          dot(x0, x0),
-          dot(x12.xy, x12.xy),
-          dot(x12.zw, x12.zw)
-      ), 
-      0.0
-  );
-  m = m * m;
-  m = m * m;
-
-  vec3 x = 2.0 * fract(p * C.www) - 1.0;
-  vec3 h = abs(x) - 0.5;
-  vec3 ox = floor(x + 0.5);
-  vec3 a0 = x - ox;
-  m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-
-  vec3 g;
-  g.x  = a0.x  * x0.x  + h.x  * x0.y;
-  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-  return 130.0 * dot(m, g);
-}
-
-struct ColorStop {
-  vec3 color;
-  float position;
-};
-
-#define COLOR_RAMP(colors, factor, finalColor) {              \
-  int index = 0;                                            \
-  for (int i = 0; i < 2; i++) {                               \
-     ColorStop currentColor = colors[i];                    \
-     bool isInBetween = currentColor.position <= factor;    \
-     index = int(mix(float(index), float(i), float(isInBetween))); \
-  }                                                         \
-  ColorStop currentColor = colors[index];                   \
-  ColorStop nextColor = colors[index + 1];                  \
-  float range = nextColor.position - currentColor.position; \
-  float lerpFactor = (factor - currentColor.position) / range; \
-  finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \
-}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / uResolution;
-  
-  ColorStop colors[3];
-  colors[0] = ColorStop(uColorStops[0], 0.0);
-  colors[1] = ColorStop(uColorStops[1], 0.5);
-  colors[2] = ColorStop(uColorStops[2], 1.0);
-  
-  vec3 rampColor;
-  COLOR_RAMP(colors, uv.x, rampColor);
-  
-  float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;
-  height = exp(height);
-  height = (uv.y * 2.0 - height + 0.2);
-  float intensity = 0.6 * height;
-  
-  float midPoint = 0.20;
-  float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);
-  
-  vec3 auroraColor = intensity * rampColor;
-  
-  fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
-}
-`;
-export default function Aurora(props) {
-    const { colorStops = ["#00d8ff", "#7cff67", "#00d8ff"], amplitude = 1.0, blend = 0.5, className, } = props;
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const ctnDom = useRef(null);
-    useEffect(() => {
-        const ctn = ctnDom.current;
-        if (!ctn)
-            return;
-        const renderer = new Renderer({
-            alpha: true,
-            premultipliedAlpha: true,
-            antialias: true,
-        });
-        const gl = renderer.gl;
-        gl.clearColor(0, 0, 0, 0);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-        gl.canvas.style.backgroundColor = "transparent";
-        let program = undefined;
-        function resize() {
-            if (!ctn)
-                return;
-            const width = ctn.offsetWidth;
-            const height = ctn.offsetHeight;
-            renderer.setSize(width, height);
-            if (program) {
-                program.uniforms.uResolution.value = [width, height];
-            }
-        }
-        window.addEventListener("resize", resize);
-        const geometry = new Triangle(gl);
-        if (geometry.attributes.uv) {
-            delete geometry.attributes.uv;
-        }
-        const colorStopsArray = colorStops.map((hex) => {
-            const c = new Color(hex);
-            return [c.r, c.g, c.b];
-        });
-        program = new Program(gl, {
-            vertex: VERT,
-            fragment: FRAG,
-            uniforms: {
-                uTime: { value: 0 },
-                uAmplitude: { value: amplitude },
-                uColorStops: { value: colorStopsArray },
-                uResolution: { value: [ctn.offsetWidth, ctn.offsetHeight] },
-                uBlend: { value: blend },
-            },
-        });
-        const mesh = new Mesh(gl, { geometry, program });
-        ctn.appendChild(gl.canvas);
-        let animateId = 0;
-        const update = (t) => {
-            animateId = requestAnimationFrame(update);
-            const { time = t * 0.01, speed = 1.0 } = propsRef.current;
-            if (program) {
-                program.uniforms.uTime.value = time * speed * 0.1;
-                program.uniforms.uAmplitude.value = propsRef.current.amplitude ?? 1.0;
-                program.uniforms.uBlend.value = propsRef.current.blend ?? blend;
-                const stops = propsRef.current.colorStops ?? colorStops;
-                program.uniforms.uColorStops.value = stops.map((hex) => {
-                    const c = new Color(hex);
-                    return [c.r, c.g, c.b];
-                });
-                renderer.render({ scene: mesh });
-            }
-        };
-        animateId = requestAnimationFrame(update);
-        resize();
-        return () => {
-            cancelAnimationFrame(animateId);
-            window.removeEventListener("resize", resize);
-            if (ctn && gl.canvas.parentNode === ctn) {
-                ctn.removeChild(gl.canvas);
-            }
-            gl.getExtension("WEBGL_lose_context")?.loseContext();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [amplitude]);
-    return <div ref={ctnDom} className={clsx("h-full w-full", className)}/>;
-}

package/components/Aurora/index.d.ts

@@ -1,3 +0,0 @@
-import Aurora from "./Aurora";
-export * from "./Aurora";
-export default Aurora;

package/components/Aurora/index.jsx

@@ -1,3 +0,0 @@
-import Aurora from "./Aurora";
-export * from "./Aurora";
-export default Aurora;

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,7 +0,0 @@
-import { type UnstyledAutocompleteProps } from "../Autocomplete/UnstyledAutocomplete";
-export type AutocompleteProps<T extends {
-    _id: string;
-}> = UnstyledAutocompleteProps<T>;
-export default function Autocomplete<T extends {
-    _id: string;
-}>({ query: defaultQuery, onChangeQuery, emptyText, className, ...props }: AutocompleteProps<T>): import("react").JSX.Element;

package/components/Autocomplete/Autocomplete.jsx

@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react";
-import clsx from "../../utils/clsx";
-import UnstyledAutocomplete, {} from "../Autocomplete/UnstyledAutocomplete";
-import Input from "../Input";
-const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
-export default function Autocomplete({ query: defaultQuery = "", onChangeQuery, emptyText = "No item found.", className, ...props }) {
-    const [query, setQuery] = useState(defaultQuery);
-    useEffect(() => {
-        if (query !== defaultQuery) {
-            setQuery(defaultQuery);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultQuery]);
-    useEffect(() => {
-        if (onChangeQuery && query !== defaultQuery) {
-            onChangeQuery(query);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onChangeQuery, query]);
-    return (<div className={clsx("relative", className)}>
-      <UnstyledAutocomplete {...props} as={Input} query={query} onChangeQuery={setQuery} emptyTextClassName={clsx(defaultMenuItemsClassName, "p-4 text-sm text-zinc-500 dark:text-zinc-400 mt-1 absolute w-full")} optionsClassName={clsx(defaultMenuItemsClassName, "max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200 absolute z-10 mt-1 w-full")} optionClassName={({ active }) => clsx("cursor-default select-none px-4 py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", active && "bg-primary-600 text-white")} emptyText={emptyText}/>
-    </div>);
-}

package/components/Autocomplete/UnstyledAutocomplete.d.ts

@@ -1,36 +0,0 @@
-import { type ReactNode } from "react";
-import Input, { type UnstyledInputProps } from "../Input";
-export interface UnstyledAutocompleteProps<T extends {
-    _id: string;
-}> extends Omit<UnstyledInputProps<false>, "as" | "onSelect" | "inputClassName" | "innerClassName" | "value"> {
-    placeholder?: string;
-    emptyText?: string;
-    items?: T[];
-    filterProperty?: keyof T;
-    filterFunction?: (item: T) => boolean;
-    onSelect?: (item: T | null) => void;
-    renderProperty?: keyof T;
-    renderFunction?: (item: T) => ReactNode;
-    query?: string;
-    onChangeQuery?: (query: string) => void;
-    loading?: boolean;
-    emptyTextClassName?: string;
-    leadingClassName?: string;
-    optionsClassName?: string;
-    optionClassName?: ({ active, selected, }: {
-        active: boolean;
-        selected: boolean;
-    }) => string;
-    inputInnerClassName?: string;
-    inputElementClassName?: string;
-    leading?: ReactNode;
-    as?: typeof Input;
-    static?: boolean;
-    displayValue?: (item: T | null) => string;
-    value?: T | null;
-    itemsRenderLimit?: number;
-    disabledItems?: string[];
-}
-export default function UnstyledAutocomplete<T extends {
-    _id: string;
-}>({ placeholder, emptyText, items, renderProperty, renderFunction, filterProperty, filterFunction, onSelect, query: defaultQuery, onChangeQuery, loading, emptyTextClassName, optionsClassName, optionClassName, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, readOnly, itemsRenderLimit, disabledItems, ...props }: UnstyledAutocompleteProps<T>): import("react").JSX.Element;

package/components/Autocomplete/UnstyledAutocomplete.jsx

@@ -1,72 +0,0 @@
-import { Combobox } from "@headlessui/react";
-import Loading from "../Loading";
-import { useCallback, useEffect, useMemo, useState, } from "react";
-import Input, { defaultInputClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
-import clsx from "../../utils/clsx";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import { useUpdateEffect } from "react-use";
-import { take } from "lodash-es";
-export default function UnstyledAutocomplete({ placeholder, emptyText, items = [], renderProperty = "title", renderFunction, filterProperty = "title", filterFunction, onSelect, query: defaultQuery = "", onChangeQuery, loading, emptyTextClassName, optionsClassName, optionClassName, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, readOnly, itemsRenderLimit, disabledItems, ...props }) {
-    displayValue =
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        displayValue || ((item) => item?.[renderProperty] || "");
-    const [query, setQuery] = useState(defaultQuery);
-    const [selectedItem, setSelectedItem] = useState(null);
-    useEffect(() => {
-        if (query !== defaultQuery) {
-            setQuery(defaultQuery);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultQuery]);
-    useEffect(() => {
-        if (onChangeQuery && query !== defaultQuery) {
-            onChangeQuery(query);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onChangeQuery, query]);
-    const filteredItems = useMemo(() => query === ""
-        ? items
-        : items.filter(filterFunction ||
-            ((item) => item[filterProperty]
-                .toLowerCase()
-                .includes(query.toLowerCase()))), [filterFunction, filterProperty, items, query]);
-    trailing = loading ? (<Loading />) : (trailing ||
-        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
-        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
-      </Combobox.Button>) : undefined));
-    const ComponentInput = as || UnstyledInput;
-    const doRender = useCallback((item) => renderFunction ? renderFunction(item) : item[renderProperty], [renderFunction, renderProperty]);
-    useUpdateEffect(() => {
-        onSelect?.(selectedItem);
-    }, [selectedItem]);
-    useEffect(() => {
-        if (selectedItem !== value) {
-            setSelectedItem(value || null);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (<Combobox onChange={setSelectedItem} value={selectedItem} nullable>
-      {({ open }) => (<div>
-          <div className="relative">
-            <ComponentInput 
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} as={Combobox.Input} placeholder={placeholder} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={clsx(defaultInputClassName, inputElementClassName)} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} readOnly={readOnly}/>
-          </div>
-
-          {filteredItems.length > 0 && !readOnly && (<Combobox.Options static={isStatic} className={optionsClassName}>
-              {(itemsRenderLimit
-                    ? take(filteredItems, itemsRenderLimit)
-                    : filteredItems).map((item) => (<Combobox.Option key={item._id} value={item} className={({ active, selected }) => clsx("flex gap-2", optionClassName && optionClassName({ active, selected }))} disabled={disabledItems?.includes(item._id)} data-disabled={disabledItems?.includes(item._id) ? "" : undefined}>
-                  {({ selected, active }) => (<>
-                      {selected ? (<span className={clsx("flex items-center", active ? "text-white" : "text-primary-500")}>
-                          <CheckIcon className="h-5 w-5" aria-hidden="true"/>
-                        </span>) : null}
-                      {doRender(item)}
-                    </>)}
-                </Combobox.Option>))}
-            </Combobox.Options>)}
-
-          {open && emptyText && query !== "" && filteredItems.length === 0 && (<p className={emptyTextClassName}>{emptyText}</p>)}
-        </div>)}
-    </Combobox>);
-}