@seepmaini/stencil-recipe-components 0.0.1

package/dist/collection/components/no-recipe-found/no-recipe-found.css

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+  font-family: Arial, sans-serif;
+}
+.icon {
+  width: 70px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  background: #ffffff;
+  font-size: 32px;
+}
+.empty-state {
+  width: min(650px, calc(100% - 40px));
+  margin: 50px auto;
+  padding: 55px 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 20px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+}
+h2 {
+  margin: 0 0 10px;
+  color: #2c2c2c;
+  font-size: 28px;
+  font-weight: 700;
+}
+p {
+  max-width: 500px;
+  margin: 0 0 25px;
+  color: #eeeeee;
+  font-size: 15px;
+  line-height: 1.6;
+}
+button {
+  padding: 11px 20px;
+  border: none;
+  border-radius: 10px;
+  background: #f97316;
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+}
+button:hover {
+  background: #ea580c;
+  transform: translateY(-2px);
+}
+button:active {
+  transform: translateY(0);
+}
+@media (max-width: 600px) {
+  .empty-state {
+    width: calc(100% - 24px);
+    margin: 35px auto;
+    padding: 40px 20px;
+  }
+  h2 {
+    font-size: 24px;
+  }
+  p {
+    font-size: 14px;
+  }
+}

package/dist/collection/components/no-recipe-found/no-recipe-found.js

