@aoctech/ui 0.1.5 → 0.3.0

package/README.md

@@ -105,7 +105,69 @@ so a badge renders what the server said rather than a client-side mapping of an
 | `Checkbox` | Base UI `Checkbox`. |
 | `Radio` + `RadioGroup` | Base UI `Radio`. |
 | `Switch` | Base UI `Switch`. |
-| `DatePicker` + `Calendar` | Built on `react-day-picker`. |
+| `DatePicker` + `Calendar` | Built on `react-day-picker`. `locale` (BCP-47, default `"pt-BR"`; `"en"` built in) drives calendar names, first weekday, displayed date (Intl) and aria copy; `labels` overrides single strings. `Modal` and `ErrorState` take the same `locale` (Modal also `labels`). Since 0.2.0. |
+| `BottomNav` | Phone-only primary nav (hidden from `md`): up to four tabs, an optional central action, an optional "more" tab that opens a bottom sheet (Base UI `Drawer`). Since 0.3.0. |
+| `UserMenu` | Avatar (initials or image) opening a Base UI `Menu`: full name and e-mail, optional view switcher, extra items, sign-out. Since 0.3.0. |
+
+### Navigation: `BottomNav` and `UserMenu`
+
+Neither knows anything about routing. The caller says which item is `active` (or `current`) from
+its own router, and passes `renderLink` so links navigate client-side; without it a plain `<a>` is
+rendered. Items take `href` (a link) or `onClick` (a button).
+
+```tsx
+import Link from "next/link"
+import {BottomNav, BottomNavSpacer, UserMenu, type RenderLink} from "@aoctech/ui"
+
+const renderLink: RenderLink = props => <Link {...props} />
+
+<UserMenu
+  name={session.name}
+  email={session.email}
+  imageUrl={session.avatarUrl}
+  views={[
+    {label: "Portal", href: "/dashboard", current: !inConsole},
+    {label: "Console", href: "/console/overview", current: inConsole},
+  ]}
+  onSignOut={logout}
+  renderLink={renderLink}
+/>
+
+<main>
+  {children}
+  <BottomNavSpacer />   {/* keeps the page's end clear of the bar; gone from md up */}
+</main>
+<BottomNav
+  renderLink={renderLink}
+  action={{label: "Novo", icon: <Plus />, onClick: openCreate}}   // or null on screens without one
+  items={[
+    {label: "Resumo", icon: <Home />, href: "/console/finance", active: pathname === "/console/finance"},
+    {label: "A pagar/receber", icon: <Receipt />, href: "/console/finance/bills", active: is("/bills")},
+    {label: "Extrato", icon: <List />, href: "/console/finance/statement", active: is("/statement")},
+    {type: "more", label: "Mais", icon: <Menu />, items: [
+      {label: "Recorrências", icon: <Repeat />, href: "/console/finance/recurrences", active: is("/recurrences")},
+      {label: "Cartões", icon: <CreditCard />, href: "/console/finance/cards", active: is("/cards")},
+      {label: "Importar", icon: <Upload />, href: "/console/finance/import", active: is("/import")},
+      {label: "Relatórios", icon: <Chart />, href: "/console/finance/reports", active: is("/reports"), group: "Análise"},
+      {label: "Configuração", icon: <Settings />, href: "/console/finance/accounts", active: is("/accounts"), group: "Análise"},
+    ]},
+  ]}
+/>
+```
+
+- **Four tabs at most**, split evenly around the action, which stays dead centre. Labels wrap to two
+  lines (after a `/` first) rather than truncating; keep them short anyway.
+- **The "more" tab** is shown active when any sheet item is (`active` overrides). Sheet items with
+  the same `group` are listed under that heading. Choosing one closes the sheet; Escape, the close
+  button and swipe-down close it too, and focus returns to the tab.
+- **Safe area:** the bar pads itself by `env(safe-area-inset-bottom)` — the app needs
+  `viewport-fit=cover` in its viewport meta for that inset to be non-zero. Clear the page's end
+  with `<BottomNavSpacer />`, or with the `bottomNavInset` class string on a container that owns its
+  bottom padding.
+- **Always touch-sized**, whatever `data-density` says: a console that is compact on a desk is still a
+  thumb on a phone. Bar targets are 72px tall and at least 60px wide on a 320px screen; sheet rows are 48px tall.
+- **Copy:** `locale` (default `"pt-BR"`) and `labels` as in `Modal` — `BottomNav` labels `nav`,
+  `close`; `UserMenu` labels `trigger`, `views`, `signOut`.
 
 Deliberately small. Components arrive when a second app needs one, not in anticipation — the whole
 point of extracting this was to stop maintaining four copies, and a component with one consumer is
@@ -113,6 +175,12 @@ still one copy.
 
 The extraction queue and non-domain boundaries live in [docs/component-inventory.md](docs/component-inventory.md). The source palette references and the rules for adding a product live in [docs/theme-registry.md](docs/theme-registry.md).
 
