@zendir/ui 0.1.0

package/dist/react/core/AppBar.d.ts

@@ -0,0 +1,71 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeVariant, ThemeMode } from '../theme';
+
+export interface AppBarBranding {
+    /** Logo image URL (takes precedence over text) */
+    logoUrl?: string;
+    /** Logo as React node (takes precedence over logoUrl) */
+    logo?: ReactNode;
+    /** Logo alt text for accessibility */
+    logoAlt?: string;
+    /** Logo height in pixels (default: 28) */
+    logoHeight?: number;
+    /** Link URL when clicking on branding */
+    href?: string;
+}
+export interface AppBarProps {
+    /** Application name */
+    appName?: string;
+    /** Application domain/organization (shown above app name) */
+    appDomain?: string;
+    /** Application version (shown smaller) */
+    appVersion?: string;
+    /** Logo/branding configuration */
+    branding?: AppBarBranding;
+    /** Show theme controls (mode toggle, theme selector, color picker) */
+    showThemeControls?: boolean;
+    /** Show compact mode toggle */
+    showCompactToggle?: boolean;
+    /** Show color picker (only visible for transparent themes) */
+    showColorPicker?: boolean;
+    /** Show theme variant selector */
+    showThemeSelector?: boolean;
+    /** Show only mode toggle (hide other theme controls) */
+    showModeOnly?: boolean;
+    /** Use compact dropdown for theme controls instead of buttons */
+    compactThemeControls?: boolean;
+    /** Default theme to apply if not already set */
+    defaultTheme?: ThemeVariant;
+    /** Default mode to apply if not already set */
+    defaultMode?: ThemeMode;
+    /** Default compact mode */
+    defaultCompactMode?: boolean;
+    /** Left slot content (after branding, or only content when showBranding is false) */
+    leftSlot?: ReactNode;
+    /** Center slot content */
+    centerSlot?: ReactNode;
+    /** Right slot content (before theme controls) */
+    rightSlot?: ReactNode;
+    /** Optional title shown above right slot (e.g. "Data" for metrics/refresh section) */
+    rightSectionTitle?: string;
+    /** Show branding block (app name, logo). Set false for control-only bars. */
+    showBranding?: boolean;
+    /** Let center slot grow to fill space and stay centered (e.g. simulation controls). */
+    centerGrow?: boolean;
+    /** Bar variant: default (52px) or dense (44px min height, tighter padding/gap). */
+    variant?: 'default' | 'dense';
+    /** Callback when theme changes */
+    onThemeChange?: (theme: ThemeVariant) => void;
+    /** Callback when mode changes */
+    onModeChange?: (mode: ThemeMode) => void;
+    /** Callback when compact mode changes */
+    onCompactModeChange?: (compact: boolean) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom height (default: 52) */
+    height?: number;
+    /** Sticky positioning */
+    sticky?: boolean;
+}
+export declare const AppBar: React.NamedExoticComponent<AppBarProps>;
+export default AppBar;