@platform-blocks/ui 0.1.1

package/lib/components/AppShell/context.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Breakpoint } from '../../core/responsive';
+import { AppShellConfig, LayoutStrategy } from './types';
+export interface AppShellContextValue {
+    /** Current height of header */
+    headerHeight: number;
+    /** Current width of navbar */
+    navbarWidth: number;
+    /** Current width of aside panel */
+    asideWidth: number;
+    /** Current height of footer */
+    footerHeight: number;
+    /** Current height of bottom navigation */
+    bottomNavHeight: number;
+    /** Whether navbar is collapsed */
+    isNavbarCollapsed: boolean;
+    /** Whether aside panel is collapsed */
+    isAsideCollapsed: boolean;
+    /** Whether we're on mobile device */
+    isMobile: boolean;
+    /** Current breakpoint */
+    breakpoint: Breakpoint;
+    /** Current layout strategy */
+    layout: LayoutStrategy;
+    /** Full configuration object */
+    config: AppShellConfig;
+}
+declare const AppShellContext: React.Context<AppShellContextValue | undefined>;
+export declare const useAppShell: () => AppShellContextValue;
+export declare const useAppShellLayout: (config: AppShellConfig, layout: LayoutStrategy, navbarOpen?: boolean, asideOpen?: boolean) => AppShellContextValue;
+export interface AppShellProviderProps {
+    value: AppShellContextValue;
+    children: React.ReactNode;
+}
+export declare const AppShellProvider: React.FC<AppShellProviderProps>;
+export declare const getAutoLayout: (breakpoint: Breakpoint) => LayoutStrategy;
+export declare const getMainContentOffset: (context: AppShellContextValue) => {
+    position: "absolute";
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+export { AppShellContext };

package/lib/components/AppShell/defaults.d.ts

@@ -0,0 +1,6 @@
+import type { HeaderConfig, NavbarConfig, AsideConfig, FooterConfig, BottomNavConfig } from './types';
+export declare const DEFAULT_HEADER: HeaderConfig;
+export declare const DEFAULT_NAVBAR: NavbarConfig;
+export declare const DEFAULT_ASIDE: AsideConfig;
+export declare const DEFAULT_FOOTER: FooterConfig;
+export declare const DEFAULT_BOTTOM_NAV: BottomNavConfig;

package/lib/components/AppShell/hooks/useBreakpoint.d.ts

@@ -0,0 +1,9 @@
+import type { Breakpoint } from '../types';
+export declare const BREAKPOINT_VALUES: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+};
+export declare const useBreakpoint: () => Breakpoint;

package/lib/components/AppShell/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,2 @@
+import type { ResponsiveSize, Breakpoint } from '../types';
+export declare const resolveResponsiveValue: (value: ResponsiveSize, breakpoint: Breakpoint) => number;

package/lib/components/AppShell/index.d.ts

@@ -0,0 +1,12 @@
+export { AppShell, useAppShell, useAppShellApi, useAppShellLayout, AppShellHeader, AppShellNavbar, AppShellAside, AppShellFooter, AppShellBottomNav, AppShellMain, AppShellSection } from './AppShell';
+export { MobileMenu } from './MobileMenu';
+export { BottomAppBar } from './BottomAppBar';
+export { StatusBarManager } from './StatusBarManager';
+export { useBreakpoint } from './hooks/useBreakpoint';
+export { useNavbarHover } from './AppShell';
+export { resolveResponsiveValue } from './hooks/useResponsiveValue';
+export { defineAppLayout, AppLayoutProvider, AppLayoutRenderer, useAppLayoutContext, } from './app-layout';
+export type { AppLayoutBlueprint, AppLayoutRuntimeOverrides, AppLayoutRuntimeContext, LayoutEntry, LayoutComponentEntry, LayoutNavbarConfig, LayoutAsideConfig, LayoutFooterConfig, LayoutBottomNavConfig, LayoutMainConfig, LayoutOptions, LayoutSection, } from './app-layout';
+export { DEFAULT_HEADER, DEFAULT_NAVBAR, DEFAULT_ASIDE, DEFAULT_FOOTER, DEFAULT_BOTTOM_NAV } from './defaults';
+export { APP_SHELL_META } from './meta.schema';
+export type { AppShellProps, LayoutType, ResponsiveSize, Breakpoint, HeaderConfig, NavbarConfig, AsideConfig, FooterConfig, BottomNavConfig, AppShellBottomNavProps, BottomAppBarItem } from './types';

