@sekyro/elements 0.0.0-stage → 0.1.0-rc.1

package/package.json

@@ -1,6 +1,119 @@
 {
   "name": "@sekyro/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-rc.1",
+  "description": "Sekyro AI custom elements: <sekyro-verification> for Vue, Angular, Svelte and plain HTML, the @sekyro/react flow with React bundled inside",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IBTIKAR-Technologies/ibtikar-identity.git",
+    "directory": "packages/sekyro-elements"
+  },
+  "keywords": [
+    "sekyro",
+    "kyc",
+    "identity-verification",
+    "liveness",
+    "custom-elements",
+    "web-components",
+    "vue",
+    "angular",
+    "svelte"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/define.js",
+    "./dist/define.cjs",
+    "./dist/cdn/*",
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "customElements": "./custom-elements.json",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/define.d.ts",
+        "default": "./dist/define.js"
+      },
+      "require": {
+        "types": "./dist/define.d.cts",
+        "default": "./dist/define.cjs"
+      }
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts",
+      "default": "./types/empty.js"
+    },
+    "./svelte": {
+      "types": "./types/svelte.d.ts",
+      "default": "./types/empty.js"
+    },
+    "./jsx": {
+      "types": "./types/jsx.d.ts",
+      "default": "./types/empty.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./custom-elements.json": "./custom-elements.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "custom-elements.json",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "sbom.cdx.json"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/finish-build.mjs",
+    "test": "node --experimental-strip-types scripts/gen-manifest.mjs --check && vitest run",
+    "test:dist": "SEKYRO_REQUIRE_DIST=1 vitest run test/built && tsc -p tsconfig.types.json",
+    "e2e": "playwright test",
+    "size": "node scripts/check-size.mjs",
+    "typecheck": "tsc --noEmit",
+    "manifest": "node --experimental-strip-types scripts/gen-manifest.mjs",
+    "api:report": "api-extractor run --local",
+    "api:check": "api-extractor run"
+  },
+  "peerDependencies": {
+    "@sekyro/web": "^0.1.0-rc.23 || ^0.2.0-rc.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.59.4",
+    "@playwright/test": "1.61.1",
+    "@sekyro/react": "file:../sekyro-react",
+    "@sekyro/web": "file:../sekyro-web",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "bootstrap": "5.3.8",
+    "esbuild": "^0.25",
+    "jsdom": "^25",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "svelte": "^5.39.6",
+    "tailwindcss": "4.1.13",
+    "tsup": "^8",
+    "typescript": "^5.7",
+    "vitest": "^3",
+    "vue": "3.5.22"
+  }
+}

package/types/empty.js

@@ -0,0 +1,2 @@
+// The typing-only subpaths (vue, svelte, jsx) resolve to this empty module at run time, so a plain import works.
+export {};

package/types/events.d.ts

@@ -0,0 +1,9 @@
+// Shared by the framework typings: the element's events as framework listener props (`sekyro-step` → `onSekyroStep`).
+import type { SekyroVerificationEventMap } from "@sekyro/elements";
+
+type Camel<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Capitalize<Head>}${Camel<Tail>}` : Capitalize<S>;
+
+/** `onSekyroStep`, `onSekyroResult`, ...: what Vue makes of `@sekyro-step` and JSX of `onSekyroStep`. */
+export type SekyroVerificationListeners = {
+  [K in keyof SekyroVerificationEventMap as `on${Camel<K & string>}`]?: (event: CustomEvent<SekyroVerificationEventMap[K]>) => void;
+};

package/types/jsx.d.ts

@@ -0,0 +1,15 @@
+// React-typed JSX (React 19, Preact with compat types): `import "@sekyro/elements/jsx"` once types
+// <sekyro-verification> with its attributes. In a React app, prefer @sekyro/react itself: same flow, no second React.
+import type { SekyroVerificationAttributes, SekyroVerificationElement } from "@sekyro/elements";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type SekyroVerificationJsx = DetailedHTMLProps<HTMLAttributes<SekyroVerificationElement>, SekyroVerificationElement> &
+  Omit<SekyroVerificationAttributes, "dir">;
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "sekyro-verification": SekyroVerificationJsx;
+    }
+  }
+}

package/types/svelte.d.ts

@@ -0,0 +1,16 @@
+// Svelte: `import "@sekyro/elements/svelte"` once (in src/app.d.ts) types <sekyro-verification> for svelte-check:
+// its attributes and its events (`onsekyro-step` in Svelte 5, `on:sekyro-step` in Svelte 4).
+import type { SekyroVerificationAttributes, SekyroVerificationElement, SekyroVerificationEventMap } from "@sekyro/elements";
+import type { HTMLAttributes } from "svelte/elements";
+
+type SvelteEvents = {
+  [K in keyof SekyroVerificationEventMap as `on${K & string}` | `on:${K & string}`]?: (
+    event: CustomEvent<SekyroVerificationEventMap[K]>,
+  ) => void;
+};
+
+declare module "svelte/elements" {
+  interface SvelteHTMLElements {
+    "sekyro-verification": HTMLAttributes<SekyroVerificationElement> & SekyroVerificationAttributes & SvelteEvents;
+  }
+}

package/types/vue.d.ts

@@ -0,0 +1,15 @@
+// Vue: `import "@sekyro/elements/vue"` once (in a .d.ts or your main file) types <sekyro-verification> in templates
+// for vue-tsc and Volar: its attributes, properties and events. Vue must also leave the tag to the browser:
+// `compilerOptions.isCustomElement: (tag) => tag.startsWith("sekyro-")` in @vitejs/plugin-vue's `template` options.
+import type { DefineComponent } from "vue";
+import type { SekyroVerificationElementProperties } from "@sekyro/elements";
+import type { SekyroVerificationListeners } from "./events";
+
+export type SekyroVerificationVueProps = Partial<SekyroVerificationElementProperties> &
+  SekyroVerificationListeners & { dir?: "ltr" | "rtl" };
+
+declare module "vue" {
+  interface GlobalComponents {
+    "sekyro-verification": DefineComponent<SekyroVerificationVueProps>;
+  }
+}