@aoctech/ui 0.1.3 → 0.1.5

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

@@ -5,7 +5,6 @@ interface CalendarProps {
     disabled?: Matcher | Matcher[];
     className?: string;
 }
-/** An inline, keyboard-operable calendar. Use DatePicker for a field trigger. */
 declare function Calendar({ selected, onSelect, disabled, className }: CalendarProps): import("react").JSX.Element;
 interface DatePickerProps {
     value?: Date;

package/dist/components/date-picker.js

@@ -1,14 +1,26 @@
 "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 { cn } from "../lib/cn";
 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 }) {
-    return (_jsx(DayPicker, { mode: "single", selected: selected, onSelect: onSelect, disabled: disabled, locale: ptBR, classNames: {
+    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: {
             month_caption: "calendar-month-caption",
             caption_label: "calendar-caption-label",
             nav: "calendar-nav",

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

@@ -8,6 +8,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aoctech/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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",