{"_id":"@atom-design-mog/buttons","_rev":"4-db9554476c6230984bd5903b7bc20f66","name":"@atom-design-mog/buttons","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@atom-design-mog/buttons","version":"1.0.0","keywords":["react-native","button","ui-component","atom-design","material-icons"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/buttons@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"e00d009d51b92386afe1c9e382fd32465f6b3c5b","tarball":"https://registry.npmjs.org/@atom-design-mog/buttons/-/buttons-1.0.0.tgz","fileCount":3,"integrity":"sha512-7tLrF7BLuJgQUyLh4M3pZS2s79vuqnZx0NroQIHD+D+SHbK9H035IKJ4Ych2ccY1RChgswZizn21OI3/sXNguA==","signatures":[{"sig":"MEUCIQDyOH+bmNwJnwaY1zzbVxfkgvVUSk7JnUINEyQ3enGkzgIgBEphq6EIHmIr4iV307mYTlzOr9ICjLJQiMpnP2e5T6Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3763},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native button component supporting icons, loading, and variants.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-vector-icons":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/buttons_1.0.0_1763728757488_0.8656070279880501","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/buttons","version":"1.0.1","keywords":["react-native","button","ui-component","atom-design","material-icons"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/buttons@1.0.1","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"d677fe4a701ecb2001253014374968c41e81044a","tarball":"https://registry.npmjs.org/@atom-design-mog/buttons/-/buttons-1.0.1.tgz","fileCount":4,"integrity":"sha512-I2BOeuDs7XESFPxaLNoro7iih9+8u3MGs/yarqtvMFyzSMMS6YtvVSDrMObWfpjtxSKnKJC6GJ+wvBQrKnVEdQ==","signatures":[{"sig":"MEQCIEm5O2cmOUKIlGGjdGc2GdnbFWyMJb2+G61DotXyrb+PAiBmYAeRRVEDAFPq0f/7MOrvOQ355ackKGWuIli2M4f6ng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8339},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native button component supporting icons, loading, and variants.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-vector-icons":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/buttons_1.0.1_1763974859964_0.48972775117607026","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atom-design-mog/buttons","version":"1.0.2","keywords":["react-native","button","ui-component","atom-design","material-icons"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/buttons@1.0.2","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"924ebfc83fa5bfb83aef1abb79be3b9399b55c97","tarball":"https://registry.npmjs.org/@atom-design-mog/buttons/-/buttons-1.0.2.tgz","fileCount":4,"integrity":"sha512-BgNoAWc0j353EvF8uFfZqG02oUQx+3dlIh62vfPInaLkE2s1hMLKcVra0XIw9krt7PLt0wQAOZdclHrjufXfdQ==","signatures":[{"sig":"MEUCIQCE6ZmdZberQ3kZ8aMRgBQcP1WmwX2us3BGW8mZtBsNtwIgWKnPeUfwl91zFUJ1rzexpGaCUFp99uRQQwjgjienF5o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8335},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native button component supporting icons, loading, and variants.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-vector-icons":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/buttons_1.0.2_1763974927807_0.4295539736748355","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@atom-design-mog/buttons","version":"1.0.3","description":"A customizable React Native button component supporting icons, loading, and variants.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","button","ui-component","atom-design","material-icons"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-vector-icons":">=8.0.0"},"_id":"@atom-design-mog/buttons@1.0.3","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-IHlKSM+M2jIcyUc+HdpQwGBnWqgJDFlaaBQlmdNNaDz7apQ20YPFHIbdEU2Xutwq2IKhKw0id4W1BbsNOTeJ8w==","shasum":"5906caad70211cebd9e42a2ec7cbef4eb4c54a4f","tarball":"https://registry.npmjs.org/@atom-design-mog/buttons/-/buttons-1.0.3.tgz","fileCount":4,"unpackedSize":10293,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGW4SaAyPcmpU3d9Bu26bubphO2JxO2nw5KMo0m/3oQmAiAzvxQsjrw0jtIda0iQKY5maB16+SkXcDU2cL+aFU6QUA=="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/buttons_1.0.3_1764148452071_0.2976547730049668"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:39:17.418Z","modified":"2025-11-26T09:14:12.481Z","1.0.0":"2025-11-21T12:39:17.687Z","1.0.1":"2025-11-24T09:01:00.131Z","1.0.2":"2025-11-24T09:02:08.012Z","1.0.3":"2025-11-26T09:14:12.251Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","button","ui-component","atom-design","material-icons"],"description":"A customizable React Native button component supporting icons, loading, and variants.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# 🚀 Atom Design Button — @atom-design-mog/buttons\n\nA fully customizable React Native Button component supporting variants, sizes, icons, shapes, loading state, and disabled state.\nBuilt with MaterialCommunityIcons for rich icon support.\n\n## 📦 Installation\n```bash\nnpm install @atom-design-mog/buttons\n```\n\nor\n\n```bash\nyarn add @atom-design-mog/buttons\n```\n\n⚠️ Peer dependency:\nEnsure you have vector icons installed:\n\n```bash\nnpm install react-native-vector-icons\n```\n\n## 📲 Import\n```javascript\nimport AButton from '@atom-design-mog/buttons';\n```\n\n## ✨ Features\n\n- ✔ Multiple variants (solid, outlined, dashed, text, link, ghost)\n- ✔ Small / Medium / Large sizes\n- ✔ Shapes: default, square, round, circle\n- ✔ Left or right icons (MaterialCommunityIcons)\n- ✔ Loading spinner\n- ✔ Disabled state\n- ✔ Customizable color themes\n- ✔ Lightweight & easy to integrate\n\n## 🚀 Basic Usage\n```javascript\nimport React from 'react';\nimport { View } from 'react-native';\nimport AButton from '@atom-design-mog/buttons';\n\nexport default function App() {\n  return (\n    <View style={{ padding: 20 }}>\n      <AButton \n        title=\"Click Me\"\n        color=\"primary\"\n        variant=\"solid\"\n        size=\"medium\"\n        onPress={() => console.log(\"Clicked\")}\n      />\n    </View>\n  );\n}\n```\n\n## 🎛 Variants\n\nAvailable button styles:\n\n- solid\n\n- outlined\n\n- dashed\n\n- text\n\n- link\n\n- ghost\n\n## 📐 Sizes\n\n- small\n\n- medium\n\n- large\n\n## ⭕ Shapes\n\n- default\n\n- round\n\n- square\n\n- circle\n\n## 🔔 Icons\n\nUsing MaterialCommunityIcons internally.\n\n```jsx\n<AButton\n  title=\"Add\"\n  icon=\"plus\"\n  iconPosition=\"left\"\n  variant=\"solid\"\n/>\n```\n\n## 🌀 Loading State\n\n```jsx\n<AButton title=\"Loading...\" loading />\n```\n\n## 🎛 Full Example (As used in your test screen)\n```javascript\nimport React from 'react';\nimport { ScrollView, Text, View } from 'react-native';\nimport AButton from '@atom-design-mog/buttons';\n\nexport default function ButtonsScreen() {\n  const variants = ['solid', 'outlined', 'dashed', 'text', 'link', 'ghost'];\n  const sizes = ['small', 'medium', 'large'];\n\n  return (\n    <ScrollView style={{ padding: 16 }}>\n      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>\n        Atom Design Buttons\n      </Text>\n\n      {variants.map(variant => (\n        <View key={variant} style={{ marginBottom: 16 }}>\n          <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 4 }}>\n            {variant.toUpperCase()}\n          </Text>\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            {sizes.map(size => (\n              <AButton\n                key={size}\n                title={`${variant} ${size}`}\n                color=\"primary\"\n                variant={variant}\n                size={size}\n                icon=\"cart\"\n              />\n            ))}\n          </View>\n        </View>\n      ))}\n    </ScrollView>\n  );\n}\n```\n\n## 📘 Props\n| Prop             | Type                                                          | Default   | Description                      |\n| ---------------- | ------------------------------------------------------------- | --------- | -------------------------------- |\n| **title**        | `string`                                                      | —         | Label text                       |\n| **color**        | `\"primary\" ⎪ \"secondary\" ⎪ \"success\" ⎪ \"warning\" ⎪ \"danger\"`  | `primary` | Button accent color              |\n| **variant**      | `\"solid\" ⎪ \"outlined\" ⎪ \"dashed\" ⎪ \"text\" ⎪ \"link\" ⎪ \"ghost\"` | `solid`   | Button style                     |\n| **size**         | `\"small\" ⎪ \"medium\" ⎪ \"large\"`                                | `medium`  | Button size                      |\n| **shape**        | `\"default\" ⎪ \"square\" ⎪ \"round\" ⎪ \"circle\"`                   | `default` | Button shape                     |\n| **icon**         | `string`                                                      | —         | MaterialCommunityIcons icon name |\n| **iconPosition** | `\"left\" ⎪ \"right\"`                                            | `left`    | Where the icon appears           |\n| **disabled**     | `boolean`                                                     | `false`   | Disable interaction              |\n| **loading**      | `boolean`                                                     | `false`   | Shows ActivityIndicator          |\n| **onPress**      | `function`                                                    | —         | Button click handler             |\n\n\n---\n\n## Author\nAvi Gupta","readmeFilename":"README.md"}