@blinkdotnew/mobile-ui 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/index.d.mts

@@ -197,6 +197,130 @@ type BadgeProps = {
 };
 declare function Badge({ children, variant }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+declare const ICONS: {
+    readonly home: "⌂";
+    readonly search: "⌕";
+    readonly back: "‹";
+    readonly forward: "›";
+    readonly close: "✕";
+    readonly menu: "☰";
+    readonly more: "⋯";
+    readonly plus: "+";
+    readonly minus: "−";
+    readonly check: "✓";
+    readonly star: "★";
+    readonly starOutline: "☆";
+    readonly heart: "♥";
+    readonly heartOutline: "♡";
+    readonly share: "⤴";
+    readonly edit: "✎";
+    readonly trash: "⌫";
+    readonly copy: "⎘";
+    readonly chat: "💬";
+    readonly mail: "✉";
+    readonly bell: "🔔";
+    readonly bellOff: "🔕";
+    readonly send: "➤";
+    readonly play: "▶";
+    readonly pause: "⏸";
+    readonly camera: "📷";
+    readonly image: "🖼";
+    readonly info: "ℹ";
+    readonly warning: "⚠";
+    readonly error: "✕";
+    readonly success: "✓";
+    readonly loading: "⟳";
+    readonly user: "👤";
+    readonly users: "👥";
+    readonly settings: "⚙";
+    readonly lock: "🔒";
+    readonly unlock: "🔓";
+    readonly arrowUp: "↑";
+    readonly arrowDown: "↓";
+    readonly arrowLeft: "←";
+    readonly arrowRight: "→";
+    readonly chevronUp: "⌃";
+    readonly chevronDown: "⌄";
+    readonly chevronLeft: "‹";
+    readonly chevronRight: "›";
+};
+type IconName = keyof typeof ICONS;
+type IconProps = {
+    name: IconName;
+    size?: number;
+    color?: string;
+};
+declare function Icon({ name, size, color }: IconProps): react_jsx_runtime.JSX.Element;
+
+type AccordionItem = {
+    id: string;
+    title: string;
+    content: ReactNode;
+};
+type AccordionProps = {
+    items: AccordionItem[];
+    defaultOpen?: string;
+    allowMultiple?: boolean;
+};
+declare function Accordion({ items, defaultOpen, allowMultiple }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+type TabItem = {
+    id: string;
+    label: string;
+    content: ReactNode;
+};
+type TabsProps = {
+    tabs: TabItem[];
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    variant?: 'underline' | 'pill';
+};
+declare function Tabs({ tabs, activeTab, onTabChange, variant }: TabsProps): react_jsx_runtime.JSX.Element;
+
+type ToggleOption = {
+    id: string;
+    label: string;
+};
+type ToggleGroupProps = {
+    options: ToggleOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare function ToggleGroup({ options, value, onValueChange, size }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'default' | 'success' | 'error' | 'warning';
+type ToastData = {
+    id: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+};
+type ToastContextType = {
+    show: (message: string, variant?: ToastVariant, duration?: number) => void;
+};
+declare const toast: (message: string, variant?: ToastVariant, duration?: number) => void;
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextType;
+
+type FormFieldProps = {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    children: ReactNode;
+};
+declare function FormField({ label, error, helperText, required, children }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+type TooltipProps = {
+    content: string;
+    children: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+};
+declare function BlinkTooltip({ content, children, side }: TooltipProps): react_jsx_runtime.JSX.Element;
+
 type StepPageProps = {
     title: string;
     description?: string;
@@ -247,25 +371,53 @@ type KeyboardStickyFooterProps = {
 };
 declare function KeyboardStickyFooter({ children, offset }: KeyboardStickyFooterProps): react_jsx_runtime.JSX.Element;
 
+type SafeAreaProps = {
+    children: ReactNode;
+    edges?: ('top' | 'bottom' | 'left' | 'right')[];
+};
+declare function SafeArea({ children, edges }: SafeAreaProps): react_jsx_runtime.JSX.Element;
+
+type GridProps = {
+    children: ReactNode;
+    columns?: 2 | 3 | 4;
+    gap?: '$2' | '$3' | '$4';
+};
+declare function Grid({ children, columns, gap }: GridProps): react_jsx_runtime.JSX.Element;
+type ContainerProps = {
+    children: ReactNode;
+    maxWidth?: number;
+    centered?: boolean;
+};
+declare function Container({ children, maxWidth, centered }: ContainerProps): react_jsx_runtime.JSX.Element;
+
 type PlanOption = {
     id: string;
     name: string;
     price: string;
     period: string;
-    features: string[];
+    pricePerWeek?: string;
+    savings?: string;
     popular?: boolean;
+    trial?: string;
 };
 type PaywallScreenProps = {
     title?: string;
     subtitle?: string;
+    features?: string[];
     plans: PlanOption[];
     selectedPlan?: string;
     onSelectPlan?: (planId: string) => void;
     onContinue?: () => void;
+    onClose?: () => void;
     onRestore?: () => void;
+    onTerms?: () => void;
+    onPrivacy?: () => void;
     continueLabel?: string;
+    reassurance?: string;
+    hero?: ReactNode;
+    socialProof?: string;
 };
-declare function PaywallScreen({ title, subtitle, plans, selectedPlan, onSelectPlan, onContinue, onRestore, continueLabel, }: PaywallScreenProps): react_jsx_runtime.JSX.Element;
+declare function PaywallScreen({ title, subtitle, features, plans, selectedPlan, onSelectPlan, onContinue, onClose, onRestore, onTerms, onPrivacy, continueLabel, reassurance, hero, socialProof, }: PaywallScreenProps): react_jsx_runtime.JSX.Element;
 
 type OnboardingStep = {
     title: string;
@@ -338,4 +490,163 @@ type ProfileHeaderProps = {
 };
 declare function ProfileHeader({ name, subtitle, avatar, stats, actions }: ProfileHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { Badge, type BadgeProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkConfig, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkText, type BlinkTextProps, ChatBubble, type ChatBubbleProps, type ChatMessage, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, Image, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, PageContainer, PageMainContainer, PaywallScreen, type PaywallScreenProps, type PlanOption, Pressable, ProfileHeader, type ProfileHeaderProps, ScreenLayout, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, StepPageLayout, type StepPageProps, SubHeading, blinkConfig, dialogConfirm, showError };
+type AppHeaderVariant = 'simple' | 'back' | 'profile' | 'centered';
+type AppHeaderProps = {
+    title: string;
+    subtitle?: string;
+    variant?: AppHeaderVariant;
+    onBack?: () => void;
+    avatar?: string;
+    left?: ReactNode;
+    right?: ReactNode;
+    transparent?: boolean;
+    borderless?: boolean;
+};
+declare function AppHeader({ title, subtitle, variant, onBack, avatar, left, right, transparent, borderless, }: AppHeaderProps): react_jsx_runtime.JSX.Element;
+
+type BottomSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    children: ReactNode;
+    snapPoints?: number[];
+    dismissOnSnapToBottom?: boolean;
+    showHandle?: boolean;
+    showClose?: boolean;
+};
+declare function BottomSheet({ open, onOpenChange, title, children, snapPoints, dismissOnSnapToBottom, showHandle, showClose, }: BottomSheetProps): react_jsx_runtime.JSX.Element;
+
+type AuthProvider = {
+    id: string;
+    name: string;
+    icon?: ReactNode;
+};
+type LoginScreenProps = {
+    title?: string;
+    subtitle?: string;
+    logo?: ReactNode;
+    providers?: AuthProvider[];
+    onProviderPress?: (providerId: string) => void;
+    showEmailForm?: boolean;
+    onEmailSubmit?: (email: string, password: string) => void;
+    onForgotPassword?: () => void;
+    onCreateAccount?: () => void;
+    onTerms?: () => void;
+    onPrivacy?: () => void;
+    loading?: boolean;
+};
+declare function LoginScreen({ title, subtitle, logo, providers, onProviderPress, showEmailForm, onEmailSubmit, onForgotPassword, onCreateAccount, onTerms, onPrivacy, loading, }: LoginScreenProps): react_jsx_runtime.JSX.Element;
+
+type TabBarItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+};
+type TabBarProps = {
+    tabs: TabBarItem[];
+    activeTab: string;
+    onTabPress: (tabId: string) => void;
+    showLabels?: boolean;
+};
+declare function TabBar({ tabs, activeTab, onTabPress, showLabels }: TabBarProps): react_jsx_runtime.JSX.Element;
+
+type SearchBarProps = {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    onFilter?: () => void;
+    onCancel?: () => void;
+    autoFocus?: boolean;
+};
+declare function SearchBar({ value, onChangeText, placeholder, onFilter, onCancel, autoFocus }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+type FABProps = {
+    icon?: ReactNode;
+    label?: string;
+    onPress: () => void;
+    position?: 'bottom-right' | 'bottom-center' | 'bottom-left';
+    size?: 'sm' | 'md' | 'lg';
+};
+declare function FloatingActionButton({ icon, label, onPress, position, size }: FABProps): react_jsx_runtime.JSX.Element;
+
+type ActionSheetItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    destructive?: boolean;
+};
+type ActionSheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    items: ActionSheetItem[];
+    onSelect: (itemId: string) => void;
+    cancelLabel?: string;
+};
+declare function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel, }: ActionSheetProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonProps = {
+    width?: number | string;
+    height?: number;
+    borderRadius?: number;
+    variant?: 'text' | 'circular' | 'rectangular';
+};
+declare function Skeleton({ width, height, borderRadius, variant }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type NotificationBannerProps = {
+    title: string;
+    message?: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    onPress?: () => void;
+    onDismiss?: () => void;
+    icon?: ReactNode;
+};
+declare function NotificationBanner({ title, message, variant, onPress, onDismiss, icon, }: NotificationBannerProps): react_jsx_runtime.JSX.Element;
+
+type ProgressStepsProps = {
+    steps: string[];
+    currentStep: number;
+    variant?: 'dots' | 'bar' | 'numbered';
+};
+declare function ProgressSteps({ steps, currentStep, variant }: ProgressStepsProps): react_jsx_runtime.JSX.Element;
+
+type SwipeAction = {
+    id: string;
+    label: string;
+    color: string;
+    onPress: () => void;
+};
+type SwipeableRowProps = {
+    children: ReactNode;
+    leftActions?: SwipeAction[];
+    rightActions?: SwipeAction[];
+};
+declare function SwipeableRow({ children, leftActions, rightActions }: SwipeableRowProps): react_jsx_runtime.JSX.Element;
+
+type MediaCardProps = {
+    image: string;
+    title: string;
+    subtitle?: string;
+    overlay?: 'gradient' | 'dark' | 'none';
+    aspectRatio?: number;
+    onPress?: () => void;
+    badge?: string;
+};
+declare function MediaCard({ image, title, subtitle, overlay, aspectRatio, onPress, badge, }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+type CarouselProps = {
+    children: ReactNode;
+    gap?: '$2' | '$3' | '$4';
+    snapToInterval?: number;
+    showIndicators?: boolean;
+};
+declare function Carousel({ children, gap, snapToInterval, showIndicators }: CarouselProps): react_jsx_runtime.JSX.Element;
+
+type PullToRefreshProps = {
+    children: ReactNode;
+    onRefresh: () => Promise<void>;
+    refreshing?: boolean;
+};
+declare function PullToRefresh({ children, onRefresh, refreshing }: PullToRefreshProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, ActionSheet, type ActionSheetItem, type ActionSheetProps, AppHeader, type AppHeaderProps, type AppHeaderVariant, type AuthProvider, Badge, type BadgeProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkConfig, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkText, type BlinkTextProps, BlinkTooltip, BottomSheet, type BottomSheetProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, Container, type ContainerProps, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, type FABProps, FloatingActionButton, FormField, type FormFieldProps, Grid, type GridProps, ICONS, Icon, type IconName, type IconProps, Image, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, LoginScreen, type LoginScreenProps, MediaCard, type MediaCardProps, NotificationBanner, type NotificationBannerProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, PageContainer, PageMainContainer, PaywallScreen, type PaywallScreenProps, type PlanOption, Pressable, ProfileHeader, type ProfileHeaderProps, ProgressSteps, type ProgressStepsProps, PullToRefresh, type PullToRefreshProps, SafeArea, type SafeAreaProps, ScreenLayout, SearchBar, type SearchBarProps, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, Skeleton, type SkeletonProps, StepPageLayout, type StepPageProps, SubHeading, type SwipeAction, SwipeableRow, type SwipeableRowProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type ToastContextType, type ToastData, ToastProvider, type ToastVariant, ToggleGroup, type ToggleGroupProps, type ToggleOption, type TooltipProps, blinkConfig, dialogConfirm, showError, toast, useToast };