zipzy-icons 1.0.26 → 1.0.28

package/README.md

@@ -1,27 +1,77 @@
-# ZipZy Icons
+# zipzy-icons
 
-Lightweight, customizable React icon library for ZipZy products.
+> Lightweight, customizable React icon library for ZipZy products — logomarks, wordmarks, and product icons with full TypeScript support.
+
+[![npm version](https://img.shields.io/npm/v/zipzy-icons)](https://www.npmjs.com/package/zipzy-icons)
+[![npm downloads](https://img.shields.io/npm/dm/zipzy-icons)](https://www.npmjs.com/package/zipzy-icons)
+[![license](https://img.shields.io/npm/l/zipzy-icons)](./LICENSE)
+[![React](https://img.shields.io/badge/React-18%2B-blue)](https://react.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-ready-blue)](https://www.typescriptlang.org)
+
+**zipzy-icons** is the official icon package for [ZipZy](https://zipzy.in) products. It provides brand logos, logomarks, and product-specific icons (HRMS, Payments, Dashboard) as optimized React SVG components. Every icon supports `currentColor`, Tailwind CSS classes, inline styles, and standard SVG props — zero configuration needed.
+
+---
+
+## Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Available Icons](#available-icons)
+- [Usage by Context](#usage-by-context)
+  - [Navbar & Header](#navbar--header)
+  - [Favicon & App Icon](#favicon--app-icon)
+  - [Splash & Loading Screen](#splash--loading-screen)
+  - [Dark Backgrounds](#dark-backgrounds)
+  - [Product Pages (HRMS)](#product-pages-hrms)
+  - [Product Pages (Dashboard)](#product-pages-dashboard)
+  - [Product Pages (Payments)](#product-pages-payments)
+  - [Product Switcher Grid](#product-switcher-grid)
+  - [Sidebar Nav Items](#sidebar-nav-items)
+  - [Tab Bars](#tab-bars)
+  - [Email Templates](#email-templates)
+- [Multi-color Product Icons](#multi-color-product-icons)
+- [Props Reference](#props-reference)
+- [Sizing Guide](#sizing-guide)
+- [TypeScript](#typescript)
+- [Design Notes](#design-notes)
+- [Requirements](#requirements)
+- [Roadmap](#roadmap)
+- [License](#license)
 
 ---
 
-## 🚀 Installation
+## Installation
 
 ```bash
 npm install zipzy-icons
 ```
 
+```bash
+yarn add zipzy-icons
+```
+
+```bash
+pnpm add zipzy-icons
+```
+
 ---
 
-## 📦 Usage
+## Quick Start
 
 ```tsx
-import { ZipZyLogo, ZipZyMark } from "zipzy-icons";
+import { ZipZyLogo, ZipZyMark, ZipZyLogoHorizontal } from "zipzy-icons";
 
 export default function App() {
   return (
     <div className="flex items-center gap-2">
+      {/* Logomark only */}
       <ZipZyMark className="h-8 w-8 text-orange-500" />
+
+      {/* Full stacked logo */}
       <ZipZyLogo className="h-10 text-orange-500" />
+
+      {/* Horizontal layout */}
+      <ZipZyLogoHorizontal className="h-10 text-orange-500" />
     </div>
   );
 }
@@ -29,135 +79,417 @@ export default function App() {
 
 ---
 
-## 🎨 Customization
+## Available Icons
+
+### Brand (Standalone)
+
+| Component | Description | Color pattern |
+|-----------|-------------|---------------|
+| `ZipZyMark` | Logomark only — no text | `currentColor` |
+| `ZipZyLogo` | Stacked: mark + wordmark | `currentColor` |
+| `ZipZyLogoHorizontal` | Horizontal: mark + wordmark | `currentColor` |
+
+### Products
+
+| Component | Description | Color pattern |
+|-----------|-------------|---------------|
+| `ZipZyHrms` | HRMS product logo | `primaryColor` · `secondaryColor` · `accentColor` |
+| `ZipZyPayments` | Payments product logo | `primaryColor` · `secondaryColor` |
+| `ZipZyDashboard` | Dashboard branded logo | `primaryColor` · `secondaryColor` |
+| `ZipZyDashboardIcon` | Dashboard icon (no text) | `currentColor` |
+
+---
+
+## Usage by Context
+
+### Navbar & Header
 
-All icons support standard SVG props:
+Use `ZipZyLogoHorizontal` for top navigation bars. It inherits the nav text color via `currentColor`.
 
 ```tsx
-<ZipZyLogo size={40} />
-<ZipZyLogo className="h-8 text-blue-500" />
-<ZipZyLogo style={{ color: "red", width: 60 }} />
+// Light navbar
+<nav className="bg-white border-b px-6 py-4">
+  <ZipZyLogoHorizontal className="h-8 text-gray-900" />
+</nav>
+
+// Dark navbar
+<nav className="bg-gray-900 px-6 py-4">
+  <ZipZyLogoHorizontal className="h-8 text-white" />
+</nav>
+
+// Brand color
+<nav>
+  <ZipZyLogoHorizontal className="h-8 text-orange-500" />
+</nav>
 ```
 
-## 🎯 Multi-color Support (Product Icons)
+---
+
+### Favicon & App Icon
+
+Use `ZipZyMark` when space is constrained — tab icons, breadcrumbs, avatar placeholders.
+
+```tsx
+// Browser tab / favicon context
+<ZipZyMark className="h-8 w-8 text-orange-500" />
+
+// Small inline icon
+<ZipZyMark size={16} className="text-orange-500" />
+
+// Larger app icon
+<ZipZyMark size={48} className="text-orange-500" />
+```
+
+---
+
+### Splash & Loading Screen
+
+Center `ZipZyLogo` vertically for splash screens and initial load states.
+
+```tsx
+<div className="flex flex-col items-center justify-center min-h-screen gap-4">
+  <ZipZyLogo size={72} className="text-orange-500" />
+  <p className="text-sm text-gray-400 animate-pulse">Loading...</p>
+</div>
+```
+
+---
+
+### Dark Backgrounds
+
+All standalone icons use `currentColor` — switching to dark themes requires only a color class change.
+
+```tsx
+// Dark sidebar / panel
+<aside className="bg-gray-950 p-4">
+  <ZipZyLogoHorizontal className="h-7 text-white" />
+</aside>
+
+// Colored brand on dark
+<header className="bg-gray-900">
+  <ZipZyLogoHorizontal className="h-8 text-orange-400" />
+</header>
+
+// Collapsed sidebar (mark only)
+<aside className="w-16 bg-gray-950 flex flex-col items-center pt-4">
+  <ZipZyMark size={28} className="text-orange-400" />
+</aside>
+```
+
+---
+
+### Product Pages (HRMS)
+
+`ZipZyHrms` has three independent color slots: logomark, "ZipZy" text, and "HRMS" accent text.
 
-Product icons like ZipZyHrms support independent color control:
 ```tsx
 import { ZipZyHrms } from "zipzy-icons";
 
-export default function App() {
-  return (
-    <ZipZyHrms
-      size={140}
-      primaryColor="#0DBEFF"   // logo mark
-      secondaryColor="#000000" // ZipZy text
-      accentColor="#0DBEFF"    // HRMS text
-    />
-  );
-}
+// Hero / landing page — light
+<ZipZyHrms
+  size={140}
+  primaryColor="#0DBEFF"   // logomark
+  secondaryColor="#000000" // "ZipZy" text
+  accentColor="#0DBEFF"    // "HRMS" text
+/>
+
+// Login screen header — dark theme
+<ZipZyHrms
+  size={120}
+  primaryColor="#0DBEFF"
+  secondaryColor="#ffffff"
+  accentColor="#0DBEFF"
+/>
+
+// Compact — product card
+<ZipZyHrms
+  size={64}
+  primaryColor="#0DBEFF"
+  secondaryColor="#374151"
+  accentColor="#0DBEFF"
+/>
 ```
-Product icons like ZipZyDashboard support independent color control:
+
+---
+
+### Product Pages (Dashboard)
+
+`ZipZyDashboard` takes two colors: the logomark and the combined wordmark.
+
 ```tsx
-import { ZipZyDashboard } from "zipzy-icons";
+import { ZipZyDashboard, ZipZyDashboardIcon } from "zipzy-icons";
+
+// Branded login header
+<ZipZyDashboard
+  size={140}
+  primaryColor="#000000"
+  secondaryColor="#000000"
+/>
+
+// Indigo-themed dashboard header
+<ZipZyDashboard
+  size={100}
+  primaryColor="#6366f1"
+  secondaryColor="#111827"
+/>
+
+// Icon-only (nav item, button, tab)
+<ZipZyDashboardIcon size={20} className="text-indigo-500" />
+
+// Icon on active nav item (white on colored bg)
+<ZipZyDashboardIcon size={20} className="text-white" />
+```
 
-export default function App() {
-  return (
-    <ZipZyDashboard
-      size={140}
-      primaryColor="#000000"   // logo mark
-      secondaryColor="#000000" // ZipZy Dashboard text
-      
-    />
-  );
-}
+---
+
+### Product Pages (Payments)
+
+```tsx
+import { ZipZyPayments } from "zipzy-icons";
+
+// Payments landing hero
+<ZipZyPayments
+  size={140}
+  primaryColor="#10b981"
+  secondaryColor="#000000"
+/>
+
+// Compact card
+<ZipZyPayments
+  size={64}
+  primaryColor="#10b981"
+  secondaryColor="#374151"
+/>
+```
+
+---
+
+### Product Switcher Grid
+
+Display all ZipZy products at a consistent size for a unified product-picker UI.
+
+```tsx
+import { ZipZyHrms, ZipZyPayments, ZipZyDashboard } from "zipzy-icons";
+
+<div className="grid grid-cols-2 gap-4 p-4">
+  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
+    <ZipZyHrms size={80} primaryColor="#0DBEFF" secondaryColor="#000" accentColor="#0DBEFF" />
+    <span className="text-xs text-gray-500">HR Management</span>
+  </div>
+
+  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
+    <ZipZyPayments size={80} primaryColor="#10b981" secondaryColor="#000" />
+    <span className="text-xs text-gray-500">Payments</span>
+  </div>
+
+  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
+    <ZipZyDashboard size={80} primaryColor="#6366f1" secondaryColor="#000" />
+    <span className="text-xs text-gray-500">Dashboard</span>
+  </div>
+</div>
+```
+
+---
+
+### Sidebar Nav Items
+
+Use `ZipZyDashboardIcon` (currentColor) in navigation lists — it follows your active/inactive color logic automatically.
+
+```tsx
+const navItems = [
+  { label: "Dashboard", icon: ZipZyDashboardIcon, href: "/dashboard" },
+  // ...
+];
+
+<nav>
+  {navItems.map(({ label, icon: Icon, href }) => (
+    <a
+      key={href}
+      href={href}
+      className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors
+        ${isActive(href)
+          ? "bg-indigo-600 text-white"
+          : "text-gray-600 hover:bg-gray-100"
+        }`}
+    >
+      <Icon size={18} />
+      <span className="text-sm font-medium">{label}</span>
+    </a>
+  ))}
+</nav>
 ```
-Product icons like ZipZyDashboardIcon:
+
+---
+
+### Tab Bars
+
 ```tsx
 import { ZipZyDashboardIcon } from "zipzy-icons";
 
-export default function App() {
-  return (
-    <ZipZyDashboardIcon
-      size={140}
-      className="text-white"
-    />
-  );
-}
+<div className="flex border-b">
+  <button
+    className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors
+      ${active === "dashboard"
+        ? "border-indigo-600 text-indigo-600"
+        : "border-transparent text-gray-500 hover:text-gray-700"
+      }`}
+    onClick={() => setActive("dashboard")}
+  >
+    <ZipZyDashboardIcon size={16} />
+    Dashboard
+  </button>
+</div>
+```
+
+---
+
+### Email Templates
+
+For HTML emails, inline the SVG directly — React components don't work in email clients.
+
+```html
+<!-- Paste the rendered SVG output inline in your email template -->
+<table>
+  <tr>
+    <td style="padding: 24px;">
+      <!-- Export ZipZyLogoHorizontal to SVG string and paste here -->
+      <svg width="120" height="32" viewBox="0 0 120 32" ...>
+        <!-- SVG path data -->
+      </svg>
+    </td>
+  </tr>
+</table>
 ```
-Product icons like ZipZyHrms support independent color control:
+
+> **Tip:** Use `ReactDOMServer.renderToStaticMarkup(<ZipZyLogoHorizontal />)` to get the raw SVG string for email use.
+
+---
+
+## Multi-color Product Icons
+
+Product icons support per-element color control. This allows the same icon to adapt to light, dark, and branded themes without separate assets.
+
 ```tsx
 import { ZipZyHrms } from "zipzy-icons";
 
-export default function App() {
-  return (
-    <ZipZyHrms
-      size={140}
-      primaryColor="#0DBEFF"   // logo mark
-      secondaryColor="#000000" // ZipZy text
-      accentColor="#0DBEFF"    // HRMS text
-    />
-  );
-}
+// Three slots: mark · wordmark · product accent
+<ZipZyHrms
+  size={140}
+  primaryColor="#0DBEFF"   // logomark / mark background
+  secondaryColor="#000000" // "ZipZy" wordmark text
+  accentColor="#0DBEFF"    // "HRMS" product text
+/>
 ```
 
-### Props
+```tsx
+import { ZipZyDashboard } from "zipzy-icons";
+
+// Two slots: mark · wordmark
+<ZipZyDashboard
+  size={140}
+  primaryColor="#000000"   // logomark
+  secondaryColor="#000000" // "ZipZy Dashboard" text
+/>
+```
 
-| Prop        | Type                | Description                  |
-| ----------- | ------------------- | ---------------------------- |
-| `size`      | number | string     | Controls width (auto height) |
-| `className` | string              | Tailwind / CSS classes       |
-| `style`     | React.CSSProperties | Inline styles                |
-| `...props`  | SVGProps            | All standard SVG attributes  |
+```tsx
+import { ZipZyDashboardIcon } from "zipzy-icons";
+
+// No color props — inherits from CSS `color`
+<ZipZyDashboardIcon
+  size={140}
+  className="text-white"
+/>
+```
 
 ---
 
-## 🧩 Available Icons
+## Props Reference
 
-* `ZipZyLogo` → Full logo (mark + text)
-* `ZipZyMark` → Logomark only
+### All icons
 
-### Products
-- `ZipZyHrms` → HRMS product icon
-- `ZipZyPayments` → ZipZy Payments icon
-- `ZipZyDashboard` → ZipZy Dashboard logo
-- `ZipZyDashboardIcon` → Dashboard product icon
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number \| string` | — | Sets width; height scales automatically |
+| `className` | `string` | — | Tailwind or CSS class string |
+| `style` | `React.CSSProperties` | — | Inline style object |
+| `...props` | `SVGProps<SVGSVGElement>` | — | All standard SVG attributes |
+
+### Multi-color icons only (`ZipZyHrms`, `ZipZyDashboard`, `ZipZyPayments`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `primaryColor` | `string` | Logomark color (hex recommended) |
+| `secondaryColor` | `string` | "ZipZy" wordmark text color |
+| `accentColor` | `string` | Product label text color (HRMS only) |
 
 ---
 
-## 📐 Design Notes
+## Sizing Guide
 
-* Uses `currentColor` → inherits text color
-* Fully responsive
-* Works with Tailwind, CSS, and inline styles
-* Optimized for modern React apps
+| Use case | Recommended size |
+|----------|-----------------|
+| Favicon / breadcrumb | `size={16}` or `className="h-4"` |
+| Inline icon (button, tab) | `size={18}` – `size={20}` |
+| Navbar / sidebar logo | `size={24}` or `className="h-8"` |
+| Product switcher tile | `size={48}` – `size={80}` |
+| Login / auth screen header | `size={80}` – `size={120}` |
+| Splash / loading screen | `size={64}` – `size={80}` |
+| Landing page hero | `size={100}` – `size={140}` |
 
 ---
 
-## ⚙️ Requirements
+## TypeScript
+
+All components are fully typed. Import types directly if needed:
 
-* React 18+
+```ts
+import type { ZipZyIconProps, ZipZyProductIconProps } from "zipzy-icons";
+```
 
 ---
 
-## 📄 License
+## Design Notes
 
-MIT © ZipZy
+- **`currentColor`** — standalone brand icons (`ZipZyMark`, `ZipZyLogo`, `ZipZyLogoHorizontal`, `ZipZyDashboardIcon`) inherit the CSS `color` property, making them trivial to theme with Tailwind or CSS variables.
+- **Responsive** — all icons scale cleanly at any size. Use `size` for fixed dimensions or `className="h-X"` for fluid scaling.
+- **Tailwind compatible** — works with Tailwind CSS v3 and v4.
+- **CSS-in-JS compatible** — pass any valid `React.CSSProperties` via `style`.
+- **No external dependencies** — pure SVG wrapped in React. Zero runtime overhead.
+- **Tree-shakeable** — import only the icons you use; unused icons are excluded from your bundle.
 
 ---
 
-## 💡 Why ZipZy Icons?
+## Requirements
 
-* Simple and lightweight
-* Fully customizable
-* Designed for real-world UI usage
-* Built with TypeScript
+- React 18+
+- Node.js 16+
 
 ---
 
-## 🚧 Roadmap
+## Roadmap
 
-* More icons
-* Icon variants (outlined / filled)
-* Auto-generated SVG pipeline
+- [ ] More brand and UI icons
+- [ ] Outlined / filled variants
+- [ ] Auto-generated SVG pipeline from Figma
+- [ ] Next.js Image-compatible exports
+- [ ] Vue 3 support
 
 ---
+
+## Keywords
+
+`zipzy` · `zipzy-icons` · `react icons` · `svg icons` · `logo component` · `hrms icons` · `dashboard icons` · `payments icons` · `typescript icons` · `tailwind icons` · `react svg` · `icon library` · `zipzy hrms` · `zipzy dashboard` · `zipzy payments`
+
+---
+
+## License
+
+MIT © [ZipZy](https://zipzy.in)
+
+---
+
+## Links
+
+- [npm package](https://www.npmjs.com/package/zipzy-icons)
+- [ZipZy website](https://zipzy.in)

package/dist/index.d.mts

@@ -5,6 +5,11 @@ type ZipZyLogoProps = React.SVGProps<SVGSVGElement> & {
 };
 declare const ZipZyLogo: React.ForwardRefExoticComponent<Omit<ZipZyLogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
+type ZipZyLogoHorizontalProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+declare const ZipZyLogoHorizontal: React.ForwardRefExoticComponent<Omit<ZipZyLogoHorizontalProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
 type ZipZyMarkProps = React.SVGProps<SVGSVGElement> & {
     size?: number | string;
 };
@@ -38,4 +43,4 @@ type ZipZyDashboardIconProps = React.SVGProps<SVGSVGElement> & {
 };
 declare const ZipZyDashboardIcon: React.ForwardRefExoticComponent<Omit<ZipZyDashboardIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
-export { ZipZyDashboard, ZipZyDashboardIcon, ZipZyHrms, ZipZyLogo, ZipZyMark, ZipZyPayments };
+export { ZipZyDashboard, ZipZyDashboardIcon, ZipZyHrms, ZipZyLogo, ZipZyLogoHorizontal, ZipZyMark, ZipZyPayments };

package/dist/index.d.ts

@@ -5,6 +5,11 @@ type ZipZyLogoProps = React.SVGProps<SVGSVGElement> & {
 };
 declare const ZipZyLogo: React.ForwardRefExoticComponent<Omit<ZipZyLogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
+type ZipZyLogoHorizontalProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+declare const ZipZyLogoHorizontal: React.ForwardRefExoticComponent<Omit<ZipZyLogoHorizontalProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
 type ZipZyMarkProps = React.SVGProps<SVGSVGElement> & {
     size?: number | string;
 };
@@ -38,4 +43,4 @@ type ZipZyDashboardIconProps = React.SVGProps<SVGSVGElement> & {
 };
 declare const ZipZyDashboardIcon: React.ForwardRefExoticComponent<Omit<ZipZyDashboardIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
-export { ZipZyDashboard, ZipZyDashboardIcon, ZipZyHrms, ZipZyLogo, ZipZyMark, ZipZyPayments };
+export { ZipZyDashboard, ZipZyDashboardIcon, ZipZyHrms, ZipZyLogo, ZipZyLogoHorizontal, ZipZyMark, ZipZyPayments };