@ali-hajeh/purple-navbar 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# @ali-hajeh/purple-navbar
+
+A self-contained, composable navigation component with fixed purple-themed styles.
+
+## Installation
+
+```bash
+npm install @ali-hajeh/purple-navbar
+# or
+pnpm add @ali-hajeh/purple-navbar
+# or
+yarn add @ali-hajeh/purple-navbar
+```
+
+## Usage
+
+```tsx
+import { Navbar } from '@ali-hajeh/purple-navbar';
+import '@ali-hajeh/purple-navbar/styles.css';
+
+function App() {
+  return (
+    <Navbar
+      links={[
+        { 
+          label: 'Protocols', 
+          dropdown: [
+            { label: 'Omnivaults', onClick: () => navigate('/') },
+            { label: 'Agent', onClick: () => window.open('https://agent.noya.ai') },
+          ]
+        },
+        { label: 'Space Race', onClick: () => navigate('/space-race') },
+        { label: 'DeFi', comingSoon: true, tooltip: 'Coming soon' },
+        { 
+          label: 'More',
+          dropdown: [
+            { label: 'Docs', onClick: () => window.open('https://docs.noya.network') },
+            { label: 'Contact Us', onClick: () => navigate('/contact-us') },
+          ]
+        },
+      ]}
+      actionButton={{
+        label: isConnected ? shortenAddress(address) : 'Connect Wallet',
+        onClick: isConnected ? openAccountModal : openConnectModal,
+        variant: isConnected ? 'connected' : 'primary',
+      }}
+      leftSlot={<NotificationsComponent />}
+      onLogoClick={() => navigate('/')}
+    />
+  );
+}
+```
+
+## Props
+
+### Navbar
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `links` | `NavLinkItem[]` | Array of navigation links |
+| `actionButton` | `ActionButtonProps` | Optional CTA button configuration |
+| `leftSlot` | `ReactNode` | Content to render left of action button |
+| `rightSlot` | `ReactNode` | Content to render right of action button |
+| `onLogoClick` | `() => void` | Logo click handler |
+| `onMobileMenuOpen` | `() => void` | Mobile drawer open callback |
+| `mobileMenuOpen` | `boolean` | Controlled mode for drawer |
+| `onMobileMenuClose` | `() => void` | Drawer close callback |
+
+### NavLinkItem
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Link text |
+| `onClick` | `() => void` | Click handler |
+| `href` | `string` | Optional href for SEO |
+| `comingSoon` | `boolean` | Shows "Soon" badge and disables click |
+| `tooltip` | `string` | Tooltip text for coming soon items |
+| `dropdown` | `DropdownItem[]` | Nested dropdown items |
+
+### ActionButtonProps
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Button text |
+| `onClick` | `() => void` | Click handler |
+| `variant` | `'primary' \| 'connected'` | Button style variant |
+
+## Features
+
+- 🎨 Self-contained styles with unique `pn-` prefixed classes
+- 📱 Responsive with mobile drawer
+- ✨ Animated logo on hover
+- 🎯 Configurable action handlers
+- 🔌 Slot-based architecture for custom content
+- 📦 Zero external dependencies (only React)
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm build
+
+# Watch mode
+pnpm dev
+
+# Type check
+pnpm typecheck
+```
+
+## License
+
+MIT
+

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+import React from 'react';
+
+interface DropdownItem {
+    label: string;
+    onClick?: () => void;
+}
+interface NavLinkItem {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    comingSoon?: boolean;
+    tooltip?: string;
+    dropdown?: DropdownItem[];
+}
+interface ActionButtonProps {
+    label: string;
+    onClick?: () => void;
+    variant?: "primary" | "connected";
+}
+interface NavbarProps {
+    links: NavLinkItem[];
+    actionButton?: ActionButtonProps;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    onLogoClick?: () => void;
+    onMobileMenuOpen?: () => void;
+    mobileMenuOpen?: boolean;
+    onMobileMenuClose?: () => void;
+}
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    links: NavLinkItem[];
+    actionButton?: ActionButtonProps;
+    onLogoClick?: () => void;
+}
+
+declare const Navbar: React.FC<NavbarProps>;
+
+interface NavbarLogoProps {
+    onClick?: () => void;
+}
+declare const NavbarLogo: React.FC<NavbarLogoProps>;
+
+interface NavbarLinksProps {
+    links: NavLinkItem[];
+}
+declare const NavbarLinks: React.FC<NavbarLinksProps>;
+
+interface NavbarDropdownProps {
+    items: DropdownItem[];
+}
+declare const NavbarDropdown: React.FC<NavbarDropdownProps>;
+
+declare const NavbarActionButton: React.FC<ActionButtonProps>;
+
+interface NavbarMobileToggleProps {
+    onClick?: () => void;
+}
+declare const NavbarMobileToggle: React.FC<NavbarMobileToggleProps>;
+
+declare const NavbarDrawer: React.FC<DrawerProps>;
+
+interface ExpandingTextProps {
+    text: string;
+    onClick?: () => void;
+}
+declare const ExpandingText: React.FC<ExpandingTextProps>;
+
+type MobileOS = "Windows Phone" | "Android" | "iOS" | "unknown";
+declare const getMobileOperatingSystem: () => MobileOS;
+
+export { type ActionButtonProps, type DrawerProps, type DropdownItem, ExpandingText, type MobileOS, type NavLinkItem, Navbar, NavbarActionButton, NavbarDrawer, NavbarDropdown, NavbarLinks, NavbarLogo, NavbarMobileToggle, type NavbarProps, getMobileOperatingSystem };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+
+interface DropdownItem {
+    label: string;
+    onClick?: () => void;
+}
+interface NavLinkItem {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    comingSoon?: boolean;
+    tooltip?: string;
+    dropdown?: DropdownItem[];
+}
+interface ActionButtonProps {
+    label: string;
+    onClick?: () => void;
+    variant?: "primary" | "connected";
+}
+interface NavbarProps {
+    links: NavLinkItem[];
+    actionButton?: ActionButtonProps;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    onLogoClick?: () => void;
+    onMobileMenuOpen?: () => void;
+    mobileMenuOpen?: boolean;
+    onMobileMenuClose?: () => void;
+}
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    links: NavLinkItem[];
+    actionButton?: ActionButtonProps;
+    onLogoClick?: () => void;
+}
+
+declare const Navbar: React.FC<NavbarProps>;
+
+interface NavbarLogoProps {
+    onClick?: () => void;
+}
+declare const NavbarLogo: React.FC<NavbarLogoProps>;
+
+interface NavbarLinksProps {
+    links: NavLinkItem[];
+}
+declare const NavbarLinks: React.FC<NavbarLinksProps>;
+
+interface NavbarDropdownProps {
+    items: DropdownItem[];
+}
+declare const NavbarDropdown: React.FC<NavbarDropdownProps>;
+
+declare const NavbarActionButton: React.FC<ActionButtonProps>;
+
+interface NavbarMobileToggleProps {
+    onClick?: () => void;
+}
+declare const NavbarMobileToggle: React.FC<NavbarMobileToggleProps>;
+
+declare const NavbarDrawer: React.FC<DrawerProps>;
+
+interface ExpandingTextProps {
+    text: string;
+    onClick?: () => void;
+}
+declare const ExpandingText: React.FC<ExpandingTextProps>;
+
+type MobileOS = "Windows Phone" | "Android" | "iOS" | "unknown";
+declare const getMobileOperatingSystem: () => MobileOS;
+
+export { type ActionButtonProps, type DrawerProps, type DropdownItem, ExpandingText, type MobileOS, type NavLinkItem, Navbar, NavbarActionButton, NavbarDrawer, NavbarDropdown, NavbarLinks, NavbarLogo, NavbarMobileToggle, type NavbarProps, getMobileOperatingSystem };