@aoctech/ui 0.1.4 → 0.2.0

package/README.md

@@ -105,7 +105,7 @@ 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. |
 
 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

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/drawer.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+/**
+ * A panel for a task that needs a form but not a new page (shadcn's Drawer, on
+ * Base UI's Drawer primitive): from the right on a wide screen, where the page
+ * behind stays readable, and from the bottom on a phone, where a side panel
+ * would be the whole screen anyway. Swipe it away in the direction it came
+ * from; focus trap, Escape, scroll lock and restore-focus come from Base UI.
+ *
+ * The body is the caller's: a form brings its own buttons, so there is no fixed
+ * footer unless `footer` is given (it stays visible while the body scrolls).
+ */
+declare const WIDTH: {
+    readonly md: "sm:max-w-md";
+    readonly lg: "sm:max-w-xl";
+};
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    size?: keyof typeof WIDTH;
+}
+declare function Drawer({ open, onClose, title, description, children, footer, size }: DrawerProps): import("react").JSX.Element;
+export { Drawer, type DrawerProps };

package/dist/components/drawer.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as Primitive } from "@base-ui/react/drawer";
+import { useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { useThemeScope } from "./theme-provider";
+/**
+ * A panel for a task that needs a form but not a new page (shadcn's Drawer, on
+ * Base UI's Drawer primitive): from the right on a wide screen, where the page
+ * behind stays readable, and from the bottom on a phone, where a side panel
+ * would be the whole screen anyway. Swipe it away in the direction it came
+ * from; focus trap, Escape, scroll lock and restore-focus come from Base UI.
+ *
+ * The body is the caller's: a form brings its own buttons, so there is no fixed
+ * footer unless `footer` is given (it stays visible while the body scrolls).
+ */
+const WIDTH = {
+    md: "sm:max-w-md",
+    lg: "sm:max-w-xl",
+};
+/** Right on a wide screen, down on a phone; down until the first effect runs (SSR). */
+function useSide() {
+    const [wide, setWide] = useState(false);
+    useEffect(() => {
+        // Test environments (jsdom) and very old browsers have no matchMedia.
+        if (typeof window.matchMedia !== "function")
+            return;
+        const q = window.matchMedia("(min-width: 640px)");
+        const update = () => setWide(q.matches);
+        update();
+        q.addEventListener("change", update);
+        return () => q.removeEventListener("change", update);
+    }, []);
+    return wide ? "right" : "down";
+}
+function Drawer({ open, onClose, title, description, children, footer, size = "md" }) {
+    const { theme, density } = useThemeScope();
+    const side = useSide();
+    return (_jsx(Primitive.Root, { open: open, onOpenChange: next => !next && onClose(), swipeDirection: side, children: _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", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none") }), _jsx(Primitive.Viewport, { className: "fixed inset-0 z-50", children: _jsxs(Primitive.Popup, { className: cn("fixed z-50 flex flex-col bg-background text-foreground shadow-modal outline-none", "transition-transform duration-200 ease-out data-[swiping]:transition-none motion-reduce:transition-none", side === "right"
+                            ? cn("inset-y-0 right-0 w-full border-l border-border", WIDTH[size], "[transform:translateX(var(--drawer-swipe-movement-x,0px))]", "data-[starting-style]:[transform:translateX(100%)] data-[ending-style]:[transform:translateX(100%)]")
+                            : cn("inset-x-0 bottom-0 max-h-[90dvh] rounded-t-xl border-t border-border", "[transform:translateY(var(--drawer-swipe-movement-y,0px))]", "data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]")), children: [side === "down" && _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-start justify-between gap-4 border-b border-border px-5 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Primitive.Title, { className: "text-base font-semibold text-foreground", children: title }), description && _jsx(Primitive.Description, { className: "text-sm text-muted-foreground", children: description })] }), _jsx(Primitive.Close, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Fechar", className: "-mr-2 shrink-0 text-muted-foreground" }), children: _jsx(CloseGlyph, {}) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: children }), footer && _jsx("footer", { className: "border-t border-border bg-surface px-5 py-3", children: footer })] }) })] }) }));
+}
+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 { Drawer };

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/index.d.ts

@@ -1,4 +1,5 @@
 export { cn } from "./lib/cn";
+export { type DatePickerLabels, type Locale, type ModalLabels } from "./lib/i18n";
 export { Badge, badgeVariants, type BadgeTone } from "./components/badge";
 export { Button, buttonVariants } from "./components/button";
 export { Alert, alertVariants, type AlertProps } from "./components/alert";
@@ -8,6 +9,7 @@ export { EmptyState, type EmptyStateProps } from "./components/empty-state";
 export { Field, type FieldProps } from "./components/field";
 export { Input } from "./components/input";
 export { Modal, type ModalProps } from "./components/modal";
+export { Drawer, type DrawerProps } from "./components/drawer";
 export { PageHeader, type PageHeaderProps } from "./components/page-header";
 export { Separator } from "./components/separator";
 export { Skeleton } from "./components/skeleton";

package/dist/index.js

@@ -8,6 +8,7 @@ export { EmptyState } from "./components/empty-state";
 export { Field } from "./components/field";
 export { Input } from "./components/input";
 export { Modal } from "./components/modal";
+export { Drawer } from "./components/drawer";
 export { PageHeader } from "./components/page-header";
 export { Separator } from "./components/separator";
 export { Skeleton } from "./components/skeleton";

package/dist/lib/i18n.d.ts

@@ -0,0 +1,85 @@
+/**
+ * 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…";
+    };
+};
+type DatePickerLabels = {
+    -readonly [K in keyof (typeof datePickerMessages)["en"]]: string;
+};
+type ModalLabels = {
+    -readonly [K in keyof (typeof modalMessages)["en"]]: string;
+};
+declare function getDatePickerLabels(locale: Locale | undefined, overrides?: Partial<DatePickerLabels>): DatePickerLabels;
+declare function getModalLabels(locale: Locale | undefined, overrides?: Partial<ModalLabels>): ModalLabels;
+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, getDatePickerLabels, getErrorMessages, getModalLabels, resolveCatalog, type CatalogLocale, type DatePickerLabels, type Locale, type ModalLabels, };

package/dist/lib/i18n.js

@@ -0,0 +1,55 @@
+/**
+ * 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 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 getErrorMessages(locale) {
+    return errorMessages[resolveCatalog(locale)];
+}
+export { DEFAULT_LOCALE, getDatePickerLabels, getErrorMessages, getModalLabels, resolveCatalog, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aoctech/ui",
-  "version": "0.1.4",
+  "version": "0.2.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 && npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },