@motor-hero/ui-kit 0.48.1 → 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 })
     ] })
   ] });