{"_id":"@brennoleon/dinamic-top-bar","name":"@brennoleon/dinamic-top-bar","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@brennoleon/dinamic-top-bar","version":"1.1.0","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","sideEffects":false,"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts --clean","lint":"tsc -p tsconfig.json --noEmit"},"peerDependencies":{"next":">=13","react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"_id":"@brennoleon/dinamic-top-bar@1.1.0","gitHead":"0a9f2515fe16146e6af8d1b8ec82139df9e526e4","description":"A stack-based and fully dynamic Top Bar state manager for **React 18+** and **Next.js App Router**.\r Built to handle complex UI flows with predictable state restoration, while staying lightweight and SSR-safe.","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lwGYuOJ7IQ9gGaXXdlou/q2H0GkA+Jmv4dwvK1lTsFgcGeNodU7ZExCd/BOKjUEYXN+LdM2xnYfHRT+icrTJYA==","shasum":"3b2b4c5a6928a76b2e2402623351ceb7570210b9","tarball":"https://registry.npmjs.org/@brennoleon/dinamic-top-bar/-/dinamic-top-bar-1.1.0.tgz","fileCount":11,"unpackedSize":16898,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCRAD91mXk6TsWnXkOTLgdKhP/Il2Mhnb6szb7A0o734gIgJ+tH2h/A9AmOJ6VgYktOSdlRNbZPY3qHijGTmb2U1lo="}]},"_npmUser":{"name":"brennoleon","email":"brennoleongomes@gmail.com"},"directories":{},"maintainers":[{"name":"brennoleon","email":"brennoleongomes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dinamic-top-bar_1.1.0_1769805737826_0.7411525498155098"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-30T20:42:17.741Z","1.1.0":"2026-01-30T20:42:17.950Z","modified":"2026-01-30T20:42:18.154Z"},"maintainers":[{"name":"brennoleon","email":"brennoleongomes@gmail.com"}],"description":"A stack-based and fully dynamic Top Bar state manager for **React 18+** and **Next.js App Router**.\r Built to handle complex UI flows with predictable state restoration, while staying lightweight and SSR-safe.","readme":"# Dinamic Top Bar\r\n\r\nA stack-based and fully dynamic Top Bar state manager for **React 18+** and **Next.js App Router**.\r\nBuilt to handle complex UI flows with predictable state restoration, while staying lightweight and SSR-safe.\r\n\r\n---\r\n\r\n## Features\r\n\r\n* 🚀 Stack-based state management (`push` / `pop`)\r\n* ⚡ Zero-config default UI with `TopBarDefault`\r\n* 🎨 Fully customizable (layout, buttons, blur, sticky, styles)\r\n* ⚛️ React 18+ and Next.js App Router ready\r\n* 🌐 SSR safe\r\n* 📦 Lightweight, no Redux or Zustand\r\n\r\n---\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install dinamic-top-bar\r\n```\r\n\r\nRecommended:\r\n\r\n```bash\r\npnpm add dinamic-top-bar\r\n```\r\n\r\n---\r\n\r\n## Usage\r\n\r\n### 1. Wrap your application\r\n\r\nWrap your root layout with `TopBarProvider`.\r\nYou can also include the default renderer `TopBarDefault`.\r\n\r\n```tsx\r\n// app/layout.tsx\r\nimport { TopBarProvider, TopBarDefault } from \"dinamic-top-bar\"\r\n\r\nexport default function RootLayout({ children }) {\r\n  return (\r\n    <html lang=\"en\">\r\n      <body>\r\n        <TopBarProvider>\r\n          <TopBarDefault />\r\n          {children}\r\n        </TopBarProvider>\r\n      </body>\r\n    </html>\r\n  )\r\n}\r\n```\r\n\r\n---\r\n\r\n### 2. Control the Top Bar from any page\r\n\r\nUse the `useTopBar` hook to update the Top Bar state.\r\n\r\n```tsx\r\n\"use client\"\r\n\r\nimport { useEffect } from \"react\"\r\nimport { useTopBar } from \"dinamic-top-bar\"\r\n\r\nexport default function HomePage() {\r\n  const { set } = useTopBar()\r\n\r\n  useEffect(() => {\r\n    set({\r\n      visible: true,\r\n      style: {\r\n        background: \"rgba(0,0,0,0.8)\",\r\n        blur: 10\r\n      },\r\n      layout: {\r\n        title: <span>My App</span>,\r\n        rightButtons: [\r\n          {\r\n            id: \"login\",\r\n            content: \"Login\",\r\n            onClick: () => console.log(\"Login\")\r\n          }\r\n        ]\r\n      }\r\n    })\r\n  }, [])\r\n\r\n  return <div>My Page Content</div>\r\n}\r\n```\r\n\r\n---\r\n\r\n### 3. Stack-based behavior (Push / Pop)\r\n\r\nIdeal for modals, flows, or temporary views.\r\nWhen the component unmounts, the previous Top Bar state is automatically restored.\r\n\r\n```tsx\r\nimport { useTopBarStack } from \"dinamic-top-bar\"\r\n\r\nexport default function ModalPage() {\r\n  useTopBarStack({\r\n    style: { background: \"red\" },\r\n    layout: { title: \"Danger Zone\" }\r\n  })\r\n\r\n  return <div>Modal Content</div>\r\n}\r\n```\r\n\r\n---\r\n\r\n## API\r\n\r\n### TopBarStyle\r\n\r\n|           Property | Type          | Description                     |\r\n| -----------------: | ------------- | ------------------------------- |\r\n|             height | number        | Height in pixels                |\r\n|           paddingX | number        | Horizontal padding              |\r\n|                gap | number        | Vertical gap between rows       |\r\n|         background | string        | CSS background                  |\r\n|         foreground | string        | Text color                      |\r\n|             border | string        | CSS border                      |\r\n|             radius | number        | Border radius                   |\r\n|             shadow | string        | CSS box-shadow                  |\r\n|               blur | number        | Backdrop blur amount            |\r\n|            opacity | number        | Opacity value                   |\r\n|             sticky | boolean       | Uses `position: sticky`         |\r\n|             zIndex | number        | Z-index                         |\r\n|   backdropSaturate | number        | Backdrop saturate factor        |\r\n| backdropBrightness | number        | Backdrop brightness factor      |\r\n|        transitions | boolean       | Enables transitions             |\r\n|          className | string        | ClassName applied to `<header>` |\r\n|              style | CSSProperties | Extra inline styles             |\r\n\r\n### TopBarLayout\r\n\r\n| Field                      | Type      | Description                 |\r\n| -------------------------- | --------- | --------------------------- |\r\n| left / center / right      | ReactNode | Main layout slots           |\r\n| title / subtitle           | ReactNode | Center title elements       |\r\n| beforeTitle / afterTitle   | ReactNode | Extra nodes around title    |\r\n| leftButtons / rightButtons | Array     | Button configs              |\r\n| floating                   | ReactNode | Absolute positioned content |\r\n| below                      | ReactNode | Content below main row      |\r\n\r\n### TopBarButton\r\n\r\n| Field                | Type          | Description         |\r\n| -------------------- | ------------- | ------------------- |\r\n| id                   | string        | Unique button id    |\r\n| onClick              | () => void    | Click handler       |\r\n| disabled             | boolean       | Disabled state      |\r\n| ariaLabel            | string        | Accessibility label |\r\n| content              | ReactNode     | Main content        |\r\n| leftIcon / rightIcon | ReactNode     | Optional icons      |\r\n| style                | CSSProperties | Inline style        |\r\n| className            | string        | ClassName           |\r\n\r\n---\r\n\r\n## License\r\n\r\n```text\r\nMIT\r\n```\r\n\r\n---\r\n\r\nFeito com s2 por Brenno Leon\r\n","readmeFilename":"README.md","_rev":"1-6894eea423a4ef2c5accac24c7930585"}