@g4rcez/components 0.0.1

package/src/components/form/autocomplete.tsx

@@ -0,0 +1,222 @@
+"use client";
+import {
+    autoUpdate,
+    FloatingFocusManager,
+    FloatingPortal,
+    offset,
+    size,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useListNavigation,
+    useRole,
+    useTransitionStyles,
+} from "@floating-ui/react";
+import Fuzzy from "fuzzy-search";
+import { ChevronDown } from "lucide-react";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { InputField, InputFieldProps } from "~/components/form/input-field";
+import { type OptionProps } from "~/components/form/select";
+import { usePrevious } from "~/hooks/use-previous";
+import { css } from "~/lib/dom";
+
+type ItemProps = Omit<React.HTMLProps<HTMLLIElement>, "children"> & {
+    selected: boolean;
+    active: boolean;
+    option: OptionProps;
+};
+
+export const Option = forwardRef<HTMLLIElement, ItemProps>(({ selected, active, onClick, option, ...rest }, ref) => (
+    <li {...rest} ref={ref} role="option" aria-selected={selected} className="w-full">
+        <button
+            type="button"
+            onClick={onClick as any}
+            aria-selected={selected}
+            className={`p-2 w-full text-left cursor-pointer ${selected ? "bg-primary text-primary-foreground" : ""} ${active ? "bg-primary-subtle text-primary-foreground" : ""}`}
+        >
+            {option.label ?? option.value}
+        </button>
+    </li>
+));
+
+type SelectProps = Omit<InputFieldProps<"input">, "value"> & {
+    value?: string;
+    options: OptionProps[];
+};
+
+const transitionStyles = {
+    duration: 300,
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+} as const;
+
+const fuzzyOptions = { caseSensitive: false, sort: false };
+
+const emptyRef: any[] = [];
+
+export const Autocomplete = forwardRef<HTMLInputElement, SelectProps>(({ options, required = true, ...props }: SelectProps, externalRef) => {
+    const [open, setOpen] = useState(false);
+    const [shadow, setShadow] = useState("");
+    const [value, setValue] = useState(props.value ?? props.defaultValue ?? "");
+    const [index, setIndex] = useState<number | null>(null);
+    const listRef = useRef<Array<HTMLElement | null>>(emptyRef);
+    const previousIndex = usePrevious(index);
+    const list = new Fuzzy(options, ["value"], fuzzyOptions).search(shadow);
+
+    const { x, y, strategy, refs, context } = useFloating<HTMLInputElement>({
+        open,
+        transform: true,
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            size({
+                padding: 10,
+                apply(a) {
+                    Object.assign(a.elements.floating.style, {
+                        width: `${a.rects.reference.width}px`,
+                        maxHeight: `${Math.min(480, a.availableHeight)}px`,
+                    });
+                },
+            }),
+        ],
+    });
+
+    useImperativeHandle(externalRef, () => refs.domReference?.current!, [refs]);
+
+    const transitions = useTransitionStyles(context, transitionStyles);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        useRole(context, { role: "listbox" }),
+        useDismiss(context),
+        useListNavigation(context, {
+            listRef,
+            loop: true,
+            activeIndex: index,
+            allowEscape: true,
+            focusItemOnOpen: "auto",
+            openOnArrowKeyDown: true,
+            scrollItemIntoView: true,
+            selectedIndex: index,
+            virtual: true,
+            onNavigate: (n) => {
+                const lastIndex = list.length - 1;
+                if (n === null && previousIndex === 0) return setIndex(lastIndex);
+                if (n === null && previousIndex === lastIndex) return setIndex(0);
+                const i = n ?? previousIndex ?? null;
+                return i === null ? undefined : setIndex(i);
+            },
+        }),
+    ]);
+
+    const onSelect = (opt: OptionProps) => {
+        setValue(opt.value);
+        setOpen(false);
+        setShadow("");
+    };
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        setShadow(value);
+        if (!open && value === "") return setOpen(true);
+        return value ? setOpen(true) : props.onChange?.(event);
+    };
+
+    const onFocus = () => {
+        setOpen(true);
+        setShadow("");
+    };
+
+    const onClose = () => {
+        setShadow("");
+        setValue("");
+        setOpen(false);
+    };
+
+    return (
+        <fieldset className="relative w-auto">
+            <InputField
+                {...(props as any)}
+                required={required}
+                right={
+                    <span className="flex items-center gap-0.5">
+                        <ChevronDown size={20} />
+                        {value ? (
+                            <button type="button" onClick={onClose} className="link:text-danger transition-colors">
+                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+                                        fill="currentColor"
+                                        fillRule="evenodd"
+                                        clipRule="evenodd"
+                                    />
+                                </svg>
+                            </button>
+                        ) : null}
+                    </span>
+                }
+            >
+                <input
+                    {...getReferenceProps({
+                        ...props,
+                        onChange,
+                        onFocus,
+                        ref: refs.setReference,
+                        onClick: (e: React.MouseEvent<HTMLInputElement>) => e.currentTarget.focus(),
+                        onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+                            if (event.key === "Escape") {
+                                event.currentTarget.blur();
+                                return setOpen(false);
+                            }
+                            if (event.key === "Enter") {
+                                if (index !== null && list[index]) {
+                                    event.preventDefault();
+                                    return onSelect(list[index]);
+                                }
+                                if (list.length === 1) {
+                                    event.preventDefault();
+                                    return onSelect(list[0]);
+                                }
+                            }
+                        },
+                    })}
+                    required={required}
+                    value={open ? shadow : value}
+                    aria-autocomplete="list"
+                    autoComplete="off"
+                    className={css(
+                        "input text-foreground group h-10 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error",
+                        !!props.right || shadow ? "pe-12" : "",
+                        !!props.left ? "ps-8" : "",
+                        props.className
+                    )}
+                />
+            </InputField>
+            <FloatingPortal preserveTabOrder>
+                <FloatingFocusManager closeOnFocusOut guards returnFocus context={context} initialFocus={-1} visuallyHiddenDismiss>
+                    <ul
+                        {...getFloatingProps({
+                            ref: refs.setFloating,
+                            style: { position: strategy, left: x ?? 0, top: y ?? 0, ...transitions.styles },
+                        })}
+                        data-floating="true"
+                        className="bg-floating-background shadow-floating text-foreground list-none p-0 m-0 rounded-b-lg overflow-auto origin-[top_center] overflow-y-auto z-floating"
+                    >
+                        {list.map((item, i) => (
+                            <Option
+                                {...getItemProps({
+                                    onClick: () => onSelect(item),
+                                    ref: (node) => void (listRef.current[i] = node) as any,
+                                })}
+                                key={`${item.value}-option`}
+                                option={item}
+                                selected={index === i}
+                                active={value === item.value}
+                            />
+                        ))}
+                    </ul>
+                </FloatingFocusManager>
+            </FloatingPortal>
+        </fieldset>
+    );
+});