package/lib/components/AppShell/meta.schema.d.ts

@@ -0,0 +1,14 @@
+export interface AppShellMetaField {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    default?: any;
+    enum?: string[];
+}
+export interface AppShellMetaSection {
+    name: string;
+    description?: string;
+    fields: AppShellMetaField[];
+}
+export declare const APP_SHELL_META: AppShellMetaSection[];

package/lib/components/AppShell/types.d.ts

@@ -0,0 +1,228 @@
+import React from 'react';
+import { SpacingProps } from '../../core/utils';
+export type ResponsiveSize = number | string | {
+    base?: number | string;
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+    xl?: number | string;
+};
+export type Breakpoint = 'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface HeaderConfig {
+    height: ResponsiveSize;
+    collapsed?: boolean;
+    offset?: boolean;
+    zIndex?: number;
+}
+export interface NavbarConfig {
+    width: ResponsiveSize;
+    breakpoint: Breakpoint;
+    collapsed?: {
+        mobile?: boolean;
+        desktop?: boolean;
+    };
+    zIndex?: number;
+    collapsedWidth?: number;
+    expandOnHover?: boolean;
+    startCollapsedDesktop?: boolean;
+}
+export interface AsideConfig {
+    width: ResponsiveSize;
+    breakpoint: Breakpoint;
+    collapsed?: {
+        mobile?: boolean;
+        desktop?: boolean;
+    };
+    zIndex?: number;
+}
+export interface FooterConfig {
+    height: ResponsiveSize;
+    collapsed?: boolean;
+    offset?: boolean;
+    zIndex?: number;
+}
+export interface BottomNavConfig {
+    height: ResponsiveSize;
+    showOnlyMobile?: boolean;
+    collapsed?: boolean;
+    zIndex?: number;
+}
+export interface LayoutVisibilityConfig {
+    header?: boolean;
+    navbar?: boolean;
+    aside?: boolean;
+    footer?: boolean;
+    bottomNav?: boolean;
+}
+export interface MobileMenuConfig {
+    type?: 'modal' | 'drawer' | 'fullscreen';
+    animationType?: 'slide' | 'fade' | 'none';
+    showBackdrop?: boolean;
+    closeOnOutsidePress?: boolean;
+}
+export interface StatusBarConfig {
+    style?: 'auto' | 'light' | 'dark';
+    backgroundColor?: string;
+    translucent?: boolean;
+    hidden?: boolean;
+}
+export type LayoutType = 'default' | 'alt' | 'mobile-bottom-nav' | 'mobile-tabs';
+export type LayoutStrategy = 'desktop-default' | 'desktop-alt' | 'mobile-bottom-nav' | 'adaptive';
+export interface AppShellProps extends SpacingProps {
+    layout?: 'default' | 'alt';
+    header?: HeaderConfig;
+    navbar?: NavbarConfig;
+    aside?: AsideConfig;
+    footer?: FooterConfig;
+    bottomNav?: BottomNavConfig;
+    showHeader?: boolean;
+    /** Toggle rendering of individual autoLayout sections */
+    layoutSections?: LayoutVisibilityConfig;
+    /** Enable AppShell auto-composition. When true, AppShell will render its own Header/Navbar/Main/Footer/BottomBar using the provided content props instead of relying on children. */
+    autoLayout?: boolean;
+    /** Content to render inside AppShell.Header when autoLayout is enabled */
+    headerContent?: React.ReactNode | (() => React.ReactNode);
+    /** Content to render inside AppShell.Navbar when autoLayout is enabled */
+    navbarContent?: React.ReactNode | (() => React.ReactNode);
+    /** Content to render inside AppShell.Aside when autoLayout is enabled */
+    asideContent?: React.ReactNode | (() => React.ReactNode);
+    /** Content to render inside AppShell.Footer when autoLayout is enabled */
+    footerContent?: React.ReactNode | (() => React.ReactNode);
+    /** Items for a mobile bottom navigation bar when autoLayout is enabled */
+    bottomNavItems?: BottomAppBarItem[];
+    /** Additional props forwarded to BottomAppBar in autoLayout mode (items overridden by bottomNavItems) */
+    bottomNavProps?: Partial<AppShellBottomNavProps>;
+    mobileMenu?: MobileMenuConfig;
+    statusBar?: StatusBarConfig;
+    padding?: ResponsiveSize;
+    withBorder?: boolean;
+    zIndex?: number;
+    transitionDuration?: number;
+    transitionTimingFunction?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+    backgroundColor?: string;
+    withSafeArea?: boolean;
+    style?: any;
+    testID?: string;
+    /** Maximum width for main content area to prevent stretching on wide screens */
+    maxContentWidth?: number | string;
+    /** Center content when maxContentWidth is set */
+    centerContent?: boolean;
+    /** Optional table of contents rendered to the right of the main content */
+    tableOfContents?: React.ReactNode;
+    /** Hide the table of contents automatically on mobile breakpoints */
+    hideTableOfContentsOnMobile?: boolean;
+    /** Custom width for the table of contents column */
+    tableOfContentsWidth?: number | string;
+    /** Toggle border between content and table of contents */
+    tableOfContentsWithBorder?: boolean;
+}
+export interface AppShellContextValue {
+    headerHeight: number | string;
+    navbarWidth: number | string;
+    fullNavbarWidth: number | string;
+    navbarCollapsedRailWidth: number | string;
+    navbarExpandOnHover: boolean;
+    asideWidth: number | string;
+    footerHeight: number | string;
+    bottomNavHeight: number | string;
+    isNavbarCollapsed: boolean;
+    isNavbarRail: boolean;
+    isAsideCollapsed: boolean;
+    isMobile: boolean;
+    breakpoint: Breakpoint;
+    openNavbar: () => void;
+    closeNavbar: () => void;
+    toggleNavbar: () => void;
+    navbarOpen: boolean;
+    transitionDuration: number;
+}
+export interface AppShellConfig {
+    header?: HeaderConfig;
+    navbar?: NavbarConfig;
+    aside?: AsideConfig;
+    footer?: FooterConfig;
+    bottomNav?: BottomNavConfig;
+    showHeader?: boolean;
+    layoutSections?: LayoutVisibilityConfig;
+}
+export interface AppShellHeaderProps {
+    children: React.ReactNode;
+    withBorder?: boolean;
+    zIndex?: number;
+    style?: any;
+}
+export interface AppShellNavbarProps {
+    children: React.ReactNode;
+    withBorder?: boolean;
+    zIndex?: number;
+    style?: any;
+    drawerMode?: boolean;
+}
+export interface AppShellAsideProps {
+    children: React.ReactNode;
+    withBorder?: boolean;
+    zIndex?: number;
+    style?: any;
+}
+export interface AppShellFooterProps {
+    children: React.ReactNode;
+    withBorder?: boolean;
+    zIndex?: number;
+    style?: any;
+}
+export interface BottomAppBarItem {
+    key: string;
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    badgeCount?: number;
+    onPress?: () => void;
+}
+export interface AppShellBottomNavProps {
+    /** Provide custom children (legacy). If `items` provided, children are ignored. */
+    children?: React.ReactNode;
+    /** Structured items definition for standard navigation bar */
+    items?: BottomAppBarItem[];
+    /** Currently active item key */
+    activeKey?: string;
+    /** Callback when an item is pressed (fires after per-item onPress) */
+    onItemPress?: (key: string) => void;
+    /** Show labels under icons (default true). If false, shows tooltip-like behavior (future) */
+    showLabels?: boolean;
+    /** Visual variant */
+    variant?: 'solid' | 'surface' | 'elevated' | 'translucent';
+    /** Elevation shadow level (only for elevated variant) */
+    elevation?: number;
+    /** Optional floating action button rendered centered & elevated */
+    fab?: React.ReactNode;
+    withBorder?: boolean;
+    zIndex?: number;
+    style?: any;
+}
+export interface AppShellMainProps {
+    children: React.ReactNode;
+    style?: any;
+    id?: string;
+    role?: string;
+    /** Maximum width for main content area to prevent stretching on wide screens */
+    maxWidth?: number | string;
+    /** Center content when maxWidth is set */
+    centerContent?: boolean;
+    /** Table of contents content to show in right sidebar */
+    tableOfContents?: React.ReactNode;
+    /** Hide table of contents on mobile */
+    hideTocOnMobile?: boolean;
+    /** Width of the table of contents sidebar */
+    tocWidth?: number | string;
+    /** Add border to table of contents */
+    tocWithBorder?: boolean;
+}
+export interface AppShellSectionProps {
+    children: React.ReactNode;
+    grow?: boolean;
+    withScrollArea?: boolean;
+    style?: any;
+}

