{"_id":"@aaarslan/button","_rev":"1-db47532797e39049796acacf8fc5a652","name":"@aaarslan/button","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aaarslan/button","version":"1.0.0","description":"Reusable button component","author":{"name":"aaarslan"},"license":"MIT","type":"module","exports":{".":{"import":"./dist/button.js","require":"./dist/button.umd.cjs"},"./dist/main.css":"./dist/main.css"},"repository":{"type":"git","url":"git+https://github.com/aaarslan/button.git"},"main":"dist/button.umd.cjs","module":"dist/button.js","types":"dist/button.d.ts","scripts":{"dev":"vite","build":"tsc --p ./tsconfig-build.json && vite build","format":"biome format --changed --write"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@biomejs/biome":"^1.6.0","@types/node":"^20.8.10","@types/react":"^18.2.51","@types/react-dom":"^18.2.19","@vitejs/plugin-react":"^4.2.1","glob":"^10.3.10","lefthook":"1.6.7","react":"^18.2.0","react-dom":"^18.2.0","react-shadow":"^20.4.0","typescript":"^5.2.2","vite":"^4.5.0","vite-plugin-dts":"^3.7.2","vite-plugin-lib-inject-css":"^1.3.0"},"sideEffects":["**/*.css"],"browserslist":["last 1 version","> 1%","not dead"],"bugs":{"url":"https://github.com/aaarslan/button/issues"},"homepage":"https://github.com/aaarslan/button#readme","directories":{"lib":"lib"},"keywords":["React","Button"],"_id":"@aaarslan/button@1.0.0","gitHead":"cfe8c9709b176c33d008bf542a1de3a5dc3f38fe","_nodeVersion":"20.11.1","_npmVersion":"10.5.0","dist":{"integrity":"sha512-A0jA41zM/B1HGhwqcKvOL9tEtGuHnVQR/ULhQpJn6l4oQji1G/tW8CS0/+PTHQ3zFlTbyaz0q/At9GaH8Y9PFg==","shasum":"0effd6348867c80374faa141e94b8c7bc299935a","tarball":"https://registry.npmjs.org/@aaarslan/button/-/button-1.0.0.tgz","fileCount":8,"unpackedSize":18084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBY7JgPqeVrPw+49aFtGvJjGkw2rycMdHx/0ljQy1zmfAiAZi0yyAd++hMKpyCg36tQM50ORvtBS11Uut+Lqyhiklg=="}]},"_npmUser":{"name":"aaarslan","email":"arslan.abdallah@gmail.com"},"maintainers":[{"name":"aaarslan","email":"arslan.abdallah@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/button_1.0.0_1711046847703_0.4759772351687772"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aaarslan/button","version":"1.0.1","description":"Reusable button component","author":{"name":"aaarslan"},"license":"MIT","type":"module","exports":{".":{"import":"./dist/button.js","require":"./dist/button.umd.cjs"},"./dist/main.css":"./dist/main.css"},"repository":{"type":"git","url":"git+https://github.com/aaarslan/button.git"},"main":"dist/button.umd.cjs","module":"dist/button.js","types":"dist/button.d.ts","scripts":{"dev":"vite","build":"tsc --p ./tsconfig-build.json && vite build","lint":"biome check --apply lib/*"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@biomejs/biome":"^1.7.3","@evilmartians/lefthook":"^1.6.12","@types/node":"^20.12.12","@types/react":"^18.3.2","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.0","glob":"^10.3.16","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.4.5","vite":"^5.2.11","vite-plugin-dts":"^3.9.1","vite-plugin-lib-inject-css":"^2.1.1"},"sideEffects":["**/*.css"],"browserslist":["last 1 version","> 1%","not dead"],"bugs":{"url":"https://github.com/aaarslan/button/issues"},"homepage":"https://github.com/aaarslan/button#readme","directories":{"lib":"lib"},"keywords":["React","Button"],"_id":"@aaarslan/button@1.0.1","gitHead":"423161f67d430533333713d9be2f131840bce448","_nodeVersion":"20.11.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-4ciXowEgFa0AEEqsIVVg/V8tSrwI5vcmzreURFjO/NdmibXf1Rk2UNWG5knkinsKeOhTJ4tentx2zI0xmLiokw==","shasum":"4f6e3fbbe517b78c220dea405ba5d04cbc36d1c0","tarball":"https://registry.npmjs.org/@aaarslan/button/-/button-1.0.1.tgz","fileCount":8,"unpackedSize":18074,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0Fx48De+AIq5+4A32xIkdzDf32vgl5T/iGD1Je/Uq5AiA3EFssw2F9kBxXO45r/3hSd14zRLWKaQ5frwG72xvI2Q=="}]},"_npmUser":{"name":"aaarslan","email":"arslan.abdallah@gmail.com"},"maintainers":[{"name":"aaarslan","email":"arslan.abdallah@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/button_1.0.1_1716475676378_0.3184129040446668"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-21T18:47:27.626Z","1.0.0":"2024-03-21T18:47:27.910Z","modified":"2024-05-23T14:47:57.212Z","1.0.1":"2024-05-23T14:47:56.534Z"},"maintainers":[{"name":"aaarslan","email":"arslan.abdallah@gmail.com"}],"description":"Reusable button component","homepage":"https://github.com/aaarslan/button#readme","keywords":["React","Button"],"repository":{"type":"git","url":"git+https://github.com/aaarslan/button.git"},"author":{"name":"aaarslan"},"bugs":{"url":"https://github.com/aaarslan/button/issues"},"license":"MIT","readme":"# A Reusable Button Component for React Applications\n\n## Overview\n\nThis reusable button component for React applications offers extensive customization options to cater to various design requirements. Crafted with precision in React and TypeScript, it introduces a versatile approach to incorporating buttons into your projects, ensuring adaptability and ease of use. The component leverages CSS modules for styling, providing a scalable and maintainable solution for UI development.\n\n### Features\n\n- **Customizable Appearance**: Choose between `primary`, `secondary`, and `link` variants to align with your UI's aesthetics.\n- **Flexible Color Options**: Supports predefined color schemes such as `info`, `danger`, `warning`, and `success`, with the ability to specify custom colors.\n- **Icon Support**: Easily integrate icons into your buttons, with control over their placement on either the left or right side.\n- **Loading State**: Incorporates a loading state to indicate processing, enhancing the user experience.\n- **Accessibility Features**: Implements `aria-busy` and `aria-label` attributes when loading, ensuring accessibility.\n\n## Installation\n\nBefore integrating this button component into your project, ensure you have a React environment set up. If not, you can start a new project using Create React App or your preferred setup.\n\nTo use this button component, first, clone this repository into your project directory. Then, import the button component into your React component file as follows:\n\n```jsx\nimport { Button } from '@aaarslan/button';\n```\n\n## Usage\n\nHere is a simple example of how to use the button component in your application:\n\n```jsx\n<Button\n  variant=\"primary\"\n  color=\"info\"\n  textColor=\"#FFFFFF\"\n  loading={false}\n  icon={<YourIconComponent />}\n  iconPosition=\"left\"\n>\n  Click Me\n</Button>\n```\n\n### Props\n\n- **`variant`**: Defines the button's style variant. Options: `primary`, `secondary`, `link`. Default is `primary`.\n- **`color`**: Specifies the button's background color. Predefined options include `info`, `danger`, `warning`, `success`, or any valid CSS color value.\n- **`textColor`**: Determines the color of the text inside the button. Accepts any valid CSS color value.\n- **`loading`**: Enables the loading state of the button, displaying a spinner and disabling interactions. Boolean value.\n- **`icon`**: Accepts a React node to display an icon within the button.\n- **`iconPosition`**: Positions the icon on the `left` or `right` side of the button's text.\n\n## Styling\n\nThis component uses CSS modules for styling. You can customize the styles by editing the `styles.module.css` file. The button's design can be tailored to fit your application's theme by modifying the provided CSS variables and classes.\n\n## Building and Publishing\n\nThe project is configured to be built with Vite/Rollup, optimizing it for both development and production environments. To build the component for publishing, run the build script specified in your `package.json`. Ensure you have configured your build system to handle CSS modules and TypeScript appropriately.\n\n## Contributing\n\nContributions to enhance the functionality or documentation of this reusable button component are welcome. Whether it's adding new features, fixing bugs, or improving the documentation, your help is appreciated. Please submit a pull request or open an issue to discuss your ideas.\n\n## License\n\nThis project is open-sourced under the MIT License. See the LICENSE file for more details.\n","readmeFilename":"README.md"}