recipe-planner-ui 1.0.0

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "recipe-planner-ui",
+  "version": "1.0.0",
+  "description": "Framework-agnostic web components for recipe discovery and meal planning UIs.",
+  "license": "MIT",
+  "author": "sahilsoni432",
+  "//": "No \"type\": \"module\" here. Stencil emits a dual build whose CommonJS half uses .js files; declaring the package as ESM would make Node parse those as modules and fail.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sahilsoni432/Meal-Planner.git",
+    "directory": "recipe-ui"
+  },
+  "homepage": "https://github.com/sahilsoni432/Meal-Planner/tree/main/recipe-ui#readme",
+  "bugs": {
+    "url": "https://github.com/sahilsoni432/Meal-Planner/issues"
+  },
+  "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-planner-ui/recipe-planner-ui.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./dist/recipe-planner-ui/recipe-planner-ui.css": "./dist/recipe-planner-ui/recipe-planner-ui.css",
+    "./dist/*": "./dist/*",
+    "./components/*.js": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "sideEffects": [
+    "dist/recipe-planner-ui/**",
+    "loader/**"
+  ],
+  "keywords": [
+    "stencil",
+    "web-components",
+    "custom-elements",
+    "recipe",
+    "meal-planner",
+    "design-system"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.27.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.5"
+  }
+}

package/readme.md

@@ -0,0 +1,131 @@
+# recipe-planner-ui
+
+Framework-agnostic web components for recipe discovery and meal planning interfaces, built
+with [Stencil](https://stenciljs.com). They are standards-based custom elements, so they work
+in Svelte, React, Vue, Angular, or a plain `.html` file with no framework at all.
+
+```bash
+npm install recipe-planner-ui
+```
+
+## Registering the components
+
+The package ships a lazy loader that registers every tag:
+
+```js
+import { defineCustomElements } from 'recipe-planner-ui/loader';
+
+defineCustomElements();
+```
+
+In SvelteKit or any other SSR framework, register in the browser only — custom elements are a
+client-side API:
+
+```ts
+// src/routes/+layout.ts
+import { browser } from '$app/environment';
+
+export async function load() {
+  if (browser) {
+    const { defineCustomElements } = await import('recipe-planner-ui/loader');
+    await defineCustomElements();
+  }
+}
+```
+
+Alternatively, import individual components for tree-shaking:
+
+```js
+import { defineCustomElement as defineRecipeCard } from 'recipe-planner-ui/components/rp-recipe-card.js';
+
+defineRecipeCard();
+```
+
+## Passing data
+
+Primitive props can be set as attributes. **Array and object props have no attribute
+representation and must be assigned as DOM properties** — this is a rule of the custom
+elements standard, not a limitation of this library.
+
+```html
+<rp-recipe-card recipe-id="api:52772" recipe-title="Teriyaki Chicken" favorite></rp-recipe-card>
+
+<rp-filter-chips id="chips"></rp-filter-chips>
+<script>
+  document.getElementById('chips').options = ['Chicken', 'Seafood', 'Dessert'];
+</script>
+```
+
+Most frameworks, Svelte included, set properties automatically when a property of that name
+exists on the element.
+
+## Components
+
+| Tag | Key props | Events | Slots |
+|---|---|---|---|
+| `rp-recipe-card` | `recipeId`, `recipeTitle`, `image`, `category`, `favorite` | `rpFavoriteToggle` | default, `actions` |
+| `rp-search-bar` | `value`, `placeholder`, `label` | `rpSearch`, `rpClear` | — |
+| `rp-filter-chips` | `options[]`, `selected` | `rpFilterChange` | — |
+| `rp-ingredient-list` | `items[]` | — | `heading`, default |
+| `rp-day-slot` | `day`, `dayLabel`, `meals[]`, `days[]` | `rpAddMeal`, `rpRemoveMeal`, `rpMoveMeal` | default |
+| `rp-modal` | `open`, `heading` | `rpClose` | default, `footer` |
+
+Per-component API documentation, generated from the source, lives in each component's
+directory under `src/components/`.
+
+### Events
+
+All events bubble and are composed, so they can be handled on any ancestor:
+
+```js
+document.addEventListener('rpFavoriteToggle', (event) => {
+  const { recipeId, favorite } = event.detail;
+});
+```
+
+`rp-recipe-card` emits the *intended next state* and never writes to its own `favorite` prop.
+The consumer owns the data and decides whether to apply the change.
+
+### `rp-modal`
+
+Handles its own focus trap, Escape-to-close, and focus restoration. It exposes one imperative
+method for the case a prop cannot express:
+
+```js
+await document.querySelector('rp-modal').focusFirstField();
+```
+
+## Styling
+
+Components use `scoped` encapsulation rather than shadow DOM, so a consuming application's
+global CSS reaches them. Theming is done by overriding the semantic token tier:
+
+```css
+:root {
+  --rp-color-accent: #7048e8;
+  --rp-radius-lg: 4px;
+}
+```
+
+Tokens are organised in three tiers — primitive (`--rp-green-600`), semantic
+(`--rp-color-accent`), and component-level. Override the semantic tier to retheme the library;
+the primitive tier is an implementation detail.
+
+The package also ships pre-hydration sizing under `:not(:defined)` so pages do not reflow as
+elements upgrade.
+
+## Local development
+
+```bash
+npm install
+npm start     # dev server with a demo page at http://localhost:3333
+npm run build # production build
+```
+
+`src/index.html` is a plain HTML page exercising every component and logging every event —
+the quickest way to verify a change, and a demonstration that these components need no
+framework.
+
+## License
+
+MIT