{"_id":"@anchalmehta/recipe-ui-components","_rev":"4-b5fe47dc0fe53b6c10a93b03f4657854","name":"@anchalmehta/recipe-ui-components","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@anchalmehta/recipe-ui-components","version":"1.0.0","keywords":["stencil","web-components","svelte","sveltekit","recipe","ui-components"],"author":{"name":"Yogendra Sharma"},"license":"MIT","_id":"@anchalmehta/recipe-ui-components@1.0.0","maintainers":[{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"}],"homepage":"https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner/tree/main/recipe-ui-components#readme","bugs":{"url":"https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner/issues"},"dist":{"shasum":"4da13a45de2c8fc9af9af0020e6862e6e2c80935","tarball":"https://registry.npmjs.org/@anchalmehta/recipe-ui-components/-/recipe-ui-components-1.0.0.tgz","fileCount":86,"integrity":"sha512-7yOG5gbjp3D5fQx81365oew2dzxY6hFPnmcwXIvJireHDMfB/GB2ipd5xP96g3bZivJzof2iKiVDFAFIa9ekKg==","signatures":[{"sig":"MEYCIQDLcjaMB3Sb2T5JpueE1z02bZ+xeIfuXnq6dJcqXWXCXwIhAMDpjggdbXvani0cm5fqKLbavVvZUa6jpsxYrNtlF8pk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":342678},"main":"dist/index.cjs.js","types":"dist/types/index.d.ts","unpkg":"dist/recipe-ui-components/recipe-ui-components.esm.js","module":"dist/index.js","exports":{".":{"import":"./dist/recipe-ui-components/recipe-ui-components.esm.js","require":"./dist/recipe-ui-components/recipe-ui-components.cjs.js"},"./loader":{"types":"./loader/index.d.ts","import":"./loader/index.js","require":"./loader/index.cjs"}},"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":"anchalmehta","email":"aanchalmehta567@gmail.com"},"collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner.git","type":"git","directory":"recipe-ui-components"},"_npmVersion":"11.17.0","description":"Reusable Web Component library (built with StencilJS) for the Recipe Finder & Meal Planner app: recipe cards, search bar, badges, meal-plan day slots and empty states.","directories":{},"_nodeVersion":"24.19.0","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-components_1.0.0_1787767589131_0.7312774782793623","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@anchalmehta/recipe-ui-components","version":"1.0.1","keywords":["stencil","web-components","svelte","sveltekit","recipe","ui-components"],"author":{"name":"Yogendra Sharma"},"license":"MIT","_id":"@anchalmehta/recipe-ui-components@1.0.1","maintainers":[{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"}],"homepage":"https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner/tree/main/recipe-ui-components#readme","bugs":{"url":"https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner/issues"},"dist":{"shasum":"4ef3a664dfb5fb82b89555cb51474af6ad6ab2f2","tarball":"https://registry.npmjs.org/@anchalmehta/recipe-ui-components/-/recipe-ui-components-1.0.1.tgz","fileCount":87,"integrity":"sha512-LIzl0v6S0AzJfPSvHI2ZokLhjyXC06uB7GR46Iuq80B+PeNFvdbAnBTFl0mjHjxkTJIqyI0N06mzHZCTrEnJ4w==","signatures":[{"sig":"MEQCIE1RrEZkjGqyYPLITlEaaxthPUhgqvzT4GMVLh5BemQLAiAk+A4A5+O8vmdOqptdb5oGg90gWeBxF+hU31hclCv9ow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":343377},"main":"dist/index.cjs.js","types":"dist/types/index.d.ts","unpkg":"dist/recipe-ui-components/recipe-ui-components.esm.js","module":"elements.js","exports":{".":{"import":"./elements.js","require":"./dist/recipe-ui-components/recipe-ui-components.cjs.js"},"./loader":{"types":"./loader/index.d.ts","import":"./loader/index.js","require":"./loader/index.cjs"}},"gitHead":"8ba70675d1fd85c116d790a5d17650c3f9b3667d","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":"anchalmehta","email":"aanchalmehta567@gmail.com"},"collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/anchalmehta567/Recipe_Finder-Meal_Planner.git","type":"git","directory":"recipe-ui-components"},"_npmVersion":"11.17.0","description":"Reusable Web Component library (built with StencilJS) for the Recipe Finder & Meal Planner app: recipe cards, search bar, badges, meal-plan day slots and empty states.","directories":{},"_nodeVersion":"24.19.0","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-components_1.0.1_1787769647693_0.7123453476276069","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@anchalmehta/recipe-ui-components","version":"1.0.2","keywords":["stencil","web-components","svelte","sveltekit","recipe","ui-components"],"author":{"name":"Yogendra Sharma"},"license":"MIT","_id":"@anchalmehta/recipe-ui-components@1.0.2","maintainers":[{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"}],"homepage":"https://github.com/anchalmehta567/recipe-planner/tree/main/recipe-ui-components#readme","bugs":{"url":"https://github.com/anchalmehta567/recipe-planner/issues"},"dist":{"shasum":"1bccb1550f0992c1dc3db990e844abb877c69bf7","tarball":"https://registry.npmjs.org/@anchalmehta/recipe-ui-components/-/recipe-ui-components-1.0.2.tgz","fileCount":87,"integrity":"sha512-t7TuzjpRpQiQXnUT71AmbHKkUEEtcG39YoPYX5pyR4/ckqV1pkDC5ESKAaEA0PvV+6+UQTQlQSsSBuG1Bg565g==","signatures":[{"sig":"MEUCIF3gj+Z1sZ+yFvn1wbDcQv6+L+QRJ5/8ezS0r1nS1QdWAiEAl8fyWrqJKhvLEJBn3rTrDMY2/9v4mO50lTDzRKQ5GyI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":343421},"main":"dist/index.cjs.js","types":"dist/types/index.d.ts","unpkg":"dist/recipe-ui-components/recipe-ui-components.esm.js","module":"elements.js","exports":{".":{"import":"./elements.js","require":"./dist/recipe-ui-components/recipe-ui-components.cjs.js"},"./loader":{"types":"./loader/index.d.ts","import":"./loader/index.js","require":"./loader/index.cjs"}},"gitHead":"2e4df2282c9157fb3d00f224cc906c4214395f88","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":"anchalmehta","email":"aanchalmehta567@gmail.com"},"collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/anchalmehta567/recipe-planner.git","type":"git","directory":"recipe-ui-components"},"_npmVersion":"11.17.0","description":"Reusable Web Component library (built with StencilJS) for the Recipe Finder & Meal Planner app: recipe cards, search bar, badges, meal-plan day slots and empty states.","directories":{},"_nodeVersion":"24.19.0","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-components_1.0.2_1787773268948_0.446373781374797","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@anchalmehta/recipe-ui-components","version":"1.0.3","description":"Reusable Web Component library (built with StencilJS) for the Recipe Finder & Meal Planner app: recipe cards, search bar, badges, meal-plan day slots and empty states.","main":"dist/index.cjs.js","module":"elements.js","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/recipe-ui-components/recipe-ui-components.esm.js","exports":{".":{"import":"./elements.js","require":"./dist/recipe-ui-components/recipe-ui-components.cjs.js"},"./loader":{"import":"./loader/index.js","require":"./loader/index.cjs","types":"./loader/index.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/anchalmehta567/recipe-planner.git","directory":"recipe-ui-components"},"bugs":{"url":"https://github.com/anchalmehta567/recipe-planner/issues"},"homepage":"https://github.com/anchalmehta567/recipe-planner/tree/master/recipe-ui-components#readme","keywords":["stencil","web-components","svelte","sveltekit","recipe","ui-components"],"author":{"name":"Yogendra Sharma"},"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","_id":"@anchalmehta/recipe-ui-components@1.0.3","gitHead":"18994fcbac24936fa0714eb43f44ff2baaab3704","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-mejAsW+EcRCgV/ZCsJKND1fFSJ9ECPihV46IrNvZUqq8tT4ilzPbe4TUvIFkKl3QOR34OVTqd+C8eBplQSTZAQ==","shasum":"51cfe2f8f01cde1312bf22fa16be88eb700806d9","tarball":"https://registry.npmjs.org/@anchalmehta/recipe-ui-components/-/recipe-ui-components-1.0.3.tgz","fileCount":87,"unpackedSize":343977,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGPqYLo5LcbFHy6cY8Hvngg0+ftNp/uyvcsY4a5DQuXAAiEAxjWDI8eYu6ofmhwJuoZZQagmyfxupNTiYGuEIxu2g1A="}]},"_npmUser":{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"},"directories":{},"maintainers":[{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/recipe-ui-components_1.0.3_1788158758302_0.3465451358104681"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-26T18:06:28.860Z","modified":"2026-08-31T06:45:58.614Z","1.0.0":"2026-08-26T18:06:29.294Z","1.0.1":"2026-08-26T18:40:47.929Z","1.0.2":"2026-08-26T19:41:09.110Z","1.0.3":"2026-08-31T06:45:58.435Z"},"bugs":{"url":"https://github.com/anchalmehta567/recipe-planner/issues"},"author":{"name":"Yogendra Sharma"},"license":"MIT","homepage":"https://github.com/anchalmehta567/recipe-planner/tree/master/recipe-ui-components#readme","keywords":["stencil","web-components","svelte","sveltekit","recipe","ui-components"],"repository":{"type":"git","url":"git+https://github.com/anchalmehta567/recipe-planner.git","directory":"recipe-ui-components"},"description":"Reusable Web Component library (built with StencilJS) for the Recipe Finder & Meal Planner app: recipe cards, search bar, badges, meal-plan day slots and empty states.","maintainers":[{"name":"anchalmehta","email":"aanchalmehta567@gmail.com"}],"readme":"# @anchalmehta/recipe-ui-components\n\nReusable [StencilJS](https://stenciljs.com) web-component library for the [Recipe Finder & Meal Planner](https://github.com/anchalmehta567/recipe-planner) app. Framework-agnostic custom elements consumed by the SvelteKit app in `recipe-planner-app/`, but usable from any framework (or none).\n\n- **npm:** https://www.npmjs.com/package/@anchalmehta/recipe-ui-components\n- **Source:** [`recipe-ui-components/`](https://github.com/anchalmehta567/recipe-planner/tree/master/recipe-ui-components)\n- **Live app using this library:** https://recipe-finder-meal-planner.netlify.app\n\n## Install\n\n```sh\nnpm install @anchalmehta/recipe-ui-components\n```\n\nRegister all components once, near your app's entry point:\n\n```ts\nimport '@anchalmehta/recipe-ui-components';\n```\n\nThis uses the `dist-custom-elements` build, so importing the package auto-defines every `rp-*` custom element — no separate loader script needed.\n\n## Components\n\n### `<rp-search-bar>`\n\nDebounced search input.\n\n| Prop          | Type     | Default              | Notes                              |\n| ------------- | -------- | --------------------- | ----------------------------------- |\n| `value`       | `string` | `''`                  | Controlled from the outside         |\n| `placeholder` | `string` | `'Search recipes...'` |                                      |\n| `debounce`    | `number` | `300`                 | ms before `rpSearchChange` fires    |\n\nEvents: `rpSearchChange` (debounced, `{ value }`), `rpSearchSubmit` (on Enter/submit, `{ value }`).\nSlots: `icon` (overrides the default 🔍).\n\n```html\n<rp-search-bar placeholder=\"Search recipes...\"></rp-search-bar>\n<script>\n  document.querySelector('rp-search-bar').addEventListener('rpSearchChange', (e) => {\n    console.log(e.detail.value);\n  });\n</script>\n```\n\n### `<rp-recipe-card>`\n\nRecipe summary card.\n\n| Prop          | Type      | Notes                    |\n| ------------- | --------- | ------------------------- |\n| `recipeId`    | `string`  | required                  |\n| `recipeTitle` | `string`  | required                  |\n| `image`       | `string`  | optional thumbnail        |\n| `category`    | `string`  | optional                  |\n| `area`        | `string`  | optional cuisine          |\n| `favorite`    | `boolean` | default `false`           |\n| `clickable`   | `boolean` | default `true`            |\n\nEvents: `rpCardClick` (`{ recipeId }`), `rpFavoriteToggle` (`{ recipeId, favorite }`).\nSlot: default — extra actions rendered under the tags (e.g. an \"Add to plan\" button).\n\n```html\n<rp-recipe-card recipe-id=\"52772\" recipe-title=\"Teriyaki Chicken\" category=\"Chicken\" area=\"Japanese\">\n  <button slot=\"action\">Add to plan</button>\n</rp-recipe-card>\n```\n\n### `<rp-day-slot>`\n\nOne day of the weekly meal planner.\n\n| Prop           | Type     | Notes                         |\n| -------------- | -------- | ------------------------------ |\n| `day`          | `string` | required, e.g. `\"Monday\"`      |\n| `recipeTitle`  | `string` | assigned recipe, if any        |\n| `recipeImage`  | `string` | assigned recipe's image        |\n\nEvent: `rpRemoveMeal` (`{ day }`).\nSlot: default — rendered only while the day is empty (e.g. an \"Assign recipe\" control).\n\n### `<rp-badge>`\n\nSmall pill/chip for tags, categories, cuisines.\n\n| Prop      | Type                                                              | Default     |\n| --------- | ------------------------------------------------------------------ | ----------- |\n| `label`   | `string`                                                            | required    |\n| `variant` | `'default' \\| 'category' \\| 'area' \\| 'success' \\| 'warning'`      | `'default'` |\n\nSlot: default — prefix icon.\n\n### `<rp-empty-state>`\n\nGeneric empty-state placeholder.\n\n| Prop      | Type     | Default |\n| --------- | -------- | ------- |\n| `heading` | `string` | required |\n| `message` | `string` | optional |\n| `icon`    | `string` | `'🍽️'`  |\n\nSlot: default — call-to-action button/link.\n\n## Development\n\n```sh\nnpm install\nnpx playwright install chromium-headless-shell   # one-time, needed before `npm test`\nnpm start        # dev build + watch + local demo server\nnpm run build     # production build (dist/ + loader/)\nnpm test          # unit + browser component tests (Vitest + Playwright)\n```\n\n> `npm install` does not download Playwright's browser binary. Skipping the `playwright install` step will make `npm test` fail with `Executable doesn't exist ... chrome-headless-shell.exe`.\n\n## Publishing\n\n```sh\nnpm login\nnpm run build\nnpm publish --access public\n```\n\nFollows semver: `1.0.0` was the first stable release; see the [npm page](https://www.npmjs.com/package/@anchalmehta/recipe-ui-components) for the current version.\n","readmeFilename":"readme.md"}