{"_id":"@bento/illustration","_rev":"4-a5d5f8859512710837850dbe042e7c55","name":"@bento/illustration","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.1":{"name":"@bento/illustration","version":"0.1.1","keywords":["asset","bento","component","graphic","icon","illustration","image","library","picture","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/illustration@0.1.1","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"7fbfa1dfd357299b327fe308f8fc5e8160c63f80","tarball":"https://registry.npmjs.org/@bento/illustration/-/illustration-0.1.1.tgz","fileCount":11,"integrity":"sha512-YrpUDqEjWaBd0DtBs+rM7rougu+Q7lvaUs5sRr7Xhs40Ak4Awz9tdyNob7HBFe3ZWXtyFyZvCcp800M/uO/3dA==","signatures":[{"sig":"MEYCIQDCftkvVEWj8BpilgZ6vo8H+KozIKyZV2ADWoaVM+IiDgIhAIvH3DL/NwlI1JEwfr7KDMY0UpAi7v6Iwc9iq0fz9a2R","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fillustration@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":44950},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"8cf6c3e7e24572c8b548fc4207e3af58bc3b5cc1","scripts":{"dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"10.9.2","description":"Illustration component","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/slots":"^0.1.1","@bento/use-props":"^0.1.0","@react-types/shared":"^3.32.1","@bento/to-attribute-value":"^0.1.0","@bento/use-data-attributes":"^0.1.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/illustration_0.1.1_1761318929229_0.9369934652751168","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bento/illustration","version":"0.1.2","keywords":["asset","bento","component","graphic","icon","illustration","image","library","picture","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/illustration@0.1.2","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"1c719688f23c4e19ff56a2b4942ce73ec0bd194f","tarball":"https://registry.npmjs.org/@bento/illustration/-/illustration-0.1.2.tgz","fileCount":12,"integrity":"sha512-K05SjRmmON2DbSeQcnEk4mMhQfv9NpVnYbkjPJdHR0rFyzRVUQwYrc4jxnVpYOzQs0UzB+0rncJVoKULC0AGOw==","signatures":[{"sig":"MEQCIGScC249JdabrAgluGLeiazFPDvLo831u6pgzhrhnF7pAiB+v6Xj9BRAGaYR4wvtc4KiCxmUFcTHazmv5+tqpYHT/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fillustration@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":50412},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"b630e17d1fad413043801e80ed1c1a0c5fe1d4b3","scripts":{"dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.2","description":"Illustration component","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/slots":"^0.1.3","@bento/use-props":"^0.1.1","@react-types/shared":"^3.32.1","@bento/to-attribute-value":"^0.1.1","@bento/use-data-attributes":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/illustration_0.1.2_1762462131544_0.4544310182350606","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@bento/illustration","version":"0.1.3","keywords":["asset","bento","component","graphic","icon","illustration","image","library","picture","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/illustration@0.1.3","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"34cd7befe7b95daa95db0605c4b678cd593e9e9a","tarball":"https://registry.npmjs.org/@bento/illustration/-/illustration-0.1.3.tgz","fileCount":12,"integrity":"sha512-Fn099iCt0Ho5yLLZQOwDpF7IVZQ1tbRF3NdJQ/N3KyR78wf3gMsxmd9rEDYbrbUmXaeRvjKT0ExhVdPu4rN6uA==","signatures":[{"sig":"MEUCIQCrl6yCWo6kUOczRYG9fYzn5QpdKRyyp5vKHmIvINYr8AIgMEjApYi8/MfMVp43yiu3Qujj9G6b5OXJllfuX/IbPhg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fillustration@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":51788},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"2552a8442bd7e504706233eeb501001087058cdf","scripts":{"dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.4","description":"Illustration component","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/slots":"^0.2.0","@bento/use-props":"^0.2.0","@react-types/shared":"^3.32.1","@bento/to-attribute-value":"^0.1.1","@bento/use-data-attributes":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"@bento/types":"^0.1.0"},"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/illustration_0.1.3_1764862973995_0.8498558696797478","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@bento/illustration","version":"0.1.4","description":"Illustration component","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","scripts":{"build":"tsup-node","dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","posttest":"npm run lint","prepublishOnly":"node ../../scripts/compile-readme.ts","pretest":"npm run build","test":"vitest --run","test:watch":"vitest"},"repository":{"type":"git","url":"git+https://github.com/godaddy/bento.git"},"keywords":["asset","bento","component","graphic","icon","illustration","image","library","picture","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","bugs":{"url":"https://github.com/godaddy/bento/issues"},"homepage":"https://github.com/godaddy/bento#readme","dependencies":{"@bento/slots":"^0.3.0","@bento/to-attribute-value":"^0.1.1","@bento/use-data-attributes":"^0.1.1","@bento/use-props":"^0.2.1","@react-types/shared":"^3.32.1"},"devDependencies":{"@bento/types":"^0.1.0"},"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"gitHead":"0f8ba63cf8539136795958006c36d1aee1f70d8e","types":"./dist/index.d.ts","_id":"@bento/illustration@0.1.4","_nodeVersion":"23.11.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-gwvAfDolo2FYcvnVzjgeMOuLGjQ14eq2ZClF19K7oIZuxXxENvUjv7/0zZoR27z+t18xnLXjuNbHjKi+9bH+kQ==","shasum":"ccbb6ef46d1793e400eb609e36ea895eed79bcb7","tarball":"https://registry.npmjs.org/@bento/illustration/-/illustration-0.1.4.tgz","fileCount":12,"unpackedSize":51788,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fillustration@0.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDNsXVCThYLvY3iJdM4BZHuy07N2/iWrBUE0q9JZejoNgIhALcSG/T/8OC9jEEFQ/5di6HpuZ788xMEJmHimK+PKRCn"}]},"_npmUser":{"name":"rxmarbles","email":"rmarkins@gmail.com"},"directories":{},"maintainers":[{"name":"rmarkins","email":"rmarkins@godaddy.com"},{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/illustration_0.1.4_1766075444623_0.13448346830133695"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-24T15:15:29.142Z","modified":"2025-12-18T16:30:45.192Z","0.1.1":"2025-10-24T15:15:29.426Z","0.1.2":"2025-11-06T20:48:51.812Z","0.1.3":"2025-12-04T15:42:54.139Z","0.1.4":"2025-12-18T16:30:44.766Z"},"bugs":{"url":"https://github.com/godaddy/bento/issues"},"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","homepage":"https://github.com/godaddy/bento#readme","keywords":["asset","bento","component","graphic","icon","illustration","image","library","picture","react","svg","vector"],"repository":{"type":"git","url":"git+https://github.com/godaddy/bento.git"},"description":"Illustration component","maintainers":[{"name":"rmarkins","email":"rmarkins@godaddy.com"},{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"readme":"# Illustration\n\nThe `@bento/illustration` component allows you to render and manipulate SVG\nbased illustrations while following the best practices for accessibility. The\ncomponent is meant to wrap around your SVG content so it can introduce the\nrequired accessibility standards and provides a way to manipulate the SVG\ncontent using the provided properties.\n\n## Installation\n\n```shell\nnpm install --save @bento/illustration\n```\n\n## Props\n\nThe `@bento/illustration` exports the `Illustration` component. When rendering\nthe component without any supplied properties, the component will automatically\napply the following properties:\n\n- `focusable=false`\n- `role=presentation`\n\n```jsx\nimport { Illustration } from '@bento/illustration';\n\n<Illustration>\n  <YourSvg>\n</Illustration>\n```\n\nThe following properties are available to be used on the `Illustration`\ncomponent:\n\n| Prop | Type | Required | Description |\n|------|------|----------|------------|\n| `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.\nThe exposed slot names of a component are available in the components documentation. |\n| `title` | `string` | No | Screen reader accessible title that explains the illustration.\nIntroducing this property automatically changes the `role` attribute from `presentation` to `img`. |\n| `children` | `ReactElement<SVGSVGElement, string \\| JSXElementConstructor<any>>` | Yes | The content to display. Should be an SVG. |\n| `flip` | `\"horizontal\" \\| \"vertical\"` | No | Flip the illustration horizontally or vertically. |\n| `rotate` | `90 \\| 180 \\| 270` | No | Rotate the illustration by 90, 180, or 270 degrees. |\n| `slots` | `Record<string, object \\| Function>` | No | An object that contains the customizations for the slots.\nThe main way you interact with the slot system as a consumer. |\n\nFor all other properties specified on the `Illustration` component, the\ncomponent will pass them down to the root SVG element of the component. Which\nwould be the equivalent of you adding them directly to the child component.\n\n### Example\n\n<Source language='tsx' code={ SourceDemo } />\n\n## Accessibility\n\n- `title`: The `title` attribute describes the illustration to screen readers.\n- `role`: The `role` attribute is default set to `presentation` but is\n  swapped to `img` when a `title` attribute is provided.\n\n## Customization\n\nWhen using the `flip` or `rotate` properties, the component will apply the\nrequired transformations inside the SVG element by introducing a wrapping\n`<g>` element.\n\nThe transformations are not applied using CSS because they would affect the\nelements around the SVG content.\n\nWhat's the difference between CSS transformations?\n\n- If you rotate an SVG by 90 degrees in CSS, the SVG's bounding box remains the\n  same. The 16x24 icon still takes space for 16x24, but it might overlap elements\n  around it.\n- If you rotate an SVG by 90 degrees in SVG Framework, the SVG's dimensions swap\n  places. 16x24 icon becomes a 24x16 icon, and it does not affect the elements\n  around it.\n\nBy applying the transformations to the SVG element by default, we've given you\nthe option to choose how you want to apply the transformations. Use the props\nprovided by the component to apply the transformations directly to the SVG\nelement or introduce the `className` property to apply the transformations\nyourself using CSS, which is the recommended approach when you want to introduce\nanimations to the component.\n\n### Slots\n\nThe component is created using our `@bento/slots` package and allows the\nassignment of the custom `slot` property to be used for overrides.\n\n```jsx\nimport { useProps } from '@bento/use-props';\nimport { Illustration } from '@bento/illustration';\nimport { withSlots } from '@bento/slots';\n\nconst MyCustomComponent = withSlots('MyCustomComponent', function Custom(args) {\n  const { props } = useProps(args);\n\n  return (\n    <Illustration {...props} slot=\"illustration\">\n      <ContentsHere />\n    </Illustration>\n  )\n});\n```\n\nSee the `@bento/slots` package for more information on how to use the `slot` and\n`slots` properties.\n\n### Styling\n\nOnce you assign the `className` property to the component, you take full\nresponsibility for the styling of the component, and it will remove any\ndefault styling that might be applied as part of this component.\n\n```jsx\nimport { Illustration } from '@bento/illustration';\n\n<Illustration className=\"my-component\">\n  <YourSvg>\n</Illustration>\n```\n\nThe following `data-` attributes are introduced as part of the component\nrender state:\n\n- `data-flip=horizontal|vertical`: The component is flipped horizontally or\n  vertically using the provided `flip` property.\n- `data-rotate=90|180|270`: The component is rotated by the provided angle\n  using the `rotate` property.\n\nThese `data-` attributes are introduced on the root element of the component\nand can be targeted using your previously provided custom `className`:\n\n```css\n.my-component[data-flip] {\n  /* The component is flipped */\n}\n\n.my-component[data-rotate] {\n  /* The component is rotated */\n}\n```\n\nTo detect if the component has received a `title` attribute, you can\nuse the following CSS selectors:\n\n```css\n.my-component:has(title) {\n  /* We have a <title> element as part of rendered result */\n}\n.my-component[role=\"img\"] {\n  /* The role is swapped to `img` from `presentation` when a title is provided */\n}\n```","readmeFilename":"README.md"}