package/lib/components/AppStoreBadge/AppStoreBadge.d.ts

@@ -0,0 +1,5 @@
+import type { AppStoreBadgeProps } from './types';
+export declare const AppStoreBadge: import("../../core/factory").PlatformBlocksComponent<{
+    props: AppStoreBadgeProps;
+    ref: any;
+}>;

package/lib/components/AppStoreBadge/ConvenienceComponents.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { AppStoreBadgeProps } from './types';
+type ConvenienceProps = Omit<AppStoreBadgeProps, 'brand' | 'primaryText' | 'secondaryText'>;
+/**
+ * App Store badge for iOS apps
+ */
+export declare const AppStoreDownloadBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Samsung Galaxy Store badge
+ */
+export declare const GalaxyStoreDownloadBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Google Play badge for Android apps
+ */
+export declare const GooglePlayDownloadBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Huawei AppGallery badge
+ */
+export declare const HuaweiAppGalleryBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Amazon Appstore badge
+ */
+export declare const AmazonAppstoreBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Microsoft Store badge
+ */
+export declare const MicrosoftStoreDownloadBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Spotify badge for music/podcast apps
+ */
+export declare const SpotifyListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Apple Podcasts badge
+ */
+export declare const ApplePodcastsListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * YouTube badge
+ */
+export declare const YouTubeWatchBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * YouTube Music badge
+ */
+export declare const YouTubeMusicListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Apple Music badge
+ */
+export declare const AppleMusicListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Amazon Music badge
+ */
+export declare const AmazonMusicListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * SoundCloud badge
+ */
+export declare const SoundCloudListenBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Amazon shopping badge
+ */
+export declare const AmazonStoreBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Amazon Prime Video badge
+ */
+export declare const AmazonPrimeVideoBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Twitch badge
+ */
+export declare const TwitchWatchBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * GitHub badge for open source projects
+ */
+export declare const GitHubViewBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Discord badge for community/chat apps
+ */
+export declare const DiscordJoinBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Reddit badge
+ */
+export declare const RedditJoinBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * TikTok badge
+ */
+export declare const TikTokWatchBadge: (props: ConvenienceProps) => React.JSX.Element;
+/**
+ * Chrome Web Store badge
+ */
+export declare const ChromeWebStoreBadge: (props: ConvenienceProps) => React.JSX.Element;
+export {};

