@motor-hero/ui-kit 0.34.1 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.34.1",
+  "version": "0.36.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",

package/src/components/date-picker.tsx

@@ -1,8 +1,8 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { InputMask } from "@react-input/mask"
-import { format, isValid, parse } from "date-fns"
+import { endOfYear, format, isValid, parse, subYears } from "date-fns"
 import { ptBR } from "date-fns/locale"
-import { CalendarIcon, ChevronLeft, ChevronRight, Clock } from "lucide-react"
+import { CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, Clock } from "lucide-react"
 import * as React from "react"
 import { DayPicker, type Matcher } from "react-day-picker"
 import { Drawer as DrawerPrimitive } from "vaul"
@@ -100,7 +100,12 @@ const calendarClassNames = {
   months: "relative flex flex-col gap-4",
   month: "flex w-full flex-col gap-4",
   month_caption: "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-  caption_label: "text-sm font-medium select-none",
+  caption_label:
+    "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+  dropdowns: "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+  dropdown_root:
+    "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+  dropdown: "absolute inset-0 bg-popover opacity-0",
   nav: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
   button_previous: navButtonClass,
   button_next: navButtonClass,
@@ -118,14 +123,17 @@ const calendarClassNames = {
 }
 
 const calendarComponents = {
-  Chevron: ({ orientation }: { orientation?: string }) =>
-    orientation === "left" ? (
-      <ChevronLeft className="size-4" />
-    ) : (
-      <ChevronRight className="size-4" />
-    ),
+  Chevron: ({ orientation }: { orientation?: string }) => {
+    if (orientation === "left") return <ChevronLeft className="size-4" />
+    if (orientation === "right") return <ChevronRight className="size-4" />
+    return <ChevronDown className="size-4" />
+  },
 }
 
+/** Nome curto do mês em pt-BR pro rótulo do dropdown (ex. "jul") — explícito porque
+ *  `toLocaleString("default", ...)` seguiria o locale do navegador, não o do app. */
+const formatMonthDropdown = (date: Date) => date.toLocaleString("pt-BR", { month: "short" })
+
 /**
  * DatePicker / DateTimePicker — calendário + campo digitável com máscara
  * (nunca o `<input type="date"/time">` nativo). Desktop: Popover não-modal;
@@ -160,6 +168,12 @@ function DatePickerImpl({
   const committedDate = withTime ? dateTimeToDate(value) : dateOnlyToDate(value)
   const displayValue = displayFor(value, withTime)
   const matchers = toMatchers(minDate, maxDate, disabledDates)
+  // Alcance do dropdown de ano: minDate/maxDate quando informados, senão o mesmo
+  // padrão da lib (100 anos atrás -> fim do ano atual) — calculado explícito nos dois
+  // lados porque passar só um dos dois via prop faz a lib truncar o outro (visto na
+  // prática: só uma opção de ano no lado sem prop), em vez de cair no padrão dela.
+  const startMonth = dateOnlyToDate(minDate) ?? subYears(new Date(), 100)
+  const endMonth = dateOnlyToDate(maxDate) ?? endOfYear(new Date())
 
   const setOpen = (next: boolean) => {
     setOpenRaw(next)
@@ -261,6 +275,10 @@ function DatePickerImpl({
       <DayPicker
         mode="single"
         locale={ptBR}
+        captionLayout="dropdown"
+        formatters={{ formatMonthDropdown }}
+        startMonth={startMonth}
+        endMonth={endMonth}
         selected={withTime ? pendingDate : committedDate}
         defaultMonth={(withTime ? pendingDate : committedDate) ?? new Date()}
         onSelect={(date) => date && handleCalendarSelect(date)}

package/src/components/filter-toolbar.tsx

@@ -0,0 +1,239 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { ChevronDown, type LucideIcon, X } from "lucide-react";
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { useIsDesktop } from "../hooks/use-is-desktop";
+import { cn } from "../lib/utils";
+
+/**
+ * Barra de filtros compacta para telas com muitos filtros.
+ *
+ * Mantém poucos controles visíveis (uma busca + 1–2 filtros primários) e recolhe
+ * o restante atrás de um botão "Filtros" com contador, no lugar de uma fileira
+ * poluída de dropdowns. Composicional e router-agnóstico: o app fornece os
+ * controles reais (Combobox, listas) dentro de cada `FilterPopover`.
+ */
+export interface FilterToolbarProps {
+	children: React.ReactNode;
+	/** Mostra o botão "Limpar filtros" quando `true`. */
+	isFilterActive?: boolean;
+	onClear?: () => void;
+	clearLabel?: string;
+	className?: string;
+}
+
+export function FilterToolbar({
+	children,
+	isFilterActive = false,
+	onClear,
+	clearLabel = "Limpar filtros",
+	className,
+}: FilterToolbarProps) {
+	return (
+		<div className={cn("mb-6 flex flex-wrap items-center gap-2", className)}>
+			{children}
+			{isFilterActive && onClear && (
+				<button
+					type="button"
+					onClick={onClear}
+					className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+				>
+					<X className="h-4 w-4" />
+					{clearLabel}
+				</button>
+			)}
+		</div>
+	);
+}
+
+type FilterPopoverContent =
+	| React.ReactNode
+	| ((api: { close: () => void }) => React.ReactNode);
+
+export interface FilterPopoverProps {
+	/** Rótulo do gatilho (nome do filtro). */
+	label: string;
+	/** Ícone opcional à esquerda (ex.: `Filter` no botão de overflow). */
+	icon?: LucideIcon;
+	/** Ativo → gatilho destacado e badge visível. */
+	active?: boolean;
+	/** Conteúdo do badge quando ativo: uma contagem ou o rótulo do valor. */
+	badge?: React.ReactNode;
+	/** Largura/estilo do conteúdo no desktop. Padrão: `w-60`. */
+	contentClassName?: string;
+	align?: "start" | "center" | "end";
+	/** Título do drawer no mobile (acessibilidade). Padrão: `label`. */
+	title?: string;
+	/** Nó ou render-prop que recebe `{ close }` para fechar após selecionar. */
+	children: FilterPopoverContent;
+}
+
+/**
+ * Gatilho compacto + popover (desktop) / drawer (mobile) para um filtro.
+ * Mesmo idiom do `Combobox`: popover não-modal no desktop, bottom sheet no touch.
+ */
+export function FilterPopover({
+	label,
+	icon: Icon,
+	active = false,
+	badge,
+	contentClassName,
+	align = "start",
+	title,
+	children,
+}: FilterPopoverProps) {
+	const [open, setOpen] = React.useState(false);
+	const isDesktop = useIsDesktop();
+	const close = React.useCallback(() => setOpen(false), []);
+	const content =
+		typeof children === "function" ? children({ close }) : children;
+
+	const trigger = (
+		<button
+			type="button"
+			aria-expanded={open}
+			className={cn(
+				"inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm transition-colors hover:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				active ? "border-ring/60 text-foreground" : "text-muted-foreground",
+			)}
+		>
+			{Icon && <Icon className="h-4 w-4 shrink-0 opacity-70" />}
+			<span className="truncate">{label}</span>
+			{active && badge != null && (
+				<span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium leading-none text-primary-foreground">
+					{badge}
+				</span>
+			)}
+			<ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+		</button>
+	);
+
+	if (isDesktop) {
+		return (
+			<PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+				<PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+				<PopoverPrimitive.Portal>
+					<PopoverPrimitive.Content
+						align={align}
+						sideOffset={4}
+						onInteractOutside={(event) => {
+							// Mantém aberto quando o clique cai dentro de outro popover
+							// aberto a partir daqui (ex.: o dropdown de um Combobox),
+							// em vez de um clique genuíno fora.
+							const target = event.target as HTMLElement | null;
+							if (target?.closest("[data-radix-popper-content-wrapper]")) {
+								event.preventDefault();
+							}
+						}}
+						className={cn(
+							"pointer-events-auto z-50 w-60 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md",
+							contentClassName,
+						)}
+					>
+						{content}
+					</PopoverPrimitive.Content>
+				</PopoverPrimitive.Portal>
+			</PopoverPrimitive.Root>
+		);
+	}
+
+	return (
+		<DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+			<DrawerPrimitive.Trigger asChild>{trigger}</DrawerPrimitive.Trigger>
+			<DrawerPrimitive.Portal>
+				<DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
+				<DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
+					<DrawerPrimitive.Title className="sr-only">
+						{title ?? label}
+					</DrawerPrimitive.Title>
+					<div className="mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
+					<div className="overflow-y-auto p-2">{content}</div>
+				</DrawerPrimitive.Content>
+			</DrawerPrimitive.Portal>
+		</DrawerPrimitive.Root>
+	);
+}
+
+export interface FilterOption {
+	value: string;
+	label: string;
+	/** Classe do "dot" à esquerda (ex.: `bg-emerald-500` para um status). */
+	dotClassName?: string;
+}
+
+export interface FilterOptionListProps {
+	options: FilterOption[];
+	/** `string` no modo simples; `string[]` no modo múltiplo. */
+	value: string | string[];
+	onChange: (value: string | string[]) => void;
+	multiple?: boolean;
+	/** Mostra o link "Limpar" no rodapé quando há seleção. */
+	clearable?: boolean;
+	clearLabel?: string;
+}
+
+/**
+ * Lista de opções (seleção simples ou múltipla) para o conteúdo de um
+ * `FilterPopover` — evita aninhar um Combobox para enums curtos.
+ */
+export function FilterOptionList({
+	options,
+	value,
+	onChange,
+	multiple = false,
+	clearable = false,
+	clearLabel = "Limpar",
+}: FilterOptionListProps) {
+	const selected = Array.isArray(value) ? value : value ? [value] : [];
+	const hasSelection = selected.length > 0;
+
+	const toggle = (optionValue: string) => {
+		if (!multiple) {
+			onChange(optionValue);
+			return;
+		}
+		onChange(
+			selected.includes(optionValue)
+				? selected.filter((v) => v !== optionValue)
+				: [...selected, optionValue],
+		);
+	};
+
+	return (
+		<div className="flex flex-col p-1">
+			{options.map((option) => {
+				const isChecked = selected.includes(option.value);
+				return (
+					<button
+						key={option.value}
+						type="button"
+						onClick={() => toggle(option.value)}
+						className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+					>
+						{option.dotClassName && (
+							<span
+								className={cn(
+									"h-2 w-2 shrink-0 rounded-full",
+									option.dotClassName,
+								)}
+							/>
+						)}
+						<span className="flex-1 truncate">{option.label}</span>
+						{isChecked && (
+							<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+						)}
+					</button>
+				);
+			})}
+			{clearable && hasSelection && (
+				<button
+					type="button"
+					onClick={() => onChange(multiple ? [] : "")}
+					className="mt-1 border-t px-2 pt-1.5 pb-0.5 text-center text-xs text-muted-foreground transition-colors hover:text-foreground"
+				>
+					{clearLabel}
+				</button>
+			)}
+		</div>
+	);
+}

package/src/index.ts

@@ -1,65 +1,87 @@
 // Theme
-export { ThemeProvider, useTheme } from "./components/theme-provider"
-export type { Theme, ThemeProviderProps, ThemeProviderState } from "./components/theme-provider"
-export { applyCompanyTheme } from "./lib/company-theme"
-export type { CompanyTheme, CompanyThemeTokens } from "./lib/company-theme"
-export { useCompanySubdomain, getSubdomain } from "./hooks/use-company-subdomain"
-export type {
-  UseCompanySubdomainOptions,
-  UseCompanySubdomainResult,
-} from "./hooks/use-company-subdomain"
-
-// Components
-export { ModeToggle } from "./components/mode-toggle"
-export { EmptyState } from "./components/empty-state"
-export { ConfirmDialog } from "./components/confirm-dialog"
-export { PageHeader } from "./components/page-header"
-export { StatusDot } from "./components/status-dot"
-export { StatusBadge } from "./components/status-badge"
-export type { StatusBadgeVariant } from "./components/status-badge"
-export { ProgressBar } from "./components/progress-bar"
-export { FormField } from "./components/form-field"
-export { BaseDialog } from "./components/base-dialog"
-export type { BaseDialogProps, BaseDialogSize } from "./components/base-dialog"
-export { FormDialogLayout, FormDialog } from "./components/form-dialog"
-export type { FormDialogProps, FormDialogSize } from "./components/form-dialog"
-export { AuthCard } from "./components/auth-card"
-export { Pagination } from "./components/pagination"
-export type { PaginationProps } from "./components/pagination"
-export { TableSkeleton } from "./components/table-skeleton"
-export { SearchInput } from "./components/search-input"
-export { PasswordInput } from "./components/password-input"
-export { Combobox } from "./components/combobox"
-export type { ComboboxOption, ComboboxProps } from "./components/combobox"
-export { MultiCombobox } from "./components/multi-combobox"
-export type { MultiComboboxProps } from "./components/multi-combobox"
-export { ColorPicker } from "./components/color-picker"
-export type { ColorPickerProps } from "./components/color-picker"
-export { DatePicker, DateTimePicker } from "./components/date-picker"
-export type { DatePickerProps } from "./components/date-picker"
-export { StatCard } from "./components/stat-card"
-export { DataTableWrapper } from "./components/data-table-wrapper"
-export { MobileCardList } from "./components/mobile-card-list"
-export { ResponsiveDataView } from "./components/responsive-data-view"
-export { Toaster } from "./components/toaster"
 
+export type { AppShellProps } from "./components/app-shell";
 // App shell
-export { AppShell } from "./components/app-shell"
-export type { AppShellProps } from "./components/app-shell"
-export { SidebarNav } from "./components/sidebar-nav"
-export type { NavItem, SidebarNavProps } from "./components/sidebar-nav"
-export { UserMenu } from "./components/user-menu"
-export type { AppUser, UserMenuItem, UserMenuProps } from "./components/user-menu"
-export { RowActionsMenu } from "./components/row-actions-menu"
-export type { RowAction, RowActionsMenuProps } from "./components/row-actions-menu"
-export { defaultRenderLink } from "./components/types"
-export type { RenderLink, RenderLinkProps } from "./components/types"
-
-// Utilities
-export { cn } from "./lib/utils"
-export { extractApiError } from "./lib/api-error"
-
+export { AppShell } from "./components/app-shell";
+export { AuthCard } from "./components/auth-card";
+export type { BaseDialogProps, BaseDialogSize } from "./components/base-dialog";
+export { BaseDialog } from "./components/base-dialog";
+export type { ColorPickerProps } from "./components/color-picker";
+export { ColorPicker } from "./components/color-picker";
+export type { ComboboxOption, ComboboxProps } from "./components/combobox";
+export { Combobox } from "./components/combobox";
+export { ConfirmDialog } from "./components/confirm-dialog";
+export { DataTableWrapper } from "./components/data-table-wrapper";
+export type { DatePickerProps } from "./components/date-picker";
+export { DatePicker, DateTimePicker } from "./components/date-picker";
+export { EmptyState } from "./components/empty-state";
+export type {
+	FilterOption,
+	FilterOptionListProps,
+	FilterPopoverProps,
+	FilterToolbarProps,
+} from "./components/filter-toolbar";
+export {
+	FilterOptionList,
+	FilterPopover,
+	FilterToolbar,
+} from "./components/filter-toolbar";
+export type { FormDialogProps, FormDialogSize } from "./components/form-dialog";
+export { FormDialog, FormDialogLayout } from "./components/form-dialog";
+export { FormField } from "./components/form-field";
+export { MobileCardList } from "./components/mobile-card-list";
+// Components
+export { ModeToggle } from "./components/mode-toggle";
+export type { MultiComboboxProps } from "./components/multi-combobox";
+export { MultiCombobox } from "./components/multi-combobox";
+export { PageHeader } from "./components/page-header";
+export type { PaginationProps } from "./components/pagination";
+export { Pagination } from "./components/pagination";
+export { PasswordInput } from "./components/password-input";
+export { ProgressBar } from "./components/progress-bar";
+export { ResponsiveDataView } from "./components/responsive-data-view";
+export type {
+	RowAction,
+	RowActionsMenuProps,
+} from "./components/row-actions-menu";
+export { RowActionsMenu } from "./components/row-actions-menu";
+export { SearchInput } from "./components/search-input";
+export type { NavItem, SidebarNavProps } from "./components/sidebar-nav";
+export { SidebarNav } from "./components/sidebar-nav";
+export { StatCard } from "./components/stat-card";
+export type { StatusBadgeVariant } from "./components/status-badge";
+export { StatusBadge } from "./components/status-badge";
+export { StatusDot } from "./components/status-dot";
+export { TableSkeleton } from "./components/table-skeleton";
+export type {
+	Theme,
+	ThemeProviderProps,
+	ThemeProviderState,
+} from "./components/theme-provider";
+export { ThemeProvider, useTheme } from "./components/theme-provider";
+export { Toaster } from "./components/toaster";
+export type { RenderLink, RenderLinkProps } from "./components/types";
+export { defaultRenderLink } from "./components/types";
+export type {
+	AppUser,
+	UserMenuItem,
+	UserMenuProps,
+} from "./components/user-menu";
+export { UserMenu } from "./components/user-menu";
+export type {
+	UseCompanySubdomainOptions,
+	UseCompanySubdomainResult,
+} from "./hooks/use-company-subdomain";
+export {
+	getSubdomain,
+	useCompanySubdomain,
+} from "./hooks/use-company-subdomain";
 // Hooks
-export { useDisclosure } from "./hooks/use-disclosure"
-export { useIsDesktop } from "./hooks/use-is-desktop"
-export { useCustomToast, toast } from "./hooks/use-toast"
+export { useDisclosure } from "./hooks/use-disclosure";
+export { useIsDesktop } from "./hooks/use-is-desktop";
+export { toast, useCustomToast } from "./hooks/use-toast";
+export { extractApiError } from "./lib/api-error";
+export type { CompanyTheme, CompanyThemeTokens } from "./lib/company-theme";
+export { applyCompanyTheme } from "./lib/company-theme";
+// Utilities
+export { cn } from "./lib/utils";