@majapisoftwares/ui 4.0.2

package/components/FileSelect/index.d.ts

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

package/components/FileSelect/index.jsx

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

package/components/Footer/Footer.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from "react";
+export type FooterProps = {
+    main?: {
+        name: string;
+        href: string;
+    }[];
+    social?: {
+        name: string;
+        href: string;
+        icon: ReactElement<{
+            className: string;
+            "aria-hidden": string;
+        }>;
+    }[];
+    companyName: ReactNode;
+    allRightsReserved?: string;
+    children: ReactNode;
+};
+export default function Footer({ main, social, companyName, allRightsReserved, children, }: FooterProps): import("react").JSX.Element;

package/components/Footer/Footer.jsx

@@ -0,0 +1,30 @@
+import { cloneElement } from "react";
+const CURRENT_YEAR = new Date().getFullYear();
+export default function Footer({ main, social, companyName, allRightsReserved = "All rights reserved", children, }) {
+    return (<>
+      <div className="flex min-h-screen flex-col">{children}</div>
+      <footer className="border-t border-slate-900/5 bg-white dark:border-slate-50/5 dark:bg-zinc-900">
+        <div className="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
+          {main && (<nav className="-mx-5 -my-2 mb-8 flex flex-wrap justify-center" aria-label="Footer">
+              {main.map((item) => (<div key={item.name} className="px-5 py-2">
+                  <a href={item.href} className="text-base text-zinc-500 hover:text-zinc-900">
+                    {item.name}
+                  </a>
+                </div>))}
+            </nav>)}
+          {social && (<div className="mb-8 flex justify-center space-x-6">
+              {social.map((item) => (<a key={item.name} href={item.href} className="text-zinc-400 hover:text-zinc-500">
+                  <span className="sr-only">{item.name}</span>
+                  {cloneElement(item.icon, {
+                    className: "h-6 w-6",
+                    "aria-hidden": "true",
+                })}
+                </a>))}
+            </div>)}
+          <p className="text-center text-base text-zinc-400">
+            {companyName} &copy; {CURRENT_YEAR}. {allRightsReserved}.
+          </p>
+        </div>
+      </footer>
+    </>);
+}

package/components/Footer/index.d.ts

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

package/components/Footer/index.jsx

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

package/components/GridPattern/GridPattern.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export default function GridPattern(props: SVGProps<SVGPatternElement>): import("react").JSX.Element;

package/components/GridPattern/GridPattern.jsx

