@flowtomic/ui 0.1.0 → 0.1.1

package/dist/components/atoms/navigation/navigation-menu/navigation-menu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
+}
+NavigationMenu.displayName = "NavigationMenu";
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-1", className), ...props }));
+}
+NavigationMenuList.displayName = "NavigationMenuList";
+function NavigationMenuItem({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
+}
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1");
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
+}
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
+}
+NavigationMenuContent.displayName = "NavigationMenuContent";
+function NavigationMenuViewport({ className, ...props }) {
+    return (_jsx("div", { className: cn("absolute top-full left-0 isolate z-50 flex justify-center"), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn("origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]", className), ...props }) }));
+}
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+function NavigationMenuLink({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+NavigationMenuLink.displayName = "NavigationMenuLink";
+function NavigationMenuIndicator({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn("data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", className), ...props, children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" }) }));
+}
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/components/atoms/navigation/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export type { PaginationContentProps, PaginationEllipsisProps, PaginationItemProps, PaginationLinkProps, PaginationNextProps, PaginationPreviousProps, PaginationProps, } from "./pagination";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/navigation/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/navigation/pagination/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,sBAAsB,EACtB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAC"}

package/dist/components/atoms/navigation/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";

package/dist/components/atoms/navigation/pagination/pagination.d.ts

@@ -0,0 +1,47 @@
+import type * as React from "react";
+export interface PaginationProps extends React.ComponentProps<"nav"> {
+}
+declare function Pagination({ className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+export interface PaginationContentProps extends React.ComponentProps<"ul"> {
+}
+declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationContent {
+    var displayName: string;
+}
+export interface PaginationItemProps extends React.ComponentProps<"li"> {
+}
+declare function PaginationItem({ ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationItem {
+    var displayName: string;
+}
+export interface PaginationLinkProps extends React.ComponentProps<"a"> {
+    isActive?: boolean;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
+}
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationLink {
+    var displayName: string;
+}
+export interface PaginationPreviousProps extends PaginationLinkProps {
+}
+declare function PaginationPrevious({ className, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+export interface PaginationNextProps extends PaginationLinkProps {
+}
+declare function PaginationNext({ className, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+export interface PaginationEllipsisProps extends React.ComponentProps<"span"> {
+}
+declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/atoms/navigation/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/navigation/pagination/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEvE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAS3D;kBATQ,UAAU;;;AAanB,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;CAAG;AAE7E,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;kBARQ,iBAAiB;;;AAY1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;CAAG;AAE1E,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;kBAFQ,cAAc;;;AAMvB,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACjE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAgB5F;kBAhBQ,cAAc;;;AAoBvB,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;CAAG;AAEvE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAY3E;kBAZQ,kBAAkB;;;AAgB3B,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;CAAG;AAEnE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAYnE;kBAZQ,cAAc;;;AAgBvB,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;CAAG;AAEhF,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAY3E;kBAZQ,kBAAkB;;;AAgB3B,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAC"}

package/dist/components/atoms/navigation/pagination/pagination.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "../../actions/button/button";
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+Pagination.displayName = "Pagination";
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
+}
+PaginationContent.displayName = "PaginationContent";
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+PaginationItem.displayName = "PaginationItem";
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+    return (_jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
+            variant: isActive ? "outline" : "ghost",
+            size,
+        }), className), ...props }));
+}
+PaginationLink.displayName = "PaginationLink";
+function PaginationPrevious({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2.5", className), ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "hidden sm:block", children: "Previous" })] }));
+}
+PaginationPrevious.displayName = "PaginationPrevious";
+function PaginationNext({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2.5", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: "Next" }), _jsx(ChevronRightIcon, {})] }));
+}
+PaginationNext.displayName = "PaginationNext";
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+PaginationEllipsis.displayName = "PaginationEllipsis";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/components/atoms/navigation/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/navigation/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/navigation/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/atoms/navigation/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

package/dist/components/atoms/navigation/tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tabs Component - Flowtomic UI
+ *
+ * Componente de abas baseado em Radix UI com animações naturais
+ */
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/atoms/navigation/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/navigation/tabs/tabs.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAyFZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKA0Cf,CAAC;AAGH,QAAA,MAAM,WAAW,0JA8Cf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/atoms/navigation/tabs/tabs.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tabs Component - Flowtomic UI
+ *
+ * Componente de abas baseado em Radix UI com animações naturais
+ */
+import { useAnimatedIndicator } from "@flowtomic/logic";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const TabsContext = React.createContext(undefined);
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => {
+    const listRef = React.useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const { indicatorStyle, registerElement, unregisterElement, activeValue } = useAnimatedIndicator({
+        containerRef: listRef,
+        activeSelector: '[data-state="active"]',
+        getElementValue: (element) => {
+            // Buscar o valor do atributo data-value ou do value do botão
+            return element.getAttribute("data-value") || element.getAttribute("value") || "";
+        },
+    });
+    const registerTrigger = React.useCallback((element, value) => {
+        registerElement(element, value);
+    }, [registerElement]);
+    const unregisterTrigger = React.useCallback((value) => {
+        unregisterElement(value);
+    }, [unregisterElement]);
+    const contextValue = React.useMemo(() => ({
+        registerTrigger,
+        unregisterTrigger,
+        activeValue,
+    }), [registerTrigger, unregisterTrigger, activeValue]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(TabsPrimitive.List, { ref: (node) => {
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+                listRef.current = node;
+            }, className: cn("relative inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props, children: [props.children, _jsx(motion.div, { className: "absolute rounded-md bg-background shadow-sm", initial: false, animate: shouldReduceMotion
+                        ? {
+                            opacity: indicatorStyle.opacity,
+                        }
+                        : {
+                            x: indicatorStyle.left,
+                            y: indicatorStyle.top,
+                            width: indicatorStyle.width,
+                            height: indicatorStyle.height,
+                            opacity: indicatorStyle.opacity,
+                        }, transition: {
+                        type: "spring",
+                        stiffness: 380,
+                        damping: 30,
+                        mass: 0.5,
+                    }, style: {
+                        pointerEvents: "none",
+                        zIndex: 0,
+                        left: 0,
+                        top: 0,
+                    } })] }) }));
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    const triggerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (context && value) {
+            context.registerTrigger(triggerRef.current, value);
+            return () => {
+                context.unregisterTrigger(value);
+            };
+        }
+    }, [context, value]);
+    return (_jsx(TabsPrimitive.Trigger, { ref: (node) => {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            triggerRef.current = node;
+            if (context && value && node) {
+                // Adicionar data-value para o hook conseguir identificar
+                node.setAttribute("data-value", value);
+                context.registerTrigger(node, value);
+            }
+        }, value: value, "data-value": value, className: cn("relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground", className), ...props, children: _jsx("span", { className: "relative z-10", children: props.children }) }));
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    return (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props, asChild: true, children: _jsx(motion.div, { initial: shouldReduceMotion
+                ? false
+                : {
+                    opacity: 0,
+                    y: 8,
+                }, animate: shouldReduceMotion
+                ? false
+                : {
+                    opacity: 1,
+                    y: 0,
+                }, transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 30,
+                mass: 0.5,
+            }, children: props.children }, value) }));
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/molecules/animation/animated-modal/animated-modal.d.ts

