@gurpinderjitsingh/recipe-ui 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @yourscope/recipe-ui
+
+Reusable StencilJS web-component library for the Recipe Finder & Meal Planner app.
+Works in any framework (Svelte, React, Vue, plain HTML) because it compiles to
+standard Custom Elements.
+
+## Components
+- `<recipe-card>` – recipe summary card
+- `<recipe-search-bar>` – debounced search input
+- `<recipe-filter-bar>` – category/cuisine filter chips
+- `<recipe-rating>` – star rating, read-only or interactive
+- `<recipe-form>` – add/edit recipe form with built-in validation
+- `<meal-plan-day>` – one day column of the weekly planner
+- `<app-modal>` – generic modal dialog (uses default slot)
+- `<app-toast>` – notification toast
+
+## Local development
+```bash
+npm install
+npm start        # stencil dev server + playground at localhost:3333
+```
+
+## Build & publish
+```bash
+npm run build
+npm version patch|minor|major
+npm publish --access public
+```
+
+## Consuming in SvelteKit
+```bash
+npm install @yourscope/recipe-ui
+```
+```ts
+// call once, client-side only (e.g. in +layout.svelte onMount)
+import { defineCustomElements } from '@yourscope/recipe-ui/loader';
+defineCustomElements();
+```

package/dist/components/app-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppModal extends Components.AppModal, HTMLElement {}
+export const AppModal: {
+    prototype: AppModal;
+    new (): AppModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppToast extends Components.AppToast, HTMLElement {}
+export const AppToast: {
+    prototype: AppToast;
+    new (): AppToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => 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 const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  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 const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

package/dist/components/meal-plan-day.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MealPlanDay extends Components.MealPlanDay, HTMLElement {}
+export const MealPlanDay: {
+    prototype: MealPlanDay;
+    new (): MealPlanDay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeCard extends Components.RecipeCard, HTMLElement {}
+export const RecipeCard: {
+    prototype: RecipeCard;
+    new (): RecipeCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-filter-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeFilterBar extends Components.RecipeFilterBar, HTMLElement {}
+export const RecipeFilterBar: {
+    prototype: RecipeFilterBar;
+    new (): RecipeFilterBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeForm extends Components.RecipeForm, HTMLElement {}
+export const RecipeForm: {
+    prototype: RecipeForm;
+    new (): RecipeForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-rating.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeRating extends Components.RecipeRating, HTMLElement {}
+export const RecipeRating: {
+    prototype: RecipeRating;
+    new (): RecipeRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-search-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeSearchBar extends Components.RecipeSearchBar, HTMLElement {}
+export const RecipeSearchBar: {
+    prototype: RecipeSearchBar;
+    new (): RecipeSearchBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/recipe-ui/app-modal-BL_aVG1A.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, a as createEvent, h } from './index-DV5P9Jd8.js';
+
+const appModalCss = () => `:host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}`;
+
+const AppModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.open = false;
+        this.modalTitle = '';
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (h("div", { class: "overlay", onClick: () => this.close.emit() }, h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null)))));
+    }
+};
+AppModal.style = appModalCss();
+
+export { AppModal as A };
+//# sourceMappingURL=app-modal-BL_aVG1A.js.map
+
+//# sourceMappingURL=app-modal-BL_aVG1A.js.map

package/dist/recipe-ui/app-modal-BL_aVG1A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-modal-BL_aVG1A.js","sources":["src/components/app-modal/app-modal.css?tag=app-modal&encapsulation=shadow","src/components/app-modal/app-modal.tsx"],"sourcesContent":[":host { font-family: system-ui, sans-serif; }\n.overlay {\n  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);\n  display: flex; align-items: center; justify-content: center; z-index: 1000;\n}\n.dialog {\n  background: #fff; border-radius: 12px; min-width: 320px; max-width: 90vw;\n  max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n}\n.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n.header h2 { margin: 0; font-size: 18px; }\n.close-btn { border: none; background: none; font-size: 16px; cursor: pointer; color: #666; }\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/** Generic modal dialog. Body content is provided via the default slot. */\n@Component({\n  tag: 'app-modal',\n  styleUrl: 'app-modal.css',\n  shadow: true,\n})\nexport class AppModal {\n  @Prop() open: boolean = false;\n  @Prop() modalTitle: string = '';\n\n  @Event() close: EventEmitter<void>;\n\n  render() {\n    if (!this.open) return null;\n    return (\n      <div class=\"overlay\" onClick={() => this.close.emit()}>\n        <div class=\"dialog\" onClick={(e) => e.stopPropagation()}>\n          <div class=\"header\">\n            <h2>{this.modalTitle}</h2>\n            <button class=\"close-btn\" onClick={() => this.close.emit()} aria-label=\"Close\">\n              ✕\n            </button>\n          </div>\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,qhBAAqhB,CAAC;;MCQpiB,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAA,CAAA,IAAI,GAAY,KAAK;AACrB,QAAA,IAAA,CAAA,UAAU,GAAW,EAAE;AAsBhC;IAlBC,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QAC3B,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,EACrD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,OAAO,aAErE,CACL,EACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,CACF,CACF;;;;;;;"}

package/dist/recipe-ui/app-modal.entry.js

@@ -0,0 +1,5 @@
+export { A as app_modal } from './app-modal-BL_aVG1A.js';
+import './index-DV5P9Jd8.js';
+//# sourceMappingURL=app-modal.entry.esm.js.map
+
+//# sourceMappingURL=app-modal.entry.js.map

package/dist/recipe-ui/app-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-modal.entry.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/recipe-ui/app-toast-DjuZTKj8.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, a as createEvent, h } from './index-DV5P9Jd8.js';
+
+const appToastCss = () => `:host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}`;
+
+const AppToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.message = '';
+        this.type = 'info';
+        this.duration = 3000;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            setTimeout(() => this.dismiss.emit(), this.duration);
+        }
+    }
+    render() {
+        return (h("div", { key: 'd9dcb405ffd97bfa44fee10fe49103bd021938a2', class: `toast ${this.type}` }, h("span", { key: '5fd291b9766dc41189f49c11c836654d6663c8d1' }, this.message), h("button", { key: '9f93921f20b17520ce339378c5a1ca66ef6a04bc', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+    }
+};
+AppToast.style = appToastCss();
+
+export { AppToast as A };
+//# sourceMappingURL=app-toast-DjuZTKj8.js.map
+
+//# sourceMappingURL=app-toast-DjuZTKj8.js.map

package/dist/recipe-ui/app-toast-DjuZTKj8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toast-DjuZTKj8.js","sources":["src/components/app-toast/app-toast.css?tag=app-toast&encapsulation=shadow","src/components/app-toast/app-toast.tsx"],"sourcesContent":[":host { font-family: system-ui, sans-serif; display: block; }\n.toast {\n  display: flex; align-items: center; gap: 10px; padding: 10px 16px;\n  border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n.toast.success { background: #2ecc71; }\n.toast.error { background: #e74c3c; }\n.toast.info { background: #3498db; }\nbutton { border: none; background: none; color: inherit; cursor: pointer; margin-left: auto; }\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/** Simple notification toast. Auto-dismisses after `duration` ms if > 0. */\n@Component({\n  tag: 'app-toast',\n  styleUrl: 'app-toast.css',\n  shadow: true,\n})\nexport class AppToast {\n  @Prop() message: string = '';\n  @Prop() type: 'success' | 'error' | 'info' = 'info';\n  @Prop() duration: number = 3000;\n\n  @Event() dismiss: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.duration > 0) {\n      setTimeout(() => this.dismiss.emit(), this.duration);\n    }\n  }\n\n  render() {\n    return (\n      <div class={`toast ${this.type}`}>\n        <span>{this.message}</span>\n        <button onClick={() => this.dismiss.emit()} aria-label=\"Dismiss\">✕</button>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,6XAA6X,CAAC;;MCQ5Y,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAW,EAAE;AACpB,QAAA,IAAA,CAAA,IAAI,GAAiC,MAAM;AAC3C,QAAA,IAAA,CAAA,QAAQ,GAAW,IAAI;AAkBhC;IAdC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;AACrB,YAAA,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC;;;IAIxD,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,SAAS,EAAA,EAAA,QAAA,CAAW,CACvE;;;;;;;"}

package/dist/recipe-ui/app-toast.entry.js

@@ -0,0 +1,5 @@
+export { A as app_toast } from './app-toast-DjuZTKj8.js';
+import './index-DV5P9Jd8.js';
+//# sourceMappingURL=app-toast.entry.esm.js.map
+
+//# sourceMappingURL=app-toast.entry.js.map

package/dist/recipe-ui/app-toast.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-toast.entry.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}