@olwiba/ui 0.0.33 → 0.0.34

package/dist/index.d.ts

@@ -103,6 +103,8 @@ interface AppShellProps {
     user?: AppShellUser;
     /** Text shown in the top header bar */
     pageTitle?: string;
+    /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
+    headerStart?: ReactNode;
     /** Override link rendering for SPA navigation. Defaults to a native <a>. */
     renderLink?: AppShellRenderLink;
     children?: ReactNode;
@@ -122,7 +124,7 @@ interface AppShellProps {
     /** Which side the sidebar sits on. @default "left" */
     side?: 'left' | 'right';
 }
-declare function AppShell({ brand, navItems, action, user, pageTitle, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ brand, navItems, action, user, pageTitle, headerStart, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AuthFormProps {
     /** Controls form title, fields, and footer text. @default 'signin' */

package/dist/index.js

@@ -193,9 +193,10 @@ function ShellSidebar({
     /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
   ] });
 }
-function ShellHeader({ pageTitle }) {
+function ShellHeader({ pageTitle, headerStart }) {
   return /* @__PURE__ */ jsx("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
     /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+    headerStart && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerStart }),
     /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
     /* @__PURE__ */ jsx("h1", { className: "text-base font-medium", children: pageTitle })
   ] }) });
@@ -215,6 +216,7 @@ function AppShell({
   action,
   user = defaultUser,
   pageTitle = "Dashboard",
+  headerStart,
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
@@ -242,7 +244,7 @@ function AppShell({
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
-          /* @__PURE__ */ jsx(ShellHeader, { pageTitle }),
+          /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart }),
           children
         ] })
       ]
@@ -1273,7 +1275,14 @@ function ThemeSwitchMinimal() {
     localStorage.setItem("theme", next);
     document.documentElement.classList.toggle("dark", next === "dark");
   };
-  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" }) });
+  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
+      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
+    },
+    theme
+  ) });
 }
 var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({