@majapisoftwares/ui 4.0.2

package/components/Aurora/Aurora.jsx

@@ -0,0 +1,189 @@
+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

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

package/components/Aurora/index.jsx

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

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,7 @@
+import { 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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import Input, { 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

@@ -0,0 +1,73 @@
+import { Combobox } from "@headlessui/react";
+import Loading from "../Loading";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { 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);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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>);
+}

package/components/Autocomplete/index.d.ts

@@ -0,0 +1,5 @@
+import Autocomplete from "./Autocomplete";
+export * from "./Autocomplete";
+export default Autocomplete;
+export { default as UnstyledAutocomplete } from "./UnstyledAutocomplete";
+export * from "./UnstyledAutocomplete";

package/components/Autocomplete/index.jsx

@@ -0,0 +1,5 @@
+import Autocomplete from "./Autocomplete";
+export * from "./Autocomplete";
+export default Autocomplete;
+export { default as UnstyledAutocomplete } from "./UnstyledAutocomplete";
+export * from "./UnstyledAutocomplete";

package/components/BackgroundEffects/BottomBlurryPoint.d.ts

@@ -0,0 +1,3 @@
+export default function BottomBlurryPoint({ className, }: {
+    className?: string;
+}): import("react").JSX.Element;

package/components/BackgroundEffects/BottomBlurryPoint.jsx

@@ -0,0 +1,14 @@
+import clsx from "../../utils/clsx";
+export default function BottomBlurryPoint({ className, }) {
+    return (<div className={clsx("pointer-events-none absolute inset-x-0 top-[calc(100%-22rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-43rem)]", className)}>
+      <svg className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)" fillOpacity=".3" d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"/>
+        <defs>
+          <linearGradient id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#9089FC"/>
+            <stop offset={1} stopColor="#FF80B5"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>);
+}

package/components/BackgroundEffects/TopBlurryPoint.d.ts

