Internacionalización

La librería no traduce tu producto. Solo localiza los textos internos del kit (Cerrar, Cargando, Limpiar, Claro/Oscuro…). El routing, copy de negocio y páginas siguen en el i18n de la app (next-intl, next-i18next, etc.).

Dsi18nProvider · ES

ESEN

Cargando

ClaroOscuroSistema

Sin coincidencia → «Sin resultados» · × → «Limpiar»

123…8

Claves en vivo

loadingCargando

clearLimpiar

emptyState.noResultsSin resultados

combobox.placeholderBuscar…

pagination.previousAnterior

pagination.nextSiguiente

theme.lightClaro

theme.darkOscuro

theme.systemSistema

Sin messages → español por defecto (30 claves).

Dos capas

Capa	Quién	Qué traduce
App	Next.js + next-intl (o similar)	Rutas /es, /en, copy de pantallas, errores de negocio
UI kit	Dsi18nProvider	Labels, placeholders y aria-label de componentes DEVSOFTEC

No mezcles ambos. La app decide el locale; el kit solo recibe un diccionario de strings.

Uso básico

import { Dsi18nProvider } from "devsoftec-ui";

<Dsi18nProvider messages={{
  loading: "Loading",
  clear: "Clear",
  "emptyState.noResults": "No results",
  "theme.light": "Light",
  "theme.dark": "Dark",
  "theme.system": "System",
}}>
  <App />
</Dsi18nProvider>

El provider mezcla tu diccionario sobre el español por defecto: basta con sobrescribir las claves que uses. Sin provider, todo cae a ES.

Puente con Next.js (next-intl)

1. Locales y mensajes de la app viven en next-intl (middleware, [locale], messages/*.json).
2. En el layout, lee el locale y pasa solo las claves del kit a Dsi18nProvider.

app/[locale]/layout.tsx

import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { Dsi18nProvider } from "devsoftec-ui";

export default async function LocaleLayout({ children }: { children: React.ReactNode }) {
  const messages = await getMessages();
  const uiKit = (messages as { uiKit?: Record<string, string> }).uiKit;

  return (
    <NextIntlClientProvider messages={messages}>
      <Dsi18nProvider messages={uiKit}>
        {children}
      </Dsi18nProvider>
    </NextIntlClientProvider>
  );
}

Ejemplo en messages/en.json:

{
  "Home": { "title": "Welcome" },
  "uiKit": {
    "loading": "Loading",
    "clear": "Clear",
    "close": "Close",
    "emptyState.noResults": "No results",
    "combobox.placeholder": "Search…",
    "pagination.previous": "Previous",
    "pagination.next": "Next",
    "theme.light": "Light",
    "theme.dark": "Dark",
    "theme.system": "System"
  }
}

Cambia de idioma con el router de Next (/en/... ↔ /es/...); el kit se actualiza porque messages.uiKit cambia con el locale.

Claves disponibles

Export: defaultMessages desde devsoftec-ui.

Clave	ES (default)
close	Cerrar
loading	Cargando
clear	Limpiar
emptyState.noResults	Sin resultados
confirm.label	Escribe el texto para confirmar
confirm.permanent	Esta acción es permanente.
pagination.previous	Anterior
pagination.next	Siguiente
datepicker.placeholder	Selecciona una fecha
combobox.placeholder	Buscar…
tabs.label	Pestañas
breadcrumb.label	Migas de pan
dropdown.menu	Menú
theme.light	Claro
theme.dark	Oscuro
theme.system	Sistema
theme.label	Tema
theme.changeTo.light	Cambiar a tema claro
theme.changeTo.dark	Cambiar a tema oscuro
theme.changeTo.system	Cambiar a tema sistema

Qué componentes lo usan

• Modal / Sheet → close
• Spinner → loading (aria; visible si pasas label)
• Combobox → clear, emptyState.noResults, combobox.placeholder
• AlertDialog → confirm.*
• Pagination → pagination.previous / next
• DatePicker → datepicker.placeholder
• ThemeToggle → theme.*

Los textos de negocio (títulos de página, CTAs, tablas) no van aquí: tradúcelos en la app.