@@ -0,0 +1,12 @@
+import { useId } from "react";
+export default function GridPattern(props) {
+    const patternId = useId();
+    return (<svg aria-hidden="true" className="absolute inset-0 h-full w-full">
+      <defs>
+        <pattern id={patternId} width="32" height="32" patternUnits="userSpaceOnUse" {...props}>
+          <path d="M0 32V.5H32" fill="none" stroke="currentColor"/>
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`}/>
+    </svg>);
+}

package/components/GridPattern/index.d.ts

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

package/components/GridPattern/index.jsx

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

package/components/Group/Group.d.ts

@@ -0,0 +1,5 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+export type GroupProps = {
+    wrap?: boolean;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export default function Group({ wrap, className, ...props }: GroupProps): import("react").JSX.Element;

package/components/Group/Group.jsx

@@ -0,0 +1,6 @@
+import clsx from "../../utils/clsx";
+export default function Group({ wrap, className, ...props }) {
+    return (<div {...props} className={clsx("flex gap-2", {
+            "flex-wrap": wrap,
+        }, className)}/>);
+}

package/components/Group/index.d.ts

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

package/components/Group/index.jsx

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

package/components/Header/Header.d.ts

@@ -0,0 +1,5 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+export type HeaderProps = {
+    hideOnScroll?: boolean;
+} & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+export default function Header({ className, hideOnScroll, ...props }: HeaderProps): import("react").JSX.Element;

package/components/Header/Header.jsx

@@ -0,0 +1,19 @@
+import clsx from "../../utils/clsx";
+import { useScrollYMovement } from "../../hooks/useScroll";
+import { useEffect, useRef } from "react";
+import useMediaQuery from "../../hooks/useMediaQuery";
+export default function Header({ className, hideOnScroll, ...props }) {
+    const ref = useRef(null);
+    const isMobile = useMediaQuery(`(max-width: 768px)`);
+    useScrollYMovement(74, (scrollYMovement) => {
+        if (ref.current) {
+            ref.current.style.transform = `translateY(-${scrollYMovement}px)`;
+        }
+    }, !hideOnScroll && !isMobile);
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.style.transform = "";
+        }
+    }, [isMobile]);
+    return (<header ref={ref} {...props} className={clsx("fixed top-0 z-20 flex h-16 w-full items-center px-2.5 shadow-none shadow-slate-900/5 ring-offset-zinc-100 transition-colors duration-500 scrolled:shadow-md sm:px-4 md:px-6", "bg-white/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-white/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "not-scrolled:bg-transparent!", className)}/>);
+}

package/components/Header/index.d.ts

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

package/components/Header/index.jsx

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

package/components/ImageInput/ImageInput.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import FileInput from "../FileInput";
+declare function ImageInput({ icon, uploadAFileText, allowedFileTypes, fileDisplay, ...props }: ComponentProps<typeof FileInput>): import("react").JSX.Element;
+export default ImageInput;

package/components/ImageInput/ImageInput.jsx

@@ -0,0 +1,8 @@
+import FileInput from "../FileInput";
+const defaultIcon = (<svg stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>);
+function ImageInput({ icon = defaultIcon, uploadAFileText = "Upload an image", allowedFileTypes = [".png", ".jpg", ".jpeg", ".webp"], fileDisplay = "preview", ...props }) {
+    return (<FileInput {...props} icon={icon} uploadAFileText={uploadAFileText} allowedFileTypes={allowedFileTypes} fileDisplay={fileDisplay}/>);
+}
+export default ImageInput;

package/components/ImageInput/index.d.ts

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

package/components/ImageInput/index.jsx

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

package/components/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { UnstyledInputProps } from "../Input/UnstyledInput";
+export type InputProps<Select extends boolean | undefined> = {
+    loading?: boolean;
+} & UnstyledInputProps<Select>;
+export declare const defaultLabelClassName: string;
+export declare const defaultInputClassNameUncolored = "block w-full rounded-md shadow-xs sm:text-sm data-disabled:cursor-not-allowed dark:bg-zinc-800 dark:placeholder:text-zinc-500 px-2.5";
+export declare const defaultInputClassName: string;
+export declare const defaultHelpTextClassName: string;
+export declare const defaultTrailingClassName = "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5 text-zinc-500 text-sm";
+export declare const defaultLeadingClassName = "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-zinc-500 text-sm";
+export declare const defaultLeadingInputClassName = "pl-10";
+export declare const defaultTrailingInputClassName = "pr-10";
+declare function Input<Select extends boolean | undefined>({ error, trailing, labelClassName, inputClassName, helpTextClassName, trailingClassName, leadingClassName, leadingInputClassName, trailingInputClassName, required, label, loading, readOnly, children, disabled, helpText, ref, ...props }: InputProps<Select>): import("react").JSX.Element;
+export default Input;

package/components/Input/Input.jsx

@@ -0,0 +1,57 @@
+import UnstyledInput from "../Input/UnstyledInput";
+import { defaultTextStyles } from "../Text";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import InputIcon from "./InputIcon";
+import { cloneElement, Fragment } from "react";
+import recursiveChildrenMap from "../../utils/recursiveChildrenMap";
+import clsx from "../../utils/clsx";
+export const defaultLabelClassName = `ui-input-label block ${defaultTextStyles.variant.label} mb-1`;
+export const defaultInputClassNameUncolored = "block w-full rounded-md shadow-xs sm:text-sm data-disabled:cursor-not-allowed dark:bg-zinc-800 dark:placeholder:text-zinc-500 px-2.5";
+export const defaultInputClassName = clsx("ui-input-input", defaultInputClassNameUncolored, "border-zinc-300 focus:border-primary-500 focus:ring-primary-500 data-disabled:border-zinc-200 data-disabled:bg-zinc-50", "dark:border-zinc-700 dark:focus:border-primary-500 dark:data-disabled:border-zinc-800 dark:data-disabled:bg-zinc-900/90 data-disabled:text-zinc-500");
+export const defaultHelpTextClassName = `mt-2 ${defaultTextStyles.variant.secondary}`;
+export const defaultTrailingClassName = "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5 text-zinc-500 text-sm";
+export const defaultLeadingClassName = "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-zinc-500 text-sm";
+export const defaultLeadingInputClassName = "pl-10";
+export const defaultTrailingInputClassName = "pr-10";
+function Input({ error, trailing, labelClassName, inputClassName, helpTextClassName, trailingClassName, leadingClassName, leadingInputClassName, trailingInputClassName, required, label, loading, readOnly, children, disabled, helpText, ref, ...props }) {
+    trailing =
+        trailing ||
+            (error ? (<InputIcon className="text-error-500">
+        <ExclamationCircleIcon aria-hidden="true"/>
+      </InputIcon>) : undefined);
+    labelClassName = clsx(defaultLabelClassName, labelClassName);
+    inputClassName = clsx(error ? defaultInputClassNameUncolored : defaultInputClassName, inputClassName, {
+        "animate-pulse": loading,
+    });
+    helpTextClassName = clsx(defaultHelpTextClassName, helpTextClassName);
+    trailingClassName = clsx(defaultTrailingClassName, trailingClassName);
+    leadingClassName = clsx(defaultLeadingClassName, leadingClassName);
+    leadingInputClassName = clsx(defaultLeadingInputClassName, leadingInputClassName);
+    trailingInputClassName = clsx(defaultTrailingInputClassName, trailingInputClassName);
+    if (typeof error === "string") {
+        helpText = error;
+        error = true;
+    }
+    if (error) {
+        inputClassName = `${inputClassName} border-error-300 dark:border-error-500 text-error-900 dark:text-error-500 placeholder-error-300 focus:border-error-500 dark:focus:border-error-500 focus:ring-error-500`;
+        helpTextClassName = `${helpTextClassName} text-error-600! dark:text-error-500!`;
+    }
+    if (readOnly) {
+        inputClassName = `${inputClassName} border-dashed`;
+    }
+    if (label && required) {
+        label = (<>
+        {label} <span className="text-red-500">*</span>
+      </>);
+    }
+    return (<UnstyledInput 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
+      {recursiveChildrenMap(children, (child) => cloneElement(child, child.type !== Fragment
+            ? {
+                disabled: readOnly || disabled || child.props.disabled,
+            }
+            : undefined))}
+    </UnstyledInput>);
+}
+export default Input;

package/components/Input/InputIcon.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+export default function InputIcon({ className, children, }: {
+    className?: string;
+    children: ReactElement<{
+        className?: string;
+    }>;
+}): ReactElement<{
+    className?: string;
+}, string | import("react").JSXElementConstructor<any>>;

package/components/Input/InputIcon.jsx

@@ -0,0 +1,7 @@
+import { cloneElement } from "react";
+import clsx from "../../utils/clsx";
+export default function InputIcon({ className, children, }) {
+    return cloneElement(children, {
+        className: clsx("h-5 w-5", className),
+    });
+}

package/components/Input/MultiSelectInput.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+import { InputProps } from "./Input";
+declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, ...props }: Omit<InputProps<undefined>, "value" | "onChange"> & {
+    options: {
+        value: string;
+        name: string;
+    }[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    emptyLabel?: string;
+}): import("react").JSX.Element;
+export type MultiSelectInputProps = ComponentProps<typeof MultiSelectInput>;
+export default MultiSelectInput;

package/components/Input/MultiSelectInput.jsx

@@ -0,0 +1,28 @@
+import Input from "./Input";
+import DropdownMenu from "../DropdownMenu";
+import Button from "../Button";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { xor } from "lodash-es";
+function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, ...props }) {
+    return (<DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
+          {value?.length
+            ? options
+                .map((project) => value.includes(project.value) ? project.name : null)
+                .filter(Boolean)
+                .join(", ")
+            : emptyLabel}
+        </Input>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={() => onChange?.([])}>
+          {emptyLabel}
+        </DropdownMenu.Item>
+        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
+            {options.name}
+          </DropdownMenu.CheckboxItem>))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>);
+}
+export default MultiSelectInput;

package/components/Input/NumericInput.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { InputProps } from "./Input";
+import { NumericFormatProps } from "react-number-format";
+declare function NumericInput({ ref, ...props }: Omit<NumericFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
+export type NumericInputProps = ComponentProps<typeof NumericInput>;
+export default NumericInput;

package/components/Input/NumericInput.jsx

@@ -0,0 +1,6 @@
+import Input from "./Input";
+import { NumericFormat } from "react-number-format";
+function NumericInput({ ref, ...props }) {
+    return <NumericFormat getInputRef={ref} customInput={Input} {...props}/>;
+}
+export default NumericInput;

package/components/Input/PatternInput.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { InputProps } from "./Input";
+import { PatternFormatProps } from "react-number-format";
+declare function PatternInput(props: Omit<PatternFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
+export type PatternInputProps = ComponentProps<typeof PatternInput>;
+export default PatternInput;

package/components/Input/PatternInput.jsx

@@ -0,0 +1,6 @@
+import Input from "./Input";
+import { PatternFormat } from "react-number-format";
+function PatternInput(props) {
+    return <PatternFormat customInput={Input} {...props}/>;
+}
+export default PatternInput;

package/components/Input/UnstyledInput.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+export type UnstyledInputCommonProps = {
+    label?: ReactNode;
+    inputClassName?: string;
+    labelClassName?: string;
+    helpTextClassName?: string;
+    trailingClassName?: string;
+    trailingInputClassName?: string;
+    leadingClassName?: string;
+    leadingInputClassName?: string;
+    helpText?: ReactNode;
+    trailing?: ReactNode;
+    leading?: ReactNode;
+    as?: ComponentType;
+    innerClassName?: string;
+    error?: boolean | string;
+};
+export type UnstyledInputProps<Select extends boolean | undefined> = UnstyledInputCommonProps & {
+    select?: Select;
+} & (Select extends string ? DetailedHTMLProps<InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>);
+declare function UnstyledInput<Select extends boolean | undefined>({ id, label, className, inputClassName, labelClassName, helpTextClassName, trailingClassName, trailingInputClassName, leadingClassName, leadingInputClassName, helpText, type, leading, trailing, select, children, as, innerClassName, value, ...props }: UnstyledInputProps<Select>): import("react").JSX.Element;
+export default UnstyledInput;

package/components/Input/UnstyledInput.jsx

@@ -0,0 +1,28 @@
+import { useId, } from "react";
+import clsx from "../../utils/clsx";
+function UnstyledInput({ id, label, className, inputClassName, labelClassName, helpTextClassName, trailingClassName, trailingInputClassName, leadingClassName, leadingInputClassName, helpText, type = "text", leading, trailing, select, children, as, innerClassName, value, ...props }) {
+    const innerId = useId();
+    id = id || innerId;
+    const Component = as || (select ? "select" : "input");
+    inputClassName = clsx(inputClassName, leadingInputClassName && {
+        [leadingInputClassName]: !!leading,
+    }, trailingInputClassName && {
+        [trailingInputClassName]: !!trailing,
+    });
+    return (<div className={className}>
+      {label && (<label htmlFor={id} className={labelClassName}>
+          {label}
+        </label>)}
+      <div style={{ position: "relative" }} className={innerClassName}>
+        {leading && <div className={leadingClassName}>{leading}</div>}
+        <Component 
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    {...props} className={inputClassName} id={id} type={type} value={value}>
+          {children}
+        </Component>
+        {trailing && <div className={trailingClassName}>{trailing}</div>}
+      </div>
+      {helpText && <div className={helpTextClassName}>{helpText}</div>}
+    </div>);
+}
+export default UnstyledInput;

package/components/Input/index.d.ts

@@ -0,0 +1,6 @@
+import Input from "./Input";
+export * from "./Input";
+export default Input;
+export { default as InputIcon } from "./InputIcon";
+export * from "./UnstyledInput";
+export { default as UnstyledInput } from "./UnstyledInput";

package/components/Input/index.jsx

@@ -0,0 +1,6 @@
+import Input from "./Input";
+export * from "./Input";
+export default Input;
+export { default as InputIcon } from "./InputIcon";
+export * from "./UnstyledInput";
+export { default as UnstyledInput } from "./UnstyledInput";

package/components/Input2/InputWrapper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export interface InputWrapperProps {
+    children?: ReactNode;
+    className?: string;
+    label?: string;
+    id?: string;
+    helpText?: string;
+    error?: boolean;
+    required?: boolean;
+}
+export default function InputWrapper({ children, className, label, id, helpText, error, required, }: InputWrapperProps): import("react").JSX.Element;

package/components/Input2/InputWrapper.jsx

@@ -0,0 +1,11 @@
+import clsx from "../../utils/clsx";
+export default function InputWrapper({ children, className, label, id, helpText, error, required, }) {
+    return (<div className={clsx("ui-input-wrapper", className)} data-error={error ? "" : undefined}>
+      {label && (<label htmlFor={id} className="ui-input-wrapper-label">
+          {label}
+          {required && <span className="text-red-500"> *</span>}
+        </label>)}
+      {children}
+      {helpText && <div className="ui-input-wrapper-help-text">{helpText}</div>}
+    </div>);
+}

package/components/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import NextLink from "next/link";
+export default function Link({ className, href, ...props }: Partial<ComponentProps<typeof NextLink>>): import("react").JSX.Element;

package/components/Link/Link.jsx

@@ -0,0 +1,9 @@
+import NextLink from "next/link";
+import clsx from "../../utils/clsx";
+export default function Link({ className, href, ...props }) {
+    className = clsx("text-primary-500 underline decoration-primary-500/40 decoration-2 transition-colors hover:decoration-primary-500", className);
+    if (href) {
+        return <NextLink href={href} {...props} className={className}/>;
+    }
+    return (<button {...props} className={className} type="button"/>);
+}

package/components/Link/index.d.ts

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

package/components/Link/index.jsx

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

package/components/Loading/Loading.d.ts

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

package/components/Loading/Loading.jsx

@@ -0,0 +1,13 @@
+export default function Loading({ className }) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className={className}>
+      <circle cx="4" cy="12" r="3" fill="currentColor">
+        <animate id="svgSpinners3DotsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinners3DotsFade1.end-0.5s" dur="1.5s" values="1;0.2"/>
+      </circle>
+      <circle cx="12" cy="12" r="3" fill="currentColor" opacity="0.4">
+        <animate fill="freeze" attributeName="opacity" begin="svgSpinners3DotsFade0.begin+0.3s" dur="1.5s" values="1;0.2"/>
+      </circle>
+      <circle cx="20" cy="12" r="3" fill="currentColor" opacity="0.3">
+        <animate id="svgSpinners3DotsFade1" fill="freeze" attributeName="opacity" begin="svgSpinners3DotsFade0.begin+0.6s" dur="1.5s" values="1;0.2"/>
+      </circle>
+    </svg>);
+}

package/components/Loading/index.d.ts

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

package/components/Loading/index.jsx

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

package/components/Magnet/Magnet.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    padding?: number;
+    disabled?: boolean;
+    magnetStrength?: number;
+    activeTransition?: string;
+    inactiveTransition?: string;
+    wrapperClassName?: string;
+    innerClassName?: string;
+}
+declare const Magnet: React.FC<MagnetProps>;
+export default Magnet;

package/components/Magnet/Magnet.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect, useRef, } from "react";
+import clsx from "../../utils/clsx";
+const Magnet = ({ children, padding = 100, disabled = false, magnetStrength = 2, activeTransition = "transform 0.3s ease-out", inactiveTransition = "transform 0.5s ease-in-out", wrapperClassName = "", innerClassName = "", ...props }) => {
+    const [isActive, setIsActive] = useState(false);
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0,
+    });
+    const magnetRef = useRef(null);
+    useEffect(() => {
+        if (disabled) {
+            setPosition({ x: 0, y: 0 });
+            return;
+        }
+        const handleMouseMove = (e) => {
+            if (!magnetRef.current)
+                return;
+            const { left, top, width, height } = magnetRef.current.getBoundingClientRect();
+            const centerX = left + width / 2;
+            const centerY = top + height / 2;
+            const distX = Math.abs(centerX - e.clientX);
+            const distY = Math.abs(centerY - e.clientY);
+            if (distX < width / 2 + padding && distY < height / 2 + padding) {
+                setIsActive(true);
+                const offsetX = (e.clientX - centerX) / magnetStrength;
+                const offsetY = (e.clientY - centerY) / magnetStrength;
+                setPosition({ x: offsetX, y: offsetY });
+            }
+            else {
+                setIsActive(false);
+                setPosition({ x: 0, y: 0 });
+            }
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, [padding, disabled, magnetStrength]);
+    const transitionStyle = isActive ? activeTransition : inactiveTransition;
+    return (<div ref={magnetRef} className={clsx("relative inline-block", wrapperClassName)} {...props}>
+      <div className={innerClassName} style={{
+            transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
+            transition: transitionStyle,
+            willChange: "transform",
+        }}>
+        {children}
+      </div>
+    </div>);
+};
+export default Magnet;

package/components/Magnet/index.d.ts

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

package/components/Magnet/index.jsx

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

package/components/Markdown/Markdown.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConverterOptions } from "showdown";
+export type MarkdownProps = {
+    children?: string;
+    className?: string;
+    options?: ConverterOptions;
+};
+export default function Markdown({ children, className, options, }: MarkdownProps): React.JSX.Element;

package/components/Markdown/Markdown.jsx

@@ -0,0 +1,13 @@
+import React, { useMemo } from "react";
+import clsx from "../../utils/clsx";
+import showdown from "showdown";
+export default function Markdown({ children, className, options, }) {
+    const converter = useMemo(() => new showdown.Converter(options), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(options)]);
+    return (<div className={clsx("prose prose-zinc max-w-full dark:prose-invert", className)} dangerouslySetInnerHTML={children
+            ? {
+                __html: converter.makeHtml(children),
+            }
+            : undefined}/>);
+}

package/components/Markdown/index.d.ts

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

package/components/Markdown/index.jsx

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