{"_id":"@avent-ui/flip-ham-menu","name":"@avent-ui/flip-ham-menu","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@avent-ui/flip-ham-menu","version":"0.0.1","description":"A sleek, animated hamburger menu system built with motion","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles":{"import":"./dist/styles.js","require":"./dist/styles.cjs"},"./styles.css":"./dist/styles.css"},"type":"module","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/AathiEswar/avent-ui.git#main"},"keywords":["button"],"author":{"name":"Aathi Eswar S"},"license":"MIT","bugs":{"url":"https://github.com/AathiEswar/avent-ui/issues"},"homepage":"https://github.com/AathiEswar/avent-ui/blob/main/src/components/FlipHamMenu/README.md","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-node-resolve":"^15.3.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","autoprefixer":"^10.4.20","postcss":"^8.4.49","postcss-cli":"^11.0.0","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.27.2","rollup-plugin-postcss":"^4.0.2","rollup-plugin-typescript2":"^0.36.0","tailwindcss":"^3.4.15","typescript":"^5.6.3"},"dependencies":{"@avent-ui/use-screen-dimensions":"^0.0.1","@avent-ui/utils":"^0.0.2","motion":"^12.19.2"},"_id":"@avent-ui/flip-ham-menu@0.0.1","gitHead":"c9fada4d63181159c55a8b68cf36c4b3de8ca9ab","_nodeVersion":"21.7.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-U93hjTDnGAn+MxIc4Xh9Iu941rYKdhpEZwkRbWaLy2Rt0i9wbRKelxDUOuwIVv4JykBgiDI8FpFRWLhqyz/Daw==","shasum":"3903d33899ce2e42ba4bed55f64b0eb491b12755","tarball":"https://registry.npmjs.org/@avent-ui/flip-ham-menu/-/flip-ham-menu-0.0.1.tgz","fileCount":55,"unpackedSize":591348,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB2imtQyiB81WZWLMSQqRbWxJnzniHlppKd8KcJkUJWHAiAoPNl+ww1hw/RlkKEskDF9LDhKlvbp95QBgFkniMEEig=="}]},"_npmUser":{"name":"aathieswar","email":"aathi28082003@gmail.com","actor":{"name":"aathieswar","email":"aathi28082003@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"aathieswar","email":"aathi28082003@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flip-ham-menu_0.0.1_1751342425258_0.5598384663553433"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-01T04:00:25.160Z","0.0.1":"2025-07-01T04:00:25.501Z","modified":"2025-07-01T04:00:25.784Z"},"maintainers":[{"name":"aathieswar","email":"aathi28082003@gmail.com"}],"description":"A sleek, animated hamburger menu system built with motion","homepage":"https://github.com/AathiEswar/avent-ui/blob/main/src/components/FlipHamMenu/README.md","keywords":["button"],"repository":{"type":"git","url":"git+https://github.com/AathiEswar/avent-ui.git#main"},"author":{"name":"Aathi Eswar S"},"bugs":{"url":"https://github.com/AathiEswar/avent-ui/issues"},"license":"MIT","readme":"## Avent UI - FlipHamMenu \r\n\r\n**FlipHamMenu** is a sleek, animated hamburger menu system. Built with motion and customization in mind, it offers smooth open/close transitions, staggered nav animations, and support for custom buttons and layouts.\r\n\r\n### Installation\r\n\r\n#### 1. Install the Component via npm\r\n\r\n```jsx\r\nnpm install @avent-ui/flip-ham-menu\r\n```\r\n\r\n#### 2. Tailwind CSS Setup\r\n\r\nFlipHamMenu uses Tailwind CSS classes internally, so make sure Tailwind is configured in your project. Follow the [official guide](https://tailwindcss.com/docs/installation) if not done already.\r\n\r\nThen add the following to your `tailwind.config.js`:\r\n\r\n```jsx\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\r\n    \"./src/**/*.{js,jsx,ts,tsx}\",\r\n    // make sure it's pointing to the ROOT node_module\r\n    \"./node_modules/flip-ham-menu/dist/**/*.{js,ts,jsx,tsx}\",\r\n  ],\r\n  theme: {\r\n    extend: {},\r\n  },\r\n  plugins: [],\r\n};\r\n```\r\n\r\n### 3. Import Components\r\n\r\n```jsx\r\nimport {\r\n  FlipHamMenu,\r\n  FlipMenuBar,\r\n  FlipHamBarLinks,\r\n  FlipHamButton,\r\n  FlipHamOpenButton,\r\n  FlipHamCloseButton\r\n} from '@avent-ui/flip-ham-menu';\r\n```\r\n\r\n### 4. Usage\r\n\r\n```jsx\r\n<FlipHamMenu enableNavLinkHoverAnim>\r\n  <FlipMenuBar>\r\n    <FlipHamBarLinks label=\"HOME\" href=\"/home\" />\r\n    <FlipHamBarLinks label=\"ABOUT\" href=\"/about\" />\r\n    <FlipHamBarLinks label=\"SERVICES\" href=\"/services\" />\r\n    <FlipHamBarLinks label=\"CONTACT\" href=\"/contact\" />\r\n  </FlipMenuBar>\r\n\r\n  <FlipHamButton>\r\n    <FlipHamOpenButton />\r\n    <FlipHamCloseButton />\r\n  </FlipHamButton>\r\n</FlipHamMenu>\r\n```\r\n\r\n### 🧩 Components\r\n\r\n| Component            | Type      | Description                                                             |\r\n| -------------------- | --------- | ----------------------------------------------------------------------- |\r\n| `FlipHamMenu`        | Container | Root provider. Manages open/close context and enables hover animations. |\r\n| `FlipMenuBar`        | Panel     | Animated menu panel containing links. Supports staggered transitions.   |\r\n| `FlipHamBarLinks`    | Link Item | Menu item with animated entrance and optional hover effects.            |\r\n| `FlipHamButton`      | Wrapper   | Holds open/close buttons. Controls menu toggle behavior.                |\r\n| `FlipHamOpenButton`  | Trigger   | Opens the menu. Can be styled or customized freely.                     |\r\n| `FlipHamCloseButton` | Trigger   | Closes the menu. Accepts label and styling options.                     |\r\n\r\n### ⚙️ Props\r\n\r\n#### `FlipHamMenu`\r\n\r\n| Prop                     | Type      | Description                                   | Default |\r\n| ------------------------ | --------- | --------------------------------------------- | ------- |\r\n| `enableNavLinkHoverAnim` | `boolean` | Enables animated hover effects for nav links. | `false` |\r\n\r\n#### `FlipHamBarLinks`\r\n\r\n| Prop    | Type     | Description                    |\r\n| ------- | -------- | ------------------------------ |\r\n| `label` | `string` | Display text for the link.     |\r\n| `href`  | `string` | Navigation target (URL).       |\r\n| `index` | `number` | Used internally for animation. |\r\n| `hoverClassName` | `string` | class for element after hovering nav link |\r\n| `hoverStyle` | `string` | style for element after hovering nav link |\r\n\r\n#### `FlipHamCloseButton`\r\n\r\n| Prop             | Type     | Description                          | Default  |\r\n| ---------------- | -------- | ------------------------------------ | -------- |\r\n| `closeMenuLabel` | `string` | Optional label for the close button. | `\"MENU\"` |\r\n\r\n#### `FlipHamOpenButton`\r\n\r\n| Prop             | Type     | Description                          | Default  |\r\n| ---------------- | -------- | ------------------------------------ | -------- |\r\n| `openMenuLabel` | `string` | Optional label for the open button. | `\"CLOSE\"` |\r\n\r\n### 🧠 Behavior & Relationships\r\n\r\n* `<FlipHamMenu>` is the root and must wrap everything.\r\n* `<FlipMenuBar>` and `<FlipHamButton>` must be direct children of `FlipHamMenu`.\r\n* `<FlipHamBarLinks>` should be used inside `FlipMenuBar`.\r\n* `<FlipHamOpenButton>` and `<FlipHamCloseButton>` should go inside `FlipHamButton`.\r\n\r\n**Animation System:**\r\n\r\n* All components derive animation state from the context provided by `FlipHamMenu`.\r\n* `FlipMenuBar` assigns an index to each `FlipHamBarLinks` to trigger staggered entrance animations.\r\n* Hover effects (if enabled) apply smooth hover transforms and transitions.\r\n\r\n### 🎨 Customization\r\n\r\n* All components support `className` and `style` props.\r\n* You can override animations, positions, and even replace buttons with your own components.\r\n* Add or remove menu items by modifying the children of `FlipMenuBar`.\r\n\r\n### 🧪 Example with Custom Buttons\r\n\r\n```jsx\r\n<FlipHamMenu enableNavLinkHoverAnim>\r\n  <FlipMenuBar>\r\n    <FlipHamBarLinks label=\"Dashboard\" href=\"/dashboard\" />\r\n    <FlipHamBarLinks label=\"Settings\" href=\"/settings\" />\r\n  </FlipMenuBar>\r\n\r\n  <FlipHamButton>\r\n    <button className=\"p-2 bg-black text-white rounded\">Open</button>\r\n    <button className=\"p-2 bg-red-500 text-white rounded\">Close</button>\r\n  </FlipHamButton>\r\n</FlipHamMenu>\r\n```\r\n","readmeFilename":"README.md","_rev":"1-9fea39125a2f7b2a2bb6e4ecd4e80f1e"}