whatsapp-ui-react 0.0.1

package/dist/tailwind.css

@@ -0,0 +1,49 @@
+@theme {
+  /* ── Background colors ── */
+  --color-wa-bg: #161717;
+  --color-wa-header: #161717;
+  --color-wa-bubble-out: #144d37;
+  --color-wa-bubble-in: #202c33;
+  --color-wa-input: #242626;
+  --color-wa-avatar: #2a3942;
+  --color-wa-divider: #182229;
+
+  /* ── Text colors ── */
+  --color-wa-text-primary: #e9edef;
+  --color-wa-text-secondary: #8696a0;
+  --color-wa-text-body: #d1d7db;
+  --color-wa-icon: #aebac1;
+
+  /* ── Accent colors ── */
+  --color-wa-teal: #00a884;
+  --color-wa-teal-hover: #06cf9c;
+  --color-wa-send: #21c063;
+  --color-wa-read: #53bdeb;
+  --color-wa-waveform-out: #53bdeb;
+  --color-wa-waveform-in: #8696a0;
+  --color-wa-waveform-out-faint: rgba(83, 189, 235, 0.4);
+  --color-wa-waveform-in-faint: rgba(134, 150, 160, 0.4);
+
+  /* ── Border radii ── */
+  --radius-wa-bubble: 0.525rem;
+  --radius-wa-divider: 0.325rem;
+}
+
+/* ── Custom scrollbar ── */
+.scrollbar-wa {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+.scrollbar-wa::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-wa::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-wa::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 9999px;
+}
+.scrollbar-wa::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

package/dist/utils/audio.d.ts

@@ -0,0 +1,14 @@
+/** Number of bars in the waveform visualisation. */
+export declare const BAR_COUNT = 44;
+/**
+ * Analyse an audio file at `url` using the Web Audio API and return an array
+ * of `BAR_COUNT` amplitude values, each normalised to the range 0–10.
+ *
+ * Returns an array of zeros when no url is provided or on any error.
+ */
+export declare function analyzeAudio(url: string, count?: number): Promise<number[]>;
+/** Formats a duration in seconds as `M:SS`. */
+export declare function fmtTime(seconds: number): string;
+/** Draws a rounded rectangle path on a 2-D canvas context. */
+export declare function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void;
+//# sourceMappingURL=audio.d.ts.map

package/dist/utils/audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../../src/utils/audio.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,eAAO,MAAM,SAAS,KAAK,CAAA;AAE3B;;;;;GAKG;AACH,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,MAAkB,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAgC5F;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,8DAA8D;AAC9D,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,GACR,IAAI,CAaN"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,4 @@
+import { ClassValue } from 'clsx';
+/** Merges Tailwind class names, resolving conflicts via `tailwind-merge`. */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,6EAA6E;AAC7E,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils/color.d.ts

@@ -0,0 +1,3 @@
+/** Returns a deterministic accent color for a given sender name. */
+export declare function senderColor(name: string): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAeA,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMhD"}

package/dist/utils/date.d.ts

@@ -0,0 +1,5 @@
+/** Coerces a `Date` or ISO string to a `Date`, returning `null` on failure. */
+export declare function toDate(value?: Date | string): Date | null;
+/** Returns `true` when `a` and `b` fall on the same calendar day. */
+export declare function isSameCalendarDay(a: Date, b: Date): boolean;
+//# sourceMappingURL=date.d.ts.map

package/dist/utils/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,wBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAKzD;AAED,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAM3D"}

package/dist/utils/extractText.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+/**
+ * Recursively extracts all text from a React node tree.
+ * Detects the `content` prop used by the <Text> component.
+ */
+export declare function extractTextFromNode(node: React.ReactNode): string;
+//# sourceMappingURL=extractText.d.ts.map

package/dist/utils/extractText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.d.ts","sourceRoot":"","sources":["../../src/utils/extractText.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAYjE"}

