{"_id":"@crocogiciel/react-web-radial-menu","_rev":"5-3b277bc6f8bff55a07b34f7ac7cf1665","name":"@crocogiciel/react-web-radial-menu","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.1":{"name":"@crocogiciel/react-web-radial-menu","version":"1.0.1","keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"author":"","license":"MIT","_id":"@crocogiciel/react-web-radial-menu@1.0.1","maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"dist":{"shasum":"d4bdbb64f5e7296a78e126a569b60f8d171729a4","tarball":"https://registry.npmjs.org/@crocogiciel/react-web-radial-menu/-/react-web-radial-menu-1.0.1.tgz","fileCount":21,"integrity":"sha512-ORGGyk5qBaBMZe7+hZLpqT21SP8pVTiDp1B9Ocymdh2asO1zjFpIj6qEzR2pFaZoMBAQLWCw+Qd7MDz72CDh4Q==","signatures":[{"sig":"MEQCIDHlGDaPdqmfkQpLfPQTjheGLIMxY6T82wB4hWYUW6FIAiBak5rFUrR/3kwzmpbgmsZ6GZ0QDd4GYQ/5hKLZLulbFg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66518},"main":"./dist/react-radial-menu.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/react-radial-menu.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-radial-menu.es.js","require":"./dist/react-radial-menu.umd.js"},"./styles.css":"./dist/style.css"},"gitHead":"2ffd8d18b90b40b2d699444fc712be2f71b9ccd5","scripts":{"dev":"vite","lint":"eslint .","build":"vite build && npm run build:types","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.app.json","build:types":"tsc -p tsconfig.build.json && node scripts/generate-types.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful and customizable radial menu component for React with multi-level navigation support","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","lucide-react":"^0.344.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","lucide-react":"^0.344.0"},"_npmOperationalInternal":{"tmp":"tmp/react-web-radial-menu_1.0.1_1770340414632_0.10243619078120902","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@crocogiciel/react-web-radial-menu","version":"1.0.2","keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"author":"","license":"MIT","_id":"@crocogiciel/react-web-radial-menu@1.0.2","maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"dist":{"shasum":"711fde4d05741962429cd0e8719286d915bfaf89","tarball":"https://registry.npmjs.org/@crocogiciel/react-web-radial-menu/-/react-web-radial-menu-1.0.2.tgz","fileCount":21,"integrity":"sha512-KwomFAqFAEUTGZCr9Stc2c99cS23EuszTwhyu2pwH3LU1UiYI7TvmCZpzvOsKkCAu0cyOXnbEeF8F8/uO/KYdQ==","signatures":[{"sig":"MEQCIGGhgVV8OgezSEWpgh0V1Vs4FBEPr48Wx0I9zUSI70iwAiBS7WPhKijJk4FqbXJX5TgnCZ6jpoNuAhHz65RUMSElag==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72818},"main":"./dist/react-radial-menu.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/react-radial-menu.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-radial-menu.es.js","require":"./dist/react-radial-menu.umd.js"},"./styles.css":"./dist/style.css"},"gitHead":"7245168324fd30ea0897ddbc9878b96502e99d99","scripts":{"dev":"vite","lint":"eslint .","build":"vite build && npm run build:types","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.app.json","build:types":"tsc -p tsconfig.build.json && node scripts/generate-types.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful and customizable radial menu component for React with multi-level navigation support","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","lucide-react":"^0.344.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","lucide-react":"^0.344.0"},"_npmOperationalInternal":{"tmp":"tmp/react-web-radial-menu_1.0.2_1770345803434_0.9760802658039596","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@crocogiciel/react-web-radial-menu","version":"1.0.3","keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"author":"","license":"MIT","_id":"@crocogiciel/react-web-radial-menu@1.0.3","maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"dist":{"shasum":"f2b95c8a0e44ebde753bf0faf936e4e6ba951145","tarball":"https://registry.npmjs.org/@crocogiciel/react-web-radial-menu/-/react-web-radial-menu-1.0.3.tgz","fileCount":21,"integrity":"sha512-4dJnwvwwYMuGzZ3Ei2EXEuxE5ZM8RhInV6w74xU7DqGWwB+IpEVHEqF2pBliBrqItpkLOdsrTG1sC95eeEGjww==","signatures":[{"sig":"MEUCIBlgybCCFn/L3/I1pHpigTKmXwBm936tCantIKBCuGnkAiEAqol6r4lMfM/NTm+8hLPRDJtnBtOaYwu9/GsnLbo8QFY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76360},"main":"./dist/react-radial-menu.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/react-radial-menu.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-radial-menu.es.js","require":"./dist/react-radial-menu.umd.js"},"./styles.css":"./dist/style.css"},"gitHead":"09c6c46aef8d04fc56048a3a1e3b65bf94570861","scripts":{"dev":"vite","lint":"eslint .","build":"vite build && npm run build:types","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.app.json","build:types":"tsc -p tsconfig.build.json && node scripts/generate-types.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful and customizable radial menu component for React with multi-level navigation support","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","lucide-react":"^0.344.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","lucide-react":"^0.344.0"},"_npmOperationalInternal":{"tmp":"tmp/react-web-radial-menu_1.0.3_1770350328915_0.25762784858734533","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@crocogiciel/react-web-radial-menu","version":"1.0.5","keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"author":"","license":"MIT","_id":"@crocogiciel/react-web-radial-menu@1.0.5","maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"homepage":"https://github.com/crocogiciel/react-web-radial-menu#readme","bugs":{"url":"https://github.com/crocogiciel/react-web-radial-menu/issues"},"dist":{"shasum":"77bb4048e6375eb116a49fef8a253a143e6bca7c","tarball":"https://registry.npmjs.org/@crocogiciel/react-web-radial-menu/-/react-web-radial-menu-1.0.5.tgz","fileCount":24,"integrity":"sha512-OeJOIUxalXAzHUVJpLzvpy6RH4KEbRFa6YXa4RFSwP2MIsSS6VZ/UTL04VXczlvkDcniUSgjgBzcHkV0SRJqlw==","signatures":[{"sig":"MEUCIDuXD0xmtR5Kcbmk5ektNQjk7M9Xn86Te6AsV8Kz07VeAiEA6DioD0laXQsWfXBgVYec6xKb4q+G/hVv7GivZ504j7A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89525},"main":"./dist/react-radial-menu.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/react-radial-menu.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-radial-menu.es.js","require":"./dist/react-radial-menu.umd.js"},"./styles.css":"./dist/style.css"},"gitHead":"08ff74f29125b74a5366d7c49ef3e5d7f6d12007","scripts":{"dev":"vite","lint":"eslint .","build":"vite build && npm run build:types","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.app.json","build:types":"tsc -p tsconfig.build.json && node scripts/generate-types.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"},"repository":{"url":"git+https://github.com/crocogiciel/react-web-radial-menu.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful and customizable radial menu component for React with multi-level navigation support","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","lucide-react":"^0.344.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","lucide-react":"^0.344.0"},"_npmOperationalInternal":{"tmp":"tmp/react-web-radial-menu_1.0.5_1770352676876_0.19797711642420612","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@crocogiciel/react-web-radial-menu","version":"1.0.6","description":"A beautiful and customizable radial menu component for React with multi-level navigation support","type":"module","main":"./dist/react-radial-menu.umd.js","module":"./dist/react-radial-menu.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/react-radial-menu.es.js","require":"./dist/react-radial-menu.umd.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/style.css"},"keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/crocogiciel/react-web-radial-menu.git"},"bugs":{"url":"https://github.com/crocogiciel/react-web-radial-menu/issues"},"homepage":"https://github.com/crocogiciel/react-web-radial-menu#readme","scripts":{"dev":"vite","build":"vite build && npm run build:types","build:types":"tsc -p tsconfig.build.json && node scripts/generate-types.js","build:demo":"vite build --config vite.config.demo.ts","lint":"eslint .","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.app.json","prepublishOnly":"npm run build"},"peerDependencies":{"lucide-react":"^0.344.0","react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@eslint/js":"^9.9.1","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.18","eslint":"^9.9.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11","globals":"^15.9.0","lucide-react":"^0.344.0","postcss":"^8.4.35","react":"^18.3.1","react-dom":"^18.3.1","tailwindcss":"^3.4.1","typescript":"^5.5.3","typescript-eslint":"^8.3.0","vite":"^5.4.2","vite-plugin-dts":"^4.3.0"},"_id":"@crocogiciel/react-web-radial-menu@1.0.6","gitHead":"f5f876879d4d088544ba420730c1eb2d291d0fbd","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ht2msaczhi93GWe9yJwleukOsI+QK/9cGz8TO0FjNCKq3EYyfzKIf75OCgE6PHWeBdJucie4xm/O3wG7K/6PWw==","shasum":"d2e6f842bcc81c38ecc8f45868d34eb2cb057d88","tarball":"https://registry.npmjs.org/@crocogiciel/react-web-radial-menu/-/react-web-radial-menu-1.0.6.tgz","fileCount":25,"unpackedSize":89926,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCdvZ7038ymH1VwuRofcyK4bwo9SzB5rLRJoXizsF4t+wIhAIarsVpeiaVgV93IISTL5xIcaaqrDVeIWijzlPyhUFmJ"}]},"_npmUser":{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"},"directories":{},"maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-web-radial-menu_1.0.6_1770785004394_0.6435276123680467"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-06T01:13:34.550Z","modified":"2026-02-11T04:43:24.729Z","1.0.1":"2026-02-06T01:13:34.791Z","1.0.2":"2026-02-06T02:43:23.593Z","1.0.3":"2026-02-06T03:58:49.058Z","1.0.5":"2026-02-06T04:37:57.040Z","1.0.6":"2026-02-11T04:43:24.582Z"},"bugs":{"url":"https://github.com/crocogiciel/react-web-radial-menu/issues"},"license":"MIT","homepage":"https://github.com/crocogiciel/react-web-radial-menu#readme","keywords":["react","radial-menu","circular-menu","menu","navigation","ui","component"],"repository":{"type":"git","url":"git+https://github.com/crocogiciel/react-web-radial-menu.git"},"description":"A beautiful and customizable radial menu component for React with multi-level navigation support","maintainers":[{"name":"guillaume-mrlin","email":"guillaume.monrolin@crocogiciel.com"}],"readme":"# React Radial Menu\n\nA beautiful and customizable radial (circular) menu component for React with multi-level navigation support.\n\n## Features\n\n- Beautiful radial menu design with smooth animations\n- Multi-level navigation support (nested submenus)\n- Multiple selection with visual feedback\n- Customizable badge counters for parent items with children\n- Per-item color customization (background, hover, selected, badges)\n- Color inheritance from parent to children\n- Automatic gradient generation for submenus with customizable ranges\n- Fully customizable colors and sizes\n- TypeScript support with full type definitions\n- Configurable animation presets (fast, smooth, elastic, slow, none)\n- Text wrapping for long labels\n- Hover and selection states\n- Validation and cancel callbacks\n- Click outside to validate selection\n\n## Installation\n\n### From npm\n\n```bash\nnpm install @crocogiciel/react-web-radial-menu\n```\n\n### From GitHub\n\n```bash\nnpm install crocogiciel/react-web-radial-menu\n```\n\n### Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n```json\n{\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\",\n  \"lucide-react\": \"^0.344.0\"\n}\n```\n\nMake sure these are installed in your project:\n\n```bash\nnpm install react react-dom lucide-react\n```\n\n## Basic Usage\n\n```tsx\nimport { RadialMenu } from '@crocogiciel/react-web-radial-menu';\nimport '@crocogiciel/react-web-radial-menu/styles.css';\n\nfunction App() {\n  const [showMenu, setShowMenu] = useState(false);\n\n  const menuItems = [\n    { id: '1', label: 'Home' },\n    { id: '2', label: 'Settings' },\n    { id: '3', label: 'Profile' },\n    { id: '4', label: 'Help' },\n  ];\n\n  const handleValidate = (selectedIds: string[]) => {\n    console.log('Selected:', selectedIds);\n    setShowMenu(false);\n  };\n\n  const handleCancel = () => {\n    console.log('Cancelled');\n    setShowMenu(false);\n  };\n\n  return (\n    <>\n      <button onClick={() => setShowMenu(true)}>Open Menu</button>\n      {showMenu && (\n        <RadialMenu\n          items={menuItems}\n          position={{ x: 400, y: 400 }}\n          centerText=\"Menu\"\n          onValidate={handleValidate}\n          onCancel={handleCancel}\n        />\n      )}\n    </>\n  );\n}\n```\n\n## Advanced Usage with Submenus\n\n```tsx\nimport { RadialMenu, RadialMenuItem } from '@crocogiciel/react-web-radial-menu';\n\nfunction App() {\n  const [showMenu, setShowMenu] = useState(false);\n\n  const menuItems: RadialMenuItem[] = [\n    {\n      id: '1',\n      label: 'File',\n      children: [\n        { id: '1-1', label: 'New' },\n        { id: '1-2', label: 'Open' },\n        { id: '1-3', label: 'Save' },\n      ],\n    },\n    {\n      id: '2',\n      label: 'Edit',\n      children: [\n        { id: '2-1', label: 'Cut' },\n        { id: '2-2', label: 'Copy' },\n        { id: '2-3', label: 'Paste' },\n      ],\n    },\n    { id: '3', label: 'View' },\n    { id: '4', label: 'Help' },\n  ];\n\n  const handleValidate = (selectedIds: string[]) => {\n    console.log('Selected items:', selectedIds);\n    setShowMenu(false);\n  };\n\n  const handleCancel = () => {\n    console.log('Menu cancelled');\n    setShowMenu(false);\n  };\n\n  return (\n    <>\n      <button onClick={() => setShowMenu(true)}>Open Menu</button>\n      {showMenu && (\n        <RadialMenu\n          items={menuItems}\n          position={{ x: 400, y: 400 }}\n          centerText=\"Commands\"\n          radius={160}\n          innerRadius={70}\n          itemHeight={50}\n          colors={{\n            selected: '#10b981',\n            unselected: '#374151',\n            hover: '#4b5563',\n            background: 'rgba(17, 24, 39, 0.95)',\n            text: '#ffffff',\n          }}\n          badgeConfig={{\n            backgroundColor: '#ef4444',\n            textColor: '#ffffff',\n            size: 20,\n            fontSize: 12,\n            show: true,\n          }}\n          animationPreset=\"smooth\"\n          animationDuration={300}\n          onValidate={handleValidate}\n          onCancel={handleCancel}\n        />\n      )}\n    </>\n  );\n}\n```\n\n## API Reference\n\n### RadialMenu Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `items` | `RadialMenuItem[]` | required | Array of menu items |\n| `position` | `{ x: number, y: number }` | `{ x: 400, y: 400 }` | Position of the menu center |\n| `colors` | `Partial<RadialMenuColors>` | Default colors | Custom color scheme |\n| `centerText` | `string` | `''` | Text displayed in the center |\n| `onValidate` | `(selectedIds: string[]) => void` | - | Callback when validation is triggered (includes clicking outside) |\n| `onCancel` | `() => void` | - | Callback when cancel button is clicked |\n| `radius` | `number` | `160` | Outer radius of the menu |\n| `innerRadius` | `number` | `70` | Inner radius of the menu |\n| `itemHeight` | `number` | `50` | Height of each menu item |\n| `badgeConfig` | `BadgeConfig` | `{}` | Configuration for selection count badges |\n| `animationPreset` | `AnimationPreset` | `'none'` | Animation style: 'fast', 'smooth', 'elastic', 'slow', or 'none' |\n| `animationDuration` | `number` | `300` | Duration of animations in milliseconds |\n| `autoGradient` | `boolean` | `false` | Enable automatic gradient colors for submenus |\n| `gradientLightnessRange` | `number` | `20` | Lightness variation range for gradient (0-50%) |\n| `gradientSaturationRange` | `number` | `10` | Saturation variation range for gradient (0-30%) |\n\n### RadialMenuItem\n\n```typescript\ninterface RadialMenuItem {\n  id: string;\n  label: string;\n  icon?: string;\n  children?: RadialMenuItem[];\n  category?: string;\n  backgroundColor?: string;\n  selectedColor?: string;\n  hoverColor?: string;\n  badgeConfig?: BadgeConfig;\n}\n```\n\n### RadialMenuColors\n\n```typescript\ninterface RadialMenuColors {\n  selected: string;      // Color for selected items\n  unselected: string;    // Color for unselected items\n  hover: string;         // Color on hover\n  background: string;    // Background color\n  text: string;          // Text color\n}\n```\n\n### BadgeConfig\n\n```typescript\ninterface BadgeConfig {\n  backgroundColor?: string;  // Badge background color\n  textColor?: string;        // Badge text color\n  size?: number;             // Badge diameter in pixels\n  fontSize?: number;         // Badge font size in pixels\n  show?: boolean;            // Whether to show badges\n}\n```\n\n### AnimationPreset\n\n```typescript\ntype AnimationPreset = 'fast' | 'smooth' | 'elastic' | 'slow' | 'none';\n```\n\n### SelectedItems\n\n```typescript\ninterface SelectedItems {\n  [key: string]: boolean;\n}\n```\n\nAn object mapping item IDs to their selection state.\n\n## Customization\n\n### Custom Colors\n\n```tsx\n<RadialMenu\n  items={items}\n  colors={{\n    selected: '#3b82f6',\n    unselected: '#1e293b',\n    hover: '#334155',\n    background: 'rgba(0, 0, 0, 0.9)',\n    text: '#f1f5f9',\n  }}\n/>\n```\n\n### Custom Size\n\n```tsx\n<RadialMenu\n  items={items}\n  radius={200}\n  innerRadius={80}\n  itemHeight={60}\n/>\n```\n\n### Badge Configuration\n\n```tsx\n<RadialMenu\n  items={items}\n  badgeConfig={{\n    backgroundColor: '#ef4444',\n    textColor: '#ffffff',\n    size: 24,\n    fontSize: 14,\n    show: true,\n  }}\n/>\n```\n\nBadges show the count of selected children for parent items with submenus.\n\n**Badge Positioning:** Badges are automatically positioned at the first third (33%) of each arc segment, rather than at the center. This optimized placement provides better visual balance, improves readability, and prevents potential overlapping when multiple items with badges are present. The positioning is calculated dynamically based on the menu's radius and the configured badge size.\n\n### Custom Item Colors\n\nYou can specify custom colors for each menu item, including background, hover, selection, and badge colors. By default, submenus inherit their parent's colors.\n\n```tsx\nconst menuItems: RadialMenuItem[] = [\n  {\n    id: '1',\n    label: 'File',\n    backgroundColor: '#3b82f6',\n    selectedColor: '#60a5fa',\n    hoverColor: '#2563eb',\n    badgeConfig: {\n      backgroundColor: '#ef4444',\n      textColor: '#ffffff',\n      size: 20,\n      fontSize: 12,\n      show: true,\n    },\n    children: [\n      { id: '1-1', label: 'New' },\n      { id: '1-2', label: 'Open' },\n    ],\n  },\n  {\n    id: '2',\n    label: 'Edit',\n    backgroundColor: '#10b981',\n    selectedColor: '#34d399',\n    hoverColor: '#059669',\n    badgeConfig: {\n      backgroundColor: '#f59e0b',\n      textColor: '#ffffff',\n      size: 20,\n      fontSize: 12,\n      show: true,\n    },\n    children: [\n      { id: '2-1', label: 'Cut' },\n      { id: '2-2', label: 'Copy' },\n    ],\n  },\n];\n\n<RadialMenu items={menuItems} />\n```\n\n**Color Inheritance:**\n- If an item doesn't specify colors, it falls back to global colors\n- Children inherit their parent's custom colors (selectedColor, hoverColor, badgeConfig)\n- Individual children can override inherited colors by specifying their own\n\n### Auto Gradient\n\nEnable automatic gradient generation for submenus. When enabled, each submenu level gets a lighter shade of its parent's color, creating a cohesive visual hierarchy.\n\n```tsx\n<RadialMenu\n  items={menuItems}\n  autoGradient={true}\n  gradientLightnessRange={20}\n  gradientSaturationRange={10}\n/>\n```\n\nWith `autoGradient` enabled:\n- Level 0 (main menu): Uses the specified `backgroundColor` or default color\n- Level 1 (submenu): Automatically lighter shade of parent color\n- Each submenu level progressively gets lighter while maintaining the same color tone\n\n**Gradient Customization:**\n- `gradientLightnessRange` (default: 20): Controls how much lighter the colors become (0-50%)\n  - Higher values create stronger contrast between items\n  - Lower values create more subtle transitions\n- `gradientSaturationRange` (default: 10): Controls saturation variation (0-30%)\n  - Higher values create more vibrant progressions\n  - Lower values maintain consistent saturation\n\nThis creates a beautiful, harmonious color scheme without manual configuration.\n\n### Animation Presets\n\n```tsx\n<RadialMenu\n  items={items}\n  animationPreset=\"smooth\"\n  animationDuration={400}\n/>\n```\n\nAvailable presets:\n- `'fast'` - Quick, snappy animations\n- `'smooth'` - Balanced, smooth transitions\n- `'elastic'` - Bouncy, playful animations\n- `'slow'` - Gentle, slow-motion animations\n- `'none'` - No animations\n\n## TypeScript Support\n\nThis library is written in TypeScript and provides full type definitions. All types are exported from the main package:\n\n```tsx\nimport type {\n  RadialMenuItem,\n  RadialMenuColors,\n  RadialMenuPosition,\n  RadialMenuConfig,\n  SelectedItems,\n  BadgeConfig,\n  AnimationPreset,\n} from '@crocogiciel/react-web-radial-menu';\n```\n\n## Color Behavior\n\n### Custom Colors\n- Each menu item can have custom properties:\n  - `backgroundColor` - Base color for the item\n  - `selectedColor` - Color when the item is selected\n  - `hoverColor` - Color when hovering over the item\n  - `badgeConfig` - Custom badge styling for this item\n- If not specified, items use the default colors from the global color scheme\n- Children inherit their parent item's custom colors by default\n- Individual children can override inherited colors\n\n### Auto Gradient\n- When `autoGradient` is enabled, submenus automatically receive lighter shades of their parent's color\n- The gradient algorithm adjusts both lightness and saturation to maintain visual harmony\n- Customizable with `gradientLightnessRange` (default: 20%) and `gradientSaturationRange` (default: 10%)\n- Each submenu item becomes progressively lighter in a clockwise direction\n- The gradient stays within the same color tone for consistency\n- Works with both default colors and custom per-item colors\n\n## Behavior\n\n### Selection\n- Click on any item without children to select/deselect it\n- Items with children will open a submenu when clicked\n- Selected items are highlighted with the configured selection color\n- A count of selected items is displayed in the center\n\n### Validation\n- Click the checkmark button in the center to validate the selection\n- Click outside the menu to automatically validate and close\n- The `onValidate` callback receives an array of selected item IDs\n\n### Cancellation\n- Click the X button in the center to cancel without validating\n- The `onCancel` callback is triggered\n- No selection is saved\n\n## Demo\n\nCheck out the [live demo](https://github.com/crocogiciel/react-web-radial-menu) to see the radial menu in action with all its features.\n\nYou can view the demo source code [here](https://github.com/crocogiciel/react-web-radial-menu/blob/main/src/App.tsx).\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Repository\n\n[https://github.com/crocogiciel/react-web-radial-menu](https://github.com/crocogiciel/react-web-radial-menu)\n","readmeFilename":"README.md"}