@@ -0,0 +1,57 @@
+/**
+ * AnimatedModal Component - Flowtomic UI
+ *
+ * Modal animado com perspectiva 3D e backdrop blur
+ * Usa Framer Motion (via motion/react) para animações suaves
+ * Componente Molecule que combina múltiplos atoms para criar experiência de modal premium
+ */
+import * as React from "react";
+export interface ModalProps {
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface ModalTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+}
+export interface ModalBodyProps {
+    children: React.ReactNode;
+    className?: string;
+    closeOnOutsideClick?: boolean;
+    showCloseButton?: boolean;
+}
+export interface ModalContentProps {
+    children: React.ReactNode;
+    className?: string;
+    maxHeight?: string;
+}
+export interface ModalFooterProps {
+    children: React.ReactNode;
+    className?: string;
+    align?: "left" | "center" | "right";
+}
+/**
+ * Modal - Container principal do modal
+ */
+declare function Modal({ children, defaultOpen, open: controlledOpen, onOpenChange }: ModalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ModalTrigger - Botão que abre o modal
+ */
+declare const ModalTrigger: React.ForwardRefExoticComponent<ModalTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * ModalBody - Container do modal com backdrop e animações
+ */
+declare function ModalBody({ children, className, closeOnOutsideClick, showCloseButton, }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ModalContent - Conteúdo principal do modal
+ */
+declare function ModalContent({ children, className, maxHeight }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ModalFooter - Rodapé do modal para ações
+ */
+declare function ModalFooter({ children, className, align }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+export { Modal, ModalTrigger, ModalBody, ModalContent, ModalFooter };
+//# sourceMappingURL=animated-modal.d.ts.map

package/dist/components/molecules/animation/animated-modal/animated-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/animation/animated-modal/animated-modal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAMD;;GAEG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,WAAmB,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,UAAU,2CAyC/F;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,6FA6BjB,CAAC;AAGF;;GAEG;AACH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,SAAS,EACT,mBAA0B,EAC1B,eAAsB,GACvB,EAAE,cAAc,2CA6ChB;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAkB,EAAE,EAAE,iBAAiB,2CAanF;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAe,EAAE,EAAE,gBAAgB,2CAY9E;AAqCD,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/molecules/animation/animated-modal/animated-modal.js

@@ -0,0 +1,136 @@
+/**
+ * AnimatedModal Component - Flowtomic UI
+ *
+ * Modal animado com perspectiva 3D e backdrop blur
+ * Usa Framer Motion (via motion/react) para animações suaves
+ * Componente Molecule que combina múltiplos atoms para criar experiência de modal premium
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const ModalContext = React.createContext(undefined);
+function useModal() {
+    const context = React.useContext(ModalContext);
+    if (!context) {
+        throw new Error("Modal components must be used within a Modal");
+    }
+    return context;
+}
+// ============================================================================
+// Components
+// ============================================================================
+/**
+ * Modal - Container principal do modal
+ */
+function Modal({ children, defaultOpen = false, open: controlledOpen, onOpenChange }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const setOpen = React.useCallback((value) => {
+        if (!isControlled) {
+            setUncontrolledOpen(value);
+        }
+        onOpenChange?.(value);
+    }, [isControlled, onOpenChange]);
+    // Lock body scroll when modal is open
+    React.useEffect(() => {
+        if (open) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [open]);
+    // Handle Escape key
+    React.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape" && open) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [open, setOpen]);
+    return _jsx(ModalContext.Provider, { value: { open, setOpen }, children: children });
+}
+/**
+ * ModalTrigger - Botão que abre o modal
+ */
+const ModalTrigger = React.forwardRef(({ children, className, asChild, ...props }, ref) => {
+    const { setOpen } = useModal();
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            ...props,
+            ref,
+            onClick: (e) => {
+                if (props.onClick) {
+                    props.onClick(e);
+                }
+                setOpen(true);
+            },
+        });
+    }
+    return (_jsx("button", { ref: ref, type: "button", className: cn(className), onClick: () => setOpen(true), ...props, children: children }));
+});
+ModalTrigger.displayName = "ModalTrigger";
+/**
+ * ModalBody - Container do modal com backdrop e animações
+ */
+function ModalBody({ children, className, closeOnOutsideClick = true, showCloseButton = true, }) {
+    const { open, setOpen } = useModal();
+    const handleBackdropClick = (e) => {
+        if (closeOnOutsideClick && e.target === e.currentTarget) {
+            setOpen(false);
+        }
+    };
+    return (_jsx(AnimatePresence, { children: open && (_jsxs(_Fragment, { children: [_jsx(ModalOverlay, {}), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", className), onClick: handleBackdropClick, children: _jsxs(motion.div, { initial: { opacity: 0, scale: 0.9, rotateX: 15 }, animate: { opacity: 1, scale: 1, rotateX: 0 }, exit: { opacity: 0, scale: 0.9, rotateX: 15 }, transition: {
+                            type: "spring",
+                            stiffness: 300,
+                            damping: 30,
+                        }, style: {
+                            perspective: "1000px",
+                            transformStyle: "preserve-3d",
+                        }, className: "relative w-full max-w-lg", onClick: (e) => e.stopPropagation(), children: [showCloseButton && _jsx(CloseIcon, {}), children] }) })] })) }));
+}
+/**
+ * ModalContent - Conteúdo principal do modal
+ */
+function ModalContent({ children, className, maxHeight = "80vh" }) {
+    return (_jsx("div", { className: cn("relative w-full rounded-lg border bg-background p-6 shadow-lg", "overflow-y-auto", className), style: { maxHeight }, children: children }));
+}
+/**
+ * ModalFooter - Rodapé do modal para ações
+ */
+function ModalFooter({ children, className, align = "right" }) {
+    const alignClasses = {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end",
+    };
+    return (_jsx("div", { className: cn("flex items-center gap-2 mt-6", alignClasses[align], className), children: children }));
+}
+/**
+ * ModalOverlay - Overlay com backdrop blur
+ */
+function ModalOverlay({ className }) {
+    return (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1, backdropFilter: "blur(10px)" }, exit: { opacity: 0, backdropFilter: "blur(0px)" }, className: cn("fixed inset-0 h-full w-full bg-black/50 z-40", className) }));
+}
+/**
+ * CloseIcon - Botão de fechar
+ */
+function CloseIcon() {
+    const { setOpen } = useModal();
+    return (_jsx("button", { type: "button", onClick: () => setOpen(false), className: "absolute top-4 right-4 group z-50", "aria-label": "Fechar modal", children: _jsx(X, { className: "h-4 w-4 text-foreground group-hover:scale-125 group-hover:rotate-3 transition duration-200" }) }));
+}
+// ============================================================================
+// Exports
+// ============================================================================
+export { Modal, ModalTrigger, ModalBody, ModalContent, ModalFooter };

