@motor-hero/ui-kit 0.48.0 → 0.49.0

package/package.json

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

package/src/components/app-shell.tsx

@@ -28,6 +28,14 @@ export interface AppShellProps {
   sidebarFooter?: ReactNode | ((collapsed: boolean) => ReactNode)
   /** Above the header, full width of the content column — `UpdateBanner` goes here. */
   banner?: ReactNode
+  /**
+   * Merged into the sidebar (desktop and mobile drawer), e.g.
+   * `bg-sidebar text-sidebar-foreground border-sidebar-border`. Inner dividers
+   * follow the sidebar's border color.
+   */
+  sidebarClassName?: string
+  /** Merged into the top header bar. */
+  headerClassName?: string
   children: ReactNode
 }
 
@@ -47,6 +55,8 @@ export function AppShell({
   defaultCollapsed = false,
   sidebarFooter,
   banner,
+  sidebarClassName,
+  headerClassName,
   children,
 }: AppShellProps) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed)
@@ -68,24 +78,29 @@ export function AppShell({
     <div className="flex h-screen overflow-hidden bg-background">
       {/* Desktop sidebar */}
       <aside
+        data-slot="sidebar"
         className={cn(
           "hidden shrink-0 flex-col border-r bg-card transition-all duration-300 md:flex",
           collapsed ? "w-16" : "w-60",
+          sidebarClassName,
         )}
       >
-        <div className="flex h-14 shrink-0 items-center border-b px-4">
+        <div className="flex h-14 shrink-0 items-center border-b border-inherit px-4" data-slot="sidebar-brand">
           {collapsed ? (brandCollapsed ?? brand) : brand}
         </div>
-        <div className="flex-1 overflow-y-auto px-2 py-4">{nav(collapsed)}</div>
+        <div className="flex-1 overflow-y-auto px-2 py-4" data-slot="sidebar-content">
+          {nav(collapsed)}
+        </div>
         {sidebarFooter && (
-          <div className="border-t px-3 py-2" data-slot="sidebar-footer">
+          <div className="border-t border-inherit px-3 py-2" data-slot="sidebar-footer">
             {typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter}
           </div>
         )}
         {collapsible && (
-          <div className="border-t p-2">
+          <div className="border-t border-inherit p-2">
             <button
               type="button"
+              data-slot="sidebar-toggle"
               onClick={() => setCollapsed((v) => !v)}
               className="flex w-full items-center justify-center rounded-md px-2 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
               aria-label={collapsed ? "Expandir menu" : "Recolher menu"}
@@ -106,21 +121,30 @@ export function AppShell({
       >
         <div className="absolute inset-0 bg-black/50" />
         <div
+          data-slot="sidebar-drawer"
           className={cn(
             "absolute left-0 top-0 flex h-full w-64 flex-col border-r bg-card transition-transform duration-300",
             mobileOpen ? "translate-x-0" : "-translate-x-full",
+            sidebarClassName,
           )}
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="flex h-14 shrink-0 items-center border-b px-4">{brand}</div>
-          <div className="flex-1 overflow-y-auto px-2 py-4">{nav(false, () => setMobileOpen(false))}</div>
+          <div className="flex h-14 shrink-0 items-center border-b border-inherit px-4" data-slot="sidebar-brand">
+            {brand}
+          </div>
+          <div className="flex-1 overflow-y-auto px-2 py-4" data-slot="sidebar-content">
+            {nav(false, () => setMobileOpen(false))}
+          </div>
         </div>
       </div>
 
       {/* Main column */}
       <div className="flex flex-1 flex-col overflow-hidden">
         {banner}
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <header
+          data-slot="header"
+          className={cn("flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", headerClassName)}
+        >
           <button
             type="button"
             onClick={() => setMobileOpen(true)}

package/src/components/combobox.tsx

@@ -116,7 +116,10 @@ export function Combobox({
 
 	const handleOpenChange = (next: boolean) => {
 		setOpen(next);
-		if (!next) setSearch("");
+		if (!next) {
+			setSearch("");
+			onSearchChange?.("");
+		}
 	};
 
 	const handleSelect = (next: string) => {

package/src/components/multi-combobox.tsx

@@ -73,6 +73,10 @@ export function MultiCombobox({
   const [open, setOpen] = React.useState(false)
   const isDesktop = useIsDesktop()
   const isServer = onSearchChange !== undefined
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (!next) onSearchChange?.("")
+  }
   // Em modo servidor `options` é só a página carregada no momento, então um
   // rótulo visto uma vez precisa sobreviver à troca de página: sem esse cache,
   // buscar (ou paginar) fazia o chip de um valor ainda selecionado sumir do
@@ -223,7 +227,7 @@ export function MultiCombobox({
 
   if (isDesktop) {
     return (
-      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>
         <PopoverPrimitive.Trigger asChild disabled={disabled}>
           {trigger}
         </PopoverPrimitive.Trigger>
@@ -242,7 +246,7 @@ export function MultiCombobox({
   }
 
   return (
-    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+    <DrawerPrimitive.Root open={open} onOpenChange={handleOpenChange}>
       <DrawerPrimitive.Trigger asChild disabled={disabled}>
         {trigger}
       </DrawerPrimitive.Trigger>