@gurpinderjitsingh/recipe-ui 0.1.0 → 0.1.2

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;

package/dist/cjs/app-modal_7.cjs.entry.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var index = require('./index-CRcwY0Fb.js');
+
+const recipeCardCss = () => `:host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}`;
+
+const RecipeCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.favoriteToggle = index.createEvent(this, "favoriteToggle");
+        this.cardClick = index.createEvent(this, "cardClick");
+        /** Category / cuisine label */
+        this.category = '';
+        /** Whether this recipe is currently favorited */
+        this.favorite = false;
+        this.onFavoriteClick = (e) => {
+            e.stopPropagation();
+            this.favoriteToggle.emit({ favorite: !this.favorite });
+        };
+    }
+    render() {
+        return (index.h("div", { key: 'abd19b1d63409b52cf66f348131f5f6f77bb47a6', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: '1292c3f6dfe7d3b399943004f764c41a3d072188', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '0efdc01af349d011ca0e11c4df5438b79876b467', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: '66c2c4d845d9cc082c07f24f5d827313f6ad51c4', class: "body" }, index.h("h3", { key: '779fc629c3b97b6158f99440d9bb17fafb708dd3' }, this.recipeTitle), this.category && index.h("span", { key: '259ec599a43a5c8a279ad5993ba36f8602125b76', class: "category" }, this.category), index.h("div", { key: '58ab20f9682b4b73b7d027571496641cbfa76d0b', class: "actions" }, index.h("slot", { key: '28103422d993e58b133c2350e37c06fddf24300f', name: "actions" })))));
+    }
+};
+RecipeCard.style = recipeCardCss();
+
+const recipeSearchBarCss = () => `:host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}`;
+
+const RecipeSearchBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.search = index.createEvent(this, "search");
+        this.placeholder = 'Search recipes...';
+        this.value = '';
+        this.debounceMs = 350;
+        this.internalValue = '';
+        this.onInput = (e) => {
+            this.internalValue = e.target.value;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.search.emit({ value: this.internalValue });
+            }, this.debounceMs);
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                clearTimeout(this.timer);
+                this.search.emit({ value: this.internalValue });
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    onValuePropChange(newVal) {
+        this.internalValue = newVal;
+    }
+    render() {
+        return (index.h("div", { key: 'fe5eb2928308fb2496badd784e684b19df52501a', class: "wrap" }, index.h("input", { key: '3d4abb23a1155075a8889e015819b37a8569f6f5', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: 'f33f95b5bfcad9146903a2eb4448932a1d68edb7', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValuePropChange": 0
+            }]
+    }; }
+};
+RecipeSearchBar.style = recipeSearchBarCss();
+
+const recipeFilterBarCss = () => `:host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}`;
+
+const RecipeFilterBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.filterChange = index.createEvent(this, "filterChange");
+        this.categories = [];
+        this.active = '';
+    }
+    select(value) {
+        this.filterChange.emit({ value });
+    }
+    render() {
+        const cats = Array.isArray(this.categories) ? this.categories : [];
+        return (index.h("div", { key: '13bc63f39ebfc55c0f05c035b63036121f7b3930', class: "wrap" }, index.h("button", { key: '8aeb99775268204433a8f9831eca9873066c7b9e', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+    }
+};
+RecipeFilterBar.style = recipeFilterBarCss();
+
+const recipeRatingCss = () => `:host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}`;
+
+const RecipeRating = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ratingChange = index.createEvent(this, "ratingChange");
+        this.value = 0;
+        this.readonly = false;
+        this.max = 5;
+    }
+    render() {
+        const stars = Array.from({ length: this.max }, (_, i) => i + 1);
+        return (index.h("div", { key: '1e1c67012185e7aaecfcc89671532946262a6957', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+    }
+};
+RecipeRating.style = recipeRatingCss();
+
+const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
+
+const RecipeForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.save = index.createEvent(this, "save");
+        this.cancel = index.createEvent(this, "cancel");
+        this.title = '';
+        this.image = '';
+        this.category = '';
+        this.ingredients = [''];
+        this.instructions = '';
+        this.errors = {};
+        this.onSubmit = (e) => {
+            e.preventDefault();
+            if (!this.validate())
+                return;
+            const data = {
+                id: this.initialData?.id,
+                title: this.title.trim(),
+                image: this.image.trim(),
+                category: this.category.trim(),
+                ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
+                instructions: this.instructions.trim(),
+            };
+            this.save.emit(data);
+        };
+        this.addIngredient = () => {
+            this.ingredients = [...this.ingredients, ''];
+        };
+        this.removeIngredient = (index) => {
+            this.ingredients = this.ingredients.filter((_, i) => i !== index);
+        };
+    }
+    componentWillLoad() {
+        this.loadInitialData();
+    }
+    onInitialDataChange() {
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        let data;
+        if (typeof this.initialData === 'string' && this.initialData) {
+            try {
+                data = JSON.parse(this.initialData);
+            }
+            catch {
+                data = undefined;
+            }
+        }
+        else if (this.initialData && typeof this.initialData === 'object') {
+            data = this.initialData;
+        }
+        if (data) {
+            this.title = data.title ?? '';
+            this.image = data.image ?? '';
+            this.category = data.category ?? '';
+            this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
+            this.instructions = data.instructions ?? '';
+        }
+    }
+    validate() {
+        const errors = {};
+        if (!this.title.trim())
+            errors.title = 'Title is required.';
+        const cleanIngredients = this.ingredients.map((i) => i.trim()).filter(Boolean);
+        if (cleanIngredients.length === 0)
+            errors.ingredients = 'Add at least one ingredient.';
+        if (!this.instructions.trim())
+            errors.instructions = 'Instructions are required.';
+        this.errors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    updateIngredient(index, value) {
+        const next = [...this.ingredients];
+        next[index] = value;
+        this.ingredients = next;
+    }
+    render() {
+        return (index.h("form", { key: 'bb5c6c7f1b421b55515994f0256c5b39ea781632', onSubmit: this.onSubmit }, index.h("slot", { key: '16940e4c8368aa6b546254ff8db7b28885a4409b', name: "header" }), index.h("label", { key: '7e3d6ba3231039ecdcca6a4c4314cf27038e1732' }, "Title", index.h("input", { key: 'f86056de021f040b8bbf3bf67a0d40ba526ad754', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: '54d552a15e037f54b2c6f0fd13cb4b685c25c76c', class: "error" }, this.errors.title)), index.h("label", { key: '376da4904e7919b5540ee8dabf494f6aab053523' }, "Image URL", index.h("input", { key: '761b64f0e5153ca0e2bf61a7db4c4106ae2f79ef', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("label", { key: '0b7ff19b8718540b08921bb7f301be5cacf0df36' }, "Category", index.h("input", { key: '4f1bae8316d588e93006a12e0d824579ddbece43', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), index.h("div", { key: '280d98b91621defa547dbcc35c0cb6da55a67b5f', class: "field" }, index.h("span", { key: '96a015e055b434441eba85dcb89470823d0ebcc8' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: '697cda22eb5bdf42e50ac40669619fbc04140405', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '6a46c393bdd9af8e1e1255792d5532daf433f25b', class: "error" }, this.errors.ingredients)), index.h("label", { key: '6abdbe72d381c3a0a56c46560a92b1e533fcce2a' }, "Instructions", index.h("textarea", { key: '1d3b62d6543e42a4cd0755522f657c13e2d1e4a7', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: 'b5845bb5cd0ddd40de21f074307513d376a05f56', class: "error" }, this.errors.instructions)), index.h("div", { key: '778adeff176e2d2b080aad59602db6e92a69ea1c', class: "footer" }, index.h("slot", { key: 'c9584d6606ed33f616eb8f3035aa4a0fd5086af3', name: "footer" }), index.h("button", { key: 'b2e17dfb528996a1e6a8a1f8aac36b36e3b07c3a', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: 'a9e91907aa44c8587a2c492f869d0cb5daa942fe', type: "submit", class: "save-btn" }, "Save Recipe"))));
+    }
+    static get watchers() { return {
+        "initialData": [{
+                "onInitialDataChange": 0
+            }]
+    }; }
+};
+RecipeForm.style = recipeFormCss();
+
+const mealPlanDayCss = () => `:host{display:block;font-family:system-ui, sans-serif}.day-col{border:1px solid #eee;border-radius:10px;padding:10px;min-width:150px;display:flex;flex-direction:column;gap:8px;background:#fafafa}h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;color:#555}.meals{display:flex;flex-direction:column;gap:6px;min-height:40px}.meal-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:8px;padding:4px 6px;font-size:12px}.meal-chip img{width:24px;height:24px;border-radius:4px;object-fit:cover}.meal-chip .title{flex:1}.meal-chip button{border:none;background:none;cursor:pointer;color:#999}.empty{font-size:12px;color:#aaa;margin:4px 0}.add-btn{border:1px dashed #ccc;background:none;border-radius:8px;padding:6px;font-size:12px;cursor:pointer;color:#666}`;
+
+const MealPlanDay = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.assignMeal = index.createEvent(this, "assignMeal");
+        this.removeMeal = index.createEvent(this, "removeMeal");
+        this.day = '';
+        this.meals = [];
+    }
+    render() {
+        const meals = Array.isArray(this.meals) ? this.meals : [];
+        return (index.h("div", { key: '7a0b592fd4b8d9971d7f4912cecb5f9126be11b3', class: "day-col" }, index.h("h3", { key: 'b0f1f6a717ad409e6339219ea2f71b73d73bb1f3' }, this.day), index.h("div", { key: '2c978721af3aad27042572dd7825d5f2b5b659fb', class: "meals" }, meals.map((m) => (index.h("div", { class: "meal-chip" }, m.image && index.h("img", { src: m.image, alt: m.title }), index.h("span", { class: "title" }, m.title), index.h("button", { onClick: () => this.removeMeal.emit({ day: this.day, mealId: m.id }), "aria-label": "Remove meal" }, "\u2715")))), meals.length === 0 && index.h("p", { key: '326b5f3201df2416f43debc7257918a60a6ab6dd', class: "empty" }, "No meals planned")), index.h("button", { key: '3532de633a1f6cb83bb70f91a2df8fe1a9fcbc14', class: "add-btn", onClick: () => this.assignMeal.emit({ day: this.day }) }, "+ Add meal")));
+    }
+};
+MealPlanDay.style = mealPlanDayCss();
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "close");
+        this.open = false;
+        this.modalTitle = '';
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, index.h("div", { class: "header" }, index.h("h2", null, this.modalTitle), index.h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), index.h("div", { class: "body" }, index.h("slot", null))));
+    }
+};
+AppModal.style = appModalCss();
+
+exports.app_modal = AppModal;
+exports.meal_plan_day = MealPlanDay;
+exports.recipe_card = RecipeCard;
+exports.recipe_filter_bar = RecipeFilterBar;
+exports.recipe_form = RecipeForm;
+exports.recipe_rating = RecipeRating;
+exports.recipe_search_bar = RecipeSearchBar;

package/dist/cjs/app-toast.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-CRcwY0Fb.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) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss");
+        this.message = '';
+        this.type = 'info';
+        this.duration = 3000;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            setTimeout(() => this.dismiss.emit(), this.duration);
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'd9dcb405ffd97bfa44fee10fe49103bd021938a2', class: `toast ${this.type}` }, index.h("span", { key: '5fd291b9766dc41189f49c11c836654d6663c8d1' }, this.message), index.h("button", { key: '9f93921f20b17520ce339378c5a1ca66ef6a04bc', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+    }
+};
+AppToast.style = appToastCss();
+
+exports.app_toast = AppToast;