@g4rcez/components 0.0.16 → 0.0.17

package/dist/components/core/tag.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-const tagVariants = cva("inline-flex rounded-pill bg-opacity-90 gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium", {
+const tagVariants = cva("inline-flex rounded-pill bg-opacity-90 gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle whitespace-nowrap font-medium", {
     variants: {
         size: {
             default: "h-8 px-4 py-2",
@@ -29,7 +29,7 @@ const tagVariants = cva("inline-flex rounded-pill bg-opacity-90 gap-1.5 text-mai
 export const Tag = forwardRef(function Button(_a, ref) {
     var _b;
     var { className, icon, loading, theme, size } = _a, props = __rest(_a, ["className", "icon", "loading", "theme", "size"]);
-    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, "data-theme": theme, as: (_b = props.as) !== null && _b !== void 0 ? _b : "button", className: css(tagVariants({
+    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, "data-theme": theme, as: (_b = props.as) !== null && _b !== void 0 ? _b : "span", className: css(tagVariants({
             size,
             theme: loading ? "loading" : (theme === null || theme === void 0 ? void 0 : theme.disabled) ? "disabled" : theme,
         }), className), children: [props.children, icon] })));

package/dist/components/display/card.d.ts

@@ -1,4 +1,9 @@
 import React, { PropsWithChildren } from "react";
-export type CardProps = React.ComponentProps<"div">;
-export declare const Card: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+import { Label, Override } from "../../types";
+export type CardProps = Override<React.ComponentProps<"div">, {
+    title?: Label;
+    container?: string;
+    header?: React.ReactElement | null;
+}>;
+export declare const Card: ({ children, title, container, header, className, ...props }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=card.d.ts.map

package/dist/components/display/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CAEvD,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAC5B,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI,gEAAkF,iBAAiB,CAAC,SAAS,CAAC,4CAS9H,CAAC"}

package/dist/components/display/card.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Polymorph } from "../core/polymorph";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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) }));
+import { Polymorph } from "../core/polymorph";
+export const Card = (_a) => {
+    var { children, title, container = "", header = null, className = "" } = _a, props = __rest(_a, ["children", "title", "container", "header", "className"]);
+    return (_jsxs(Polymorph, Object.assign({}, props, { as: "div", className: css("rounded-card flex flex-col gap-4 bg-card-background py-4 pb-8 border-card-border border shadow", container), children: [title ? _jsx("header", { className: "w-full px-8 pb-4 mb-2 border-b border-card-border font-medium text-xl", children: title }) : header, _jsx("div", { className: `min-w-full px-8 ${className}`, children: children })] })));
 };

package/dist/components/display/stats.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Label } from "../../types";
+export type StatsProps = {
+    title: Label;
+    Icon: React.FC<any>;
+    iconContainer?: string;
+    footer?: React.ReactElement;
+};
+export declare const Stats: (props: React.PropsWithChildren<StatsProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stats.d.ts.map

package/dist/components/display/stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../src/components/display/stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,KAAK,UAAW,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAmB/D,CAAC"}

package/dist/components/display/stats.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "../../lib/dom";
+export const Stats = (props) => {
+    return (_jsxs("div", { className: "divide-y divide-card-border bg-card-background shadow border border-card-border rounded-card", children: [_jsxs("header", { className: "p-6 items-start flex gap-4", children: [_jsx("div", { className: css("size-10 p-8 rounded-card flex items-center justify-center aspect-square bg-primary", props.iconContainer), children: _jsx("div", { children: _jsx(props.Icon, { className: "size-10 aspect-square text-primary-foreground" }) }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("header", { children: _jsx("h3", { className: "text-base leading-none", children: props.title }) }), _jsx("p", { className: "text-4xl font-semibold", children: props.children })] })] }), props.footer ? _jsx("footer", { className: "px-6 py-2", children: props.footer }) : null] }));
+};

package/dist/components/display/tabs.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import { Label } from "../../types";
+export type TabsProps = {
+    active: string;
+    onChange?: (id: string) => void;
+    useHash?: boolean;
+};
+export declare const Tabs: (props: PropsWithChildren<TabsProps>) => import("react/jsx-runtime").JSX.Element;
+export type TabProps = {
+    id: string;
+    title: Label;
+};
+export declare const Tab: (props: PropsWithChildren<TabProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/display/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,MAAM,MAAM,SAAS,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAI/F,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CAgGvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useMotionValue } from "framer-motion";
+import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
+import { useReactive } from "../../hooks/use-reactive";
+import { Card } from "./card";
+const Context = createContext("");
+export const Tabs = (props) => {
+    const [active, setActive] = useReactive(props.active);
+    const left = useMotionValue(0);
+    const width = useMotionValue(0);
+    const ref = useRef(null);
+    const Render = props.useHash ? "a" : "button";
+    useEffect(() => {
+        const header = ref.current;
+        if (header === null)
+            return;
+        const resize = (element) => {
+            if (!element)
+                return;
+            const rect = element.getBoundingClientRect();
+            width.set(rect.width);
+            left.set(element.offsetLeft);
+        };
+        const listener = () => {
+            const element = header.querySelector(`li[data-active=true]`);
+            return void resize(element);
+        };
+        window.addEventListener("resize", listener);
+        let first = header.querySelector(`li[data-active=true]`);
+        const hash = window.location.hash.replace(/^#/, "");
+        if (props.active === "" && hash !== "") {
+            first = header.querySelector(`li[data-id=${hash}]`);
+            setActive(hash);
+        }
+        if (first === null) {
+            first = header.querySelector(`li[data-id]`);
+            const id = first.getAttribute("data-id") || "";
+            setActive(id);
+        }
+        resize(first);
+        return () => window.removeEventListener("resize", listener);
+    }, []);
+    useEffect(() => {
+        if (props.onChange)
+            props.onChange(active);
+    }, [props.onChange, active]);
+    const items = React.Children.toArray(props.children);
+    const onClick = (e) => {
+        const anchor = e.currentTarget;
+        const rect = anchor.getBoundingClientRect();
+        width.set(rect.width);
+        left.set(anchor.offsetLeft);
+        setActive(anchor.dataset.id || "");
+    };
+    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { container: "pt-0", header: _jsxs("header", { ref: ref, className: "border-b border-card-border relative mb-2", children: [_jsx(motion.div, { layout: true, initial: false, "aria-hidden": "true", style: { left, width }, transition: { type: "tween", left, width }, className: "w-28 h-0.5 bg-primary absolute bottom-0 duration-300 transition-all hidden md:block" }), _jsx("nav", { children: _jsx("ul", { className: "divide-x divide-card-border overflow-x-auto flex justify-between md:justify-start", children: items.map((x) => {
+                                const inner = x.props;
+                                return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "data-[active=true]:text-primary w-full md:w-auto", children: _jsx(Render, { "data-id": inner.id, onClick: onClick, "aria-current": "page", className: "px-10 py-4 block font-medium w-full whitespace-nowrap", href: props.useHash ? `#${inner.id}` : undefined, children: inner.title }) }, `tab-header-${inner.id}`));
+                            }) }) })] }), children: props.children }) }));
+};
+const useTabs = () => useContext(Context);
+export const Tab = (props) => {
+    const active = useTabs();
+    return _jsx(Fragment, { children: props.id === active ? props.children : null });
+};

