hazo_ui 6.15.0 → 6.16.0

package/CHANGE_LOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.16.0 (2026-10-15)
+
+### Added — Tailwind v3 preset + responsive AppHeader
+
+- **`hazo_ui/tailwind-preset`** — Tailwind CSS v3 preset that maps all
+  hazo_theme Tier-2 semantic tokens (background, primary, sidebar, etc.)
+  and Tier-3 chrome tokens (navbar, footer, footer-public, footer-app,
+  toolbar) to `hsl(var(--token) / <alpha-value>)` color utilities. Also
+  provides `borderRadius` mappings for `--radius`. Consumers add
+  `presets: [require('hazo_ui/tailwind-preset')]` to their
+  `tailwind.config` instead of hand-rolling 100+ color entries.
+
+- **Responsive `AppHeader`** — below the `md:` breakpoint the navItems
+  slot collapses behind a hamburger button that opens a slide-up drawer
+  (vaul). Actions (profile menu, etc.) remain visible at all widths. No
+  API change; existing consumers get mobile support for free.
+
 ## v6.15.0 (2026-10-13)
 
 ### Added — `useHazoEvent` hook

package/dist/index.cjs

@@ -877,6 +877,8 @@ var en_default = {
   "locale_picker.change_language": "Change language",
   "app_logo.alt_fallback": "Logo",
   "app_header.aria_label": "Application header",
+  "app_header.menu_label": "Menu",
+  "app_header.nav_title": "Navigation",
   "skeleton.loading_content": "Loading content",
   "spinner.loading": "Loading",
   "spinner.loading_text": "Loading...",
@@ -12527,6 +12529,7 @@ function Logo({
 }
 function AppHeader({ identity, homeHref, navItems, actions, className }) {
   const t = useHazoUiT();
+  const [drawerOpen, setDrawerOpen] = React27__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
@@ -12546,9 +12549,34 @@ function AppHeader({ identity, homeHref, navItems, actions, className }) {
               href: homeHref
             }
           ),
-          navItems
+          navItems && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center", children: navItems })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: actions })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          navItems && /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "md:hidden rounded-md p-1.5 hover:bg-navbar-active/10",
+                "aria-label": t("app_header.menu_label"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: t("app_header.nav_title") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "p-4 [&_nav]:flex-col [&_nav]:gap-2 [&_nav]:items-stretch",
+                  onClick: (e) => {
+                    if (e.target.closest("a")) setDrawerOpen(false);
+                  },
+                  children: navItems
+                }
+              )
+            ] })
+          ] })
+        ] })
       ]
     }
   );