) => ReactNode;
export declare const ChartIcon: (p: DocIconProps) => ReactNode;
export declare const Checkbox: ({ className, indeterminate, ...props }: CheckboxProps) => ReactNode;
export declare interface CheckboxProps extends InputHTMLAttributes {
/** Tri-state middle: renders a dash. Wired to the DOM `indeterminate`
* property (not an attribute) via a ref effect. */
readonly indeterminate?: boolean;
}
export declare const ChevronLeftIcon: (p: DocIconProps) => ReactNode;
export declare const ChevronRightIcon: (p: DocIconProps) => ReactNode;
export declare const CloudIcon: (p: DocIconProps) => ReactNode;
export declare const cn: (...inputs: ClassValue[]) => string;
export declare const CodeBlock: ({ filename, language, html, code, className, copyLabel, copyAriaLabel, copiedLabel, copiedAriaLabel, }: CodeBlockProps) => ReactNode;
declare interface CodeBlockProps {
/** Filename label shown in the header. Optional. */
readonly filename?: string;
/** Language label shown in the top-right. Optional. */
readonly language?: string;
/** Pre-highlighted HTML (e.g. from Shiki) — rendered via
* dangerouslySetInnerHTML. Pick this OR `code`, not both. */
readonly html?: string;
/** Plain code text — renders inside a styled . */
readonly code?: string;
readonly className?: string;
/** Copy-button caption + `aria-label` before a copy. Default `'Copy'` /
* `'Copy code'`. */
readonly copyLabel?: string;
readonly copyAriaLabel?: string;
/** Copy-button caption + `aria-label` after a successful copy. Default
* `'Copied'`. */
readonly copiedLabel?: string;
readonly copiedAriaLabel?: string;
}
export declare const CodeCompare: ({ before, after, className, }: CodeCompareProps) => ReactNode;
declare interface CodeComparePanelProps {
readonly label: ReactNode;
/** Pre-highlighted HTML (Shiki) — skips internal highlighting. */
readonly html?: string;
/** Plain code text. When `lang` is also provided, the panel
* runs Shiki syntax highlighting automatically. */
readonly code?: string;
/** Shiki language. Triggers syntax highlighting on `code`. */
readonly lang?: ShikiLang;
/** Visual treatment — `'muted'` is dimmed (the "before"),
* `'highlight'` keeps the full styling + adds a primary border. */
readonly tone?: 'muted' | 'highlight';
/** The corner tag. Pass a translated string on a localised page. */
readonly eyebrow?: string;
}
declare interface CodeCompareProps {
readonly before: CodeComparePanelProps;
readonly after: CodeComparePanelProps;
readonly className?: string;
}
export declare const CodeWindow: ({ title, tag, code, lang, html, caret, className, }: CodeWindowProps) => ReactNode;
declare interface CodeWindowProps {
/** Title shown in the chrome — usually a filename. */
readonly title?: string;
/** Tag in the corner — language label, e.g. "TypeScript". */
readonly tag?: string;
/** Plain code text. When `lang` is also provided, the component
* runs Shiki syntax highlighting automatically. */
readonly code?: string;
/** Shiki language. Triggers syntax highlighting on `code`. */
readonly lang?: ShikiLang;
/** Pre-highlighted HTML (skips Shiki). */
readonly html?: string;
/** Show a blinking caret after the code. Default false. Only
* applies to plain (non-highlighted) rendering. */
readonly caret?: boolean;
/** Outer wrapper class — useful for sizing. */
readonly className?: string;
}
export declare const CogIcon: (p: DocIconProps) => ReactNode;
export declare const CompassIcon: (p: DocIconProps) => ReactNode;
declare interface CtaSpec {
readonly label: string;
readonly href: string;
}
export declare const DatabaseIcon: (p: DocIconProps) => ReactNode;
/** Expire a cookie (Max-Age=0). Same isomorphic contract as `setCookie`:
* writes `document.cookie` in the browser, returns the header string. */
export declare const deleteCookie: (name: string, path?: string) => string;
export declare const Dialog: ({ className, children, ...props }: DialogHTMLAttributes) => ReactNode;
export declare const DialogDescription: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const DialogFooter: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const DialogHeader: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const DialogTitle: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const DiscordIcon: (p: DocIconProps) => ReactNode;
export declare const DocCard: ({ title, description, href, icon, className, LinkComponent, }: DocCardProps) => ReactNode;
declare interface DocCardProps {
readonly title: ReactNode;
readonly description?: ReactNode;
readonly href: string;
readonly icon?: ReactNode;
readonly className?: string;
/** Optional client-router Link; falls back to plain . */
readonly LinkComponent?: ComponentType;
}
export declare const DocCards: ({ children, className, cols, stagger, }: DocCardsProps) => ReactNode;
declare interface DocCardsProps {
readonly children: ReactNode;
readonly className?: string;
/** Override the grid columns. Default: 1 on mobile, 2 on md+. */
readonly cols?: 1 | 2 | 3;
/** Stagger the first paint — each card fades + slides up with a
* ~40ms delay. Respects prefers-reduced-motion. Default true. */
readonly stagger?: boolean;
}
declare interface DocIconProps {
readonly className?: string;
/** Accessible label. When omitted the icon is `aria-hidden` and
* should sit next to text. */
readonly title?: string;
}
export declare interface DocNavEntry {
readonly label: string;
readonly href: string;
}
export declare interface DocNavGroup {
readonly section: string;
readonly entries: ReadonlyArray;
}
export declare interface DocsBreadcrumb {
readonly label: string;
readonly href?: string;
}
export declare const DocShell: ({ brand, nav, children, currentPath, className, searchAction, searchPlaceholder, searchLabel, LinkComponent, }: DocShellProps) => ReactNode;
declare interface DocShellProps {
readonly brand: ReactNode;
readonly nav: ReadonlyArray;
readonly children: ReactNode;
readonly currentPath?: string;
readonly className?: string;
/** Search form GET action. When set, renders a search input that
* POSTs ?q=… to this URL. */
readonly searchAction?: string;
/** Placeholder for the search input. Default `'Search docs…'`. */
readonly searchPlaceholder?: string;
/** `aria-label` for the search input. Default `'Search docs'`. */
readonly searchLabel?: string;
/** Optional client-router Link. Passing `Link` from `@voltro/web`
* upgrades every sidebar entry to client-side navigation with
* loader prefetch. */
readonly LinkComponent?: ComponentType;
}
export declare const DocsLayout: ({ brand, nav, children, currentPath, topNav, topRight, search, page, LinkComponent, className, labels, footer, sidebarHeader, }: DocsLayoutProps) => ReactNode;
/** User-facing strings for the layout's own chrome. Defaults are English
* so the layout works unconfigured; pass catalog values to localize. */
export declare interface DocsLayoutLabels {
/** `aria-label` of the mobile menu-open button. Default `'Toggle menu'`. */
readonly toggleMenu?: string;
/** `aria-label` of the mobile drawer backdrop. Default `'Close menu'`. */
readonly closeMenu?: string;
/** `aria-label` of the drawer close button. Default `'Close'`. */
readonly close?: string;
/** Heading of the mobile drawer. Default `'Menu'`. */
readonly menu?: string;
/** Heading above the table of contents. Default `'On this page'`. */
readonly onThisPage?: string;
/** Edit-on-GitHub link text. Default `'Edit this page on GitHub →'`. */
readonly editPage?: string;
/** Prefix before the last-updated date. Default `'Updated'`. */
readonly updated?: string;
/** "Previous page" pager caption. Default `'Previous'`. */
readonly previous?: string;
/** "Next page" pager caption. Default `'Next'`. */
readonly next?: string;
/** `aria-label` of the prev/next pager nav. Default `'Pagination'`. */
readonly pagination?: string;
/** `aria-label` of the breadcrumb nav. Default `'Breadcrumb'`. */
readonly breadcrumb?: string;
}
declare interface DocsLayoutProps {
readonly brand: ReactNode;
readonly nav: ReadonlyArray;
readonly children: ReactNode;
/** Current pathname — used to highlight the active nav entry +
* decide which group opens by default. */
readonly currentPath?: string;
/** Top-bar slots — render between brand and the right-hand actions. */
readonly topNav?: ReactNode;
/** Right-hand actions in the top bar (theme toggle, github link, …). */
readonly topRight?: ReactNode;
/** Optional search slot in the top bar. Drop in `` to wire up the kit's cmd-k modal, or any custom
* search button you want. */
readonly search?: ReactNode;
/** Per-page metadata — when set, the layout renders the breadcrumbs,
* title, description, TOC, prev/next pager, and edit-on-github
* link. Drop this for landing-style index pages. */
readonly page?: {
readonly title: string;
readonly description?: string;
readonly section?: string;
readonly breadcrumbs?: ReadonlyArray;
readonly toc?: ReadonlyArray;
readonly prev?: {
readonly href: string;
readonly label: string;
readonly description?: string;
};
readonly next?: {
readonly href: string;
readonly label: string;
readonly description?: string;
};
readonly editUrl?: string;
readonly lastUpdated?: string;
};
/** Optional client-router Link. Same contract as DocShell. */
readonly LinkComponent?: ComponentType;
readonly className?: string;
/** Override the layout's own chrome strings. Defaults are English. */
readonly labels?: DocsLayoutLabels;
/** Optional footer node — rendered at the very bottom inside the
* content column. */
readonly footer?: ReactNode;
/** Optional node pinned to the TOP of the sidebar (above the nav
* groups), in BOTH the desktop aside and the mobile drawer. Use for
* a section/category switcher ("root toggle"). Omitted → the sidebar
* renders exactly as before. */
readonly sidebarHeader?: ReactNode;
}
export declare interface DocsNavGroup {
readonly section: string;
/** Entries shown directly under the section header, ABOVE the first
* sub-group. Use for a section's 1-2 intro pages. May be empty. */
readonly entries: ReadonlyArray;
/** Optional nested sub-groups. When present they render as
* collapsible sub-headings below `entries`. Sections with no
* meaningful taxonomy leave this empty and render flat. */
readonly subgroups?: ReadonlyArray;
/** Flat entries rendered AFTER the sub-groups — a section's trailing
* ungrouped tail (e.g. plugins not assigned to a sub-group). Keeps
* them visible + in order without forcing every page into a group. */
readonly trailingEntries?: ReadonlyArray;
/** Collapse the group by default. Open groups stay open across
* navigations because the layout keeps its state in React. */
readonly defaultOpen?: boolean;
/** Render the contents WITHOUT the section header (promoted one level),
* always expanded. Use when the sidebar is already scoped to this one
* section by an external switcher, so repeating the section name as a
* header would be redundant. */
readonly headerless?: boolean;
}
export declare interface DocsNavItem {
readonly label: string;
readonly href: string;
/** Visual hint shown next to the label (e.g. "new", "beta"). */
readonly badge?: string;
}
/** A collapsible sub-heading nested one level under a section. Its
* entries render indented; the chevron + open/close affordance mirror
* the top-level section. */
export declare interface DocsNavSubGroup {
readonly label: string;
readonly entries: ReadonlyArray;
readonly defaultOpen?: boolean;
}
export declare interface DocsTocEntry {
readonly id: string;
readonly text: string;
readonly level: 2 | 3;
}
export declare const DropdownMenu: FC;
export declare const DropdownMenuContent: ForwardRefExoticComponent, "ref"> & RefAttributes>;
export declare const DropdownMenuGroup: ForwardRefExoticComponent>;
export declare const DropdownMenuItem: ForwardRefExoticComponent, "ref"> & {
readonly inset?: boolean;
readonly destructive?: boolean;
} & RefAttributes>;
export declare const DropdownMenuLabel: ForwardRefExoticComponent, "ref"> & {
readonly inset?: boolean;
} & RefAttributes>;
export declare const DropdownMenuPortal: FC;
export declare const DropdownMenuRadioGroup: ForwardRefExoticComponent>;
export declare const DropdownMenuRadioItem: ForwardRefExoticComponent, "ref"> & RefAttributes>;
export declare const DropdownMenuSeparator: ForwardRefExoticComponent, "ref"> & RefAttributes>;
export declare const DropdownMenuTrigger: ForwardRefExoticComponent>;
declare interface Feature {
readonly title: string;
readonly body: string;
readonly icon?: ReactNode;
}
export declare const FeatureGrid: ({ sectionTitle, features, className, }: FeatureGridProps) => ReactNode;
declare interface FeatureGridProps {
readonly sectionTitle?: string;
readonly features: ReadonlyArray;
readonly className?: string;
}
export declare const FileIcon: (p: DocIconProps) => ReactNode;
export declare const FolderIcon: (p: DocIconProps) => ReactNode;
/** Read a cookie by name from a header string (SSR: the request `Cookie`
* header) or, when omitted, `document.cookie` (browser). Returns undefined
* when absent or off-document. */
export declare const getCookie: (name: string, cookieHeader?: string) => string | undefined;
export declare const GitHubIcon: (p: DocIconProps) => ReactNode;
export declare const GlobeIcon: (p: DocIconProps) => ReactNode;
export declare const GridOverlay: ({ className, variant, size, }: GridOverlayProps) => ReactNode;
declare interface GridOverlayProps {
readonly className?: string;
/** Grid style — dotted (default, gentler) or lined (stronger
* blueprint feel). */
readonly variant?: 'dots' | 'lines';
/** Cell size in px. Default 32. */
readonly size?: number;
}
declare interface HeroCta {
readonly label: string;
readonly href: string;
}
export declare const HeroSection: ({ eyebrow, title, subtitle, primaryCta, secondaryCta, footnote, className, }: HeroSectionProps) => ReactNode;
declare interface HeroSectionProps {
readonly eyebrow?: string;
readonly title: ReactNode;
readonly subtitle?: ReactNode;
readonly primaryCta?: HeroCta;
readonly secondaryCta?: HeroCta;
readonly footnote?: ReactNode;
readonly className?: string;
}
export declare const HighlightedCode: ({ code, lang, className, }: HighlightedCodeProps) => ReactNode;
declare interface HighlightedCodeProps {
readonly code: string;
readonly lang?: ShikiLang;
/** Outer wrapper class. */
readonly className?: string;
}
export declare const HomeIcon: (p: DocIconProps) => ReactNode;
export declare const HookIcon: (p: DocIconProps) => ReactNode;
export declare const Input: ({ className, type, ...props }: InputHTMLAttributes) => ReactNode;
export declare const Label: ({ className, children, ...props }: LabelHTMLAttributes) => ReactNode;
export declare const LandingCta: ({ title, subtitle, primaryCta, secondaryCta, footnote, className, LinkComponent, }: LandingCtaProps) => ReactNode;
declare interface LandingCtaProps {
readonly title: ReactNode;
readonly subtitle?: ReactNode;
readonly primaryCta: {
readonly label: string;
readonly href: string;
};
readonly secondaryCta?: {
readonly label: string;
readonly href: string;
};
readonly footnote?: ReactNode;
readonly className?: string;
readonly LinkComponent?: ComponentType;
}
export declare const LandingHero: ({ eyebrow, title, titleAccent, subtitle, primaryCta, secondaryCta, footnote, aside, scrollAnchor, scrollLabel, scrollAriaLabel, className, LinkComponent, }: LandingHeroProps) => ReactNode;
declare interface LandingHeroProps {
readonly eyebrow?: ReactNode;
/** Two-line heading: the second line gets the gradient + animation. */
readonly title: ReactNode;
/** Optional second line — when set, the layout renders title on
* line 1 and this on line 2 with the gradient/animation. */
readonly titleAccent?: ReactNode;
readonly subtitle?: ReactNode;
readonly primaryCta?: CtaSpec;
readonly secondaryCta?: CtaSpec;
readonly footnote?: ReactNode;
/** Code window / illustration slot — sits on the right at md+, below
* the CTAs on mobile. */
readonly aside?: ReactNode;
/** Anchor link for "scroll down" hint. */
readonly scrollAnchor?: string;
/** Visible caption on the scroll-down hint. Default `'Scroll'`. */
readonly scrollLabel?: ReactNode;
/** `aria-label` for the scroll-down hint. Default `'Scroll down'`. */
readonly scrollAriaLabel?: string;
readonly className?: string;
readonly LinkComponent?: ComponentType;
}
export declare const LandingStats: ({ stats, className, }: LandingStatsProps) => ReactNode;
declare interface LandingStatsProps {
readonly stats: ReadonlyArray;
readonly className?: string;
}
export declare const LayersIcon: (p: DocIconProps) => ReactNode;
export declare const LinkedInIcon: (p: DocIconProps) => ReactNode;
export declare const LOCALE_COOKIE = "voltro:locale";
export declare interface LocaleOption {
/** Language code written to the cookie (e.g. 'en', 'de'). */
readonly code: string;
/** Human label shown in the picker (e.g. 'English', 'Deutsch'). */
readonly label: string;
}
export declare const LocaleSwitcher: {
({ locales, current, onChange, ariaLabel, className, }: LocaleSwitcherProps): ReactNode;
displayName: string;
};
export declare interface LocaleSwitcherProps {
/** The languages to offer. */
readonly locales: ReadonlyArray;
/** Override the active code. When omitted, hydrates from the `voltro:locale`
* cookie on mount (falling back to the first option until then). Pass
* `useLocale()` for a flash-free, mismatch-free control. */
readonly current?: string;
/** Called with the chosen code before the reload. Return `false` to suppress
* the reload (e.g. when the consumer has a hot-swap i18n runtime). */
readonly onChange?: (code: string) => boolean | void;
/** Accessible label for the control. Default `'Language'`. */
readonly ariaLabel?: string;
readonly className?: string;
}
export declare const LockIcon: (p: DocIconProps) => ReactNode;
export declare const LoginCard: ({ title, description, eyebrow, submitLabel, oauthProviders, onOAuth, signUpHref, forgotHref, className, labels, ...formProps }: LoginCardProps) => ReactNode;
/** User-facing strings — pass catalog values to localize. Defaults are
* English so the card works unconfigured. */
export declare interface LoginCardLabels {
/** Email field label. Default `'Email'`. */
readonly email?: string;
/** Email input placeholder. Default `'you@company.com'`. */
readonly emailPlaceholder?: string;
/** Password field label. Default `'Password'`. */
readonly password?: string;
/** "Forgot password?" link text (shown when `forgotHref` is set).
* Default `'Forgot?'`. */
readonly forgot?: string;
/** OAuth divider caption. Default `'or continue with'`. */
readonly oauthDivider?: string;
/** Sign-up footer prompt (shown when `signUpHref` is set).
* Default `'New here?'`. */
readonly signUpPrompt?: string;
/** Sign-up footer link text. Default `'Create an account'`. */
readonly signUp?: string;
}
declare interface LoginCardProps extends Omit, 'children'> {
readonly title?: string;
readonly description?: string;
readonly eyebrow?: string;
readonly submitLabel?: string;
readonly oauthProviders?: ReadonlyArray;
readonly onOAuth?: (providerId: string) => void;
readonly signUpHref?: string;
readonly forgotHref?: string;
readonly className?: string;
/** Override the card's own chrome strings. Defaults are English. */
readonly labels?: LoginCardLabels;
}
export declare const MeshBackdrop: ({ className, tone, }: MeshBackdropProps) => ReactNode;
declare interface MeshBackdropProps {
readonly className?: string;
/** Brand mode — picks the colour palette. `cool` = violet/cyan
* (default), `warm` = amber/rose. The kit's `--primary` is honoured
* via the `from-primary/*` Tailwind utility callers can pass via
* className. */
readonly tone?: 'cool' | 'warm';
}
declare interface NavLink {
readonly label: string;
readonly href: string;
}
declare interface OAuthProvider {
readonly id: string;
readonly label: string;
}
export declare const PackageIcon: (p: DocIconProps) => ReactNode;
export declare const PageHeader: ({ children, className }: PageHeaderProps) => ReactNode;
declare interface PageHeaderProps {
readonly children: ReactNode;
readonly className?: string;
}
/** Extract both preference cookies (theme + locale) from a cookie header (or
* `document.cookie` when omitted). Tolerates `null`/`undefined` headers.
* An invalid theme value is dropped (not coerced); an empty locale is
* dropped. */
export declare const parsePreferenceCookies: (cookieHeader?: string | null) => PreferenceCookies;
export declare const PencilIcon: (p: DocIconProps) => ReactNode;
export declare interface PreferenceCookies {
/** undefined → server should fall back to its default (typically the
* app config's theme). 'system' means the client's pre-paint script
* decides against `prefers-color-scheme`. */
readonly theme?: ThemePreference;
/** Locale tag as written by the client (lowercase IETF: `en`, `de`,
* `fr-CA`). Consumer decides which tags are valid + how to fall back if
* the value is unknown. */
readonly locale?: string;
}
export declare const ProfileMenu: ({ identity, links, languages, currentLanguage, onLanguageChange, logoutUrl, onLogout, signInUrl, labels, }: ProfileMenuProps) => ReactNode;
export declare interface ProfileMenuLabels {
/** Section label for the theme switch. Default `'Theme'`. */
readonly theme?: string;
/** Section label for the language switch. Default `'Language'`. */
readonly language?: string;
/** Sign-out menu item. Default `'Sign out'`. */
readonly signOut?: string;
/** Sign-in menu item. Default `'Sign in'`. */
readonly signIn?: string;
/** `aria-label` of the avatar trigger. Default `'Open profile menu'`. */
readonly openMenu?: string;
/** Labels of the three theme options. Defaults `'System'`/`'Light'`/`'Dark'`. */
readonly themes?: {
readonly system?: string;
readonly light?: string;
readonly dark?: string;
};
}
export declare interface ProfileMenuLanguage {
readonly code: string;
readonly label: string;
}
export declare interface ProfileMenuLink {
readonly key: string;
readonly label: string;
readonly href: string;
readonly icon?: ReactNode;
readonly external?: boolean;
}
export declare interface ProfileMenuProps {
readonly identity?: {
readonly name: string;
readonly sublabel?: string;
};
readonly links?: ReadonlyArray;
readonly languages?: ReadonlyArray;
/** Override the cookie-derived language (e.g. when the consumer
* knows the SSR-resolved value before the cookie round-trips). */
readonly currentLanguage?: string;
/** Optional hook that fires AFTER the cookie is written. Default
* behaviour: `window.location.reload()` so the SSR re-runs in the
* new locale. Return `false` to suppress the reload (useful when
* a client-side i18n runtime can hot-swap). */
readonly onLanguageChange?: (code: string) => boolean | void;
/** URL the logout form posts to. Triggers a full page nav. For
* apps that have a soft-logout RPC + in-place UI swap (no reload),
* pass `onLogout` instead — it takes precedence over `logoutUrl`. */
readonly logoutUrl?: string;
/** Callback-style logout — fires when the user picks "Log out". When
* supplied, replaces the form-post-to-`logoutUrl` flow with a pure
* JS handler. Use this for soft-logout flows that re-issue
* subscriptions on the same WebSocket without navigating away. */
readonly onLogout?: () => void;
readonly signInUrl?: string;
/** User-facing strings — pass values from the consuming app's catalog
* to localize the menu's own chrome. Defaults are English. */
readonly labels?: ProfileMenuLabels;
}
export declare const PuzzleIcon: (p: DocIconProps) => ReactNode;
export declare const RocketIcon: (p: DocIconProps) => ReactNode;
export declare const RssIcon: (p: DocIconProps) => ReactNode;
export declare const ScrollReveal: ({ children, className, distance, delay, threshold, disabled, }: ScrollRevealProps) => ReactNode;
declare interface ScrollRevealProps {
readonly children: ReactNode;
readonly className?: string;
/** Pixel distance the element rises from. Default 24. */
readonly distance?: number;
/** Delay before the animation runs, in ms. Default 0. */
readonly delay?: number;
/** Intersection threshold 0…1. Default 0.15 — element starts
* animating when 15% of it is in view. */
readonly threshold?: number;
/** Disable the animation entirely (passthrough). Useful when the
* parent is already a stagger container. */
readonly disabled?: boolean;
}
export declare const SearchIcon: (p: DocIconProps) => ReactNode;
export declare const SearchModal: ({ search, renderItem, itemKey, onSelect, placeholder, emptyLabel, empty, open: controlledOpen, onOpenChange, labels, }: SearchModalProps) => ReactNode;
export declare interface SearchModalLabels {
/** `aria-label` of the dialog. Default `'Search'`. */
readonly dialog?: string;
/** `aria-label` of the click-to-close backdrop. Default `'Close search'`. */
readonly close?: string;
/** Prompt shown when the input is empty (and no `empty` node given).
* Default `'Start typing to search.'`. */
readonly startTyping?: string;
/** Footer caption next to the ↑↓ keys. Default `'navigate'`. */
readonly navigate?: string;
/** Footer caption next to the return key. Default `'select'`. */
readonly select?: string;
/** Footer caption next to the ⌘K key. Default `'toggle'`. */
readonly toggle?: string;
}
export declare interface SearchModalProps {
/** Search function — called on every keystroke. Should return
* results synchronously (the kit doesn't manage async state here;
* if you need async, debounce + useState in the caller). */
readonly search: (query: string) => ReadonlyArray;
/** Renders a single hit. Receives the item + whether it's currently
* highlighted (for hover/keyboard focus styles). */
readonly renderItem: (item: TItem, isActive: boolean) => ReactNode;
/** Stable key for an item — used for React keys + the active index
* match across renders. */
readonly itemKey: (item: TItem) => string;
/** Selecting a hit (click OR Enter). Caller typically navigates. */
readonly onSelect: (item: TItem) => void;
/** Placeholder for the input. */
readonly placeholder?: string;
/** Label shown when there are no hits + the query has 1+ char. */
readonly emptyLabel?: string;
/** Initial empty state — when the input is empty. Show recent
* searches, sections, whatever fits. */
readonly empty?: ReactNode;
/** Open state — controlled. Default uses internal state. */
readonly open?: boolean;
readonly onOpenChange?: (open: boolean) => void;
/** User-facing strings for the modal's own chrome (dialog/backdrop
* aria-labels, footer hint captions, initial-state prompt). Defaults
* are English so the modal works unconfigured. */
readonly labels?: SearchModalLabels;
}
export declare const SearchTrigger: ({ onClick, placeholder, openLabel, className, }: SearchTriggerProps) => ReactNode;
declare interface SearchTriggerProps {
readonly onClick: () => void;
readonly placeholder?: string;
/** `aria-label` for the trigger button. Default `'Open search'`. */
readonly openLabel?: string;
readonly className?: string;
}
export declare const Select: ({ className, children, ...props }: SelectHTMLAttributes) => ReactNode;
export declare const Separator: ({ className, orientation, ...props }: SeparatorProps) => ReactNode;
declare interface SeparatorProps extends HTMLAttributes {
readonly orientation?: 'horizontal' | 'vertical';
}
/** Build a `Set-Cookie`-style string AND, in the browser, write it to
* `document.cookie`. Returns the string so SSR callers can emit a header. */
export declare const setCookie: (name: string, value: string, options?: SetCookieOptions) => string;
export declare interface SetCookieOptions {
/** Default: 400 days (Chrome's cap). Pass 0 to delete the cookie. */
readonly maxAgeSeconds?: number;
/** Default: '/' — preference applies app-wide. */
readonly path?: string;
/** Default: 'lax' — allows top-level navigation but blocks cross-site
* XHR, which is what preference cookies want. 'none' implies `Secure`
* (modern browsers reject a SameSite=None cookie without it). */
readonly sameSite?: 'lax' | 'strict' | 'none';
}
/** Tailwind-styled widgets keyed by widget kind. Pass to
* ``. Any kind not listed
* here falls back to @voltro/ui's plain accessible default — today that is
* only `hidden` (invisible anyway) and `custom` (the render-prop signal).
* Value contracts mirror the plain defaults exactly: `daterange` and
* `async-select` are styled text inputs until the framework grows richer
* bindings for those kinds (same ceiling as @voltro/ui's defaults). */
export declare const shadcnWidgets: WidgetRegistry;
export declare interface ShellLinkProps {
readonly to: string;
readonly className?: string;
readonly children: ReactNode;
/** Pre-warm the destination on hover/focus. */
readonly prefetch?: boolean;
}
export declare const SHIKI_LANGS: readonly ["text", "ts", "tsx", "typescript", "js", "jsx", "json", "bash", "sh", "shell", "sql", "yaml", "toml", "md", "mdx", "html", "css", "diff"];
export declare type ShikiLang = typeof SHIKI_LANGS[number];
export declare const SiteFooter: ({ brand, tagline, social, columns, bottomLeft, bottomRight, copyrightHolder, socialLabel, LinkComponent, className, }: SiteFooterProps) => ReactNode;
export declare interface SiteFooterColumn {
/** Section heading — rendered as small uppercase tracking. */
readonly title: ReactNode;
readonly links: ReadonlyArray;
}
export declare interface SiteFooterLink {
readonly label: ReactNode;
readonly href: string;
/** External links bypass the internal Link (router) so they navigate
* via plain . Defaults to detecting `http:`/`https:` prefix in
* the href. */
readonly external?: boolean;
/** Small label shown next to the link text (e.g. "new", "beta"). */
readonly badge?: ReactNode;
}
declare interface SiteFooterProps {
/** Brand mark — usually a small wordmark + Badge. */
readonly brand: ReactNode;
/** Short paragraph under the brand. ~2 lines of prose. */
readonly tagline?: ReactNode;
/** Social / external profile links. Rendered as a row of 32×32
* icon buttons under the tagline. */
readonly social?: ReadonlyArray;
/** The column groups. 3 columns is the visual sweet spot; 4 fits
* but starts feeling busy. */
readonly columns: ReadonlyArray;
/** Bottom strip slots. Left typically holds the copyright; right
* holds status / language / theme toggle. When `bottomLeft` is
* omitted, a default `© {year} {copyrightHolder}` line renders. */
readonly bottomLeft?: ReactNode;
readonly bottomRight?: ReactNode;
/** Copyright holder shown in the default bottom-left line (only when
* `bottomLeft` is not supplied). Default `'Voltro. Built on the
* framework.'`. Pass your own so the shipped footer isn't Voltro-
* branded. */
readonly copyrightHolder?: ReactNode;
/** `aria-label` for the social-links list. Default `'Social links'`. */
readonly socialLabel?: string;
/** Optional client-router Link. Same contract as the other kit
* compositions. Defaults to plain . */
readonly LinkComponent?: ComponentType;
readonly className?: string;
}
export declare interface SiteFooterSocial {
/** Accessible label, e.g. "GitHub". */
readonly label: string;
readonly href: string;
readonly icon: ReactNode;
}
export declare const Skeleton: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const Sparkles: ({ count, tone, intensity, className, }: SparklesProps) => ReactNode;
declare interface SparklesProps {
/** How many dots to render. Default 22. Sweet spot is 16–28 —
* fewer feels accidental, more starts to feel busy. */
readonly count?: number;
/** Brand mode. Cool = violet/cyan accents (default); warm = amber/rose. */
readonly tone?: 'cool' | 'warm';
/** Density tier. `'subtle'` is the default and what most heros want;
* `'normal'` bumps the max-opacity peak a bit; `'strong'` makes
* the field more obvious. Each tier still respects the
* "professional, not playful" budget. */
readonly intensity?: 'subtle' | 'normal' | 'strong';
readonly className?: string;
}
export declare interface StatSpec {
/** Numeric value — drives the count-up animation. */
readonly value: number;
/** Optional unit suffix shown next to the value (e.g. "ms", "%"). */
readonly unit?: string;
/** Static prefix (e.g. "<", "~"). Useful for things like "<5ms". */
readonly prefix?: string;
/** Formatter — passed through to AnimatedNumber. */
readonly format?: 'integer' | 'percent' | ((n: number) => string);
/** Caption below the number (becomes the eyebrow label at the top
* of the cell). */
readonly label: ReactNode;
/** Small sub-caption below the number. */
readonly sub?: ReactNode;
/** Optional icon — pass any kit icon. Sized to the eyebrow's
* cap-height so it reads as part of the label, not as decoration. */
readonly icon?: ReactNode;
}
export declare const StatusBadge: ({ href, label, tone, }: StatusBadgeProps) => ReactNode;
declare interface StatusBadgeProps {
readonly href: string;
readonly label?: ReactNode;
/** `'ok' | 'degraded' | 'down'` — colours the dot accordingly. */
readonly tone?: 'ok' | 'degraded' | 'down';
}
export declare const Step: ({ title, children, className }: StepProps) => ReactNode;
declare interface StepProps {
readonly title?: ReactNode;
readonly children: ReactNode;
readonly className?: string;
}
export declare const Steps: ({ children, className }: StepsProps) => ReactNode;
declare interface StepsProps {
readonly children: ReactNode;
readonly className?: string;
}
export declare const Tabs: ({ defaultValue, value, onValueChange, className, children, ...props }: TabsProps) => ReactNode;
export declare const TabsContent: ({ value, className, children, ...props }: TabsContentProps) => ReactNode;
declare interface TabsContentProps extends HTMLAttributes {
readonly value: string;
}
export declare const TabsList: ({ className, ...props }: HTMLAttributes) => ReactNode;
declare interface TabsProps extends HTMLAttributes {
readonly defaultValue: string;
readonly value?: string;
readonly onValueChange?: (v: string) => void;
}
export declare const TabsTrigger: ({ value, className, children, ...props }: TabsTriggerProps) => ReactNode;
declare interface TabsTriggerProps extends HTMLAttributes {
readonly value: string;
}
export declare const TerminalIcon: (p: DocIconProps) => ReactNode;
export declare const Textarea: ({ className, ...props }: TextareaHTMLAttributes) => ReactNode;
export declare const THEME_COOKIE = "voltro:theme";
/**
* Inline script to drop into . Reads the `voltro:theme` cookie
* (set by ThemeToggle / ProfileMenu) BEFORE React hydrates so the
* initial paint matches — no FOUC even when the server hasn't yet
* baked the cookie-derived class.
*
*
*
* Cookie wins over matchMedia: 'system' (or absent) falls back to
* the OS preference; 'light' / 'dark' are absolute.
*/
export declare const themeBootScript: () => string;
export declare type ThemePreference = 'system' | 'light' | 'dark';
export declare const ThemeToggle: ({ className, lightLabel, darkLabel, switchToLightLabel, switchToDarkLabel, ...props }: ThemeToggleProps) => ReactNode;
declare interface ThemeToggleProps extends HTMLAttributes {
readonly lightLabel?: ReactNode;
readonly darkLabel?: ReactNode;
/** `aria-label` while dark is active (the action = go light).
* Default `'Switch to light theme'` — pass a catalog value to localize. */
readonly switchToLightLabel?: string;
/** `aria-label` while light is active (the action = go dark).
* Default `'Switch to dark theme'` — pass a catalog value to localize. */
readonly switchToDarkLabel?: string;
}
export declare const Toast: ({ variant, className, children, ...props }: ToastProps) => ReactNode;
export declare const ToastDescription: ({ className, ...props }: HTMLAttributes) => ReactNode;
declare interface ToastProps extends HTMLAttributes {
readonly variant?: 'default' | 'destructive' | 'success';
}
export declare const ToastTitle: ({ className, ...props }: HTMLAttributes) => ReactNode;
export declare const TocScrollSpy: ({ contentSelector }: TocScrollSpyProps) => ReactNode;
declare interface TocScrollSpyProps {
/** CSS selector for the content container holding the headings.
* Defaults to `main` since the layout's content lives there. */
readonly contentSelector?: string;
}
export declare const Toggle: ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({
variant?: "default" | "outline" | null | undefined;
size?: "default" | "sm" | "lg" | null | undefined;
} & ClassProp) | undefined) => string> & RefAttributes>;
export declare const ToggleGroup: ForwardRefExoticComponent<(ComponentPropsWithoutRef< ForwardRefExoticComponent<(RTG.ToggleGroupSingleProps | RTG.ToggleGroupMultipleProps) & RefAttributes>> & ToggleGroupVariants) & RefAttributes>;
export declare const ToggleGroupItem: ForwardRefExoticComponent, "ref"> & ToggleGroupVariants & RefAttributes>;
declare type ToggleGroupVariants = VariantProps;
export declare const toggleVariants: (props?: ({
variant?: "default" | "outline" | null | undefined;
size?: "default" | "sm" | "lg" | null | undefined;
} & ClassProp) | undefined) => string;
export declare const UI_SHADCN_NAME: "framework-ui-shadcn";
/** Raw bolt path data, for apps that need to compose their own SVG. */
export declare const VOLTRO_BOLT_PATH: {
readonly full: "M28 5 13 27 22 26 20 43 35 21 26 22Z";
readonly front: "M28 5 13 27 22 26 20 43Z";
readonly back: "M28 5 20 43 35 21 26 22Z";
};
/** Brand violet — the canonical primary. Exposed for ad-hoc usage. */
export declare const VOLTRO_VIOLET = "#7C3AED";
/**
* The app / advertising icon: the bolt centred on a rounded square with
* its own background, so it stands on a home screen, store listing, or
* ad placement regardless of the surface behind it.
*/
export declare const VoltroIcon: ({ size, tone, radius, title, className, style, }: VoltroIconProps) => ReactNode;
export declare interface VoltroIconProps {
/** Pixel size (square). Default 40. */
readonly size?: number;
/** `brand` (violet squircle + white bolt — works on any surface) · `dark` (near-black squircle + glowing violet bolt). */
readonly tone?: VoltroIconTone;
/** Corner radius as a fraction of size. Default 0.225 (iOS-style squircle look). */
readonly radius?: number;
readonly title?: string;
readonly className?: string;
readonly style?: CSSProperties;
}
export declare type VoltroIconTone = 'brand' | 'dark';
/** The bolt mark on a transparent background. */
export declare const VoltroMark: ({ size, variant, title, className, ...rest }: VoltroMarkProps) => ReactNode;
export declare interface VoltroMarkProps extends Omit, 'width' | 'height' | 'viewBox' | 'fill' | 'xmlns' | 'children' | 'ref' | 'role' | 'aria-label' | 'aria-hidden'> {
/** Pixel size (square). Default 32. Pass a string like '1em' to track font-size. */
readonly size?: number | string;
/** `gradient` (default, two-facet violet) · `mono` (currentColor) · `white`. */
readonly variant?: VoltroMarkVariant;
/** Accessible label. Omit + set `aria-hidden` when paired with a text label. */
readonly title?: string;
}
export declare type VoltroMarkVariant = 'gradient' | 'mono' | 'white';
/**
* Mark + wordmark lock-up for headers / marketing. The text is real
* type set in the surrounding font and `currentColor`, so it inherits
* the app's typography and is correct in light + dark automatically.
*/
export declare const VoltroWordmark: ({ size, markVariant, label, className, style, }: VoltroWordmarkProps) => ReactNode;
export declare interface VoltroWordmarkProps {
/** Mark height in px; the wordmark text scales with it. Default 28. */
readonly size?: number;
readonly markVariant?: VoltroMarkVariant;
/** Wordmark label. Default "Voltro". */
readonly label?: string;
readonly className?: string;
readonly style?: CSSProperties;
}
/** Promise that resolves once Shiki has loaded — for SSR/build callers
* that want to await before rendering. */
export declare const whenHighlighterReady: () => Promise;
export declare const XIcon: (p: DocIconProps) => ReactNode;
export { }
declare global {
var __voltroShikiHighlighter: Highlighter | null | undefined;
var __voltroShikiHighlighterPromise: Promise | null | undefined;
}