package/dist/components/molecules/animation/animated-modal/index.d.ts

@@ -0,0 +1,3 @@
+export type { ModalBodyProps, ModalContentProps, ModalFooterProps, ModalProps, ModalTriggerProps, } from "./animated-modal";
+export { Modal, ModalBody, ModalContent, ModalFooter, ModalTrigger, } from "./animated-modal";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/animation/animated-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/animation/animated-modal/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,GACb,MAAM,kBAAkB,CAAC"}

package/dist/components/molecules/animation/animated-modal/index.js

@@ -0,0 +1 @@
+export { Modal, ModalBody, ModalContent, ModalFooter, ModalTrigger, } from "./animated-modal";

package/dist/components/molecules/animation/animated-sliding-number/animated-sliding-number.d.ts

@@ -0,0 +1,41 @@
+/**
+ * AnimatedSlidingNumber Component - Flowtomic UI
+ *
+ * Componente de tipografia para exibir números com animação de deslizamento
+ * Encapsula SlidingNumber com estilos e props específicos para uso em textos
+ */
+import { type SlidingNumberProps } from "@/components/atoms/animation/sliding-number/sliding-number";
+export interface AnimatedSlidingNumberProps extends Omit<SlidingNumberProps, "number" | "className"> {
+    /**
+     * Valor numérico a ser exibido
+     */
+    value: number | string;
+    /**
+     * Classes CSS adicionais para o container
+     */
+    className?: string;
+    /**
+     * Tamanho do texto (usa classes Tailwind de tipografia)
+     */
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /**
+     * Peso da fonte
+     */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    /**
+     * Cor do texto (usa variáveis do design system)
+     * Use "inherit" para herdar a cor do contexto pai
+     */
+    color?: "default" | "primary" | "secondary" | "muted" | "success" | "warning" | "error" | "inherit";
+    /**
+     * Alinhamento do texto
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Props customizadas para o SlidingNumber interno
+     */
+    slidingNumberProps?: Omit<SlidingNumberProps, "number">;
+}
+declare function AnimatedSlidingNumber({ value, className, size, weight, color, align, slidingNumberProps, ...props }: AnimatedSlidingNumberProps): import("react/jsx-runtime").JSX.Element;
+export { AnimatedSlidingNumber };
+//# sourceMappingURL=animated-sliding-number.d.ts.map

