Skip to content

Releases: babelize/babelize-elements

v1.3.0

Choose a tag to compare

@sapatmohit sapatmohit released this 17 Oct 05:17
0eba923

Behaviour changes

No props were removed or renamed. These changes affect markup and keyboard handling in existing setups:

  • Listbox semantics: in LanguageSwitcher, PhoneInput and NavBar, role="listbox" now sits on the options container instead of the popup wrapper, and the active option is exposed via aria-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-input and navbar now depend on a new use-listbox-navigation registry 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)
  • maxHeight prop on LanguageSwitcher, PhoneInput and NavBar to cap the popup height. Defaults to 15rem, 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

Full Changelog: v1.2.0...v1.3.0

v1.2.0

Choose a tag to compare

@sapatmohit sapatmohit released this 11 Oct 13:24
b1d5e75

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, ml shows 🇮🇳 instead of 🇲🇱 and ca shows 🇪🇸 instead of 🇦🇩. eo and yi now fall back to 🌐. (#41)
  • LanguageSwitcher direction: Locale.rtl now sets the direction of the root and options. An explicit rtl: false is no longer overridden by built-in detection. (#38)
  • NavBar labels: NavBar now uses the shared language tables. Regional codes like en-US render as "English 🇺🇸" instead of "EN-US 🌐", and per-locale label/flag overrides are applied to the trigger. (#42)
  • shadcn registry: language-switcher and navbar now depend on a new locale-data registry 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: /docs now 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

Full Changelog: v1.1.4...v1.2.0

v1.1.4

Choose a tag to compare

@sapatmohit sapatmohit released this 17 Sep 09:37

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 registryItemNames export, and registry constants that are only read inside their own module.
  • The unused geist dependency — fonts come from next/font/google; only the CSS variable names mention geist.

v1.1.3

Choose a tag to compare

@sapatmohit sapatmohit released this 17 Sep 09:14

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 lacked type="button" (submitting any enclosing form) and aria-expanded; Escape closed nothing; body.overflow was cleared instead of restored; an uncontrolled bar defaulted to "en" even when locales did 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 → use value, onValueChange
  • PhoneInput: onChange, showFlag → use onValueChange, showFlags

Added

  • @babelize/elements/utils — the cn helper without the "use client" directive, callable from server components.

v1.1.2

Choose a tag to compare

@sapatmohit sapatmohit released this 07 Sep 11:13

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.md for 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

Choose a tag to compare

@sapatmohit sapatmohit released this 07 Sep 10:51

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

Choose a tag to compare

@sapatmohit sapatmohit released this 07 Sep 10:31

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, so import "@babelize/elements/style.css" was always an error.
  • NavBar no longer imports next/link. It renders plain <a> elements by
    default and accepts linkComponent for client-side routing:
    <NavBar linkComponent={Link} />. next is no longer a dependency of any kind,
    so the library works in any React app.
  • Locale is now a single shared interface exported once from the package root.
    The NavBarLocale alias is gone — NavBar's Locale and LanguageSwitcher's
    Locale were two different shapes hidden behind that alias.
  • NavBar props: currentLocale → value, onLocaleChange → onValueChange.
  • PhoneInput props: onChange → onValueChange, showFlag → showFlags.
    The old names still work for this release and warn as deprecated.

Fixes

  • PhoneInput's value and LanguageSwitcher's defaultValue only 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
    via value and uncontrolled mode via defaultValue.
  • LanguageSwitcher fired onValueChange twice 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, so id, name, aria-*, and data-* now pass through. PhoneInput
    forwards its ref to the underlying <input> and accepts name, making it
    usable in plain HTML forms.
  • cn and COUNTRIES are exported from the package root.
  • next-themes is 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.