npm - @byteflow-ui/navigation-menu - Versions diffs - 1.0.0 - Mend

@byteflow-ui/navigation-menu 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,53 @@
+# @byteflow-ui/navigation-menu
+Componente Navigation Menu premium para Byteflow UI. Ideal para la navegación principal de sitios web corporativos, documentaciones o aplicaciones con estructuras jerárquicas complejas.
+## Instalación
+```bash
+npm install @byteflow-ui/navigation-menu
+```
+## Uso
+```tsx
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink
+} from '@byteflow-ui/navigation-menu';
+import '@byteflow-ui/navigation-menu/dist/index.css';
+function Navbar() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Productos</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <div style={{ display: 'grid', gap: '10px' }}>
+            <NavigationMenuLink href="/cloud">Byteflow Cloud</NavigationMenuLink>
+            <NavigationMenuLink href="/ui">Byteflow UI Pro</NavigationMenuLink>
+          </div>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink href="/docs">Documentación</NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenu>
+  );
+}
+```
+## Propiedades
+El componente utiliza composición para mayor flexibilidad. Soporta estados de hover automáticos para desplegar el contenido.
+| Componente | Descripción |
+| --- | --- |
+| `NavigationMenu` | Contenedor principal del menú. |
+| `NavigationMenuItem` | Ítem individual (li) dentro de la lista. |
+| `NavigationMenuTrigger` | Botón que activa la visibilidad del contenido al hacer hover. |
+| `NavigationMenuContent` | Contenedor desplegable para submenús o contenido complejo. |
+| `NavigationMenuLink` | Enlace estándar estilizado para el menú. |

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var c=(a,e)=>{for(var t in e)r(a,t,{get:e[t],enumerable:!0})},l=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!f.call(a,i)&&i!==t&&r(a,i,{get:()=>e[i],enumerable:!(o=s(e,i))||o.enumerable});return a};var m=a=>l(r({},"__esModule",{value:!0}),a);var h={};c(h,{NavigationMenu:()=>v,NavigationMenuContent:()=>b,NavigationMenuItem:()=>u,NavigationMenuLink:()=>p,NavigationMenuTrigger:()=>d});module.exports=m(h);var n=require("react/jsx-runtime"),v=({children:a,className:e=""})=>(0,n.jsx)("nav",{className:`bf-navigation-menu ${e}`,children:(0,n.jsx)("ul",{className:"bf-navigation-menu-list",children:a})}),u=({children:a,className:e=""})=>(0,n.jsx)("li",{className:`bf-navigation-menu-item ${e}`,children:a}),d=({children:a,className:e=""})=>(0,n.jsxs)("button",{className:`bf-navigation-menu-trigger ${e}`,children:[a,(0,n.jsx)("svg",{className:"bf-navigation-menu-chevron",width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64057 5.94637 3.84203 6.13523L7.5 9.56464L11.158 6.13523C11.3594 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67597 11.842 6.86484L7.84199 10.6148C7.64491 10.7996 7.35509 10.7996 7.15801 10.6148L3.15801 6.86484C2.95655 6.67597 2.94635 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})]}),b=({children:a,className:e=""})=>(0,n.jsx)("div",{className:`bf-navigation-menu-content ${e}`,children:a}),p=({children:a,href:e="#",className:t=""})=>(0,n.jsx)("a",{href:e,className:`bf-navigation-menu-link ${t}`,children:a});0&&(module.exports={NavigationMenu,NavigationMenuContent,NavigationMenuItem,NavigationMenuLink,NavigationMenuTrigger});

package/dist/index.css ADDED Viewed

@@ -0,0 +1 @@