package/dist/utils/groupMessages.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+/** A single message entry managed by {@link Chat}. */
+export interface GroupedMessage {
+    /** Unique React key — auto-generated by `<Chat>` when omitted. */
+    id?: React.Key;
+    /** Identifies the sender; `'me'` denotes the local user. */
+    senderId: string;
+    /** The rendered message node, typically a `<Message>` component tree. */
+    node: React.ReactNode;
+    /** Creation timestamp; used to group messages by calendar day and compute day-divider labels. */
+    timestamp?: Date | string;
+}
+/** A run of consecutive messages from the same sender on the same calendar day. */
+export interface MessageDayGroup {
+    /** Sender id shared by all messages in this group. */
+    senderId: string;
+    /** The calendar day for this group, or `null` when no timestamp was provided. */
+    dayDate: Date | null;
+    /** Ordered list of messages belonging to this group. */
+    messages: GroupedMessage[];
+}
+/** Groups a flat message list into per-sender, per-day segments. */
+export declare function groupMessagesByDay(messages: GroupedMessage[]): MessageDayGroup[];
+//# sourceMappingURL=groupMessages.d.ts.map

package/dist/utils/groupMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupMessages.d.ts","sourceRoot":"","sources":["../../src/utils/groupMessages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,CAAA;IACd,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iGAAiG;IACjG,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC1B;AAED,mFAAmF;AACnF,MAAM,WAAW,eAAe;IAC9B,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAA;IAChB,iFAAiF;IACjF,OAAO,EAAE,IAAI,GAAG,IAAI,CAAA;IACpB,wDAAwD;IACxD,QAAQ,EAAE,cAAc,EAAE,CAAA;CAC3B;AAED,oEAAoE;AACpE,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAiBhF"}

package/dist/utils/message.d.ts

@@ -0,0 +1,5 @@
+/** Generates a sequential, locally-unique message id. */
+export declare function uid(): string;
+/** Returns the current local time as a `HH:MM` string. */
+export declare function nowTime(): string;
+//# sourceMappingURL=message.d.ts.map

package/dist/utils/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/utils/message.ts"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,wBAAgB,GAAG,IAAI,MAAM,CAE5B;AAED,0DAA0D;AAC1D,wBAAgB,OAAO,IAAI,MAAM,CAGhC"}

package/dist/utils/string.d.ts

@@ -0,0 +1,3 @@
+/** Returns up to two uppercase initials from a display name. */
+export declare function getInitials(name: string): string;
+//# sourceMappingURL=string.d.ts.map

package/dist/utils/string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../src/utils/string.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMhD"}

package/dist/utils/time.d.ts

@@ -0,0 +1,8 @@
+/** Returns `time` as-is, or the current local time formatted as `HH:MM`. */
+export declare function getDisplayTime(time?: string): string;
+/**
+ * Returns a human-readable date label for a day-divider:
+ * `'Today'`, `'Yesterday'`, weekday name, or `D.M.YY`.
+ */
+export declare function getDisplayDate(date?: string): string;
+//# sourceMappingURL=time.d.ts.map

package/dist/utils/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAkBpD"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "whatsapp-ui-react",
+  "version": "0.0.1",
+  "description": "React component library with a WhatsApp Web-inspired UI.",
+  "keywords": [
+    "react",
+    "whatsapp",
+    "chat",
+    "ui",
+    "component",
+    "tailwindcss"
+  ],
+  "homepage": "https://github.com/2hoch1/whatsapp-ui-react#readme",
+  "bugs": {
+    "url": "https://github.com/2hoch1/whatsapp-ui-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/2hoch1/whatsapp-ui-react.git"
+  },
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/tailwind.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "build": "tsc --noEmit && vite build",
+    "postbuild": "node --input-type=module --eval \"import{copyFileSync}from'fs';copyFileSync('./src/tailwind.css','./dist/tailwind.css');\"",
+    "build:preview": "vite build --config vite.dev.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"*.{json,md,yml,yaml}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"*.{json,md,yml,yaml}\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.0",
+    "@commitlint/config-conventional": "^19.0.0",
+    "@eslint/js": "^9.0.0",
+    "@tailwindcss/vite": "^4.2.1",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^3.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "husky": "^9.0.0",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^3.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  }
+}