@appgram/react 0.1.0

package/dist/components/index.d.mts

@@ -0,0 +1,1283 @@
+import React from 'react';
+import { U as UseVoteOptions, b as Wish, W as WishFilters, c as Comment, p as RoadmapColumn$1, q as RoadmapItem, d as Release, f as HelpFlow, g as HelpArticle, h as SupportRequest } from '../useVote-CLhkwtLT.mjs';
+
+/**
+ * VoteButton Component
+ *
+ * A button for voting on wishes with animated feedback.
+ */
+
+interface VoteButtonProps extends Omit<UseVoteOptions, 'onVoteChange'> {
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Show vote count
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Callback when vote state changes
+     */
+    onVoteChange?: (hasVoted: boolean, voteCount: number) => void;
+    /**
+     * Custom render function for the button content
+     */
+    renderContent?: (props: {
+        hasVoted: boolean;
+        voteCount: number;
+        isLoading: boolean;
+    }) => React.ReactNode;
+}
+declare function VoteButton({ wishId, initialVoteCount, initialHasVoted, voterEmail, onVoteChange, size, showCount, className, renderContent, }: VoteButtonProps): React.ReactElement;
+
+/**
+ * WishCard Component
+ *
+ * Modern glassmorphism card with animations and theming.
+ * Adapted from FeedbackModern variant.
+ */
+
+interface WishCardProps {
+    /**
+     * The wish data
+     */
+    wish: Wish;
+    /**
+     * Click handler for the card
+     */
+    onClick?: () => void;
+    /**
+     * Vote handler
+     */
+    onVote?: (wishId: string, hasVoted: boolean, voteCount: number) => void;
+    /**
+     * Comment click handler
+     */
+    onCommentClick?: () => void;
+    /**
+     * Override hasVoted state (for optimistic updates)
+     */
+    hasVoted?: boolean;
+    /**
+     * Override vote count (for optimistic updates)
+     */
+    voteCount?: number;
+    /**
+     * Loading state for vote
+     */
+    isVoting?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Custom render function for the vote button
+     */
+    renderVoteButton?: (props: {
+        wishId: string;
+        voteCount: number;
+        hasVoted: boolean;
+        isLoading: boolean;
+        onVote: () => void;
+    }) => React.ReactNode;
+    /**
+     * Show status badge
+     * @default true
+     */
+    showStatus?: boolean;
+    /**
+     * Show category badge
+     * @default true
+     */
+    showCategory?: boolean;
+    /**
+     * Show comment count
+     * @default true
+     */
+    showCommentCount?: boolean;
+    /**
+     * Show author
+     * @default true
+     */
+    showAuthor?: boolean;
+    /**
+     * Animation delay index (for staggered animations)
+     */
+    animationIndex?: number;
+}
+declare function WishCard({ wish, onClick, onVote, onCommentClick, hasVoted, voteCount, isVoting, className, renderVoteButton, showStatus, showCategory, showCommentCount, showAuthor, animationIndex, }: WishCardProps): React.ReactElement;
+
+/**
+ * WishList Component
+ *
+ * Modern glassmorphism list with animations for displaying and voting on feature requests.
+ * Adapted from FeedbackModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { WishList } from '@appgram/react'
+ *
+ * <WishList
+ *   heading="Feature Requests"
+ *   description="Vote for features you'd like to see"
+ *   showSearch
+ *   variant="cards"
+ *   onWishClick={(wish) => console.log('Clicked:', wish.title)}
+ *   onAddWish={() => setShowForm(true)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Compact variant for sidebar
+ * <WishList
+ *   variant="compact"
+ *   filters={{ status: 'pending' }}
+ *   showSearch
+ * />
+ * ```
+ */
+
+interface WishListProps {
+    /**
+     * Layout variant
+     * @default 'cards'
+     */
+    variant?: 'cards' | 'compact' | 'masonry';
+    /**
+     * Initial filters
+     */
+    filters?: WishFilters;
+    /**
+     * Auto-refresh interval in milliseconds
+     * @default 0
+     */
+    refreshInterval?: number;
+    /**
+     * Click handler for a wish
+     */
+    onWishClick?: (wish: Wish) => void;
+    /**
+     * Handler for adding a new wish
+     */
+    onAddWish?: () => void;
+    /**
+     * Custom render function for individual wish cards
+     */
+    renderWish?: (wish: Wish, index: number) => React.ReactNode;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Show search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function WishList({ variant, filters: initialFilters, refreshInterval, onWishClick, onAddWish, renderWish, renderLoading, renderEmpty, renderError, heading, description, headingAlignment, showSearch, className, }: WishListProps): React.ReactElement;
+
+/**
+ * WishDetail Component
+ *
+ * Sheet/modal for displaying wish details with voting and comments.
+ * Adapted from PublicWishDetail.
+ */
+
+interface WishDetailProps {
+    /**
+     * The wish to display
+     */
+    wish: Wish | null;
+    /**
+     * Whether the detail view is open
+     */
+    open: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Callback when vote is toggled
+     */
+    onVote?: (wishId: string) => void;
+    /**
+     * Callback when a comment is added
+     */
+    onCommentAdded?: (comment: Comment) => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function WishDetail({ wish, open, onOpenChange, onVote, onCommentAdded, className, }: WishDetailProps): React.ReactElement | null;
+
+/**
+ * SubmitWishForm Component
+ *
+ * Sheet/modal for submitting new feature requests.
+ * Adapted from FeatureRequestForm.
+ */
+
+interface SubmitWishFormProps {
+    /**
+     * Whether the form is open
+     */
+    open: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Callback when wish is successfully submitted
+     */
+    onSuccess?: (wish: Wish) => void;
+    /**
+     * Callback when submission fails
+     */
+    onError?: (error: string) => void;
+    /**
+     * Form title
+     * @default 'Submit a Feature Request'
+     */
+    title?: string;
+    /**
+     * Form description
+     */
+    description?: string;
+    /**
+     * Submit button text
+     * @default 'Submit Feature Request'
+     */
+    submitButtonText?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function SubmitWishForm({ open, onOpenChange, onSuccess, onError, title, description, submitButtonText, className, }: SubmitWishFormProps): React.ReactElement;
+
+/**
+ * RoadmapColumn Component
+ *
+ * A single column in the roadmap board.
+ */
+
+interface RoadmapColumnProps {
+    /**
+     * The column data
+     */
+    column: RoadmapColumn$1;
+    /**
+     * Click handler for items
+     */
+    onItemClick?: (item: RoadmapItem) => void;
+    /**
+     * Show vote counts on items
+     * @default true
+     */
+    showVoteCounts?: boolean;
+    /**
+     * Custom render function for items
+     */
+    renderItem?: (item: RoadmapItem) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function RoadmapColumn({ column, onItemClick, showVoteCounts, renderItem, className, }: RoadmapColumnProps): React.ReactElement;
+
+/**
+ * RoadmapBoard Component
+ *
+ * Modern glassmorphism kanban board with animations for displaying product roadmap.
+ * Adapted from RoadmapModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { RoadmapBoard } from '@appgram/react'
+ *
+ * <RoadmapBoard
+ *   heading="Product Roadmap"
+ *   description="See what's coming next"
+ *   variant="kanban"
+ *   showVoteCounts
+ *   onItemClick={(item) => openWishDetail(item.id)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Timeline view for chronological display
+ * <RoadmapBoard
+ *   variant="timeline"
+ *   heading="Coming Soon"
+ *   developersNote="Subject to change"
+ * />
+ * ```
+ */
+
+interface RoadmapBoardProps {
+    /**
+     * Layout variant
+     * @default 'kanban'
+     */
+    variant?: 'kanban' | 'list' | 'timeline';
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Developer's note
+     */
+    developersNote?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Click handler for items
+     */
+    onItemClick?: (item: RoadmapItem) => void;
+    /**
+     * Show vote counts on items
+     * @default true
+     */
+    showVoteCounts?: boolean;
+    /**
+     * Show comment counts
+     * @default true
+     */
+    showComments?: boolean;
+    /**
+     * Custom render function for columns
+     */
+    renderColumn?: (column: RoadmapColumn$1) => React.ReactNode;
+    /**
+     * Custom render function for items
+     */
+    renderItem?: (item: RoadmapItem) => React.ReactNode;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Auto-refresh interval in milliseconds
+     * @default 0
+     */
+    refreshInterval?: number;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function RoadmapBoard({ variant: _variant, heading, description, developersNote, headingAlignment, onItemClick, showVoteCounts, showComments, renderColumn, renderItem: _renderItem, renderLoading, renderEmpty, renderError, refreshInterval, className, }: RoadmapBoardProps): React.ReactElement;
+
+/**
+ * ReleaseCard Component
+ *
+ * A card component for displaying a single release/changelog entry.
+ */
+
+interface ReleaseCardProps {
+    /**
+     * The release data
+     */
+    release: Release;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Show cover image
+     * @default true
+     */
+    showCoverImage?: boolean;
+    /**
+     * Show labels
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Show date
+     * @default true
+     */
+    showDate?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function ReleaseCard({ release, onClick, showCoverImage, showLabels, showDate, className, }: ReleaseCardProps): React.ReactElement;
+
+/**
+ * ReleaseList Component
+ *
+ * Modern changelog with animations.
+ * Adapted from ReleasesModern variant.
+ */
+
+interface ReleaseListProps {
+    /**
+     * Layout variant
+     * @default 'timeline'
+     */
+    variant?: 'timeline' | 'cards' | 'compact';
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Maximum number of releases to show
+     * @default 50
+     */
+    limit?: number;
+    /**
+     * Click handler for releases
+     */
+    onReleaseClick?: (release: Release) => void;
+    /**
+     * Custom render function for releases
+     */
+    renderRelease?: (release: Release, index: number) => React.ReactNode;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function ReleaseList({ variant: _variant, heading, description, headingAlignment, limit, onReleaseClick, renderRelease, renderLoading, renderEmpty, renderError, className, }: ReleaseListProps): React.ReactElement;
+
+/**
+ * ReleaseDetail Component
+ *
+ * Displays a single release's full content with glassmorphism styling.
+ */
+
+interface ReleaseDetailProps {
+    /**
+     * The release to display (either pass release object or releaseSlug)
+     */
+    release?: Release;
+    /**
+     * Release slug to fetch (alternative to passing release object)
+     */
+    releaseSlug?: string;
+    /**
+     * Back button click handler
+     */
+    onBack?: () => void;
+    /**
+     * Show back button
+     * @default true
+     */
+    showBackButton?: boolean;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function ReleaseDetail({ release: providedRelease, releaseSlug, onBack, showBackButton, renderLoading, renderError, className, }: ReleaseDetailProps): React.ReactElement | null;
+
+/**
+ * Releases Component
+ *
+ * Complete releases/changelog with navigation between list and detail views.
+ * Handles all state management internally for a seamless user experience.
+ *
+ * @example
+ * ```tsx
+ * import { Releases } from '@appgram/react'
+ *
+ * <Releases
+ *   heading="What's New"
+ *   description="See the latest features and improvements"
+ *   variant="timeline"
+ *   limit={10}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Cards variant for a grid layout
+ * <Releases
+ *   heading="Release Notes"
+ *   variant="cards"
+ *   onReleaseClick={(release) => router.push(`/releases/${release.id}`)}
+ * />
+ * ```
+ */
+
+interface ReleasesProps {
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Maximum number of releases to show
+     * @default 50
+     */
+    limit?: number;
+    /**
+     * Layout variant for list
+     * @default 'timeline'
+     */
+    variant?: 'timeline' | 'cards' | 'compact';
+    /**
+     * External callback when release is clicked (for custom routing)
+     * If not provided, internal navigation is used
+     */
+    onReleaseClick?: (release: Release) => void;
+    /**
+     * Use external routing instead of internal state management
+     * Set to true if you want to handle navigation yourself via onReleaseClick
+     * @default false
+     */
+    useExternalRouting?: boolean;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function Releases({ heading, description, headingAlignment, limit, variant, onReleaseClick: externalReleaseClick, useExternalRouting, renderLoading, renderEmpty, renderError, className, }: ReleasesProps): React.ReactElement;
+
+/**
+ * WhatsNewPopup Component
+ *
+ * Small popup at bottom of screen showing latest release features
+ * with media carousel for images and videos.
+ */
+
+interface WhatsNewPopupProps {
+    /**
+     * Whether the popup is open
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Auto-show popup on mount if there's a new release
+     * Uses localStorage to track seen releases
+     * @default true
+     */
+    autoShow?: boolean;
+    /**
+     * localStorage key for tracking seen releases
+     * @default 'appgram-seen-release'
+     */
+    storageKey?: string;
+    /**
+     * Maximum number of items to show
+     * @default 5
+     */
+    maxItems?: number;
+    /**
+     * Show only specific item types
+     */
+    showTypes?: ('feature' | 'improvement' | 'bugfix' | 'other')[];
+    /**
+     * Title for the popup
+     * @default "What's New"
+     */
+    title?: string;
+    /**
+     * Click handler for "View All" button
+     */
+    onViewAll?: () => void;
+    /**
+     * Position of the popup
+     * @default 'bottom-right'
+     */
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /**
+     * Show media carousel
+     * @default true
+     */
+    showMedia?: boolean;
+    /**
+     * Auto-play carousel interval in ms (0 to disable)
+     * @default 5000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function WhatsNewPopup({ open: controlledOpen, onOpenChange, autoShow, storageKey, maxItems, showTypes, title, onViewAll, position, showMedia, autoPlayInterval, className, }: WhatsNewPopupProps): React.ReactElement | null;
+
+/**
+ * HelpCollections Component
+ *
+ * Modern help center with glassmorphism style, quick actions, and grid layout.
+ * Adapted from HelpCenterGlass variant.
+ */
+
+interface QuickAction {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    onClick: () => void;
+}
+interface HelpCollectionsProps {
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'center'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Click handler for flows
+     */
+    onFlowClick?: (flow: HelpFlow) => void;
+    /**
+     * Click handler for articles
+     */
+    onArticleClick?: (article: HelpArticle, flow: HelpFlow) => void;
+    /**
+     * Featured articles to display
+     */
+    featuredArticles?: HelpArticle[];
+    /**
+     * Show search input
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Quick action buttons to display
+     */
+    quickActions?: QuickAction[];
+    /**
+     * Show contact support footer
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Contact support URL
+     */
+    contactSupportUrl?: string;
+    /**
+     * Live chat handler
+     */
+    onLiveChatClick?: () => void;
+    /**
+     * Layout variant
+     * @default 'grid'
+     */
+    variant?: 'grid' | 'list';
+    /**
+     * Custom render function for flows
+     */
+    renderFlow?: (flow: HelpFlow) => React.ReactNode;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function HelpCollections({ heading, description, headingAlignment, onFlowClick, onArticleClick, featuredArticles, showSearch, quickActions, showFooter, contactSupportUrl, onLiveChatClick, variant, renderFlow, renderLoading, renderEmpty, renderError, className, }: HelpCollectionsProps): React.ReactElement;
+
+/**
+ * HelpArticles Component
+ *
+ * Displays articles within a selected help flow with glassmorphism styling.
+ */
+
+interface HelpArticlesProps {
+    /**
+     * The flow to display articles for (either pass flow object or flowSlug)
+     */
+    flow?: HelpFlow;
+    /**
+     * Flow slug to fetch (alternative to passing flow object)
+     */
+    flowSlug?: string;
+    /**
+     * Click handler for articles
+     */
+    onArticleClick?: (article: HelpArticle) => void;
+    /**
+     * Back button click handler
+     */
+    onBack?: () => void;
+    /**
+     * Show search input
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Show back button
+     * @default true
+     */
+    showBackButton?: boolean;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function HelpArticles({ flow: providedFlow, flowSlug, onArticleClick, onBack, showSearch, showBackButton, renderLoading, renderEmpty, renderError, className, }: HelpArticlesProps): React.ReactElement | null;
+
+/**
+ * HelpArticleDetail Component
+ *
+ * Displays a single help article's content with glassmorphism styling.
+ */
+
+interface HelpArticleDetailProps {
+    /**
+     * The article to display (either pass article object or articleSlug + flowId)
+     */
+    article?: HelpArticle;
+    /**
+     * Article slug to fetch (alternative to passing article object)
+     */
+    articleSlug?: string;
+    /**
+     * Flow ID for fetching article (required if using articleSlug)
+     */
+    flowId?: string;
+    /**
+     * The parent flow (for context)
+     */
+    flow?: HelpFlow;
+    /**
+     * Back button click handler
+     */
+    onBack?: () => void;
+    /**
+     * Show back button
+     * @default true
+     */
+    showBackButton?: boolean;
+    /**
+     * Show article metadata (date, type)
+     * @default true
+     */
+    showMetadata?: boolean;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function HelpArticleDetail({ article: providedArticle, articleSlug, flowId, flow, onBack, showBackButton, showMetadata, renderLoading, renderError, className, }: HelpArticleDetailProps): React.ReactElement | null;
+
+/**
+ * HelpCenter Component
+ *
+ * Complete help center with navigation between collections, articles, and article detail.
+ * Handles all state management internally for a seamless user experience.
+ *
+ * @example
+ * ```tsx
+ * import { HelpCenter } from '@appgram/react'
+ *
+ * <HelpCenter
+ *   heading="Help Center"
+ *   description="How can we help you today?"
+ *   showSearch
+ *   showFooter
+ *   quickActions={[
+ *     { label: 'Submit Ticket', onClick: () => router.push('/support') },
+ *     { label: 'Live Chat', onClick: () => openChat() },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Grid variant with featured articles
+ * <HelpCenter
+ *   variant="grid"
+ *   featuredArticles={topArticles}
+ *   onLiveChatClick={() => window.Intercom?.('show')}
+ * />
+ * ```
+ */
+
+interface HelpCenterProps {
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'center'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Featured articles to display on the main view
+     */
+    featuredArticles?: HelpArticle[];
+    /**
+     * Show search input
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Quick action buttons to display
+     */
+    quickActions?: QuickAction[];
+    /**
+     * Show contact support footer
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Contact support URL
+     */
+    contactSupportUrl?: string;
+    /**
+     * Live chat handler
+     */
+    onLiveChatClick?: () => void;
+    /**
+     * Layout variant for collections
+     * @default 'grid'
+     */
+    variant?: 'grid' | 'list';
+    /**
+     * External callback when flow is clicked (for custom routing)
+     * If not provided, internal navigation is used
+     */
+    onFlowClick?: (flow: HelpFlow) => void;
+    /**
+     * External callback when article is clicked (for custom routing)
+     * If not provided, internal navigation is used
+     */
+    onArticleClick?: (article: HelpArticle, flow: HelpFlow | null) => void;
+    /**
+     * Use external routing instead of internal state management
+     * Set to true if you want to handle navigation yourself via onFlowClick/onArticleClick
+     * @default false
+     */
+    useExternalRouting?: boolean;
+    /**
+     * Custom render function for loading state
+     */
+    renderLoading?: () => React.ReactNode;
+    /**
+     * Custom render function for empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+    /**
+     * Custom render function for error state
+     */
+    renderError?: (error: string, retry: () => void) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function HelpCenter({ heading, description, headingAlignment, featuredArticles, showSearch, quickActions, showFooter, contactSupportUrl, onLiveChatClick, variant, onFlowClick: externalFlowClick, onArticleClick: externalArticleClick, useExternalRouting, renderLoading, renderEmpty, renderError, className, }: HelpCenterProps): React.ReactElement;
+
+/**
+ * SupportForm Component
+ *
+ * Modern support form with animations for submitting and tracking support tickets.
+ * Adapted from SupportModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { SupportForm } from '@appgram/react'
+ *
+ * <SupportForm
+ *   heading="Contact Support"
+ *   description="We're here to help"
+ *   showCategory
+ *   showName
+ *   showAttachments
+ *   onSubmitSuccess={(ticket) => console.log('Created:', ticket.id)}
+ *   onSubmitError={(error) => toast.error(error)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With status check enabled
+ * <SupportForm
+ *   heading="Get Help"
+ *   showCheckStatus
+ *   checkTitle="Check Your Tickets"
+ *   checkDescription="Enter your email to find existing tickets"
+ *   onCheckStatus={(email) => sendMagicLink(email)}
+ * />
+ * ```
+ */
+
+interface SupportFormProps {
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Submit section title
+     */
+    submitTitle?: string;
+    /**
+     * Submit section description
+     */
+    submitDescription?: string;
+    /**
+     * Check status section title
+     */
+    checkTitle?: string;
+    /**
+     * Check status section description
+     */
+    checkDescription?: string;
+    /**
+     * Callback when ticket is successfully submitted
+     */
+    onSubmitSuccess?: (ticket: SupportRequest) => void;
+    /**
+     * Callback when submission fails
+     */
+    onSubmitError?: (error: string) => void;
+    /**
+     * Callback when checking status (optional - uses magic link by default)
+     */
+    onCheckStatus?: (email: string) => void;
+    /**
+     * Callback when a ticket is clicked
+     */
+    onTicketClick?: (ticket: SupportRequest) => void;
+    /**
+     * Show category selector
+     * @default true
+     */
+    showCategory?: boolean;
+    /**
+     * Show name field
+     * @default true
+     */
+    showName?: boolean;
+    /**
+     * Show check status tab
+     * @default true
+     */
+    showCheckStatus?: boolean;
+    /**
+     * Show file attachments
+     * @default true
+     */
+    showAttachments?: boolean;
+    /**
+     * Submit button text
+     * @default 'Send Request'
+     */
+    submitButtonText?: string;
+    /**
+     * Access token for viewing tickets (from magic link)
+     */
+    accessToken?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function SupportForm({ heading, description, headingAlignment, submitTitle, submitDescription, checkTitle, checkDescription, onSubmitSuccess, onSubmitError, onCheckStatus, onTicketClick, showCategory, showName, showCheckStatus, showAttachments, submitButtonText, accessToken, className, }: SupportFormProps): React.ReactElement;
+
+/**
+ * StatusBoard Component
+ *
+ * Modern system status page with service health indicators and incident tracking.
+ * Adapted from StatusModern variant.
+ *
+ * @example
+ * ```tsx
+ * import { StatusBoard } from '@appgram/react'
+ *
+ * <StatusBoard
+ *   heading="System Status"
+ *   description="Current operational status of all services"
+ *   status={statusData}
+ *   onIncidentClick={(incident) => openIncidentDetail(incident.id)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom component rendering
+ * <StatusBoard
+ *   status={statusData}
+ *   renderComponent={(component) => (
+ *     <div className="custom-card">
+ *       <Icon name={component.status} />
+ *       <span>{component.name}</span>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+
+type OverallStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type ComponentStatus = 'operational' | 'degraded' | 'partial_outage' | 'major_outage';
+type IncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved';
+type IncidentImpact = 'minor' | 'major' | 'critical';
+interface StatusComponent {
+    id: string;
+    name: string;
+    description?: string;
+    status: ComponentStatus;
+    group?: string;
+}
+interface IncidentUpdate {
+    id: string;
+    message: string;
+    status: IncidentStatus;
+    created_at: string;
+}
+interface StatusIncident {
+    id: string;
+    title: string;
+    status: IncidentStatus;
+    impact: IncidentImpact;
+    created_at: string;
+    resolved_at?: string | null;
+    updates: IncidentUpdate[];
+    affected_components?: string[];
+}
+interface StatusData {
+    overall_status: OverallStatus;
+    components: StatusComponent[];
+    incidents: StatusIncident[];
+    last_updated?: string;
+}
+interface StatusBoardProps {
+    /**
+     * Status data to display
+     */
+    status: StatusData;
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Page description
+     */
+    description?: string;
+    /**
+     * Heading alignment
+     * @default 'left'
+     */
+    headingAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Show component descriptions
+     * @default true
+     */
+    showComponentDescriptions?: boolean;
+    /**
+     * Show incident history
+     * @default true
+     */
+    showIncidentHistory?: boolean;
+    /**
+     * Max number of past incidents to show
+     * @default 5
+     */
+    maxPastIncidents?: number;
+    /**
+     * Click handler for incidents
+     */
+    onIncidentClick?: (incident: StatusIncident) => void;
+    /**
+     * Custom render for overall status
+     */
+    renderOverallStatus?: (status: OverallStatus) => React.ReactNode;
+    /**
+     * Custom render for component
+     */
+    renderComponent?: (component: StatusComponent) => React.ReactNode;
+    /**
+     * Custom render for incident
+     */
+    renderIncident?: (incident: StatusIncident) => React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function StatusBoard({ status, heading, description, headingAlignment, showComponentDescriptions, showIncidentHistory, maxPastIncidents, onIncidentClick, renderOverallStatus, renderComponent, renderIncident, className, }: StatusBoardProps): React.ReactElement;
+
+/**
+ * StatusIncidentDetail Component
+ *
+ * Displays a single incident's full details with timeline of updates.
+ */
+
+interface StatusIncidentDetailProps {
+    /**
+     * The incident to display
+     */
+    incident: StatusIncident;
+    /**
+     * Back button click handler
+     */
+    onBack?: () => void;
+    /**
+     * Show back button
+     * @default true
+     */
+    showBackButton?: boolean;
+    /**
+     * Show affected components
+     * @default true
+     */
+    showAffectedComponents?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare function StatusIncidentDetail({ incident, onBack, showBackButton, showAffectedComponents, className, }: StatusIncidentDetailProps): React.ReactElement;
+
+export { type ComponentStatus, HelpArticleDetail, type HelpArticleDetailProps, HelpArticles, type HelpArticlesProps, HelpCenter, type HelpCenterProps, HelpCollections, type HelpCollectionsProps, type IncidentImpact, type IncidentStatus, type IncidentUpdate, type OverallStatus, type QuickAction, ReleaseCard, type ReleaseCardProps, ReleaseDetail, type ReleaseDetailProps, ReleaseList, type ReleaseListProps, Releases, type ReleasesProps, RoadmapBoard, type RoadmapBoardProps, RoadmapColumn, type RoadmapColumnProps, StatusBoard, type StatusBoardProps, type StatusComponent, type StatusData, type StatusIncident, StatusIncidentDetail, type StatusIncidentDetailProps, SubmitWishForm, type SubmitWishFormProps, SupportForm, type SupportFormProps, VoteButton, type VoteButtonProps, WhatsNewPopup, type WhatsNewPopupProps, WishCard, type WishCardProps, WishDetail, type WishDetailProps, WishList, type WishListProps };