@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/dist/types/components/rk-modal/rk-modal.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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.
+ */
+export declare class RkModal {
+    host: HTMLElement;
+    /** Controls visibility. */
+    open: boolean;
+    /** Heading text for the default header. */
+    heading: string;
+    /** Optional supporting line under the heading. */
+    subheading?: string;
+    /** Dialog width preset. */
+    size: 'sm' | 'md' | 'lg';
+    /** Set to false to require an explicit action to dismiss. */
+    dismissible: boolean;
+    /** Emitted when the user requests dismissal (X, backdrop or Escape). */
+    rkModalClose: EventEmitter<void>;
+    private hasFooter;
+    private previouslyFocused?;
+    private panelEl?;
+    /** Collapses the footer region when no action row was projected into it. */
+    private syncFooterSlot;
+    protected onOpenChange(isOpen: boolean, wasOpen: boolean): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private lockScroll;
+    private focusableElements;
+    private focusFirst;
+    private handleGlobalKeyDown;
+    private handleBackdrop;
+    render(): any;
+}

package/dist/types/components/rk-rating/rk-rating.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A star rating that works as a read-only display or an interactive input.
+ */
+export declare class RkRating {
+    /** Current rating. Supports halves when `readonly`. */
+    value: number;
+    /** Number of stars. */
+    max: number;
+    /** When true the stars are display-only and not focusable. */
+    readonly: boolean;
+    /** Star size in pixels. */
+    size: number;
+    /** Accessible label for the group. */
+    label: string;
+    /** Renders the numeric value next to the stars. */
+    showValue: boolean;
+    /** Optional count of ratings, rendered as "(24)". */
+    count?: number;
+    /** Emitted when the user picks a new rating. */
+    rkRatingChange: EventEmitter<number>;
+    private hovered;
+    private select;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/rk-recipe-card/rk-recipe-card.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+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").
+ */
+export declare class RkRecipeCard {
+    host: HTMLElement;
+    /** Stable identifier echoed back in every event payload. */
+    recipeId: string;
+    /** Recipe title. */
+    name: string;
+    /** Thumbnail URL. */
+    image?: string;
+    /** Category, e.g. "Dessert". */
+    category?: string;
+    /** Cuisine / region, e.g. "Italian". */
+    area?: string;
+    /** Total time in minutes. Hidden when omitted. */
+    minutes?: number;
+    /** Number of servings. Hidden when omitted. */
+    servings?: number;
+    /** Whether this recipe is currently favorited. */
+    favorite: boolean;
+    /** `custom` recipes are user-authored and get an "Owned" badge. */
+    origin: 'api' | 'custom';
+    /** Real href used for accessibility, SEO and middle-click / open-in-new-tab. */
+    href?: string;
+    /** Renders a compact horizontal layout, for dense lists and the planner. */
+    compact: boolean;
+    /** Hides the favorite button entirely (e.g. inside the planner). */
+    hideFavorite: boolean;
+    /** Emitted on primary activation. The host app performs the navigation. */
+    rkCardSelect: EventEmitter<RkRecipeCardSelectDetail>;
+    /** Emitted when the favorite button is pressed. */
+    rkFavoriteToggle: EventEmitter<RkFavoriteToggleDetail>;
+    private imageFailed;
+    private hasExtra;
+    private hasActions;
+    componentWillLoad(): void;
+    /**
+     * 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;
+    private get detail();
+    private handleSelect;
+    private handleFavorite;
+    render(): any;
+}

package/dist/types/components/rk-search-bar/rk-search-bar.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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.
+ */
+export declare class RkSearchBar {
+    /** Current text in the field. Two-way: updated as the user types. */
+    value: string;
+    /** Placeholder shown when the field is empty. */
+    placeholder: string;
+    /** Accessible label for the input. */
+    label: string;
+    /** Milliseconds to wait after the last keystroke before emitting `rkSearch`. */
+    debounce: number;
+    /** Disables the whole control. */
+    disabled: boolean;
+    /** Shows a busy indicator (e.g. while the app is fetching results). */
+    loading: boolean;
+    /** Optional helper text rendered under the field. */
+    hint?: string;
+    /** Emitted with the (trimmed) query after the debounce window, or on submit. */
+    rkSearch: EventEmitter<string>;
+    /** Emitted when the user clears the field with the clear button or Escape. */
+    rkClear: EventEmitter<void>;
+    private focused;
+    private inputEl?;
+    private timer?;
+    protected onValueChange(next: string, prev: string): void;
+    disconnectedCallback(): void;
+    /** Programmatically focus the input. */
+    setFocus(): Promise<void>;
+    private emit;
+    private handleInput;
+    private handleKeyDown;
+    private handleClear;
+    render(): any;
+}

package/dist/types/components/rk-segmented-control/rk-segmented-control.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+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.
+ */
+export declare class RkSegmentedControl {
+    /** The available segments. Accepts an array or a JSON-encoded string. */
+    options: RkSegmentOption[] | string;
+    /** The value of the selected segment. */
+    value?: string;
+    /** Accessible label for the group. */
+    label: string;
+    /** Stretches the control to fill its container. */
+    stretch: boolean;
+    /** Emitted with the newly selected value. */
+    rkSegmentChange: EventEmitter<string>;
+    private parsed;
+    protected onOptionsChange(): void;
+    componentWillLoad(): void;
+    /**
+     * Attributes can only carry strings, so a JSON payload is accepted as a
+     * fallback for consumers that cannot set DOM properties.
+     */
+    private parseOptions;
+    private select;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/rk-tag-input/rk-tag-input.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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.
+ */
+export declare class RkTagInput {
+    /** Current tags. Array, JSON string, or comma-separated string. */
+    values: string[] | string;
+    /** Placeholder for the entry field. */
+    placeholder: string;
+    /** Visible field label. */
+    label?: string;
+    /** Maximum number of tags. `0` means unlimited. */
+    maxTags: number;
+    /** Prevent editing. */
+    disabled: boolean;
+    /** Validation message rendered under the field. */
+    error?: string;
+    /** Emitted with the full, updated list whenever tags change. */
+    rkTagsChange: EventEmitter<string[]>;
+    private draft;
+    private tags;
+    private inputEl?;
+    protected onValuesChange(): void;
+    componentWillLoad(): void;
+    private syncTags;
+    private get atCapacity();
+    private commit;
+    private addDraft;
+    private removeAt;
+    private handleKeyDown;
+    render(): any;
+}

package/{packages/recipe-kit-stencil/src → dist/types}/components.d.ts

@@ -4,7 +4,7 @@
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { RkMealDropDetail, RkMealRecipeDetail, RkMealSlotDetail } from "./components/rk-meal-slot/rk-meal-slot";
 import { RkFavoriteToggleDetail, RkRecipeCardSelectDetail } from "./components/rk-recipe-card/rk-recipe-card";
 import { RkSegmentOption } from "./components/rk-segmented-control/rk-segmented-control";

package/{packages/recipe-kit-stencil/src/index.ts → dist/types/index.d.ts}

@@ -1,6 +1,4 @@
 export { Components, JSX } from './components';
-
-// Event payload contracts, re-exported so consumers can type their handlers.
 export type { RkRecipeCardSelectDetail, RkFavoriteToggleDetail } from './components/rk-recipe-card/rk-recipe-card';
 export type { RkSegmentOption } from './components/rk-segmented-control/rk-segmented-control';
 export type { RkMealSlotDetail, RkMealRecipeDetail, RkMealDropDetail } from './components/rk-meal-slot/rk-meal-slot';