package/dist/components/molecules/animation/animated-sliding-number/animated-sliding-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-sliding-number.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/animation/animated-sliding-number/animated-sliding-number.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,4DAA4D,CAAC;AAGpE,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,WAAW,CAAC;IACxD;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAClE;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D;;;OAGG;IACH,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;CACzD;AAiDD,iBAAS,qBAAqB,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,IAAa,EACb,MAAiB,EACjB,KAAiB,EACjB,KAAc,EACd,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAiC5B;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/molecules/animation/animated-sliding-number/animated-sliding-number.js

@@ -0,0 +1,67 @@
+/**
+ * AnimatedSlidingNumber Component - Flowtomic UI
+ *
+ * Componente de tipografia para exibir números com animação de deslizamento
+ * Encapsula SlidingNumber com estilos e props específicos para uso em textos
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SlidingNumber, } from "@/components/atoms/animation/sliding-number/sliding-number";
+import { cn } from "@/lib/utils";
+const sizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+};
+const weightClasses = {
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+};
+const colorClasses = {
+    default: "text-foreground",
+    primary: "text-primary",
+    secondary: "text-secondary-foreground",
+    muted: "text-muted-foreground",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-destructive",
+};
+// Mapeamento de cores para variáveis CSS
+const colorCSSVars = {
+    default: "hsl(var(--foreground))",
+    primary: "hsl(var(--primary))",
+    secondary: "hsl(var(--secondary-foreground))",
+    muted: "hsl(var(--muted-foreground))",
+    success: "hsl(var(--success))",
+    warning: "hsl(var(--warning))",
+    error: "hsl(var(--destructive))",
+    inherit: "inherit",
+};
+const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+function AnimatedSlidingNumber({ value, className, size = "base", weight = "normal", color = "default", align = "left", slidingNumberProps, ...props }) {
+    const isInherit = color === "inherit";
+    const textColor = isInherit ? "inherit" : colorCSSVars[color];
+    const containerClasses = cn(
+    // Aplica classe de cor apenas se não for inherit
+    !isInherit && colorClasses[color], 
+    // Força herança de cor em todos os elementos filhos
+    "[&_*]:!text-inherit", "[&_span]:!text-inherit");
+    const textClasses = cn(sizeClasses[size], weightClasses[weight], alignClasses[align], "tabular-nums", className);
+    return (_jsx("span", { className: containerClasses, style: {
+            color: textColor,
+            "--animated-number-color": textColor,
+        }, children: _jsx(SlidingNumber, { number: value, className: textClasses, ...slidingNumberProps, ...props }) }));
+}
+export { AnimatedSlidingNumber };

package/dist/components/molecules/animation/animated-sliding-number/index.d.ts

@@ -0,0 +1,3 @@
+export type { AnimatedSlidingNumberProps } from "./animated-sliding-number";
+export { AnimatedSlidingNumber } from "./animated-sliding-number";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/animation/animated-sliding-number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/animation/animated-sliding-number/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/molecules/animation/animated-sliding-number/index.js

@@ -0,0 +1 @@
+export { AnimatedSlidingNumber } from "./animated-sliding-number";