@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/packages/recipe-kit-stencil/package.json

@@ -1,91 +0,0 @@
-{
-  "name": "recipe-kit-stencil",
-  "version": "0.1.0",
-  "description": "Framework-agnostic web component library (StencilJS) for recipe discovery, favorites and meal planning UIs.",
-  "license": "MIT",
-  "author": "Sejal Sharma",
-  "keywords": [
-    "stencil",
-    "stenciljs",
-    "web-components",
-    "custom-elements",
-    "design-system",
-    "recipe",
-    "meal-planner",
-    "svelte",
-    "sveltekit"
-  ],
-  "type": "module",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/recipe-kit/recipe-kit.esm.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./loader": {
-      "types": "./loader/index.d.ts",
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./dist/recipe-kit/recipe-kit.css": "./dist/recipe-kit/recipe-kit.css",
-    "./styles": "./dist/recipe-kit/recipe-kit.css",
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/",
-    "loader/",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": [
-    "dist/**/*.css",
-    "dist/esm/polyfills/*"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec",
-    "test:watch": "stencil test --spec --watchAll",
-    "generate": "stencil generate",
-    "clean": "rimraf dist loader www .stencil",
-    "prepare": "stencil build",
-    "prepublishOnly": "npm run clean && npm run build",
-    "release:patch": "npm version patch && npm publish",
-    "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish"
-  },
-  "dependencies": {
-    "@stencil/core": "^4.44.1"
-  },
-  "devDependencies": {
-    "@types/jest": "^29.5.14",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^24.10.2",
-    "rimraf": "^6.0.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sejal-sharma/recipe-ui.git",
-    "directory": "packages/recipe-kit-stencil"
-  },
-  "bugs": {
-    "url": "https://github.com/sejal-sharma/recipe-ui/issues"
-  },
-  "homepage": "https://github.com/sejal-sharma/recipe-ui/tree/main/packages/recipe-kit-stencil#readme"
-}

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

@@ -1,38 +0,0 @@
-# rk-badge
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-A small, non-interactive label. Purely slot-driven so hosts can put icons,
-text or counts inside it.
-
-## Properties
-
-| Property  | Attribute | Description                                                      | Type                                                                       | Default     |
-| --------- | --------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
-| `small`   | `small`   | Compact sizing for dense layouts.                                | `boolean`                                                                  | `false`     |
-| `tone`    | `tone`    | Color treatment.                                                 | `"accent" \| "danger" \| "neutral" \| "primary" \| "success" \| "warning"` | `'neutral'` |
-| `variant` | `variant` | `soft` is tinted, `solid` is filled, `outline` is bordered only. | `"outline" \| "soft" \| "solid"`                                           | `'soft'`    |
-
-
-## Slots
-
-| Slot | Description    |
-| ---- | -------------- |
-|      | Badge content. |
-
-
-## Shadow Parts
-
-| Part      | Description |
-| --------- | ----------- |
-| `"badge"` |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,31 +0,0 @@
-import { Component, h, Prop } from '@stencil/core';
-
-/**
- * A small, non-interactive label. Purely slot-driven so hosts can put icons,
- * text or counts inside it.
- *
- * @slot - Badge content.
- */
-@Component({
-  tag: 'rk-badge',
-  styleUrl: 'rk-badge.css',
-  shadow: true,
-})
-export class RkBadge {
-  /** Color treatment. */
-  @Prop() tone: 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';
-
-  /** `soft` is tinted, `solid` is filled, `outline` is bordered only. */
-  @Prop() variant: 'soft' | 'solid' | 'outline' = 'soft';
-
-  /** Compact sizing for dense layouts. */
-  @Prop() small = false;
-
-  render() {
-    return (
-      <span class={{ badge: true, [`tone-${this.tone}`]: true, [`variant-${this.variant}`]: true, 'is-small': this.small }} part="badge">
-        <slot />
-      </span>
-    );
-  }
-}

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