package/src/components/form/file-upload.tsx

@@ -0,0 +1,129 @@
+import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import React, { Fragment, useEffect, useState } from "react";
+import { DropzoneProps, useDropzone } from "react-dropzone";
+import { Override } from "sidekicker";
+import { Button } from "~/components/core/button";
+
+type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
+    onDeleteFile?: (file: File) => void;
+    files?: File[];
+    idle?: React.ReactElement;
+    onDrop?: (file: File[]) => void;
+};
+
+const mime = {
+    isImage: (file: File) => file.type.includes("image"),
+};
+
+const FileViewer = (props: { file: File; onDeleteFile?: (file: File) => void }) => {
+    const [info, setInfo] = useState({ url: "", type: "", size: "" });
+    useEffect(() => {
+        if (mime.isImage(props.file)) {
+            const url = URL.createObjectURL(props.file);
+            setInfo({ url, type: "img", size: prettyBytes(props.file.size) });
+            return () => {
+                URL.revokeObjectURL(url);
+            };
+        }
+        setInfo({ url: "", type: props.file.type, size: prettyBytes(props.file.size) });
+    }, [props.file]);
+
+    if (info.type === "img") {
+        return (
+            <div className="flex flex-row gap-jade-200 items-center justify-between w-full">
+                <header className="flex flex-row gap-jade-200 items-center">
+                    <img src={info.url} className="size-jade-500 rounded-jade-xsmall" alt={`Miniatura do arquivo ${props.file.name}`} />
+                    <div className="flex flex-col">
+                        <span>{props.file.name}</span>
+                        <span>{info.size}</span>
+                    </div>
+                </header>
+                <Button
+                    className="isolate"
+                    type="button"
+                    theme="raw"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        props.onDeleteFile?.(props.file);
+                    }}
+                >
+                    <Trash2Icon />
+                </Button>
+            </div>
+        );
+    }
+    return (
+        <div className="flex flex-row gap-jade-200 items-center justify-between w-full">
+            <header className="flex flex-row gap-4 items-center">
+                <FileIcon size={48} />
+                <div className="flex flex-col text-left justify-start items-start">
+                    <span>{props.file.name}</span>
+                    <span>{info.size}</span>
+                </div>
+            </header>
+            <Button
+                className="isolate"
+                type="button"
+                theme="raw"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    props.onDeleteFile?.(props.file);
+                }}
+            >
+                <Trash2Icon className="text-danger" />
+            </Button>
+        </div>
+    );
+};
+
+const DefaultViewer = (props: { files: File[]; onDeleteFile?: (file: File) => void }) => {
+    return (
+        <ul className="w-full space-y-jade-200">
+            {props.files.map((file) => {
+                return <FileViewer onDeleteFile={props.onDeleteFile} key={file.name} file={file} />;
+            })}
+        </ul>
+    );
+};
+
+const InteractiveArea = (props: { isDragActive: boolean; idle: React.ReactElement; files: File[]; onDeleteFile?: (file: File) => void }) => {
+    if (props.isDragActive) {
+        return <p>Solte os arquivos selecionados</p>;
+    }
+    if (props.files.length > 0) {
+        return <DefaultViewer onDeleteFile={props.onDeleteFile} files={props.files} />;
+    }
+    return <Fragment>{props.idle}</Fragment>;
+};
+
+const DefaultIdle = (
+    <div className="flex flex-col gap-4 justify-center items-center">
+        <UploadIcon size={64} />
+        <p>
+            You can drag your files or{" "}
+            <button className="text-primary underline" type="button">
+                drag to here
+            </button>
+        </p>
+    </div>
+);
+
+export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, onDrop, ...props }: Props) => {
+    const [files, setFiles] = useState<File[]>([]);
+    const drop = (x: File[]) => {
+        onDrop?.(x);
+        setFiles(x);
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
+    return (
+        <div
+            {...getRootProps()}
+            data-active={props.files?.length ? props.files.length > 0 : false}
+            className="flex text-foreground flex-col items-center justify-center border-2 rounded-lg p-6 border-card-border data-[active=true]:bg-card-background data-[active=true]:border-solid data-[active=false]:border-dashed"
+        >
+            <input {...getInputProps(props as any)} name={props.name} id={props.name} />
+            <InteractiveArea onDeleteFile={onDeleteFile} isDragActive={isDragActive} idle={idle} files={props.files ?? files} />
+        </div>
+    );
+};

package/src/components/form/form.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+
+const inputFields = ["INPUT", "SELECT"];
+
+export const formReset = (form?: HTMLFormElement | null) => {
+    if (!form) return;
+    const elements = Array.from(form.elements);
+    elements.forEach((field) => {
+        if (!inputFields.includes(field.tagName)) return;
+        if (field.tagName === "INPUT") {
+            (field as HTMLInputElement).value = (field as HTMLInputElement).defaultValue;
+        }
+        if (field.tagName === "SELECT") {
+            (field as HTMLSelectElement).value = "";
+        }
+        field.setAttribute("data-initialized", "false");
+    });
+};
+
+export const Form = (props: React.ComponentProps<"form">) => {
+    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.persist();
+        e.preventDefault();
+        props.onSubmit?.(e);
+    };
+    return <form {...props} onSubmit={onSubmit} />;
+};

