decoprofile 1.1.0 → 1.3.0

package/README.md

@@ -1,15 +1,153 @@
-# decoprofilenpm
+# DecoProfile
 
-To install dependencies:
+DecoProfile is a React component library for adding stunning animated decorations to avatars, profiles, and namespace bars. Create Discord-style profile effects with ease.
+
+[![npm version](https://img.shields.io/npm/v/decoprofile.svg)](https://www.npmjs.com/package/decoprofile)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- **Avatar Decorations** - Animated frames around user avatars
+- **Profile Effects** - Stunning background animations for profile cards
+- **Namespace Bars** - Animated video bars with avatar and username
+- **TypeScript Support** - Full type safety with autocomplete for decoration names
+- **Scalable** - All components support proportional scaling
+
+## 📦 Installation
 
 ```bash
-bun install
+npm install decoprofile
 ```
 
-To run:
+```bash
+yarn add decoprofile
+```
 
 ```bash
-bun run index.ts
+bun add decoprofile
+```
+
+## 🚀 Quick Start
+
+```tsx
+import {
+  AvatarDecoration,
+  ProfileDecoration,
+  NamespaceDecoration,
+} from "decoprofile";
+
+function App() {
+  const avatarUrl = "https://example.com/avatar.jpg";
+
+  return (
+    <div>
+      {/* Avatar with animated decoration */}
+      <AvatarDecoration name="Akuma" src={avatarUrl} size={160} />
+
+      {/* Profile card with background effect */}
+      <ProfileDecoration name="OnisCurse" src={avatarUrl}>
+        <h2>Username</h2>
+        <p>Premium User</p>
+      </ProfileDecoration>
+
+      {/* Namespace bar with video background */}
+      <NamespaceDecoration name="Reddragon" src={avatarUrl} userName="Player" />
+    </div>
+  );
+}
+```
+
+## 📚 Components
+
+### AvatarDecoration
+
+Adds animated decoration frames around user avatars.
+
+```tsx
+<AvatarDecoration
+  name="Akuma" // Decoration name (autocomplete available)
+  src="/avatar.jpg" // User's avatar image URL
+  size={160} // Size in pixels (default: 160)
+  className="custom" // Optional CSS class
+/>
+```
+
+| Prop        | Type                   | Default  | Description             |
+| ----------- | ---------------------- | -------- | ----------------------- |
+| `name`      | `AvatarDecorationName` | required | Decoration effect name  |
+| `src`       | `string`               | required | User's avatar image URL |
+| `size`      | `number`               | `160`    | Size in pixels          |
+| `className` | `string`               | -        | Optional CSS class      |
+
+### ProfileDecoration
+
+Creates profile cards with animated background effects.
+
+```tsx
+<ProfileDecoration
+  name="OnisCurse" // Effect name (autocomplete available)
+  src="/avatar.jpg" // User's avatar image URL
+  scale={1} // Scale multiplier (default: 1)
+>
+  <h2>Username</h2>
+  <p>Status text</p>
+</ProfileDecoration>
+```
+
+| Prop        | Type                    | Default  | Description                        |
+| ----------- | ----------------------- | -------- | ---------------------------------- |
+| `name`      | `ProfileDecorationName` | required | Profile effect name                |
+| `src`       | `string`                | required | User's avatar image URL            |
+| `children`  | `ReactNode`             | -        | Content below avatar               |
+| `scale`     | `number`                | `1`      | Scale multiplier (1 = 300px width) |
+| `className` | `string`                | -        | Optional CSS class                 |
+
+### NamespaceDecoration
+
+Animated namespace bars with video background effects.
+
+```tsx
+<NamespaceDecoration
+  name="Reddragon" // Namespace name (autocomplete available)
+  src="/avatar.jpg" // User's avatar image URL
+  userName="Player" // Display name
+  scale={1} // Scale multiplier (default: 1)
+/>
+```
+
+| Prop        | Type                      | Default  | Description                     |
+| ----------- | ------------------------- | -------- | ------------------------------- |
+| `name`      | `NamespaceDecorationName` | required | Namespace effect name           |
+| `src`       | `string`                  | -        | User's avatar image URL         |
+| `userName`  | `string`                  | `"User"` | Display name in the bar         |
+| `scale`     | `number`                  | `1`      | Scale multiplier (1 = 260x52px) |
+| `className` | `string`                  | -        | Optional CSS class              |
+
+## 🎨 Available Decorations
+
+DecoProfile includes a wide variety of decorations:
+
+- **334** Avatar decoration effects
+- **84** Namespace decoration effects
+- **116** Profile background effects
+
+All decoration names provide TypeScript autocomplete for easy discovery.
+
+## 💡 TypeScript Support
+
+All components are fully typed with autocomplete for decoration names:
+
+```tsx
+// TypeScript will suggest available decoration names
+<AvatarDecoration name="Ak..." /> // Shows: Akuma, etc.
 ```
 
-This project was created using `bun init` in bun v1.3.0. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+## 🔗 Links
+
+- [NPM Package](https://www.npmjs.com/package/decoprofile)
+- [GitHub Repository](https://github.com/vikashkhati007/decoprofile)
+- [Demo Website](https://deco-profile.vercel.app)
+
+## 📄 License
+
+MIT © [Vikash Khati](https://github.com/vikashkhati007)

package/dist/components/Namespace.d.ts

@@ -1,2 +1,2 @@
 import { NameSpaceProps } from "../types";
-export declare function NameSpace({ userName, avatar, videoId, className, width, height, }: NameSpaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function NameSpace({ userName, avatar, videoId, className, scale, }: NameSpaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Profile.d.ts

@@ -1,2 +1,2 @@
 import { ProfileEffectProps } from "../types";
-export declare function Profile({ headerComponent, bottomComponent, bgEffectId, avatar, className, width, height, }: ProfileEffectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Profile({ children, bgEffectId, avatar, className, scale, }: ProfileEffectProps): import("react/jsx-runtime").JSX.Element;