@g4rcez/components 0.0.8 → 0.0.10

package/dist/components/core/button.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { Polymorph } from "~/components/core/polymorph";
+import { css } from "~/lib/dom";
+const buttonVariants = cva("inline-flex gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-50 disabled:text-opacity-60 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
+    variants: {
+        size: {
+            default: "h-10 px-4 py-2",
+            big: "h-12 px-6 py-4",
+            small: "h-10 p-2 text-sm",
+            icon: "p-1",
+        },
+        rounded: {
+            rough: "rounded-sm",
+            default: "rounded-md",
+            squared: "rounded-none",
+            circle: "rounded-full aspect-square",
+        },
+        theme: {
+            raw: "",
+            main: "bg-primary hover:bg-primary-hover text-primary-foreground",
+            loading: "animate-pulse bg-disabled duration-700 opacity-70",
+            disabled: "bg-disabled duration-700 opacity-70",
+        },
+    },
+    defaultVariants: { theme: "main", size: "default", rounded: "default" },
+});
+export const Button = forwardRef(function Button(_a, ref) {
+    var _b;
+    var { className, icon, loading, theme, type = "button", size, rounded } = _a, props = __rest(_a, ["className", "icon", "loading", "theme", "type", "size", "rounded"]);
+    const disabled = loading || props.disabled;
+    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, type: type, "data-theme": theme, disabled: disabled, as: (_b = props.as) !== null && _b !== void 0 ? _b : "button", onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({
+            size,
+            rounded,
+            theme: loading ? "loading" : disabled ? "disabled" : theme,
+        }), className), children: [props.children, icon] })));
+});
+export const ButtonGroup = (props) => (_jsx("ul", { className: "border-main-bg text-main-foreground flex w-full flex-row rounded-md border-2", children: props.buttons.map((button) => (_jsx("li", { className: "flex flex-1", children: _jsx("button", Object.assign({}, button, { type: button.type || "button", "data-active": props.active === button.name ? "true" : "false", className: css("border-main-bg flex flex-1 items-center gap-1.5 rounded-sm border-r-2 px-4 py-2 last:border-r-0", "hover:text-main cursor-pointer justify-center whitespace-nowrap align-middle font-medium", "focus-visible:ring-ring shadow-sm focus-visible:outline-none focus-visible:ring-2 disabled:text-opacity-80", "data-[active=true]:bg-main-bg text-body data-[active=true]:text-main transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-50") })) }, `button-group-${button.name}`))) }));

package/dist/components/core/polymorph.js

@@ -0,0 +1,8 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const Polymorph = forwardRef(function Polymorph(_a, ref) {
+    var { as } = _a, props = __rest(_a, ["as"]);
+    const Component = as || "span";
+    return _jsx(Component, Object.assign({}, props, { ref: ref }));
+});

package/dist/components/display/card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Polymorph } from "~/components/core/polymorph";
+import { css } from "~/lib/dom";
+export const Card = (props) => {
+    return _jsx(Polymorph, Object.assign({}, props, { as: "div", className: css("rounded-lg bg-card-background p-8 border-card-border border shadow", props.className) }));
+};

package/dist/components/floating/dropdown.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole, } from "@floating-ui/react";
+import { Fragment, useMemo, useRef, useState } from "react";
+export const Dropdown = (props) => {
+    const [open, setOpen] = useState(props.open);
+    const arrowRef = useRef(null);
+    const middleware = useMemo(() => [
+        offset(10),
+        flip({ fallbackAxisSideDirection: "end" }),
+        shift(),
+        arrow({
+            padding: 5,
+            element: arrowRef,
+        }),
+    ], [props.arrow]);
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        transform: true,
+        whileElementsMounted: autoUpdate,
+        middleware,
+        onOpenChange: (nextValue, event) => {
+            var _a;
+            const element = event === null || event === void 0 ? void 0 : event.relatedTarget;
+            if (element) {
+                if (element.dataset.floating === "true" && !nextValue)
+                    return;
+            }
+            setOpen(nextValue);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, nextValue);
+        },
+    });
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+    const headingId = useId();
+    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: props.trigger })), open && (_jsx(FloatingFocusManager, { returnFocus: true, visuallyHiddenDismiss: true, restoreFocus: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background isolate z-floating border shadow-2xl p-6 border-floating-border rounded-lg", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-floating-background stroke-floating-border" }), _jsx("header", { className: "mb-2", children: _jsx("h3", { className: "leading-snug font-medium text-2xl tracking-tight text-left", children: props.title }) }), props.children] })) }))] }));
+};

