{"_id":"@asnewyla/card","_rev":"2-1ca5002a148b5243d344a849eb3ddc70","name":"@asnewyla/card","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@asnewyla/card","version":"0.2.0","keywords":["react","card","surface","accessible"],"license":"MIT","_id":"@asnewyla/card@0.2.0","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"dist":{"shasum":"5799c8ec8409913b0c601241d6358769f48d80f5","tarball":"https://registry.npmjs.org/@asnewyla/card/-/card-0.2.0.tgz","fileCount":11,"integrity":"sha512-GCBY4C+9HcymAECqT7Zt70LUmhNXGXsTn3idD4mk84FIr9LHD8n5ZNb2gDsWzKr6Qc/mZ8C3mSaV8KRzTuNP3g==","signatures":[{"sig":"MEQCIFXJYJ4P8cg73EKBNYDrpBGQ5CemZkM5g13Rmv/w4VC1AiAni0IHMwlyvH01lgbI3/aKx11TidR1DuTIHfj3/Tf+aw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14031},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css"},"scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"repository":{"url":"git+https://github.com/xavierDelaFuente/xd-components.git","type":"git","directory":"packages/card"},"description":"Content card surface with an optional image, padding, and radius","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.19.0","dependencies":{"@asnewyla/image":"0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","jsdom":"^24.0.0","react":"^18.3.0","vitest":"^2.0.0","react-dom":"^18.3.0","typescript":"^5.5.0","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@testing-library/jest-dom":"^6.4.0","@testing-library/user-event":"^14.5.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/card_0.2.0_1787429445052_0.7388958309349674","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@asnewyla/card","version":"0.2.1","description":"Content card surface with an optional image, padding, and radius","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/card"},"publishConfig":{"access":"public"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","card","surface","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asnewyla/image":"0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^24.0.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/card@0.2.1","dist":{"integrity":"sha512-oZa1qS+Mx/vlhhpCxrUPUIUr3qW6R3vJP+48BmtgE318v0k3l/gPiD4qpWOHh5th12BZOfijgY+l3/ihJ4ICkg==","shasum":"29b6e71f59820d2ac0fe022f99e603eda1964eca","tarball":"https://registry.npmjs.org/@asnewyla/card/-/card-0.2.1.tgz","fileCount":11,"unpackedSize":13867,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICU52XcCCtPTWYtAHcKo9D+ieSZMAHNibijl8xqQ+5l7AiA6sdSbhW8mjyyWEXLv+Gz0cI2fElsV0das3orjNrJZYQ=="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/card_0.2.1_1787860427164_0.21213254765212275"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-22T20:10:44.877Z","modified":"2026-08-27T19:53:47.481Z","0.2.0":"2026-08-22T20:10:45.208Z","0.2.1":"2026-08-27T19:53:47.314Z"},"license":"MIT","keywords":["react","card","surface","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/card"},"description":"Content card surface with an optional image, padding, and radius","maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"readme":"# @asnewyla/card\r\n\r\nContent card surface with an optional full-bleed image, padding, and radius.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @asnewyla/card @asnewyla/image\r\n```\r\n\r\n`Card` renders `@asnewyla/image`'s `Image` internally for its optional `image`\r\nslot, so that stylesheet also needs importing once, alongside `Card`'s own:\r\n\r\n```ts\r\nimport '@asnewyla/card/styles.css';\r\nimport '@asnewyla/image/styles.css';\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { Card } from '@asnewyla/card';\r\n\r\n<Card>\r\n  <h3>Card title</h3>\r\n  <p>Some supporting body text.</p>\r\n</Card>\r\n\r\n<Card\r\n  radius=\"md\"\r\n  image={{ src: '/photo.jpg', alt: 'A mountain at sunset', aspectRatio: '2 / 1' }}\r\n>\r\n  <h3>Mountain view</h3>\r\n  <p>The image renders full-bleed above the content, clipped to the card's own radius.</p>\r\n</Card>\r\n```\r\n\r\n### Props\r\n\r\n| Prop | Type | Default |\r\n|---|---|---|\r\n| `children` | `React.ReactNode` (**required**) | — |\r\n| `image` | `Omit<ImageProps, 'radius'>` | — |\r\n| `padding` | `'sm' \\| 'md' \\| 'lg'` | `'md'` |\r\n| `radius` | `'sm' \\| 'md' \\| 'lg' \\| 'full'` | — (square corners) |\r\n\r\nEvery other native `<div>` prop (`className`, `style`, `id`, `aria-*`, ...) is\r\naccepted and forwarded to the root element; a `className` you pass is merged\r\nwith the card's own, not replaced.\r\n\r\n`image` accepts everything `Image` itself does — `src`, `alt`, `fit`,\r\n`aspectRatio`, `fallback`, native `<img>` attributes — except `radius`:\r\nthe card's own `radius` already governs the image's corners (it's rendered\r\nedge-to-edge and clipped to the card's shape), so a separate image radius\r\nwould just be a way to fight it.\r\n\r\n### Theming\r\n\r\nOverride the CSS custom properties — defaults adapt automatically to\r\n`prefers-color-scheme` via `@asnewyla/tokens`:\r\n\r\n```css\r\n:root {\r\n  --xd-color-border: #cbd5e1;\r\n  --xd-radius-md: 0.375rem;\r\n  --xd-space-md: 0.5rem;\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":""}