npm - @ssejal8/recipe-ui-kit - Versions diffs - 0.1.0 - Mend

@ssejal8/recipe-ui-kit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/packages/recipe-kit-stencil/src/global/rk-global.css ADDED Viewed

@@ -0,0 +1,104 @@
+/**
+ * recipe-kit-stencil — design tokens.
+ *
+ * Every token is a CSS custom property, so it inherits through the shadow
+ * boundary of each component. Consumers can therefore re-theme the whole
+ * library by overriding these on :root (or on any ancestor element) without
+ * touching component internals.
+ */
+:root,
+:host {
+  /* Brand */
+  --rk-primary: #d94f1b;
+  --rk-primary-strong: #b23c11;
+  --rk-primary-soft: #fdeee6;
+  --rk-accent: #0f766e;
+  --rk-accent-soft: #e2f3f1;
+  /* Neutrals / surfaces */
+  --rk-bg: #fffaf6;
+  --rk-surface: #ffffff;
+  --rk-surface-2: #fdf5ef;
+  --rk-ink: #211a16;
+  --rk-ink-2: #52443c;
+  --rk-muted: #857166;
+  --rk-border: #ecdfd4;
+  --rk-border-strong: #d9c6b8;
+  /* Feedback */
+  --rk-danger: #c2410c;
+  --rk-danger-soft: #fdeae1;
+  --rk-success: #15803d;
+  --rk-success-soft: #e6f5eb;
+  --rk-warning: #a16207;
+  --rk-warning-soft: #fdf3d8;
+  /* Shape */
+  --rk-radius-sm: 8px;
+  --rk-radius: 14px;
+  --rk-radius-lg: 20px;
+  --rk-radius-pill: 999px;
+  /* Elevation */
+  --rk-shadow-sm: 0 1px 2px rgba(33, 26, 22, 0.06), 0 1px 3px rgba(33, 26, 22, 0.04);
+  --rk-shadow: 0 4px 12px rgba(33, 26, 22, 0.08), 0 1px 3px rgba(33, 26, 22, 0.05);
+  --rk-shadow-lg: 0 18px 42px rgba(33, 26, 22, 0.16);
+  /* Type */
+  --rk-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --rk-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --rk-font-size: 15px;
+  /* Motion */
+  --rk-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
+  /* Focus */
+  --rk-focus-ring: 0 0 0 3px rgba(217, 79, 27, 0.32);
+  /* Layers */
+  --rk-z-modal: 1000;
+}
+:root[data-rk-theme='dark'],
+:root[data-theme='dark'] {
+  --rk-primary: #ff7a45;
+  --rk-primary-strong: #ff9469;
+  --rk-primary-soft: #3a2118;
+  --rk-accent: #5eead4;
+  --rk-accent-soft: #10312e;
+  --rk-bg: #16110e;
+  --rk-surface: #201814;
+  --rk-surface-2: #2a201a;
+  --rk-ink: #f7ece5;
+  --rk-ink-2: #d9c8bd;
+  --rk-muted: #a89387;
+  --rk-border: #38291f;
+  --rk-border-strong: #4b382c;
+  --rk-danger: #ff8f66;
+  --rk-danger-soft: #3a1d14;
+  --rk-success: #6ee7a0;
+  --rk-success-soft: #12301f;
+  --rk-warning: #fbbf5b;
+  --rk-warning-soft: #33260d;
+  --rk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --rk-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+  --rk-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
+  --rk-focus-ring: 0 0 0 3px rgba(255, 122, 69, 0.4);
+}
+/* Shared, opt-in visually-hidden helper for light DOM content passed via slots. */
+.rk-sr-only {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/packages/recipe-kit-stencil/src/index.html ADDED Viewed

@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>recipe-kit-stencil — component gallery</title>
+    <script type="module" src="/build/recipe-kit.esm.js"></script>
+    <script nomodule src="/build/recipe-kit.js"></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 40px 24px 96px;
+        background: var(--rk-bg);
+        color: var(--rk-ink);
+        font-family: var(--rk-font);
+        font-size: 15px;
+      }
+      main {
+        max-width: 960px;
+        margin: 0 auto;
+        display: grid;
+        gap: 44px;
+      }
+      h1 {
+        font-family: var(--rk-font-display);
+        font-size: 2.1rem;
+        margin: 0 0 6px;
+        letter-spacing: -0.02em;
+      }
+      .lede {
+        color: var(--rk-muted);
+        margin: 0;
+        max-width: 60ch;
+        line-height: 1.6;
+      }
+      section h2 {
+        font-size: 0.78rem;
+        text-transform: uppercase;
+        letter-spacing: 0.09em;
+        color: var(--rk-muted);
+        margin: 0 0 14px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid var(--rk-border);
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+        gap: 18px;
+      }
+      .planner {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 12px;
+      }
+      button.demo {
+        font: inherit;
+        font-weight: 600;
+        padding: 9px 16px;
+        border-radius: 999px;
+        border: 1px solid var(--rk-border);
+        background: var(--rk-surface);
+        color: var(--rk-ink);
+        cursor: pointer;
+      }
+      #log {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px;
+        background: var(--rk-ink);
+        color: #d8f5c8;
+        padding: 14px 16px;
+        border-radius: 12px;
+        max-height: 180px;
+        overflow: auto;
+        white-space: pre-wrap;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>recipe-kit-stencil</h1>
+        <p class="lede">
+          A framework-agnostic web component library built with StencilJS. Every event below is logged at the bottom of the page — the same events the
+          SvelteKit application listens for.
+        </p>
+      </header>
+      <section>
+        <h2>rk-search-bar</h2>
+        <rk-search-bar hint="Debounced at 350&thinsp;ms. Press Escape to clear.">
+          <rk-badge slot="actions" tone="accent">beta</rk-badge>
+        </rk-search-bar>
+      </section>
+      <section>
+        <h2>rk-chip &amp; rk-segmented-control</h2>
+        <div class="row">
+          <rk-chip label="Seafood" value="Seafood" count="18"><span>🐟</span></rk-chip>
+          <rk-chip label="Dessert" value="Dessert" selected tone="primary"></rk-chip>
+          <rk-chip label="Vegan" value="Vegan" tone="accent" selected></rk-chip>
+          <rk-chip label="Italian" value="Italian" dismissible></rk-chip>
+        </div>
+        <br />
+        <rk-segmented-control id="segments" label="Sort recipes"></rk-segmented-control>
+      </section>
+      <section>
+        <h2>rk-badge &amp; rk-rating</h2>
+        <div class="row">
+          <rk-badge>neutral</rk-badge>
+          <rk-badge tone="primary" variant="solid">primary solid</rk-badge>
+          <rk-badge tone="accent" variant="outline">accent outline</rk-badge>
+          <rk-badge tone="success" small>30 min</rk-badge>
+          <rk-rating value="4" show-value count="128"></rk-rating>
+          <rk-rating value="3.5" readonly show-value></rk-rating>
+        </div>
+      </section>
+      <section>
+        <h2>rk-recipe-card</h2>
+        <div class="grid">
+          <rk-recipe-card
+            recipe-id="52772"
+            name="Teriyaki Chicken Casserole"
+            image="https://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg"
+            category="Chicken"
+            area="Japanese"
+            minutes="45"
+            servings="4"
+            href="#52772"
+          >
+            <rk-badge tone="accent" small>weeknight</rk-badge>
+            <button class="demo" slot="actions">Add to plan</button>
+          </rk-recipe-card>
+          <rk-recipe-card
+            recipe-id="local-1"
+            name="Grandma's Sunday Ragù"
+            category="Pasta"
+            area="Italian"
+            minutes="180"
+            origin="custom"
+            favorite
+          >
+            <rk-badge tone="warning" small>slow cook</rk-badge>
+          </rk-recipe-card>
+          <rk-recipe-card
+            recipe-id="52959"
+            name="Baked Salmon with Fennel &amp; Tomatoes"
+            image="https://www.themealdb.com/images/media/meals/1548772327.jpg"
+            category="Seafood"
+            area="British"
+            minutes="30"
+            compact
+          ></rk-recipe-card>
+        </div>
+      </section>
+      <section>
+        <h2>rk-meal-slot</h2>
+        <div class="planner">
+          <rk-meal-slot day="monday" meal-type="breakfast" meal-label="Breakfast"></rk-meal-slot>
+          <rk-meal-slot
+            day="monday"
+            meal-type="dinner"
+            meal-label="Dinner"
+            recipe-id="52772"
+            recipe-name="Teriyaki Chicken Casserole"
+            recipe-image="https://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg"
+          ></rk-meal-slot>
+          <rk-meal-slot day="tuesday" meal-type="lunch" meal-label="Lunch"></rk-meal-slot>
+        </div>
+      </section>
+      <section>
+        <h2>rk-tag-input</h2>
+        <rk-tag-input id="tags" label="Recipe tags" max-tags="6"></rk-tag-input>
+      </section>
+      <section>
+        <h2>rk-modal</h2>
+        <button class="demo" id="open-modal">Open dialog</button>
+        <rk-modal id="modal" heading="Delete this recipe?" subheading="This cannot be undone.">
+          <p style="margin: 0">Removing “Grandma's Sunday Ragù” also removes it from every day of your weekly plan.</p>
+          <button class="demo" slot="footer" id="cancel-modal">Cancel</button>
+          <button class="demo" slot="footer" style="background: var(--rk-danger); border-color: var(--rk-danger); color: #fff">Delete</button>
+        </rk-modal>
+      </section>
+      <section>
+        <h2>rk-empty-state</h2>
+        <rk-empty-state icon="🔍" heading="No recipes matched “quinoa risotto”" message="Try a broader search term, or clear the active filters.">
+          <button class="demo">Clear filters</button>
+        </rk-empty-state>
+      </section>
+      <section>
+        <h2>Event log</h2>
+        <pre id="log">Interact with the components above…</pre>
+      </section>
+    </main>
+    <script type="module">
+      const log = document.getElementById('log');
+      let lines = [];
+      const record = (event) => {
+        lines.unshift(`${event.type} → ${JSON.stringify(event.detail)}`);
+        log.textContent = lines.slice(0, 40).join('\n');
+      };
+      const events = [
+        'rkSearch', 'rkClear', 'rkChipToggle', 'rkChipDismiss', 'rkSegmentChange', 'rkRatingChange',
+        'rkCardSelect', 'rkFavoriteToggle', 'rkMealAdd', 'rkMealSwap', 'rkMealRemove', 'rkMealOpen',
+        'rkMealDrop', 'rkTagsChange', 'rkModalClose',
+      ];
+      events.forEach((name) => document.addEventListener(name, record));
+      // Array-valued properties are assigned as DOM properties, never attributes.
+      customElements.whenDefined('rk-segmented-control').then(() => {
+        const segments = document.getElementById('segments');
+        segments.options = [
+          { label: 'Relevance', value: 'relevance' },
+          { label: 'A–Z', value: 'az' },
+          { label: 'Quickest', value: 'time', count: 12 },
+          { label: 'Unavailable', value: 'x', disabled: true },
+        ];
+        segments.value = 'relevance';
+        segments.addEventListener('rkSegmentChange', (event) => (segments.value = event.detail));
+      });
+      customElements.whenDefined('rk-tag-input').then(() => {
+        const tags = document.getElementById('tags');
+        tags.values = ['comfort food', 'one pot'];
+      });
+      // Favorite state is owned by the host app, exactly as in SvelteKit.
+      document.addEventListener('rkFavoriteToggle', (event) => {
+        event.target.favorite = event.detail.favorite;
+      });
+      document.addEventListener('rkChipToggle', (event) => {
+        event.target.selected = event.detail.selected;
+      });
+      const modal = document.getElementById('modal');
+      document.getElementById('open-modal').addEventListener('click', () => (modal.open = true));
+      document.getElementById('cancel-modal').addEventListener('click', () => (modal.open = false));
+      modal.addEventListener('rkModalClose', () => (modal.open = false));
+    </script>
+  </body>
+</html>

