@marv3l/canopy-ui 1.0.2 → 1.0.4

package/README.md

@@ -1,261 +1,291 @@
-# Canopy UI
+# <img src="./public/favicon.ico" width="48" height="48" align="center" /> Canopy UI
 
-> A modern, copy-and-paste CLI for adding customizable UI components directly to React and Next.js codebases.
+<div align="center">
 
-Canopy UI installs component source code into your project, giving you full ownership over the markup, styles, behavior, and design tokens. Customize components as much as you need—without being locked into a hosted UI library.
+### Custom UI Components for React & Next.js
 
-## Quick Start
+A modern npm package for building beautiful, customizable user interfaces.
 
-Add a component with one command:
+<br />
 
-```bash
-npx canopy-ui add toast
-```
+[![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge\&logo=npm\&logoColor=white)](https://www.npmjs.com/package/canopy-ui)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\&logo=typescript\&logoColor=white)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\&logo=react\&logoColor=61DAFB)](https://react.dev/)
+[![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge\&logo=nextdotjs\&logoColor=white)](https://nextjs.org/)
 
-Run the command without a component name to open an interactive multi-select prompt:
+<br />
 
-```bash
-npx canopy-ui add
-```
+<a href="https://canopy-ui-web.vercel.app/">
+
+<img src="https://img.shields.io/badge/Documentation-Canopy%20UI-7C3AED?style=for-the-badge&logo=readthedocs&logoColor=white" />
+
+</a>
+
+<a href="https://www.npmjs.com/package/canopy-ui">
+
+<img src="https://img.shields.io/badge/npm-View%20Package-CB3837?style=for-the-badge&logo=npm&logoColor=white" />
+
+</a>
+
+<a href="https://github.com/ShawnR04/canopy-ui">
+
+<img src="https://img.shields.io/badge/GitHub-Repository-181717?style=for-the-badge&logo=github&logoColor=white" />
+
+</a>
+
+</div>
+
+<br />
 
 ---
 
-## Components
+## <img src="https://api.iconify.design/lucide/book-open.svg?color=%233B82F6" width="25" /> About Canopy UI
+
+**Canopy UI** is a customizable UI component library for **React** and **Next.js** applications.
+
+The project is built around a simple idea: provide developers with modern, polished UI components that are easy to integrate and customize.
+
+Canopy UI currently provides a **Toast notification component**, with additional components planned for the future.
+
+> **Simple components. Flexible design. Built for your application.**
+
+---
+
+## <img src="https://api.iconify.design/lucide/layers-3.svg?color=%238B5CF6" width="25" /> Components
+
+<div align="center">
+
+<table>
+<tr>
+
+<td align="center" width="50%">
+
+<img src="https://api.iconify.design/lucide/bell.svg?color=%23F59E0B" width="42" />
+
+<br /><br />
+
+<b>Toast</b>
+
+<br />
+
+Customizable notification component with configurable variants, colors, positioning, durations, and styling.
+
+<br /><br />
+
+<img src="https://img.shields.io/badge/Available-22C55E?style=flat-square&logoColor=white" />
+
+</td>
+
+<td align="center" width="50%">
+
+<img src="https://api.iconify.design/lucide/sparkles.svg?color=%238B5CF6" width="42" />
+
+<br /><br />
+
+<b>More Coming Soon</b>
+
+<br />
+
+Canopy UI is actively growing with additional components planned for future releases.
+
+<br /><br />
+
+<img src="https://img.shields.io/badge/Coming%20Soon-8B5CF6?style=flat-square&logoColor=white" />
+
+</td>
+
+</tr>
+</table>
+
+</div>
+
+---
+
+## <img src="https://api.iconify.design/lucide/sparkles.svg?color=%23F59E0B" width="25" /> Features
+
+<div align="center">
+
+<table>
+<tr>
+
+<td align="center" width="25%">
+
+<img src="https://api.iconify.design/lucide/palette.svg?color=%23EC4899" width="36" />
+
+<br /><br />
+
+<b>Customizable</b>
+
+<br />
 
-### Toast
+Designed to adapt to your application's visual style.
 
-A customizable, animated notification system with:
+</td>
 
-- Built-in `success` and `error` variants
-- Configurable global default duration
-- Configurable screen position
-- Per-toast duration overrides
-- Custom colors using hex values, CSS variables, or design tokens
-- Progress-bar color controls
-- Direct Tailwind `className` overrides
+<td align="center" width="25%">
 
-## Installation
+<img src="https://api.iconify.design/lucide/code-2.svg?color=%238B5CF6" width="36" />
 
-Install the Toast component into your project:
+<br /><br />
 
-```bash
-npx canopy-ui add toast
-```
+<b>Developer Friendly</b>
 
-The component is added to your local UI directory, typically under:
+<br />
 
-```text
-components/ui/toast.tsx
-components/ui/use-toast.ts
-```
+Built with modern React and TypeScript.
 
-> The exact generated paths may depend on your project's configured import aliases.
+</td>
+
+<td align="center" width="25%">
+
+<img src="https://api.iconify.design/lucide/zap.svg?color=%23F59E0B" width="36" />
+
+<br /><br />
+
+<b>Lightweight</b>
+
+<br />
+
+Focused components without unnecessary complexity.
+
+</td>
+
+<td align="center" width="25%">
+
+<img src="https://api.iconify.design/lucide/settings-2.svg?color=%233B82F6" width="36" />
+
+<br /><br />
+
+<b>Flexible</b>
+
+<br />
+
+Designed to work with your existing application and design system.
+
+</td>
+
+</tr>
+</table>
+
+</div>
 
 ---
 
-## Setup
-
-Mount `Toaster` once in your root `app/layout.tsx`. This provides the toast viewport for all routes in your application.
-
-```tsx
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-
-import "./globals.css";
-import { Toaster } from "@/components/ui/toast";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "My App",
-  description: "My application",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="flex min-h-full flex-col">
-        {children}
-        <Toaster defaultDuration={3500} position="top-center" />
-      </body>
-    </html>
-  );
-}
-```
-
-### `Toaster` Props
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `defaultDuration` | `number` | Default time, in milliseconds, before a toast dismisses. Individual toasts can override it. |
-| `position` | `string` | Position of the toast viewport, for example `"top-center"`. |
+## <img src="https://api.iconify.design/lucide/book-open.svg?color=%233B82F6" width="25" /> Documentation
+
+The complete Canopy UI documentation is available on the official documentation site.
+
+It includes:
+
+* Component installation
+* Configuration
+* Usage
+* API references
+* Customization
+* Examples
+* CLI documentation
+
+<div align="center">
+
+<a href="https://canopy-ui-web.vercel.app/">
+
+<img src="https://img.shields.io/badge/Read%20the%20Documentation-7C3AED?style=for-the-badge&logo=readthedocs&logoColor=white" />
+
+</a>
+
+</div>
 
 ---
 
-## Usage
+## <img src="https://api.iconify.design/lucide/layers.svg?color=%2306B6D4" width="25" /> Tech Stack
 
-Import `toast` inside a client component, then call it from an event handler or client-side action.
+<div align="center">
 
-```tsx
-"use client";
+[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\&logo=react\&logoColor=61DAFB)](https://react.dev/)
+[![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge\&logo=nextdotjs\&logoColor=white)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\&logo=typescript\&logoColor=white)](https://www.typescriptlang.org/)
+[![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge\&logo=npm\&logoColor=white)](https://www.npmjs.com/)
 
-import { toast } from "@/components/ui/use-toast";
+</div>
 
-export default function Page() {
-  return (
-    <button
-      onClick={() =>
-        toast({
-          variant: "success",
-          title: "Changes saved",
-          description: "Your preferences were updated successfully.",
-        })
-      }
-    >
-      Show toast
-    </button>
-  );
-}
-```
+---
+
+## <img src="https://api.iconify.design/lucide/heart.svg?color=%23EC4899" width="25" /> Philosophy
+
+Canopy UI is built around a simple principle:
+
+> **Build beautiful UI without unnecessary complexity.**
+
+Components should be easy to integrate, easy to customize, and flexible enough to fit into different applications.
+
+Canopy UI aims to provide a growing collection of components that developers can rely on when building modern interfaces.
+
+---
+
+## <img src="https://api.iconify.design/lucide/rocket.svg?color=%23EF4444" width="25" /> Roadmap
+
+Canopy UI currently includes:
+
+* <img src="https://api.iconify.design/lucide/check-circle-2.svg?color=%2322C55E" width="18" /> Toast
+
+Additional components are planned for future releases.
 
 ---
 
-## Examples
-
-### Success Toast
-
-```tsx
-toast({
-  variant: "success",
-  title: "Changes saved",
-  description: "Your preferences were updated successfully.",
-});
-```
-
-### Error Toast
-
-```tsx
-toast({
-  variant: "error",
-  title: "Action failed",
-  description: "Could not connect to the remote server.",
-});
-```
-
-### Custom Colors and Duration
-
-Use `customColor` to override the toast palette. Values can be literal CSS colors, such as hex values, or CSS custom properties such as `var(--primary)`.
-
-```tsx
-toast({
-  title: "Pro subscription unlocked",
-  description: "Welcome to VIP perks and custom styling.",
-  duration: 5000,
-  customColor: {
-    bg: "var(--card)",
-    border: "var(--primary)",
-    text: "var(--card-foreground)",
-    icon: "var(--primary)",
-    progress: "var(--primary)",
-  },
-});
-```
-
-### Tailwind Class Override
-
-Use `className` when you want to apply direct Tailwind utility classes to an individual toast.
-
-```tsx
-toast({
-  title: "Tailwind classes applied",
-  description: "Styled with direct className overrides.",
-  duration: 3500,
-  customColor: {
-    progress: "var(--destructive)",
-  },
-  className: "border-destructive/40 bg-card text-primary",
-});
-```
+## <img src="https://api.iconify.design/lucide/github.svg?color=%23181717" width="25" /> Repository
+
+Canopy UI is open source and available on GitHub.
+
+<div align="center">
+
+<a href="https://github.com/ShawnR04/canopy-ui">
+
+<img src="https://img.shields.io/badge/View%20Source%20Code-GitHub-181717?style=for-the-badge&logo=github&logoColor=white" />
+
+</a>
+
+</div>
 
 ---
 
-## Toast API
-
-```ts
-toast({
-  variant?: "success" | "error";
-  title?: string;
-  description?: string;
-  duration?: number;
-  customColor?: {
-    bg?: string;
-    border?: string;
-    text?: string;
-    icon?: string;
-    progress?: string;
-  };
-  className?: string;
-});
-```
-
-| Option | Description |
-| --- | --- |
-| `variant` | Applies a built-in visual style, such as `"success"` or `"error"`. |
-| `title` | Primary toast message. |
-| `description` | Supporting text displayed below the title. |
-| `duration` | Dismiss timeout in milliseconds. Overrides `Toaster`’s `defaultDuration`. |
-| `customColor.bg` | Toast background color. |
-| `customColor.border` | Toast border color. |
-| `customColor.text` | Toast text color. |
-| `customColor.icon` | Toast icon color. |
-| `customColor.progress` | Toast progress-bar color. |
-| `className` | Tailwind or custom CSS classes applied directly to the toast. |
+## <img src="https://api.iconify.design/lucide/scale.svg?color=%2322C55E" width="25" /> License
+
+Canopy UI is licensed under the **MIT License**.
+
+Copyright © 2026 **Shawn Rimai**
 
 ---
 
-## Development
+<div align="center">
+
+<img src="./public/favicon.ico" width="42" height="42" align="center" /> 
+
+### Canopy UI
+
+**Custom UI. Simple integration. Flexible design.**
+
+<br />
+
+<a href="https://canopy-ui-web.vercel.app/">
 
-Build the CLI:
+<img src="https://img.shields.io/badge/Documentation-Visit%20Canopy%20UI-7C3AED?style=for-the-badge&logo=readthedocs&logoColor=white" />
 
-```bash
-npm run build
-```
+</a>
 
-Link the package locally:
+<a href="https://www.npmjs.com/package/canopy-ui">
 
-```bash
-npm link
-```
+<img src="https://img.shields.io/badge/npm-Canopy%20UI-CB3837?style=for-the-badge&logo=npm&logoColor=white" />
 
-Then, inside a sample React or Next.js project, install a component through the linked CLI:
+</a>
 
-```bash
-canopy-ui add toast
-```
+<a href="https://github.com/ShawnR04/canopy-ui">
 
-## Publishing
+<img src="https://img.shields.io/badge/GitHub-ShawnR04-181717?style=for-the-badge&logo=github&logoColor=white" />
 
-Publish the package to npm:
+</a>
 
-```bash
-npm publish --access public
-```
+<br /><br />
 
-## License
+<sub>Built by Shawn Rimai</sub>
 
-MIT © Shawn Rimai
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marv3l/canopy-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "An accessible, themable React UI component library built for fast-moving web applications.",
   "main": "./dist/index.js",
   "bin": {

package/templates/toast/use-toast.ts

@@ -48,7 +48,7 @@ export interface ToastItem extends ToastOptions {
 // Maximum number of visible toast cards on screen simultaneously
 const TOAST_LIMIT = 5;
 // Delay before removed toasts are completely purged from memory (allows exit transition)
-const TOAST_REMOVE_DELAY = 200;
+const TOAST_REMOVE_DELAY = 500;
 
 // Discriminated union type representing all possible reducer actions
 type Action =