achery-ui 0.5.2 → 0.5.4

package/dist/index.d.cts

@@ -1003,6 +1003,20 @@ interface SidebarProps {
     /**
      * Content rendered at the bottom of the sidebar — typically user account
      * info, a settings link, or version text.
+     *
+     * **Responsive action pattern:** `AppBar` hides its `actions` slot on mobile
+     * via CSS (below 768 px). If those actions must remain accessible on mobile,
+     * pass the same node here so it appears at the foot of the mobile overlay.
+     *
+     * @example
+     * ```tsx
+     * // Month selector: visible in AppBar on desktop, in Sidebar footer on mobile
+     * const isMobile = useIsMobile()
+     * const monthPicker = <MonthSelect value={month} onChange={setMonth} />
+     *
+     * <Sidebar footer={isMobile ? monthPicker : undefined} … />
+     * <AppBar actions={monthPicker} … />
+     * ```
      */
     footer?: ReactNode;
     /**
@@ -1083,6 +1097,11 @@ interface AppBarProps {
     /**
      * Arbitrary content inserted after the built-in controls (theme toggle, accent
      * picker, new button) and before the avatar. Use for custom action buttons.
+     *
+     * **Mobile note:** the `actions` slot (along with search and `brandSub`) is
+     * hidden via CSS below 768 px. If an action must remain reachable on mobile,
+     * also pass it as `footer` to the accompanying `<Sidebar>` so it appears in
+     * the mobile overlay. See {@link SidebarProps.footer} for a usage example.
      */
     actions?: ReactNode;
     /** Currently active accent colour — drives the accent picker selection indicator. */

package/dist/index.d.ts

@@ -1003,6 +1003,20 @@ interface SidebarProps {
     /**
      * Content rendered at the bottom of the sidebar — typically user account
      * info, a settings link, or version text.
+     *
+     * **Responsive action pattern:** `AppBar` hides its `actions` slot on mobile
+     * via CSS (below 768 px). If those actions must remain accessible on mobile,
+     * pass the same node here so it appears at the foot of the mobile overlay.
+     *
+     * @example
+     * ```tsx
+     * // Month selector: visible in AppBar on desktop, in Sidebar footer on mobile
+     * const isMobile = useIsMobile()
+     * const monthPicker = <MonthSelect value={month} onChange={setMonth} />
+     *
+     * <Sidebar footer={isMobile ? monthPicker : undefined} … />
+     * <AppBar actions={monthPicker} … />
+     * ```
      */
     footer?: ReactNode;
     /**
@@ -1083,6 +1097,11 @@ interface AppBarProps {
     /**
      * Arbitrary content inserted after the built-in controls (theme toggle, accent
      * picker, new button) and before the avatar. Use for custom action buttons.
+     *
+     * **Mobile note:** the `actions` slot (along with search and `brandSub`) is
+     * hidden via CSS below 768 px. If an action must remain reachable on mobile,
+     * also pass it as `footer` to the accompanying `<Sidebar>` so it appears in
+     * the mobile overlay. See {@link SidebarProps.footer} for a usage example.
      */
     actions?: ReactNode;
     /** Currently active accent colour — drives the accent picker selection indicator. */

package/dist/index.js

@@ -771,9 +771,8 @@ function NavGroup({ label: label4, items, activeId, onItemClick, renderLink, col
   ] });
 }
 function NavItem({ item: item2, active, onClick, renderLink, collapsed }) {
-  const glyphStyle = active ? { filter: "invert(1)" } : void 0;
   const content3 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    item2.glyph ? /* @__PURE__ */ jsx(Glyph, { name: item2.glyph, size: 14, style: glyphStyle, "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", {}),
+    item2.glyph ? /* @__PURE__ */ jsx(Glyph, { name: item2.glyph, size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", {}),
     !collapsed && /* @__PURE__ */ jsx("span", { children: item2.label }),
     !collapsed && item2.count !== void 0 && /* @__PURE__ */ jsx("span", { className: item2.countTone === "accent" ? countAccent : navItemCount, children: item2.count })
   ] });
@@ -845,9 +844,10 @@ function Avatar({ initials: initials2, size = "md", tone = "neutral", className
 }
 
 // src/components/AppBar/AppBar.css.ts
-var accentPicker = "AppBar_accentPicker__uqki999";
-var accentSwatch = "AppBar_accentSwatch__uqki99a";
+var accentPicker = "AppBar_accentPicker__uqki99a";
+var accentSwatch = "AppBar_accentSwatch__uqki99b";
 var actions = "AppBar_actions__uqki998";
+var actionsInner = "AppBar_actionsInner__uqki999";
 var appBar = "AppBar_appBar__uqki990";
 var brand = "AppBar_brand__uqki991";
 var brandDivider = "AppBar_brandDivider__uqki993";
@@ -911,30 +911,32 @@ function AppBar({
       searchKbd2 && /* @__PURE__ */ jsx("span", { className: searchKbd, children: searchKbd2 })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: actions, children: [
-      onAccentChange && /* @__PURE__ */ jsx("div", { className: accentPicker, role: "group", "aria-label": "Brand colour", children: accentColorNames.map((name) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: accentSwatch,
-          "data-active": name === accent,
-          onClick: () => onAccentChange(name),
-          "aria-label": name,
-          "aria-pressed": name === accent,
-          style: { background: accentColors[name].main }
-        },
-        name
-      )) }),
-      onToggleTheme && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          glyph: isDark ? "sun" : "moon",
-          onClick: onToggleTheme,
-          "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode"
-        }
-      ),
-      onNewClick && /* @__PURE__ */ jsx(Button, { variant: "accent", size: "sm", glyph: "plus", onClick: onNewClick, children: "New" }),
-      actions2,
+      /* @__PURE__ */ jsxs("div", { className: actionsInner, children: [
+        onAccentChange && /* @__PURE__ */ jsx("div", { className: accentPicker, role: "group", "aria-label": "Brand colour", children: accentColorNames.map((name) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: accentSwatch,
+            "data-active": name === accent,
+            onClick: () => onAccentChange(name),
+            "aria-label": name,
+            "aria-pressed": name === accent,
+            style: { background: accentColors[name].main }
+          },
+          name
+        )) }),
+        onToggleTheme && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            glyph: isDark ? "sun" : "moon",
+            onClick: onToggleTheme,
+            "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode"
+          }
+        ),
+        onNewClick && /* @__PURE__ */ jsx(Button, { variant: "accent", size: "sm", glyph: "plus", onClick: onNewClick, children: "New" }),
+        actions2
+      ] }),
       avatarInitials && /* @__PURE__ */ jsx(Avatar, { initials: avatarInitials, size: "sm", tone: "neutral" })
     ] })
   ] });