import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import react__default, { ReactNode } from 'react'; import { ClassValue } from 'clsx'; type Location = { latitude: number; longitude: number; city: string; country: string; countryCode?: string; cityCode?: string; timezoneName?: string; }; type PrayerTimes = { fajr: string; sunrise: string; dhuhr: string; asr: string; maghrib: string; isha: string; date: string; hijri: string; }; declare const PRAYER_NAMES: readonly ["Fajr", "Sunrise", "Dhuhr", "Asr", "Maghrib", "Isha"]; type PrayerName = (typeof PRAYER_NAMES)[number]; type CalculationMethodId = 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13; type AsrMethodId = 0 | 1; type PrayerSettings = { calculationMethod: CalculationMethodId; asrMethod: AsrMethodId; fajrOffset: number; dhuhrOffset: number; asrOffset: number; maghribOffset: number; ishaOffset: number; applySummerHour?: boolean; forceHourMore?: boolean; forceHourLess?: boolean; }; type ExtendedPrayerSettings = PrayerSettings & { timezone?: string; countryCode?: string; city?: string; cityCode?: string; showOtherPrayers?: boolean; showCity?: boolean; showTicker?: boolean; showStandaloneTicker?: boolean; showDate?: boolean; horizontalView?: boolean; timeFormat24h?: boolean; dimPreviousPrayers?: boolean; language?: "en" | "ar"; autoDetectTimezone?: boolean; showClock?: boolean; tickerIntervalMs?: number; /** Custom colors for prayer UI text */ prayerNameColor?: string; prayerTimeColor?: string; prayerCountdownColor?: string; /** Enable azan playback at prayer times */ azanEnabled?: boolean; /** When true, customize azan per prayer; otherwise use one global choice */ azanPerPrayer?: boolean; /** Per-prayer azan selection id (default|short|fajr|beep|off|custom) */ azanByPrayer?: Partial>; /** Display names for custom uploaded files per prayer */ azanCustomNames?: Partial>; /** Global azan volume 0..1 */ azanVolume?: number; /** Global azan choice id used when not customizing per prayer */ azanGlobalChoice?: string; /** Global custom azan uploaded by user (name only; data stored in localStorage) */ azanGlobalCustomName?: string; /** Toggle edit mode to drag-drop azan files over prayer cards */ azanEditMode?: boolean; /** Visual size of the next (center) card */ nextCardSize?: "xxs" | "xs" | "sm" | "md" | "lg"; /** Visual size of the other prayer cards */ otherCardSize?: "xxs" | "xs" | "sm" | "md" | "lg"; /** Max width for the overall app/cards container */ appWidth?: "xxs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl"; /** Font family for prayer names and general text */ prayerFont?: string; /** Font family for prayer times */ timeFont?: string; /** Card background style (default, image, or color gradient theme) */ cardBackground?: string; /** Card background opacity 0..1 */ cardBackgroundOpacity?: number; /** Error flag for location/permission issues */ locationError?: string; }; type AllSettings = ExtendedPrayerSettings; /** * Compute the next prayer, the progress through the current prayer interval, * and the minutes remaining until the next prayer. */ declare function computePrayerProgress(prayerTimes: PrayerTimes, now?: Date): { next: { name: PrayerName; time: string; }; progress: number; minutesUntilNext: number; }; /** Props for the TopBar component */ type TopBarProps = { showDate?: boolean; showClock?: boolean; showCity?: boolean; currentTime: Date; location?: { city?: string | null; countryCode?: string | null; country?: string | null; }; timeFormat24h?: boolean; language?: "en" | "ar"; className?: string; classes?: { container?: string; date?: string; clock?: string; city?: string; cityIcon?: string; }; }; declare function TopBar({ showDate, showClock, showCity, currentTime, location, timeFormat24h, language, className, classes, }: TopBarProps): react_jsx_runtime.JSX.Element; /** * Persists all settings to localStorage for consistency across page refreshes. * * Note: Azan audio files are stored separately in localStorage with keys like: * - tawkit:azan:custom:Fajr (for per-prayer custom files) * - tawkit:azan:custom:GLOBAL (for global custom file) * The settings object only contains metadata (choice IDs, display names, volume, etc.), * not the actual audio file data. */ declare function useSettingsPersistence(initialSettings?: Partial): { settings: ExtendedPrayerSettings; setSettings: react.Dispatch>; }; type SettingsDialogProps = { settings: AllSettings; onSettingsChange: (settings: Partial) => void; open?: boolean; onOpenChange?: (open: boolean) => void; }; type IslamicContent = { id: string; type: "hadith" | "ayah"; arabic?: string; english: string; source: string; }; type PrayerGridSettings = { cardBackground?: string; cardBackgroundOpacity?: number; otherCardSize?: "xxs" | "xs" | "sm" | "md" | "lg"; dimPreviousPrayers?: boolean; horizontalView?: boolean; timeFormat24h?: boolean; language?: "en" | "ar"; prayerNameColor?: string; prayerTimeColor?: string; prayerCountdownColor?: string; prayerFont?: string; timeFont?: string; }; type PrayerGridSettingsDialogProps = { settings: PrayerGridSettings; onSettingsChange: (settings: Partial) => void; open?: boolean; onOpenChange?: (open: boolean) => void; }; declare function PrayerGridSettingsDialog({ settings, onSettingsChange, open: controlledOpen, onOpenChange: controlledOnOpenChange, }: PrayerGridSettingsDialogProps): react_jsx_runtime.JSX.Element; type PrayerGridSettingsContextValue = { onSettingsChange: (settings: Partial) => void; settings: PrayerGridSettings; }; declare const PrayerGridSettingsContextValue: react.Context; declare function usePrayerGridSettings(): PrayerGridSettingsContextValue | null; type PrayerGridSettingsContextProps = { children: ReactNode; settings: PrayerGridSettings; onSettingsChange: (settings: Partial) => void; }; declare function PrayerGridSettingsContext({ children, settings, onSettingsChange, }: PrayerGridSettingsContextProps): react_jsx_runtime.JSX.Element; declare function SettingsDialog({ settings, onSettingsChange, open: controlledOpen, onOpenChange: controlledOnOpenChange, }: SettingsDialogProps): react_jsx_runtime.JSX.Element; type SettingsContextValue = { onSettingsChange: SettingsDialogProps["onSettingsChange"]; settings: SettingsDialogProps["settings"]; }; declare function useWidgetSettings(): SettingsContextValue | null; type WidgetSettingsContextProps = { children: ReactNode; settings: SettingsDialogProps["settings"]; onSettingsChange: SettingsDialogProps["onSettingsChange"]; customDialog?: React.ComponentType<{ open?: boolean; onOpenChange?: (open: boolean) => void; settings: SettingsDialogProps["settings"]; onSettingsChange: SettingsDialogProps["onSettingsChange"]; }>; }; declare function WidgetSettingsContext({ children, settings, onSettingsChange, customDialog: CustomDialog, }: WidgetSettingsContextProps): react_jsx_runtime.JSX.Element; type Language = "en" | "ar"; declare function countryToFlag(countryOrCode?: string): string; declare module "country-region-data" { export type Region = { name: string; shortCode: string; }; export type CountryRegion = { countryName: string; countryShortCode: string; regions: Region[]; }; export const allCountries: CountryRegion[]; } /** * Hook to apply font settings to CSS variables * Updates --prayer-name-font and --prayer-time-font based on settings */ declare function useFontSettings(settings: ExtendedPrayerSettings): void; /** * Optional client component that ensures CSS is injected synchronously * * CSS is automatically injected via side effect when you import from the package. * This component is optional and only needed if you experience timing issues * where components render before CSS is injected (rare, but can happen in some SSR setups). * * Usage (optional): * ```tsx * import { CSSInjector } from "react-prayer-widget"; * * function Layout() { * return ( * * * * {children} * * * ); * } * ``` */ declare function CSSInjector(): null; type TranslationContextType = { t: (key: string) => string; language: Language; }; type TranslationProviderProps = { children: ReactNode; language: Language; }; declare function TranslationProvider({ children, language, }: TranslationProviderProps): react_jsx_runtime.JSX.Element; declare function useTranslation(): TranslationContextType; declare function formatTimeDisplay(time24h: string, use24Hour: boolean, locale?: "en" | "ar"): string; declare function formatMinutesHHmm(totalMinutes: number): string; declare function formatCurrentTime(date: Date, use24Hour: boolean, language?: "en" | "ar"): string; declare function cn(...inputs: ClassValue[]): string; type DualDateDisplayProps = { className?: string; }; declare function DualDateDisplay({ className }: DualDateDisplayProps): react_jsx_runtime.JSX.Element | null; /** Represents the next upcoming prayer */ type NextPrayer = { name: PrayerName; time: string; progress: number; timeUntil: number; }; /** Props for the NextPrayerCard component */ type NextPrayerCardProps = { nextPrayer: NextPrayer; timeFormat24h?: boolean; language?: "en" | "ar"; className?: string; size?: WidgetPrayerCardSize; nextSize?: WidgetPrayerCardSize; gradientClass?: string; showIcon?: boolean; classes?: { container?: string; icon?: string; name?: string; time?: string; countdown?: string; overlay?: string; progressFill?: string; }; /** Optional max width for the rendered card container */ maxWidth?: MaxWidth; /** Card background setting (default, image, or color gradient theme) */ cardBackground?: string; /** Card background opacity (0-1) */ cardBackgroundOpacity?: number; /** Whether to use horizontal layout (affects background image selection) */ horizontalView?: boolean; }; type MaxWidthToken = "md" | "lg" | "xl" | "2xl" | "3xl"; type MaxWidthKeyword = "fit-content" | "max-content" | "min-content" | "auto"; type MaxWidthCustom = `${number}${"px" | "rem" | "em" | "%" | "vw" | "vh" | "ch"}` | `calc(${string})` | `clamp(${string})` | `min(${string})` | `max(${string})` | `var(${string})`; type MaxWidth = MaxWidthToken | MaxWidthKeyword | MaxWidthCustom | number; declare function NextPrayerCard({ nextPrayer, timeFormat24h, language, className, size, nextSize, gradientClass, showIcon, classes, maxWidth, cardBackground, cardBackgroundOpacity, horizontalView, }: NextPrayerCardProps): react_jsx_runtime.JSX.Element; type WidgetPrayerCardSize = "xxs" | "xs" | "sm" | "md" | "lg"; type WidgetPrayerCardProps = { name: PrayerName; time: string; /** IANA timezone to determine local weekday (for Friday/Jumuʿah handling) */ timezone?: string; /** Optional explicit Friday override from parent */ isFriday?: boolean; isNext?: boolean; isCurrent?: boolean; progress?: number; className?: string; countdown?: string; horizontalView?: boolean; /** Base size token applied to paddings and text sizes */ size?: WidgetPrayerCardSize; /** Optional size override specifically for the next (central) card */ nextSize?: WidgetPrayerCardSize; /** Override the gradient/background classes */ gradientClass?: string; /** Hide the icon if false */ showIcon?: boolean; /** Provide custom icon per prayer */ getIcon?: (name: PrayerName) => react__default.ReactNode; /** Class overrides for fine-grained styling */ classes?: { container?: string; icon?: string; name?: string; time?: string; countdown?: string; overlay?: string; progressFill?: string; }; /** Inline style on the container */ style?: react__default.CSSProperties; /** Optional drop handler for custom azan files */ onDropFile?: (file: File) => void; /** Card background setting (default, image, or color gradient theme) */ cardBackground?: string; /** Card background opacity 0..1 */ cardBackgroundOpacity?: number; /** Callback when prayer name is clicked (for randomizing background) */ onNameClick?: (() => void) | null; }; declare function WidgetPrayerCard(props: WidgetPrayerCardProps): react_jsx_runtime.JSX.Element; type WidgetPrayerCardSkeletonProps = { variant: "next" | "grid"; horizontalView?: boolean; className?: string; /** Match WidgetPrayerCard size tokens */ size?: WidgetPrayerCardSize; /** Match WidgetPrayerCard nextSize tokens */ nextSize?: WidgetPrayerCardSize; }; declare function WidgetPrayerCardSkeleton({ variant, horizontalView, className, size, nextSize, }: WidgetPrayerCardSkeletonProps): react_jsx_runtime.JSX.Element; type PrayerWidgetProps = { prayerTimes: PrayerTimes; settings?: Partial; onSettingsChange?: (settings: Partial) => void; className?: string; cardClassName?: string; gridClassName?: string; tickerClassName?: string; showGrid?: boolean; showTicker?: boolean; maxWidth?: "md" | "lg" | "xl" | "2xl" | "3xl" | number | string | "fit-content" | "max-content" | "min-content" | "auto" | `calc(${string})` | `clamp(${string})` | `min(${string})` | `max(${string})` | `var(${string})` | `${number}${"px" | "rem" | "em" | "%" | "vw" | "vh" | "ch"}`; }; /** * One-stop bundled widget: next card + grid + ticker, with fonts/backgrounds/settings. */ declare function PrayerWidget({ prayerTimes, settings, onSettingsChange, className, cardClassName, gridClassName, tickerClassName, showGrid, showTicker, maxWidth, }: PrayerWidgetProps): react_jsx_runtime.JSX.Element | null; type StandaloneNextPrayerCardProps = { prayerTimes: PrayerTimes; settings?: Partial; } & Pick & { cardBackground?: string; }; /** * Drop-in Next Prayer card that bundles translation + settings context. * Consumers only need to provide daily prayerTimes; everything else is optional. */ declare function StandaloneNextPrayerCard({ prayerTimes, settings, className, gradientClass, showIcon, classes, maxWidth, nextSize, size, cardBackground, }: StandaloneNextPrayerCardProps): react_jsx_runtime.JSX.Element | null; /** Props for the PrayerGrid component */ type PrayerGridProps = { prayerTimes: PrayerTimes; currentOrNextName?: string; dimPreviousPrayers?: boolean; horizontalView?: boolean; timeFormat24h?: boolean; language?: "en" | "ar"; /** IANA timezone for weekday handling (Friday/Jumuʿah) */ timezone?: string; /** Explicit Friday flag from parent */ isFriday?: boolean; className?: string; size?: WidgetPrayerCardSize; gradientClass?: string; showIcon?: boolean; classes?: { container?: string; icon?: string; name?: string; time?: string; }; /** Optional max width for the rendered grid container */ maxWidth?: "md" | "lg" | "xl" | "2xl" | "3xl" | number | string; /** Card background setting (default, image, or color gradient theme) */ cardBackground?: string; /** Card background opacity (0-1) */ cardBackgroundOpacity?: number; }; declare function PrayerGrid({ prayerTimes, currentOrNextName, dimPreviousPrayers, horizontalView, timeFormat24h, language, timezone, isFriday, className, size, gradientClass, showIcon, classes, maxWidth, cardBackground, cardBackgroundOpacity, }: PrayerGridProps): react_jsx_runtime.JSX.Element; type MinimalTickerProps = { className?: string; prayerTimes?: PrayerTimes | null; intervalMs?: number; /** Override the content pool completely */ contentPool?: IslamicContent[]; /** Hide the source line if false */ showSource?: boolean; /** Class overrides */ classes?: { container?: string; text?: string; source?: string; }; }; declare function MinimalTicker({ className, prayerTimes, intervalMs, contentPool, showSource, classes, }: MinimalTickerProps): react_jsx_runtime.JSX.Element; type ScrollingTickerProps = { className?: string; contentPool?: IslamicContent[]; showArabicDefault?: boolean; speedDefault?: number; enabledDefault?: boolean; }; declare function ScrollingTicker({ className, contentPool, showArabicDefault, speedDefault, enabledDefault, }: ScrollingTickerProps): react_jsx_runtime.JSX.Element | null; export { type AsrMethodId, CSSInjector, type CalculationMethodId, DualDateDisplay, type ExtendedPrayerSettings, type Language, type Location, MinimalTicker, type NextPrayer, NextPrayerCard, type NextPrayerCardProps, PrayerGrid, type PrayerGridProps, type PrayerGridSettings, PrayerGridSettingsContext, PrayerGridSettingsDialog, type PrayerName, type PrayerSettings, type PrayerTimes, PrayerWidget, type PrayerWidgetProps, ScrollingTicker, SettingsDialog, type SettingsDialogProps, StandaloneNextPrayerCard, type StandaloneNextPrayerCardProps, TopBar, type TopBarProps, TranslationProvider, WidgetPrayerCard, type WidgetPrayerCardProps, type WidgetPrayerCardSize, WidgetPrayerCardSkeleton, WidgetSettingsContext, cn, computePrayerProgress, countryToFlag, formatCurrentTime, formatMinutesHHmm, formatTimeDisplay, useFontSettings, usePrayerGridSettings, useSettingsPersistence, useTranslation, useWidgetSettings };