+ .bf-navigation-menu{display:flex;align-items:center;justify-content:center;width:100%;z-index:10}.bf-navigation-menu-list{display:flex;list-style:none;padding:0;margin:0;gap:.5rem}.bf-navigation-menu-item{position:relative}.bf-navigation-menu-trigger,.bf-navigation-menu-link{display:flex;align-items:center;gap:4px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--bf-text-primary, #1a202c);border-radius:6px;background:transparent;border:none;cursor:pointer;text-decoration:none;transition:background .2s ease}.bf-navigation-menu-trigger:hover,.bf-navigation-menu-link:hover{background:var(--bf-surface-hover, #f7fafc)}.bf-navigation-menu-chevron{transition:transform .2s ease;flex-shrink:0;opacity:.5}.bf-navigation-menu-item:hover .bf-navigation-menu-chevron{transform:rotate(180deg)}.bf-navigation-menu-content{position:absolute;top:100%;left:0;margin-top:.5rem;min-width:200px;background:var(--bf-surface, #ffffff);border:1px solid var(--bf-surface-border, #e2e8f0);border-radius:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:1rem;display:none;z-index:100;animation:bf-nav-fade-in .2s ease-out}.bf-navigation-menu-item:hover .bf-navigation-menu-content{display:block}@keyframes bf-nav-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:global(.dark-theme) .bf-navigation-menu-trigger,:global(.dark-theme) .bf-navigation-menu-link{color:var(--bf-text-primary, #f7fafc)}:global(.dark-theme) .bf-navigation-menu-trigger:hover,:global(.dark-theme) .bf-navigation-menu-link:hover{background:var(--bf-surface-hover, #2d3748)}:global(.dark-theme) .bf-navigation-menu-content{background:var(--bf-surface, #1a202c);border-color:var(--bf-surface-border, #2d3748)}

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+interface NavigationMenuProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenu: React.FC<NavigationMenuProps>;
+interface NavigationMenuItemProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuItem: React.FC<NavigationMenuItemProps>;
+interface NavigationMenuTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuTrigger: React.FC<NavigationMenuTriggerProps>;
+interface NavigationMenuContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuContent: React.FC<NavigationMenuContentProps>;
+declare const NavigationMenuLink: React.FC<{
+    children: React.ReactNode;
+    href?: string;
+    className?: string;
+}>;
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+interface NavigationMenuProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenu: React.FC<NavigationMenuProps>;
+interface NavigationMenuItemProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuItem: React.FC<NavigationMenuItemProps>;
+interface NavigationMenuTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuTrigger: React.FC<NavigationMenuTriggerProps>;
+interface NavigationMenuContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const NavigationMenuContent: React.FC<NavigationMenuContentProps>;
+declare const NavigationMenuLink: React.FC<{
+    children: React.ReactNode;
+    href?: string;
+    className?: string;
+}>;
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };

package/dist/index.js ADDED Viewed

@@ -0,0 +1 @@

+ import{jsx as n,jsxs as i}from"react/jsx-runtime";var g=({children:e,className:a=""})=>n("nav",{className:`bf-navigation-menu ${a}`,children:n("ul",{className:"bf-navigation-menu-list",children:e})}),f=({children:e,className:a=""})=>n("li",{className:`bf-navigation-menu-item ${a}`,children:e}),c=({children:e,className:a=""})=>i("button",{className:`bf-navigation-menu-trigger ${a}`,children:[e,n("svg",{className:"bf-navigation-menu-chevron",width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64057 5.94637 3.84203 6.13523L7.5 9.56464L11.158 6.13523C11.3594 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67597 11.842 6.86484L7.84199 10.6148C7.64491 10.7996 7.35509 10.7996 7.15801 10.6148L3.15801 6.86484C2.95655 6.67597 2.94635 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})]}),l=({children:e,className:a=""})=>n("div",{className:`bf-navigation-menu-content ${a}`,children:e}),m=({children:e,href:a="#",className:t=""})=>n("a",{href:a,className:`bf-navigation-menu-link ${t}`,children:e});export{g as NavigationMenu,l as NavigationMenuContent,f as NavigationMenuItem,m as NavigationMenuLink,c as NavigationMenuTrigger};

package/dist/styles.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/styles.d.cts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+    "name": "@byteflow-ui/navigation-menu",
+    "version": "1.0.0",
+    "description": "Componente Navigation Menu premium para Byteflow UI",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./dist/index.css": "./dist/index.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "lint": "eslint src"
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "tsup": "^8.3.5",
+        "typescript": "^5.6.3",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0"
+    },
+    "author": "Victor Hugo Cornejo Calderon <rex2002xp@gmail.com>",
+    "license": "MIT"
+}