{"_id":"@asnewyla/image","name":"@asnewyla/image","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@asnewyla/image","version":"0.2.0","description":"Image display with org styling, aspect ratio, and load-error fallback","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/image"},"publishConfig":{"access":"public"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","image","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.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/image@0.2.0","dist":{"integrity":"sha512-R6UElDlIdVKbjHEyerM9tTNrA7xeilTbBvncHL9f4BRHWaDmTop0rq0zDYGx2mdNOegwHWDYSAd1BMMG03wD5A==","shasum":"f42366d17ff11616453bb28e6df7fa5c05caf878","tarball":"https://registry.npmjs.org/@asnewyla/image/-/image-0.2.0.tgz","fileCount":11,"unpackedSize":15048,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCisi3OD7AVvdvfHjuTXKg+ytxtgs+Ie8717e/jL+pQBAIgQwMoyypx4XpSFGL8R9pGLIZ6I/TI4yTa4kof55PMKPs="}]},"_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/image_0.2.0_1787420668097_0.3349186827572235"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-22T17:44:27.878Z","0.2.0":"2026-08-22T17:44:28.241Z","modified":"2026-08-22T17:44:28.501Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Image display with org styling, aspect ratio, and load-error fallback","keywords":["react","image","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/image"},"license":"MIT","readme":"# @asnewyla/image\r\n\r\nImage display with org styling — aspect ratio, object-fit, token-based\r\nrounding, and a load-error fallback.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @asnewyla/image\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { Image } from '@asnewyla/image';\r\n\r\n<Image src=\"/hero.jpg\" alt=\"Team at the launch event\" />\r\n\r\n<Image\r\n  src=\"/avatar.png\"\r\n  alt=\"Jordan's profile picture\"\r\n  aspectRatio=\"1 / 1\"\r\n  radius=\"full\"\r\n  fallback=\"/default-avatar.png\"\r\n/>\r\n\r\n// Decorative image — alt is still required, pass an empty string explicitly\r\n<Image src=\"/divider.svg\" alt=\"\" />\r\n```\r\n\r\n### Props\r\n\r\n| Prop | Type | Default |\r\n|---|---|---|\r\n| `src` | `string` | — |\r\n| `alt` | `string` (**required**) | — |\r\n| `aspectRatio` | `string` (any CSS `aspect-ratio` value, e.g. `\"16 / 9\"`) | — |\r\n| `fit` | `'cover' \\| 'contain' \\| 'fill' \\| 'none' \\| 'scale-down'` | `'cover'` |\r\n| `radius` | `'sm' \\| 'md' \\| 'lg' \\| 'full'` | none (square corners) |\r\n| `fallback` | `string` (src to swap to if `src` fails to load) | — |\r\n\r\n`alt` has no default and isn't optional — TypeScript forces you to decide.\r\nFor a genuinely decorative image, pass `alt=\"\"` explicitly rather than\r\nomitting it.\r\n\r\nIf `fallback` also fails to load, `Image` stops swapping — it doesn't loop.\r\nIf `src` changes to a new value later, the fallback state resets and the new\r\n`src` gets its own attempt.\r\n\r\n### Theming\r\n\r\n`radius` reads from `@asnewyla/tokens` the same way `@asnewyla/button` does —\r\noptional import, works standalone with built-in fallbacks:\r\n\r\n```ts\r\nimport '@asnewyla/tokens/tokens.css';\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"","_rev":"1-133a346cad7f51d9eb84a874e4b9031d"}