TypeScript Interfaces

Overview

Babelize Elements is built with full TypeScript support. Every component exports its own props and data interfaces, so you get complete type safety and IntelliSense.

Install the library or a component, then import the types you need:

From the npm package:

import {
  LanguageSwitcher,
  PhoneInput,
  NavBar,
  type Locale,
  type Country,
  type NavLink,
} from "@babelize/elements";

Or, if you copied the components in with the CLI:

import { LanguageSwitcher } from "@/components/ui/language-switcher";
import { PhoneInput, type Country } from "@/components/ui/phone-input";
import { NavBar, type NavLink } from "@/components/ui/navbar";
import type { Locale } from "@/components/ui/types";

Language Switcher

Locale

export interface Locale {
  /** ISO 639-1 / BCP 47 code (e.g. "en", "fr-FR", "ar-SA") — required */
  code: string;
  /** Override display name (auto-resolved from built-in mapping if omitted) */
  label?: string;
  /** Override flag emoji (auto-detected from code if omitted) */
  flag?: string;
  /** Override RTL (auto-detected from code if omitted) */
  rtl?: boolean;
}

LanguageSwitcherProps

export interface LanguageSwitcherProps {
  /** Array of available locales — only `code` is required */
  locales: Locale[];
  /** Selected locale code. Provide this to control the component. */
  value?: string;
  /** Initial selected locale code when uncontrolled (default: first locale's code) */
  defaultValue?: string;
  /** Callback when locale changes */
  onValueChange?: (code: string) => void;
  /** Show flag emojis next to locale names (default: false) */
  showFlags?: boolean;
  /** Display labels in native language or English (default: "english") */
  label?: "native" | "english";
  /** Additional CSS classes */
  className?: string;
}

Phone Input

Country

export interface Country {
  /** ISO 3166-1 alpha-2 code (e.g. "US", "GB", "IN") */
  code: string;
  /** Dial code (e.g. "+1", "+44", "+91") */
  dialCode: string;
  /** Country name */
  name: string;
  /** Flag emoji */
  flag: string;
}

PhoneInputProps

export interface PhoneInputProps {
  /** Phone number. Provide this to control the component. */
  value?: string;
  /** Initial phone number when uncontrolled */
  defaultValue?: string;
  /** Callback when the number or the selected country changes */
  onValueChange?: (phone: string, country: Country) => void;
  /** Default country code (default: "US") */
  defaultCountry?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Disable the input */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Show country flag next to dial code (default: true) */
  showFlags?: boolean;
  /** Accessible label for the input */
  label?: string;
}

NavLink

export interface NavLink {
  /** Link text — required */
  label: string;
  /** Link URL — required */
  href: string;
}

NavBar uses the same shared Locale interface as LanguageSwitcher. The old NavBarLocale alias was removed in 1.1.0 — import Locale instead.

NavBar's currentLocale / onLocaleChange and PhoneInput's onChange / showFlag were removed in 1.1.3. Use value / onValueChange / showFlags.

NavBarProps

export interface NavBarProps {
  /** Logo element (renders before nav links) */
  logo?: React.ReactNode;
  /** Navigation links */
  links?: NavLink[];
  /** Available locales for language selector */
  locales?: Locale[];
  /** Selected locale code. Provide this to control the component. */
  value?: string;
  /** Initial locale code when uncontrolled (default: first locale's code) */
  defaultValue?: string;
  /** Callback when locale changes */
  onValueChange?: (code: string) => void;
  /** Component used to render internal links (default: "a") */
  linkComponent?: React.ElementType;
  /** CTA button */
  cta?: { label: string; href: string };
  /** Show GitHub icon button */
  showGitHub?: boolean;
  /** GitHub repository URL */
  githubUrl?: string;
  /** Make navbar sticky at top (default: true) */
  sticky?: boolean;
  /** Show flags in language selector (default: true) */
  showFlags?: boolean;
  /** Additional CSS classes */
  className?: string;
}

Because Babelize Elements components are fully owned by you once installed, you can extend these interfaces directly in the component files. For example, to add a custom meta field to each locale, add it to the Locale interface in your local copy:

export interface Locale {
  code: string;
  label?: string;
  flag?: string;
  rtl?: boolean;
  /** Your custom field */
  meta?: Record<string, string>;
}