@seepmaini/stencil-recipe-components 0.0.1

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  color: #555555;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+input {
+  width: 100%;
+  height: 44px;
+  padding: 12px 13px;
+  border: 1px solid #eeeeee;
+  border-radius: 10px;
+  outline: none;
+  background: #fafafa;
+  color: #333333;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+input:focus {
+  border-color: #f97316;
+  background: white;
+  box-shadow: 0 0 0 3px rgba(163, 111, 66, 0.08);
+}
+
+input::placeholder {
+  color: #bbb;
+}
+
+small {
+  color: #aaa;
+  font-size: 9px;
+}

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

@@ -0,0 +1,167 @@
+import { h } from "@stencil/core";
+export class RecipeInput {
+    label;
+    name;
+    type = 'text';
+    placeholder = '';
+    value = '';
+    required = false;
+    helper = '';
+    render() {
+        return (h("div", { key: '70a6dc59dc7c4367c091fa1cb69a6f9ab7936108', class: "field" }, h("label", { key: '4ac58bf5d0570aeb26333b6056429dd90483fddc', htmlFor: this.name }, this.label, this.required ? ' *' : ''), h("input", { key: '1146d0d67f77e85ffb058d8c705c739e5f4d8765', id: this.name, name: this.name, type: this.type, placeholder: this.placeholder, value: this.value, required: this.required }), this.helper && h("small", { key: '1bfde2d7cbffdc08d8d97e011fc08e89619a6926' }, this.helper)));
+    }
+    static get is() { return "recipe-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 40px;
+  background: #f97316;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.logo {
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 26px;
+}
+
+.nav-link {
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+
+.nav-link:hover{
+  color: #f9b787;
+}
+
+@media (max-width: 700px) {
+  .navbar {
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px 20px;
+  }
+
+  .logo {
+    font-size: 22px;
+    text-align: center;
+  }
+
+  .nav-links {
+    gap: 15px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+export class RecipeNavbar {
+    currentPage = '';
+    render() {
+        return (h("nav", { key: '566b7977eb5d49698529bb053851bfd00ae3e6b7', class: "navbar" }, h("a", { key: '0486dfb39ffe360a78251520ce19aeeb02f9cbe8', href: "/", class: "logo" }, "\uD83C\uDF74 Recipe Finder and Meal Planner"), h("div", { key: '3c08b289c5845dfe5845dae53e48736e04c98f73', class: "nav-links" }, h("a", { key: 'ca549a73243a753de94117ac0a4c1136ec43d4d3', href: "/", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'home',
+            } }, "Home"), h("a", { key: 'd8fc2d2b873d7e7f1eb17e5f3e53a367811124ba', href: "/favorites", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'favorites',
+            } }, "Favorites"), h("a", { key: 'de54d4a21354713ee67e5f28675d8046e8093c0c', href: "/meal-plan", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'meal-plan',
+            } }, "Meal Planner"), h("a", { key: '98a0114e219316138f9968f9b9f462ab90dc2144', href: "/my-recipes", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'my-recipes',
+            } }, "My Recipes"))));
+    }
+    static get is() { return "recipe-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  color: #555555;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+textarea {
+  width: 100%;
+  padding: 12px 13px;
+  border: 1px solid #eeeeee;
+  border-radius: 10px;
+  outline: none;
+  background: #fafafa;
+  color: #333333;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.7;
+  resize: vertical;
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+textarea:focus {
+  border-color: #f97316;
+  background: white;
+  box-shadow: 0 0 0 3px rgba(163, 111, 66, 0.08);
+}
+
+textarea::placeholder {
+  color: #bbb;
+}

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

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+export class RecipeTextarea {
+    label;
+    name;
+    rows = 5;
+    placeholder = '';
+    value = '';
+    required = false;
+    render() {
+        return (h("div", { key: '65e2378ab0cd0e4d0b255aebf5db8f9dd9b7cd23', class: "field" }, h("label", { key: '1806eef424c6305fc8456a9bd3209ac2cd6ccae3', htmlFor: this.name }, this.label, this.required ? ' *' : ''), h("textarea", { key: 'dfa80a318722b204622fc7d0935cf8fb346e2bd0', id: this.name, name: this.name, rows: this.rows, placeholder: this.placeholder, required: this.required }, this.value)));
+    }
+    static get is() { return "recipe-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "5"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/search-food/search-food.css

@@ -0,0 +1,117 @@
+:host {
+  display: block;
+  font-family: Arial, sans-serif;
+}
+.search-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 24px 16px;
+}
+.search-box {
+  width: 100%;
+  max-width: 700px;
+  display: flex;
+  align-items: center;
+  padding: 6px;
+  background: #ffffff;
+  border: 1px solid #d7d2cd;
+  border-radius: 14px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.search-box:focus-within {
+  border-color: #e0700f;
+  box-shadow:
+    0 0 0 3px rgba(163, 111, 66, 0.1),
+    0 8px 24px rgba(0, 0, 0, 0.07);
+}
+.search-icon {
+  flex-shrink: 0;
+  margin-left: 12px;
+  margin-right: 8px;
+  font-size: 20px;
+}
+input {
+  flex: 1;
+  min-width: 0;
+  padding: 13px 8px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #2c2c2c;
+  font-family: Arial, sans-serif;
+  font-size: 16px;
+}
+input::placeholder {
+  color: #b7bdca;
+}
+.clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #999999;
+  font-family: Arial, sans-serif;
+  font-size: 24px;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+.clear-button:hover {
+  background: #f5f2ef;
+  color: #555555;
+}
+.search-button {
+  flex-shrink: 0;
+  padding: 12px 22px;
+  border: none;
+  border-radius: 10px;
+  background: #f97316;
+  color: #ffffff;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+.search-button:hover {
+  background: #f97316;
+  transform: translateY(-1px);
+}
+.search-button:active {
+  transform: translateY(0);
+}
+@media (max-width: 600px) {
+  .search-wrapper {
+    padding: 18px 12px;
+  }
+  .search-box {
+    border-radius: 12px;
+  }
+  input {
+    font-size: 14px;
+  }
+  .search-button {
+    padding: 11px 15px;
+    font-size: 13px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .search-box,
+  .clear-button,
+  .search-button {
+    transition: none;
+  }
+}