package/src/components/form/input-field.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { CheckCircle, XCircle } from "lucide-react";
+import React, { Fragment, PropsWithChildren } from "react";
+import { PolymorphicProps } from "~/components/core/polymorph";
+import { css } from "~/lib/dom";
+import { Label } from "~/types";
+
+export type FeedbackProps = React.PropsWithChildren<
+    Partial<{
+        title: string | React.ReactElement | React.ReactNode;
+        hideLeft?: boolean;
+        className?: string;
+        placeholder: string;
+        reportStatus: boolean;
+    }>
+>;
+export const InputFeedback = ({ reportStatus, hideLeft = false, className, children, title }: FeedbackProps) => (
+    <div className={css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className)}>
+        {hideLeft ? null : (
+            <span className="flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger">
+                {title}
+                {reportStatus ? (
+                    <span className="flex aspect-square h-4 w-4 items-center justify-center">
+                        <CheckCircle
+                            className="hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100"
+                            aria-hidden="true"
+                            size={16}
+                            strokeWidth={1}
+                            absoluteStrokeWidth
+                        />
+                        <XCircle
+                            className="hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-error:block group-error:opacity-100"
+                            aria-hidden="true"
+                            size={16}
+                            strokeWidth={1}
+                            absoluteStrokeWidth
+                        />
+                    </span>
+                ) : null}
+            </span>
+        )}
+        {children}
+    </div>
+);
+
+export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<
+    Partial<{
+        error?: string;
+        hideLeft: boolean;
+        container: string;
+        left: Label;
+        optionalText: string;
+        right: Label;
+        rightLabel: Label;
+        id: string;
+        name: string;
+        placeholder: string;
+    }>,
+    T
+>;
+
+export const InputField = <T extends "input" | "select">({
+    optionalText = "Optional",
+    left,
+    rightLabel,
+    container,
+    right,
+    children,
+    error,
+    form,
+    id,
+    name,
+    title,
+    placeholder,
+    hideLeft,
+    required,
+}: PropsWithChildren<InputFieldProps<T>>) => {
+    const ID = id ?? name;
+    return (
+        <fieldset data-error={!!error} form={form} className={css("group inline-block w-full", container)}>
+            <label
+                form={form}
+                htmlFor={ID}
+                className="inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger group-hover:border-primary"
+            >
+                {!hideLeft && !rightLabel ? (
+                    <InputFeedback hideLeft={hideLeft} reportStatus title={title} placeholder={placeholder}>
+                        {optionalText || rightLabel ? (
+                            <Fragment>
+                                {!required ? <span className="text-opacity-70">{optionalText}</span> : null}
+                                {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
+                            </Fragment>
+                        ) : null}
+                    </InputFeedback>
+                ) : null}
+                <div className="relative group flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger">
+                    {left ? <span className="absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2">{left}</span> : null}
+                    {children}
+                    {right ? <span className="absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1">{right}</span> : null}
+                </div>
+            </label>
+            <p className="mt-1 text-xs group-error:block group-error:text-danger">{error}</p>
+        </fieldset>
+    );
+};

package/src/components/form/input.tsx

@@ -0,0 +1,73 @@
+"use client";
+import React, { forwardRef, useEffect, useRef } from "react";
+import MaskInput, { TheMaskProps } from "the-mask-input";
+import { FeedbackProps, InputField, InputFieldProps } from "~/components/form/input-field";
+import { css, mergeRefs } from "~/lib/dom";
+import { Override } from "~/types";
+
+export type InputProps = Override<
+    InputFieldProps<"input">,
+    TheMaskProps &
+        FeedbackProps & {
+            next?: string;
+        }
+>;
+
+export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
+    ({ type = "text", container, next, rightLabel, optionalText, hideLeft = false, right, left, ...props }: InputProps, ref): any => {
+        const id = props.id ?? props.name;
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        useEffect(() => {
+            if (inputRef.current === null) return;
+            const input = inputRef.current;
+            const focus = () => input.setAttribute("data-initialized", "true");
+            const goNextInputImpl = (e: Event) => {
+                const event = e as KeyboardEvent;
+                if (event.key === "Enter" && input.enterKeyHint === "next") {
+                    const focusNext = input.getAttribute("data-next");
+                    if (focusNext) {
+                        const el = document.getElementById(focusNext);
+                        if (el) {
+                            el.focus();
+                            return void event.preventDefault();
+                        }
+                    }
+                }
+            };
+            input.addEventListener("keydown", goNextInputImpl);
+            input.addEventListener("focus", focus);
+            return () => {
+                input.removeEventListener("keydown", goNextInputImpl);
+                input.removeEventListener("focus", focus);
+            };
+        }, []);
+
+        return (
+            <InputField<"input">
+                {...(props as any)}
+                right={right}
+                left={left}
+                hideLeft={hideLeft}
+                rightLabel={rightLabel}
+                optionalText={optionalText}
+                container={css("group inline-block w-full", container)}
+            >
+                <MaskInput
+                    {...props}
+                    type={type}
+                    data-next={next}
+                    ref={mergeRefs(ref, inputRef)}
+                    id={id}
+                    name={id}
+                    className={css(
+                        "input text-foreground group h-10 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error",
+                        !!right ? "pe-4" : "",
+                        !!left ? "ps-4" : "",
+                        props.className
+                    )}
+                />
+            </InputField>
+        );
+    }
+) as any;

