Skip to content

v2.0.0

Choose a tag to compare

@sapatmohit sapatmohit released this 19 Oct 19:48
8026d55

A ground-up visual redesign: every component now uses shadcn/ui theme tokens, animates with motion, and exposes a classNames prop per part.

⚠️ Breaking changes

  • Theme tokens required. Components are styled with shadcn semantic tokens (bg-popover, text-muted-foreground, ring-ring, …) instead of fixed zinc / emerald colours, so they inherit your theme. shadcn projects need nothing; otherwise add the tokens once — see Theme tokens. (#65)
  • LocaleNumber and RelativeTime removed. They wrapped Intl formatters and rendered bare text. Use Intl.NumberFormat / Intl.RelativeTimeFormat directly. (#72)
  • New runtime dependencies: motion and lucide-react.

Components

  • LanguageSwitcher — trigger variant / size, animated menu that flips when there's no room, search with clear and empty state, align / side, renderOption, showCode, searchable. (#67)
  • LanguageSwitcherPill — spring-animated indicator, variant, size, showFlags, disabled. (#68)
  • PhoneInput — unified field with a full-width focus ring, aria-invalid styling, redesigned country menu, countries to restrict / reorder, size. (#69)
  • NavBar — variant="floating", spring link highlight, activeHref, animated mobile menu, globe fallback when flags are off. (#70)
  • TranslationWidget — two-pane card, animated swap, character count with maxLength, clear, copy, loading, defaultSourceText. (#71)
  • All: classNames slots with exported *ClassNames types; prefers-reduced-motion respected.

Fixes and internals

  • RTL detection honours explicit script subtags (pa-Arab RTL, sd-Deva LTR); language names fall back to Intl.DisplayNames; no component keeps a private locale table. (#75)
  • Menus reopened while still closing take clicks immediately. (#76)
  • NavBar mirrors its layout for RTL locales (#52); flags resolve from 2-letter region subtags (#53).

Docs

  • New preview: theme picker, dark mode, Open in v0 / Lovable / Bolt, and short copy-paste demos. (#72)
  • Install commands use the official @babelize shadcn namespace — npx shadcn@latest add @babelize/language-switcher, no setup needed. (#74)

Full changelog: v1.3.0...v2.0.0