package/lib/components/AppStoreBadge/examples/usage-examples.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function AppPromotionExample(): React.JSX.Element;
+export declare function LandingPageFooter(): React.JSX.Element;
+export declare function MusicArtistPromotion(): React.JSX.Element;

package/lib/components/AppStoreBadge/index.d.ts

@@ -0,0 +1,3 @@
+export { AppStoreBadge } from './AppStoreBadge';
+export type { AppStoreBadgeProps, AppStoreBadgeSize, SupportedLocale, BadgeConfig } from './types';
+export { AppStoreDownloadBadge, GalaxyStoreDownloadBadge, GooglePlayDownloadBadge, HuaweiAppGalleryBadge, AmazonAppstoreBadge, MicrosoftStoreDownloadBadge, SpotifyListenBadge, ApplePodcastsListenBadge, YouTubeWatchBadge, YouTubeMusicListenBadge, AppleMusicListenBadge, AmazonMusicListenBadge, SoundCloudListenBadge, AmazonStoreBadge, AmazonPrimeVideoBadge, TwitchWatchBadge, GitHubViewBadge, DiscordJoinBadge, RedditJoinBadge, TikTokWatchBadge, ChromeWebStoreBadge, } from './ConvenienceComponents';

package/lib/components/AppStoreBadge/types.d.ts