package/src/components/form/select.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { ChevronDown } from "lucide-react";
+import React, { forwardRef, useEffect, useRef } from "react";
+import { InputField, InputFieldProps } from "~/components/form/input-field";
+import { css, mergeRefs } from "~/lib/dom";
+import { Override } from "~/types";
+
+export type OptionProps = Override<React.ComponentProps<"option">, { value: string }>;
+
+export type SelectProps = Override<InputFieldProps<"select">, { options: OptionProps[] }>;
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(({ container, required = true, options, ...props }: SelectProps, ref) => {
+    const inputRef = useRef<HTMLSelectElement>(null);
+    const id = props.id ?? props.name;
+
+    useEffect(() => {
+        if (inputRef.current === null) return;
+        const input = inputRef.current;
+        const focus = () => input.setAttribute("data-initialized", "true");
+        const change = () => input.setAttribute("data-selected", "true");
+        input.addEventListener("focus", focus);
+        input.addEventListener("change", change);
+        return () => {
+            input.removeEventListener("focus", focus);
+            input.removeEventListener("change", change);
+        };
+    }, []);
+
+    return (
+        <InputField<"select">
+            {...(props as any)}
+            required={required}
+            container={css("group inline-block w-full", container)}
+            right={<ChevronDown size={20} />}
+        >
+            <select
+                {...props}
+                ref={mergeRefs(ref, inputRef)}
+                id={id}
+                name={id}
+                required={required}
+                data-selected={!!props.value || false}
+                className={css(
+                    "input bg-transparent text-foreground select group h-10 w-full flex-1 rounded-md p-2 placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error",
+                    "data-[selected=false]:text-input-placeholder",
+                    props.className
+                )}
+            >
+                <option value="" hidden disabled>
+                    {props.placeholder}
+                </option>
+                {options.map((option) => (
+                    <option key={`${id}-select-option-${option.value}`} {...option} children={option.label ?? option.value} />
+                ))}
+            </select>
+        </InputField>
+    );
+});

