@sudobility/building_blocks 0.0.1

package/dist/components/topbar/app-topbar-with-wallet.d.ts

@@ -0,0 +1,117 @@
+import React, { type ReactNode, type ComponentType } from 'react';
+import { type AppTopBarProps } from './app-topbar';
+/**
+ * Wallet menu item for the connected wallet dropdown.
+ */
+export interface WalletMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon component */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Click handler */
+    onClick: () => void;
+    /** Whether this is a separator */
+    separator?: boolean;
+}
+/**
+ * Auth status enum matching @sudobility/types.
+ */
+export declare enum AuthStatus {
+    DISCONNECTED = "disconnected",
+    CONNECTED = "connected",
+    VERIFIED = "verified"
+}
+/**
+ * Chain type enum matching @sudobility/types.
+ */
+export declare enum ChainType {
+    EVM = "evm",
+    SOLANA = "solana"
+}
+/**
+ * Props for the WalletDropdownMenu component from @sudobility/web3-components.
+ */
+export interface WalletDropdownMenuProps {
+    walletAddress: string;
+    authStatus: AuthStatus | string;
+    chainType: ChainType | string | 'unknown';
+    menuItems: WalletMenuItem[];
+    avatar?: string;
+    displayName?: string;
+    statusLabels?: {
+        verified?: string;
+        connected?: string;
+        disconnected?: string;
+    };
+}
+export interface AppTopBarWithWalletProps extends Omit<AppTopBarProps, 'renderAccountSection'> {
+    /**
+     * WalletDropdownMenu component from @sudobility/web3-components.
+     * This is passed as a prop to avoid hard dependency on web3-components.
+     */
+    WalletDropdownMenuComponent?: ComponentType<WalletDropdownMenuProps>;
+    /** Whether wallet is connected */
+    isConnected: boolean;
+    /** Connected wallet address */
+    walletAddress?: string;
+    /** Authentication status */
+    authStatus?: AuthStatus | string;
+    /** Chain type (EVM, Solana, etc.) */
+    chainType?: ChainType | string | 'unknown';
+    /** Connect button click handler */
+    onConnect: () => void;
+    /** Disconnect handler */
+    onDisconnect: () => Promise<void>;
+    /** Custom menu items for wallet dropdown */
+    walletMenuItems?: WalletMenuItem[];
+    /** Connect button content (default: "Connect Wallet") */
+    connectButtonContent?: ReactNode;
+    /** Connect button className (supports gradient classes from @sudobility/design) */
+    connectButtonClassName?: string;
+    /** Use gradient styling for connect button */
+    useGradientButton?: boolean;
+    /** Optional user avatar */
+    avatar?: string;
+    /** Optional display name */
+    displayName?: string;
+    /** Custom status labels */
+    statusLabels?: {
+        verified?: string;
+        connected?: string;
+        disconnected?: string;
+    };
+}
+/**
+ * AppTopBarWithWallet - TopBar with wallet connection integration.
+ *
+ * This component wraps AppTopBar and provides wallet connection UI
+ * for the account section. Uses WalletDropdownMenu from @sudobility/web3-components
+ * when provided.
+ *
+ * @example
+ * ```tsx
+ * import { WalletDropdownMenu } from '@sudobility/web3-components';
+ *
+ * <AppTopBarWithWallet
+ *   logo={{ src: '/logo.png', appName: 'My App' }}
+ *   menuItems={[...]}
+ *   WalletDropdownMenuComponent={WalletDropdownMenu}
+ *   isConnected={isConnected}
+ *   walletAddress={walletAddress}
+ *   authStatus={authStatus}
+ *   chainType={chainType}
+ *   onConnect={() => navigate('/connect')}
+ *   onDisconnect={handleDisconnect}
+ *   walletMenuItems={[
+ *     { id: 'copy', label: 'Copy Address', icon: ClipboardIcon, onClick: handleCopy },
+ *     { id: 'disconnect', label: 'Disconnect', icon: LogoutIcon, onClick: handleDisconnect },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const AppTopBarWithWallet: React.FC<AppTopBarWithWalletProps>;
+export default AppTopBarWithWallet;

package/dist/components/topbar/app-topbar.d.ts

@@ -0,0 +1,50 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import { type LanguageSelectorProps } from './language-selector';
+import type { MenuItemConfig, LogoConfig, LanguageConfig, LinkComponentProps } from '../../types';
+export interface AppTopBarProps {
+    /** Logo configuration */
+    logo: LogoConfig;
+    /** Navigation menu items */
+    menuItems: MenuItemConfig[];
+    /** Available languages for selector (defaults to 16 built-in languages) */
+    languages?: LanguageConfig[];
+    /** Current language code */
+    currentLanguage?: string;
+    /** Language change handler */
+    onLanguageChange?: (languageCode: string) => void;
+    /** Hide language selector */
+    hideLanguageSelector?: boolean;
+    /** Language selector props override */
+    languageSelectorProps?: Partial<LanguageSelectorProps>;
+    /** Breakpoint to collapse navigation to hamburger menu */
+    collapseBelow?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Render prop for account/auth section (right side of topbar) */
+    renderAccountSection?: () => ReactNode;
+    /** Custom Link component for navigation (for react-router-dom, Next.js, etc.) */
+    LinkComponent?: ComponentType<LinkComponentProps>;
+    /** Optional sticky positioning */
+    sticky?: boolean;
+    /** Optional variant */
+    variant?: 'default' | 'app';
+    /** Mobile menu label for accessibility */
+    mobileMenuLabel?: string;
+    /** Custom className for topbar */
+    className?: string;
+    /** z-index level */
+    zIndex?: 'default' | 'highest' | 'high';
+    /** Aria label for navigation */
+    ariaLabel?: string;
+}
+/**
+ * AppTopBar - Base topbar component for Sudobility apps.
+ *
+ * Features:
+ * - Logo with app name on the left
+ * - Navigation menu items with icons
+ * - Language selector
+ * - Render prop for account/auth section
+ * - Responsive with hamburger menu on mobile
+ * - Dark mode support
+ */
+export declare const AppTopBar: React.FC<AppTopBarProps>;
+export default AppTopBar;