@@ -0,0 +1,36 @@
+import { PressableProps } from 'react-native';
+import type { BrandName } from '../BrandIcon';
+export type AppStoreBadgeSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SupportedLocale = 'en' | 'es' | 'fr' | 'de' | 'it' | 'pt' | 'ru' | 'ja' | 'ko' | 'zh';
+export interface AppStoreBadgeProps extends Omit<PressableProps, 'style' | 'children'> {
+    /** The brand/platform for the badge (uses BrandIcon) */
+    brand: BrandName | 'galaxy-store' | 'amazonAppstore' | 'applePodcasts' | 'amazonMusic' | 'chromeWebStore';
+    /** The primary text (e.g., "Download on the", "Listen on", "Watch on") */
+    primaryText: string;
+    /** The secondary text (e.g., "App Store", "Spotify", "Netflix") */
+    secondaryText: string;
+    /** Badge size */
+    size?: AppStoreBadgeSize;
+    /** Background color override */
+    backgroundColor?: string;
+    /** Text color override */
+    textColor?: string;
+    /** Border color override */
+    borderColor?: string;
+    /** Custom styles */
+    style?: any;
+    /** Press handler */
+    onPress?: () => void;
+    /** Whether badge is disabled */
+    disabled?: boolean;
+    /** Test ID for testing */
+    testID?: string;
+    /** Whether to use dark mode styling (auto-detected if not specified) */
+    darkMode?: boolean;
+}
+export interface BadgeConfig {
+    backgroundColor: string;
+    textColor: string;
+    borderColor?: string;
+    brandColor?: string;
+}

package/lib/components/AppStoreButton/AppStoreButton.d.ts

@@ -0,0 +1,5 @@
+import type { AppStoreButtonProps } from './types';
+export declare const AppStoreButton: import("../../core/factory").PlatformBlocksComponent<{
+    props: AppStoreButtonProps;
+    ref: any;
+}>;

package/lib/components/AppStoreButton/ConvenienceComponents.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { AppStoreButtonProps } from './types';
+export declare const GooglePlayButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;
+export declare const AppleAppStoreButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;
+export declare const MacAppStoreButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;
+export declare const MicrosoftStoreButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;
+export declare const AmazonAppstoreButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;
+export declare const FDroidButton: React.FC<Omit<AppStoreButtonProps, 'store'>>;

package/lib/components/AppStoreButton/index.d.ts

@@ -0,0 +1,3 @@
+export { AppStoreButton } from './AppStoreButton';
+export { GooglePlayButton, AppleAppStoreButton, MacAppStoreButton, MicrosoftStoreButton, AmazonAppstoreButton, FDroidButton } from './ConvenienceComponents';
+export type { AppStoreButtonProps, AppStoreType, AppStoreButtonSize, SupportedLocale, StoreConfig, SizeConfig } from './types';

package/lib/components/AppStoreButton/types.d.ts

@@ -0,0 +1,36 @@
+import { PressableProps } from 'react-native';
+export type AppStoreType = 'app-store' | 'google-play' | 'microsoft-store' | 'amazon-appstore' | 'mac-app-store' | 'f-droid';
+export type AppStoreButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SupportedLocale = 'en' | 'es' | 'fr' | 'de' | 'it' | 'pt' | 'ru' | 'ja' | 'ko' | 'zh';
+export interface AppStoreButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    /** The app store type */
+    store: AppStoreType;
+    /** Button size */
+    size?: AppStoreButtonSize;
+    /** Locale for button text */
+    locale?: SupportedLocale;
+    /** Custom styles */
+    style?: any;
+    /** Press handler */
+    onPress?: () => void;
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface StoreConfig {
+    backgroundColor: string;
+    textColor: string;
+    iconName: string;
+    primaryText: Record<SupportedLocale, string>;
+    secondaryText: Record<SupportedLocale, string>;
+}
+export interface SizeConfig {
+    height: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    iconSize: number;
+    primaryFontSize: number;
+    secondaryFontSize: number;
+    borderRadius: number;
+}

package/lib/components/AudioPlayer/AudioPlayer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AudioPlayerProps, AudioPlayerRef } from './types';
+export declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<AudioPlayerRef>>;

package/lib/components/AudioPlayer/AudioPlayerDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AudioPlayerDemo: React.FC;

package/lib/components/AudioPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export { AudioPlayer } from './AudioPlayer';
+export type { AudioPlayerProps, AudioPlayerRef, PlaybackState, AudioMetadata, ProgressData, AudioLoadData, AudioError, SpectrumOptions, AudioEffects, KeyboardShortcuts, GestureConfig, PlaylistItem, } from './types';