@motor-hero/ui-kit 0.48.1 → 0.49.0

package/dist/components/app-shell.d.ts

@@ -24,7 +24,15 @@ 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;
 }
-export declare function AppShell({ brand, brandCollapsed, navItems, activePath, isActive, isAdmin, user, userMenuItems, onLogout, renderLink, headerActions, collapsible, defaultCollapsed, sidebarFooter, banner, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ brand, brandCollapsed, navItems, activePath, isActive, isAdmin, user, userMenuItems, onLogout, renderLink, headerActions, collapsible, defaultCollapsed, sidebarFooter, banner, sidebarClassName, headerClassName, children, }: AppShellProps): import("react").JSX.Element;
 //# sourceMappingURL=app-shell.d.ts.map

package/dist/components/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/components/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAY,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAEvE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAA;IAC/D,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,cAAc,EACd,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAe,EACf,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,UAA8B,EAC9B,aAAa,EACb,WAAkB,EAClB,gBAAwB,EACxB,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BA4Ff"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/components/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAY,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAEvE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAA;IAC/D,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,cAAc,EACd,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAe,EACf,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,UAA8B,EAC9B,aAAa,EACb,WAAkB,EAClB,gBAAwB,EACxB,aAAa,EACb,MAAM,EACN,gBAAgB,EAChB,eAAe,EACf,QAAQ,GACT,EAAE,aAAa,+BA0Gf"}

package/dist/index.cjs

@@ -345,6 +345,8 @@ function AppShell({
   defaultCollapsed = false,
   sidebarFooter,
   banner,
+  sidebarClassName,
+  headerClassName,
   children
 }) {
   const [collapsed, setCollapsed] = (0, import_react3.useState)(defaultCollapsed);
@@ -365,18 +367,21 @@ function AppShell({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: collapsed ? brandCollapsed ?? brand : brand }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(collapsed) }),
-          sidebarFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
-          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(collapsed) }),
+          sidebarFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-inherit px-3 py-2", "data-slot": "sidebar-footer", children: typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter }),
+          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-inherit p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "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",
@@ -399,14 +404,16 @@ function AppShell({
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-14 shrink-0 items-center border-b px-4", children: brand }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 overflow-y-auto px-2 py-4", children: nav(false, () => setMobileOpen(false)) })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex h-14 shrink-0 items-center border-b border-inherit px-4", "data-slot": "sidebar-brand", children: brand }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 overflow-y-auto px-2 py-4", "data-slot": "sidebar-content", children: nav(false, () => setMobileOpen(false)) })
               ]
             }
           )
@@ -415,22 +422,29 @@ function AppShell({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
       banner,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Menu, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
-          headerActions,
-          (user || onLogout) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
-        ] })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "header",
+        {
+          "data-slot": "header",
+          className: cn("flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", headerClassName),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Menu, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
+              headerActions,
+              (user || onLogout) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserMenu, { user, items: userMenuItems, onLogout, renderLink })
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] });