@flowtomic/ui 0.1.2 → 0.1.4

package/dist/components/molecules/navigation/menu-dock/menu-dock.js

@@ -2,12 +2,14 @@
  * MenuDock - Componente Molecule
  *
  * Componente de dock de menu com animação e suporte a múltiplos itens
+ * Suporta duas animações: "default" (underline animado) e "floating" (estilo macOS)
  */
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAnimatedIndicator } from "@flowtomic/logic";
-import { motion, useReducedMotion } from "motion/react";
+import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Menu } from "lucide-react";
 import { cn } from "@/lib/utils";
 const defaultItems = [
     { label: "home", icon: () => null },
@@ -16,7 +18,7 @@ const defaultItems = [
     { label: "security", icon: () => null },
     { label: "settings", icon: () => null },
 ];
-export const MenuDock = ({ items, className, variant = "default", orientation = "horizontal", showLabels = true, animated: _animated = true, defaultActiveIndex = 0, activeIndex: controlledActiveIndex, onActiveIndexChange, }) => {
+export const MenuDock = ({ items, className, variant = "default", orientation = "horizontal", showLabels = true, animated: _animated = true, animationType = "default", defaultActiveIndex = 0, activeIndex: controlledActiveIndex, onActiveIndexChange, desktopClassName, mobileClassName, }) => {
     const finalItems = useMemo(() => {
         const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;
         if (!isValid) {
@@ -25,6 +27,16 @@ export const MenuDock = ({ items, className, variant = "default", orientation =
         }
         return items;
     }, [items]);
+    // Se animationType for "floating", renderizar FloatingDock
+    if (animationType === "floating") {
+        return (_jsx(FloatingDock, { items: finalItems.map((item) => ({
+                title: item.label,
+                icon: _jsx(item.icon, { className: "h-full w-full" }),
+                href: item.href || item.path || "#",
+                onClick: item.onClick,
+            })), desktopClassName: desktopClassName, mobileClassName: mobileClassName, className: className }));
+    }
+    // Animação default (comportamento original)
     const [internalActiveIndex, setInternalActiveIndex] = useState(defaultActiveIndex);
     // Usar índice controlado se fornecido, caso contrário usar estado interno
     const isControlled = controlledActiveIndex !== undefined;
@@ -39,20 +51,38 @@ export const MenuDock = ({ items, className, variant = "default", orientation =
     const shouldReduceMotion = useReducedMotion();
     // Para o underline, precisamos rastrear o texto, não o botão
     const textRefs = useRef([]);
+    const buttonRefs = useRef([]);
     useEffect(() => {
         if (activeIndex >= finalItems.length && !isControlled) {
             setInternalActiveIndex(0);
         }
     }, [finalItems, activeIndex, isControlled]);
     // Usar o hook apenas quando showLabels e horizontal
-    const { indicatorStyle, registerElement } = useAnimatedIndicator({
+    const shouldUseIndicator = showLabels && orientation === "horizontal";
+    const { indicatorStyle, registerElement, unregisterElement } = useAnimatedIndicator({
         containerRef: containerRef,
-        activeSelector: '[data-active="true"]',
+        activeSelector: 'span[data-active="true"]',
+        value: activeIndex.toString(),
         getElementValue: (element) => {
             return element.getAttribute("data-index") || "";
         },
-        updateOnResize: showLabels && orientation === "horizontal",
+        updateOnResize: shouldUseIndicator,
     });
+    // Registrar elementos quando shouldUseIndicator mudar ou items mudarem
+    useEffect(() => {
+        if (shouldUseIndicator) {
+            textRefs.current.forEach((el, index) => {
+                if (el) {
+                    registerElement(el, index.toString());
+                }
+            });
+            return () => {
+                textRefs.current.forEach((_, index) => {
+                    unregisterElement(index.toString());
+                });
+            };
+        }
+    }, [shouldUseIndicator, finalItems.length, registerElement, unregisterElement]);
     const sizeClasses = {
         default: "p-3",
         compact: "p-2",
@@ -66,16 +96,18 @@ export const MenuDock = ({ items, className, variant = "default", orientation =
     return (_jsxs("nav", { ref: containerRef, className: cn("relative flex", orientation === "horizontal" ? "flex-row" : "flex-col", "items-center gap-2", "bg-background border border-border rounded-lg", "p-2", className), "aria-label": "Menu dock", children: [finalItems.map((item, index) => {
                 const Icon = item.icon;
                 const isActive = activeIndex === index;
-                return (_jsxs("button", { type: "button", "data-active": isActive, "data-index": index.toString(), onClick: () => {
+                return (_jsxs("button", { type: "button", ref: (el) => {
+                        buttonRefs.current[index] = el;
+                    }, "data-active": isActive ? "true" : "false", "data-index": index.toString(), onClick: () => {
                         setActiveIndex(index);
                         item.onClick?.();
                     }, className: cn("relative flex items-center gap-2", "px-3 py-2 rounded-md", "transition-all duration-200", "hover:bg-accent hover:text-accent-foreground", isActive && "bg-accent text-accent-foreground", sizeClasses[variant]), "aria-label": item.label, "aria-current": isActive ? "page" : undefined, children: [_jsx(Icon, { className: cn(iconSizes[variant], isActive && "text-primary") }), showLabels && (_jsx("span", { ref: (el) => {
                                 textRefs.current[index] = el;
-                                if (showLabels && orientation === "horizontal" && el) {
+                                if (shouldUseIndicator && el) {
                                     registerElement(el, index.toString());
                                 }
-                            }, "data-active": isActive, "data-index": index.toString(), className: cn("text-sm font-medium", "transition-all duration-200", isActive && "text-primary"), children: item.label }))] }, item.id || `menu-item-${index}`));
-            }), showLabels && orientation === "horizontal" && (_jsx(motion.div, { className: "absolute bottom-0 h-0.5 bg-primary", initial: false, animate: shouldReduceMotion
+                            }, "data-active": isActive, "data-index": index.toString(), className: cn("text-sm font-medium inline-block", "transition-all duration-200", isActive && "text-primary"), children: item.label }))] }, item.id || `menu-item-${index}`));
+            }), shouldUseIndicator && (_jsx(motion.div, { className: "absolute bottom-0 bg-primary", initial: false, animate: shouldReduceMotion
                     ? {
                         opacity: indicatorStyle.opacity,
                     }
@@ -90,8 +122,69 @@ export const MenuDock = ({ items, className, variant = "default", orientation =
                     mass: 0.5,
                 }, style: {
                     pointerEvents: "none",
+                    zIndex: 0,
                     left: 0,
                     bottom: 0,
                     height: "2px",
                 } }))] }));
 };
+/**
+ * FloatingDock - Componente de dock estilo macOS
+ *
+ * Note: Use position fixed according to your needs
+ * Desktop navbar is better positioned at the bottom
+ * Mobile navbar is better positioned at bottom right.
+ */
+const FloatingDock = ({ items, desktopClassName, mobileClassName, className, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(FloatingDockDesktop, { items: items, className: desktopClassName || className }), _jsx(FloatingDockMobile, { items: items, className: mobileClassName || className })] }));
+};
+const FloatingDockMobile = ({ items, className }) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: cn("relative block md:hidden", className), children: [_jsx(AnimatePresence, { children: open && (_jsx(motion.div, { layoutId: "nav", className: "absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2", children: items.map((item, idx) => (_jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: {
+                            opacity: 1,
+                            y: 0,
+                        }, exit: {
+                            opacity: 0,
+                            y: 10,
+                            transition: {
+                                delay: idx * 0.05,
+                            },
+                        }, transition: { delay: (items.length - 1 - idx) * 0.05 }, children: _jsx("a", { href: item.href, onClick: item.onClick, className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 dark:bg-neutral-900", children: _jsx("div", { className: "h-4 w-4", children: item.icon }) }) }, item.title))) })) }), _jsx("button", { onClick: () => setOpen(!open), className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 dark:bg-neutral-800", "aria-label": "Toggle menu", children: _jsx(Menu, { className: "h-5 w-5 text-neutral-500 dark:text-neutral-400" }) })] }));
+};
+const FloatingDockDesktop = ({ items, className }) => {
+    const mouseX = useMotionValue(Infinity);
+    return (_jsx(motion.div, { onMouseMove: (e) => mouseX.set(e.pageX), onMouseLeave: () => mouseX.set(Infinity), className: cn("mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-gray-50 px-4 pb-3 md:flex dark:bg-neutral-900", className), children: items.map((item) => (_jsx(IconContainer, { mouseX: mouseX, ...item }, item.title))) }));
+};
+function IconContainer({ mouseX, title, icon, href, onClick, }) {
+    const ref = useRef(null);
+    const distance = useTransform(mouseX, (val) => {
+        const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+        return val - bounds.x - bounds.width / 2;
+    });
+    const widthTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
+    const heightTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
+    const widthTransformIcon = useTransform(distance, [-150, 0, 150], [20, 40, 20]);
+    const heightTransformIcon = useTransform(distance, [-150, 0, 150], [20, 40, 20]);
+    const width = useSpring(widthTransform, {
+        mass: 0.1,
+        stiffness: 150,
+        damping: 12,
+    });
+    const height = useSpring(heightTransform, {
+        mass: 0.1,
+        stiffness: 150,
+        damping: 12,
+    });
+    const widthIcon = useSpring(widthTransformIcon, {
+        mass: 0.1,
+        stiffness: 150,
+        damping: 12,
+    });
+    const heightIcon = useSpring(heightTransformIcon, {
+        mass: 0.1,
+        stiffness: 150,
+        damping: 12,
+    });
+    const [hovered, setHovered] = useState(false);
+    return (_jsx("a", { href: href, onClick: onClick, children: _jsxs(motion.div, { ref: ref, style: { width, height }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), className: "relative flex aspect-square items-center justify-center rounded-full bg-gray-200 dark:bg-neutral-800", children: [_jsx(AnimatePresence, { children: hovered && (_jsx(motion.div, { initial: { opacity: 0, y: 10, x: "-50%" }, animate: { opacity: 1, y: 0, x: "-50%" }, exit: { opacity: 0, y: 2, x: "-50%" }, className: "absolute -top-8 left-1/2 w-fit rounded-md border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs whitespace-pre text-neutral-700 dark:border-neutral-900 dark:bg-neutral-800 dark:text-white", children: title })) }), _jsx(motion.div, { style: { width: widthIcon, height: heightIcon }, className: "flex items-center justify-center", children: icon })] }) }));
+}

package/dist/components/molecules/typography/index.d.ts

@@ -2,6 +2,4 @@
  * Typography Molecules - Componentes de Tipografia Compostos
  * Atomic Design: Componentes compostos de tipografia
  */
-export type { AnimatedShinyTextProps } from "./animated-shiny-text";
-export { AnimatedShinyText } from "./animated-shiny-text";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/typography/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/typography/index.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/dist/components/molecules/typography/index.js

@@ -1,5 +1,5 @@
+"use strict";
 /**
  * Typography Molecules - Componentes de Tipografia Compostos
  * Atomic Design: Componentes compostos de tipografia
  */
-export { AnimatedShinyText } from "./animated-shiny-text";

package/dist/components/organisms/model-selector/model-selector.d.ts

@@ -30,7 +30,7 @@ export declare const ModelSelectorInput: React.ForwardRefExoticComponent<Omit<Om
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;