+## Tests
+
+```sh
+npm test   # node:test for pure logic, vitest + jsdom for component behaviour, then the build
+```
+
 ## Storybook
 
 ```sh

package/dist/components/bottom-nav.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import { type BottomNavLabels, type Locale } from "../lib/i18n";
+import { type RenderLink } from "../lib/link";
+/**
+ * The phone's primary navigation: a bar at the bottom, where the thumb already
+ * is, instead of a desktop sidebar squeezed into a hamburger. Hidden from `md`
+ * up, where the product's own sidebar or tabs take over.
+ *
+ * Up to four tabs and, between them, one primary action the screen decides
+ * ("+" on a list, nothing on a form). One tab may be a "more" tab that opens a
+ * bottom sheet with everything secondary — Base UI's Drawer, so the sheet gets
+ * the focus trap, Escape, swipe-down and restore-focus without reimplementing
+ * any of them.
+ *
+ * The library knows nothing about routing: the caller says which item is
+ * active and how a link navigates (`renderLink`). Touch-sized regardless of
+ * `data-density` — a console that is compact on a desk is still a thumb on a
+ * phone.
+ */
+/** A destination: `href` renders a link (through `renderLink`), `onClick` alone a button. */
+interface BottomNavTarget {
+    href?: string;
+    onClick?: () => void;
+}
+interface BottomNavTab extends BottomNavTarget {
+    label: string;
+    icon: ReactNode;
+    /** Supplied by the caller from its router. Renders `aria-current="page"`. */
+    active?: boolean;
+}
+interface BottomNavSheetItem extends BottomNavTarget {
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    /** Consecutive items with the same group are listed under that heading. */
+    group?: string;
+}
+interface BottomNavMore {
+    type: "more";
+    label: string;
+    icon: ReactNode;
+    /** Sheet heading; defaults to `label`. */
+    title?: string;
+    items: BottomNavSheetItem[];
+    /** Defaults to "any sheet item is active". */
+    active?: boolean;
+}
+type BottomNavItem = BottomNavTab | BottomNavMore;
+interface BottomNavAction extends BottomNavTarget {
+    label: string;
+    icon: ReactNode;
+}
+interface BottomNavProps {
+    /** At most four; any beyond the fourth are not rendered. */
+    items: BottomNavItem[];
+    /** The central action for this screen, or `null` to leave the slot out. */
+    action?: BottomNavAction | null;
+    renderLink?: RenderLink;
+    /** BCP-47 tag for built-in copy. Defaults to "pt-BR". */
+    locale?: Locale;
+    labels?: Partial<BottomNavLabels>;
+    className?: string;
+}
+declare function BottomNav({ items, action, renderLink, locale, labels, className }: BottomNavProps): import("react").JSX.Element;
+/**
+ * Keeps the end of a page clear of the bar on a phone: render it as the last
+ * child of the scrolling content. Collapses from `md` up, where the bar is gone.
+ */
+declare function BottomNavSpacer({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** The same clearance as padding, for a container that owns its own bottom padding. */
+declare const bottomNavInset = "pb-[calc(4.5rem+env(safe-area-inset-bottom))] md:pb-0";
+export { BottomNav, BottomNavSpacer, bottomNavInset, type BottomNavAction, type BottomNavItem, type BottomNavMore, type BottomNavProps, type BottomNavSheetItem, type BottomNavTab, };

package/dist/components/bottom-nav.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as Primitive } from "@base-ui/react/drawer";
+import { Fragment, useId, useState } from "react";
+import { cn } from "../lib/cn";
+import { DEFAULT_LOCALE, getBottomNavLabels } from "../lib/i18n";
+import { defaultRenderLink } from "../lib/link";
+import { Button } from "./button";
+import { useThemeScope } from "./theme-provider";
+const MAX_ITEMS = 4;
+/** Row height; the bar adds the device's safe-area inset below it. */
+const BAR_HEIGHT = "4.5rem";
+const ACTION_WIDTH = "4.5rem";
+const TAB = cn("group flex h-full w-full min-w-0 flex-col items-center justify-start gap-1 px-0.5 pt-2", "text-xs/3.5 font-medium text-muted-foreground outline-none select-none [-webkit-tap-highlight-color:transparent]", "aria-[current=page]:text-foreground data-[active]:text-foreground");
+/** The shape behind the icon, so "active" is never colour alone. */
+const PILL = cn("flex h-7 w-14 shrink-0 items-center justify-center rounded-full [&_svg]:size-5 [&_svg]:shrink-0", "transition-[background-color,color,scale] duration-150 ease-out motion-reduce:transition-none", "group-hover:bg-surface group-active:scale-95 motion-reduce:group-active:scale-100", "group-focus-visible:ring-3 group-focus-visible:ring-ring/50", "group-aria-[current=page]:bg-brand-50 group-aria-[current=page]:text-brand-700", "group-data-[active]:bg-brand-50 group-data-[active]:text-brand-700");
+const TAB_LABEL = "line-clamp-2 max-w-full text-center break-words";
+/** Lets "A pagar/receber" wrap after the slash instead of mid-word. */
+function breakable(label) {
+    const parts = label.split("/");
+    return parts.map((part, i) => (i < parts.length - 1 ? _jsxs(Fragment, { children: [part, "/", _jsx("wbr", {})] }, i) : part));
+}
+function isMore(item) {
+    return "type" in item && item.type === "more";
+}
+function BottomNav({ items, action = null, renderLink = defaultRenderLink, locale = DEFAULT_LOCALE, labels, className }) {
+    const text = getBottomNavLabels(locale, labels);
+    const tabs = items.slice(0, MAX_ITEMS);
+    const left = action ? tabs.slice(0, Math.ceil(tabs.length / 2)) : tabs;
+    const right = action ? tabs.slice(left.length) : [];
+    // With an action the slot stays dead centre even when the sides are uneven
+    // (two tabs and one): each side shares half the bar, whatever its count.
+    const columns = action
+        ? [side(left.length), ACTION_WIDTH, side(right.length)].filter(Boolean).join(" ")
+        : `repeat(${tabs.length}, minmax(0, 1fr))`;
+    const renderItem = (item, index) => (_jsx("li", { className: "min-w-0", children: isMore(item) ? (_jsx(MoreTab, { more: item, renderLink: renderLink, closeLabel: text.close })) : (_jsxs(Target, { target: item, renderLink: renderLink, className: TAB, current: item.active, label: item.label, children: [_jsx("span", { "aria-hidden": true, className: PILL, children: item.icon }), _jsx("span", { className: TAB_LABEL, children: breakable(item.label) })] })) }, index));
+    return (_jsx("nav", { "aria-label": text.nav, "data-slot": "bottom-nav", className: cn("fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background text-foreground md:hidden", "pb-[env(safe-area-inset-bottom)]", className), children: _jsxs("ul", { className: "grid list-none p-0 m-0", style: { gridTemplateColumns: columns, height: BAR_HEIGHT }, children: [left.map(renderItem), action && (_jsx("li", { className: "min-w-0", children: _jsxs(Target, { target: action, renderLink: renderLink, className: cn(TAB, "text-foreground"), children: [_jsx("span", { "aria-hidden": true, className: cn(
+                                // Rises a little over the bar's edge, cut out of it by a ring of the
+                                // background, so its label still sits on the tabs' baseline.
+                                "-mt-4 flex size-11 shrink-0 items-center justify-center rounded-full bg-brand-600 text-white ring-4 ring-background [&_svg]:size-6", "shadow-[0_6px_16px_-8px_var(--brand-700)]", "transition-[background-color,scale] duration-150 ease-out motion-reduce:transition-none", "group-hover:bg-brand-700 group-active:scale-95 motion-reduce:group-active:scale-100", "group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-ring/50"), children: action.icon }), _jsx("span", { className: "max-w-full truncate", children: action.label })] }) })), right.map((item, i) => renderItem(item, left.length + i))] }) }));
+}
+function side(count) {
+    return count ? `repeat(${count}, calc((100% - ${ACTION_WIDTH}) / 2 / ${count}))` : "";
+}
+/** A link when there is somewhere to go, a button when there is something to do. */
+function Target({ target, renderLink, className, current, label, children }) {
+    const ariaCurrent = current ? "page" : undefined;
+    if (target.href !== undefined) {
+        return renderLink({ href: target.href, onClick: target.onClick, className, "aria-current": ariaCurrent, "aria-label": label, children });
+    }
+    return (_jsx("button", { type: "button", onClick: target.onClick, "aria-current": ariaCurrent, "aria-label": label, className: className, children: children }));
+}
+function MoreTab({ more, renderLink, closeLabel }) {
+    const [open, setOpen] = useState(false);
+    const { theme, density } = useThemeScope();
+    const groupIdPrefix = useId();
+    const active = more.active ?? more.items.some(i => i.active);
+    const groups = groupItems(more.items);
+    const title = more.title ?? more.label;
+    return (_jsxs(Primitive.Root, { open: open, onOpenChange: setOpen, swipeDirection: "down", children: [_jsxs(Primitive.Trigger, { "aria-label": more.label, className: TAB, "data-active": active || open ? "" : undefined, children: [_jsx("span", { "aria-hidden": true, className: PILL, children: more.icon }), _jsx("span", { className: TAB_LABEL, children: breakable(more.label) })] }), _jsxs(Primitive.Portal, { "data-ctech-theme": theme, "data-density": density, children: [_jsx(Primitive.Backdrop, { className: cn("fixed inset-0 z-40 bg-black/40 transition-opacity duration-200 ease-out md:hidden", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none") }), _jsx(Primitive.Viewport, { className: "fixed inset-0 z-50 md:hidden", children: _jsxs(Primitive.Popup, { className: cn("fixed inset-x-0 bottom-0 z-50 flex max-h-[85dvh] flex-col rounded-t-2xl border-t border-border", "bg-background text-foreground shadow-modal outline-none pb-[env(safe-area-inset-bottom)]", "transition-transform duration-200 ease-out data-[swiping]:transition-none motion-reduce:transition-none", "[transform:translateY(var(--drawer-swipe-movement-y,0px))]", "data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]"), children: [_jsx("div", { "aria-hidden": true, className: "mx-auto mt-2 h-1.5 w-10 shrink-0 rounded-full bg-border" }), _jsxs("header", { className: "flex items-center justify-between gap-4 px-5 pt-2 pb-1", children: [_jsx(Primitive.Title, { className: "text-base font-semibold text-foreground", children: title }), _jsx(Primitive.Close, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": closeLabel, className: "-mr-2 size-11 shrink-0 text-muted-foreground" }), children: _jsx(CloseGlyph, {}) })] }), _jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain px-3 pb-4", children: groups.map((group, g) => {
+                                        const groupId = `${groupIdPrefix}-g${g}`;
+                                        return (_jsxs("section", { "aria-labelledby": group.label ? groupId : undefined, className: cn(g > 0 && "mt-2 border-t border-border pt-2"), children: [group.label && (_jsx("h3", { id: groupId, className: "px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground", children: group.label })), _jsx("ul", { className: "m-0 grid list-none gap-0.5 p-0", children: group.items.map((item, i) => (_jsx("li", { children: _jsxs(Target, { target: { href: item.href, onClick: () => { item.onClick?.(); setOpen(false); } }, renderLink: renderLink, current: item.active, className: cn("group/item flex min-h-12 w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none", "transition-colors duration-150 motion-reduce:transition-none", "hover:bg-surface focus-visible:ring-3 focus-visible:ring-ring/50", "aria-[current=page]:bg-brand-50 aria-[current=page]:font-medium aria-[current=page]:text-brand-700"), children: [item.icon && _jsx("span", { "aria-hidden": true, className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-5 group-aria-[current=page]/item:text-brand-700", children: item.icon }), _jsx("span", { className: "min-w-0 flex-1 break-words", children: item.label })] }) }, i))) })] }, g));
+                                    }) })] }) })] })] }));
+}
+function groupItems(items) {
+    const groups = [];
+    for (const item of items) {
+        const last = groups[groups.length - 1];
+        if (last && last.label === item.group)
+            last.items.push(item);
+        else
+            groups.push({ label: item.group, items: [item] });
+    }
+    return groups;
+}
+/**
+ * Keeps the end of a page clear of the bar on a phone: render it as the last
+ * child of the scrolling content. Collapses from `md` up, where the bar is gone.
+ */
+function BottomNavSpacer({ className }) {
+    return _jsx("div", { "aria-hidden": true, "data-slot": "bottom-nav-spacer", className: cn("h-[calc(4.5rem+env(safe-area-inset-bottom))] shrink-0 md:hidden", className) });
+}
+/** The same clearance as padding, for a container that owns its own bottom padding. */
+const bottomNavInset = "pb-[calc(4.5rem+env(safe-area-inset-bottom))] md:pb-0";
+function CloseGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, className: "size-4", children: _jsx("path", { d: "m4 4 8 8M12 4l-8 8", strokeLinecap: "round" }) }));
+}
+export { BottomNav, BottomNavSpacer, bottomNavInset, };

package/dist/components/date-picker.d.ts

@@ -1,11 +1,17 @@
 import type { Matcher } from "react-day-picker";
+import { type DatePickerLabels, type Locale } from "../lib/i18n";
 interface CalendarProps {
     selected?: Date;
     onSelect?: (date: Date | undefined) => void;
     disabled?: Matcher | Matcher[];
     className?: string;
+    /** BCP-47 tag; drives month/weekday names, first day of week and aria copy. Defaults to "pt-BR". */
+    locale?: Locale;
+    /** Overrides individual built-in strings (aria labels). */
+    labels?: Partial<DatePickerLabels>;
 }
-declare function Calendar({ selected, onSelect, disabled, className }: CalendarProps): import("react").JSX.Element;
+/** An inline, keyboard-operable calendar. Use DatePicker for a field trigger. */
+declare function Calendar({ selected, onSelect, disabled, className, locale, labels }: CalendarProps): import("react").JSX.Element;
 interface DatePickerProps {
     value?: Date;
     defaultValue?: Date;
@@ -18,11 +24,15 @@ interface DatePickerProps {
     min?: Date;
     max?: Date;
     defaultOpen?: boolean;
+    /** BCP-47 tag (e.g. "pt-BR", "en"). Drives calendar, date display and copy. Defaults to "pt-BR". */
+    locale?: Locale;
+    /** Overrides individual built-in strings (placeholder, today, selected, month navigation). */
+    labels?: Partial<DatePickerLabels>;
 }
 /**
  * A single-date field backed by an accessible Popover + Calendar. Dates remain
  * Date objects at the API boundary so products can apply their own timezone
  * and serialization policies explicitly.
  */
-declare function DatePicker({ value, defaultValue, onValueChange, placeholder, disabled, id, name, className, min, max, defaultOpen, }: DatePickerProps): import("react").JSX.Element;
+declare function DatePicker({ value, defaultValue, onValueChange, placeholder, disabled, id, name, className, min, max, defaultOpen, locale, labels, }: DatePickerProps): import("react").JSX.Element;
 export { Calendar, DatePicker, type CalendarProps, type DatePickerProps };

package/dist/components/date-picker.js

@@ -1,26 +1,31 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale/pt-BR";
 import { useState } from "react";
-import { DayPicker } from "react-day-picker";
+import { DateLib, DayPicker } from "react-day-picker";
+import { enUS, ptBR } from "react-day-picker/locale";
 import { cn } from "../lib/cn";
+import { DEFAULT_LOCALE, getDatePickerLabels, resolveCatalog } from "../lib/i18n";
 import { useThemeScope } from "./theme-provider";
 /** An inline, keyboard-operable calendar. Use DatePicker for a field trigger. */
-// react-day-picker's default labels are English ("Go to the Previous Month",
-// "Today, …"): a screen reader in a pt-BR product read half its calendar in
-// another language.
-const LABELS = {
-    labelPrevious: () => "Mês anterior",
-    labelNext: () => "Próximo mês",
-    labelDayButton: (date, modifiers) => `${modifiers.today ? "Hoje, " : ""}${format(date, "PPPP", { locale: ptBR })}${modifiers.selected ? ", selecionado" : ""}`,
-};
-function Calendar({ selected, onSelect, disabled, className }) {
+function Calendar({ selected, onSelect, disabled, className, locale = DEFAULT_LOCALE, labels }) {
+    const text = getDatePickerLabels(locale, labels);
+    const dayLocale = resolveCatalog(locale) === "pt-BR" ? ptBR : enUS;
     return (_jsx(DayPicker, { mode: "single", 
         // Open on the selected date's month, not today's: editing a date months
         // away otherwise starts by paging back to it.
-        defaultMonth: selected, labels: LABELS, selected: selected, onSelect: onSelect, disabled: disabled, locale: ptBR, classNames: {
+        defaultMonth: selected, selected: selected, onSelect: onSelect, disabled: disabled, locale: dayLocale, labels: {
+            labelPrevious: () => text.previousMonth,
+            labelNext: () => text.nextMonth,
+            labelDayButton: (date, modifiers, options, dateLib) => {
+                let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
+                if (modifiers.today)
+                    label = `${text.today}, ${label}`;
+                if (modifiers.selected)
+                    label = `${label}, ${text.selected}`;
+                return label;
+            },
+        }, classNames: {
             month_caption: "calendar-month-caption",
             caption_label: "calendar-caption-label",
             nav: "calendar-nav",
@@ -38,7 +43,7 @@ function Calendar({ selected, onSelect, disabled, className }) {
  * Date objects at the API boundary so products can apply their own timezone
  * and serialization policies explicitly.
  */
-function DatePicker({ value, defaultValue, onValueChange, placeholder = "Selecionar data", disabled = false, id, name, className, min, max, defaultOpen = false, }) {
+function DatePicker({ value, defaultValue, onValueChange, placeholder, disabled = false, id, name, className, min, max, defaultOpen = false, locale = DEFAULT_LOCALE, labels, }) {
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
     const [open, setOpen] = useState(defaultOpen);
     const { theme, density } = useThemeScope();
@@ -47,9 +52,8 @@ function DatePicker({ value, defaultValue, onValueChange, placeholder = "Selecio
         ...(min ? [{ before: min }] : []),
         ...(max ? [{ after: max }] : []),
     ];
-    const label = selected
-        ? new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "long", year: "numeric" }).format(selected)
-        : placeholder;
+    const text = getDatePickerLabels(locale, labels);
+    const label = selected ? formatDateLabel(selected, locale) : placeholder ?? text.placeholder;
     function selectDate(date) {
         if (value === undefined)
             setUncontrolledValue(date);
@@ -57,7 +61,15 @@ function DatePicker({ value, defaultValue, onValueChange, placeholder = "Selecio
         if (date)
             setOpen(false);
     }
-    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { id: id, disabled: disabled, className: cn("flex h-11 w-full items-center justify-between rounded-lg border border-border bg-background px-3 text-left text-sm outline-none", "text-foreground transition-[border-color,box-shadow] duration-150 hover:bg-surface focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35", "disabled:cursor-not-allowed disabled:opacity-50 in-data-[density=compact]:h-8 in-data-[density=compact]:px-2.5", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: label }), _jsx(CalendarGlyph, {})] }), name && _jsx("input", { type: "hidden", name: name, value: selected ? formatDateValue(selected) : "" }), _jsx(Popover.Portal, { "data-ctech-theme": theme, "data-density": density, children: _jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 8, className: "z-50", children: _jsx(Popover.Popup, { className: "rounded-xl border border-border bg-background shadow-modal outline-none transition-[opacity,scale] duration-150 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 motion-reduce:transition-none", children: _jsx(Calendar, { selected: selected, onSelect: selectDate, disabled: disabled || disabledDays.length > 0 ? (disabled ? true : disabledDays) : undefined }) }) }) })] }));
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { id: id, disabled: disabled, className: cn("flex h-11 w-full items-center justify-between rounded-lg border border-border bg-background px-3 text-left text-sm outline-none", "text-foreground transition-[border-color,box-shadow] duration-150 hover:bg-surface focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35", "disabled:cursor-not-allowed disabled:opacity-50 in-data-[density=compact]:h-8 in-data-[density=compact]:px-2.5", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: label }), _jsx(CalendarGlyph, {})] }), name && _jsx("input", { type: "hidden", name: name, value: selected ? formatDateValue(selected) : "" }), _jsx(Popover.Portal, { "data-ctech-theme": theme, "data-density": density, children: _jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 8, className: "z-50", children: _jsx(Popover.Popup, { className: "rounded-xl border border-border bg-background shadow-modal outline-none transition-[opacity,scale] duration-150 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 motion-reduce:transition-none", children: _jsx(Calendar, { locale: locale, labels: labels, selected: selected, onSelect: selectDate, disabled: disabled || disabledDays.length > 0 ? (disabled ? true : disabledDays) : undefined }) }) }) })] }));
+}
+function formatDateLabel(value, locale) {
+    try {
+        return new Intl.DateTimeFormat(locale, { day: "2-digit", month: "long", year: "numeric" }).format(value);
+    }
+    catch {
+        return new Intl.DateTimeFormat(DEFAULT_LOCALE, { day: "2-digit", month: "long", year: "numeric" }).format(value);
+    }
 }
 function formatDateValue(value) {
     return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;

package/dist/components/error-state.d.ts

@@ -1,32 +1,17 @@
 import type { ReactNode } from "react";
-declare const errorMessages: {
-    readonly 400: {
-        readonly title: "Não foi possível abrir este endereço";
-        readonly description: "Confira os parâmetros do link ou volte ao início para continuar.";
-    };
-    readonly 404: {
-        readonly title: "Não encontramos esta página";
-        readonly description: "O endereço pode ter mudado ou o conteúdo não está disponível.";
-    };
-    readonly 500: {
-        readonly title: "Não foi possível carregar a página";
-        readonly description: "Ocorreu um erro inesperado. Tente novamente em instantes.";
-    };
-    readonly 503: {
-        readonly title: "Serviço temporariamente indisponível";
-        readonly description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente.";
-    };
-};
-type ErrorStatus = keyof typeof errorMessages;
+import { type Locale } from "../lib/i18n";
+type ErrorStatus = 400 | 404 | 500 | 503;
 interface ErrorStateProps {
     status: ErrorStatus;
     title?: string;
     description?: string;
     action?: ReactNode;
     className?: string;
+    /** BCP-47 tag for the built-in copy. Defaults to "pt-BR". */
+    locale?: Locale;
 }
 /** Shared error presentation. Apps own routing, retries and availability checks.
  * Never pass exception messages, stack traces, tokens or private data as copy.
  */
-declare function ErrorState({ status, title, description, action, className }: ErrorStateProps): import("react").JSX.Element;
+declare function ErrorState({ status, title, description, action, className, locale }: ErrorStateProps): import("react").JSX.Element;
 export { ErrorState, type ErrorStateProps, type ErrorStatus };

package/dist/components/error-state.js

@@ -1,16 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn";
-const errorMessages = {
-    400: { title: "Não foi possível abrir este endereço", description: "Confira os parâmetros do link ou volte ao início para continuar." },
-    404: { title: "Não encontramos esta página", description: "O endereço pode ter mudado ou o conteúdo não está disponível." },
-    500: { title: "Não foi possível carregar a página", description: "Ocorreu um erro inesperado. Tente novamente em instantes." },
-    503: { title: "Serviço temporariamente indisponível", description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente." },
-};
+import { DEFAULT_LOCALE, getErrorMessages } from "../lib/i18n";
 /** Shared error presentation. Apps own routing, retries and availability checks.
  * Never pass exception messages, stack traces, tokens or private data as copy.
  */
-function ErrorState({ status, title, description, action, className }) {
-    const message = errorMessages[status];
+function ErrorState({ status, title, description, action, className, locale = DEFAULT_LOCALE }) {
+    const message = getErrorMessages(locale)[status];
     return (_jsxs("section", { "data-slot": "error-state", role: "alert", className: cn("mx-auto flex max-w-2xl flex-col items-center gap-5 px-5 py-16 text-center", className), children: [_jsx("p", { className: "font-mono text-sm tabular-nums text-muted-foreground", children: status }), _jsx("h1", { className: "text-2xl font-semibold text-foreground sm:text-3xl", children: title || message.title }), _jsx("p", { className: "max-w-[48ch] text-pretty text-base text-muted-foreground", children: description || message.description }), action && _jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-3", children: action })] }));
 }
 export { ErrorState };

package/dist/components/modal.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { type Locale, type ModalLabels } from "../lib/i18n";
 /**
  * Built on Base UI's Dialog rather than a hand-rolled portal. The focus trap,
  * the scroll lock, the Escape handling, the restore-focus-on-close and the
@@ -26,6 +27,10 @@ interface ModalProps {
     danger?: boolean;
     submitDisabled?: boolean;
     size?: keyof typeof SIZE;
+    /** BCP-47 tag for built-in copy. Defaults to "pt-BR". */
+    locale?: Locale;
+    /** Overrides built-in strings; submitLabel/cancelLabel take precedence. */
+    labels?: Partial<ModalLabels>;
 }
-declare function Modal({ open, onClose, title, description, children, onSubmit, submitLabel, cancelLabel, loading, danger, submitDisabled, size, }: ModalProps): import("react").JSX.Element;
+declare function Modal({ open, onClose, title, description, children, onSubmit, submitLabel, cancelLabel, loading, danger, submitDisabled, size, locale, labels, }: ModalProps): import("react").JSX.Element;
 export { Modal, type ModalProps };

package/dist/components/modal.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 import { cn } from "../lib/cn";
+import { DEFAULT_LOCALE, getModalLabels } from "../lib/i18n";
 import { Button } from "./button";
 import { useThemeScope } from "./theme-provider";
 /**
@@ -17,9 +18,10 @@ const SIZE = {
     lg: "max-w-2xl",
     xl: "max-w-4xl",
 };
-function Modal({ open, onClose, title, description, children, onSubmit, submitLabel = "Salvar", cancelLabel = "Cancelar", loading = false, danger = false, submitDisabled = false, size = "md", }) {
+function Modal({ open, onClose, title, description, children, onSubmit, submitLabel, cancelLabel, loading = false, danger = false, submitDisabled = false, size = "md", locale = DEFAULT_LOCALE, labels, }) {
+    const text = getModalLabels(locale, labels);
     const { theme, density } = useThemeScope();
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: next => !next && onClose(), children: _jsxs(Dialog.Portal, { "data-ctech-theme": theme, "data-density": density, children: [_jsx(Dialog.Backdrop, { className: cn("fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", "motion-reduce:transition-none") }), _jsxs(Dialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-[calc(100vw-2rem)] max-h-[85vh] overflow-y-auto", "rounded-xl border border-border bg-background text-foreground shadow-modal outline-none", "transition-[opacity,translate,scale] duration-200 ease-out", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "motion-reduce:transition-opacity motion-reduce:data-[ending-style]:scale-100 motion-reduce:data-[starting-style]:scale-100", SIZE[size]), children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-border bg-background px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }), description && (_jsx(Dialog.Description, { className: "text-sm text-muted-foreground", children: description }))] }), _jsx(Dialog.Close, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Fechar", className: "-mr-2 shrink-0 text-muted-foreground" }), children: _jsx(CloseGlyph, {}) })] }), children && _jsx("div", { className: "px-6 py-5", children: children }), _jsxs("footer", { className: "sticky bottom-0 flex justify-end gap-3 border-t border-border bg-surface px-6 py-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, disabled: loading, children: cancelLabel }), onSubmit && (_jsx(Button, { type: "button", variant: danger ? "danger" : "brand", onClick: onSubmit, disabled: loading || submitDisabled, children: loading ? "Aguarde…" : submitLabel }))] })] })] }) }));
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: next => !next && onClose(), children: _jsxs(Dialog.Portal, { "data-ctech-theme": theme, "data-density": density, children: [_jsx(Dialog.Backdrop, { className: cn("fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", "motion-reduce:transition-none") }), _jsxs(Dialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-[calc(100vw-2rem)] max-h-[85vh] overflow-y-auto", "rounded-xl border border-border bg-background text-foreground shadow-modal outline-none", "transition-[opacity,translate,scale] duration-200 ease-out", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "motion-reduce:transition-opacity motion-reduce:data-[ending-style]:scale-100 motion-reduce:data-[starting-style]:scale-100", SIZE[size]), children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-border bg-background px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }), description && (_jsx(Dialog.Description, { className: "text-sm text-muted-foreground", children: description }))] }), _jsx(Dialog.Close, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": text.close, className: "-mr-2 shrink-0 text-muted-foreground" }), children: _jsx(CloseGlyph, {}) })] }), children && _jsx("div", { className: "px-6 py-5", children: children }), _jsxs("footer", { className: "sticky bottom-0 flex justify-end gap-3 border-t border-border bg-surface px-6 py-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, disabled: loading, children: cancelLabel ?? text.cancel }), onSubmit && (_jsx(Button, { type: "button", variant: danger ? "danger" : "brand", onClick: onSubmit, disabled: loading || submitDisabled, children: loading ? text.loading : submitLabel ?? text.submit }))] })] })] }) }));
 }
 function CloseGlyph() {
     return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: _jsx("path", { d: "m4 4 8 8M12 4l-8 8", strokeLinecap: "round" }) }));

package/dist/components/user-menu.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import { type Locale, type UserMenuLabels } from "../lib/i18n";
+import { type RenderLink } from "../lib/link";
+/**
+ * The signed-in person, behind their avatar: who they are (the whole name, never
+ * truncated — "Maria Aparecida dos Santos" cut to "Maria Apar…" is someone
+ * else), which view of the product they are in, and the way out.
+ *
+ * Base UI's Menu supplies the menu-button pattern: Enter/Space/ArrowDown open
+ * it, arrow keys move, type-ahead, Escape closes and focus returns to the
+ * avatar. The views are generic — a product passes "Portal" and "Console", or
+ * anything else — and the current one is marked with a check and
+ * `aria-current`, not with colour alone.
+ */
+interface UserMenuTarget {
+    /** Renders a link through `renderLink`; otherwise the item runs `onClick`. */
+    href?: string;
+    onClick?: () => void;
+}
+interface UserMenuView extends UserMenuTarget {
+    label: string;
+    icon?: ReactNode;
+    current?: boolean;
+}
+interface UserMenuItem extends UserMenuTarget {
+    label: string;
+    icon?: ReactNode;
+}
+interface UserMenuProps {
+    /** Full name, shown whole in the menu and turned into initials on the avatar. */
+    name: string;
+    email?: string;
+    /** Shown instead of the initials once it loads. */
+    imageUrl?: string;
+    /** A view switcher section (e.g. Portal / Console). Omitted when empty. */
+    views?: UserMenuView[];
+    /** Extra actions between the views and sign-out. */
+    items?: UserMenuItem[];
+    /** Renders the sign-out item when given. */
+    onSignOut?: () => void;
+    renderLink?: RenderLink;
+    /** Which edge of the avatar the menu lines up with. Defaults to "end". */
+    align?: "start" | "center" | "end";
+    /** BCP-47 tag for built-in copy. Defaults to "pt-BR". */
+    locale?: Locale;
+    labels?: Partial<UserMenuLabels>;
+    /** Applied to the trigger. */
+    className?: string;
+}
+/** First and last initials, by grapheme-ish code point so "Érica Ödegaard" is "ÉÖ". */
+declare function initialsOf(name: string, email?: string): string;
+declare function UserMenu({ name, email, imageUrl, views, items, onSignOut, renderLink, align, locale, labels, className, }: UserMenuProps): import("react").JSX.Element;
+export { UserMenu, initialsOf, type UserMenuItem, type UserMenuProps, type UserMenuView };

package/dist/components/user-menu.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+import { Menu } from "@base-ui/react/menu";
+import { cn } from "../lib/cn";
+import { DEFAULT_LOCALE, getUserMenuLabels } from "../lib/i18n";
+import { defaultRenderLink } from "../lib/link";
+import { useThemeScope } from "./theme-provider";
+const ITEM = cn("group/item flex min-h-11 w-full cursor-default items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none select-none", "in-data-[density=compact]:min-h-9", "data-[highlighted]:bg-surface data-[disabled]:opacity-50", "[&_svg]:size-4 [&_svg]:shrink-0");
+const ICON = "flex size-4 shrink-0 items-center justify-center text-muted-foreground";
+/** First and last initials, by grapheme-ish code point so "Érica Ödegaard" is "ÉÖ". */
+function initialsOf(name, email) {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const first = (w) => (w ? Array.from(w)[0] ?? "" : "");
+    if (words.length === 0)
+        return first(email?.trim()).toUpperCase();
+    const letters = words.length === 1 ? first(words[0]) : first(words[0]) + first(words[words.length - 1]);
+    return letters.toUpperCase();
+}
+function UserAvatar({ name, email, imageUrl, className }) {
+    const initials = initialsOf(name, email);
+    return (_jsxs(Avatar.Root, { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-50 align-middle font-semibold text-brand-700 select-none", className), children: [imageUrl && _jsx(Avatar.Image, { src: imageUrl, alt: "", className: "size-full object-cover" }), _jsx(Avatar.Fallback, { className: "flex size-full items-center justify-center", children: initials || _jsx(PersonGlyph, {}) })] }));
+}
+function UserMenu({ name, email, imageUrl, views = [], items = [], onSignOut, renderLink = defaultRenderLink, align = "end", locale = DEFAULT_LOCALE, labels, className, }) {
+    const text = getUserMenuLabels(locale, labels);
+    const { theme, density } = useThemeScope();
+    const renderEntry = (entry, trailing, current) => {
+        const content = (_jsxs(_Fragment, { children: [entry.icon && _jsx("span", { "aria-hidden": true, className: ICON, children: entry.icon }), _jsx("span", { className: "min-w-0 flex-1 break-words", children: entry.label }), trailing] }));
+        const ariaCurrent = current ? "true" : undefined;
+        if (entry.href !== undefined) {
+            const href = entry.href;
+            return (_jsx(Menu.LinkItem, { href: href, closeOnClick: true, onClick: entry.onClick, "aria-current": ariaCurrent, className: ITEM, render: props => renderLink({ ...props, href }), children: content }, entry.label));
+        }
+        return (_jsx(Menu.Item, { onClick: entry.onClick, "aria-current": ariaCurrent, className: ITEM, children: content }, entry.label));
+    };
+    return (_jsxs(Menu.Root, { children: [_jsx(Menu.Trigger, { "aria-label": `${text.trigger}: ${name}`, className: cn("inline-flex size-11 shrink-0 items-center justify-center rounded-full outline-none", "in-data-[density=compact]:size-8", "transition-shadow duration-150 motion-reduce:transition-none", "hover:ring-2 hover:ring-border focus-visible:ring-3 focus-visible:ring-ring/50 data-[popup-open]:ring-2 data-[popup-open]:ring-ring/50", className), children: _jsx(UserAvatar, { name: name, email: email, imageUrl: imageUrl, className: "size-9 text-sm in-data-[density=compact]:size-8 in-data-[density=compact]:text-xs" }) }), _jsx(Menu.Portal, { "data-ctech-theme": theme, "data-density": density, children: _jsx(Menu.Positioner, { sideOffset: 8, align: align, collisionPadding: 8, className: "z-50 outline-none", children: _jsxs(Menu.Popup, { className: cn("w-72 max-w-[calc(100vw-1rem)] origin-[var(--transform-origin)] rounded-xl border border-border bg-background p-1.5 text-foreground shadow-modal outline-none", "transition-[opacity,scale] duration-150 ease-out", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0", "motion-reduce:transition-opacity motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100"), children: [_jsxs("div", { className: "flex items-start gap-3 px-3 pt-2.5 pb-3", children: [_jsx(UserAvatar, { name: name, email: email, imageUrl: imageUrl, className: "size-10 text-sm" }), _jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [_jsx("p", { className: "m-0 text-sm/5 font-semibold text-pretty [overflow-wrap:anywhere]", children: name }), email && _jsx("p", { className: "m-0 mt-0.5 text-xs/4 text-muted-foreground [overflow-wrap:anywhere]", children: email })] })] }), views.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs(Menu.Group, { children: [_jsx(Menu.GroupLabel, { className: "px-3 pt-1.5 pb-1 text-xs font-medium text-muted-foreground", children: text.views }), views.map(view => renderEntry(view, view.current ? _jsx(CheckGlyph, {}) : _jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }), view.current))] })] })), items.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, { className: "-mx-1.5 my-1 h-px bg-border" }), items.map(item => renderEntry(item))] })), onSignOut && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, { className: "-mx-1.5 my-1 h-px bg-border" }), _jsxs(Menu.Item, { onClick: onSignOut, className: ITEM, children: [_jsx("span", { "aria-hidden": true, className: ICON, children: _jsx(SignOutGlyph, {}) }), _jsx("span", { className: "min-w-0 flex-1", children: text.signOut })] })] }))] }) }) })] }));
+}
+function CheckGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, "aria-hidden": true, className: "size-4 shrink-0 text-brand-600", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function SignOutGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: _jsx("path", { d: "M6 2.75H3.75a1 1 0 0 0-1 1v8.5a1 1 0 0 0 1 1H6M10.5 11l3-3-3-3M13.25 8H6.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function PersonGlyph() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, className: "size-1/2", children: [_jsx("circle", { cx: "8", cy: "5.5", r: "2.75" }), _jsx("path", { d: "M2.75 13.5c.9-2.4 2.85-3.75 5.25-3.75s4.35 1.35 5.25 3.75", strokeLinecap: "round" })] }));
+}
+export { UserMenu, initialsOf };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { cn } from "./lib/cn";
+export { type BottomNavLabels, type DatePickerLabels, type Locale, type ModalLabels, type UserMenuLabels } from "./lib/i18n";
+export { type LinkProps, type RenderLink } from "./lib/link";
 export { Badge, badgeVariants, type BadgeTone } from "./components/badge";
 export { Button, buttonVariants } from "./components/button";
 export { Alert, alertVariants, type AlertProps } from "./components/alert";
@@ -16,3 +18,5 @@ export { Radio, RadioGroup } from "./components/radio";
 export { Switch } from "./components/switch";
 export { ThemeProvider, type CTechTheme, type Density, type ThemeProviderProps } from "./components/theme-provider";
 export { ErrorState, type ErrorStateProps, type ErrorStatus } from "./components/error-state";
+export { BottomNav, BottomNavSpacer, bottomNavInset, type BottomNavAction, type BottomNavItem, type BottomNavMore, type BottomNavProps, type BottomNavSheetItem, type BottomNavTab, } from "./components/bottom-nav";
+export { UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuView } from "./components/user-menu";

package/dist/index.js

@@ -16,3 +16,5 @@ export { Radio, RadioGroup } from "./components/radio";
 export { Switch } from "./components/switch";
 export { ThemeProvider } from "./components/theme-provider";
 export { ErrorState } from "./components/error-state";
+export { BottomNav, BottomNavSpacer, bottomNavInset, } from "./components/bottom-nav";
+export { UserMenu } from "./components/user-menu";

package/dist/lib/i18n.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Tiny built-in i18n for the strings shared components own. Two catalogs
+ * (pt-BR, en); any BCP-47 tag resolves to one of them by language, while Intl
+ * formatting still honours the exact tag. Products override single strings with
+ * each component's `labels` prop instead of forking the catalog.
+ */
+type CatalogLocale = "pt-BR" | "en";
+/** A BCP-47 tag such as "pt-BR" or "en". Unknown languages fall back to English copy. */
+type Locale = string;
+declare const DEFAULT_LOCALE: Locale;
+declare function resolveCatalog(locale: Locale | undefined): CatalogLocale;
+declare const datePickerMessages: {
+    readonly "pt-BR": {
+        readonly placeholder: "Selecionar data";
+        readonly today: "Hoje";
+        readonly selected: "selecionado";
+        readonly previousMonth: "Ir para o mês anterior";
+        readonly nextMonth: "Ir para o próximo mês";
+    };
+    readonly en: {
+        readonly placeholder: "Select date";
+        readonly today: "Today";
+        readonly selected: "selected";
+        readonly previousMonth: "Go to the previous month";
+        readonly nextMonth: "Go to the next month";
+    };
+};
+declare const modalMessages: {
+    readonly "pt-BR": {
+        readonly submit: "Salvar";
+        readonly cancel: "Cancelar";
+        readonly close: "Fechar";
+        readonly loading: "Aguarde…";
+    };
+    readonly en: {
+        readonly submit: "Save";
+        readonly cancel: "Cancel";
+        readonly close: "Close";
+        readonly loading: "Please wait…";
+    };
+};
+declare const bottomNavMessages: {
+    readonly "pt-BR": {
+        readonly nav: "Navegação principal";
+        readonly close: "Fechar";
+    };
+    readonly en: {
+        readonly nav: "Main navigation";
+        readonly close: "Close";
+    };
+};
+declare const userMenuMessages: {
+    readonly "pt-BR": {
+        readonly trigger: "Menu da conta";
+        readonly views: "Alternar visão";
+        readonly signOut: "Sair";
+    };
+    readonly en: {
+        readonly trigger: "Account menu";
+        readonly views: "Switch view";
+        readonly signOut: "Sign out";
+    };
+};
+type DatePickerLabels = {
+    -readonly [K in keyof (typeof datePickerMessages)["en"]]: string;
+};
+type ModalLabels = {
+    -readonly [K in keyof (typeof modalMessages)["en"]]: string;
+};
+type BottomNavLabels = {
+    -readonly [K in keyof (typeof bottomNavMessages)["en"]]: string;
+};
+type UserMenuLabels = {
+    -readonly [K in keyof (typeof userMenuMessages)["en"]]: string;
+};
+declare function getDatePickerLabels(locale: Locale | undefined, overrides?: Partial<DatePickerLabels>): DatePickerLabels;
+declare function getModalLabels(locale: Locale | undefined, overrides?: Partial<ModalLabels>): ModalLabels;
+declare function getBottomNavLabels(locale: Locale | undefined, overrides?: Partial<BottomNavLabels>): BottomNavLabels;
+declare function getUserMenuLabels(locale: Locale | undefined, overrides?: Partial<UserMenuLabels>): UserMenuLabels;
+declare function getErrorMessages(locale: Locale | undefined): {
+    readonly 400: {
+        readonly title: "Não foi possível abrir este endereço";
+        readonly description: "Confira os parâmetros do link ou volte ao início para continuar.";
+    };
+    readonly 404: {
+        readonly title: "Não encontramos esta página";
+        readonly description: "O endereço pode ter mudado ou o conteúdo não está disponível.";
+    };
+    readonly 500: {
+        readonly title: "Não foi possível carregar a página";
+        readonly description: "Ocorreu um erro inesperado. Tente novamente em instantes.";
+    };
+    readonly 503: {
+        readonly title: "Serviço temporariamente indisponível";
+        readonly description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente.";
+    };
+} | {
+    readonly 400: {
+        readonly title: "We couldn't open this address";
+        readonly description: "Check the link's parameters or go back to the start to continue.";
+    };
+    readonly 404: {
+        readonly title: "We couldn't find this page";
+        readonly description: "The address may have changed or the content is unavailable.";
+    };
+    readonly 500: {
+        readonly title: "We couldn't load the page";
+        readonly description: "An unexpected error occurred. Please try again shortly.";
+    };
+    readonly 503: {
+        readonly title: "Service temporarily unavailable";
+        readonly description: "We can't reach the service. Check your connection and try again.";
+    };
+};
+export { DEFAULT_LOCALE, getBottomNavLabels, getDatePickerLabels, getErrorMessages, getModalLabels, getUserMenuLabels, resolveCatalog, type BottomNavLabels, type CatalogLocale, type DatePickerLabels, type Locale, type ModalLabels, type UserMenuLabels, };

package/dist/lib/i18n.js

@@ -0,0 +1,69 @@
+/**
+ * Tiny built-in i18n for the strings shared components own. Two catalogs
+ * (pt-BR, en); any BCP-47 tag resolves to one of them by language, while Intl
+ * formatting still honours the exact tag. Products override single strings with
+ * each component's `labels` prop instead of forking the catalog.
+ */
+const DEFAULT_LOCALE = "pt-BR";
+function resolveCatalog(locale) {
+    const language = (locale ?? DEFAULT_LOCALE).toLowerCase().split(/[-_]/)[0];
+    return language === "pt" ? "pt-BR" : "en";
+}
+const datePickerMessages = {
+    "pt-BR": {
+        placeholder: "Selecionar data",
+        today: "Hoje",
+        selected: "selecionado",
+        previousMonth: "Ir para o mês anterior",
+        nextMonth: "Ir para o próximo mês",
+    },
+    en: {
+        placeholder: "Select date",
+        today: "Today",
+        selected: "selected",
+        previousMonth: "Go to the previous month",
+        nextMonth: "Go to the next month",
+    },
+};
+const modalMessages = {
+    "pt-BR": { submit: "Salvar", cancel: "Cancelar", close: "Fechar", loading: "Aguarde…" },
+    en: { submit: "Save", cancel: "Cancel", close: "Close", loading: "Please wait…" },
+};
+const bottomNavMessages = {
+    "pt-BR": { nav: "Navegação principal", close: "Fechar" },
+    en: { nav: "Main navigation", close: "Close" },
+};
+const userMenuMessages = {
+    "pt-BR": { trigger: "Menu da conta", views: "Alternar visão", signOut: "Sair" },
+    en: { trigger: "Account menu", views: "Switch view", signOut: "Sign out" },
+};
+const errorMessages = {
+    "pt-BR": {
+        400: { title: "Não foi possível abrir este endereço", description: "Confira os parâmetros do link ou volte ao início para continuar." },
+        404: { title: "Não encontramos esta página", description: "O endereço pode ter mudado ou o conteúdo não está disponível." },
+        500: { title: "Não foi possível carregar a página", description: "Ocorreu um erro inesperado. Tente novamente em instantes." },
+        503: { title: "Serviço temporariamente indisponível", description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente." },
+    },
+    en: {
+        400: { title: "We couldn't open this address", description: "Check the link's parameters or go back to the start to continue." },
+        404: { title: "We couldn't find this page", description: "The address may have changed or the content is unavailable." },
+        500: { title: "We couldn't load the page", description: "An unexpected error occurred. Please try again shortly." },
+        503: { title: "Service temporarily unavailable", description: "We can't reach the service. Check your connection and try again." },
+    },
+};
+function getDatePickerLabels(locale, overrides) {
+    return { ...datePickerMessages[resolveCatalog(locale)], ...overrides };
+}
+function getModalLabels(locale, overrides) {
+    return { ...modalMessages[resolveCatalog(locale)], ...overrides };
+}
+function getBottomNavLabels(locale, overrides) {
+    return { ...bottomNavMessages[resolveCatalog(locale)], ...overrides };
+}
+function getUserMenuLabels(locale, overrides) {
+    return { ...userMenuMessages[resolveCatalog(locale)], ...overrides };
+}
+function getErrorMessages(locale) {
+    return errorMessages[resolveCatalog(locale)];
+}
+export { DEFAULT_LOCALE, getBottomNavLabels, getDatePickerLabels, getErrorMessages, getModalLabels, getUserMenuLabels, resolveCatalog, };

package/dist/lib/link.d.ts

@@ -0,0 +1,14 @@
+import type { AnchorHTMLAttributes, ReactElement, Ref } from "react";
+/**
+ * The library knows nothing about routing. A component that renders links
+ * takes a `renderLink` so the product's router does the navigating — for
+ * Next.js, `renderLink={props => <Link {...props} />}`. Without one, a plain
+ * `<a>` is rendered and the browser navigates.
+ */
+type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    ref?: Ref<HTMLAnchorElement>;
+};
+type RenderLink = (props: LinkProps) => ReactElement;
+declare const defaultRenderLink: RenderLink;
+export { defaultRenderLink, type LinkProps, type RenderLink };

package/dist/lib/link.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultRenderLink = props => _jsx("a", { ...props });
+export { defaultRenderLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aoctech/ui",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "Shared CTech UI primitives: Base UI behaviour, Tailwind classes, no colours of its own. Themed entirely by the consuming app's CSS variables.",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json && node scripts/copy-styles.mjs",
-    "test": "npm run build",
+    "test": "node --test src/lib/i18n.test.ts && vitest run --maxWorkers=2 && npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -52,12 +52,17 @@
     "@base-ui/react": "^1.7.0",
     "@storybook/react-vite": "^10.5.8",
     "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
+    "jsdom": "^30.1.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1"
+    "vite": "^8.2.1",
+    "vitest": "^5.0.3"
   },
   "engines": {
     "node": ">=24"