@@ -1,52 +0,0 @@
-# rk-chip
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-A selectable / dismissible filter chip.
-
-## Properties
-
-| Property      | Attribute     | Description                                                           | Type                                 | Default     |
-| ------------- | ------------- | --------------------------------------------------------------------- | ------------------------------------ | ----------- |
-| `count`       | `count`       | Optional trailing count badge (e.g. number of matching recipes).      | `number`                             | `undefined` |
-| `disabled`    | `disabled`    | Disables interaction.                                                 | `boolean`                            | `false`     |
-| `dismissible` | `dismissible` | Renders an "x" button that emits `rkChipDismiss` instead of toggling. | `boolean`                            | `false`     |
-| `label`       | `label`       | Visible text.                                                         | `string`                             | `''`        |
-| `selected`    | `selected`    | Whether the chip is currently active.                                 | `boolean`                            | `false`     |
-| `tone`        | `tone`        | Visual treatment.                                                     | `"accent" \| "neutral" \| "primary"` | `'neutral'` |
-| `value`       | `value`       | Value reported back to the host application in event payloads.        | `string`                             | `undefined` |
-
-
-## Events
-
-| Event           | Description                                                 | Type                                                                |
-| --------------- | ----------------------------------------------------------- | ------------------------------------------------------------------- |
-| `rkChipDismiss` | Emitted when a dismissible chip's remove button is pressed. | `CustomEvent<{ value: string; label: string; }>`                    |
-| `rkChipToggle`  | Emitted when the chip is toggled.                           | `CustomEvent<{ value: string; label: string; selected: boolean; }>` |
-
-
-## Slots
-
-| Slot | Description                                                               |
-| ---- | ------------------------------------------------------------------------- |
-|      | Optional leading content (icon, emoji, avatar) rendered before the label. |
-
-
-## Shadow Parts
-
-| Part        | Description |
-| ----------- | ----------- |
-| `"chip"`    |             |
-| `"count"`   |             |
-| `"dismiss"` |             |
-| `"label"`   |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,105 +0,0 @@
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
-
-/**
- * A selectable / dismissible filter chip.
- *
- * @slot - Optional leading content (icon, emoji, avatar) rendered before the label.
- */
-@Component({
-  tag: 'rk-chip',
-  styleUrl: 'rk-chip.css',
-  shadow: true,
-})
-export class RkChip {
-  /** Visible text. */
-  @Prop() label = '';
-
-  /** Value reported back to the host application in event payloads. */
-  @Prop() value?: string;
-
-  /** Whether the chip is currently active. */
-  @Prop() selected = false;
-
-  /** Optional trailing count badge (e.g. number of matching recipes). */
-  @Prop() count?: number;
-
-  /** Renders an "x" button that emits `rkChipDismiss` instead of toggling. */
-  @Prop() dismissible = false;
-
-  /** Disables interaction. */
-  @Prop() disabled = false;
-
-  /** Visual treatment. */
-  @Prop() tone: 'neutral' | 'primary' | 'accent' = 'neutral';
-
-  /** Emitted when the chip is toggled. */
-  @Event({ eventName: 'rkChipToggle' }) rkChipToggle!: EventEmitter<{ value: string; label: string; selected: boolean }>;
-
-  /** Emitted when a dismissible chip's remove button is pressed. */
-  @Event({ eventName: 'rkChipDismiss' }) rkChipDismiss!: EventEmitter<{ value: string; label: string }>;
-
-  private get resolvedValue() {
-    return this.value ?? this.label;
-  }
-
-  private handleClick = () => {
-    if (this.disabled) return;
-    this.rkChipToggle.emit({
-      value: this.resolvedValue,
-      label: this.label,
-      selected: !this.selected,
-    });
-  };
-
-  private handleDismiss = (event: MouseEvent) => {
-    event.stopPropagation();
-    if (this.disabled) return;
-    this.rkChipDismiss.emit({ value: this.resolvedValue, label: this.label });
-  };
-
-  render() {
-    const body = [
-      <span class="lead">
-        <slot />
-      </span>,
-      <span class="label" part="label">
-        {this.label}
-      </span>,
-      typeof this.count === 'number' && (
-        <span class="count" part="count">
-          {this.count}
-        </span>
-      ),
-    ];
-
-    const classes = {
-      chip: true,
-      'is-selected': this.selected,
-      'is-dismissible': this.dismissible,
-      [`tone-${this.tone}`]: true,
-    };
-
-    // A dismissible chip needs two independent controls, so the shell becomes a
-    // plain element to avoid nesting buttons inside a button.
-    if (this.dismissible) {
-      return (
-        <span class={classes} part="chip">
-          <button class="body" type="button" disabled={this.disabled} onClick={this.handleClick}>
-            {body}
-          </button>
-          <button class="dismiss" part="dismiss" type="button" disabled={this.disabled} aria-label={`Remove ${this.label}`} onClick={this.handleDismiss}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
-              <path d="M6 6l12 12M18 6 6 18" />
-            </svg>
-          </button>
-        </span>
-      );
-    }
-
-    return (
-      <button class={classes} part="chip" type="button" aria-pressed={String(this.selected)} disabled={this.disabled} onClick={this.handleClick}>
-        {body}
-      </button>
-    );
-  }
-}

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

@@ -1,44 +0,0 @@
-# rk-empty-state
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Overview
-
-Placeholder shown when a list has no items, a search returns nothing, or a
-request fails.
-
-## Properties
-
-| Property  | Attribute | Description                                                    | Type                   | Default              |
-| --------- | --------- | -------------------------------------------------------------- | ---------------------- | -------------------- |
-| `bare`    | `bare`    | Removes the dashed border and reduces padding, for inline use. | `boolean`              | `false`              |
-| `heading` | `heading` | Bold headline.                                                 | `string`               | `'Nothing here yet'` |
-| `icon`    | `icon`    | Emoji or short glyph shown above the heading.                  | `string`               | `'🍳'`               |
-| `message` | `message` | Supporting sentence.                                           | `string`               | `undefined`          |
-| `tone`    | `tone`    | `error` swaps to a warning treatment.                          | `"error" \| "neutral"` | `'neutral'`          |
-
-
-## Slots
-
-| Slot | Description                                                         |
-| ---- | ------------------------------------------------------------------- |
-|      | Call-to-action content rendered under the message (buttons, links). |
-
-
-## Shadow Parts
-
-| Part          | Description |
-| ------------- | ----------- |
-| `"actions"`   |             |
-| `"container"` |             |
-| `"heading"`   |             |
-| `"icon"`      |             |
-| `"message"`   |             |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,50 +0,0 @@
-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

@@ -1,58 +0,0 @@
-# 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.tsx

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