@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,141 @@
+:host {
+  display: block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  color: var(--rk-ink, #211a16);
+}
+
+.shell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px 0 14px;
+  min-height: 52px;
+  background: var(--rk-surface, #fff);
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: var(--rk-radius-pill, 999px);
+  box-shadow: var(--rk-shadow-sm);
+  transition: border-color var(--rk-transition), box-shadow var(--rk-transition);
+}
+
+.shell.is-focused {
+  border-color: var(--rk-primary, #d94f1b);
+  box-shadow: var(--rk-focus-ring);
+}
+
+.shell.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--rk-muted, #857166);
+}
+
+.icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  padding: 14px 0;
+  appearance: none;
+}
+
+.input::placeholder {
+  color: var(--rk-muted, #857166);
+  opacity: 0.9;
+}
+
+/* Hide the native WebKit clear affordance — we render our own. */
+.input::-webkit-search-cancel-button,
+.input::-webkit-search-decoration {
+  appearance: none;
+  display: none;
+}
+
+.clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-ink-2, #52443c);
+  cursor: pointer;
+  transition: background var(--rk-transition), color var(--rk-transition);
+}
+
+.clear:hover {
+  background: var(--rk-primary-soft, #fdeee6);
+  color: var(--rk-primary, #d94f1b);
+}
+
+.clear:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.clear svg {
+  width: 15px;
+  height: 15px;
+}
+
+.spinner {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--rk-border-strong, #d9c6b8);
+  border-top-color: var(--rk-primary, #d94f1b);
+  animation: rk-spin 700ms linear infinite;
+}
+
+@keyframes rk-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * `display: contents` promotes slotted controls to flex items of `.shell`, so an
+ * empty `actions` slot leaves no stray box (and no stray gap) behind.
+ */
+.actions {
+  display: contents;
+}
+
+.actions ::slotted(*) {
+  flex: 0 0 auto;
+}
+
+.hint {
+  margin: 8px 0 0;
+  padding-left: 16px;
+  font-size: 0.82em;
+  color: var(--rk-muted, #857166);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 2s;
+  }
+
+  .shell,
+  .clear {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,152 @@
+import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+
+/**
+ * A debounced search input with a clear affordance and a slot for extra controls.
+ *
+ * @slot actions - Rendered to the right of the input, inside the field shell.
+ *                 Useful for a "filters" toggle or a sort control.
+ */
+@Component({
+  tag: 'rk-search-bar',
+  styleUrl: 'rk-search-bar.css',
+  shadow: true,
+})
+export class RkSearchBar {
+  /** Current text in the field. Two-way: updated as the user types. */
+  @Prop({ mutable: true }) value = '';
+
+  /** Placeholder shown when the field is empty. */
+  @Prop() placeholder = 'Search recipes, ingredients, cuisines…';
+
+  /** Accessible label for the input. */
+  @Prop() label = 'Search recipes';
+
+  /** Milliseconds to wait after the last keystroke before emitting `rkSearch`. */
+  @Prop() debounce = 350;
+
+  /** Disables the whole control. */
+  @Prop() disabled = false;
+
+  /** Shows a busy indicator (e.g. while the app is fetching results). */
+  @Prop() loading = false;
+
+  /** Optional helper text rendered under the field. */
+  @Prop() hint?: string;
+
+  /** Emitted with the (trimmed) query after the debounce window, or on submit. */
+  @Event({ eventName: 'rkSearch' }) rkSearch!: EventEmitter<string>;
+
+  /** Emitted when the user clears the field with the clear button or Escape. */
+  @Event({ eventName: 'rkClear' }) rkClear!: EventEmitter<void>;
+
+  @State() private focused = false;
+
+  private inputEl?: HTMLInputElement;
+  private timer?: ReturnType<typeof setTimeout>;
+
+  @Watch('value')
+  protected onValueChange(next: string, prev: string) {
+    // Keep the DOM input in sync when the value is driven from the outside.
+    if (this.inputEl && this.inputEl.value !== next && next !== prev) {
+      this.inputEl.value = next ?? '';
+    }
+  }
+
+  disconnectedCallback() {
+    clearTimeout(this.timer);
+  }
+
+  /** Programmatically focus the input. */
+  @Method()
+  async setFocus() {
+    this.inputEl?.focus();
+  }
+
+  private emit(query: string) {
+    clearTimeout(this.timer);
+    this.rkSearch.emit(query.trim());
+  }
+
+  private handleInput = (event: Event) => {
+    const next = (event.target as HTMLInputElement).value;
+    this.value = next;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.emit(next), Math.max(0, this.debounce));
+  };
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.emit(this.value);
+    } else if (event.key === 'Escape' && this.value) {
+      event.preventDefault();
+      this.handleClear();
+    }
+  };
+
+  private handleClear = () => {
+    clearTimeout(this.timer);
+    this.value = '';
+    if (this.inputEl) this.inputEl.value = '';
+    this.rkClear.emit();
+    this.rkSearch.emit('');
+    this.inputEl?.focus();
+  };
+
+  render() {
+    const hasValue = (this.value ?? '').length > 0;
+
+    return (
+      <Host>
+        <div class={{ shell: true, 'is-focused': this.focused, 'is-disabled': this.disabled }} part="shell">
+        <span class="icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+        </span>
+
+        <input
+          ref={el => (this.inputEl = el)}
+          class="input"
+          part="input"
+          type="search"
+          value={this.value}
+          placeholder={this.placeholder}
+          aria-label={this.label}
+          aria-busy={this.loading ? 'true' : 'false'}
+          disabled={this.disabled}
+          autocomplete="off"
+          autocapitalize="off"
+          spellcheck={false}
+          enterkeyhint="search"
+          onInput={this.handleInput}
+          onKeyDown={this.handleKeyDown}
+          onFocus={() => (this.focused = true)}
+          onBlur={() => (this.focused = false)}
+        />
+
+        {this.loading && <span class="spinner" part="spinner" aria-hidden="true" />}
+
+        {hasValue && !this.loading && (
+          <button class="clear" part="clear" type="button" onClick={this.handleClear} aria-label="Clear search" disabled={this.disabled}>
+            <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>
+        )}
+
+          <span class="actions" part="actions">
+            <slot name="actions" />
+          </span>
+        </div>
+
+        {this.hint && (
+          <p class="hint" part="hint">
+            {this.hint}
+          </p>
+        )}
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,93 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RkSearchBar } from '../rk-search-bar';
+
+/*
+ * Real timers on purpose: Stencil's spec renderer drives its own scheduler, and
+ * `jest.useFakeTimers()` stalls `waitForChanges()`. The debounce windows below
+ * are therefore kept short enough to wait out.
+ */
+const DEBOUNCE = 40;
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('rk-search-bar', () => {
+  async function setup(html = `<rk-search-bar debounce="${DEBOUNCE}"></rk-search-bar>`) {
+    const page = await newSpecPage({ components: [RkSearchBar], html });
+    const input = page.root.shadowRoot.querySelector('input') as HTMLInputElement;
+    const onSearch = jest.fn();
+    page.root.addEventListener('rkSearch', onSearch);
+    return { page, input, onSearch };
+  }
+
+  function type(input: HTMLInputElement, value: string) {
+    input.value = value;
+    input.dispatchEvent(new Event('input'));
+  }
+
+  it('debounces input and emits the trimmed query once', async () => {
+    const { page, input, onSearch } = await setup();
+
+    type(input, 'ch');
+    type(input, 'chic');
+    type(input, '  chicken  ');
+    expect(onSearch).not.toHaveBeenCalled();
+
+    await wait(DEBOUNCE * 3);
+    await page.waitForChanges();
+
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch.mock.calls[0][0].detail).toBe('chicken');
+  });
+
+  it('emits immediately on Enter, skipping the pending debounce', async () => {
+    const { page, input, onSearch } = await setup(`<rk-search-bar debounce="400"></rk-search-bar>`);
+
+    type(input, 'pasta');
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    await page.waitForChanges();
+
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch.mock.calls[0][0].detail).toBe('pasta');
+
+    // The queued debounce must have been cancelled, not merely pre-empted.
+    await wait(500);
+    expect(onSearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears on Escape and reports the empty query', async () => {
+    const { page, input, onSearch } = await setup();
+    const onClear = jest.fn();
+    page.root.addEventListener('rkClear', onClear);
+
+    type(input, 'soup');
+    await wait(DEBOUNCE * 3);
+    await page.waitForChanges();
+    onSearch.mockClear();
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await page.waitForChanges();
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch.mock.calls[0][0].detail).toBe('');
+    expect((page.root as HTMLRkSearchBarElement).value).toBe('');
+  });
+
+  it('only shows the clear button when there is text', async () => {
+    const { page, input } = await setup();
+    expect(page.root.shadowRoot.querySelector('.clear')).toBeNull();
+
+    type(input, 'x');
+    await page.waitForChanges();
+    expect(page.root.shadowRoot.querySelector('.clear')).not.toBeNull();
+  });
+
+  it('shows a spinner instead of the clear button while loading', async () => {
+    const { page, input } = await setup(`<rk-search-bar debounce="${DEBOUNCE}" loading="true"></rk-search-bar>`);
+
+    type(input, 'x');
+    await page.waitForChanges();
+
+    expect(page.root.shadowRoot.querySelector('.spinner')).not.toBeNull();
+    expect(page.root.shadowRoot.querySelector('.clear')).toBeNull();
+  });
+});

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

@@ -0,0 +1,41 @@
+# rk-segmented-control
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A single-select segmented control, used for sorting and view switching.
+
+`options` is a complex property. Frameworks should assign it as a DOM
+property; for plain HTML it also accepts a JSON string attribute.
+
+## Properties
+
+| Property  | Attribute | Description                                                        | Type                          | Default          |
+| --------- | --------- | ------------------------------------------------------------------ | ----------------------------- | ---------------- |
+| `label`   | `label`   | Accessible label for the group.                                    | `string`                      | `'View options'` |
+| `options` | `options` | The available segments. Accepts an array or a JSON-encoded string. | `RkSegmentOption[] \| string` | `[]`             |
+| `stretch` | `stretch` | Stretches the control to fill its container.                       | `boolean`                     | `false`          |
+| `value`   | `value`   | The value of the selected segment.                                 | `string`                      | `undefined`      |
+
+
+## Events
+
+| Event             | Description                            | Type                  |
+| ----------------- | -------------------------------------- | --------------------- |
+| `rkSegmentChange` | Emitted with the newly selected value. | `CustomEvent<string>` |
+
+
+## Shadow Parts
+
+| Part      | Description |
+| --------- | ----------- |
+| `"group"` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,91 @@
+:host {
+  display: inline-block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  max-width: 100%;
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  background: var(--rk-surface-2, #fdf5ef);
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: var(--rk-radius-pill, 999px);
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.group::-webkit-scrollbar {
+  display: none;
+}
+
+.group.is-stretch {
+  display: flex;
+  width: 100%;
+}
+
+.segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 8px 16px;
+  border: 0;
+  border-radius: var(--rk-radius-pill, 999px);
+  background: transparent;
+  color: var(--rk-ink-2, #52443c);
+  font: inherit;
+  font-size: 0.88em;
+  font-weight: 550;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--rk-transition), color var(--rk-transition), box-shadow var(--rk-transition);
+}
+
+.group.is-stretch .segment {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.segment:hover:not(:disabled):not(.is-selected) {
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--rk-ink, #211a16);
+}
+
+.segment:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.segment.is-selected {
+  background: var(--rk-surface, #fff);
+  color: var(--rk-ink, #211a16);
+  box-shadow: var(--rk-shadow-sm);
+  font-weight: 650;
+}
+
+.segment:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.count {
+  font-size: 0.85em;
+  font-weight: 650;
+  color: var(--rk-muted, #857166);
+  font-variant-numeric: tabular-nums;
+}
+
+.segment.is-selected .count {
+  color: var(--rk-primary, #d94f1b);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .segment {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,115 @@
+import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';
+
+export interface RkSegmentOption {
+  label: string;
+  value: string;
+  /** Optional trailing count, e.g. number of items in that segment. */
+  count?: number;
+  disabled?: boolean;
+}
+
+/**
+ * A single-select segmented control, used for sorting and view switching.
+ *
+ * `options` is a complex property. Frameworks should assign it as a DOM
+ * property; for plain HTML it also accepts a JSON string attribute.
+ */
+@Component({
+  tag: 'rk-segmented-control',
+  styleUrl: 'rk-segmented-control.css',
+  shadow: true,
+})
+export class RkSegmentedControl {
+  /** The available segments. Accepts an array or a JSON-encoded string. */
+  @Prop() options: RkSegmentOption[] | string = [];
+
+  /** The value of the selected segment. */
+  @Prop({ mutable: true }) value?: string;
+
+  /** Accessible label for the group. */
+  @Prop() label = 'View options';
+
+  /** Stretches the control to fill its container. */
+  @Prop() stretch = false;
+
+  /** Emitted with the newly selected value. */
+  @Event({ eventName: 'rkSegmentChange' }) rkSegmentChange!: EventEmitter<string>;
+
+  private parsed: RkSegmentOption[] = [];
+
+  @Watch('options')
+  protected onOptionsChange() {
+    this.parseOptions();
+  }
+
+  componentWillLoad() {
+    this.parseOptions();
+  }
+
+  /**
+   * Attributes can only carry strings, so a JSON payload is accepted as a
+   * fallback for consumers that cannot set DOM properties.
+   */
+  private parseOptions() {
+    if (Array.isArray(this.options)) {
+      this.parsed = this.options;
+      return;
+    }
+    if (typeof this.options === 'string' && this.options.trim()) {
+      try {
+        const decoded = JSON.parse(this.options);
+        this.parsed = Array.isArray(decoded) ? decoded : [];
+      } catch {
+        console.warn('[rk-segmented-control] `options` is not valid JSON:', this.options);
+        this.parsed = [];
+      }
+      return;
+    }
+    this.parsed = [];
+  }
+
+  private select(option: RkSegmentOption) {
+    if (option.disabled || option.value === this.value) return;
+    this.value = option.value;
+    this.rkSegmentChange.emit(option.value);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent, index: number) => {
+    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+    if (step === 0) return;
+    event.preventDefault();
+
+    const items = this.parsed.filter(option => !option.disabled);
+    if (items.length === 0) return;
+    const currentIndex = items.indexOf(this.parsed[index]);
+    const next = items[(currentIndex + step + items.length) % items.length];
+    this.select(next);
+  };
+
+  render() {
+    return (
+      <div class={{ group: true, 'is-stretch': this.stretch }} part="group" role="tablist" aria-label={this.label}>
+        {this.parsed.map((option, index) => {
+          const selected = option.value === this.value;
+          return (
+            <button
+              key={option.value}
+              class={{ segment: true, 'is-selected': selected }}
+              part={selected ? 'segment segment-selected' : 'segment'}
+              type="button"
+              role="tab"
+              aria-selected={String(selected)}
+              disabled={option.disabled}
+              tabindex={selected ? 0 : -1}
+              onClick={() => this.select(option)}
+              onKeyDown={event => this.handleKeyDown(event, index)}
+            >
+              {option.label}
+              {typeof option.count === 'number' && <span class="count">{option.count}</span>}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,47 @@
+# rk-tag-input
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A tag / token editor used for recipe tags and free-form ingredient lists.
+
+`values` is an array property — the SvelteKit app assigns it as a DOM
+property. A JSON-encoded or comma-separated string attribute also works.
+
+## Properties
+
+| Property      | Attribute     | Description                                                  | Type                 | Default                       |
+| ------------- | ------------- | ------------------------------------------------------------ | -------------------- | ----------------------------- |
+| `disabled`    | `disabled`    | Prevent editing.                                             | `boolean`            | `false`                       |
+| `error`       | `error`       | Validation message rendered under the field.                 | `string`             | `undefined`                   |
+| `label`       | `label`       | Visible field label.                                         | `string`             | `undefined`                   |
+| `maxTags`     | `max-tags`    | Maximum number of tags. `0` means unlimited.                 | `number`             | `0`                           |
+| `placeholder` | `placeholder` | Placeholder for the entry field.                             | `string`             | `'Add a tag and press Enter'` |
+| `values`      | `values`      | Current tags. Array, JSON string, or comma-separated string. | `string \| string[]` | `[]`                          |
+
+
+## Events
+
+| Event          | Description                                               | Type                    |
+| -------------- | --------------------------------------------------------- | ----------------------- |
+| `rkTagsChange` | Emitted with the full, updated list whenever tags change. | `CustomEvent<string[]>` |
+
+
+## Shadow Parts
+
+| Part      | Description |
+| --------- | ----------- |
+| `"error"` |             |
+| `"input"` |             |
+| `"label"` |             |
+| `"shell"` |             |
+| `"tag"`   |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*