import React from "react"; export type IslandPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; export interface IslandSection { id: string; label: string; } export interface IslandFont { name: string; value: string; } export interface IslandTheme { name: string; /** * Accent colour. Sets `--island-color` on ``. * Bridge to your tokens: `--primary: var(--island-color);` */ color: string; /** Lighter shade — sets `--island-color-2`. */ color2?: string; } export interface DynamicIslandProps { /** * Where the island is placed on the viewport. * @default "bottom-center" */ position?: IslandPosition; /** * Page sections to track. Each `id` must match a DOM element's id attribute. * @default [{ id: "home", label: "Home" }] */ sections?: IslandSection[]; /** Label shown before any section is active. @default "Home" */ defaultSectionLabel?: string; /** * Icon beside the scroll ring. Any React node — Lucide icon, SVG, emoji. * When provided, the animated progress ring is replaced by this icon. */ sectionIcon?: React.ReactNode; /** * Font picker options. Selecting a font sets `document.body.style.fontFamily` * globally, overriding even external Google-Fonts `` tags. */ fonts?: IslandFont[]; /** Show/hide the font picker button. @default true */ showFontPicker?: boolean; /** Active font index on mount. @default 0 */ defaultFontIndex?: number; /** * Theme colour presets. Selecting one writes `--island-color` and * `--island-color-2` on `` so your CSS tokens update instantly. */ themes?: IslandTheme[]; /** Show/hide the theme picker button. @default true */ showThemePicker?: boolean; /** Active theme index on mount. @default 0 */ defaultThemeIndex?: number; /** * localStorage key prefix for persisting font/theme across refreshes. * Use unique keys per page to avoid collisions. * @default "island" */ storageKey?: string; /** Disable localStorage persistence entirely. @default false */ disablePersistence?: boolean; /** * Extra CSS classes on the outermost wrapper div. * Use to fine-tune positioning or styling. */ className?: string; /** * CSS selectors for modal-like elements. The island hides itself * whenever any matching element is visible. * @default ["[data-checkout-modal=\"true\"]", ".modal", "[role=\"dialog\"]"] */ modalSelectors?: string[]; /** Glass background colour in light mode. @default "rgba(255,255,255,0.8)" */ lightBg?: string; /** Glass background colour in dark mode. @default "#111111" */ darkBg?: string; /** Fired each time the active section changes. */ onSectionChange?: (section: IslandSection | null) => void; /** Fired each time the user picks a font. */ onFontChange?: (font: IslandFont) => void; /** Fired each time the user picks a theme. */ onThemeChange?: (theme: IslandTheme) => void; } export declare function DynamicIsland({ position, sections, defaultSectionLabel, sectionIcon, fonts, showFontPicker, defaultFontIndex, themes, showThemePicker, defaultThemeIndex, storageKey, disablePersistence, className, modalSelectors, lightBg, darkBg, onSectionChange, onFontChange, onThemeChange, }: DynamicIslandProps): import("react/jsx-runtime").JSX.Element | null; export default function DynamicIslandDemo(): import("react/jsx-runtime").JSX.Element; //# sourceMappingURL=dynamic-island.d.ts.map