@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

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

@@ -1,57 +0,0 @@
-# rk-modal
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-An accessible dialog with a backdrop, Escape handling and focus restoration.
-
-The component is presentational: it emits `rkModalClose` and lets the host
-application own the `open` state.
-
-## Properties
-
-| Property      | Attribute     | Description                                            | Type                   | Default     |
-| ------------- | ------------- | ------------------------------------------------------ | ---------------------- | ----------- |
-| `dismissible` | `dismissible` | Set to false to require an explicit action to dismiss. | `boolean`              | `true`      |
-| `heading`     | `heading`     | Heading text for the default header.                   | `string`               | `''`        |
-| `open`        | `open`        | Controls visibility.                                   | `boolean`              | `false`     |
-| `size`        | `size`        | Dialog width preset.                                   | `"lg" \| "md" \| "sm"` | `'md'`      |
-| `subheading`  | `subheading`  | Optional supporting line under the heading.            | `string`               | `undefined` |
-
-
-## Events
-
-| Event          | Description                                                       | Type                |
-| -------------- | ----------------------------------------------------------------- | ------------------- |
-| `rkModalClose` | Emitted when the user requests dismissal (X, backdrop or Escape). | `CustomEvent<void>` |
-
-
-## Slots
-
-| Slot       | Description                                    |
-| ---------- | ---------------------------------------------- |
-|            | Dialog body.                                   |
-| `"footer"` | Action row pinned to the bottom of the dialog. |
-| `"header"` | Replaces the default heading row entirely.     |
-
-
-## Shadow Parts
-
-| Part         | Description |
-| ------------ | ----------- |
-| `"backdrop"` |             |
-| `"body"`     |             |
-| `"close"`    |             |
-| `"footer"`   |             |
-| `"header"`   |             |
-| `"heading"`  |             |
-| `"panel"`    |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,176 +0,0 @@
-import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';
-
-/**
- * An accessible dialog with a backdrop, Escape handling and focus restoration.
- *
- * The component is presentational: it emits `rkModalClose` and lets the host
- * application own the `open` state.
- *
- * @slot - Dialog body.
- * @slot header - Replaces the default heading row entirely.
- * @slot footer - Action row pinned to the bottom of the dialog.
- */
-@Component({
-  tag: 'rk-modal',
-  styleUrl: 'rk-modal.css',
-  shadow: true,
-})
-export class RkModal {
-  @Element() host!: HTMLElement;
-
-  /** Controls visibility. */
-  @Prop() open = false;
-
-  /** Heading text for the default header. */
-  @Prop() heading = '';
-
-  /** Optional supporting line under the heading. */
-  @Prop() subheading?: string;
-
-  /** Dialog width preset. */
-  @Prop() size: 'sm' | 'md' | 'lg' = 'md';
-
-  /** Set to false to require an explicit action to dismiss. */
-  @Prop() dismissible = true;
-
-  /** Emitted when the user requests dismissal (X, backdrop or Escape). */
-  @Event({ eventName: 'rkModalClose' }) rkModalClose!: EventEmitter<void>;
-
-  @State() private hasFooter = false;
-
-  private previouslyFocused?: HTMLElement;
-  private panelEl?: HTMLElement;
-
-  /** Collapses the footer region when no action row was projected into it. */
-  private syncFooterSlot = () => {
-    this.hasFooter = Array.from(this.host.children).some(node => node.getAttribute('slot') === 'footer');
-  };
-
-  @Watch('open')
-  protected onOpenChange(isOpen: boolean, wasOpen: boolean) {
-    if (isOpen === wasOpen) return;
-
-    if (isOpen) {
-      this.previouslyFocused = document.activeElement as HTMLElement;
-      document.addEventListener('keydown', this.handleGlobalKeyDown);
-      this.lockScroll(true);
-      // Wait a frame so the panel exists before moving focus into it.
-      requestAnimationFrame(() => this.focusFirst());
-    } else {
-      document.removeEventListener('keydown', this.handleGlobalKeyDown);
-      this.lockScroll(false);
-      this.previouslyFocused?.focus?.();
-      this.previouslyFocused = undefined;
-    }
-  }
-
-  componentWillLoad() {
-    this.syncFooterSlot();
-  }
-
-  componentDidLoad() {
-    if (this.open) this.onOpenChange(true, false);
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleGlobalKeyDown);
-    this.lockScroll(false);
-  }
-
-  private lockScroll(locked: boolean) {
-    if (typeof document === 'undefined') return;
-    document.documentElement.style.overflow = locked ? 'hidden' : '';
-  }
-
-  private focusableElements(): HTMLElement[] {
-    if (!this.panelEl) return [];
-    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    // Slotted content lives in the light DOM, so both trees have to be queried.
-    const inShadow = Array.from(this.panelEl.querySelectorAll<HTMLElement>(selector));
-    const inLight = Array.from(this.host.querySelectorAll<HTMLElement>(selector));
-    return [...inShadow, ...inLight].filter(el => el.offsetParent !== null || el === document.activeElement);
-  }
-
-  private focusFirst() {
-    const [first] = this.focusableElements();
-    (first ?? this.panelEl)?.focus?.();
-  }
-
-  private handleGlobalKeyDown = (event: KeyboardEvent) => {
-    if (!this.open) return;
-
-    if (event.key === 'Escape' && this.dismissible) {
-      event.preventDefault();
-      this.rkModalClose.emit();
-      return;
-    }
-
-    if (event.key === 'Tab') {
-      const focusable = this.focusableElements();
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const active = (this.host.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement;
-
-      if (event.shiftKey && active === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-  };
-
-  private handleBackdrop = (event: MouseEvent) => {
-    if (!this.dismissible) return;
-    if (event.target === event.currentTarget) this.rkModalClose.emit();
-  };
-
-  render() {
-    if (!this.open) return <Host aria-hidden="true" />;
-
-    return (
-      <Host>
-        <div class="backdrop" part="backdrop" onClick={this.handleBackdrop}>
-          <div
-            class={{ panel: true, [`size-${this.size}`]: true }}
-            part="panel"
-            role="dialog"
-            aria-modal="true"
-            aria-label={this.heading || 'Dialog'}
-            tabindex={-1}
-            ref={el => (this.panelEl = el)}
-          >
-            <header class="header" part="header">
-              <slot name="header">
-                <div class="titles">
-                  <h2 class="heading" part="heading">
-                    {this.heading}
-                  </h2>
-                  {this.subheading && <p class="subheading">{this.subheading}</p>}
-                </div>
-              </slot>
-
-              {this.dismissible && (
-                <button class="close" part="close" type="button" aria-label="Close dialog" onClick={() => this.rkModalClose.emit()}>
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-                    <path d="M6 6l12 12M18 6 6 18" />
-                  </svg>
-                </button>
-              )}
-            </header>
-
-            <div class="body" part="body">
-              <slot />
-            </div>
-
-            <footer class={{ footer: true, 'is-empty': !this.hasFooter }} part="footer">
-              <slot name="footer" onSlotchange={this.syncFooterSlot} />
-            </footer>
-          </div>
-        </div>
-      </Host>
-    );
-  }
-}

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

@@ -1,42 +0,0 @@
-# rk-rating
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-A star rating that works as a read-only display or an interactive input.
-
-## Properties
-
-| Property    | Attribute    | Description                                             | Type      | Default     |
-| ----------- | ------------ | ------------------------------------------------------- | --------- | ----------- |
-| `count`     | `count`      | Optional count of ratings, rendered as "(24)".          | `number`  | `undefined` |
-| `label`     | `label`      | Accessible label for the group.                         | `string`  | `'Rating'`  |
-| `max`       | `max`        | Number of stars.                                        | `number`  | `5`         |
-| `readonly`  | `readonly`   | When true the stars are display-only and not focusable. | `boolean` | `false`     |
-| `showValue` | `show-value` | Renders the numeric value next to the stars.            | `boolean` | `false`     |
-| `size`      | `size`       | Star size in pixels.                                    | `number`  | `18`        |
-| `value`     | `value`      | Current rating. Supports halves when `readonly`.        | `number`  | `0`         |
-
-
-## Events
-
-| Event            | Description                               | Type                  |
-| ---------------- | ----------------------------------------- | --------------------- |
-| `rkRatingChange` | Emitted when the user picks a new rating. | `CustomEvent<number>` |
-
-
-## Shadow Parts
-
-| Part      | Description |
-| --------- | ----------- |
-| `"stars"` |             |
-| `"value"` |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,114 +0,0 @@
-import { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
-
-/**
- * A star rating that works as a read-only display or an interactive input.
- */
-@Component({
-  tag: 'rk-rating',
-  styleUrl: 'rk-rating.css',
-  shadow: true,
-})
-export class RkRating {
-  /** Current rating. Supports halves when `readonly`. */
-  @Prop({ mutable: true }) value = 0;
-
-  /** Number of stars. */
-  @Prop() max = 5;
-
-  /** When true the stars are display-only and not focusable. */
-  @Prop() readonly = false;
-
-  /** Star size in pixels. */
-  @Prop() size = 18;
-
-  /** Accessible label for the group. */
-  @Prop() label = 'Rating';
-
-  /** Renders the numeric value next to the stars. */
-  @Prop() showValue = false;
-
-  /** Optional count of ratings, rendered as "(24)". */
-  @Prop() count?: number;
-
-  /** Emitted when the user picks a new rating. */
-  @Event({ eventName: 'rkRatingChange' }) rkRatingChange!: EventEmitter<number>;
-
-  @State() private hovered = 0;
-
-  private select(next: number) {
-    if (this.readonly) return;
-    // Clicking the active star clears the rating, which is the usual affordance.
-    const resolved = next === this.value ? 0 : next;
-    this.value = resolved;
-    this.rkRatingChange.emit(resolved);
-  }
-
-  private handleKeyDown = (event: KeyboardEvent) => {
-    if (this.readonly) return;
-    const step = event.key === 'ArrowRight' || event.key === 'ArrowUp' ? 1 : event.key === 'ArrowLeft' || event.key === 'ArrowDown' ? -1 : 0;
-    if (step === 0) return;
-    event.preventDefault();
-    const next = Math.min(this.max, Math.max(0, Math.round(this.value) + step));
-    this.value = next;
-    this.rkRatingChange.emit(next);
-  };
-
-  render() {
-    const active = this.hovered || this.value;
-    const stars = Array.from({ length: Math.max(1, Math.round(this.max)) }, (_, index) => index + 1);
-
-    return (
-      <Host style={{ '--rk-star-size': `${this.size}px` }}>
-        <div
-          class={{ stars: true, 'is-readonly': this.readonly }}
-          part="stars"
-          role={this.readonly ? 'img' : 'slider'}
-          aria-label={`${this.label}: ${this.value} out of ${this.max}`}
-          aria-valuenow={this.readonly ? null : String(this.value)}
-          aria-valuemin={this.readonly ? null : '0'}
-          aria-valuemax={this.readonly ? null : String(this.max)}
-          tabindex={this.readonly ? null : 0}
-          onKeyDown={this.handleKeyDown}
-          onMouseLeave={() => (this.hovered = 0)}
-        >
-          {stars.map(star => {
-            // Fractional fill only matters in read-only display mode.
-            const fill = this.readonly ? Math.min(1, Math.max(0, this.value - (star - 1))) : star <= active ? 1 : 0;
-
-            return (
-              <span
-                class="star-wrap"
-                key={star}
-                onMouseEnter={() => !this.readonly && (this.hovered = star)}
-                onClick={() => this.select(star)}
-                aria-hidden="true"
-              >
-                <svg class="star" viewBox="0 0 24 24">
-                  <path
-                    class="star-bg"
-                    d="M12 2.6l2.86 5.98 6.54.87-4.8 4.5 1.2 6.45L12 17.3l-5.8 3.1 1.2-6.45-4.8-4.5 6.54-.87z"
-                  />
-                  <clipPath id={`clip-${star}`}>
-                    <rect x="0" y="0" width={24 * fill} height="24" />
-                  </clipPath>
-                  <path
-                    class="star-fg"
-                    clip-path={`url(#clip-${star})`}
-                    d="M12 2.6l2.86 5.98 6.54.87-4.8 4.5 1.2 6.45L12 17.3l-5.8 3.1 1.2-6.45-4.8-4.5 6.54-.87z"
-                  />
-                </svg>
-              </span>
-            );
-          })}
-
-          {this.showValue && (
-            <span class="value" part="value">
-              {this.value ? this.value.toFixed(1) : '—'}
-              {typeof this.count === 'number' && <span class="count">({this.count})</span>}
-            </span>
-          )}
-        </div>
-      </Host>
-    );
-  }
-}

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

@@ -1,66 +0,0 @@
-# rk-recipe-card
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-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.
-
-## Properties
-
-| Property                | Attribute       | Description                                                               | Type                | Default     |
-| ----------------------- | --------------- | ------------------------------------------------------------------------- | ------------------- | ----------- |
-| `area`                  | `area`          | Cuisine / region, e.g. "Italian".                                         | `string`            | `undefined` |
-| `category`              | `category`      | Category, e.g. "Dessert".                                                 | `string`            | `undefined` |
-| `compact`               | `compact`       | Renders a compact horizontal layout, for dense lists and the planner.     | `boolean`           | `false`     |
-| `favorite`              | `favorite`      | Whether this recipe is currently favorited.                               | `boolean`           | `false`     |
-| `hideFavorite`          | `hide-favorite` | Hides the favorite button entirely (e.g. inside the planner).             | `boolean`           | `false`     |
-| `href`                  | `href`          | Real href used for accessibility, SEO and middle-click / open-in-new-tab. | `string`            | `undefined` |
-| `image`                 | `image`         | Thumbnail URL.                                                            | `string`            | `undefined` |
-| `minutes`               | `minutes`       | Total time in minutes. Hidden when omitted.                               | `number`            | `undefined` |
-| `name`                  | `name`          | Recipe title.                                                             | `string`            | `''`        |
-| `origin`                | `origin`        | `custom` recipes are user-authored and get an "Owned" badge.              | `"api" \| "custom"` | `'api'`     |
-| `recipeId` _(required)_ | `recipe-id`     | Stable identifier echoed back in every event payload.                     | `string`            | `undefined` |
-| `servings`              | `servings`      | Number of servings. Hidden when omitted.                                  | `number`            | `undefined` |
-
-
-## Events
-
-| Event              | Description                                                          | Type                                    |
-| ------------------ | -------------------------------------------------------------------- | --------------------------------------- |
-| `rkCardSelect`     | Emitted on primary activation. The host app performs the navigation. | `CustomEvent<RkRecipeCardSelectDetail>` |
-| `rkFavoriteToggle` | Emitted when the favorite button is pressed.                         | `CustomEvent<RkFavoriteToggleDetail>`   |
-
-
-## Slots
-
-| Slot        | Description                                                      |
-| ----------- | ---------------------------------------------------------------- |
-|             | Extra metadata rendered under the title (badges, tags, ratings). |
-| `"actions"` | Buttons rendered in the card footer (e.g. "Add to plan").        |
-
-
-## Shadow Parts
-
-| Part                | Description |
-| ------------------- | ----------- |
-| `"body"`            |             |
-| `"card"`            |             |
-| `"extra"`           |             |
-| `"favorite-button"` |             |
-| `"footer"`          |             |
-| `"media"`           |             |
-| `"meta"`            |             |
-| `"owned-badge"`     |             |
-| `"title"`           |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,179 +0,0 @@
-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>
-    );
-  }
-}