{"_id":"@am2310/recipe-ui","_rev":"2-c5f700de2bd9ffc627be465adefe9a6d","name":"@am2310/recipe-ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@am2310/recipe-ui","version":"0.1.0","license":"MIT","_id":"@am2310/recipe-ui@0.1.0","maintainers":[{"name":"am2310","email":"aakash.mishra12345@gmail.com"}],"dist":{"shasum":"a8b2c0c41c93289034ca043e5d0ae156cbe52f2a","tarball":"https://registry.npmjs.org/@am2310/recipe-ui/-/recipe-ui-0.1.0.tgz","fileCount":76,"integrity":"sha512-YgqBfoPCyzCbnmMDQ28BfKGLAn0LLmnBjfv8mBHsZTarp0vXFKdRgxTGRkE9sdJWPgu6UrP6G6hCZuTJzC5BCw==","signatures":[{"sig":"MEUCIC5i45obsx5zH9aAqohtsSxW6H441Q5kx6wPIBeHlWAWAiEAoQ4sekVS9eDASziyY609I/Titr31wBvwwh+wC2UrPlU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":336085},"main":"dist/index.cjs.js","types":"dist/types/index.d.ts","unpkg":"dist/recipe-ui/recipe-ui.esm.js","module":"dist/index.js","exports":{".":{"import":"./dist/recipe-ui/recipe-ui.esm.js","require":"./dist/recipe-ui/recipe-ui.cjs.js"},"./loader":{"types":"./loader/index.d.ts","import":"./loader/index.js","require":"./loader/index.cjs"}},"gitHead":"c8e0c6a530068b73aae55c6a616872f58f068bfd","scripts":{"test":"stencil-test --prod","build":"stencil build","start":"stencil build --dev --watch --serve","generate":"stencil generate","test:watch":"stencil-test --prod --watch"},"_npmUser":{"name":"am2310","email":"aakash.mishra12345@gmail.com"},"collection":"dist/collection/collection-manifest.json","_npmVersion":"11.11.0","description":"Reusable web component library for the Recipe Finder & Meal Planner app (recipe cards, search bar, day planner slots, modal, badges), built with StencilJS.","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"collection:main":"dist/collection/index.js","devDependencies":{"vitest":"^4.0.0","playwright":"^1.52.0","@types/node":"^22.13.5","@stencil/core":"^4.27.1 || ^5.0.0-0","@stencil/vitest":"^1.8.3","@vitest/browser-playwright":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/recipe-ui_0.1.0_1787989194917_0.23433514950141854","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@am2310/recipe-ui","version":"0.1.1","description":"Reusable web component library for the Recipe Finder & Meal Planner app (recipe cards, search bar, day planner slots, modal, badges), built with StencilJS.","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/recipe-ui/recipe-ui.esm.js","exports":{".":{"import":"./dist/recipe-ui/recipe-ui.esm.js","require":"./dist/recipe-ui/recipe-ui.cjs.js"},"./loader":{"import":"./loader/index.js","require":"./loader/index.cjs","types":"./loader/index.d.ts"},"./recipe-card":{"import":"./dist/components/recipe-card.js","types":"./dist/components/recipe-card.d.ts"},"./recipe-badge":{"import":"./dist/components/recipe-badge.js","types":"./dist/components/recipe-badge.d.ts"},"./search-bar":{"import":"./dist/components/search-bar.js","types":"./dist/components/search-bar.d.ts"},"./day-planner-slot":{"import":"./dist/components/day-planner-slot.js","types":"./dist/components/day-planner-slot.d.ts"},"./app-modal":{"import":"./dist/components/app-modal.js","types":"./dist/components/app-modal.d.ts"}},"publishConfig":{"access":"public"},"scripts":{"build":"stencil build","start":"stencil build --dev --watch --serve","test":"stencil-test --prod","test:watch":"stencil-test --prod --watch","generate":"stencil generate"},"devDependencies":{"@stencil/core":"^4.27.1 || ^5.0.0-0","@stencil/vitest":"^1.8.3","@types/node":"^22.13.5","@vitest/browser-playwright":"^4.0.0","playwright":"^1.52.0","vitest":"^4.0.0"},"license":"MIT","gitHead":"7ea88c2eed733eeb9fe36c60ecc49a27b383ecb1","_id":"@am2310/recipe-ui@0.1.1","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-7GWXWtzCVHtARfiZJtRN1Q7NLEJcx5OQWqGIDUH9vNpZezAulCtGReFlEMA/Ry00T1p5yiudq2rX3jJZuVCgrA==","shasum":"e86531bce07fe32a1f0d31d37984b0e5643c0573","tarball":"https://registry.npmjs.org/@am2310/recipe-ui/-/recipe-ui-0.1.1.tgz","fileCount":76,"unpackedSize":336776,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDnZ5XT6iRJUHZqCAum4X+MGp/i/07LUMJMrvcumzqKaQIgdKiqlYTagLyZabkd5saTRvC2TAnQIjdiNczi8wLKNho="}]},"_npmUser":{"name":"am2310","email":"aakash.mishra12345@gmail.com"},"directories":{},"maintainers":[{"name":"am2310","email":"aakash.mishra12345@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/recipe-ui_0.1.1_1787991178683_0.468821437274866"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-29T07:39:54.745Z","modified":"2026-08-29T08:12:58.986Z","0.1.0":"2026-08-29T07:39:55.059Z","0.1.1":"2026-08-29T08:12:58.840Z"},"license":"MIT","description":"Reusable web component library for the Recipe Finder & Meal Planner app (recipe cards, search bar, day planner slots, modal, badges), built with StencilJS.","maintainers":[{"name":"am2310","email":"aakash.mishra12345@gmail.com"}],"readme":"# @am2310/recipe-ui\n\nA small set of framework-agnostic web components built with [StencilJS](https://stenciljs.com/)\nfor the [Recipe Finder & Meal Planner](https://github.com/am2310/recipe-finder-meal-planner) app. Since\nthey compile down to plain Custom Elements, they work the same way in Svelte, React, Vue, or\na bare HTML page.\n\n## Components\n\n| Tag | Purpose |\n| --- | --- |\n| [`<recipe-card>`](./src/components/recipe-card/readme.md) | Recipe summary card: image, heading, subtitle, a favorite toggle, a `badges` slot, and a default footer slot for actions. |\n| [`<recipe-badge>`](./src/components/recipe-badge/readme.md) | Small tag/pill for a category, cuisine, or other label. |\n| [`<search-bar>`](./src/components/search-bar/readme.md) | Text input + button that emits a debounced `search` event. |\n| [`<day-planner-slot>`](./src/components/day-planner-slot/readme.md) | One cell of a weekly meal-planner grid; emits `assign`/`remove` events. |\n| [`<app-modal>`](./src/components/app-modal/readme.md) | Generic modal dialog shell with a default body slot and a `footer` slot. |\n\nEach component's linked readme is auto-generated from its source by Stencil's `docs-readme`\nbuild target (`npm run build`) and lists its exact props, events, and slots.\n\n## Installation\n\n```bash\nnpm install @am2310/recipe-ui\n```\n\n## Usage\n\nThis library ships with the `dist` (lazy-loading) output target, so components are registered\nvia a loader script rather than needing per-framework bindings. Call it once, as early as\npossible in your app:\n\n```ts\nimport { defineCustomElements } from '@am2310/recipe-ui/loader';\ndefineCustomElements();\n```\n\nThen use the components directly as HTML elements anywhere in your markup:\n\n```html\n<recipe-card heading=\"Spaghetti Carbonara\" image=\"/carbonara.jpg\" favorited=\"false\">\n\t<div slot=\"badges\">\n\t\t<recipe-badge label=\"Italian\" variant=\"area\"></recipe-badge>\n\t</div>\n\t<button>Add to Plan</button>\n</recipe-card>\n```\n\nListen for a component's custom events the way you would any DOM event:\n\n```ts\ndocument.querySelector('recipe-card')\n\t.addEventListener('favoriteToggle', (event) => {\n\t\tconsole.log(event.detail.favorited);\n\t});\n```\n\nSee the main app's [`+layout.svelte`](../app/src/routes/+layout.svelte) for a full\nSvelte-specific example of registering the loader and consuming these components.\n\n## Development\n\n```bash\nnpm start          # dev build with live reload\nnpm run build      # production build (dist/, loader/, per-component docs)\nnpm test           # component unit tests\n```\n\n## Publishing\n\n```bash\nnpm run build\nnpm publish --access public\n```\n\nBump `version` in `package.json` following semver before each publish.\n","readmeFilename":"readme.md"}