@stfrigerio/sito-template 0.1.29 → 0.1.30

package/dist/components/organisms/Navbar/Navbar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconType } from 'react-icons';
+import { ComponentSoundConfig } from '../../../utils/useSound';
 export interface NavItem {
     id: string;
     label: string;
@@ -23,6 +24,7 @@ export interface NavbarProps {
     isMobile?: boolean;
     footer?: React.ReactNode;
     className?: string;
+    soundConfig?: ComponentSoundConfig;
 }
 export declare const Navbar: React.FC<NavbarProps>;
 //# sourceMappingURL=Navbar.d.ts.map

package/dist/components/organisms/Navbar/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmQxC,CAAC"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,EAAqB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyQxC,CAAC"}

package/dist/components/organisms/Navbar/Navbar.stories.d.ts

@@ -8,8 +8,10 @@ export declare const SidebarWithImage: Story;
 export declare const TopNavigation: Story;
 export declare const MinimalNavigation: Story;
 export declare const MobileBottomNav: Story;
+export declare const MobileWithSounds: Story;
 export declare const ECommerceNav: Story;
 export declare const DashboardNav: Story;
 export declare const WithCustomFooter: Story;
 export declare const InteractiveExample: Story;
+export declare const WithSounds: Story;
 //# sourceMappingURL=Navbar.stories.d.ts.map

package/dist/components/organisms/Navbar/Navbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAe7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA8CnC,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwD1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8F1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}
+{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAe7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA8CnC,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkC7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAsC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwD1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8F1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

package/dist/index.esm.js

@@ -2751,10 +2751,11 @@ var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Nav
 
 var mobileStyles = {"navbar":"Navbar-mobile-module_navbar__-shkE","navLogo":"Navbar-mobile-module_navLogo__7Gnna","navList":"Navbar-mobile-module_navList__FBo8I","navItem":"Navbar-mobile-module_navItem__-9E9-","navLink":"Navbar-mobile-module_navLink__A8n8F","active":"Navbar-mobile-module_active__h3ajz","activeBackground":"Navbar-mobile-module_activeBackground__btXAN","navIcon":"Navbar-mobile-module_navIcon__4L17v","activeIcon":"Navbar-mobile-module_activeIcon__A8GF-","navText":"Navbar-mobile-module_navText__ewf-i","activeText":"Navbar-mobile-module_activeText__fNqcU","navBadge":"Navbar-mobile-module_navBadge__YccGx","chevron":"Navbar-mobile-module_chevron__nBPqn","subNavList":"Navbar-mobile-module_subNavList__8tINc","navFooter":"Navbar-mobile-module_navFooter__yijWu","mobileMenuButton":"Navbar-mobile-module_mobileMenuButton__Dx3t8","mobileBackdrop":"Navbar-mobile-module_mobileBackdrop__biYng","navbarTop":"Navbar-mobile-module_navbarTop__oyfPE","navbarMinimal":"Navbar-mobile-module_navbarMinimal__cudny"};
 
-const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '' }) => {
+const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '', soundConfig }) => {
     const styles = useMemo(() => isMobile ? mobileStyles : desktopStyles, [isMobile]);
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const [expandedItems, setExpandedItems] = useState(new Set());
+    const { handlers, playSound } = useComponentSound(soundConfig);
     // Close mobile menu when screen size changes
     useEffect(() => {
         const handleResize = () => {
@@ -2766,6 +2767,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     const toggleMobileMenu = () => {
+        playSound('toggle');
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
     const toggleExpanded = (itemId) => {
@@ -2781,6 +2783,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         });
     };
     const handleItemClick = (item) => {
+        handlers.onClick?.();
         if (item.children && item.children.length > 0) {
             toggleExpanded(item.id);
         }
@@ -2800,13 +2803,13 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         const Icon = item.icon;
         const isExpanded = expandedItems.has(item.id);
         const hasChildren = item.children && item.children.length > 0;
-        return (jsxs(motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxs(motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsx(motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
+        return (jsxs(motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxs(motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), onMouseEnter: handlers.onMouseEnter, whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsx(motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
                                 type: "spring",
                                 stiffness: 500,
                                 damping: 35
                             } })), Icon && (jsx(Icon, { className: `${styles.navIcon} ${item.isActive ? styles.activeIcon : ''}` })), jsx("span", { className: `${styles.navText} ${item.isActive ? styles.activeText : ''}`, children: item.label }), item.badge && (jsx("span", { className: styles.navBadge, children: item.badge })), hasChildren && (jsx(motion.span, { className: styles.chevron, animate: { rotate: isExpanded ? 180 : 0 }, transition: { duration: 0.2 }, children: "\u25BC" }))] }), hasChildren && (jsx(AnimatePresence, { children: isExpanded && (jsx(motion.ul, { className: styles.subNavList, initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2 }, children: item.children.map((child, childIndex) => renderNavItem(child, childIndex, depth + 1)) })) }))] }, item.id));
     };
-    const navContent = (jsxs(Fragment, { children: [logo && (jsx(motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsx(motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxs("div", { className: styles.logoContent, children: [logo.text && (jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsx(motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
+    const navContent = (jsxs(Fragment, { children: [logo && (jsx(motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsx(motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, onMouseEnter: handlers.onMouseEnter, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxs("div", { className: styles.logoContent, children: [logo.text && (jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsx(motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
     if (variant === 'top') {
         return (jsx(motion.nav, { className: `${styles.navbar} ${styles.navbarTop} ${className}`, initial: { y: -100 }, animate: { y: 0 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent }));
     }