@ssj4kyuubi/recipe-ui-lib 0.1.4

package/dist/collection/components/rui-filter-chips/rui-filter-chips.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+}
+
+.rui-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.rui-chip {
+  font-family: var(--rui-font);
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 0.35rem 0.85rem;
+  border-radius: 999px;
+  border: 1px solid var(--rui-color-border);
+  background: var(--rui-color-bg);
+  color: var(--rui-color-text);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.rui-chip:hover {
+  border-color: var(--rui-color-primary);
+}
+.rui-chip--active {
+  background: var(--rui-color-primary);
+  border-color: var(--rui-color-primary);
+  color: #fff;
+}

package/dist/collection/components/rui-filter-chips/rui-filter-chips.js

@@ -0,0 +1,96 @@
+import { h, Host } from "@stencil/core";
+export class RuiFilterChips {
+    constructor() {
+        this.categories = [];
+        this.selected = [];
+        this.toggle = (value) => {
+            const next = this.selected.includes(value)
+                ? this.selected.filter((v) => v !== value)
+                : [...this.selected, value];
+            this.selected = [...next];
+            this.ruiFilterChange.emit(this.selected);
+        };
+    }
+    render() {
+        return (h(Host, { key: '628063d481c07e5c80312a9a395ba7ad0ab859dc' }, h("div", { key: 'd3aa0f87f0e6b6bd55960dc91769f56b70e4ef67', class: "rui-chips", role: "group", "aria-label": "Filters" }, this.categories.map((cat) => {
+            const active = this.selected.includes(cat.value);
+            return (h("button", { type: "button", class: `rui-chip ${active ? 'rui-chip--active' : ''}`, "aria-pressed": active ? 'true' : 'false', onClick: () => this.toggle(cat.value) }, cat.label));
+        }))));
+    }
+    static get is() { return "rui-filter-chips"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rui-filter-chips.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rui-filter-chips.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FilterCategory[]",
+                    "resolved": "FilterCategory[]",
+                    "references": {
+                        "FilterCategory": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-filter-chips/rui-filter-chips.tsx",
+                            "id": "src/components/rui-filter-chips/rui-filter-chips.tsx::FilterCategory"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available categories."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selected": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected category values."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ruiFilterChange",
+                "name": "ruiFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes. detail: string[] (selected values)."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/rui-meal-planner/rui-meal-planner.css

@@ -0,0 +1,130 @@
+:host {
+  display: block;
+}
+
+.rui-planner {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.rui-planner__day {
+  background: var(--rui-color-bg);
+  border: 1px solid var(--rui-color-border);
+  border-radius: var(--rui-radius);
+  box-shadow: var(--rui-shadow-sm);
+  overflow: hidden;
+}
+
+.rui-planner__day-head {
+  padding: 0.6rem 0.85rem;
+  background: var(--rui-color-primary-soft);
+  border-bottom: 1px solid var(--rui-color-border);
+}
+.rui-planner__day-head h4 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--rui-color-primary-hover);
+}
+
+.rui-planner__meal {
+  display: flex;
+  gap: 0.6rem;
+  padding: 0.75rem;
+  align-items: center;
+}
+.rui-planner__meal--clickable {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-radius: var(--rui-radius);
+}
+.rui-planner__meal--clickable:hover {
+  background: var(--rui-color-primary-soft, #dcfce7);
+}
+.rui-planner__meal--clickable:focus-visible {
+  outline: 2px solid var(--rui-color-primary, #16a34a);
+  outline-offset: -2px;
+}
+.rui-planner__meal img {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--rui-radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.rui-planner__meal-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.rui-planner__meal-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.rui-planner__meal-cat {
+  font-size: 0.75rem;
+  color: var(--rui-color-muted);
+}
+.rui-planner__meal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.rui-planner__meal-actions button {
+  font-family: var(--rui-font);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--rui-radius-sm);
+  border: 1px solid var(--rui-color-border);
+  background: var(--rui-color-bg);
+  cursor: pointer;
+}
+.rui-planner__meal-actions button:hover {
+  border-color: var(--rui-color-primary);
+}
+.rui-planner__view {
+  color: var(--rui-color-primary-hover, #15803d);
+  font-weight: 600;
+}
+.rui-planner__view:hover {
+  background: var(--rui-color-primary, #16a34a) !important;
+  color: #fff !important;
+  border-color: var(--rui-color-primary, #16a34a) !important;
+}
+.rui-planner__clear:hover {
+  color: var(--rui-color-danger);
+  border-color: var(--rui-color-danger) !important;
+}
+
+.rui-planner__empty {
+  padding: 1rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--rui-color-muted);
+  font-size: 0.85rem;
+}
+.rui-planner__empty button {
+  font-family: var(--rui-font);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.4rem 0.8rem;
+  border-radius: var(--rui-radius);
+  border: 1px dashed var(--rui-color-border);
+  background: var(--rui-color-bg-alt);
+  color: var(--rui-color-primary-hover);
+  cursor: pointer;
+}
+.rui-planner__empty button:hover {
+  border-color: var(--rui-color-primary);
+  background: var(--rui-color-primary-soft);
+}

package/dist/collection/components/rui-meal-planner/rui-meal-planner.js

@@ -0,0 +1,174 @@
+import { h, Host } from "@stencil/core";
+export class RuiMealPlanner {
+    constructor() {
+        this.plan = {};
+        this.days = [
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday',
+            'Sunday',
+        ];
+        this.assign = (day) => this.ruiAssignMeal.emit({ day });
+        this.remove = (day, recipe) => this.ruiRemoveMeal.emit({ day, recipe });
+        this.clear = (day) => this.ruiClearDay.emit({ day });
+        this.selectMeal = (day, recipe) => this.ruiSelectMeal.emit({ day, recipe });
+    }
+    render() {
+        return (h(Host, { key: 'de032b8a71504aa8c7ce9ae269c299974c03e160' }, h("div", { key: '178b5fc0a98d94cc2bb9666d7edcd74ca605df98', class: "rui-planner" }, this.days.map((day) => {
+            const meal = this.plan[day];
+            return (h("div", { class: "rui-planner__day" }, h("div", { class: "rui-planner__day-head" }, h("h4", null, day)), meal && meal.recipe ? (h("div", { class: "rui-planner__meal rui-planner__meal--clickable", onClick: () => this.selectMeal(day, meal.recipe), role: "button", tabindex: 0, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.selectMeal(day, meal.recipe);
+                    }
+                }, title: "View recipe ingredients" }, meal.recipe.image && (h("img", { src: meal.recipe.image, alt: meal.recipe.name })), h("div", { class: "rui-planner__meal-info" }, h("span", { class: "rui-planner__meal-name" }, meal.recipe.name), meal.recipe.category && (h("span", { class: "rui-planner__meal-cat" }, meal.recipe.category))), h("div", { class: "rui-planner__meal-actions" }, h("button", { type: "button", class: "rui-planner__view", onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectMeal(day, meal.recipe);
+                } }, "View"), h("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    this.remove(day, meal.recipe);
+                } }, "Remove"), h("button", { type: "button", class: "rui-planner__clear", onClick: (e) => {
+                    e.stopPropagation();
+                    this.clear(day);
+                } }, "Clear")))) : (h("div", { class: "rui-planner__empty" }, h("span", null, "No meal planned"), h("button", { type: "button", onClick: () => this.assign(day) }, "+ Assign recipe")))));
+        }))));
+    }
+    static get is() { return "rui-meal-planner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rui-meal-planner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rui-meal-planner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "plan": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MealPlan",
+                    "resolved": "{ [x: string]: PlannedMeal | null; }",
+                    "references": {
+                        "MealPlan": {
+                            "location": "local",
+                            "path": "F:/Projects/RecipeFinder/recipe-ui-lib/src/components/rui-meal-planner/rui-meal-planner.tsx",
+                            "id": "src/components/rui-meal-planner/rui-meal-planner.tsx::MealPlan"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Map of day -> PlannedMeal (or null when empty)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "days": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Days of the week to render."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    'Monday',\n    'Tuesday',\n    'Wednesday',\n    'Thursday',\n    'Friday',\n    'Saturday',\n    'Sunday',\n  ]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ruiAssignMeal",
+                "name": "ruiAssignMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Assign\" is clicked. detail: { day }."
+                },
+                "complexType": {
+                    "original": "{ day: string }",
+                    "resolved": "{ day: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "ruiRemoveMeal",
+                "name": "ruiRemoveMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Remove\" is clicked on a planned meal. detail: { day, recipe }."
+                },
+                "complexType": {
+                    "original": "{ day: string; recipe: RecipeSummary }",
+                    "resolved": "{ day: string; recipe: RecipeSummary; }",
+                    "references": {
+                        "RecipeSummary": {
+                            "location": "import",
+                            "path": "../rui-recipe-card/rui-recipe-card",
+                            "id": "src/components/rui-recipe-card/rui-recipe-card.tsx::RecipeSummary",
+                            "referenceLocation": "RecipeSummary"
+                        }
+                    }
+                }
+            }, {
+                "method": "ruiClearDay",
+                "name": "ruiClearDay",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Clear\" is clicked for a day. detail: { day }."
+                },
+                "complexType": {
+                    "original": "{ day: string }",
+                    "resolved": "{ day: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "ruiSelectMeal",
+                "name": "ruiSelectMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a planned meal is clicked to view recipe. detail: { day, recipe }."
+                },
+                "complexType": {
+                    "original": "{ day: string; recipe: RecipeSummary }",
+                    "resolved": "{ day: string; recipe: RecipeSummary; }",
+                    "references": {
+                        "RecipeSummary": {
+                            "location": "import",
+                            "path": "../rui-recipe-card/rui-recipe-card",
+                            "id": "src/components/rui-recipe-card/rui-recipe-card.tsx::RecipeSummary",
+                            "referenceLocation": "RecipeSummary"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/rui-modal/rui-modal.css

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+}
+
+.rui-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 5vh 1rem 1rem;
+  z-index: 1000;
+  overflow-y: auto;
+}
+
+.rui-modal__dialog {
+  background: var(--rui-color-bg, #ffffff);
+  border: 1px solid var(--rui-color-border, #dee2e6);
+  border-radius: var(--rui-radius, 8px);
+  box-shadow: var(--rui-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
+  width: 100%;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  position: relative;
+}
+
+.rui-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--rui-color-border, #dee2e6);
+  background: var(--rui-color-bg, #ffffff);
+  border-radius: var(--rui-radius, 8px) var(--rui-radius, 8px) 0 0;
+}
+
+.rui-modal__title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--rui-color-text, #212529);
+  font-family: var(--rui-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+}
+
+.rui-modal__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--rui-color-muted, #868e96);
+  padding: 0 0.25rem;
+}
+.rui-modal__close:hover {
+  color: var(--rui-color-text, #212529);
+}
+
+.rui-modal__body {
+  padding: 1.25rem;
+  overflow-y: auto;
+  background: var(--rui-color-bg, #ffffff);
+  color: var(--rui-color-text, #212529);
+}
+
+.rui-modal__footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--rui-color-border, #dee2e6);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  background: var(--rui-color-bg, #ffffff);
+  border-radius: 0 0 var(--rui-radius, 8px) var(--rui-radius, 8px);
+}
+.rui-modal__footer:empty {
+  display: none;
+}

package/dist/collection/components/rui-modal/rui-modal.js

@@ -0,0 +1,137 @@
+import { h, Host } from "@stencil/core";
+export class RuiModal {
+    constructor() {
+        this.open = false;
+        this.modalTitle = '';
+        this.closeOnBackdrop = true;
+        this.handleBackdrop = (e) => {
+            if (!this.closeOnBackdrop)
+                return;
+            if (e.target === e.currentTarget) {
+                this.requestClose();
+            }
+        };
+        this.handleKey = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                this.requestClose();
+            }
+        };
+    }
+    requestClose() {
+        this.ruiClose.emit();
+    }
+    openChanged(isOpen) {
+        if (isOpen) {
+            document.addEventListener('keydown', this.handleKey);
+        }
+        else {
+            document.removeEventListener('keydown', this.handleKey);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleKey);
+    }
+    render() {
+        return (h(Host, { key: '9bbdb18b18e8c09ec5e8edfd886a44cb4d86cb0b' }, this.open && (h("div", { key: 'b772df0ce6a04949c1ac0d44449545a35d877adc', class: "rui-modal__backdrop", onClick: this.handleBackdrop }, h("div", { key: '4c22489ccd86da08b1a007757b1c42da4023067e', class: "rui-modal__dialog", role: "dialog", "aria-modal": "true", "aria-label": this.modalTitle }, h("header", { key: '5dd1ceca76410c18acbc8b12fc7cb9ca8c6dff27', class: "rui-modal__header" }, h("h3", { key: 'c131c313193f0ba0fd847426dff141f3c1adc143', class: "rui-modal__title" }, this.modalTitle), h("button", { key: 'c280b26ea160e5c765b80eb9054dd5ff186e7646', class: "rui-modal__close", type: "button", "aria-label": "Close", onClick: () => this.requestClose() }, "\u00D7")), h("div", { key: 'f4c32d83f83e5e452dc10a368f5f620e3557eedf', class: "rui-modal__body" }, h("slot", { key: 'a278a93efe24076204c4fce7b0cf44be22df4dc9' })), h("footer", { key: '31bed0da07b6310cdf4684c24f505ede0a220416', class: "rui-modal__footer" }, h("slot", { key: '7a5806e2edf0d6aaef25b119c1d2ba8f3684a1f7', name: "footer" })))))));
+    }
+    static get is() { return "rui-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rui-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rui-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "''"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on backdrop click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ruiClose",
+                "name": "ruiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal requests to close (X button, backdrop, Escape)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}