package/packages/recipe-kit-stencil/src/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+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';

package/packages/recipe-kit-stencil/stencil.config.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { Config } from '@stencil/core';
+export const config: Config = {
+  namespace: 'recipe-kit',
+  globalStyle: 'src/global/rk-global.css',
+  sourceMap: true,
+  buildEs5: false,
+  extras: {
+    enableImportInjection: true,
+  },
+  outputTargets: [
+    // Lazy-loaded distribution + `loader/` entry point. This is what the
+    // SvelteKit app consumes from npm via `recipe-kit-stencil/loader`.
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+      isPrimaryPackageOutputTarget: true,
+      copy: [{ src: 'global/rk-global.css', dest: 'rk-global.css', warn: true }],
+    },
+    // Standalone custom elements, for consumers that want to import a single
+    // component and define it themselves (tree-shakeable).
+    {
+      type: 'dist-custom-elements',
+      customElementsExportBehavior: 'auto-define-custom-elements',
+      externalRuntime: false,
+      generateTypeDeclarations: true,
+    },
+    {
+      type: 'docs-readme',
+      footer: '*Built with [StencilJS](https://stenciljs.com/)*',
+    },
+    {
+      type: 'www',
+      serviceWorker: null,
+    },
+  ],
+  testing: {
+    browserHeadless: 'shell',
+  },
+  validatePrimaryPackageOutputTarget: true,
+};

package/packages/recipe-kit-stencil/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "lib": ["dom", "es2020"],
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "es2020",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "sourceMap": true,
+    "strictNullChecks": false,
+    "strictPropertyInitialization": false,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "loader", "www"]
+}