@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,29 +1,91 @@
 {
   "name": "@ssejal8/recipe-ui-kit",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "version": "0.1.0",
-  "description": "Recipe Finder & Meal Planner — SvelteKit application plus a published StencilJS component library.",
+  "version": "0.1.1",
+  "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",
-  "workspaces": [
-    "packages/*",
-    "apps/*"
+  "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/*"
   ],
-  "engines": {
-    "node": ">=20"
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "npm run build --workspace recipe-kit-stencil && npm run dev --workspace recipe-web",
-    "dev:app": "npm run dev --workspace recipe-web",
-    "dev:kit": "npm run start --workspace recipe-kit-stencil",
-    "build": "npm run build --workspace recipe-kit-stencil && npm run build --workspace recipe-web",
-    "build:kit": "npm run build --workspace recipe-kit-stencil",
-    "build:app": "npm run build --workspace recipe-web",
-    "preview": "npm run preview --workspace recipe-web",
-    "check": "npm run check --workspace recipe-web",
-    "test": "npm run test --workspace recipe-kit-stencil",
-    "publish:kit": "npm publish --workspace recipe-kit-stencil"
-  }
+    "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-ui-kit"
+  },
+  "bugs": {
+    "url": "https://github.com/sejal-sharma/recipe-ui/issues"
+  },
+  "homepage": "https://github.com/sejal-sharma/recipe-ui/tree/main/packages/recipe-ui-kit#readme"
 }

package/.claude/settings.local.json

@@ -1,10 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm -v)",
-      "Bash(git --version)",
-      "Bash(npm whoami *)",
-      "Bash(npx stencil *)"
-    ]
-  }
-}

package/.npmr

@@ -1 +0,0 @@
-registry=https://registry.npmjs.org/

package/apps/recipe-web/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "recipe-web",
-  "private": true,
-  "version": "0.1.0",
-  "description": "Recipe Finder & Meal Planner — SvelteKit 5 application.",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "build:node": "ADAPTER=node vite build",
-    "preview": "vite preview",
-    "preview:node": "ADAPTER=node vite build && node build/index.js",
-    "start": "node build/index.js",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "prepare": "svelte-kit sync"
-  },
-  "dependencies": {
-    "recipe-kit-stencil": "^0.1.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/adapter-node": "^5.5.7",
-    "@sveltejs/kit": "^2.70.3",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "svelte": "^5.56.10",
-    "svelte-check": "^4.7.6",
-    "typescript": "^5.9.3",
-    "vite": "^8.2.2"
-  }
-}

package/apps/recipe-web/src/app.css

