@ssj4kyuubi/recipe-ui-lib 0.1.4

package/dist/collection/components/rui-recipe-card/rui-recipe-card.css

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+}
+
+.rui-card {
+  background: var(--rui-color-bg);
+  border: 1px solid var(--rui-color-border);
+  border-radius: var(--rui-radius);
+  overflow: hidden;
+  box-shadow: var(--rui-shadow-sm);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.rui-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--rui-shadow-md);
+}
+
+.rui-card__media {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  background: var(--rui-color-bg-alt);
+  overflow: hidden;
+}
+.rui-card__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.rui-card__placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rui-color-muted);
+  font-size: 0.85rem;
+}
+
+.rui-card__fav {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--rui-color-danger);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, transform 0.1s ease;
+}
+.rui-card__fav:hover {
+  background: #fff;
+  transform: scale(1.08);
+}
+.rui-card__fav.is-fav {
+  color: var(--rui-color-danger);
+  background: #fff;
+}
+
+.rui-card__body {
+  padding: 0.85rem 1rem;
+  flex: 1;
+}
+.rui-card__title {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  /* clamp to 2 lines */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.rui-card__meta {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--rui-color-muted);
+}
+
+.rui-card__footer {
+  padding: 0 1rem 0.85rem;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.rui-card__footer:empty {
+  display: none;
+}

package/dist/collection/components/rui-recipe-card/rui-recipe-card.js

@@ -0,0 +1,122 @@
+import { h, Host } from "@stencil/core";
+export class RuiRecipeCard {
+    constructor() {
+        this.isFavorite = false;
+        this.onCardClick = () => {
+            this.ruiCardClick.emit(this.recipe);
+        };
+        this.onFavClick = (e) => {
+            e.stopPropagation();
+            this.isFavorite = !this.isFavorite;
+            this.ruiFavoriteToggle.emit({ recipe: this.recipe, isFavorite: this.isFavorite });
+        };
+    }
+    render() {
+        const r = this.recipe;
+        return (h(Host, { key: '8ba2647d2fed8b0539287633a5591892109596fb' }, h("article", { key: '8a58a35d34d08d0897bc7c68b82773bd361e2dcf', class: "rui-card", onClick: this.onCardClick }, h("div", { key: '04b5aa4b9563847aa116bbf477fabd806092f90a', class: "rui-card__media" }, r.image ? (h("img", { src: r.image, alt: r.name, loading: "lazy" })) : (h("div", { class: "rui-card__placeholder", "aria-hidden": "true" }, h("span", null, "No image"))), h("button", { key: 'ea6b5fe33ab2587f28491b75db84e87e3b1d193f', type: "button", class: `rui-card__fav ${this.isFavorite ? 'is-fav' : ''}`, "aria-pressed": this.isFavorite ? 'true' : 'false', "aria-label": this.isFavorite ? 'Remove from favorites' : 'Add to favorites', onClick: this.onFavClick }, this.isFavorite ? '\u2665' : '\u2661')), h("div", { key: '2bd65d44934ee52a98cc2be459b770a8fe18dd0f', class: "rui-card__body" }, h("h3", { key: '55bd4f5faf4ed06696c6ed22f828d811afa605a5', class: "rui-card__title" }, r.name), (r.category || r.area) && (h("p", { key: '5184ee876bdfb90cdef9bc7f529be504ed18bf45', class: "rui-card__meta" }, [r.category, r.area].filter(Boolean).join(' \u00b7 ')))), h("div", { key: '5e3fc6c1cc4559bd6260ebf99039908f2e9c82e2', class: "rui-card__footer" }, h("slot", { key: '2567811b6ca78e06df4e2c51714dc1210fa65f00' })))));
+    }
+    static get is() { return "rui-recipe-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rui-recipe-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rui-recipe-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipe": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RecipeSummary",
+                    "resolved": "RecipeSummary",
+                    "references": {
+                        "RecipeSummary": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-card/rui-recipe-card.tsx",
+                            "id": "src/components/rui-recipe-card/rui-recipe-card.tsx::RecipeSummary"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recipe summary object."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this recipe is favorited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ruiCardClick",
+                "name": "ruiCardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the card body is clicked. detail: RecipeSummary."
+                },
+                "complexType": {
+                    "original": "RecipeSummary",
+                    "resolved": "RecipeSummary",
+                    "references": {
+                        "RecipeSummary": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-card/rui-recipe-card.tsx",
+                            "id": "src/components/rui-recipe-card/rui-recipe-card.tsx::RecipeSummary"
+                        }
+                    }
+                }
+            }, {
+                "method": "ruiFavoriteToggle",
+                "name": "ruiFavoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the favorite heart is toggled. detail: { recipe, isFavorite }."
+                },
+                "complexType": {
+                    "original": "{ recipe: RecipeSummary; isFavorite: boolean }",
+                    "resolved": "{ recipe: RecipeSummary; isFavorite: boolean; }",
+                    "references": {
+                        "RecipeSummary": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-card/rui-recipe-card.tsx",
+                            "id": "src/components/rui-recipe-card/rui-recipe-card.tsx::RecipeSummary"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/rui-recipe-detail/rui-recipe-detail.css

@@ -0,0 +1,197 @@
+:host {
+  display: block;
+}
+
+.rui-detail {
+  background: var(--rui-color-bg);
+  border-radius: var(--rui-radius);
+  box-shadow: var(--rui-shadow-sm);
+  overflow: hidden;
+}
+
+.rui-detail__header {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+@media (max-width: 640px) {
+  .rui-detail__header {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rui-detail__media {
+  aspect-ratio: 4 / 3;
+  background: var(--rui-color-bg-alt);
+  border-radius: var(--rui-radius);
+  overflow: hidden;
+}
+.rui-detail__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.rui-detail__placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rui-color-muted);
+}
+
+.rui-detail__title {
+  margin: 0 0 0.35rem;
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+.rui-detail__meta {
+  margin: 0 0 1rem;
+  color: var(--rui-color-muted);
+  font-size: 0.95rem;
+}
+
+.rui-detail__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.rui-detail__fav,
+.rui-detail__plan {
+  font-family: var(--rui-font);
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.5rem 0.9rem;
+  border-radius: var(--rui-radius);
+  border: 1px solid var(--rui-color-border);
+  background: var(--rui-color-bg);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.rui-detail__fav:hover,
+.rui-detail__plan:hover {
+  border-color: var(--rui-color-primary);
+  background: var(--rui-color-primary-soft);
+}
+.rui-detail__fav.is-fav {
+  color: var(--rui-color-danger);
+  border-color: var(--rui-color-danger);
+  background: #fff5f5;
+}
+
+.rui-detail__section {
+  padding: 0 1.5rem 1.5rem;
+}
+.rui-detail__section h3 {
+  margin: 0 0 0.75rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+  border-bottom: 2px solid var(--rui-color-primary-soft);
+  padding-bottom: 0.35rem;
+}
+
+.rui-detail__tables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+@media (max-width: 700px) {
+  .rui-detail__tables {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rui-detail__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  background: var(--rui-color-bg, #ffffff);
+  border: 1px solid var(--rui-color-border, #dee2e6);
+  border-radius: var(--rui-radius, 8px);
+  overflow: hidden;
+}
+.rui-detail__table thead {
+  background: var(--rui-color-bg-alt, #f8f9fa);
+}
+.rui-detail__table th {
+  text-align: left;
+  padding: 0.6rem 0.75rem;
+  font-weight: 700;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--rui-color-muted, #868e96);
+  border-bottom: 2px solid var(--rui-color-border, #dee2e6);
+}
+.rui-detail__table td {
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--rui-color-border, #dee2e6);
+  vertical-align: middle;
+}
+.rui-detail__table tbody tr:last-child td {
+  border-bottom: none;
+}
+.rui-detail__table tbody tr:hover {
+  background: var(--rui-color-primary-soft, #dcfce7);
+}
+.rui-detail__td--index {
+  width: 36px;
+  text-align: center;
+  color: var(--rui-color-muted, #868e96);
+  font-weight: 600;
+}
+.rui-detail__ing-measure {
+  color: var(--rui-color-muted, #868e96);
+  white-space: nowrap;
+}
+.rui-detail__ing-name {
+  font-weight: 500;
+  color: var(--rui-color-text, #212529);
+}
+.rui-detail__empty {
+  color: var(--rui-color-muted, #868e96);
+  font-size: 0.9rem;
+  margin: 0.5rem 0 0;
+}
+
+/* keep old list styles for fallback if needed */
+.rui-detail__ingredients {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.4rem 1rem;
+}
+.rui-detail__ingredients li {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  padding: 0.3rem 0;
+  border-bottom: 1px dashed var(--rui-color-border, #dee2e6);
+}
+
+.rui-detail__instructions {
+  white-space: pre-line;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.rui-detail__links {
+  display: flex;
+  gap: 1rem;
+}
+.rui-detail__links a {
+  color: var(--rui-color-secondary);
+  text-decoration: none;
+  font-weight: 500;
+}
+.rui-detail__links a:hover {
+  text-decoration: underline;
+}

package/dist/collection/components/rui-recipe-detail/rui-recipe-detail.js

@@ -0,0 +1,127 @@
+import { h, Host } from "@stencil/core";
+export class RuiRecipeDetail {
+    constructor() {
+        this.isFavorite = false;
+        this.onAddToPlan = () => {
+            this.ruiAddToPlan.emit(this.recipe);
+        };
+        this.onFavToggle = () => {
+            this.isFavorite = !this.isFavorite;
+            this.ruiFavoriteToggle.emit({ recipe: this.recipe, isFavorite: this.isFavorite });
+        };
+    }
+    render() {
+        const r = this.recipe;
+        return (h(Host, { key: '3cbe3361e6d88381fbec4fd8d282963933878de4' }, h("article", { key: 'ef3860f9752829fae37d374684f5b6e5045299e5', class: "rui-detail" }, h("header", { key: 'a14c496c15e23458956538926449bcecb742fd4c', class: "rui-detail__header" }, h("div", { key: 'e6766cf5e4d766fcd2b47a946122b0b108de6a73', class: "rui-detail__media" }, r.image ? (h("img", { src: r.image, alt: r.name })) : (h("div", { class: "rui-detail__placeholder" }, "No image"))), h("div", { key: '3c0ccb26f0379d9ddd9cd29a05d237a9d377d516', class: "rui-detail__intro" }, h("h2", { key: '108020c974704efc52907eb1f945ee3a7584436f', class: "rui-detail__title" }, r.name), (r.category || r.area) && (h("p", { key: 'fc381751090c3c067076967347db95907e048898', class: "rui-detail__meta" }, [r.category, r.area].filter(Boolean).join(' \u00b7 '))), h("div", { key: 'a0084338478d82d0e7c4f738ff7650646805efe9', class: "rui-detail__actions" }, h("slot", { key: 'ba5ac7fba83204b9c7512837313238771d68a59c', name: "actions" }), h("button", { key: '1b2a17d3d7571e5d484a9a26bb13b69a9ec8d56a', type: "button", class: `rui-detail__fav ${this.isFavorite ? 'is-fav' : ''}`, "aria-pressed": this.isFavorite ? 'true' : 'false', onClick: this.onFavToggle }, this.isFavorite ? '\u2665 Favorited' : '\u2661 Add to favorites'), h("button", { key: '1f9e6eec95cf99ef6bad7197d488e4623d9c0381', type: "button", class: "rui-detail__plan", onClick: this.onAddToPlan }, "+ Add to meal plan")))), h("section", { key: '8fa48000e6baaf8f22431b413d964c79ce2f9441', class: "rui-detail__section" }, h("h3", { key: '44e655db0ee49e4a1f9f2e31a82a23c3c549060a' }, "Ingredients"), r.ingredients && r.ingredients.length > 0 ? ((() => {
+            const mid = Math.ceil(r.ingredients.length / 2);
+            const left = r.ingredients.slice(0, mid);
+            const right = r.ingredients.slice(mid);
+            const renderTable = (rows, offset) => (h("table", { class: "rui-detail__table" }, h("thead", null, h("tr", null, h("th", null, "#"), h("th", null, "Ingredient"), h("th", null, "Measure"))), h("tbody", null, rows.map((ing, idx) => (h("tr", null, h("td", { class: "rui-detail__td--index" }, offset + idx + 1), h("td", { class: "rui-detail__ing-name" }, ing.name), h("td", { class: "rui-detail__ing-measure" }, ing.measure || '—')))))));
+            return (h("div", { class: "rui-detail__tables" }, renderTable(left, 0), right.length > 0 && renderTable(right, mid)));
+        })()) : (h("p", { class: "rui-detail__empty" }, "No ingredients listed.")), h("slot", { key: '58d20bb01497af2651f492d9e6520a587d3e21ce', name: "ingredients-extra" })), r.instructions && (h("section", { key: '54176a29fab9b1142b30994d0ae74acd2e881e69', class: "rui-detail__section" }, h("h3", { key: '0f0900c1f6abb29cf8601d5d3e6fc44abc344105' }, "Instructions"), h("p", { key: 'e4f4e185a193ac818bc21e3974c957716a1b8fd6', class: "rui-detail__instructions" }, r.instructions))), (r.youtube || r.source) && (h("section", { key: 'f8db0b0a526a6e774e83d700325471dbc032170e', class: "rui-detail__section rui-detail__links" }, r.youtube && (h("a", { key: 'add83e9353e6294219dfb9304c98a49833913200', href: r.youtube, target: "_blank", rel: "noopener noreferrer" }, "Watch on YouTube")), r.source && (h("a", { key: 'b719435a049b54a4b5ec1500ea9a19da9c10f98d', href: r.source, target: "_blank", rel: "noopener noreferrer" }, "Original source")))))));
+    }
+    static get is() { return "rui-recipe-detail"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rui-recipe-detail.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rui-recipe-detail.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipe": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RecipeFull",
+                    "resolved": "RecipeFull",
+                    "references": {
+                        "RecipeFull": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-detail/rui-recipe-detail.tsx",
+                            "id": "src/components/rui-recipe-detail/rui-recipe-detail.tsx::RecipeFull"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full recipe object."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the recipe is favorited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ruiAddToPlan",
+                "name": "ruiAddToPlan",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Add to plan\" is clicked. detail: RecipeFull."
+                },
+                "complexType": {
+                    "original": "RecipeFull",
+                    "resolved": "RecipeFull",
+                    "references": {
+                        "RecipeFull": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-detail/rui-recipe-detail.tsx",
+                            "id": "src/components/rui-recipe-detail/rui-recipe-detail.tsx::RecipeFull"
+                        }
+                    }
+                }
+            }, {
+                "method": "ruiFavoriteToggle",
+                "name": "ruiFavoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the favorite toggle is clicked. detail: { recipe, isFavorite }."
+                },
+                "complexType": {
+                    "original": "{ recipe: RecipeFull; isFavorite: boolean }",
+                    "resolved": "{ recipe: RecipeFull; isFavorite: boolean; }",
+                    "references": {
+                        "RecipeFull": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-recipe-detail/rui-recipe-detail.tsx",
+                            "id": "src/components/rui-recipe-detail/rui-recipe-detail.tsx::RecipeFull"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/rui-recipe-list/rui-recipe-list.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.rui-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1.25rem;
+}
+
+.rui-list__empty {
+  margin: 2rem 0;
+  text-align: center;
+  color: var(--rui-color-muted);
+  font-size: 1rem;
+}