{"_rev":"6-8a9bab46d9e420101195b01e28a87332","time":{"created":"2025-06-08T13:24:55.805Z","modified":"2025-06-08T13:24:56.392Z","1.0.0":"2025-04-07T15:02:29.748Z","1.0.1":"2025-04-07T15:15:09.749Z","1.1.0":"2025-04-13T18:26:41.108Z","1.2.0":"2025-06-08T13:24:56.141Z"},"_id":"@aniruddha1806/card","name":"@aniruddha1806/card","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@aniruddha1806/card","version":"1.2.0","description":"A responsive and customizable product card component for React","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","clean":"rimraf dist","prepare":"npm run clean && npm run build","test":"jest","lint":"eslint src/**/*.{ts,tsx}"},"keywords":["react","component","product","card","ecommerce","tailwind","typescript"],"author":{"name":"Aniruddha kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","eslint":"^8.15.0","jest":"^28.1.0","rimraf":"^3.0.2","rollup":"^2.74.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","tslib":"^2.4.0","typescript":"^4.6.4"},"publishConfig":{"access":"public"},"_id":"@aniruddha1806/card@1.2.0","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-ea8psmQMdBM+Zqay2+GL1q0v80NcEtkD6jbFmPNVPKAwKr5cU0PQwm3q376V4mKvJecxAtsGV2VN6nPgkZM/Ug==","shasum":"a7853799654f9667acb9be835d2d79305727914e","tarball":"https://registry.npmjs.org/@aniruddha1806/card/-/card-1.2.0.tgz","fileCount":10,"unpackedSize":40472,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDJTIYA1y+p+zTpgV2rFWGKw3ZH+aIKdobHzlUsmj4plwIgVPDepXLeUqGjcDgQ/0xVGZQ+HDP4r7aRbjFTDa/95NA="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/card_1.2.0_1749389095925_0.8515093351965852"},"_hasShrinkwrap":false}},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"description":"A responsive and customizable product card component for React","keywords":["react","component","product","card","ecommerce","tailwind","typescript"],"author":{"name":"Aniruddha kulkarni"},"license":"MIT","readme":"# React Card Component\r\n\r\nA versatile, customizable card component for React applications with TypeScript support. Features flip animations, detailed product views, and extensive styling options with zero dependencies.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/card\r\n```\r\n\r\n## Features\r\n\r\n- 🎴 Elegant product card design with image, title, and pricing\r\n- 🔄 Smooth flip animation to reveal detailed information\r\n- 📱 Responsive design that works on all screen sizes\r\n- 🎨 Extensive styling customization (styles + classNames)\r\n- 📋 Structured back-face content with multiple section types\r\n- 🖼️ Flexible image handling with placeholder fallbacks\r\n- 🎯 TypeScript support with full type definitions\r\n- 🎨 Customizable action colors and button text\r\n- ♿ Accessibility features with proper ARIA labels\r\n- 🪶 Zero external dependencies\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport Card from '@aniruddha1806/card';\r\n\r\nfunction App() {\r\n  return (\r\n    <Card\r\n      imageSrc=\"/product-image.jpg\"\r\n      title=\"Premium Headphones\"\r\n      subtitle=\"Wireless Bluetooth 5.0\"\r\n      price=\"$199.99\"\r\n      buttonText=\"Add to Cart\"\r\n      onButtonClick={() => console.log('Added to cart!')}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### CardProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `imageSrc` | `string` | `undefined` | Product image URL |\r\n| `title` | `string` | `required` | Product title |\r\n| `subtitle` | `string` | `required` | Product subtitle/description |\r\n| `price` | `string` | `required` | Product price display |\r\n| `buttonText` | `string` | `\"Add to Cart\"` | Action button text |\r\n| `onButtonClick` | `() => void` | `undefined` | Button click handler |\r\n| `actionColor` | `string` | `\"#5046e5\"` | Button background color |\r\n| `showBackFace` | `boolean` | `false` | Enable card flip functionality |\r\n| `backContent` | `ProductSection[]` | `[]` | Content for the back face |\r\n| `backButtonText` | `string` | `\"Back to Product\"` | Back face button text |\r\n\r\n\r\n### ProductSection Configuration\r\n\r\n| Prop | Type | Description |\r\n|------|------|-------------|\r\n| `title` | `string` | Section title |\r\n| `type` | `\"specs\" \\| \"features\" \\| \"description\" \\| \"tags\"` | Content type |\r\n| `content` | `string \\| ProductSpec[] \\| string[]` | Section content |\r\n\r\n### ProductSpec Configuration\r\n\r\n| Prop | Type | Description |\r\n|------|------|-------------|\r\n| `label` | `string` | Specification label |\r\n| `value` | `string` | Specification value |\r\n\r\n## Examples\r\n\r\n### Basic Card\r\n\r\nSimple product card without flip functionality:\r\n\r\n```jsx\r\nimport Card from '@aniruddha1806/card';\r\n\r\nfunction BasicCard() {\r\n  const handleAddToCart = () => {\r\n    alert('Product added to cart!');\r\n  };\r\n\r\n  return (\r\n    <Card\r\n      imageSrc=\"/laptop.jpg\"\r\n      title=\"MacBook Pro\"\r\n      subtitle=\"13-inch, M2 chip\"\r\n      price=\"$1,299.00\"\r\n      buttonText=\"Buy Now\"\r\n      onButtonClick={handleAddToCart}\r\n      actionColor=\"#007AFF\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Card with Flip Animation\r\n\r\nCard with detailed product information on the back:\r\n\r\n```jsx\r\nimport Card from '@aniruddha1806/card';\r\n\r\nfunction FlipCard() {\r\n  const productSpecs = [\r\n    {\r\n      title: \"Technical Specifications\",\r\n      type: \"specs\",\r\n      content: [\r\n        { label: \"Processor\", value: \"Apple M2 chip\" },\r\n        { label: \"Memory\", value: \"8GB unified memory\" },\r\n        { label: \"Storage\", value: \"256GB SSD\" },\r\n        { label: \"Display\", value: \"13.3-inch Retina\" },\r\n        { label: \"Battery\", value: \"Up to 20 hours\" }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Key Features\",\r\n      type: \"features\",\r\n      content: [\r\n        \"Touch Bar and Touch ID\",\r\n        \"Force Touch trackpad\",\r\n        \"Two Thunderbolt 3 ports\",\r\n        \"802.11ac Wi-Fi\",\r\n        \"Bluetooth 5.0\"\r\n      ]\r\n    },\r\n    {\r\n      title: \"Description\",\r\n      type: \"description\",\r\n      content: \"The most powerful MacBook Pro ever is here. With the blazing-fast M2 chip, you can take on demanding projects with pro-level performance.\"\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <Card\r\n      imageSrc=\"/macbook-pro.jpg\"\r\n      title=\"MacBook Pro\"\r\n      subtitle=\"13-inch, M2 chip, 256GB\"\r\n      price=\"$1,299.00\"\r\n      showBackFace={true}\r\n      backContent={productSpecs}\r\n      onButtonClick={() => console.log('MacBook added to cart')}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### E-commerce Product Card\r\n\r\nComplete product card with all content types:\r\n\r\n```jsx\r\nimport Card from '@aniruddha1806/card';\r\n\r\nfunction ProductCard() {\r\n  const productDetails = [\r\n    {\r\n      title: \"Product Specifications\",\r\n      type: \"specs\",\r\n      content: [\r\n        { label: \"Brand\", value: \"Sony\" },\r\n        { label: \"Model\", value: \"WH-1000XM4\" },\r\n        { label: \"Type\", value: \"Over-ear\" },\r\n        { label: \"Connectivity\", value: \"Bluetooth 5.0\" },\r\n        { label: \"Battery Life\", value: \"30 hours\" },\r\n        { label: \"Weight\", value: \"254g\" }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Key Features\",\r\n      type: \"features\",\r\n      content: [\r\n        \"Industry-leading noise cancellation\",\r\n        \"30-hour battery life\",\r\n        \"Touch sensor controls\",\r\n        \"Speak-to-chat technology\",\r\n        \"Quick attention mode\",\r\n        \"Multipoint connection\"\r\n      ]\r\n    },\r\n    {\r\n      title: \"About This Product\",\r\n      type: \"description\",\r\n      content: \"Experience premium sound quality with Sony's flagship noise-canceling headphones. Perfect for travel, work, or everyday listening with unmatched comfort and performance.\"\r\n    },\r\n    {\r\n      title: \"Categories\",\r\n      type: \"tags\",\r\n      content: [\"Electronics\", \"Audio\", \"Headphones\", \"Wireless\", \"Premium\", \"Noise Canceling\"]\r\n    }\r\n  ];\r\n\r\n  const handlePurchase = () => {\r\n    // Add to cart logic\r\n    console.log('Sony headphones added to cart');\r\n  };\r\n\r\n  return (\r\n    <Card\r\n      imageSrc=\"/sony-headphones.jpg\"\r\n      title=\"Sony WH-1000XM4\"\r\n      subtitle=\"Wireless Noise Canceling Headphones\"\r\n      price=\"$349.99\"\r\n      buttonText=\"Add to Cart\"\r\n      onButtonClick={handlePurchase}\r\n      showBackFace={true}\r\n      backContent={productDetails}\r\n      backButtonText=\"← Back to Product\"\r\n      actionColor=\"#FF6B35\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport Card, { CardProps, ProductSection, ProductSpec } from '@aniruddha1806/card';\r\n\r\ninterface Product {\r\n  id: number;\r\n  name: string;\r\n  description: string;\r\n  price: number;\r\n  imageUrl: string;\r\n  specifications: ProductSpec[];\r\n}\r\n\r\nconst ProductCard: React.FC<{ product: Product }> = ({ product }) => {\r\n  const backContent: ProductSection[] = [\r\n    {\r\n      title: \"Specifications\",\r\n      type: \"specs\",\r\n      content: product.specifications\r\n    },\r\n    {\r\n      title: \"Description\",\r\n      type: \"description\",\r\n      content: product.description\r\n    }\r\n  ];\r\n\r\n  const cardProps: CardProps = {\r\n    imageSrc: product.imageUrl,\r\n    title: product.name,\r\n    subtitle: product.description.substring(0, 50) + \"...\",\r\n    price: `$\\${product.price.toFixed(2)}`,\r\n    showBackFace: true,\r\n    backContent,\r\n    onButtonClick: () => {\r\n      // Type-safe button click handler\r\n      console.log(`Adding product \\${product.id} to cart`);\r\n    }\r\n  };\r\n\r\n  return <Card {...cardProps} />;\r\n};\r\n\r\n// Usage with typed product data\r\nconst sampleProduct: Product = {\r\n  id: 1,\r\n  name: \"Premium Headphones\",\r\n  description: \"High-quality wireless headphones with noise cancellation\",\r\n  price: 299.99,\r\n  imageUrl: \"/headphones.jpg\",\r\n  specifications: [\r\n    { label: \"Driver Size\", value: \"40mm\" },\r\n    { label: \"Frequency Response\", value: \"20Hz - 20kHz\" },\r\n    { label: \"Battery Life\", value: \"25 hours\" }\r\n  ]\r\n};\r\n\r\nexport default function App() {\r\n  return <ProductCard product={sampleProduct} />;\r\n}\r\n```\r\n\r\n```\r\n\r\n","readmeFilename":"README.MD"}