@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,50 @@
+import { Component, h, Prop } from '@stencil/core';
+
+/**
+ * Placeholder shown when a list has no items, a search returns nothing, or a
+ * request fails.
+ *
+ * @slot - Call-to-action content rendered under the message (buttons, links).
+ */
+@Component({
+  tag: 'rk-empty-state',
+  styleUrl: 'rk-empty-state.css',
+  shadow: true,
+})
+export class RkEmptyState {
+  /** Emoji or short glyph shown above the heading. */
+  @Prop() icon = '🍳';
+
+  /** Bold headline. */
+  @Prop() heading = 'Nothing here yet';
+
+  /** Supporting sentence. */
+  @Prop() message?: string;
+
+  /** `error` swaps to a warning treatment. */
+  @Prop() tone: 'neutral' | 'error' = 'neutral';
+
+  /** Removes the dashed border and reduces padding, for inline use. */
+  @Prop() bare = false;
+
+  render() {
+    return (
+      <div class={{ empty: true, [`tone-${this.tone}`]: true, 'is-bare': this.bare }} part="container" role={this.tone === 'error' ? 'alert' : null}>
+        <span class="icon" part="icon" aria-hidden="true">
+          {this.icon}
+        </span>
+        <h3 class="heading" part="heading">
+          {this.heading}
+        </h3>
+        {this.message && (
+          <p class="message" part="message">
+            {this.message}
+          </p>
+        )}
+        <div class="actions" part="actions">
+          <slot />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,58 @@
+# rk-meal-slot
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+One cell of the weekly planner grid: either an empty "add" target or a filled
+slot showing the planned recipe. Doubles as a drop zone for drag-and-drop
+planning.
+
+## Properties
+
+| Property                | Attribute      | Description                                                            | Type      | Default     |
+| ----------------------- | -------------- | ---------------------------------------------------------------------- | --------- | ----------- |
+| `day` _(required)_      | `day`          | Day key this slot belongs to, e.g. `monday`. Echoed in event payloads. | `string`  | `undefined` |
+| `disabled`              | `disabled`     | Disables interaction.                                                  | `boolean` | `false`     |
+| `mealLabel`             | `meal-label`   | Human-readable meal label shown as the slot caption.                   | `string`  | `undefined` |
+| `mealType` _(required)_ | `meal-type`    | Meal type key, e.g. `breakfast`. Echoed in event payloads.             | `string`  | `undefined` |
+| `recipeId`              | `recipe-id`    | Id of the planned recipe. Empty means the slot is free.                | `string`  | `undefined` |
+| `recipeImage`           | `recipe-image` | Thumbnail of the planned recipe.                                       | `string`  | `undefined` |
+| `recipeName`            | `recipe-name`  | Title of the planned recipe.                                           | `string`  | `undefined` |
+
+
+## Events
+
+| Event          | Description                                                               | Type                              |
+| -------------- | ------------------------------------------------------------------------- | --------------------------------- |
+| `rkMealAdd`    | Emitted when an empty slot is activated — the host opens a recipe picker. | `CustomEvent<RkMealSlotDetail>`   |
+| `rkMealDrop`   | Emitted when a recipe is dropped onto this slot.                          | `CustomEvent<RkMealDropDetail>`   |
+| `rkMealOpen`   | Emitted when the planned recipe is activated — the host navigates.        | `CustomEvent<RkMealRecipeDetail>` |
+| `rkMealRemove` | Emitted when the planned recipe should be cleared.                        | `CustomEvent<RkMealRecipeDetail>` |
+| `rkMealSwap`   | Emitted when the planned recipe should be replaced.                       | `CustomEvent<RkMealRecipeDetail>` |
+
+
+## Slots
+
+| Slot | Description                                                        |
+| ---- | ------------------------------------------------------------------ |
+|      | Extra content rendered under the recipe name (e.g. serving notes). |
+
+
+## Shadow Parts
+
+| Part         | Description |
+| ------------ | ----------- |
+| `"caption"`  |             |
+| `"controls"` |             |
+| `"main"`     |             |
+| `"name"`     |             |
+| `"slot"`     |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,225 @@
+:host {
+  display: block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  color: var(--rk-ink, #211a16);
+}
+
+.slot {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--rk-radius, 14px);
+  transition: border-color var(--rk-transition), background var(--rk-transition), box-shadow var(--rk-transition);
+}
+
+/* ---------- empty ---------- */
+
+.slot.is-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  min-height: 86px;
+  padding: 12px 10px;
+  border: 1.5px dashed var(--rk-border-strong, #d9c6b8);
+  background: transparent;
+  color: var(--rk-muted, #857166);
+  font: inherit;
+  cursor: pointer;
+}
+
+.slot.is-empty:hover:not(:disabled) {
+  border-color: var(--rk-primary, #d94f1b);
+  background: var(--rk-primary-soft, #fdeee6);
+  color: var(--rk-primary-strong, #b23c11);
+}
+
+.slot.is-empty:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.slot.is-empty:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.plus {
+  font-size: 1.3rem;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.empty-label {
+  font-size: 0.76em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* ---------- filled ---------- */
+
+.slot.is-filled {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 86px;
+  padding: 10px;
+  border: 1px solid var(--rk-border, #ecdfd4);
+  background: var(--rk-surface, #fff);
+  box-shadow: var(--rk-shadow-sm);
+}
+
+.caption {
+  font-size: 0.7em;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--rk-muted, #857166);
+}
+
+.main {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--rk-radius-sm, 8px);
+}
+
+.main:hover:not(:disabled) .name {
+  color: var(--rk-primary, #d94f1b);
+}
+
+.main:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.main:disabled {
+  cursor: not-allowed;
+}
+
+.thumb {
+  flex: 0 0 auto;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--rk-radius-sm, 8px);
+  object-fit: cover;
+  background: var(--rk-surface-2, #fdf5ef);
+}
+
+.thumb-fallback {
+  display: grid;
+  place-items: center;
+  font-size: 1.1rem;
+}
+
+.name {
+  font-size: 0.87em;
+  font-weight: 600;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color var(--rk-transition);
+}
+
+.extra {
+  display: contents;
+}
+
+.extra ::slotted(*) {
+  font-size: 0.8em;
+  color: var(--rk-muted, #857166);
+}
+
+.controls {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  gap: 3px;
+  opacity: 0;
+  transition: opacity var(--rk-transition);
+}
+
+.slot.is-filled:hover .controls,
+.slot.is-filled:focus-within .controls {
+  opacity: 1;
+}
+
+.ctrl {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: 50%;
+  background: var(--rk-surface, #fff);
+  color: var(--rk-ink-2, #52443c);
+  cursor: pointer;
+  box-shadow: var(--rk-shadow-sm);
+  transition: background var(--rk-transition), color var(--rk-transition);
+}
+
+.ctrl:hover:not(:disabled) {
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-primary, #d94f1b);
+}
+
+.ctrl.is-danger:hover:not(:disabled) {
+  background: var(--rk-danger-soft, #fdeae1);
+  color: var(--rk-danger, #c2410c);
+}
+
+.ctrl:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.ctrl:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ctrl svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* ---------- drag & drop ---------- */
+
+.slot.is-drag-over {
+  border-color: var(--rk-accent, #0f766e) !important;
+  border-style: solid;
+  background: var(--rk-accent-soft, #e2f3f1) !important;
+  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+}
+
+/* Touch devices have no hover, so the controls stay visible. */
+@media (hover: none) {
+  .controls {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slot,
+  .controls,
+  .ctrl,
+  .name {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,182 @@
+import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';
+
+export interface RkMealSlotDetail {
+  day: string;
+  mealType: string;
+}
+
+export interface RkMealRecipeDetail extends RkMealSlotDetail {
+  recipeId: string;
+  recipeName: string;
+}
+
+export interface RkMealDropDetail extends RkMealSlotDetail {
+  /** Raw `text/plain` payload from the drag operation. */
+  payload: string;
+}
+
+/**
+ * One cell of the weekly planner grid: either an empty "add" target or a filled
+ * slot showing the planned recipe. Doubles as a drop zone for drag-and-drop
+ * planning.
+ *
+ * @slot - Extra content rendered under the recipe name (e.g. serving notes).
+ */
+@Component({
+  tag: 'rk-meal-slot',
+  styleUrl: 'rk-meal-slot.css',
+  shadow: true,
+})
+export class RkMealSlot {
+  /** Day key this slot belongs to, e.g. `monday`. Echoed in event payloads. */
+  @Prop() day!: string;
+
+  /** Meal type key, e.g. `breakfast`. Echoed in event payloads. */
+  @Prop() mealType!: string;
+
+  /** Human-readable meal label shown as the slot caption. */
+  @Prop() mealLabel?: string;
+
+  /** Id of the planned recipe. Empty means the slot is free. */
+  @Prop() recipeId?: string;
+
+  /** Title of the planned recipe. */
+  @Prop() recipeName?: string;
+
+  /** Thumbnail of the planned recipe. */
+  @Prop() recipeImage?: string;
+
+  /** Disables interaction. */
+  @Prop() disabled = false;
+
+  /** Emitted when an empty slot is activated — the host opens a recipe picker. */
+  @Event({ eventName: 'rkMealAdd' }) rkMealAdd!: EventEmitter<RkMealSlotDetail>;
+
+  /** Emitted when the planned recipe should be replaced. */
+  @Event({ eventName: 'rkMealSwap' }) rkMealSwap!: EventEmitter<RkMealRecipeDetail>;
+
+  /** Emitted when the planned recipe should be cleared. */
+  @Event({ eventName: 'rkMealRemove' }) rkMealRemove!: EventEmitter<RkMealRecipeDetail>;
+
+  /** Emitted when the planned recipe is activated — the host navigates. */
+  @Event({ eventName: 'rkMealOpen' }) rkMealOpen!: EventEmitter<RkMealRecipeDetail>;
+
+  /** Emitted when a recipe is dropped onto this slot. */
+  @Event({ eventName: 'rkMealDrop' }) rkMealDrop!: EventEmitter<RkMealDropDetail>;
+
+  @State() private dragOver = false;
+
+  private get filled() {
+    return !!this.recipeId;
+  }
+
+  private get slotDetail(): RkMealSlotDetail {
+    return { day: this.day, mealType: this.mealType };
+  }
+
+  private get recipeDetail(): RkMealRecipeDetail {
+    return { ...this.slotDetail, recipeId: this.recipeId ?? '', recipeName: this.recipeName ?? '' };
+  }
+
+  private handleDragOver = (event: DragEvent) => {
+    if (this.disabled) return;
+    // Preventing default is what marks this element as a valid drop target.
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    this.dragOver = true;
+  };
+
+  private handleDrop = (event: DragEvent) => {
+    event.preventDefault();
+    this.dragOver = false;
+    if (this.disabled) return;
+    const payload = event.dataTransfer?.getData('text/plain') ?? '';
+    if (payload) this.rkMealDrop.emit({ ...this.slotDetail, payload });
+  };
+
+  render() {
+    if (!this.filled) {
+      return (
+        <button
+          class={{ slot: true, 'is-empty': true, 'is-drag-over': this.dragOver }}
+          part="slot"
+          type="button"
+          disabled={this.disabled}
+          aria-label={`Add a recipe for ${this.mealLabel ?? this.mealType} on ${this.day}`}
+          onClick={() => this.rkMealAdd.emit(this.slotDetail)}
+          onDragOver={this.handleDragOver}
+          onDragLeave={() => (this.dragOver = false)}
+          onDrop={this.handleDrop}
+        >
+          <span class="plus" aria-hidden="true">
+            +
+          </span>
+          <span class="empty-label">{this.mealLabel ?? this.mealType}</span>
+        </button>
+      );
+    }
+
+    return (
+      <div
+        class={{ slot: true, 'is-filled': true, 'is-drag-over': this.dragOver }}
+        part="slot"
+        onDragOver={this.handleDragOver}
+        onDragLeave={() => (this.dragOver = false)}
+        onDrop={this.handleDrop}
+      >
+        {this.mealLabel && (
+          <span class="caption" part="caption">
+            {this.mealLabel}
+          </span>
+        )}
+
+        <button
+          class="main"
+          part="main"
+          type="button"
+          disabled={this.disabled}
+          title={this.recipeName}
+          onClick={() => this.rkMealOpen.emit(this.recipeDetail)}
+        >
+          {this.recipeImage ? (
+            <img class="thumb" src={this.recipeImage} alt="" loading="lazy" decoding="async" />
+          ) : (
+            <span class="thumb thumb-fallback" aria-hidden="true">
+              🍽️
+            </span>
+          )}
+          <span class="name" part="name">
+            {this.recipeName}
+          </span>
+        </button>
+
+        <div class="extra">
+          <slot />
+        </div>
+
+        <div class="controls" part="controls">
+          <button class="ctrl" type="button" disabled={this.disabled} aria-label={`Replace ${this.recipeName}`} title="Replace" onClick={() => this.rkMealSwap.emit(this.recipeDetail)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M3 12a9 9 0 0 1 15.3-6.4L21 8" />
+              <path d="M21 3v5h-5" />
+              <path d="M21 12a9 9 0 0 1-15.3 6.4L3 16" />
+              <path d="M3 21v-5h5" />
+            </svg>
+          </button>
+          <button
+            class="ctrl is-danger"
+            type="button"
+            disabled={this.disabled}
+            aria-label={`Remove ${this.recipeName} from ${this.mealLabel ?? this.mealType}`}
+            title="Remove"
+            onClick={() => this.rkMealRemove.emit(this.recipeDetail)}
+          >
+            <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>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,57 @@
+# 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/)*