{"_id":"@didarulislam/french-buttons","name":"@didarulislam/french-buttons","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@didarulislam/french-buttons","version":"0.1.0","private":false,"description":"A collection of beautiful French-styled button components with Tailwind CSS","keywords":["react","button","tailwind","french","ui","components"],"author":{"name":"Didarul Artur"},"license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":">=18","react-dom":">=18","tailwindcss":">=3.4"},"dependencies":{"@hookform/resolvers":"^3.9.1","@microsoft/api-extractor":"latest","@radix-ui/react-accordion":"1.2.2","@radix-ui/react-alert-dialog":"1.1.4","@radix-ui/react-aspect-ratio":"1.1.1","@radix-ui/react-avatar":"1.1.2","@radix-ui/react-checkbox":"1.1.3","@radix-ui/react-collapsible":"1.1.2","@radix-ui/react-context-menu":"2.2.4","@radix-ui/react-dialog":"1.1.4","@radix-ui/react-dropdown-menu":"2.1.4","@radix-ui/react-hover-card":"1.1.4","@radix-ui/react-label":"2.1.1","@radix-ui/react-menubar":"1.1.4","@radix-ui/react-navigation-menu":"1.2.3","@radix-ui/react-popover":"1.1.4","@radix-ui/react-progress":"1.1.1","@radix-ui/react-radio-group":"1.2.2","@radix-ui/react-scroll-area":"1.2.2","@radix-ui/react-select":"2.1.4","@radix-ui/react-separator":"1.1.1","@radix-ui/react-slider":"1.2.2","@radix-ui/react-slot":"latest","@radix-ui/react-switch":"1.1.2","@radix-ui/react-tabs":"1.1.2","@radix-ui/react-toast":"1.2.4","@radix-ui/react-toggle":"1.1.1","@radix-ui/react-toggle-group":"1.1.1","@radix-ui/react-tooltip":"1.1.6","@swc/core":"latest","autoprefixer":"^10.4.20","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"1.0.4","date-fns":"4.1.0","embla-carousel-react":"8.5.1","geist":"^1.3.1","input-otp":"1.4.1","lucide-react":"^0.454.0","next":"14.2.16","next-themes":"^0.4.4","react":"^18","react-day-picker":"9.8.0","react-dom":"^18","react-hook-form":"^7.54.1","react-resizable-panels":"^2.1.7","recharts":"2.15.0","sonner":"^1.7.1","tailwind-merge":"^2.5.5","tailwindcss-animate":"^1.0.7","tsup":"latest","vaul":"^0.9.6","zod":"^3.24.1"},"scripts":{"build":"next build","dev":"next dev","lint":"next lint","start":"next start","build:lib":"tsup","prepublishOnly":"pnpm build:lib"},"devDependencies":{"@types/node":"^22","@types/react":"^18","@types/react-dom":"^18","postcss":"^8.5","tailwindcss":"^3.4.17","typescript":"^5"},"_id":"@didarulislam/french-buttons@0.1.0","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-67jz/qwJOK6O5jcDsSvSd74fGWvLsw6IfZpT77MVCqpPrXFn+LNGE4bMWXjRhqAn+u3HyKEpEs4vzBYNzdfOCQ==","shasum":"33f7370f6c15b34bdf02803db108afb828ddebee","tarball":"https://registry.npmjs.org/@didarulislam/french-buttons/-/french-buttons-0.1.0.tgz","fileCount":9,"unpackedSize":35760,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCwjOalcOOwMl/QlepIF/zkcjIy9HS+rLBLcwwvoLzUzwIhANZ1fd6H0XR8cBKhTVmoqbE/eKMyIsW7/V30ephX0NIa"}]},"_npmUser":{"name":"didarulislam","email":"diderjustin@gmail.com"},"directories":{},"maintainers":[{"name":"didarulislam","email":"diderjustin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/french-buttons_0.1.0_1755545770700_0.13189301158916433"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-18T19:36:10.500Z","0.1.0":"2025-08-18T19:36:10.901Z","modified":"2025-08-18T19:36:11.518Z"},"maintainers":[{"name":"didarulislam","email":"diderjustin@gmail.com"}],"description":"A collection of beautiful French-styled button components with Tailwind CSS","keywords":["react","button","tailwind","french","ui","components"],"author":{"name":"Didarul Artur"},"license":"MIT","readme":"# @didarulislam/french-buttons\n\nA collection of beautiful, accessible French-styled button components built with React, TypeScript, and Tailwind CSS. Perfect for creating elegant, modern user interfaces with a touch of French design aesthetic.\n\n## ✨ Features\n\n- 🎨 **Multiple Variants**: 15+ button styles including noir, blanc, orange, vert, and special effects\n- 📱 **Responsive Sizes**: 8 different size options from small to extra-long\n- ♿ **Accessible**: Built with Radix UI primitives for excellent accessibility\n- 🎭 **Customizable**: Easy to extend and customize with your own variants\n- 🌙 **Dark Mode Ready**: Compatible with dark/light theme switching\n- 📦 **Tree-shakeable**: Only import what you need\n- 🎯 **TypeScript**: Full type safety and IntelliSense support\n\n## 🚀 Installation\n\n```bash\nnpm install @didarulislam/french-buttons\n# or\nyarn add @didarulislam/french-buttons\n# or\npnpm add @didarulislam/french-buttons\n```\n\n## 📋 Prerequisites\n\nThis package requires the following peer dependencies:\n\n```json\n{\n  \"react\": \">=18\",\n  \"react-dom\": \">=18\",\n  \"tailwindcss\": \">=3.4\"\n}\n```\n\n## 🎯 Quick Start\n\n### 1. Import the CSS\n\nFirst, import the required styles in your main CSS file or component:\n\n```css\n@import \"@didarulislam/french-buttons/styles.css\";\n```\n\nOr import it directly in your component:\n\n```tsx\nimport \"@didarulislam/french-buttons/styles.css\";\n```\n\n### 2. Use the Button\n\n```tsx\nimport { FrenchButton } from \"@didarulislam/french-buttons\";\n\nexport default function MyComponent() {\n  return (\n    <FrenchButton variant=\"noir\" size=\"default\">\n      Click me\n    </FrenchButton>\n  );\n}\n```\n\n## 🎨 Available Variants\n\n### Basic Variants\n- **`noir`** - Black button with white text\n- **`blanc`** - White button with black text\n- **`orange`** - Orange button with white text\n- **`vert`** - Green button with white text\n\n### Action Variants\n- **`action-vert`** - Green action button with rounded corners\n- **`action-orange`** - Orange action button with rounded corners\n- **`mis-en-valeur`** - Highlight button with hover effect\n- **`long`** - Extra-wide button for prominent actions\n\n### Special Variants\n- **`achat`** - Purchase button with hover color change\n- **`redirection`** - Navigation button with hover background\n- **`envoi`** - Submit button for forms\n- **`cercle`** - Circular button for icons\n\n### Redirection Variants\n- **`redirection-blanc`** - White redirect button\n- **`redirection-noir`** - Black redirect button\n- **`redirection-vert`** - Green redirect button\n- **`redirection-orange`** - Orange redirect button\n\n## 📏 Available Sizes\n\n- **`default`** - Standard button size (100px min-width)\n- **`sm`** - Small button (80px min-width)\n- **`lg`** - Large button (120px min-width)\n- **`long`** - Extra-wide button (400px min-width)\n- **`cercle`** - Circular button (100px min-width)\n- **`achat`** - Purchase button size (100px min-width)\n- **`redirection`** - Navigation button size (100px min-width)\n- **`action`** - Action button size (100px min-width)\n- **`mis-en-valeur`** - Highlight button size (100px min-width)\n- **`action-vert`** - Green action button size (100px min-width)\n- **`envoi`** - Submit button size (100px min-width)\n- **`icon`** - Icon-only button (no min-width)\n\n## 💻 Usage Examples\n\n### Basic Button\n\n```tsx\nimport { FrenchButton } from \"@didarulislam/french-buttons\";\n\n<FrenchButton>Default Button</FrenchButton>\n```\n\n### Variant and Size\n\n```tsx\n<FrenchButton variant=\"orange\" size=\"lg\">\n  Large Orange Button\n</FrenchButton>\n```\n\n### With Icons\n\n```tsx\nimport { Heart, ArrowRight } from \"lucide-react\";\n\n<FrenchButton variant=\"vert\" size=\"action\">\n  <Heart className=\"size-4\" />\n  Like\n</FrenchButton>\n\n<FrenchButton variant=\"redirection\" size=\"default\">\n  Continue\n  <ArrowRight className=\"size-4\" />\n</FrenchButton>\n```\n\n### Form Submit Button\n\n```tsx\n<FrenchButton \n  type=\"submit\" \n  variant=\"envoi\" \n  size=\"envoi\"\n  className=\"w-full\"\n>\n  Submit Form\n</FrenchButton>\n```\n\n### Navigation Button\n\n```tsx\n<FrenchButton \n  variant=\"redirection-vert\" \n  size=\"redirection\"\n  onClick={() => navigate('/gallery')}\n>\n  View Gallery\n</FrenchButton>\n```\n\n### Special Effects Button\n\n```tsx\n<FrenchButton \n  variant=\"mis-en-valeur\" \n  size=\"mis-en-valeur\"\n>\n  Discover Artur.art\n</FrenchButton>\n```\n\n## 🎨 Customization\n\n### Using className\n\n```tsx\n<FrenchButton \n  variant=\"noir\" \n  className=\"shadow-lg hover:shadow-xl transition-shadow\"\n>\n  Custom Styled Button\n</FrenchButton>\n```\n\n### Using the variants function\n\n```tsx\nimport { frenchButtonVariants } from \"@didarulislam/french-buttons\";\n\nconst customButtonClass = frenchButtonVariants({\n  variant: \"noir\",\n  size: \"lg\",\n  className: \"bg-blue-600 hover:bg-blue-700\"\n});\n\n<button className={customButtonClass}>\n  Custom Variant Button\n</button>\n```\n\n### Creating Custom Variants\n\n```tsx\nimport { frenchButtonVariants } from \"@didarulislam/french-buttons\";\n\nconst customButtonClass = frenchButtonVariants({\n  variant: \"noir\",\n  size: \"default\",\n  className: \"bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600\"\n});\n```\n\n## 🔧 Advanced Usage\n\n### As Child Component\n\n```tsx\nimport { Link } from \"react-router-dom\";\n\n<FrenchButton asChild variant=\"redirection\" size=\"default\">\n  <Link to=\"/about\">About Us</Link>\n</FrenchButton>\n```\n\n### With Form Integration\n\n```tsx\nimport { useForm } from \"react-hook-form\";\n\nconst { handleSubmit, register } = useForm();\n\n<form onSubmit={handleSubmit(onSubmit)}>\n  <input {...register(\"email\")} type=\"email\" />\n  <FrenchButton \n    type=\"submit\" \n    variant=\"envoi\" \n    size=\"envoi\"\n  >\n    Subscribe\n  </FrenchButton>\n</form>\n```\n\n### Loading State\n\n```tsx\n<FrenchButton \n  variant=\"noir\" \n  disabled={isLoading}\n  className={isLoading ? \"opacity-50 cursor-not-allowed\" : \"\"}\n>\n  {isLoading ? \"Loading...\" : \"Submit\"}\n</FrenchButton>\n```\n\n## 🎯 Best Practices\n\n### Button Selection Guidelines\n\n- **Primary Actions**: Use `noir` or `orange` variants\n- **Secondary Actions**: Use `blanc` or `redirection` variants\n- **Form Submissions**: Use `envoi` variant\n- **Navigation**: Use `redirection` variants\n- **Special Promotions**: Use `mis-en-valeur` variant\n- **Purchase Actions**: Use `achat` variant\n\n### Accessibility\n\n- Always provide meaningful text content\n- Use appropriate ARIA labels for icon-only buttons\n- Ensure sufficient color contrast\n- Provide focus indicators\n\n### Performance\n\n- The package is tree-shakeable - only import what you need\n- CSS is minimal and optimized\n- No unnecessary re-renders\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n**Button styles not applying?**\n- Ensure you've imported the CSS file\n- Check that Tailwind CSS is properly configured\n- Verify peer dependencies are installed\n\n**TypeScript errors?**\n- Make sure you're using React 18+\n- Check that types are properly imported\n- Verify your tsconfig.json includes the package\n\n**Hover effects not working?**\n- Ensure the CSS is imported\n- Check for CSS conflicts in your project\n- Verify Tailwind CSS version compatibility\n\n## 📚 API Reference\n\n### FrenchButton Props\n\n```tsx\ninterface FrenchButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  asChild?: boolean;\n  className?: string;\n}\n```\n\n### Available Variants\n\n```tsx\ntype ButtonVariant = \n  | \"noir\" | \"blanc\" | \"orange\" | \"vert\"\n  | \"action-vert\" | \"mis-en-valeur\" | \"long\" | \"achat\"\n  | \"redirection\" | \"action-orange\" | \"envoi\"\n  | \"redirection-blanc\" | \"redirection-noir\"\n  | \"redirection-vert\" | \"redirection-orange\";\n```\n\n### Available Sizes\n\n```tsx\ntype ButtonSize = \n  | \"default\" | \"sm\" | \"lg\" | \"long\" | \"cercle\"\n  | \"achat\" | \"redirection\" | \"action\" | \"mis-en-valeur\"\n  | \"action-vert\" | \"envoi\" | \"icon\";\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please feel free to submit issues, feature requests, or pull requests.\n\n## 📄 License\n\nMIT License - see the [LICENSE](LICENSE) file for details.\n\n\n- Built with [Radix UI](https://www.radix-ui.com/) for accessibility\n- Styled with [Tailwind CSS](https://tailwindcss.com/)\n- Powered by [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/)\n\n---\n\nMade  by [Didarul Islam](https://artur.art)\n","readmeFilename":"README.md","_rev":"1-ba66720fc7fa605c6f0e92f290f37559"}