@motor-hero/ui-kit 0.48.0 → 0.49.0

package/dist/index.js

@@ -261,6 +261,8 @@ function AppShell({
   defaultCollapsed = false,
   sidebarFooter,
   banner,
+  sidebarClassName,
+  headerClassName,
   children
 }) {
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
@@ -281,18 +283,21 @@ function AppShell({
     /* @__PURE__ */ jsxs3(
       "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"
+          collapsed ? "w-16" : "w-60",
+          sidebarClassName
         ),
         children: [
-          /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: collapsed ? brandCollapsed ?? brand : brand }),
-          /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(collapsed) }),
-          sidebarFooter && /* @__PURE__ */ jsx4("div", { className: "border-t px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
-          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b border-inherit px-4", "data-slot": "sidebar-brand", children: collapsed ? brandCollapsed ?? brand : brand }),
+          /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(collapsed) }),
+          sidebarFooter && /* @__PURE__ */ jsx4("div", { className: "border-t border-inherit px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-inherit p-2", children: /* @__PURE__ */ jsx4(
             "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",
@@ -315,14 +320,16 @@ function AppShell({
           /* @__PURE__ */ jsxs3(
             "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"
+                mobileOpen ? "translate-x-0" : "-translate-x-full",
+                sidebarClassName
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: brand }),
-                /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(false, () => setMobileOpen(false)) })
+                /* @__PURE__ */ jsx4("div", { className: "flex h-14 shrink-0 items-center border-b border-inherit px-4", "data-slot": "sidebar-brand", children: brand }),
+                /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(false, () => setMobileOpen(false)) })
               ]
             }
           )
@@ -331,22 +338,29 @@ function AppShell({
     ),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
       banner,
-      /* @__PURE__ */ jsxs3("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", children: [
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => setMobileOpen(true),
-            className: "inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden",
-            "aria-label": "Abrir menu",
-            children: /* @__PURE__ */ jsx4(Menu, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex items-center gap-2", children: [
-          headerActions,
-          (user || onLogout) && /* @__PURE__ */ jsx4(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs3(
+        "header",
+        {
+          "data-slot": "header",
+          className: cn("flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", headerClassName),
+          children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMobileOpen(true),
+                className: "inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden",
+                "aria-label": "Abrir menu",
+                children: /* @__PURE__ */ jsx4(Menu, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex items-center gap-2", children: [
+              headerActions,
+              (user || onLogout) && /* @__PURE__ */ jsx4(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx4("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] });
@@ -748,7 +762,10 @@ function Combobox({
   const selected = fromPage ?? (value ? labelCache.current.get(value) : void 0) ?? (creatable && value ? { value, label: value } : void 0);
   const handleOpenChange = (next) => {
     setOpen(next);
-    if (!next) setSearch("");
+    if (!next) {
+      setSearch("");
+      onSearchChange?.("");
+    }
   };
   const handleSelect = (next) => {
     onChange(deselectable && next === value ? "" : next);
@@ -1789,6 +1806,10 @@ function MultiCombobox({
   const [open, setOpen] = React8.useState(false);
   const isDesktop = useIsDesktop();
   const isServer = onSearchChange !== void 0;
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (!next) onSearchChange?.("");
+  };
   const labelCache = React8.useRef(/* @__PURE__ */ new Map());
   const byValue = /* @__PURE__ */ new Map();
   for (const option of options) byValue.set(option.value, option);
@@ -1917,7 +1938,7 @@ function MultiCombobox({
     }
   );
   if (isDesktop) {
-    return /* @__PURE__ */ jsxs17(PopoverPrimitive5.Root, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxs17(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ jsx21(PopoverPrimitive5.Trigger, { asChild: true, disabled, children: trigger }),
       /* @__PURE__ */ jsx21(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ jsx21(
         PopoverPrimitive5.Content,
@@ -1931,7 +1952,7 @@ function MultiCombobox({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs17(DrawerPrimitive5.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs17(DrawerPrimitive5.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx21(DrawerPrimitive5.Trigger, { asChild: true, disabled, children: trigger }),
     /* @__PURE__ */ jsxs17(DrawerPrimitive5.Portal, { children: [
       /* @__PURE__ */ jsx21(DrawerPrimitive5.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),