package/dist/components/topbar/index.d.ts

@@ -0,0 +1,4 @@
+export { AppTopBar, type AppTopBarProps } from './app-topbar';
+export { AppTopBarWithFirebaseAuth, type AppTopBarWithFirebaseAuthProps, type AuthMenuItem, type AuthActionProps, } from './app-topbar-with-firebase-auth';
+export { AppTopBarWithWallet, type AppTopBarWithWalletProps, type WalletMenuItem, type WalletDropdownMenuProps, AuthStatus, ChainType, } from './app-topbar-with-wallet';
+export { LanguageSelector, type LanguageSelectorProps, } from './language-selector';

package/dist/components/topbar/language-selector.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type LanguageConfig } from '../../constants/languages';
+export interface LanguageSelectorProps {
+    /** Available languages (defaults to 16 built-in languages) */
+    languages?: LanguageConfig[];
+    /** Current language code */
+    currentLanguage?: string;
+    /** Language change handler */
+    onLanguageChange?: (languageCode: string) => void;
+    /** Variant: 'compact' for topbar, 'full' for settings */
+    variant?: 'compact' | 'full';
+    /** Custom className */
+    className?: string;
+    /** Label text for full variant */
+    label?: string;
+    /** Helper text for full variant */
+    helperText?: string;
+}
+/**
+ * LanguageSelector component with dropdown for switching languages.
+ * Uses default 16 languages if none provided.
+ */
+export declare const LanguageSelector: React.FC<LanguageSelectorProps>;
+export default LanguageSelector;

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './languages';

package/dist/constants/languages.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageConfig {
+    code: string;
+    name: string;
+    flag: string;
+}
+/**
+ * Default set of 16 supported languages with their flags.
+ * Apps can override this list by passing their own languages prop.
+ */
+export declare const DEFAULT_LANGUAGES: LanguageConfig[];
+/**
+ * Languages that use right-to-left text direction.
+ */
+export declare const RTL_LANGUAGES: string[];
+/**
+ * Check if a language code is RTL.
+ */
+export declare function isRTL(languageCode: string): boolean;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export { cn } from './utils';