@qratilabs/qrati-connect 2.23.0-beta.2 → 2.23.1

package/README.md

@@ -1,75 +1,65 @@
-![Logo](https://qrati.com/images/qrati-connect-banner.jpg)
+<p align="center">
+  <img src="https://qrati.com/images/qrati-connect-banner.jpg" alt="Qrati Connect Banner" style="max-width:100%;height:auto;" />
+</p>
 
-Qrati Connect is a React component library designed to seamlessly integrate Qrati's interactive features into your web applications to enhance user engagement and interaction.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@qratilabs/qrati-connect"><img src="https://img.shields.io/npm/v/@qratilabs/qrati-connect.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@qratilabs/qrati-connect"><img src="https://img.shields.io/npm/dm/@qratilabs/qrati-connect.svg" alt="npm downloads"></a>
+  <a href="https://github.com/qrati-labs/qrati-connect-ts/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@qratilabs/qrati-connect.svg" alt="license"></a>
+  <img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript">
+</p>
 
-# Features
+---
 
-- **Interactive Media Gallery :** Integrate Qrati's powerful interactive media gallery into your own site without a hassle.
-- **Media Upload :** Users can directly upload content from your host site.
-- **Reaction :** Engage your users with a completely customizable set of emojis.
-- **Curation :** Want to host a photo contest? Our curation feature can be a one stop solution for that.
-- **Leaderboard :** Gamify your contest with a precise and fun leaderboard.
+# Qrati Connect — Embeddable Media & Engagement SDK 🚀
 
-# Installation (React Component)
+**Qrati Connect** is a compact, production-grade SDK for embedding photo galleries, uploads, curation, and engagement into any web app. Built with strict TypeScript, Preact compatibility, and careful bundling to deliver a fast, accessible, and themeable integration.
 
-Install `qrati-connect` using npm, yarn, pnpm or bun:
+---
 
-```bash
-npm install @qratilabs/qrati-connect
-# or
-yarn add @qratilabs/qrati-connect
-# or
-pnpm add @qratilabs/qrati-connect
-# or
-bun install @qratilabs/qrati-connect
-```
+## Why Qrati Connect? 💡
+
+- **Plug & Play**: Use the Web Component anywhere, or import the React wrapper for rapid integration.
+- **Strict TypeScript**: Full typings for safer integration and better DX.
+- **Performance-first**: Small initial bundle, strategic lazy-loading for heavy features (HEIC conversion, upload tooling).
+- **Accessible & Themeable**: ARIA-friendly; visual theme is centrally configured via the Qrati Organization Settings page and applied to the component (exposed via CSS variables and className hooks).
 
-Sample react page -
+---
 
-```javascript
-import QratiConnect from '@qratilabs/qrati-connect/react';
-import '@qratilabs/qrati-connect/react/styles.css';
+## Highlights — What’s inside ✨
 
-const Page = () => {
-    return (
-        <QratiConnect
-            organizationId=<org_id>
-        />
-    );
-};
+- Interactive media gallery with lightbox, blurhash placeholders and infinite scroll
+- Smart uploads: compression, chunked progress, HEIC → JPEG conversion (on-demand)
+- Reactions, curation workflow, and leaderboards for engagement
 
-export default Page;
-```
+---
 
-**Note**: Add 'use client' directive if you are using any React frameworks which supports Server Side Rendering (SSR) like Next.js.
+## Quick Install & Integration
 
-# Available props
+### Install
 
-- **router :** Custom router configuration for internal navigation ('memory or 'hash').
-- **organizationId :** Unique identifier for your organization inside Qrati.
-- **fontClassName :** Classes to control custom font for the component.
-- **textClassName :** Classes to apply any additional styling to texts inside the component.
-- **emptyStateImage :** Link or path to image which will be shown for any empty state in the component.
-- **curateLabel :** Label to show in place of 'Curate' in header for contest type events.
-- **leaderboardLabel :** Label to show in place of 'Leaders' in header for contest type events.
-- **uid :** User id for your application user (applicable for custom auth only).
-- **fname :** First name for your application user (applicable for custom auth only).
-- **lname :** Last name for your application user (applicable for custom auth only).
-- **loginUrl :** The page url inside your web app where we should redirect when authentication is required for user intended action (applicable for custom auth only).
+```bash
+pnpm add @qratilabs/qrati-connect
+# or
+npm install @qratilabs/qrati-connect
+```
 
-# Qrati Connect Element (Web Component)
+### React (Client Component)
 
-Qrati Connect is also available as a Web Component (Custom Element) that you can use directly in your HTML without React. This is useful for non-React applications or when you want to embed Qrati Connect in static HTML pages.
+```tsx
+'use client';
+import { QratiConnect } from '@qratilabs/qrati-connect';
 
-## Installation via CDN (jsDelivr)
+export default function Page() {
+    return <QratiConnect organizationId='your-org-id' router='memory' />;
+}
+```
 
-Add the following script and stylesheet tags to your HTML:
+### Web Component (Framework Agnostic)
 
 ```html
-<!-- Import the Web Component -->
 <script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/web.es.js"></script>
-<!-- Import the styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/styles.css" />
+<qrati-connect organization-id="your-org-id" router="hash"></qrati-connect>
 ```
 
 ### Embed (Single Script — No Code)
@@ -90,7 +80,7 @@ selector for the mount container).
 
 ---
 
-Once imported, you can use the custom element tag `<qrati-connect>` in your HTML:
+## Props & Attributes
 
 | Prop / Attribute    | Type                     | Default    | Description                            |
 | ------------------- | ------------------------ | ---------- | -------------------------------------- |
@@ -102,17 +92,15 @@ Once imported, you can use the custom element tag `<qrati-connect>` in your HTML
 | `theme`             | `'light' \| 'dark'`      | `'light'`  | Color scheme                           |
 | `onError`           | `(error: Error) => void` | —          | Error callback for handling SDK errors |
 
-Note: When using the Web Component version, props are passed as HTML attributes with kebab-case naming (e.g., `organization-id` instead of `organizationId`).
+\* Required
 
-3. Tailwindv3 -> Tailwindv4
+---
 
-bg-primary, bg-secondary -> bg-background
-text-primary -> text-foreground
-text-secondary -> text-muted-foreground
-bg-brand, text-brand -> bg-primary, text-primary
-qc-text-lg, qc-bg-red-500 -> qc:text-lg, qc:bg-red-500
+## Events & Callbacks
 
-4. IconifyReact -> Iconify Tailwindv4
+| Callback  | Payload | Description                           |
+| --------- | ------- | ------------------------------------- |
+| `onError` | `Error` | Fires when an error occurs in the SDK |
 
 ---
 

package/{umd/Wun_Og5n2.js → element/B7EvJYrt2.js}

@@ -1,4 +1,4 @@
-import{t as e}from"./qbHuxVSe.js";import{i as r}from"./WtQ5axEj.js";import{t}from"./2SYk3iBo.js";import{n as o,o as i,r as s,t as n}from"./CMQUiMWC2.js";function a({color:r="#ff4800",className:t="mx-auto size-9",...o}){/* @__PURE__ */
+import{t as e}from"./qbHuxVSe.js";import{i as r}from"./TV5seYRS.js";import{t}from"./BCyTQnZ1.js";import{n as o,o as i,r as s,t as n}from"./Hfo3iOYG2.js";function a({color:r="#ff4800",className:t="mx-auto size-9",...o}){/* @__PURE__ */
 return e("svg",{className:t,viewBox:"0 0 20 20",role:"img","aria-hidden":"true",style:{color:r},...o,children:[
 /* @__PURE__ */e("defs",{children:/* @__PURE__ */e("linearGradient",{id:"RadialGradient8932",children:[/* @__PURE__ */e("stop",{offset:"0%",stopColor:"currentColor",stopOpacity:"1"}),/* @__PURE__ */e("stop",{offset:"100%",stopColor:"currentColor",stopOpacity:"0.25"})]})}),
 /* @__PURE__ */e("style",{children:"@keyframes spin8932 { to { transform: rotate(360deg); } }\n                .circle8932 { transform-origin: 50% 50%; stroke: url(#RadialGradient8932); fill: none; animation: spin8932 .5s infinite linear; }"}),

package/element/{2SYk3iBo.js → BCyTQnZ1.js}

@@ -1,4 +1,4 @@
-import{E as r,t as e}from"./qbHuxVSe.js";import{i as t}from"./WtQ5axEj.js";import{r as a}from"./BekfKWcG.js";function i({className:r}){/* @__PURE__ */
+import{E as r,t as e}from"./qbHuxVSe.js";import{i as t}from"./TV5seYRS.js";import{r as a}from"./CtYiLBXL.js";function i({className:r}){/* @__PURE__ */
 return e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24",className:r,"aria-hidden":"true",focusable:"false",children:[
 /* @__PURE__ */e("circle",{cx:"18",cy:"12",r:"0",fill:"currentColor",children:/* @__PURE__ */e("animate",{attributeName:"r",begin:".67",calcMode:"spline",dur:"1.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",repeatCount:"indefinite",values:"0;2;0;0"})}),
 /* @__PURE__ */e("circle",{cx:"12",cy:"12",r:"0",fill:"currentColor",children:/* @__PURE__ */e("animate",{attributeName:"r",begin:".33",calcMode:"spline",dur:"1.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",repeatCount:"indefinite",values:"0;2;0;0"})}),