@@ -1,418 +0,0 @@
-/*
- * Application shell styles.
- *
- * The `--rk-*` tokens come from recipe-kit-stencil's stylesheet and are the
- * single source of truth for colour, radius and elevation. The app maps them to
- * shorter `--app-*` aliases and adds only what the shell itself needs, so the
- * Svelte chrome and the web components can never drift apart visually.
- */
-
-:root {
-  --app-max: 1180px;
-  --app-gutter: clamp(16px, 4vw, 40px);
-  --app-header-h: 66px;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  -webkit-text-size-adjust: 100%;
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  background: var(--rk-bg);
-  color: var(--rk-ink);
-  font-family: var(--rk-font);
-  font-size: 15px;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  font-family: var(--rk-font-display);
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  margin: 0;
-  font-weight: 650;
-}
-
-p {
-  margin: 0;
-}
-
-a {
-  color: var(--rk-primary);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
-}
-
-img {
-  max-width: 100%;
-}
-
-:focus-visible {
-  outline: none;
-  box-shadow: var(--rk-focus-ring);
-  border-radius: var(--rk-radius-sm);
-}
-
-/* ------------------------------------------------------------------ layout */
-
-.shell {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.page {
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: var(--app-max);
-  margin: 0 auto;
-  padding: clamp(24px, 4vw, 44px) var(--app-gutter) 88px;
-}
-
-.page-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px 24px;
-  margin-bottom: 26px;
-}
-
-.page-title {
-  font-size: clamp(1.7rem, 4vw, 2.35rem);
-}
-
-.page-lede {
-  margin-top: 7px;
-  color: var(--rk-muted);
-  max-width: 62ch;
-}
-
-.eyebrow {
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--rk-primary);
-  margin-bottom: 8px;
-}
-
-.section {
-  margin-top: 44px;
-}
-
-.section-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--rk-border);
-}
-
-.section-title {
-  font-size: 1.15rem;
-}
-
-.muted {
-  color: var(--rk-muted);
-}
-
-.small {
-  font-size: 0.87rem;
-}
-
-.stack {
-  display: grid;
-  gap: 14px;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px;
-}
-
-.card-surface {
-  background: var(--rk-surface);
-  border: 1px solid var(--rk-border);
-  border-radius: var(--rk-radius-lg);
-  padding: clamp(18px, 3vw, 26px);
-  box-shadow: var(--rk-shadow-sm);
-}
-
-.recipe-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
-  gap: clamp(14px, 2vw, 22px);
-}
-
-/* ------------------------------------------------------------------ buttons */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 18px;
-  border-radius: var(--rk-radius-pill);
-  border: 1px solid var(--rk-border);
-  background: var(--rk-surface);
-  color: var(--rk-ink);
-  font: inherit;
-  font-size: 0.9rem;
-  font-weight: 600;
-  line-height: 1.2;
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-  transition:
-    background var(--rk-transition),
-    border-color var(--rk-transition),
-    color var(--rk-transition),
-    transform var(--rk-transition);
-}
-
-.btn:hover:not(:disabled) {
-  border-color: var(--rk-border-strong);
-  background: var(--rk-surface-2);
-}
-
-.btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--rk-primary);
-  border-color: var(--rk-primary);
-  color: #fff;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--rk-primary-strong);
-  border-color: var(--rk-primary-strong);
-  color: #fff;
-}
-
-.btn-accent {
-  background: var(--rk-accent);
-  border-color: var(--rk-accent);
-  color: #fff;
-}
-
-.btn-accent:hover:not(:disabled) {
-  filter: brightness(1.1);
-  color: #fff;
-}
-
-.btn-danger {
-  background: transparent;
-  border-color: var(--rk-danger);
-  color: var(--rk-danger);
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: var(--rk-danger);
-  border-color: var(--rk-danger);
-  color: #fff;
-}
-
-.btn-ghost {
-  background: transparent;
-  border-color: transparent;
-  color: var(--rk-ink-2);
-}
-
-.btn-ghost:hover:not(:disabled) {
-  background: var(--rk-surface-2);
-  border-color: transparent;
-}
-
-.btn-sm {
-  padding: 7px 13px;
-  font-size: 0.83rem;
-}
-
-.btn-block {
-  width: 100%;
-}
-
-.btn svg {
-  width: 16px;
-  height: 16px;
-  flex: 0 0 auto;
-}
-
-/* ------------------------------------------------------------------- forms */
-
-.field {
-  display: grid;
-  gap: 7px;
-}
-
-.field-label {
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: var(--rk-ink-2);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.field-req {
-  color: var(--rk-primary);
-}
-
-.input,
-.select,
-.textarea {
-  width: 100%;
-  padding: 11px 13px;
-  border: 1px solid var(--rk-border);
-  border-radius: var(--rk-radius);
-  background: var(--rk-surface);
-  color: var(--rk-ink);
-  font: inherit;
-  transition:
-    border-color var(--rk-transition),
-    box-shadow var(--rk-transition);
-}
-
-.textarea {
-  resize: vertical;
-  min-height: 82px;
-  line-height: 1.55;
-}
-
-.select {
-  appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position:
-    calc(100% - 19px) calc(50% + 2px),
-    calc(100% - 14px) calc(50% + 2px);
-  background-size:
-    5px 5px,
-    5px 5px;
-  background-repeat: no-repeat;
-  padding-right: 36px;
-  cursor: pointer;
-}
-
-.input:focus,
-.select:focus,
-.textarea:focus {
-  outline: none;
-  border-color: var(--rk-primary);
-  box-shadow: var(--rk-focus-ring);
-}
-
-.input[aria-invalid='true'],
-.select[aria-invalid='true'],
-.textarea[aria-invalid='true'] {
-  border-color: var(--rk-danger);
-}
-
-.field-error {
-  font-size: 0.83rem;
-  font-weight: 550;
-  color: var(--rk-danger);
-}
-
-.field-hint {
-  font-size: 0.83rem;
-  color: var(--rk-muted);
-}
-
-.field-grid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-/* ------------------------------------------------------------------ effects */
-
-.skeleton {
-  background: linear-gradient(90deg, var(--rk-surface-2) 25%, var(--rk-border) 50%, var(--rk-surface-2) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.4s ease-in-out infinite;
-  border-radius: var(--rk-radius);
-}
-
-@keyframes shimmer {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .skeleton {
-    animation: none;
-  }
-  .btn {
-    transition: none;
-  }
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Skip link, revealed on focus. */
-.skip-link {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 1200;
-  padding: 10px 16px;
-  background: var(--rk-ink);
-  color: var(--rk-bg);
-  border-radius: var(--rk-radius-pill);
-  font-weight: 600;
-  text-decoration: none;
-  transform: translateY(-200%);
-  transition: transform var(--rk-transition);
-}
-
-.skip-link:focus {
-  transform: translateY(0);
-}

package/apps/recipe-web/src/app.d.ts

@@ -1,32 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app
-declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface PageState {}
-    // interface Platform {}
-  }
-
-  /**
-   * The `rk-*` tags are registered at runtime by `recipe-kit-stencil`. Declaring
-   * them here stops `svelte-check` from treating them as typos while still
-   * allowing arbitrary props, which the `WebComponent` bridge assigns directly.
-   */
-  namespace svelteHTML {
-    interface IntrinsicElements {
-      'rk-search-bar': Record<string, unknown>;
-      'rk-chip': Record<string, unknown>;
-      'rk-segmented-control': Record<string, unknown>;
-      'rk-recipe-card': Record<string, unknown>;
-      'rk-rating': Record<string, unknown>;
-      'rk-badge': Record<string, unknown>;
-      'rk-tag-input': Record<string, unknown>;
-      'rk-meal-slot': Record<string, unknown>;
-      'rk-modal': Record<string, unknown>;
-      'rk-empty-state': Record<string, unknown>;
-    }
-  }
-}
-
-export {};

package/apps/recipe-web/src/app.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="light">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#d94f1b" />
-    <meta name="description" content="Discover recipes, build your own collection, and plan your week — a Recipe Finder & Meal Planner." />
-    <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
-    <link rel="preconnect" href="https://www.themealdb.com" crossorigin />
-    <script>
-      // Applied before first paint so a dark-mode user never sees a light flash.
-      try {
-        const stored = localStorage.getItem('recipe-ui:theme:v1');
-        const theme = stored ? JSON.parse(stored) : null;
-        const resolved = theme ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-        document.documentElement.dataset.theme = resolved;
-        document.documentElement.dataset.rkTheme = resolved;
-      } catch {}
-    </script>
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-  </body>
-</html>