rl-core-front 0.3.0 → 0.5.0

package/src/components/ui/filter-sheet.tsx

@@ -10,6 +10,7 @@ import { activeFilterCount } from "#core/_utils/filter";
 import { Button } from "#core/components/ui/button";
 import { FilterFieldControl } from "#core/components/ui/filter-field";
 import { FilterGroupBlock } from "#core/components/ui/filter-group";
+import { SegmentedControl } from "#core/components/ui/segmented-control";
 import { Separator } from "#core/components/ui/separator";
 import {
   Sheet,
@@ -29,6 +30,17 @@ export interface FilterSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   filters: FiltersState;
+  /**
+   * Campos que a barra da listagem já controla — somem do modo simples para a
+   * mesma escolha não existir em dois lugares.
+   *
+   * Continuam no catálogo, e isso não é detalhe: é o catálogo que serializa o
+   * filtro (`buildFilter` percorre o schema). Tirá-los de lá faria o atalho da
+   * barra parar de filtrar, sem erro nenhum. O modo avançado também segue com
+   * todos: é a saída de emergência, e esconder campo ali tornaria ilegível um
+   * filtro salvo que o use.
+   */
+  hiddenFields?: string[];
 }
 
 /**
@@ -55,6 +67,7 @@ export function FilterSheet({
   open,
   onOpenChange,
   filters,
+  hiddenFields = [],
 }: FilterSheetProps): JSX.Element {
   const { t } = useI18n();
   const labelFor = useFieldLabel();
@@ -83,6 +96,21 @@ export function FilterSheet({
     }
   };
 
+  /**
+   * O que o painel não mostra, o painel não mexe.
+   *
+   * O desfecho de `/logs` é escolhido na barra e não aparece aqui dentro —
+   * então nem "Aplicar" nem "Limpar" podem desmarcá-lo. Filtrar por rota
+   * enquanto se olha o sucesso é somar uma condição à outra, não trocar de
+   * assunto.
+   */
+  const keepHidden = (): FilterValues =>
+    Object.fromEntries(
+      hiddenFields
+        .filter((field) => values[field])
+        .map((field) => [field, values[field]]),
+    );
+
   const apply = (): void => {
     filters.setMode(draftMode);
     if (draftMode === "advanced") {
@@ -90,18 +118,18 @@ export function FilterSheet({
         filters.setTree(draftTree);
       }
     } else {
-      filters.setValues(draft);
+      filters.setValues({ ...draft, ...keepHidden() });
     }
     onOpenChange(false);
   };
 
   const clear = (): void => {
-    setDraft({});
+    setDraft(keepHidden());
     setDraftTree(initialTree(schema));
     if (draftMode === "advanced") {
       filters.setTree(initialTree(schema));
     } else {
-      filters.setValues({});
+      filters.setValues(keepHidden());
     }
     onOpenChange(false);
   };
@@ -111,13 +139,17 @@ export function FilterSheet({
       ? draftTree
         ? countConditions(draftTree)
         : 0
-      : activeFilterCount(draft);
+      : activeFilterCount(draft, hiddenFields);
 
-  const modes: { id: FilterMode; label: string }[] = [
-    { id: "simple", label: t("filters.simple") },
-    { id: "advanced", label: t("filters.advanced") },
+  const modes = [
+    { value: "simple", label: t("filters.simple") },
+    { value: "advanced", label: t("filters.advanced") },
   ];
 
+  const visibleFields = schema.filter(
+    (field) => !hiddenFields.includes(field.field),
+  );
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
@@ -131,23 +163,13 @@ export function FilterSheet({
           </SheetDescription>
         </SheetHeader>
 
-        <div className="inline-flex overflow-hidden rounded-md border border-border">
-          {modes.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              onClick={() => switchMode(item.id)}
-              className={cn(
-                "px-3 py-1.5 text-sm transition-colors",
-                draftMode === item.id
-                  ? "bg-primary text-primary-foreground"
-                  : "hover:bg-accent",
-              )}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
+        <SegmentedControl
+          fullWidth
+          label={t("filters.title")}
+          options={modes}
+          value={draftMode}
+          onValueChange={(value) => switchMode(value as FilterMode)}
+        />
 
         <SheetBody className="-mx-1 space-y-5 px-1">
           {loading && <Spinner className="mx-auto mt-8" />}
@@ -160,7 +182,7 @@ export function FilterSheet({
 
           {!loading && schema.length > 0 && draftMode === "simple" && (
             <>
-              {schema.map((field) => (
+              {visibleFields.map((field) => (
                 <FilterFieldControl
                   key={field.field}
                   field={field}

package/src/components/ui/index.ts

@@ -12,17 +12,19 @@ export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./field";
-export * from "./filter-chips";
 export * from "./filter-field";
 export * from "./filter-group";
 export * from "./filter-rule";
 export * from "./filter-sheet";
 export * from "./input";
 export * from "./label";
+export * from "./password-requirements";
 export * from "./row-actions";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";
+export * from "./simple-select";
 export * from "./sonner";
 export * from "./spinner";
 export * from "./switch";

package/src/components/ui/password-requirements.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Check, Circle } from "lucide-react";
+import type { JSX } from "react";
+
+import {
+  PASSWORD_RULES,
+  passwordScore,
+} from "#core/_utils/password";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface PasswordRequirementsProps {
+  /** Valor atual do campo de senha. */
+  value: string;
+  /** Esconde a barra de força e deixa só a lista. */
+  hideStrength?: boolean;
+  className?: string;
+}
+
+/** Cor da barra por faixa de força — cheia, porque aqui é preenchimento. */
+const STRENGTH_COLOR = (score: number, total: number): string => {
+  if (score === total) {
+    return "bg-success";
+  }
+  if (score >= total - 1) {
+    return "bg-warning";
+  }
+  return "bg-destructive";
+};
+
+/**
+ * Lista viva das exigências de senha, marcando o que já foi cumprido.
+ *
+ * Substitui a mensagem única de erro ("mín. 8 caracteres com maiúscula,
+ * minúscula, número e símbolo"), que só aparecia depois de errar e obrigava a
+ * pessoa a comparar a frase inteira com o que digitou para achar o que faltava.
+ *
+ * Não valida nada: quem decide é o schema Yup da tela, com o mesmo regex. Isto
+ * é a explicação em forma de lista — por isso mora em `components/ui` e não
+ * conhece formulário nenhum.
+ */
+export function PasswordRequirements({
+  value,
+  hideStrength = false,
+  className,
+}: PasswordRequirementsProps): JSX.Element {
+  const { t } = useI18n();
+  const total = PASSWORD_RULES.length;
+  const score = passwordScore(value);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {!hideStrength && (
+        <div
+          className="h-1.5 w-full overflow-hidden rounded-full bg-track"
+          role="progressbar"
+          aria-valuenow={score}
+          aria-valuemin={0}
+          aria-valuemax={total}
+          aria-label={t("validation.rules.strength")}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full transition-all duration-300",
+              STRENGTH_COLOR(score, total),
+            )}
+            style={{ width: `${(score / total) * 100}%` }}
+          />
+        </div>
+      )}
+
+      {/*
+        `list-none` com ícone próprio, e não marcador nativo: o ✓/○ é o que
+        carrega o estado. `aria-live` para quem usa leitor de tela perceber a
+        regra sendo cumprida enquanto digita.
+      */}
+      <ul className="flex flex-col gap-1" aria-live="polite">
+        {PASSWORD_RULES.map((rule) => {
+          const ok = rule.test(value);
+          return (
+            <li
+              key={rule.key}
+              className={cn(
+                "flex items-start gap-2 text-xs transition-colors",
+                ok ? "text-success-strong" : "text-muted-foreground",
+              )}
+            >
+              <span className="mt-0.5 shrink-0" aria-hidden>
+                {ok ? (
+                  <Check className="h-3.5 w-3.5" />
+                ) : (
+                  <Circle className="h-3.5 w-3.5" />
+                )}
+              </span>
+              {/* Sem truncamento: a regra tem que caber inteira, quebrando linha
+                  se precisar — cortada, ela deixa de dizer o que exige. */}
+              <span className="min-w-0 flex-1">{t(rule.key, rule.params)}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/components/ui/segmented-control.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+import { TRACK_CLASS, TRACK_ITEM_CLASS } from "./track.styles";
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+}
+
+export interface SegmentedControlProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: SegmentedOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Rótulo acessível do grupo — o que essas opções escolhem. */
+  label: string;
+  /**
+   * Ocupa a largura toda, com as opções dividindo o espaço em partes iguais.
+   *
+   * Para quando o controle é o cabeçalho de um bloco — duas opções encostadas à
+   * esquerda de um painel largo ficam tortas. Solto, ele mede pelo conteúdo.
+   */
+  fullWidth?: boolean;
+}
+
+/**
+ * Escolha única no formato das abas: uma opção acesa dentro de uma trilha.
+ *
+ * Tem a pele do `Tabs`, mas não é aba: aba troca de painel, isto escolhe um
+ * valor. Por isso são botões de alternância num `role="group"`, e não o
+ * `Tabs` do Radix — que emitiria `role="tablist"` com `aria-controls`
+ * apontando para um painel inexistente.
+ *
+ * Vale quando as opções cabem na linha e são poucas (até ~5). Passando disso,
+ * `Select` — trilha que quebra em duas linhas fica pior que uma lista.
+ */
+export const SegmentedControl = ({
+  options,
+  value,
+  onValueChange,
+  label,
+  fullWidth = false,
+  className,
+  ...props
+}: SegmentedControlProps): React.JSX.Element => (
+  <div
+    role="group"
+    aria-label={label}
+    className={cn(
+      TRACK_CLASS,
+      fullWidth ? "flex w-full" : "inline-flex",
+      className,
+    )}
+    {...props}
+  >
+    {options.map((option) => (
+      <button
+        key={option.value}
+        type="button"
+        aria-pressed={option.value === value}
+        // Só para vestir a pele compartilhada, que seleciona por `data-state`.
+        // Quem anuncia o estado ao leitor de tela continua sendo o aria-pressed.
+        data-state={option.value === value ? "active" : "inactive"}
+        onClick={() => onValueChange(option.value)}
+        className={cn(TRACK_ITEM_CLASS, fullWidth && "flex-1")}
+      >
+        {option.label}
+      </button>
+    ))}
+  </div>
+);

package/src/components/ui/simple-select.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { JSX } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "#core/components/ui/select";
+
+/**
+ * Mesmo formato que o `Label` dos enums do §7 já produz — nada a converter
+ * entre um catálogo de opções e este componente.
+ */
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SimpleSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  /**
+   * Rótulo da opção "nenhum". Ausente, o campo não oferece vazio.
+   *
+   * O Radix não aceita `value=""` num item, então a opção vazia precisa de uma
+   * chave-sentinela — detalhe que some aqui dentro em vez de reaparecer em toda
+   * tela que precisa de um campo opcional.
+   */
+  emptyLabel?: string;
+  disabled?: boolean;
+}
+
+const EMPTY = "__none__";
+
+/**
+ * O caso comum do `Select`: uma lista de opções e um valor.
+ *
+ * Os primitivos do `select.tsx` continuam disponíveis para quem precisa de
+ * grupos, separadores ou item com markup — este cobre o resto, que era a
+ * mesma casca de cinco componentes repetida a cada campo.
+ */
+export function SimpleSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyLabel,
+  disabled,
+}: SimpleSelectProps): JSX.Element {
+  return (
+    <Select
+      value={value || (emptyLabel ? EMPTY : "")}
+      onValueChange={(next) => onChange(next === EMPTY ? "" : next)}
+      disabled={disabled}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {emptyLabel && <SelectItem value={EMPTY}>{emptyLabel}</SelectItem>}
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/ui/switch.tsx

@@ -19,7 +19,9 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        // `bg-card` e não `bg-background`: no tema claro o card é branco puro e
+      // destaca do trilho; o fundo da página quase se confunde com ele.
+      "pointer-events-none block h-4 w-4 rounded-full bg-card shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>

package/src/components/ui/tabs.tsx

@@ -5,6 +5,8 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
+import { TRACK_CLASS, TRACK_ITEM_CLASS } from "./track.styles";
+
 const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
@@ -13,10 +15,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className,
-    )}
+    className={cn("inline-flex", TRACK_CLASS, className)}
     {...props}
   />
 ));
@@ -28,10 +27,7 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className,
-    )}
+    className={cn(TRACK_ITEM_CLASS, className)}
     {...props}
   />
 ));

package/src/components/ui/track.styles.ts

@@ -0,0 +1,31 @@
+/**
+ * A pele compartilhada dos controles em trilha: `Tabs` e `SegmentedControl`.
+ *
+ * Os dois sempre tiveram a mesma aparência, mas cada um com a sua cópia das
+ * classes — então o contraste quebrado no tema escuro precisava ser corrigido
+ * em dois lugares, e só um foi. Aqui é uma verdade só (§6 do CLAUDE.md).
+ *
+ * Ambos marcam o item com `data-state="active" | "inactive"`: o `Tabs` porque o
+ * Radix já emite esse atributo, o `SegmentedControl` porque escrevê-lo à mão
+ * sai mais barato que manter uma segunda lista de classes condicionais.
+ */
+
+/** A trilha: o fundo em que as opções vivem. */
+export const TRACK_CLASS =
+  "h-10 items-center justify-center rounded-lg bg-track p-1 text-muted-foreground ring-1 ring-inset ring-border/60";
+
+/**
+ * A opção. O estado aceso vem por `data-[state=active]`, com anel próprio:
+ * a sombra sozinha é invisível sobre fundo escuro, e era parte do motivo de a
+ * opção selecionada sumir no tema escuro.
+ */
+export const TRACK_ITEM_CLASS = [
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5",
+  "text-sm font-medium ring-offset-background transition-all",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+  "disabled:pointer-events-none disabled:opacity-50",
+  // Feedback de mouse no que ainda não está selecionado — antes não havia nenhum.
+  "data-[state=inactive]:hover:bg-foreground/5 data-[state=inactive]:hover:text-foreground",
+  "data-[state=active]:bg-track-active data-[state=active]:text-foreground",
+  "data-[state=active]:shadow-sm data-[state=active]:ring-1 data-[state=active]:ring-border",
+].join(" ");

package/src/contexts/brand-context.tsx

@@ -33,6 +33,18 @@ export interface Brand {
   logo?: ReactNode;
   /** Frase curta sob a logo na tela de login. Opcional. */
   tagline?: string;
+  /**
+   * Onde a marca fica na tela de login.
+   *
+   * - `"top"` (padrão): logo pequena acima do formulário, tudo num cartão só.
+   * - `"right"` / `"left"`: a marca ocupa metade da tela, com um divisor entre
+   *   ela e o formulário. É para logo grande — espremida no topo do cartão ela
+   *   sai ilegível, e aumentar o cartão para caber estragaria o formulário.
+   *
+   * Em tela estreita os dois lados viram empilhado com a marca em cima: meia
+   * tela de logo num celular não deixaria o formulário aparecer.
+   */
+  loginLayout?: "top" | "left" | "right";
 }
 
 /** O que os componentes do core consomem: sem opcionais, tudo já resolvido. */
@@ -41,6 +53,7 @@ export interface BrandContextType {
   mark: ReactNode;
   logo: ReactNode;
   tagline: string | null;
+  loginLayout: "top" | "left" | "right";
 }
 
 const BrandContext = createContext<BrandContextType | undefined>(undefined);
@@ -64,6 +77,7 @@ export function BrandProvider({
       mark,
       logo: brand?.logo ?? mark,
       tagline: brand?.tagline ?? null,
+      loginLayout: brand?.loginLayout ?? "top",
     };
   }, [brand, t]);
 
@@ -88,6 +102,7 @@ export function useBrand(): BrandContextType {
       mark: defaultMark,
       logo: defaultMark,
       tagline: null,
+      loginLayout: "top",
     }
   );
 }

package/src/contexts/color-mode-context.tsx

@@ -10,6 +10,8 @@ import {
   useState,
 } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
+
 export const STORAGE_KEY = "color-mode";
 
 export type ColorPreference = "light" | "dark" | "system";
@@ -54,7 +56,7 @@ export function ColorModeProvider({ children }: { children: React.ReactNode }):
   const [resolved, setResolved] = useState(false);
 
   useEffect(() => {
-    const saved = localStorage.getItem(STORAGE_KEY);
+    const saved = safeStorage.get(STORAGE_KEY);
     if (isPreference(saved)) {
       setPreferenceState(saved);
     }
@@ -77,7 +79,7 @@ export function ColorModeProvider({ children }: { children: React.ReactNode }):
 
   const setPreference = useCallback((p: ColorPreference) => {
     setPreferenceState(p);
-    localStorage.setItem(STORAGE_KEY, p);
+    safeStorage.set(STORAGE_KEY, p);
   }, []);
 
   const toggle = useCallback(

package/src/contexts/i18n-context.tsx

@@ -10,13 +10,50 @@ import {
   useState,
 } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
 import { en } from "#core/i18n/messages/en";
 import { pt } from "#core/i18n/messages/pt";
 
 export type Locale = "pt" | "en";
-const MESSAGES = { pt, en } as const;
 const STORAGE_KEY = "locale";
 
+/**
+ * Dicionário de um idioma: objeto aninhado de strings, como `i18n/messages`.
+ *
+ * O tipo é aberto de propósito — o projeto acrescenta as seções dele, e travar
+ * a forma aqui obrigaria o core a conhecer as chaves de quem o instala.
+ */
+export type Messages = Record<string, unknown>;
+
+/** Dicionário do projeto, por idioma. Cada um é opcional. */
+export type ProjectMessages = Partial<Record<Locale, Messages>>;
+
+/**
+ * Mescla o dicionário do projeto sobre o do core.
+ *
+ * É profundo porque as seções coincidem: um projeto que acrescenta
+ * `nav.tasks` não pode apagar o resto de `nav`, que é o que o shell usa. Em
+ * conflito, o projeto vence — é o que permite renomear "Logs" sem tocar no
+ * pacote.
+ */
+function deepMerge(base: Messages, override: Messages): Messages {
+  const result: Messages = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    const current = result[key];
+    const bothObjects =
+      current !== null &&
+      typeof current === "object" &&
+      !Array.isArray(current) &&
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value);
+    result[key] = bothObjects
+      ? deepMerge(current as Messages, value as Messages)
+      : value;
+  }
+  return result;
+}
+
 export interface I18nContextType {
   locale: Locale;
   setLocale: (l: Locale) => void;
@@ -34,31 +71,60 @@ function resolve(obj: unknown, path: string): string | undefined {
   }, obj) as string | undefined;
 }
 
-export function I18nProvider({ children }: { children: React.ReactNode }): JSX.Element {
+export interface I18nProviderProps {
+  children: React.ReactNode;
+  /**
+   * Dicionário do projeto, mesclado sobre o do core (§14: o core não sabe os
+   * textos de quem o instala).
+   *
+   * ```tsx
+   * <I18nProvider messages={{ pt: { nav: { tasks: "Tarefas" } } }}>
+   * ```
+   */
+  messages?: ProjectMessages;
+}
+
+export function I18nProvider({
+  children,
+  messages,
+}: I18nProviderProps): JSX.Element {
   const [locale, setLocaleState] = useState<Locale>("pt");
 
+  // Mescla uma vez por dicionário, não a cada tradução: `t` roda em todo render
+  // de toda tela que usa texto.
+  const dictionary = useMemo(
+    () => ({
+      pt: messages?.pt ? deepMerge(pt, messages.pt) : (pt as Messages),
+      en: messages?.en ? deepMerge(en, messages.en) : (en as Messages),
+    }),
+    [messages],
+  );
+
   useEffect(() => {
-    const saved = (localStorage.getItem(STORAGE_KEY) as Locale) || null;
+    const saved = (safeStorage.get(STORAGE_KEY) as Locale) || null;
     if (saved === "pt" || saved === "en") {setLocaleState(saved);}
   }, []);
 
   const setLocale = useCallback((l: Locale) => {
     setLocaleState(l);
-    localStorage.setItem(STORAGE_KEY, l);
+    safeStorage.set(STORAGE_KEY, l);
     document.cookie = `${STORAGE_KEY}=${l}; path=/; max-age=31536000`;
   }, []);
 
   const t = useCallback(
     (key: string, params?: Record<string, string | number>) => {
+      // Sem tradução no idioma corrente, cai no português; sem nenhuma, devolve
+      // a própria chave — é o que deixa `label: "Tarefas"` funcionar como texto
+      // cru em quem não quer cadastrar dicionário.
       const raw =
-        resolve(MESSAGES[locale], key) ?? resolve(MESSAGES.pt, key) ?? key;
+        resolve(dictionary[locale], key) ?? resolve(dictionary.pt, key) ?? key;
       if (!params) {return raw;}
       return Object.entries(params).reduce(
         (str, [k, v]) => str.replace(new RegExp(`\\{${k}\\}`, "g"), String(v)),
         raw,
       );
     },
-    [locale],
+    [locale, dictionary],
   );
 
   const value = useMemo(