package/dist/components/floating/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAEtF,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAmE/D,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAmB,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA4D/D,CAAC"}

package/dist/components/floating/dropdown.js

@@ -1,23 +1,16 @@
 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";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { Fragment, useId, useMemo, useRef, useState } from "react";
 export const Dropdown = (props) => {
+    const headingId = useId();
     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 middleware = useMemo(() => [offset(10), flip({ fallbackAxisSideDirection: "end" }), shift(), arrow({ padding: 5, element: arrowRef })], [props.arrow]);
     const { refs, floatingStyles, context } = useFloating({
         open,
+        middleware,
         transform: true,
         whileElementsMounted: autoUpdate,
-        middleware,
         onOpenChange: (nextValue, event) => {
             var _a;
             const element = event === null || event === void 0 ? void 0 : event.relatedTarget;
@@ -33,6 +26,5 @@ export const Dropdown = (props) => {
     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] })) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { returnFocus: true, visuallyHiddenDismiss: true, restoreFocus: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background relative min-w-96 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/modal.d.ts

@@ -2,13 +2,14 @@ import React, { PropsWithChildren } from "react";
 import { Label } from "../../types";
 export type DrawerProps = {
     title?: Label;
-    footer?: Label;
     open: boolean;
+    footer?: Label;
+    resizer?: boolean;
     asChild?: boolean;
-    trigger: Label | React.FC<any>;
-    onChange: (nextState: boolean) => void;
     type?: "dialog" | "drawer";
     position?: "left" | "right";
+    trigger: Label | React.FC<any>;
+    onChange: (nextState: boolean) => void;
 };
-export declare const Modal: (props: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ type, resizer, ...props }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAiBpC,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,KAAK,UAAW,iBAAiB,CAAC,WAAW,CAAC,4CAoD1D,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AA+CpC,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAiCF,eAAO,MAAM,KAAK,gCAAmD,iBAAiB,CAAC,WAAW,CAAC,4CA+DlG,CAAC"}

package/dist/components/floating/modal.js

@@ -1,14 +1,34 @@
 "use client";
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useId, useInteractions, useRole, } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { Fragment } from "react";
-const variants = cva("ring-0 outline-0 appearance-none container flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
+import { AnimatePresence, motion, useMotionValue } from "framer-motion";
+import { Fragment, useId } from "react";
+const drawerLeft = {
+    initial: { left: "-48rem", opacity: 0.4 },
+    enter: { left: 0, opacity: 1 },
+    exit: { left: "-48rem", opacity: 0.4 },
+};
+const drawerRight = {
+    initial: { right: "-48rem", opacity: 0.4 },
+    enter: { right: 0, opacity: 1 },
+    exit: { right: "-48rem", opacity: 0.4 },
+};
+const animations = {
+    drawer: (type) => (type === "left" ? drawerLeft : drawerRight),
+    dialog: {
+        initial: { opacity: 0, scale: 0.9 },
+        enter: { opacity: 1, scale: [1.05, 1] },
+        exit: { opacity: 0, scale: 0.9 },
+    },
+};
+const variants = cva("isolate ring-0 outline-0 appearance-none container flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
     variants: {
         type: {
             drawer: "max-h-screen h-screen min-h-0",
-            dialog: "max-h-[calc(100lvh-5%)] rounded-lg py-8",
+            dialog: "max-h-[calc(100lvh-10%)] h-[inherit] relative rounded-lg py-8",
         },
         position: {
             none: "",
@@ -18,19 +38,31 @@ const variants = cva("ring-0 outline-0 appearance-none container flex flex-col g
     },
     defaultVariants: { position: "right", type: "dialog" },
 });
-export const Modal = (props) => {
-    const type = props.type || "dialog";
-    const position = type === "dialog" ? "none" : props.position || "left";
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
+const Draggable = (props) => {
+    const handleDrag = (_, info) => {
+        if (props.parent.current) {
+            const div = props.parent.current;
+            const v = props.value.get() || div.getBoundingClientRect().width;
+            const delta = props.type === "right" ? -info.delta.x : info.delta.x;
+            props.value.set(Math.abs(v + delta));
+        }
+    };
+    return (_jsx(motion.div, { drag: "x", dragElastic: 0, dragMomentum: false, onDrag: handleDrag, dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: `absolute top-1/2 ${props.type === "left" ? "right-5" : "left-2"} rounded-lg cursor-grab h-10 w-2 bg-floating-border` }));
+};
+export const Modal = (_a) => {
+    var { type = "dialog", resizer = true } = _a, props = __rest(_a, ["type", "resizer"]);
+    const isDialog = type === "dialog";
+    const position = isDialog ? "none" : props.position || "left";
+    const animation = isDialog ? animations.dialog : animations.drawer(position);
     const headingId = useId();
     const descriptionId = useId();
-    const { refs, context } = useFloating({
-        open: props.open,
-        onOpenChange: props.onChange,
-    });
+    const { refs, context } = useFloating({ open: props.open, onOpenChange: props.onChange });
     const click = useClick(context);
     const role = useRole(context);
     const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: false });
     const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
     const Trigger = props.trigger;
-    return (_jsxs(Fragment, { children: [props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))), _jsx(FloatingPortal, { children: props.open && (_jsx(FloatingOverlay, { className: `relative bg-floating-overlay/70 ${type === "drawer" ? "" : "grid items-baseline p-8"}`, lockScroll: true, children: _jsx(FloatingFocusManager, { closeOnFocusOut: true, context: context, children: _jsxs("div", Object.assign({ ref: refs.setFloating, "aria-labelledby": headingId, "aria-describedby": descriptionId, className: variants({ position, type }) }, getFloatingProps(), { children: [_jsx("span", { className: "w-5 h-2" }), props.title ? (_jsx("header", { className: "w-full", children: _jsx("h2", { className: "px-8 pb-4 border-b text-3xl font-medium leading-relaxed", children: props.title }) })) : null, _jsx("div", { className: "flex-1 px-8 overflow-scroll", children: props.children }), props.footer ? _jsx("footer", { className: "px-8 border-t pt-4 w-full", children: props.footer }) : null] })) }) })) })] }));
+    const value = useMotionValue(undefined);
+    return (_jsxs(Fragment, { children: [props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: Trigger }))), _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open && (_jsx(FloatingOverlay, { lockScroll: true, className: `relative !overflow-clip h-[100dvh] z-floating bg-floating-overlay/70 ${type === "drawer" ? "" : "grid items-baseline p-8"}`, children: _jsx(FloatingFocusManager, { modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", initial: "initial", ref: refs.setFloating, variants: animation, style: { width: value } }, getFloatingProps(), { children: [!isDialog && resizer ? _jsx(Draggable, { value: value, parent: refs.floating, type: position }) : null, props.title ? (_jsx("header", { className: "w-full", children: _jsx("h2", { className: "px-8 pb-4 border-b border-floating-border text-3xl font-medium leading-relaxed", children: props.title }) })) : null, _jsx("div", { className: "flex-1 px-8 overflow-y-auto", children: props.children }), props.footer ? (_jsx("footer", { className: "px-8 border-t border-floating-border pt-4 w-full", children: props.footer })) : null] })) }) })) }) })] }));
 };

package/dist/components/form/checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Override } from "../../types";
+export type CheckboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
+    size?: "medium" | "large";
+}>;
+export declare const Checkbox: ({ children, className, size, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/form/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAanF,CAAC"}

package/dist/components/form/checkbox.js

@@ -0,0 +1,7 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "../../lib/dom";
+export const Checkbox = (_a) => {
+    var { children, className = "", size } = _a, props = __rest(_a, ["children", "className", "size"]);
+    return (_jsxs("label", { className: "font-normal flex items-center gap-2", children: [_jsx("input", Object.assign({}, props, { type: "checkbox", className: css("form-checkbox h-4 w-4 app rounded border-card-border text-primary focus:ring-primary appearance-none inline-block bg-origin-border select-none", className) }, props)), children] }));
+};

package/dist/components/form/transfer-list.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { POJO, SetState } from "../../types";
+export type TransferListProps<T> = {
+    source: T[];
+    target: T[];
+    Item: React.FC<{
+        data: T;
+    }>;
+    reference: keyof T;
+    setSource: SetState<T[]>;
+    setTarget: SetState<T[]>;
+};
+export declare const TransferList: <T extends POJO, K extends keyof T>(props: TransferListProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transfer-list.d.ts.map

package/dist/components/form/transfer-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/transfer-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK7C,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAC/B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;CAC5B,CAAC;AAWF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,CAAC,SAAS,iBAAiB,CAAC,CAAC,CAAC,4CAgC1F,CAAC"}

package/dist/components/form/transfer-list.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+import { forwardRef, Fragment, useRef } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { useParentHeight } from "../../hooks/use-parent";
+import { Button } from "../core/button";
+import { Checkbox } from "../form/checkbox";
+import { Input } from "./input";
+const components = {
+    Item: forwardRef(function InnerList(props, ref) {
+        return _jsx("li", Object.assign({}, props, { ref: ref, className: "flex items-center gap-1 justify-between" }));
+    }),
+    List: forwardRef(function InnerList(props, ref) {
+        return _jsx("ul", Object.assign({}, props, { ref: ref, className: "space-y-3" }));
+    }),
+};
+export const TransferList = (props) => {
+    const ref = useRef(null);
+    const h = useParentHeight(ref);
+    return (_jsxs("div", { className: "flex flex-row gap-4", ref: ref, children: [_jsxs("div", { className: "py-8 space-y-4 min-w-64 w-fit flex flex-col whitespace-nowrap rounded-lg border border-card-border", children: [_jsx("header", { className: "border-b border-card-border pb-2" }), _jsxs("div", { className: "px-8 space-y-2", children: [_jsx(Input, { rightLabel: "", title: "Search", placeholder: "Looking for..." }), _jsx(Virtuoso, { height: h, useWindowScroll: true, data: props.source, components: components, itemContent: (_, row) => (_jsx(Fragment, { children: _jsx(Checkbox, { children: _jsx(props.Item, { data: row }) }) })) })] })] }), _jsx("div", { children: _jsx(Button, { children: _jsx(ChevronRightIcon, {}) }) }), _jsx("div", {})] }));
+};

package/dist/components/index.d.ts

@@ -6,13 +6,17 @@ export * from "./form/form";
 export * from "./form/select";
 export * from "./form/switch";
 export * from "./form/input-field";
+export * from "./form/transfer-list";
+export * from "./form/checkbox";
 export * from "./core/button";
 export * from "./core/polymorph";
 export * from "./core/tag";
 export * from "./display/card";
+export * from "./display/stats";
+export * from "./display/tabs";
 export * from "./floating/dropdown";
 export * from "./floating/tooltip";
 export * from "./floating/modal";
 export * from "./table/index";
-export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";
+export { createColumns, createOptionCols, ColType, useTablePreferences } from "./table/table-lib";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -6,12 +6,16 @@ export * from "./form/form";
 export * from "./form/select";
 export * from "./form/switch";
 export * from "./form/input-field";
+export * from "./form/transfer-list";
+export * from "./form/checkbox";
 export * from "./core/button";
 export * from "./core/polymorph";
 export * from "./core/tag";
 export * from "./display/card";
+export * from "./display/stats";
+export * from "./display/tabs";
 export * from "./floating/dropdown";
 export * from "./floating/tooltip";
 export * from "./floating/modal";
 export * from "./table/index";
-export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";
+export { createColumns, createOptionCols, ColType, useTablePreferences } from "./table/table-lib";

package/dist/components/table/filter.d.ts

@@ -64,8 +64,9 @@ export declare const createFilterFromCol: <T extends {}>(f: Col<T>, rest?: Parti
 export declare const Filter: <T extends {}>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 type ColumnHeaderFilterProps<T extends {}> = {
     filter: FilterConfig<T>;
+    onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
     set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
 };
-export declare const ColumnHeaderFilter: <T extends {}>({ filter, set }: ColumnHeaderFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnHeaderFilter: <T extends {}>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=filter.d.ts.map

package/dist/components/table/filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS8C,CAAC;AAE9D,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,KAAK,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;AAQ9C,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,SAAQ,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAQ,YAAY,CAAC,CAAC,CAMhH,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA6FnD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,EAAE,IAAI;IACzC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,EAAE,mBAAmB,uBAAuB,CAAC,CAAC,CAAC,4CAyB3F,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS8C,CAAC;AAE9D,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,KAAK,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;AAQ9C,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,SAAQ,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAQ,YAAY,CAAC,CAAC,CAMhH,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA6FnD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,EAAE,IAAI;IACzC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,EAAE,6BAA6B,uBAAuB,CAAC,CAAC,CAAC,4CAmCrG,CAAC"}

package/dist/components/table/filter.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
 import { Fragment } from "react";
+import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
 import { Input } from "../form/input";
 import { Select } from "../form/select";
-import { uuid } from "../../lib/fns";
 import { ColType, getLabel, valueFromType } from "./table-lib";
 const operators = {
     contains: { value: "contains", label: "Contains", symbol: "includes" },
@@ -60,10 +60,10 @@ export const Filter = (props) => {
     };
     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"] }) })] }) }) }));
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { title: "Filter", options: props.options, placeholder: "Name...", value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { title: "Filter type", "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators, placeholder: "Operator..." }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, placeholder: "Search...", title: "Value", 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 }), " New filter"] }) })] }) }) }));
 };
-export const ColumnHeaderFilter = ({ filter, set }) => {
+export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
     const onSelectOperation = (e) => {
         const operator = e.target.value;
         const id = e.target.dataset.id || "";
@@ -74,5 +74,5 @@ export const ColumnHeaderFilter = ({ filter, set }) => {
         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 })] }));
+    return (_jsxs("div", { className: "flex flex-nowrap items-center gap-4 py-2", children: [_jsx(Select, { onChange: onSelectOperation, options: operatorOptions[filter.type], placeholder: "Operation...", title: "Filter type", value: filter.operation.value }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, placeholder: "Looking for...", title: "Value", type: filter.type, value: filter.value }), _jsx("button", { onClick: onDelete, "data-id": filter.id, type: "button", className: "mt-4", children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }));
 };

package/dist/components/table/group.js

@@ -12,7 +12,7 @@ import { Select } from "../form/select";
 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));
+    return (_jsxs(Reorder.Item, { onPointerDown: onPointerDown, id: item.groupId, className: "flex flex-row items-center gap-2", value: item, style: { y }, children: [_jsx("button", { type: "button", className: "cursor-grab", children: _jsx(GripVerticalIcon, { size: 14 }) }), _jsx("span", { children: item.groupName })] }, item.groupId));
 };
 export const Group = (props) => {
     var _a;
@@ -33,8 +33,8 @@ export const Group = (props) => {
             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) => {
+    const onDelete = () => 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: "Order groups" }) }), _jsx(LayoutGroup, { children: _jsx(Reorder.Group, { axis: "y", className: "relative space-y-2", drag: true, dragControls: controls, dragListener: false, 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] }) }));

package/dist/components/table/index.d.ts

@@ -16,9 +16,13 @@ type InnerTableProps<T extends {}> = HTMLAttributes<HTMLTableElement> & TableOpe
     showMetadata?: boolean;
     filters?: FilterConfig<T>[];
     setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+    onScrollEnd?: () => void;
+    loadingMore?: boolean;
 };
-export type TableProps<T extends {}> = Pick<InnerTableProps<T>, "cols" | "rows"> & {
+export type TableProps<T extends {}> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore"> & {
     name: string;
+    operations?: boolean;
+    onScrollEnd?: () => void;
 } & Partial<TableOperationProps<T> & {
     reference: keyof T;
     loading: boolean;

package/dist/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,cAAc,EAAW,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGtG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AAiFN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IAC/E,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAO/E,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CAwFvD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM9F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGtG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AA2IN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG;IAC/F,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAO/E,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CA6FvD,CAAC"}