package/src/components/form/switch.tsx

@@ -0,0 +1,40 @@
+import React, { useId, useState } from "react";
+
+type SwitchProps = Omit<React.ComponentProps<"input">, "onChange"> & { onCheck?: (nextValue: boolean) => void };
+
+export const Switch = ({ children, ...props }: SwitchProps) => {
+    const id = useId();
+    const [innerChecked, setInnerChecked] = useState(false);
+    const checked = props.checked ?? innerChecked;
+
+    const onCheck = (e: React.MouseEvent<HTMLButtonElement>) => {
+        const button = e.target as HTMLButtonElement;
+        const checked = !(button.dataset.checked === "true");
+        setInnerChecked(checked);
+        props?.onCheck?.(checked);
+    };
+
+    return (
+        <div className="flex items-center">
+            <input {...props} hidden type="checkbox" checked={checked} onChange={(e) => setInnerChecked(e.target.checked)} />
+            <button
+                type="button"
+                role="switch"
+                onClick={onCheck}
+                aria-checked={checked}
+                data-checked={checked}
+                aria-labelledby={`${id}-label`}
+                className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary transition-colors ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+            >
+                <span
+                    aria-hidden="true"
+                    data-checked={checked}
+                    className="data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch pointer-events-none inline-block size-5 aspect-square data-[checked=false]translate-x-0 data-[checked=true]:translate-x-5 transform rounded-full shadow ring-0 transition ease-in-out"
+                />
+            </button>
+            <span className="ml-3 text-sm" id={`${id}-label`}>
+                <span className="font-medium text-foreground">{children}</span>
+            </span>
+        </div>
+    );
+};

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export * from "./form/autocomplete";
+export * from "./form/input";
+export * from "./form/select";
+export * from "./form/file-upload";
+export * from "./form/form";
+export * from "./form/select";
+export * from "./form/switch";
+export * from "./form/input-field";
+export * from "./core/button";
+export * from "./core/polymorph";
+export * from "./display/card";
+export * from "./floating/dropdown";
+export * from "./floating/tooltip";
+export * from "./table/index";