facehash 0.0.2 → 0.0.3

package/dist/README.md

@@ -0,0 +1,329 @@
+# facehash
+
+Deterministic avatar faces from any string. Zero dependencies, unstyled, React 18/19 compatible.
+
+Following the [shadcn/ui](https://ui.shadcn.com/) philosophy: **unstyled, composable, and yours to customize**.
+
+<p align="center">
+  <img src="https://cossistant.com/facehash-preview.png" alt="facehash examples" width="600" />
+</p>
+
+## Features
+
+- **Deterministic** - Same string always generates the same face
+- **Unstyled** - Zero CSS included, bring your own Tailwind/CSS
+- **Composable** - Use standalone or as part of Avatar compound component
+- **Dark mode ready** - Built-in light/dark color palette support
+- **Accessible** - Proper ARIA attributes included
+- **Tiny** - Zero dependencies (React is a peer dep)
+- **TypeScript** - Full type safety
+
+## Installation
+
+```bash
+npm install facehash
+# or
+pnpm add facehash
+# or
+bun add facehash
+```
+
+## Quick Start
+
+### Standalone FacehashAvatar
+
+The simplest way to get started - just a fun face!
+
+```tsx
+import { FacehashAvatar } from "facehash";
+
+function App() {
+  return (
+    <FacehashAvatar
+      name="John Doe"
+      className="w-10 h-10 rounded-full"
+    />
+  );
+}
+```
+
+### With Avatar Compound Component
+
+For image avatars with FacehashAvatar as fallback:
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback } from "facehash";
+
+function UserAvatar({ user }) {
+  return (
+    <Avatar className="w-10 h-10 rounded-full overflow-hidden">
+      <AvatarImage src={user.avatarUrl} alt={user.name} />
+      <AvatarFallback name={user.name} facehash />
+    </Avatar>
+  );
+}
+```
+
+## Usage Examples
+
+### Basic Styling with Tailwind
+
+```tsx
+<FacehashAvatar
+  name="Jane Smith"
+  className="w-12 h-12 rounded-xl bg-gray-100 dark:bg-gray-800"
+/>
+```
+
+### Custom Color Palette
+
+```tsx
+<FacehashAvatar
+  name="Alex Johnson"
+  colors={["#264653", "#2a9d8f", "#e9c46a", "#f4a261", "#e76f51"]}
+  className="w-16 h-16 rounded-full"
+/>
+```
+
+### Light/Dark Mode Colors
+
+```tsx
+<FacehashAvatar
+  name="Sam Wilson"
+  colorsLight={["#fce7f3", "#fef3c7", "#dbeafe"]}
+  colorsDark={["#db2777", "#d97706", "#2563eb"]}
+  colorScheme="auto" // Uses CSS prefers-color-scheme
+  className="w-10 h-10 rounded-full"
+/>
+```
+
+### Without 3D Effect
+
+```tsx
+<FacehashAvatar
+  name="Chris Brown"
+  enable3D={false}
+  className="w-10 h-10 rounded-lg"
+/>
+```
+
+### Without Initial Letter
+
+```tsx
+<FacehashAvatar
+  name="Taylor Swift"
+  showInitial={false}
+  className="w-10 h-10 rounded-full"
+/>
+```
+
+### Avatar with Initials Fallback
+
+```tsx
+<Avatar className="w-10 h-10 rounded-full bg-gray-200">
+  <AvatarImage src="/photo.jpg" alt="User" />
+  <AvatarFallback name="John Doe" className="text-sm font-medium" />
+</Avatar>
+```
+
+### Avatar with Custom Fallback
+
+```tsx
+import { User } from "lucide-react";
+
+<Avatar className="w-10 h-10 rounded-full bg-gray-200">
+  <AvatarImage src="/photo.jpg" alt="User" />
+  <AvatarFallback>
+    <User className="w-5 h-5 text-gray-500" />
+  </AvatarFallback>
+</Avatar>
+```
+
+### Delayed Fallback (Prevent Flash)
+
+```tsx
+<Avatar className="w-10 h-10 rounded-full">
+  <AvatarImage src="/slow-loading-image.jpg" />
+  <AvatarFallback name="John" facehash delayMs={600} />
+</Avatar>
+```
+
+## Styling with CSS
+
+### Using CSS Variables (Dark Mode)
+
+When using `colorScheme="auto"`, the component sets CSS custom properties:
+
+```css
+/* Apply the background based on color scheme */
+[data-facehash-avatar][data-color-scheme="auto"] {
+  background-color: var(--facehash-avatar-bg-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-facehash-avatar][data-color-scheme="auto"] {
+    background-color: var(--facehash-avatar-bg-dark);
+  }
+}
+```
+
+### Using Data Attributes
+
+All components expose data attributes for styling:
+
+```css
+/* Root avatar */
+[data-avatar] { }
+[data-avatar][data-state="loading"] { }
+[data-avatar][data-state="loaded"] { }
+[data-avatar][data-state="error"] { }
+
+/* Facehash avatar */
+[data-facehash-avatar] { }
+[data-facehash-avatar-face] { }
+[data-facehash-avatar-initial] { }
+
+/* Image and fallback */
+[data-avatar-image] { }
+[data-avatar-fallback] { }
+```
+
+## API Reference
+
+### FacehashAvatar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | Required | Name used to generate deterministic avatar |
+| `colors` | `string[]` | Tailwind colors | Base color palette |
+| `colorsLight` | `string[]` | Light variants | Colors for light mode |
+| `colorsDark` | `string[]` | Dark variants | Colors for dark mode |
+| `colorScheme` | `"light" \| "dark" \| "auto"` | `"auto"` | Color scheme to use |
+| `showInitial` | `boolean` | `true` | Show first letter below face |
+| `enable3D` | `boolean` | `true` | Enable 3D sphere rotation effect |
+
+### Avatar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `asChild` | `boolean` | `false` | Render as child element (Slot pattern) |
+
+### AvatarImage
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string \| null` | - | Image source URL |
+| `alt` | `string` | `""` | Alt text for accessibility |
+| `onLoadingStatusChange` | `(status) => void` | - | Callback on status change |
+
+### AvatarFallback
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | `""` | Name for initials/FacehashAvatar |
+| `facehash` | `boolean` | `false` | Use FacehashAvatar instead of initials |
+| `facehashProps` | `FacehashAvatarProps` | - | Props to pass to FacehashAvatar |
+| `delayMs` | `number` | `0` | Delay before showing fallback |
+| `children` | `ReactNode` | - | Custom fallback content |
+
+## Exports
+
+```tsx
+// Components
+import {
+  FacehashAvatar,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+} from "facehash";
+
+// Face components (for custom compositions)
+import {
+  RoundFace,
+  CrossFace,
+  LineFace,
+  CurvedFace,
+  FACES,
+} from "facehash";
+
+// Utilities
+import {
+  stringHash,
+  DEFAULT_COLORS,
+  DEFAULT_COLORS_LIGHT,
+  DEFAULT_COLORS_DARK,
+} from "facehash";
+
+// Hooks
+import { useAvatarContext } from "facehash";
+```
+
+## Recipes
+
+### Next.js App Router
+
+```tsx
+// components/user-avatar.tsx
+"use client";
+
+import { Avatar, AvatarImage, AvatarFallback } from "facehash";
+
+export function UserAvatar({ user }: { user: { name: string; image?: string } }) {
+  return (
+    <Avatar className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
+      {user.image && <AvatarImage src={user.image} alt={user.name} />}
+      <AvatarFallback
+        name={user.name}
+        facehash
+        className="flex h-full w-full items-center justify-center"
+      />
+    </Avatar>
+  );
+}
+```
+
+### Tailwind with Ring
+
+```tsx
+<Avatar className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900">
+  <AvatarImage src={url} />
+  <AvatarFallback name="John Doe" facehash />
+</Avatar>
+```
+
+### Avatar Group
+
+```tsx
+function AvatarGroup({ users }) {
+  return (
+    <div className="flex -space-x-2">
+      {users.map((user) => (
+        <Avatar
+          key={user.id}
+          className="h-8 w-8 rounded-full ring-2 ring-white"
+        >
+          <AvatarImage src={user.avatar} />
+          <AvatarFallback name={user.name} facehash />
+        </Avatar>
+      ))}
+    </div>
+  );
+}
+```
+
+## Browser Support
+
+- Chrome 88+
+- Firefox 78+
+- Safari 14+
+- Edge 88+
+
+## Credits
+
+Built with love by the [Cossistant](https://cossistant.com) team.
+
+Inspired by [Boring Avatars](https://boringavatars.com/) by Josep Martins.
+
+## License
+
+MIT

package/{index.d.ts.map → dist/index.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/facehash.tsx","../src/avatar.tsx","../src/avatar-fallback.tsx","../src/avatar-image.tsx","../src/faces.tsx","../src/utils/hash.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/facehash.tsx","../src/avatar.tsx","../src/avatar-fallback.tsx","../src/avatar-image.tsx","../src/faces.tsx","../src/utils/hash.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "facehash",
+  "type": "module",
+  "version": "0.0.3",
+  "private": false,
+  "author": "Cossistant team",
+  "description": "Deterministic avatar faces from any string. Lightweight, interactive, pure CSS. Works with any framework.",
+  "keywords": [
+    "facehash",
+    "avatar",
+    "react",
+    "react-avatar",
+    "deterministic",
+    "generative",
+    "profile-picture",
+    "profile-avatar",
+    "identicon",
+    "hash",
+    "face",
+    "3d",
+    "interactive",
+    "gradient",
+    "typescript",
+    "accessible",
+    "headless",
+    "unstyled",
+    "css",
+    "tailwind",
+    "boring-avatars",
+    "dicebear",
+    "jdenticon",
+    "gravatar-alternative",
+    "user-avatar",
+    "default-avatar"
+  ],
+  "bugs": {
+    "url": "https://github.com/cossistantcom/cossistant/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cossistantcom/cossistant.git",
+    "directory": "packages/facehash"
+  },
+  "license": "MIT",
+  "homepage": "https://cossistant.com",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "@types/react": ""
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "facehash",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "author": "Cossistant team",
   "description": "Deterministic avatar faces from any string. Lightweight, interactive, pure CSS. Works with any framework.",
@@ -44,14 +44,17 @@
   "license": "MIT",
   "homepage": "https://cossistant.com",
   "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js"
-    }
+    ".": "./src/index.ts"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@cossistant/typescript-config": "workspace:*"
   },
-  "main": "./index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
@@ -63,6 +66,15 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "tsdown && bun run prepare-package",
+    "prepare-package": "bun ../../scripts/prepare-package.ts",
+    "pub:release": "bun run build && npm publish --access public",
+    "pub:beta": "bun run build && npm publish --access public --tag beta --no-git-checks",
+    "lint": "biome check .",
+    "check-types": "tsc --noEmit --project tsconfig.json"
   }
 }