@@ -0,0 +1,107 @@
+import { h } from "@stencil/core";
+export class NoRecipesFound {
+    header = 'No Recipes Found';
+    message = 'We couldn’t find any recipes matching your search. Try a different recipe, category, cuisine, or ingredient.';
+    buttonText = 'Clear Search';
+    clear;
+    handleClear = () => {
+        this.clear.emit();
+    };
+    render() {
+        return (h("section", { key: '8f32c60bdbe3662614a69ed6df89ee3100381f74', class: "empty-state" }, h("div", { key: 'ab15444f85192f5a0599a8639ee78513359d0489', class: "icon", "aria-hidden": "true" }, "\uD83C\uDF7D\uFE0F"), h("h2", { key: '1a4fac73782ea53e4405b38f28686eea414d1d94' }, this.header), h("p", { key: 'ee205e4e18009cc93995d717bf9129c265f293f7' }, this.message), h("button", { key: '90f4c76d61253e050ae0fc8ff005dfba2e053d98', type: "button", onClick: this.handleClear }, this.buttonText)));
+    }
+    static get is() { return "no-recipe-found"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["no-recipe-found.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["no-recipe-found.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "'No Recipes Found'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "'We couldn\u2019t find any recipes matching your search. Try a different recipe, category, cuisine, or ingredient.'"
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-text",
+                "defaultValue": "'Clear Search'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/recipe-browser/recipe-browser.css

@@ -0,0 +1,183 @@
+:host {
+  display: block;
+  font-family: Arial, sans-serif;
+  color: #2c2c2c;
+}
+.wrapper {
+  width: min(1200px, calc(100% - 40px));
+  margin: 0 auto;
+  padding: 45px 0;
+}
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+}
+.heading {
+  max-width: 650px;
+}
+.eyebrow {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #f97316;
+}
+h2 {
+  margin: 0;
+  font-size: clamp(28px, 4vw, 40px);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+.heading p {
+  margin: 10px 0 0;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #777777;
+}
+.clear-button {
+  flex-shrink: 0;
+  padding: 10px 17px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: white;
+  color: #2c2c2c;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+.clear-button:hover {
+  background: #fff7ed;
+  border-color: #fdba74;
+  color: #ea580c;
+}
+.filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+.filter-card {
+  display: flex;
+  gap: 16px;
+  padding: 22px;
+  background: white;
+  border: 1px solid #eeeeee;
+  border-radius: 18px;
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+.filter-card:hover {
+  transform: translateY(-3px);
+  border-color: #fed7aa;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+}
+.icon {
+  width: 46px;
+  height: 46px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  font-size: 22px;
+}
+.category-icon {
+  background: #fff7ed;
+}
+.cuisine-icon {
+  background: #eff6ff;
+}
+.ingredient-icon {
+  background: #f0fdf4;
+}
+.content {
+  flex: 1;
+  min-width: 0;
+}
+.content h3 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+.content p {
+  margin: 6px 0 14px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #777;
+}
+select {
+  display: block;
+  width: 100%;
+  height: 42px;
+  padding: 0 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 9px;
+  background: white;
+  color: #2c2c2c;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+select:hover {
+  border-color: #fb923c;
+}
+select:focus {
+  border-color: #f97316;
+  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
+}
+@media (max-width: 900px) {
+  .filters {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .filter-card:last-child {
+    grid-column: span 2;
+  }
+}
+@media (max-width: 600px) {
+  .wrapper {
+    width: calc(100% - 24px);
+    padding: 35px 0;
+  }
+  .header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .clear-button {
+    align-self: flex-start;
+  }
+  .filters {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  .filter-card:last-child {
+    grid-column: auto;
+  }
+  .filter-card {
+    padding: 18px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .filter-card,
+  .clear-button,
+  select {
+    transition: none;
+  }
+}

package/dist/collection/components/recipe-browser/recipe-browser.js

@@ -0,0 +1,220 @@
+import { h } from "@stencil/core";
+export class RecipeBrowser {
+    categories = [];
+    areas = [];
+    ingredients = [];
+    selectedCategory = '';
+    selectedArea = '';
+    selectedIngredient = '';
+    browseChange;
+    browseClear;
+    handleCategory = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'category',
+            value,
+        });
+    };
+    handleArea = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'area',
+            value,
+        });
+    };
+    handleIngredient = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'ingredient',
+            value,
+        });
+    };
+    handleClear = () => {
+        this.browseClear.emit();
+    };
+    render() {
+        const hasSelection = this.selectedCategory !== '' || this.selectedArea !== '' || this.selectedIngredient !== '';
+        return (h("section", { key: '1e4b3474c45baf701d6212a58d4cfc465063bc5e', class: "wrapper" }, h("div", { key: '165084c65d6e9a4e457c601fc8ce6feb0321544c', class: "header" }, h("div", { key: '6fd026ea128dca2e65c3cbdfdc4908ee34ee4bfc', class: "heading" }, h("span", { key: '7a110eeebd3835354934bca2e141248142beb8e2', class: "eyebrow" }, "\u2726 BROWSE RECIPES"), h("h2", { key: '74431b3cfda0539b1c639d2f5ec71092dada18d9' }, "Find Your Perfect Recipe"), h("p", { key: 'd4ca3d04dd15a8f3a74020eafc454770a6d15e17' }, "Explore delicious recipes by category, cuisine or ingredient.")), hasSelection && (h("button", { key: 'c0576d993b85806611797e3b34c52773594b28ca', type: "button", class: "clear-button", onClick: this.handleClear }, "Clear Filters"))), h("div", { key: 'db81e498a63b5ba1ca7fab36bef03ca69337f695', class: "filters" }, h("div", { key: '1c4981b68d5ffffb2533a2ba08ed31746d8ed63d', class: "filter-card" }, h("div", { key: '5e253ee63f146f9d14404e6d9c00c2132cb32c6e', class: "content" }, h("h3", { key: 'c803bb45c98d0108babb53c77ec4fe495ebfc475' }, "Category"), h("p", { key: 'b81b23f23c834ad6e718213e640221e7361e41c4' }, "Find recipes by food category."), h("select", { key: '79b2055724ae09bc9ff5810ed85549abdf82025c', "aria-label": "Select recipe category", onChange: this.handleCategory }, h("option", { key: '2c8426061798f6790b0e6c06e232388aad1f2010', value: "" }, "All Categories"), this.categories.map(category => (h("option", { value: category, selected: this.selectedCategory === category }, category)))))), h("div", { key: '7809c3a73c2f32c5b1bcf318249b7cb71ce6f1d0', class: "filter-card" }, h("div", { key: '7353fe2a352af762393d11482ddecbb7de08176b', class: "content" }, h("h3", { key: '949566a102ece48164fccfc2805b77c5364152ff' }, "Ingredient"), h("p", { key: '060f125190ee29b79cf3e6025f71fd9759ac5e55' }, "Find recipes using your favourite ingredients."), h("select", { key: 'abff2d33d651b611a60952aba9c59ff5e9bb2ab6', "aria-label": "Select recipe ingredient", onChange: this.handleIngredient }, h("option", { key: 'eaeb17a91f94ba7c81b1a9e074f837a04b2630c6', value: "" }, "All Ingredients"), this.ingredients.map(ingredient => (h("option", { value: ingredient, selected: this.selectedIngredient === ingredient }, ingredient)))))), h("div", { key: '993eadac9b0939bcf6480960cdf46436900d6c0e', class: "filter-card" }, h("div", { key: '06f401549f627d20c725353882f625b97df14267', class: "content" }, h("h3", { key: '83a457b4b81a96d857edb50919a305ac0eeb0c06' }, "Cuisine"), h("p", { key: '9cb3a03bfec4fcb2170439cf7c6ab3d5714c07c0' }, "Discover recipes from around the world."), h("select", { key: 'b839e0b5570e4d7f7b9bccd12a0a4f7ed13d7181', "aria-label": "Select recipe cuisine", onChange: this.handleArea }, h("option", { key: 'ab8df5981542546ad9c35732327dc8b9d40e7c4a', value: "" }, "All Cuisines"), this.areas.map(area => (h("option", { value: area, selected: this.selectedArea === area }, area)))))))));
+    }
+    static get is() { return "recipe-browser"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-browser.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-browser.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "areas": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "ingredients": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedCategory": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-category",
+                "defaultValue": "''"
+            },
+            "selectedArea": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-area",
+                "defaultValue": "''"
+            },
+            "selectedIngredient": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-ingredient",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "browseChange",
+                "name": "browseChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecipeBrowseEvent",
+                    "resolved": "RecipeBrowseEvent",
+                    "references": {
+                        "RecipeBrowseEvent": {
+                            "location": "local",
+                            "path": "C:/Users/abc/stencil-recipe-project/stencil-recipe-components/src/components/recipe-browser/recipe-browser.tsx",
+                            "id": "src/components/recipe-browser/recipe-browser.tsx::RecipeBrowseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "browseClear",
+                "name": "browseClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/recipe-button/recipe-button.css

@@ -0,0 +1,34 @@
+:host {
+  display: inline-block;
+}
+
+.button {
+  min-width: 120px;
+  min-height: 44px;
+  padding: 0 18px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.primary {
+  border: none;
+  background: #f97316;
+  color: white;
+}
+
+.secondary {
+  border: 1px solid #ddd;
+  background: white;
+  color: #777777;
+}
+
+.primary:hover {
+  background: #ea580c;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}