@@ -0,0 +1,3 @@
+export default function TopBlurryPoint({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/components/BackgroundEffects/TopBlurryPoint.jsx

@@ -0,0 +1,14 @@
+import clsx from "../../utils/clsx";
+export default function TopBlurryPoint({ className }) {
+    return (<div className={clsx("pointer-events-none absolute inset-x-0 top-[-10rem] z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]", className)}>
+      <svg className="relative left-[calc(50%-11rem)] z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)" fillOpacity=".3" d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"/>
+        <defs>
+          <linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#9089FC"/>
+            <stop offset={1} stopColor="#FF80B5"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>);
+}

package/components/Badge/Badge.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+declare const colorMap: {
+    default: {
+        badge: string;
+        button: string;
+    };
+    primary: {
+        badge: string;
+        button: string;
+    };
+    success: {
+        badge: string;
+        button: string;
+    };
+    error: {
+        badge: string;
+        button: string;
+    };
+};
+declare const sizeMap: {
+    badge: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    button: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+declare function Badge({ color, size, className, children, onActionClick, href, shallow, onClick, ...props }: {
+    color?: keyof typeof colorMap;
+    size?: keyof (typeof sizeMap)["badge"];
+    className?: string;
+    children: ReactNode;
+    onActionClick?: () => void;
+    href?: string;
+    shallow?: boolean;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export default Badge;

package/components/Badge/Badge.jsx

@@ -0,0 +1,50 @@
+import clsx from "../../utils/clsx";
+import Link from "next/link";
+import { useCallback } from "react";
+const colorMap = {
+    default: {
+        badge: "bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-100",
+        button: "text-zinc-400 hover:bg-zinc-300 dark:hover:bg-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-300 dark:focus:bg-zinc-500 focus:bg-zinc-500",
+    },
+    primary: {
+        badge: "bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-100",
+        button: "text-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 hover:text-primary-500 dark:hover:text-primary-300 focus:bg-primary-500",
+    },
+    success: {
+        badge: "bg-success-100 dark:bg-success-900 text-success-700 dark:text-success-100",
+        button: "text-success-400 hover:bg-success-200 dark:hover:bg-success-800 hover:text-success-500 dark:hover:text-success-300 focus:bg-success-500",
+    },
+    error: {
+        badge: "bg-error-100 dark:bg-error-900 text-error-700 dark:text-error-100",
+        button: "text-error-400 hover:bg-error-200 dark:hover:bg-error-800 hover:text-error-500 dark:hover:text-error-300 focus:bg-error-500",
+    },
+};
+const sizeMap = {
+    badge: {
+        sm: "py-0.5 px-2 text-xs rounded-xl",
+        md: "py-0.5 px-2.5 text-sm rounded-xl",
+        lg: "py-0.5 px-3 text-md rounded-2xl",
+    },
+    button: {
+        sm: "-mr-1",
+        md: "-mr-1.5",
+        lg: "-mr-1.5",
+    },
+};
+function Badge({ color = "default", size = "md", className, children, onActionClick, href, shallow, onClick, ...props }) {
+    const Component = href ? Link : "span";
+    const handleActionClick = useCallback((e) => {
+        e.preventDefault();
+        onActionClick?.();
+    }, [onActionClick]);
+    return (<Component className={clsx("inline-flex items-center py-0.5 font-medium", sizeMap.badge[size], colorMap[color].badge, className)} href={href} shallow={shallow} onClick={onClick} {...props}>
+      {children}
+      {onActionClick && (<button type="button" className={clsx("ml-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full focus:text-white focus:outline-hidden", sizeMap.button[size], colorMap[color].button)} onClick={handleActionClick}>
+          <span className="sr-only">Delete</span>
+          <svg className="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+            <path strokeLinecap="round" strokeWidth="1.5" d="M1 1l6 6m0-6L1 7"/>
+          </svg>
+        </button>)}
+    </Component>);
+}
+export default Badge;

package/components/Badge/index.d.ts

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

package/components/Badge/index.jsx

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

package/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+export type BreadcrumbsProps = {
+    pages?: {
+        title: string;
+        href?: string;
+        loading?: boolean;
+    }[];
+    homeHref?: string;
+    className?: string;
+    loading?: boolean;
+};
+export default function Breadcrumbs({ pages, homeHref, className, loading, }: BreadcrumbsProps): import("react").JSX.Element | null;

package/components/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,42 @@
+import { HomeIcon } from "@heroicons/react/20/solid";
+import clsx from "../../utils/clsx";
+import Text from "../Text";
+import NextLink from "next/link";
+import Loading from "../Loading";
+import Skeleton from "../Skeleton";
+export default function Breadcrumbs({ pages, homeHref = "/", className, loading, }) {
+    if (!pages?.length) {
+        return null;
+    }
+    return (<nav className={clsx("flex", className)} aria-label="Breadcrumb">
+      <ol role="list" className="flex w-full space-x-4 bg-white px-6 shadow-sm dark:border-y dark:border-zinc-800 dark:bg-zinc-900 md:w-auto md:rounded-md md:dark:border-x">
+        <li className="flex">
+          <div className="flex items-center">
+            <NextLink href={homeHref} className="text-zinc-400 hover:text-zinc-500 dark:hover:text-zinc-200">
+              <HomeIcon className="h-5 w-5 shrink-0" aria-hidden="true"/>
+              <span className="sr-only">Home</span>
+            </NextLink>
+          </div>
+        </li>
+        {pages.map((page, i) => {
+            const isLast = i === pages.length - 1;
+            return (<li key={page.title} className="flex">
+              <div className="flex items-center">
+                <svg className="h-full w-6 shrink-0 text-zinc-200 dark:text-zinc-800" viewBox="0 0 24 44" preserveAspectRatio="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
+                </svg>
+                <Text href={page.href} className={clsx("ml-4 text-sm font-medium text-zinc-500! dark:text-zinc-400!", {
+                    "cursor-default": !page.href,
+                    "hover:text-zinc-700! dark:hover:text-zinc-200!": !!page.href,
+                })} aria-current={isLast ? "page" : undefined}>
+                  {page.loading ? (<Skeleton className="h-3 w-10"/>) : (page.title)}
+                </Text>
+              </div>
+            </li>);
+        })}
+        {loading && (<li className="ml-auto! flex items-center">
+            <Loading className="-mr-3 ml-4"/>
+          </li>)}
+      </ol>
+    </nav>);
+}

package/components/Breadcrumbs/index.d.ts

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

package/components/Breadcrumbs/index.jsx

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