package/dist/components/floating/tooltip.js

@@ -0,0 +1,32 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { Fragment, useRef, useState } from "react";
+import { Polymorph } from "~/components/core/polymorph";
+export const Tooltip = (_a) => {
+    var { children, as, title } = _a, props = __rest(_a, ["children", "as", "title"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const Component = as || "div";
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        transform: true,
+        middleware: [
+            offset(5),
+            flip({ fallbackAxisSideDirection: "start" }),
+            shift(),
+            arrow({
+                element: arrowRef,
+                padding: 5,
+            }),
+        ],
+    });
+    const hover = useHover(context, { move: false });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "tooltip" });
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+    return (_jsxs(Fragment, { children: [_jsx(Component, Object.assign({ ref: refs.setReference }, getReferenceProps(props), { children: title })), _jsx(FloatingPortal, { children: isOpen && (_jsxs(Polymorph, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { className: "bg-tooltip-background text-foreground border border-tooltip-border p-4 rounded-lg", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }))) })] }));
+};

package/dist/components/form/autocomplete.js

@@ -0,0 +1,125 @@
+"use client";
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { InputField } from "~/components/form/input-field";
+import { usePrevious } from "~/hooks/use-previous";
+import { css } from "~/lib/dom";
+export const Option = forwardRef((_a, ref) => {
+    var _b;
+    var { selected, active, onClick, option } = _a, rest = __rest(_a, ["selected", "active", "onClick", "option"]);
+    return (_jsx("li", Object.assign({}, rest, { ref: ref, role: "option", "aria-selected": selected, className: "w-full", children: _jsx("button", { type: "button", onClick: onClick, "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" : ""}`, children: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }) })));
+});
+const transitionStyles = {
+    duration: 300,
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+};
+const fuzzyOptions = { caseSensitive: false, sort: false };
+const emptyRef = [];
+export const Autocomplete = forwardRef((_a, externalRef) => {
+    var _b, _c;
+    var { options, required = true } = _a, props = __rest(_a, ["options", "required"]);
+    const [open, setOpen] = useState(false);
+    const [shadow, setShadow] = useState("");
+    const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : "");
+    const [index, setIndex] = useState(null);
+    const listRef = useRef(emptyRef);
+    const previousIndex = usePrevious(index);
+    const list = new Fuzzy(options, ["value"], fuzzyOptions).search(shadow);
+    const { x, y, strategy, refs, context } = useFloating({
+        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, () => { var _a; return (_a = refs.domReference) === null || _a === void 0 ? void 0 : _a.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) => {
+                var _a;
+                const lastIndex = list.length - 1;
+                if (n === null && previousIndex === 0)
+                    return setIndex(lastIndex);
+                if (n === null && previousIndex === lastIndex)
+                    return setIndex(0);
+                const i = (_a = n !== null && n !== void 0 ? n : previousIndex) !== null && _a !== void 0 ? _a : null;
+                return i === null ? undefined : setIndex(i);
+            },
+        }),
+    ]);
+    const onSelect = (opt) => {
+        setValue(opt.value);
+        setOpen(false);
+        setShadow("");
+    };
+    const onChange = (event) => {
+        var _a;
+        const value = event.target.value;
+        setShadow(value);
+        if (!open && value === "")
+            return setOpen(true);
+        return value ? setOpen(true) : (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onFocus = () => {
+        setOpen(true);
+        setShadow("");
+    };
+    const onClose = () => {
+        setShadow("");
+        setValue("");
+        setOpen(false);
+    };
+    return (_jsxs("fieldset", { className: "relative w-auto", children: [_jsx(InputField, Object.assign({}, props, { required: required, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(ChevronDown, { size: 20 }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "link:text-danger transition-colors", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }) })) : null] }), children: _jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
+                    onFocus, ref: refs.setReference, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
+                        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) })) })), _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { closeOnFocusOut: true, guards: true, returnFocus: true, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
+                        ref: refs.setFloating,
+                        style: Object.assign({ position: strategy, left: x !== null && x !== void 0 ? x : 0, top: y !== null && y !== void 0 ? 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", children: list.map((item, i) => (_createElement(Option, Object.assign({}, getItemProps({
+                            onClick: () => onSelect(item),
+                            ref: (node) => void (listRef.current[i] = node),
+                        }), { key: `${item.value}-option`, option: item, selected: index === i, active: value === item.value })))) })) }) })] }));
+});

package/dist/components/form/file-upload.js

@@ -0,0 +1,61 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import { Fragment, useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button } from "~/components/core/button";
+const mime = {
+    isImage: (file) => file.type.includes("image"),
+};
+const FileViewer = (props) => {
+    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 (_jsxs("div", { className: "flex flex-row gap-jade-200 items-center justify-between w-full", children: [_jsxs("header", { className: "flex flex-row gap-jade-200 items-center", children: [_jsx("img", { src: info.url, className: "size-jade-500 rounded-jade-xsmall", alt: `Miniatura do arquivo ${props.file.name}` }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onDeleteFile) === null || _a === void 0 ? void 0 : _a.call(props, props.file);
+                    }, children: _jsx(Trash2Icon, {}) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-row gap-jade-200 items-center justify-between w-full", children: [_jsxs("header", { className: "flex flex-row gap-4 items-center", children: [_jsx(FileIcon, { size: 48 }), _jsxs("div", { className: "flex flex-col text-left justify-start items-start", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = props.onDeleteFile) === null || _a === void 0 ? void 0 : _a.call(props, props.file);
+                }, children: _jsx(Trash2Icon, { className: "text-danger" }) })] }));
+};
+const DefaultViewer = (props) => {
+    return (_jsx("ul", { className: "w-full space-y-jade-200", children: props.files.map((file) => {
+            return _jsx(FileViewer, { onDeleteFile: props.onDeleteFile, file: file }, file.name);
+        }) }));
+};
+const InteractiveArea = (props) => {
+    if (props.isDragActive) {
+        return _jsx("p", { children: "Solte os arquivos selecionados" });
+    }
+    if (props.files.length > 0) {
+        return _jsx(DefaultViewer, { onDeleteFile: props.onDeleteFile, files: props.files });
+    }
+    return _jsx(Fragment, { children: props.idle });
+};
+const DefaultIdle = (_jsxs("div", { className: "flex flex-col gap-4 justify-center items-center", children: [_jsx(UploadIcon, { size: 64 }), _jsxs("p", { children: ["You can drag your files or", " ", _jsx("button", { className: "text-primary underline", type: "button", children: "drag to here" })] })] }));
+export const FileUpload = (_a) => {
+    var _b, _c;
+    var { idle = DefaultIdle, onDeleteFile, onDrop } = _a, props = __rest(_a, ["idle", "onDeleteFile", "onDrop"]);
+    const [files, setFiles] = useState([]);
+    const drop = (x) => {
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(x);
+        setFiles(x);
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
+    return (_jsxs("div", Object.assign({}, getRootProps(), { "data-active": ((_b = props.files) === null || _b === void 0 ? void 0 : _b.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", children: [_jsx("input", Object.assign({}, getInputProps(props), { name: props.name, id: props.name })), _jsx(InteractiveArea, { onDeleteFile: onDeleteFile, isDragActive: isDragActive, idle: idle, files: (_c = props.files) !== null && _c !== void 0 ? _c : files })] })));
+};

package/dist/components/form/form.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const inputFields = ["INPUT", "SELECT"];
+export const formReset = (form) => {
+    if (!form)
+        return;
+    const elements = Array.from(form.elements);
+    elements.forEach((field) => {
+        if (!inputFields.includes(field.tagName))
+            return;
+        if (field.tagName === "INPUT") {
+            field.value = field.defaultValue;
+        }
+        if (field.tagName === "SELECT") {
+            field.value = "";
+        }
+        field.setAttribute("data-initialized", "false");
+    });
+};
+export const Form = (props) => {
+    const onSubmit = (e) => {
+        var _a;
+        e.persist();
+        e.preventDefault();
+        (_a = props.onSubmit) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return _jsx("form", Object.assign({}, props, { onSubmit: onSubmit }));
+};

package/dist/components/form/input-field.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, XCircle } from "lucide-react";
+import { Fragment } from "react";
+import { css } from "~/lib/dom";
+export const InputFeedback = ({ reportStatus, hideLeft = false, className, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger", children: [title, reportStatus ? (_jsxs("span", { className: "flex aspect-square h-4 w-4 items-center justify-center", children: [_jsx(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: true }), _jsx(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: true })] })) : null] })), children] }));
+export const InputField = ({ optionalText = "Optional", left, rightLabel, container, right, children, error, form, id, name, title, placeholder, hideLeft, required, }) => {
+    const ID = id !== null && id !== void 0 ? id : name;
+    return (_jsxs("fieldset", { "data-error": !!error, form: form, className: css("group inline-block w-full", container), children: [_jsxs("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", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("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", children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "mt-1 text-xs group-error:block group-error:text-danger", children: error })] }));
+};

package/dist/components/form/input.js

@@ -0,0 +1,39 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import MaskInput from "the-mask-input";
+import { InputField } from "~/components/form/input-field";
+import { css, mergeRefs } from "~/lib/dom";
+export const Input = forwardRef((_a, ref) => {
+    var _b;
+    var { type = "text", container, next, rightLabel, optionalText, hideLeft = false, right, left } = _a, props = __rest(_a, ["type", "container", "next", "rightLabel", "optionalText", "hideLeft", "right", "left"]);
+    const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        const input = inputRef.current;
+        const focus = () => input.setAttribute("data-initialized", "true");
+        const goNextInputImpl = (e) => {
+            const event = e;
+            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 (_jsx(InputField, Object.assign({}, props, { right: right, left: left, hideLeft: hideLeft, rightLabel: rightLabel, optionalText: optionalText, container: css("group inline-block w-full", container), children: _jsx(MaskInput, Object.assign({}, 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) })) })));
+});

package/dist/components/form/select.js

@@ -0,0 +1,30 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef, useEffect, useRef } from "react";
+import { InputField } from "~/components/form/input-field";
+import { css, mergeRefs } from "~/lib/dom";
+export const Select = forwardRef((_a, ref) => {
+    var _b;
+    var { container, required = true, options } = _a, props = __rest(_a, ["container", "required", "options"]);
+    const inputRef = useRef(null);
+    const id = (_b = props.id) !== null && _b !== void 0 ? _b : 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 (_jsx(InputField, Object.assign({}, props, { required: required, container: css("group inline-block w-full", container), right: _jsx(ChevronDown, { size: 20 }), children: _jsxs("select", Object.assign({}, 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), children: [_jsx("option", { value: "", hidden: true, disabled: true, children: props.placeholder }), options.map((option) => {
+                    var _a;
+                    return (_jsx("option", Object.assign({}, option, { children: (_a = option.label) !== null && _a !== void 0 ? _a : option.value }), `${id}-select-option-${option.value}`));
+                })] })) })));
+});

package/dist/components/form/switch.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+export const Switch = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const id = useId();
+    const [innerChecked, setInnerChecked] = useState(false);
+    const checked = (_b = props.checked) !== null && _b !== void 0 ? _b : innerChecked;
+    const onCheck = (e) => {
+        var _a;
+        const button = e.target;
+        const checked = !(button.dataset.checked === "true");
+        setInnerChecked(checked);
+        (_a = props === null || props === void 0 ? void 0 : props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+    };
+    return (_jsxs("div", { className: "flex items-center", children: [_jsx("input", Object.assign({}, props, { hidden: true, type: "checkbox", checked: checked, onChange: (e) => setInnerChecked(e.target.checked) })), _jsx("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", children: _jsx("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" }) }), _jsx("span", { className: "ml-3 text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) })] }));
+};

package/dist/components/index.js

@@ -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";

package/dist/components/table/filter.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
+import { Fragment } from "react";
+import { Dropdown } from "~/components/floating/dropdown";
+import { Input } from "~/components/form/input";
+import { Select } from "~/components/form/select";
+import { uuid } from "~/lib/fns";
+import { ColType, getLabel, valueFromType } from "./table-lib";
+const operators = {
+    contains: { value: "contains", label: "Contains", symbol: "includes" },
+    is: { value: "is", label: "Is", symbol: "is" },
+    isNot: { value: "isNot", label: "Is not", symbol: "!==" },
+    notContains: { value: "notContains", label: "Does not contains", symbol: "notIncludes" },
+    lessThan: { value: "lessThan", label: "Less Than", symbol: "<=" },
+    greaterThan: { value: "greaterThan", label: "Greater than", symbol: ">=" },
+    startsWith: { value: "startsWith", label: "Starts with", symbol: "startsWith" },
+    endsWith: { value: "endsWith", label: "Ends with", symbol: "endsWith" },
+};
+const operatorOptions = {
+    [ColType.Text]: [operators.is, operators.isNot, operators.contains, operators.notContains, operators.startsWith, operators.endsWith],
+    [ColType.Boolean]: [operators.is, operators.isNot],
+    [ColType.Number]: [operators.is, operators.isNot, operators.greaterThan, operators.lessThan],
+};
+export const createFilterFromCol = (f, rest = {}) => {
+    var _a, _b;
+    const name = f.id;
+    const type = (_a = f.type) !== null && _a !== void 0 ? _a : ColType.Text;
+    const operatorId = (_b = operatorOptions[type]) === null || _b === void 0 ? void 0 : _b[0].value;
+    const operation = operators[operatorId];
+    return Object.assign({ id: uuid(), operation, label: getLabel(f), name, type, value: "" }, rest);
+};
+export const Filter = (props) => {
+    const onAddFilter = () => {
+        const col = props.cols.at(0);
+        props.set((prev) => [...prev, createFilterFromCol(col)]);
+    };
+    const onSelectProperty = (e) => {
+        const changedId = e.target.dataset.id || "";
+        const newId = e.target.value;
+        props.set((prev) => prev.map((x) => {
+            if (changedId !== x.id)
+                return x;
+            const col = props.cols.find((x) => newId === x.id);
+            return createFilterFromCol(col, { value: "" });
+        }));
+    };
+    const onSelectOperation = (e) => {
+        const id = e.target.dataset.id || "";
+        const operator = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operators[operator] }) : x)));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        console.log({ id, f: props.filters });
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value }) : x)));
+    };
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: false, title: "Filters", trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(SearchIcon, { size: 14 }), "Filtros ", props.filters.length === 0 ? "" : ` (${props.filters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.filters.map((filter) => {
+                        const operators = operatorOptions[filter.type];
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { title: "Filtro", options: props.options, placeholder: "Seleciona um campo...", value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { title: "Tipo do filtro", "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators, placeholder: "Opera\u00E7\u00E3o..." }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, placeholder: "Buscar por...", title: "Valor do filtro", type: filter.type, value: filter.value }), _jsx("div", { className: "flex items-center justify-center mt-5", children: _jsx("button", { "data-id": filter.id, type: "button", onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 16 }) }) })] }, `filter-select-${filter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddFilter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " Adicionar novo filtro"] }) })] }) }) }));
+};
+export const ColumnHeaderFilter = ({ filter, set }) => {
+    const onSelectOperation = (e) => {
+        const operator = e.target.value;
+        const id = e.target.dataset.id || "";
+        set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operators[operator] }) : x)));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value }) : x)));
+    };
+    return (_jsxs("div", { className: "flex flex-nowrap items-center gap-4 py-2", children: [_jsx(Select, { onChange: onSelectOperation, value: filter.operation.value, options: operatorOptions[filter.type], placeholder: "Operation..." }), _jsx(Input, { type: filter.type, "data-id": filter.id, onChange: onChangeValue, placeholder: "Looking for...", value: filter.value })] }));
+};

package/dist/components/table/group.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "framer-motion";
+import Linq from "linq-arrays";
+import { GripVerticalIcon, GroupIcon, Trash2Icon } from "lucide-react";
+import { Fragment, useState } from "react";
+import { keys } from "sidekicker";
+import { Button } from "~/components/core/button";
+import { Dropdown } from "~/components/floating/dropdown";
+import { Select } from "~/components/form/select";
+import { uuid } from "~/lib/fns";
+import { createOptionCols } from "./table-lib";
+const Item = ({ item, onPointerDown }) => {
+    const y = useMotionValue(0);
+    return (_jsxs(Reorder.Item, { onPointerDown: onPointerDown, id: item.groupId, className: "flex flex-row items-center gap-2", value: item, style: { y }, children: [_jsx("button", { className: "cursor-grab", children: _jsx(GripVerticalIcon, { size: 14 }) }), _jsx("span", { children: item.groupName })] }, item.groupId));
+};
+export const Group = (props) => {
+    var _a;
+    const options = createOptionCols(props.cols);
+    const controls = useDragControls();
+    const [group, setGroup] = useState(((_a = props.groups[0]) === null || _a === void 0 ? void 0 : _a.thead) || "");
+    const onChange = (e) => {
+        var _a;
+        const select = e.target;
+        const key = select.value;
+        const index = select.options.selectedIndex;
+        const label = ((_a = select.options.item(index)) === null || _a === void 0 ? void 0 : _a.label) || "";
+        setGroup(label);
+        const groupBy = new Linq(props.rows).GroupBy(key);
+        const col = props.cols.find((x) => x.id === key);
+        props.setGroups(keys(groupBy).map((groupName, index) => {
+            const rows = groupBy[groupName];
+            return Object.assign(Object.assign({}, col), { groupId: uuid(), groupKey: key, index, rows, groupName: groupName });
+        }));
+    };
+    const onDelete = (e) => props.setGroups([]);
+    return (_jsx(Fragment, { children: _jsxs(Dropdown, { arrow: false, title: "Groups", trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(GroupIcon, { size: 14 }), "Groups", props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""] }), children: [_jsxs("div", { className: "flex flex-nowrap items-center", children: [_jsx(Select, { value: group, title: "Tipo de agrupamento", onChange: onChange, options: options, placeholder: "Agrupar por..." }), _jsx(Button, { className: "mt-4", onClick: onDelete, theme: "raw", "data-id": group, children: _jsx(Trash2Icon, { size: 16, className: "text-danger" }) })] }), props.groups.length > 0 ? (_jsxs("section", { className: "my-4", children: [_jsx("header", { children: _jsx("h2", { className: "text-xl font-medium", children: "Ordenar grupos" }) }), _jsx(LayoutGroup, { children: _jsx(Reorder.Group, { axis: "y", className: "relative space-y-2", dragListener: false, dragControls: controls, drag: true, layoutScroll: true, onReorder: props.setGroups, values: props.groups, children: props.groups.map((item) => (_jsx(Item, { item: item, onPointerDown: (e) => {
+                                        controls.start(e);
+                                        props.setGroups([...props.groups]);
+                                    } }, item.groupId))) }) })] })) : null] }) }));
+};