@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,91 @@
+{
+  "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

@@ -0,0 +1,38 @@
+# 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.css

@@ -0,0 +1,102 @@
+:host {
+  display: inline-flex;
+  font-family: var(--rk-font);
+  vertical-align: middle;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: var(--rk-radius-pill, 999px);
+  border: 1px solid transparent;
+  font-size: 0.76em;
+  font-weight: 650;
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.badge.is-small {
+  padding: 2px 8px;
+  font-size: 0.7em;
+}
+
+/* --- soft (default) --- */
+.variant-soft.tone-neutral {
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-ink-2, #52443c);
+}
+.variant-soft.tone-primary {
+  background: var(--rk-primary-soft, #fdeee6);
+  color: var(--rk-primary-strong, #b23c11);
+}
+.variant-soft.tone-accent {
+  background: var(--rk-accent-soft, #e2f3f1);
+  color: var(--rk-accent, #0f766e);
+}
+.variant-soft.tone-success {
+  background: var(--rk-success-soft, #e6f5eb);
+  color: var(--rk-success, #15803d);
+}
+.variant-soft.tone-warning {
+  background: var(--rk-warning-soft, #fdf3d8);
+  color: var(--rk-warning, #a16207);
+}
+.variant-soft.tone-danger {
+  background: var(--rk-danger-soft, #fdeae1);
+  color: var(--rk-danger, #c2410c);
+}
+
+/* --- solid --- */
+.variant-solid {
+  color: #fff;
+}
+.variant-solid.tone-neutral {
+  background: var(--rk-ink, #211a16);
+}
+.variant-solid.tone-primary {
+  background: var(--rk-primary, #d94f1b);
+}
+.variant-solid.tone-accent {
+  background: var(--rk-accent, #0f766e);
+}
+.variant-solid.tone-success {
+  background: var(--rk-success, #15803d);
+}
+.variant-solid.tone-warning {
+  background: var(--rk-warning, #a16207);
+}
+.variant-solid.tone-danger {
+  background: var(--rk-danger, #c2410c);
+}
+
+/* --- outline --- */
+.variant-outline {
+  background: transparent;
+}
+.variant-outline.tone-neutral {
+  border-color: var(--rk-border-strong, #d9c6b8);
+  color: var(--rk-ink-2, #52443c);
+}
+.variant-outline.tone-primary {
+  border-color: var(--rk-primary, #d94f1b);
+  color: var(--rk-primary, #d94f1b);
+}
+.variant-outline.tone-accent {
+  border-color: var(--rk-accent, #0f766e);
+  color: var(--rk-accent, #0f766e);
+}
+.variant-outline.tone-success {
+  border-color: var(--rk-success, #15803d);
+  color: var(--rk-success, #15803d);
+}
+.variant-outline.tone-warning {
+  border-color: var(--rk-warning, #a16207);
+  color: var(--rk-warning, #a16207);
+}
+.variant-outline.tone-danger {
+  border-color: var(--rk-danger, #c2410c);
+  color: var(--rk-danger, #c2410c);
+}

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

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

@@ -0,0 +1,52 @@
+# 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.css

@@ -0,0 +1,155 @@
+:host {
+  display: inline-flex;
+  font-family: var(--rk-font);
+  vertical-align: middle;
+}
+
+.chip,
+.body {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font: inherit;
+  font-size: 0.88em;
+  font-weight: 550;
+  line-height: 1;
+  color: var(--rk-ink-2, #52443c);
+  background: var(--rk-surface, #fff);
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: var(--rk-radius-pill, 999px);
+  padding: 9px 15px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--rk-transition), border-color var(--rk-transition), color var(--rk-transition), transform var(--rk-transition);
+}
+
+.chip:hover:not(:disabled),
+.body:hover:not(:disabled) {
+  border-color: var(--rk-border-strong, #d9c6b8);
+  background: var(--rk-surface-2, #fdf5ef);
+}
+
+.chip:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.chip:focus-visible,
+.body:focus-visible,
+.dismiss:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.chip:disabled,
+.body:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Selected states, per tone */
+.chip.is-selected.tone-neutral {
+  background: var(--rk-ink, #211a16);
+  border-color: var(--rk-ink, #211a16);
+  color: var(--rk-surface, #fff);
+}
+
+.chip.is-selected.tone-primary {
+  background: var(--rk-primary, #d94f1b);
+  border-color: var(--rk-primary, #d94f1b);
+  color: #fff;
+}
+
+.chip.is-selected.tone-accent {
+  background: var(--rk-accent, #0f766e);
+  border-color: var(--rk-accent, #0f766e);
+  color: #fff;
+}
+
+.chip.is-selected:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--rk-radius-pill, 999px);
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-muted, #857166);
+  font-size: 0.78em;
+  font-weight: 650;
+}
+
+.chip.is-selected .count {
+  background: rgba(255, 255, 255, 0.22);
+  color: inherit;
+}
+
+/*
+ * `display: contents` lets slotted nodes become direct flex items of the chip,
+ * so an *empty* leading slot contributes no box and therefore no stray gap.
+ */
+.lead {
+  display: contents;
+}
+
+.lead ::slotted(*) {
+  font-size: 1.05em;
+  line-height: 1;
+}
+
+/* Dismissible layout: shell holds two buttons that read as one pill. */
+.chip.is-dismissible {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--rk-radius-pill, 999px);
+  gap: 0;
+}
+
+.chip.is-dismissible .body {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  padding: 0;
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-left: 0;
+  border-radius: 0 var(--rk-radius-pill, 999px) var(--rk-radius-pill, 999px) 0;
+  background: var(--rk-surface, #fff);
+  color: var(--rk-muted, #857166);
+  cursor: pointer;
+  transition: background var(--rk-transition), color var(--rk-transition);
+}
+
+.dismiss:hover:not(:disabled) {
+  background: var(--rk-danger-soft, #fdeae1);
+  color: var(--rk-danger, #c2410c);
+}
+
+.dismiss:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dismiss svg {
+  width: 12px;
+  height: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chip,
+  .body,
+  .dismiss {
+    transition: none;
+  }
+}

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

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

@@ -0,0 +1,44 @@
+# 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.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 52px 28px;
+  border: 1.5px dashed var(--rk-border-strong, #d9c6b8);
+  border-radius: var(--rk-radius-lg, 20px);
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-ink, #211a16);
+}
+
+.empty.is-bare {
+  border: 0;
+  background: transparent;
+  padding: 28px 16px;
+}
+
+.empty.tone-error {
+  border-color: var(--rk-danger, #c2410c);
+  background: var(--rk-danger-soft, #fdeae1);
+}
+
+.icon {
+  font-size: 2.5rem;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.heading {
+  margin: 0;
+  font-family: var(--rk-font-display, serif);
+  font-size: 1.25em;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.message {
+  margin: 0;
+  max-width: 46ch;
+  color: var(--rk-muted, #857166);
+  line-height: 1.55;
+  font-size: 0.94em;
+}
+
+.empty.tone-error .message {
+  color: var(--rk-danger, #c2410c);
+}
+
+/* `display: contents` keeps an unused actions slot from adding vertical space. */
+.actions {
+  display: contents;
+}
+
+.actions ::slotted(*) {
+  margin-top: 12px;
+}