Repository navigation
Releases: babelize/babelize-elements
Release list
v1.3.0
Behaviour changes
No props were removed or renamed. These changes affect markup and keyboard handling in existing setups:
- Listbox semantics: in
LanguageSwitcher,PhoneInputandNavBar,role="listbox"now sits on the options container instead of the popup wrapper, and the active option is exposed viaaria-activedescendant(or roving focus in NavBar). Update tests or selectors that queried the old structure. (#44) - Keyboard: Arrow Up/Down, Home/End, Enter and Escape now navigate and select in these popups, and pressing an arrow key on a closed trigger opens it. (#44)
- shadcn registry:
language-switcher,phone-inputandnavbarnow depend on a newuse-listbox-navigationregistry item. The shadcn CLI installs it automatically. (#44)
New
- LanguageSwitcherPill: segmented pill switcher with an animated active indicator, radio-group semantics, arrow / Home / End keys and RTL support. (#19)
maxHeightprop onLanguageSwitcher,PhoneInputandNavBarto cap the popup height. Defaults to15rem, the same as before. (#44)useListboxNavigation: the shared keyboard hook behind the popups, available from the registry. (#44)
Website
- Landing navbar shows a live GitHub counter that cycles stars, forks and PRs; the Community section shows all three. (#48)
What's Changed
- feat: add language switcher pill by @ayamanshaikh in #19
- feat(a11y): keyboard navigation for listbox popups (LanguageSwitcher, PhoneInput, NavBar) by @ujwalbajaj in #44
- feat(website): add GitHub stars/forks/PRs counter in navbar and community by @TanmayNileshShinde in #48
New Contributors
- @ayamanshaikh made their first contribution in #19
- @TanmayNileshShinde made their first contribution in #48
Full Changelog: v1.2.0...v1.3.0
v1.2.0
Behaviour changes
No props were removed or renamed. These fixes change what some existing setups render:
- LanguageSwitcher flags: language codes now map to the country where the language is primarily spoken. For example,
mlshows 🇮🇳 instead of 🇲🇱 andcashows 🇪🇸 instead of 🇦🇩.eoandyinow fall back to 🌐. (#41) - LanguageSwitcher direction:
Locale.rtlnow sets the direction of the root and options. An explicitrtl: falseis no longer overridden by built-in detection. (#38) - NavBar labels: NavBar now uses the shared language tables. Regional codes like
en-USrender as "English 🇺🇸" instead of "EN-US 🌐", and per-localelabel/flagoverrides are applied to the trigger. (#42) - shadcn registry:
language-switcherandnavbarnow depend on a newlocale-dataregistry item. The shadcn CLI installs it automatically. (#42)
New components
- TranslationWidget: side-by-side source and target panes with per-pane language pickers, a swap button and RTL-aware text. (#22)
- LocaleNumber: locale-aware formatting for decimals, percentages, units and compact notation. (#40)
- RelativeTime: locale-aware relative time ("3 hours ago") with optional live updates. It is SSR-safe. (#40)
Fixes
- LanguageSwitcher: corrected native names for Armenian, Lao, Khmer, Amharic and Sindhi. (#39)
- Docs:
/docsnow redirects to/docs/getting-started. (#21)
What's Changed
- style: format rulebook.tsx so CI passes by @sapatmohit in #20
- fix: redirect /docs to /docs/getting-started by @sapatmohit in #21
- fix(language-switcher): honor Locale.rtl on root and options by @Wenyan0315 in #38
- fix(language-switcher): correct five native language names by @Wenyan0315 in #39
- feat: add TranslationWidget component by @ujwalbajaj in #22
- feat: add locale-aware number and relative time formatters by @Chandana5599 in #40
- fix(language-switcher): correct wrong and invalid flag mappings by @ujwalbajaj in #41
- fix(navbar): honor locale overrides and regional codes via shared locale data by @Wenyan0315 in #42
New Contributors
- @Wenyan0315 made their first contribution in #38
- @ujwalbajaj made their first contribution in #22
- @Chandana5599 made their first contribution in #40
Full Changelog: v1.1.4...v1.2.0
v1.1.4
Fixed
LanguageSwitcher rendered RTL rows in the wrong order. Each option already carried dir="rtl", which lays a flex row out right-to-left on its own — the flex-row-reverse applied on top of it reversed the row back into left-to-right order, the opposite of what the class was there to achieve. The trigger reversed itself the same way, and text-left pinned the label against the direction rather than following it.
Direction now comes from dir alone. The root element carries it, so the whole widget switches direction for an RTL locale, and a caller can still override it by passing dir. Labels use the logical text-start.
Removed
Dead code only — no API change:
- Two orphaned landing-page components (
hero-demo,theme-toggle), referenced nowhere. - The unused
registryItemNamesexport, and registry constants that are only read inside their own module. - The unused
geistdependency — fonts come fromnext/font/google; only the CSS variable names mention geist.
v1.1.3
Repairs the published package, the shadcn registry, and a batch of component defects.
Fixed
The package was unusable in the Next.js App Router. Bundling stripped the per-file "use client" directives, so importing any component from a React Server Component crashed the build with useState is not a function. The directive is now emitted into both the ESM and CJS output, and the packaging smoke test asserts it so it cannot silently disappear again.
Installing via npm produced unstyled components. Tailwind does not scan node_modules, so none of the component classes were generated. The required step is now documented for Tailwind v4 (@source) and v3 (content).
Registry. Components were published as registry:component — the one type the shadcn CLI does not resolve against the consumer's ui alias — and utils was listed as a dependency of every component. Together those wrote cn into the lib directory while rewriting the import to the utils alias: an unresolvable import in any project that relocated utils, and a silent overwrite of the project's own cn in every other case. Components are now registry:ui and assume cn already exists, matching how shadcn publishes its own. Verified across both CLIs and default, custom-ui and custom-utils alias configurations.
Components, each covered by a regression test:
NavBar: picking a language on mobile did nothing — the outside-click handler only guarded the desktop container, closing the menu before the option's click landed.NavBar: the language menu mounted two listboxes into the accessibility tree at once.NavBar: the mobile menu toggle lackedtype="button"(submitting any enclosing form) andaria-expanded;Escapeclosed nothing;body.overflowwas cleared instead of restored; an uncontrolled bar defaulted to"en"even whenlocalesdid not contain it.PhoneInput: the country search box shared a ref with the phone field, so the forwarded ref pointed at the wrong element and selecting a country dropped focus onto an unmounting node.PhoneInput/LanguageSwitcher: the search boxes had no accessible name.
Also: the CJS types condition was missing, so dist/index.d.cts was unreachable; the interfaces page documented a deprecated prop as the real API; the site declared summary_large_image without ever supplying an Open Graph image.
Removed — breaking
Shipped in a patch release by maintainer decision. A ^1.1.0 range picks this up automatically, and the removed props fail silently rather than loudly — update call sites together.
NavBar:currentLocale,onLocaleChange→ usevalue,onValueChangePhoneInput:onChange,showFlag→ useonValueChange,showFlags
Added
@babelize/elements/utils— thecnhelper without the"use client"directive, callable from server components.
v1.1.2
Patch release fixing where the bundled CLI writes files.
Fixed
npx @babelize/elements add <component> wrote to the wrong directories.
components.json stores aliases as import specifiers (@/components), and the CLI
turned one into a path by stripping the @/ prefix. In a Next.js project — where
@/* maps to ./src/* — files landed a level too high:
./components/ui/navbar.tsx instead of ./src/components/ui/navbar.tsx
./lib/utils.ts instead of ./src/lib/utils.ts
and the @/lib/utils imports inside them then resolved to nothing. The CLI reported
success either way.
Alias resolution now reads compilerOptions.paths from your tsconfig.json or
jsconfig.json, prefers the most specific pattern, honours baseUrl, and tolerates
the comments and trailing commas that tsconfig allows.
The npx shadcn@latest add @elements/<component> path was unaffected — shadcn's CLI
already resolved aliases correctly.
Also
- Dropped nine unused Google Font families from the docs site, removing a
render-blocking third-party stylesheet request. - Added
ARCHITECTURE.mdfor contributors: how the library, registry and docs site
relate, the conventions every component follows, and the files a new component
touches.
No changes to the components themselves; upgrading from 1.1.1 is safe.
v1.1.1
Patch release fixing the copy-paste install path.
Fixed
shadcn add @elements/<component> was broken. Items in this registry listed
their shared dependencies (locale-types, use-controllable-state) by bare name,
and the shadcn CLI resolves a bare name against its own registry rather than the one
serving the item. Installing any component failed with:
The item at https://ui.shadcn.com/r/styles/new-york-v4/locale-types.json
was not found.
The registry now emits absolute URLs for its own items, and the bundled
npx @babelize/elements add CLI accepts either an absolute URL or a bare name.
If you are on 1.1.0 and use the bundled CLI, upgrade — 1.1.0's CLI cannot read the
current registry output.
No changes to the components themselves; upgrading from 1.1.0 is safe.
v1.1.0
Heads up if you already use this package
NavBar no longer uses next/link. It renders plain <a> elements so the
library works outside Next.js. If you were relying on client-side navigation, pass
your router's link component to restore it:
import Link from "next/link";
<NavBar links={links} linkComponent={Link} />Without that change your nav links still work, but they do a full page load.
NavBarLocale type is gone. Import Locale instead — NavBar and
LanguageSwitcher now share one type.
@babelize/elements/style.css is gone. That subpath never resolved to a real
file, so importing it always errored.
Everything else is backwards compatible: currentLocale, onLocaleChange,
onChange, and showFlag still work as deprecated aliases.
Fix the published package and unify the component API.
The published package now actually resolves. build:lib used plain tsc, which
does not rewrite tsconfig paths, so every compiled component shipped
import { cn } from "@/lib/utils" — an unresolvable specifier. npm install @babelize/elements followed by import { LanguageSwitcher } failed for every
consumer. The build now uses tsup and emits real ESM (dist/index.js) plus real
CJS (dist/index.cjs) with resolved imports and correct extensions. A packaging
smoke test installs the tarball into a bare project on every CI run.
Breaking changes
exports["./style.css"]is removed. It pointed at a file the build never
produced, soimport "@babelize/elements/style.css"was always an error.NavBarno longer importsnext/link. It renders plain<a>elements by
default and acceptslinkComponentfor client-side routing:
<NavBar linkComponent={Link} />.nextis no longer a dependency of any kind,
so the library works in any React app.Localeis now a single shared interface exported once from the package root.
TheNavBarLocalealias is gone —NavBar'sLocaleandLanguageSwitcher's
Localewere two different shapes hidden behind that alias.NavBarprops:currentLocale→value,onLocaleChange→onValueChange.PhoneInputprops:onChange→onValueChange,showFlag→showFlags.
The old names still work for this release and warn as deprecated.
Fixes
PhoneInput'svalueandLanguageSwitcher'sdefaultValueonly seeded
internal state and never synced, so both components were uncontrolled no matter
what the parent passed. All three components now support real controlled mode
viavalueand uncontrolled mode viadefaultValue.LanguageSwitcherfiredonValueChangetwice per selection.- The Gujarati flag emoji used a non-regional-indicator codepoint and rendered as
garbage.
Additions
- All three components forward refs and spread unknown props onto their root
element, soid,name,aria-*, anddata-*now pass through.PhoneInput
forwards its ref to the underlying<input>and acceptsname, making it
usable in plain HTML forms. cnandCOUNTRIESare exported from the package root.next-themesis no longer a runtime dependency; it was only used by the docs site.
Also in this release
Add shadcn-compatible component registry (/r/[name].json + /registry.json) and a bundled CLI (npx @babelize/elements add <component> / list). Components are now styled with plain Tailwind classes instead of CSS-variable design tokens, and the theming docs/theme-switcher demos have been removed.