{"_id":"@darksnow-ui/nav-sidebar","_rev":"2-bf2a85b9fbaebd56d176d8ea53eb4d4d","name":"@darksnow-ui/nav-sidebar","dist-tags":{"dev":"0.0.1-dev1","latest":"0.0.2"},"versions":{"0.0.1-dev1":{"name":"@darksnow-ui/nav-sidebar","version":"0.0.1-dev1","_id":"@darksnow-ui/nav-sidebar@0.0.1-dev1","maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"dist":{"shasum":"d44b4ec7292c5c4548d0a0beedf3efc8e339388d","tarball":"https://registry.npmjs.org/@darksnow-ui/nav-sidebar/-/nav-sidebar-0.0.1-dev1.tgz","fileCount":8,"integrity":"sha512-Wj2IVoj/ZZ5xCmsK3o0GjrgD2diirJholi+Ks/TjxugXcW0+J9d7TjoNAjThT8nmlCM+UZafYi5TgNbG6TPLrw==","signatures":[{"sig":"MEUCIQCrFs1TiDN6Y5t8OexoUQ+8z5BFLx8tKNs5VQnabjTaEgIgFWakJzd4zfKEzaQUgY/kxPFQSWH3bgVkPeVYKN9ePHE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38048},"main":"./dist/index.js","type":"module","_from":"file:darksnow-ui-nav-sidebar-0.0.1-dev1.tgz","style":"./dist/styles.css","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./css":"./dist/styles.css"},"scripts":{"dev":"concurrently \"pnpm run dev:css\" \"tsup --watch\"","build":"pnpm run build:css && tsup","clean":"rm -rf dist","dev:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch","build:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","typecheck":"tsc --noEmit"},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"_resolved":"/tmp/a1b2ceec0409de879f3f74244716908c/darksnow-ui-nav-sidebar-0.0.1-dev1.tgz","_integrity":"sha512-Wj2IVoj/ZZ5xCmsK3o0GjrgD2diirJholi+Ks/TjxugXcW0+J9d7TjoNAjThT8nmlCM+UZafYi5TgNbG6TPLrw==","_npmVersion":"10.8.2","description":"Collapsible navigation sidebar component for DarkSnow UI","directories":{},"_nodeVersion":"20.17.0","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.1.0","postcss":"^8.5.2","react-dom":"^19.1.0","typescript":"~5.8.3","tailwindcss":"^3.4.0","@types/react":"^19.1.6","autoprefixer":"^10.4.21","concurrently":"^9.2.0","@types/react-dom":"^19.1.6","react-router-dom":"^7.0.2","@radix-ui/react-tooltip":"^1.0.7"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0","@radix-ui/react-tooltip":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nav-sidebar_0.0.1-dev1_1754338176044_0.7084235935354919","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@darksnow-ui/nav-sidebar","version":"0.0.2","description":"Collapsible navigation sidebar component for DarkSnow UI","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/styles.css","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0","@radix-ui/react-tooltip":"^1.0.0"},"devDependencies":{"@radix-ui/react-tooltip":"^1.0.7","@types/react":"^19.1.6","@types/react-dom":"^19.1.6","autoprefixer":"^10.4.21","concurrently":"^9.2.0","postcss":"^8.5.2","react":"^19.1.0","react-dom":"^19.1.0","react-router-dom":"^7.0.2","tailwindcss":"^3.4.0","tsup":"^8.0.0","typescript":"~5.8.3"},"dependencies":{"clsx":"^2.1.1","lucide-react":"^0.263.1"},"scripts":{"build":"pnpm run build:css && tsup","build:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","clean":"rm -rf dist","dev":"concurrently \"pnpm run dev:css\" \"tsup --watch\"","dev:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch","typecheck":"tsc --noEmit"},"_id":"@darksnow-ui/nav-sidebar@0.0.2","_integrity":"sha512-65NC/e91/FujBGNgVVJY7fxa9IILTik4o2QrNWNApllXUGRK7iBKpHvDqyMB5tyvBbPcMNPyPIyt8OOj+hZvrA==","_resolved":"/tmp/2096311ebb5c347cd964a0d9e8e43c63/darksnow-ui-nav-sidebar-0.0.2.tgz","_from":"file:darksnow-ui-nav-sidebar-0.0.2.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-65NC/e91/FujBGNgVVJY7fxa9IILTik4o2QrNWNApllXUGRK7iBKpHvDqyMB5tyvBbPcMNPyPIyt8OOj+hZvrA==","shasum":"250248c0f9177aa2d266a535cf2a9554f3ba3018","tarball":"https://registry.npmjs.org/@darksnow-ui/nav-sidebar/-/nav-sidebar-0.0.2.tgz","fileCount":8,"unpackedSize":38393,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEMaXkRJMHwVOPq49y23bXlnqC2oG31thu5k5mNQPGO+AiAtLH0LbFrHFaYY/FSjR+6gVqKcw44krvD7ytHyVqCtuw=="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nav-sidebar_0.0.2_1754595152148_0.9317014212767709"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-04T20:09:35.928Z","modified":"2025-08-07T19:32:32.576Z","0.0.1-dev1":"2025-08-04T20:09:36.218Z","0.0.2":"2025-08-07T19:32:32.344Z"},"description":"Collapsible navigation sidebar component for DarkSnow UI","maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"readme":"# Sidebar Component\n\nComponente de sidebar híbrido profissional com suporte para collapsed/expanded, submenus expansíveis, badges tipados e tooltips.\n\n## Recursos\n\n- 🎯 **Estados collapsed/expanded** com transições suaves\n- 📁 **Submenus expansíveis** com animação e caret rotativo\n- 🏷️ **Sistema de badges** com 4 tipos (info, success, warning, danger)\n- 💬 **Tooltips inteligentes** no modo collapsed\n- 🎨 **Totalmente customizável** via classes CSS\n- 🌓 **Suporte completo para dark mode**\n- ♿ **Acessível** com suporte a teclado\n- 🚀 **Performance otimizada** com lazy rendering\n\n## Instalação\n\nO componente já usa dependências instaladas no projeto:\n\n- `@radix-ui/react-tooltip`\n- `react-router-dom`\n- `clsx`\n\n## Uso Básico\n\n```tsx\nimport { Sidebar } from \"@/components/sidebar\";\nimport { Home, Users, Settings, Menu, X } from \"lucide-react\";\n\nconst iconMap = {\n  home: Home,\n  users: Users,\n  settings: Settings,\n  menu: Menu,\n  \"menu-open\": X,\n};\n\nconst menuItems = [\n  {\n    id: \"home\",\n    label: \"Home\",\n    icon: \"home\",\n    href: \"/\",\n  },\n  {\n    id: \"users\",\n    label: \"Usuários\",\n    icon: \"users\",\n    href: \"/users\",\n    badge: 5,\n    badgeType: \"info\", // info | success | warning | danger\n  },\n  {\n    id: \"reports\",\n    label: \"Relatórios\",\n    icon: \"reports\",\n    badge: \"!\",\n    badgeType: \"warning\",\n    children: [\n      {\n        id: \"reports-sales\",\n        label: \"Vendas\",\n        icon: \"chart\",\n        href: \"/reports/sales\",\n      },\n      {\n        id: \"reports-analytics\",\n        label: \"Analytics\",\n        icon: \"analytics\",\n        href: \"/reports/analytics\",\n        badge: \"New\",\n        badgeType: \"success\",\n      },\n    ],\n  },\n];\n\nfunction App() {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Sidebar\n      items={menuItems}\n      collapsed={collapsed}\n      onCollapsedChange={setCollapsed}\n      resolveIcon={(name) => iconMap[name as keyof typeof iconMap]}\n      hamburger={{\n        enabled: true,\n        icon: \"menu\",\n        expandedIcon: \"menu-open\",\n        label: \"Menu Principal\",\n      }}\n    />\n  );\n}\n```\n\n## Props\n\n### SidebarProps\n\n| Prop                | Tipo                                    | Descrição                          |\n| ------------------- | --------------------------------------- | ---------------------------------- |\n| `items`             | `MenuItem[]`                            | Lista de items do menu             |\n| `collapsed`         | `boolean?`                              | Estado collapsed (controlado)      |\n| `onCollapsedChange` | `(collapsed: boolean) => void?`         | Callback para mudança de estado    |\n| `resolveIcon`       | `(name: string) => React.ComponentType` | Função para resolver ícones        |\n| `hamburger`         | `HamburgerConfig?`                      | Configuração do botão hamburger    |\n| `className`         | `string?`                               | Classes para o container principal |\n| `classNames`        | `ClassNames?`                           | Classes para elementos internos    |\n\n### MenuItem\n\n```typescript\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: string;\n  href?: string;\n  action?: () => void;\n  children?: MenuItem[];\n  disabled?: boolean;\n  badge?: string | number;\n  badgeType?: \"danger\" | \"info\" | \"success\" | \"warning\";\n}\n```\n\n### HamburgerConfig\n\n```typescript\ninterface HamburgerConfig {\n  enabled: boolean;\n  icon?: string; // default: \"menu\"\n  expandedIcon?: string; // default: \"menu-open\"\n  label?: string; // default: \"Menu\"\n}\n```\n\n### ClassNames\n\n```typescript\ninterface ClassNames {\n  root?: string; // Container principal\n  nav?: string; // Elemento nav\n  item?: string; // Item do menu\n  itemActive?: string; // Item ativo\n  itemDisabled?: string; // Item desabilitado\n  icon?: string; // Container do ícone\n  label?: string; // Label do item\n  badge?: string; // Badge\n  hamburger?: string; // Botão hamburger\n  submenu?: string; // Dropdown submenu\n}\n```\n\n## Comportamentos\n\n### Modo Collapsed (60px largura)\n\n- Items sem children: mostram tooltip ao hover\n- Items com children e href: mostram dropdown flutuante ao hover\n- Items com children sem href: ao clicar, expandem o sidebar e abrem o submenu\n- Badges aparecem no canto inferior direito do ícone (máx. 4 caracteres)\n- Largura: 60px\n\n### Modo Expanded (256px largura)\n\n- Items mostram ícone + label + badge (se houver)\n- Items com children mostram caret que rotaciona ao expandir\n- Submenus aparecem com animação slideDown\n- Clicar em item com children toggle o submenu\n- Largura padrão: 256px (w-64)\n\n### Sistema de Badges\n\n- **Tipos disponíveis**: info (azul), success (verde), warning (amarelo), danger (vermelho)\n- **Modo collapsed**: Badge pequeno no canto inferior direito do ícone\n- **Modo expanded**: Badge à direita do label com cores suaves\n- **Suporta**: números e strings (ex: \"999+\", \"New\", \"!\")\n\n### Navegação\n\n- Integrado com React Router\n- Detecta automaticamente item ativo baseado na URL\n- Suporta tanto `href` (Link) quanto `action` (button)\n- Items ativos têm destaque visual\n\n## Exemplos Avançados\n\n### Com Actions e Badges Tipados\n\n```tsx\nconst items = [\n  {\n    id: \"notifications\",\n    label: \"Notificações\",\n    icon: \"bell\",\n    badge: 12,\n    badgeType: \"info\",\n    action: () => openNotifications(),\n  },\n  {\n    id: \"errors\",\n    label: \"Erros\",\n    icon: \"alert\",\n    badge: \"!\",\n    badgeType: \"danger\",\n    href: \"/errors\",\n  },\n  {\n    id: \"updates\",\n    label: \"Atualizações\",\n    icon: \"download\",\n    badge: \"New\",\n    badgeType: \"success\",\n    children: [\n      {\n        id: \"update-system\",\n        label: \"Sistema\",\n        icon: \"settings\",\n        action: () => checkUpdates(),\n      },\n    ],\n  },\n];\n```\n\n### Item Apenas Container (sem href)\n\n```tsx\nconst items = [\n  {\n    id: \"management\",\n    label: \"Gerenciamento\",\n    icon: \"folder\",\n    // Sem href - ao clicar quando collapsed, expande o sidebar\n    children: [\n      {\n        id: \"users\",\n        label: \"Usuários\",\n        icon: \"users\",\n        href: \"/management/users\",\n      },\n      {\n        id: \"roles\",\n        label: \"Perfis\",\n        icon: \"shield\",\n        href: \"/management/roles\",\n      },\n    ],\n  },\n];\n```\n\n### Customização de Estilos\n\n```tsx\n<Sidebar\n  items={items}\n  className=\"shadow-lg\"\n  classNames={{\n    item: \"rounded-lg mx-2\",\n    itemActive: \"bg-blue-500 text-white\",\n    itemActiveIcon: \"text-white\",\n    badge: \"font-bold\",\n    hamburger: \"border-b-2 border-gray-200\",\n    submenu: \"bg-gray-50 rounded-lg\",\n  }}\n/>\n```\n\n### Estado Não Controlado\n\n```tsx\n// Sidebar gerencia próprio estado\n<Sidebar\n  items={items}\n  resolveIcon={resolveIcon}\n  hamburger={{\n    enabled: true,\n    label: \"Menu\",\n  }}\n/>\n```\n\n### Separadores e Organização\n\n```tsx\nconst items = [\n  // Items principais\n  { id: \"home\", label: \"Home\", icon: \"home\", href: \"/\" },\n  { id: \"dashboard\", label: \"Dashboard\", icon: \"chart\", href: \"/dashboard\" },\n\n  // Separador com items de configuração\n  {\n    id: \"bottom-section\",\n    icon: \"\", // Sem ícone\n    label: \"\", // Sem label\n    children: [\n      {\n        id: \"settings\",\n        label: \"Configurações\",\n        icon: \"settings\",\n        href: \"/settings\",\n      },\n      { id: \"help\", label: \"Ajuda\", icon: \"help\", href: \"/help\" },\n    ],\n  },\n];\n```\n","readmeFilename":"README.md"}