{"_id":"@akhilasnayak07/react-button-design-system","name":"@akhilasnayak07/react-button-design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@akhilasnayak07/react-button-design-system","version":"1.0.0","description":"Reusable React Button design system component aligned with Figma specifications.","keywords":["react","ui","design-system","figma","components"],"homepage":"https://github.com/Akhilasnayak07/react-button-design-system#readme","bugs":{"url":"https://github.com/Akhilasnayak07/react-button-design-system/issues"},"repository":{"type":"git","url":"git+https://github.com/Akhilasnayak07/react-button-design-system.git"},"license":"ISC","author":{"name":"Akhila S Nayak"},"type":"module","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.cjs.js","types":"./dist/index.d.ts"},"./dist/index.css":"./dist/index.css"},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","scripts":{"build":"vite build"},"dependencies":{"ajv":"^6.12.6","argparse":"^1.0.10","balanced-match":"^1.0.2","baseline-browser-mapping":"^2.10.43","brace-expansion":"^1.1.16","browserslist":"^4.28.6","caniuse-lite":"^1.0.30001805","commander":"^9.5.0","computeds":"^0.0.1","concat-map":"^0.0.1","convert-source-map":"^2.0.0","csstype":"^3.2.3","de-indent":"^1.0.2","debug":"^4.4.3","electron-to-chromium":"^1.5.389","entities":"^7.0.1","es-errors":"^1.3.0","esbuild":"^0.21.5","escalade":"^3.2.0","estree-walker":"^2.0.2","fast-deep-equal":"^3.1.3","fast-json-stable-stringify":"^2.1.0","fs-extra":"^7.0.1","function-bind":"^1.1.2","gensync":"^1.0.0-beta.2","graceful-fs":"^4.2.11","has-flag":"^4.0.0","hasown":"^2.0.4","he":"^1.2.0","import-lazy":"^4.0.0","is-core-module":"^2.16.2","jju":"^1.4.0","js-tokens":"^4.0.0","jsesc":"^3.1.0","json-schema-traverse":"^0.4.1","json5":"^2.2.3","jsonfile":"^4.0.0","kolorist":"^1.8.0","lodash":"^4.17.23","lodash.get":"^4.4.2","lodash.isequal":"^4.5.0","loose-envify":"^1.4.0","lru-cache":"^5.1.1","magic-string":"^0.30.21","minimatch":"^3.0.8","ms":"^2.1.3","muggle-string":"^0.3.1","nanoid":"^3.3.16","node-releases":"^2.0.51","path-browserify":"^1.0.1","path-parse":"^1.0.7","picocolors":"^1.1.1","picomatch":"^4.0.5","postcss":"^8.5.18","punycode":"^2.3.1","react-refresh":"^0.17.0","resolve":"^1.22.12","rollup":"^4.62.2","scheduler":"^0.23.2","semver":"^6.3.1","source-map":"^0.6.1","source-map-js":"^1.2.1","sprintf-js":"^1.0.3","string-argv":"^0.3.2","strip-json-comments":"^3.1.1","supports-color":"^8.1.1","supports-preserve-symlinks-flag":"^1.0.0","universalify":"^0.1.2","update-browserslist-db":"^1.2.3","uri-js":"^4.4.1","validator":"^13.15.35","vue-template-compiler":"^2.7.16","vue-tsc":"^1.8.27","yallist":"^3.1.1","z-schema":"^5.0.5"},"devDependencies":{"@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"module":"./dist/index.es.js","gitHead":"140a43336c5fd5a396b254110cbf524d1835147a","_id":"@akhilasnayak07/react-button-design-system@1.0.0","_nodeVersion":"26.4.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-0/xJ+Sq5fWSnEqvbxoh0DpxktUWGhoqdS5JiKV2M6RzvkveyG8ZD373TaNHVRG7ahuWjdQEHlgDpGNfkJaEqfw==","shasum":"ef2a1238d92a06bddf50a4aba60535ac866700f7","tarball":"https://registry.npmjs.org/@akhilasnayak07/react-button-design-system/-/react-button-design-system-1.0.0.tgz","fileCount":8,"unpackedSize":49086,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDFQ1QGHUJJf75z7Y1j5D/MYABYGpQXsEFz3TfxplFhxgIgUhFnspKpFRa2gcWAedAKki1yzm4aIal4TYUW9+uJCNM="}]},"_npmUser":{"name":"akhilasnayak07","email":"akhilasnayak272@gmail.com"},"directories":{},"maintainers":[{"name":"akhilasnayak07","email":"akhilasnayak272@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-button-design-system_1.0.0_1784102065494_0.5939351560691373"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-15T07:54:25.300Z","1.0.0":"2026-07-15T07:54:25.657Z","modified":"2026-07-15T07:54:25.865Z"},"maintainers":[{"name":"akhilasnayak07","email":"akhilasnayak272@gmail.com"}],"description":"Reusable React Button design system component aligned with Figma specifications.","homepage":"https://github.com/Akhilasnayak07/react-button-design-system#readme","keywords":["react","ui","design-system","figma","components"],"repository":{"type":"git","url":"git+https://github.com/Akhilasnayak07/react-button-design-system.git"},"author":{"name":"Akhila S Nayak"},"bugs":{"url":"https://github.com/Akhilasnayak07/react-button-design-system/issues"},"license":"ISC","readme":"# Reusable React Button Design System Component\n\nThis repository contains the architecture and implementation of a highly customizable, reusable React `Button` component, built to align perfectly with Figma design system specifications.\n\n## Folder Structure\n\n```\nsrc/\n└── components/\n    └── Button/\n        ├── Button.tsx            # Component implementation\n        ├── Button.types.ts       # TypeScript interface & type definitions\n        ├── Button.css            # Component-specific styles and tokens\n        └── Button.metadata.json  # Figma properties mapping\n```\n\n## Features\n\n- **Figma Property Mapping**: Tracks sizes, states, variants, and icon toggles to align with design specs.\n- **Design Tokens**: Standardized CSS variables for padding (`sp-sm`, `sp-xl`), radius (`rd-sm`), and brand colors.\n- **Icon Support**: Dedicated slots for leading and trailing icons, plus adjustments for icon-only layouts.\n- **Accessibility**: Includes support for standard button attributes and ARIA roles.\n- **Micro-interactions**: Handles hover transitions using native CSS animations (300ms, ease-out).\n\n## Usage\n\n```tsx\nimport { Button } from './components/Button/Button';\nimport { ArrowLeft, ArrowRight } from './icons'; // or your preferred icon pack\n\nfunction App() {\n  return (\n    <Button\n      variant=\"primary\"\n      size=\"small\"\n      showLeadingIcon={true}\n      leadingIcon={<ArrowLeft size={16} />}\n    >\n      Click Me\n    </Button>\n  );\n}\n```\n\n## Figma Property to React Prop Mapping\n\n| Figma Property | React Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- | :--- |\n| `State` | Implicit / `state` | `state?: 'default' \\| 'hover' \\| 'pressed' \\| 'focused' \\| 'disabled'` | `-` | Handled natively via CSS, with an override prop for testing. |\n| `Icon only` | `iconOnly` | `boolean` | `false` | Sets square aspect ratio and hides the text. |\n| `Size` | `size` | `'small' \\| 'medium' \\| 'large'` | `'small'` | Controls layout sizes. |\n| `Type` | `variant` | `'primary' \\| 'secondary' \\| 'neutral' \\| 'text' \\| 'link'` | `'primary'` | Maps visual themes. |\n| `Text` | `children` | `React.ReactNode` | `-` | Label content. |\n| `Leading icon` | `showLeadingIcon` | `boolean` | `false` | Toggles leading icon visibility. |\n| `Trailing icon` | `showTrailingIcon` | `boolean` | `false` | Toggles trailing icon visibility. |\n| `Leading` | `leadingIcon` | `React.ReactNode` | `-` | Element slot for leading icon. |\n| `Trailing` | `trailingIcon` | `React.ReactNode` | `-` | Element slot for trailing icon. |\n","readmeFilename":"README.md","_rev":"1-8a90f44e7f9ea0033595b3622e14be23"}