harebear-ui 0.8.0 → 0.8.1

package/dist/components/admin/app-nav.js

@@ -4,6 +4,7 @@ import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";
+import { useToastClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +19,8 @@ const TAB_LIMIT = 5;
 */
 function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", className, children }) {
 	const tabs = places.filter((p) => p.tab !== false).slice(0, TAB_LIMIT);
+	useToastClearance("--hb-toast-nav", "calc(4.5rem + env(safe-area-inset-bottom))", tabs.length > 0);
+	useToastClearance("--hb-toast-fab", "4.5rem", Boolean(action));
 	return /* @__PURE__ */ jsxs(SidebarLayout, {
 		brand,
 		collapsible,

package/dist/components/ai/assistant.js

@@ -2,6 +2,7 @@
 import { AskBox } from "./ask-box.js";
 import { AssistantAvatar, ChatMessage, ChatThread, TypingIndicator } from "./chat.js";
 import { Button } from "../ui/button.js";
+import { useToastClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -136,6 +137,7 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 		panelRef.current?.querySelector("textarea")?.focus();
 		send(text);
 	};
+	useToastClearance("--hb-toast-launcher", "3.5rem", !open && launcher);
 	if (!open) {
 		if (!launcher) return null;
 		return /* @__PURE__ */ jsxs("button", {

package/dist/lib/toast-clearance.js

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+// src/lib/toast-clearance.ts
+const counts = /* @__PURE__ */ new Map();
+function useToastClearance(name, value, enabled = true) {
+	React.useEffect(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const root = document.documentElement;
+		counts.set(name, (counts.get(name) ?? 0) + 1);
+		root.style.setProperty(name, value);
+		return () => {
+			const left = (counts.get(name) ?? 1) - 1;
+			counts.set(name, left);
+			if (left === 0) root.style.removeProperty(name);
+		};
+	}, [
+		name,
+		value,
+		enabled
+	]);
+}
+export { useToastClearance };

package/dist/styles.css

@@ -285,3 +285,26 @@
     background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
   }
 }
+
+/* Toasts clear floating controls. AppNav (tab bar, action button) and AssistantDock (launcher) set --hb-toast-* on
+   <html> while mounted (src/lib/toast-clearance.ts); this adds them to Sonner's bottom offset. Unlayered and
+   !important because Sonner injects its own unlayered rule at runtime. Breakpoints: AppNav's tab bar shows under
+   768px; Sonner switches to full-width mobile toasts under 600px. */
+[data-sonner-toaster][data-y-position="bottom"] {
+  bottom: calc(var(--offset-bottom) + var(--hb-toast-launcher, 0px)) !important;
+}
+@media (max-width: 767px) {
+  [data-sonner-toaster][data-y-position="bottom"] {
+    bottom: calc(
+      var(--offset-bottom) + var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) + var(--hb-toast-launcher, 0px)
+    ) !important;
+  }
+}
+@media (max-width: 600px) {
+  [data-sonner-toaster][data-y-position="bottom"] {
+    bottom: calc(
+      var(--mobile-offset-bottom) + var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) +
+        var(--hb-toast-launcher, 0px)
+    ) !important;
+  }
+}

package/docs/COMPONENTS.md

@@ -278,7 +278,7 @@ Muted tile that lifts on hover, for service launchers. Props: `title`, `subtitle
 One nav config, two renderings: on desktop a `SidebarLayout` sidebar (brand, action button, places, one collapsible group, footer; active place is a raised card; collapses to the icon rail), under 768px a bottom tab bar (first 5 places, 56px targets, `aria-current="page"`) plus a round floating action button. Use it instead of `AppShell` for consumer apps that need phone navigation.
 
 Props: `places: AppNavPlace[]` (`label`, `icon?`, `href?` or `onSelect?`, `active?`, `count?`, `tab?: false` to keep out of the tab bar), `group?: AppNavGroup` (`label`, `items`, `defaultOpen?`, `onAdd?`, `addLabel?`), `action?: { label; icon; onSelect }`, `brand?`, `footer?` (usually `UserMenu`), `label?` (nav name, default "Main"), `linkComponent?`, `collapsible?`, `storageKey?`, `defaultOpen?`, `width?`, `children`.
-On phones the group and footer live in the sidebar sheet: put a `SidebarTrigger` in the page header if users need them there. Render `AssistantDock` inside `children` so it clears the tab bar, and mount `<Toaster mobileOffset={{ bottom: "5.5rem" }} />` so toasts do too.
+On phones the group and footer live in the sidebar sheet: put a `SidebarTrigger` in the page header if users need them there. Render `AssistantDock` inside `children` so it clears the tab bar. Toasts stack above the tab bar, the action button and the dock launcher on their own; no `Toaster` offset needed.
 
 ### `FocusLayout`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "harebear-ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Opinionated, pre-themed shadcn/ui component library for React 19 + Tailwind CSS v4. Admin, data, and AI chat building blocks, ready for agents.",
   "license": "MIT",
   "author": "Harrison Milbradt",