@ssejal8/recipe-ui-kit 0.1.0

package/packages/recipe-kit-stencil/src/components/rk-recipe-card/rk-recipe-card.css

@@ -0,0 +1,280 @@
+:host {
+  display: block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  color: var(--rk-ink, #211a16);
+  height: 100%;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--rk-surface, #fff);
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: var(--rk-radius-lg, 20px);
+  overflow: hidden;
+  box-shadow: var(--rk-shadow-sm);
+  transition: transform var(--rk-transition), box-shadow var(--rk-transition), border-color var(--rk-transition);
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--rk-shadow);
+  border-color: var(--rk-border-strong, #d9c6b8);
+}
+
+/* ---------- media ---------- */
+
+.media {
+  position: relative;
+  display: block;
+  aspect-ratio: 4 / 3;
+  background: var(--rk-surface-2, #fdf5ef);
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+.card:hover .media img {
+  transform: scale(1.045);
+}
+
+.media-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: 2.6rem;
+  opacity: 0.5;
+}
+
+.owned {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  padding: 4px 10px;
+  border-radius: var(--rk-radius-pill, 999px);
+  background: var(--rk-accent, #0f766e);
+  color: #fff;
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+/* ---------- favorite ---------- */
+
+.fav {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(6px);
+  color: var(--rk-ink-2, #52443c);
+  cursor: pointer;
+  box-shadow: var(--rk-shadow-sm);
+  transition: background var(--rk-transition), color var(--rk-transition), transform var(--rk-transition);
+}
+
+.fav svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  transition: fill var(--rk-transition);
+}
+
+.fav:hover {
+  transform: scale(1.08);
+  color: var(--rk-primary, #d94f1b);
+}
+
+.fav:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.fav.is-on {
+  color: var(--rk-primary, #d94f1b);
+}
+
+.fav.is-on svg {
+  fill: currentColor;
+}
+
+/* ---------- body ---------- */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 15px 16px 0;
+  flex: 1 1 auto;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--rk-font-display, serif);
+  font-size: 1.12em;
+  font-weight: 650;
+  line-height: 1.28;
+  letter-spacing: -0.01em;
+}
+
+.title a {
+  color: inherit;
+  text-decoration: none;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.title a:hover {
+  color: var(--rk-primary, #d94f1b);
+}
+
+.title a:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 14px;
+  margin: 0;
+  font-size: 0.83em;
+  color: var(--rk-muted, #857166);
+}
+
+.meta-item {
+  position: relative;
+  white-space: nowrap;
+}
+
+.meta-item + .meta-item::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.55;
+  transform: translateY(-50%);
+}
+
+.extra {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+}
+
+/* ---------- footer ---------- */
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  margin-top: 12px;
+  border-top: 1px solid var(--rk-border, #ecdfd4);
+}
+
+.footer ::slotted(*) {
+  flex: 1 1 auto;
+}
+
+.extra.is-empty,
+.footer.is-empty {
+  display: none;
+}
+
+/* Without a footer the body has to supply its own bottom padding. */
+.card:has(.footer.is-empty) .body {
+  padding-bottom: 16px;
+}
+
+/* ---------- compact variant ---------- */
+
+.card.is-compact {
+  flex-direction: row;
+  align-items: stretch;
+  border-radius: var(--rk-radius, 14px);
+}
+
+.card.is-compact:hover {
+  transform: none;
+}
+
+.card.is-compact .media {
+  flex: 0 0 96px;
+  aspect-ratio: 1 / 1;
+}
+
+.card.is-compact .body {
+  padding: 12px 14px;
+  gap: 4px;
+  justify-content: center;
+}
+
+.card.is-compact .title {
+  font-size: 1em;
+}
+
+.card.is-compact .fav {
+  width: 32px;
+  height: 32px;
+  top: 8px;
+  right: 8px;
+}
+
+.card.is-compact .fav svg {
+  width: 17px;
+  height: 17px;
+}
+
+.card.is-compact .footer {
+  margin-top: 0;
+  border-top: 0;
+  border-left: 1px solid var(--rk-border, #ecdfd4);
+  padding: 12px;
+}
+
+.card.is-compact .owned {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .card:hover,
+  .media img,
+  .card:hover .media img,
+  .fav {
+    transition: none;
+    transform: none;
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-recipe-card/rk-recipe-card.tsx

@@ -0,0 +1,179 @@
+import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';
+
+export interface RkRecipeCardSelectDetail {
+  recipeId: string;
+  name: string;
+  origin: 'api' | 'custom';
+}
+
+export interface RkFavoriteToggleDetail {
+  recipeId: string;
+  name: string;
+  origin: 'api' | 'custom';
+  /** The state the host app should move *to*. */
+  favorite: boolean;
+}
+
+/**
+ * The primary recipe tile used across discovery, favorites and search results.
+ *
+ * All data arrives as individual primitive properties rather than one object
+ * prop, so the component works with plain HTML attributes in any framework.
+ *
+ * @slot - Extra metadata rendered under the title (badges, tags, ratings).
+ * @slot actions - Buttons rendered in the card footer (e.g. "Add to plan").
+ */
+@Component({
+  tag: 'rk-recipe-card',
+  styleUrl: 'rk-recipe-card.css',
+  shadow: true,
+})
+export class RkRecipeCard {
+  @Element() host!: HTMLElement;
+
+  /** Stable identifier echoed back in every event payload. */
+  @Prop() recipeId!: string;
+
+  /** Recipe title. */
+  @Prop() name = '';
+
+  /** Thumbnail URL. */
+  @Prop() image?: string;
+
+  /** Category, e.g. "Dessert". */
+  @Prop() category?: string;
+
+  /** Cuisine / region, e.g. "Italian". */
+  @Prop() area?: string;
+
+  /** Total time in minutes. Hidden when omitted. */
+  @Prop() minutes?: number;
+
+  /** Number of servings. Hidden when omitted. */
+  @Prop() servings?: number;
+
+  /** Whether this recipe is currently favorited. */
+  @Prop() favorite = false;
+
+  /** `custom` recipes are user-authored and get an "Owned" badge. */
+  @Prop() origin: 'api' | 'custom' = 'api';
+
+  /** Real href used for accessibility, SEO and middle-click / open-in-new-tab. */
+  @Prop() href?: string;
+
+  /** Renders a compact horizontal layout, for dense lists and the planner. */
+  @Prop() compact = false;
+
+  /** Hides the favorite button entirely (e.g. inside the planner). */
+  @Prop() hideFavorite = false;
+
+  /** Emitted on primary activation. The host app performs the navigation. */
+  @Event({ eventName: 'rkCardSelect' }) rkCardSelect!: EventEmitter<RkRecipeCardSelectDetail>;
+
+  /** Emitted when the favorite button is pressed. */
+  @Event({ eventName: 'rkFavoriteToggle' }) rkFavoriteToggle!: EventEmitter<RkFavoriteToggleDetail>;
+
+  @State() private imageFailed = false;
+  @State() private hasExtra = false;
+  @State() private hasActions = false;
+
+  componentWillLoad() {
+    this.syncSlots();
+  }
+
+  /**
+   * Slot content is optional, and an empty wrapper would still paint padding and
+   * a border. Tracking what was actually projected lets the card collapse those
+   * regions instead. Re-run on `slotchange` so framework-driven updates count.
+   */
+  private syncSlots = () => {
+    const elements = Array.from(this.host.children);
+    this.hasActions = elements.some(node => node.getAttribute('slot') === 'actions');
+    this.hasExtra =
+      elements.some(node => !node.hasAttribute('slot')) ||
+      Array.from(this.host.childNodes).some(node => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');
+  };
+
+  private get detail(): RkRecipeCardSelectDetail {
+    return { recipeId: this.recipeId, name: this.name, origin: this.origin };
+  }
+
+  private handleSelect = (event: MouseEvent) => {
+    // Let the browser handle modified clicks so "open in new tab" keeps working.
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    this.rkCardSelect.emit(this.detail);
+  };
+
+  private handleFavorite = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.rkFavoriteToggle.emit({ ...this.detail, favorite: !this.favorite });
+  };
+
+  render() {
+    const showImage = this.image && !this.imageFailed;
+    const href = this.href ?? `#${this.recipeId}`;
+
+    return (
+      <article class={{ card: true, 'is-compact': this.compact }} part="card">
+        <a class="media" part="media" href={href} tabindex={-1} aria-hidden="true" onClick={this.handleSelect}>
+          {showImage ? (
+            <img src={this.image} alt="" loading="lazy" decoding="async" onError={() => (this.imageFailed = true)} />
+          ) : (
+            <span class="media-fallback" aria-hidden="true">
+              🍲
+            </span>
+          )}
+
+          {this.origin === 'custom' && (
+            <span class="owned" part="owned-badge">
+              Yours
+            </span>
+          )}
+        </a>
+
+        {!this.hideFavorite && (
+          <button
+            class={{ fav: true, 'is-on': this.favorite }}
+            part="favorite-button"
+            type="button"
+            onClick={this.handleFavorite}
+            aria-pressed={String(this.favorite)}
+            aria-label={this.favorite ? `Remove ${this.name} from favorites` : `Add ${this.name} to favorites`}
+            title={this.favorite ? 'Remove from favorites' : 'Add to favorites'}
+          >
+            <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" aria-hidden="true">
+              <path d="M12 20.5 4.6 13.3a4.7 4.7 0 0 1 0-6.7 4.7 4.7 0 0 1 6.7 0l.7.7.7-.7a4.7 4.7 0 0 1 6.7 0 4.7 4.7 0 0 1 0 6.7Z" />
+            </svg>
+          </button>
+        )}
+
+        <div class="body" part="body">
+          <h3 class="title" part="title">
+            <a href={href} onClick={this.handleSelect}>
+              {this.name}
+            </a>
+          </h3>
+
+          <p class="meta" part="meta">
+            {this.category && <span class="meta-item">{this.category}</span>}
+            {this.area && <span class="meta-item">{this.area}</span>}
+            {this.minutes > 0 && <span class="meta-item">{this.minutes} min</span>}
+            {this.servings > 0 && <span class="meta-item">Serves {this.servings}</span>}
+          </p>
+
+          <div class={{ extra: true, 'is-empty': !this.hasExtra }} part="extra">
+            <slot onSlotchange={this.syncSlots} />
+          </div>
+        </div>
+
+        <footer class={{ footer: true, 'is-empty': !this.hasActions }} part="footer">
+          <slot name="actions" onSlotchange={this.syncSlots} />
+        </footer>
+      </article>
+    );
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-recipe-card/test/rk-recipe-card.spec.tsx

@@ -0,0 +1,70 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RkRecipeCard } from '../rk-recipe-card';
+
+describe('rk-recipe-card', () => {
+  it('renders the title, metadata and a real href', async () => {
+    const page = await newSpecPage({
+      components: [RkRecipeCard],
+      html: `<rk-recipe-card recipe-id="52772" name="Teriyaki Chicken" category="Chicken" area="Japanese" href="/recipes/52772"></rk-recipe-card>`,
+    });
+
+    const shadow = page.root.shadowRoot;
+    expect(shadow.querySelector('.title a').textContent).toBe('Teriyaki Chicken');
+    expect(shadow.querySelector('.title a').getAttribute('href')).toBe('/recipes/52772');
+
+    const meta = Array.from(shadow.querySelectorAll('.meta-item')).map(node => node.textContent);
+    expect(meta).toEqual(['Chicken', 'Japanese']);
+  });
+
+  it('emits rkCardSelect with the recipe identity instead of navigating', async () => {
+    const page = await newSpecPage({
+      components: [RkRecipeCard],
+      html: `<rk-recipe-card recipe-id="52772" name="Teriyaki Chicken" href="/recipes/52772"></rk-recipe-card>`,
+    });
+
+    const handler = jest.fn();
+    page.root.addEventListener('rkCardSelect', handler);
+
+    const link = page.root.shadowRoot.querySelector('.title a') as HTMLAnchorElement;
+    link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    await page.waitForChanges();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler.mock.calls[0][0].detail).toEqual({ recipeId: '52772', name: 'Teriyaki Chicken', origin: 'api' });
+  });
+
+  it('reports the state to move to, without mutating its own favorite prop', async () => {
+    const page = await newSpecPage({
+      components: [RkRecipeCard],
+      html: `<rk-recipe-card recipe-id="52772" name="Teriyaki Chicken" favorite="true"></rk-recipe-card>`,
+    });
+
+    const handler = jest.fn();
+    page.root.addEventListener('rkFavoriteToggle', handler);
+
+    (page.root.shadowRoot.querySelector('.fav') as HTMLButtonElement).click();
+    await page.waitForChanges();
+
+    expect(handler.mock.calls[0][0].detail.favorite).toBe(false);
+    // The host application owns the state; the component stays as it was told.
+    expect((page.root as HTMLRkRecipeCardElement).favorite).toBe(true);
+  });
+
+  it('hides the favorite button when asked', async () => {
+    const page = await newSpecPage({
+      components: [RkRecipeCard],
+      html: `<rk-recipe-card recipe-id="1" name="X" hide-favorite="true"></rk-recipe-card>`,
+    });
+
+    expect(page.root.shadowRoot.querySelector('.fav')).toBeNull();
+  });
+
+  it('marks user-authored recipes with an owned badge', async () => {
+    const page = await newSpecPage({
+      components: [RkRecipeCard],
+      html: `<rk-recipe-card recipe-id="my-1" name="Mine" origin="custom"></rk-recipe-card>`,
+    });
+
+    expect(page.root.shadowRoot.querySelector('.owned')).not.toBeNull();
+  });
+});

package/packages/recipe-kit-stencil/src/components/rk-search-bar/readme.md

@@ -0,0 +1,67 @@
+# rk-search-bar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A debounced search input with a clear affordance and a slot for extra controls.
+
+## Properties
+
+| Property      | Attribute     | Description                                                               | Type      | Default                                    |
+| ------------- | ------------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------ |
+| `debounce`    | `debounce`    | Milliseconds to wait after the last keystroke before emitting `rkSearch`. | `number`  | `350`                                      |
+| `disabled`    | `disabled`    | Disables the whole control.                                               | `boolean` | `false`                                    |
+| `hint`        | `hint`        | Optional helper text rendered under the field.                            | `string`  | `undefined`                                |
+| `label`       | `label`       | Accessible label for the input.                                           | `string`  | `'Search recipes'`                         |
+| `loading`     | `loading`     | Shows a busy indicator (e.g. while the app is fetching results).          | `boolean` | `false`                                    |
+| `placeholder` | `placeholder` | Placeholder shown when the field is empty.                                | `string`  | `'Search recipes, ingredients, cuisines…'` |
+| `value`       | `value`       | Current text in the field. Two-way: updated as the user types.            | `string`  | `''`                                       |
+
+
+## Events
+
+| Event      | Description                                                               | Type                  |
+| ---------- | ------------------------------------------------------------------------- | --------------------- |
+| `rkClear`  | Emitted when the user clears the field with the clear button or Escape.   | `CustomEvent<void>`   |
+| `rkSearch` | Emitted with the (trimmed) query after the debounce window, or on submit. | `CustomEvent<string>` |
+
+
+## Methods
+
+### `setFocus() => Promise<void>`
+
+Programmatically focus the input.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Slots
+
+| Slot        | Description                                                                                                            |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `"actions"` | Rendered to the right of the input, inside the field shell.           Useful for a "filters" toggle or a sort control. |
+
+
+## Shadow Parts
+
+| Part        | Description |
+| ----------- | ----------- |
+| `"actions"` |             |
+| `"clear"`   |             |
+| `"hint"`    |             |
+| `"input"`   |             |
+| `"shell"`   |             |
+| `"spinner"` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*