achery-ui 0.5.3 → 0.5.5

package/dist/index.cjs

@@ -37,6 +37,12 @@ var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 var RadixDropdownMenu__namespace = /*#__PURE__*/_interopNamespace(RadixDropdownMenu);
 
+var AppBarSearchContext = react.createContext(null);
+var AppBarSearchProvider = ({ children }) => {
+  const [searchConfig, setSearchConfig] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(AppBarSearchContext.Provider, { value: { searchConfig, setSearchConfig }, children });
+};
+var useAppBarSearch = () => react.useContext(AppBarSearchContext);
 var STORAGE_KEY = "achery-theme-mode";
 var ThemeContext = react.createContext(null);
 function getSystemTheme() {
@@ -97,7 +103,7 @@ function AcheryProvider({
       delete html.dataset["acheryRoot"];
     };
   }, [resolvedTheme, accent]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { mode, theme: resolvedTheme, setTheme, toggleTheme, accent, setAccent }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { mode, theme: resolvedTheme, setTheme, toggleTheme, accent, setAccent }, children: /* @__PURE__ */ jsxRuntime.jsx(AppBarSearchProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-achery-root": "",
@@ -107,7 +113,7 @@ function AcheryProvider({
       style,
       children
     }
-  ) });
+  ) }) });
 }
 function useTheme() {
   const ctx = react.useContext(ThemeContext);
@@ -708,10 +714,12 @@ function Tooltip({
 // src/components/Sidebar/Sidebar.css.ts
 var backdrop = "Sidebar_backdrop__1n0xxfc2";
 var collapseToggle = "Sidebar_collapseToggle__1n0xxfc3";
-var countAccent = "Sidebar_countAccent__1n0xxfc9";
+var countAccent = "Sidebar_countAccent__1n0xxfcb";
 var footer = "Sidebar_footer__1n0xxfc8";
 var group = "Sidebar_group__1n0xxfc4";
 var groupLabel = "Sidebar_groupLabel__1n0xxfc5";
+var mobileSearch = "Sidebar_mobileSearch__1n0xxfc9";
+var mobileSearchInput = "Sidebar_mobileSearchInput__1n0xxfca";
 var navItem = "Sidebar_navItem__1n0xxfc6";
 var navItemCount = "Sidebar_navItemCount__1n0xxfc7";
 var sidebar = "Sidebar_sidebar__1n0xxfc0";
@@ -729,6 +737,8 @@ function Sidebar({
   className
 }) {
   const isMobileMode = mobileOpen !== void 0;
+  const searchCtx = useAppBarSearch();
+  const searchConfig = searchCtx?.searchConfig ?? null;
   const nav = /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -762,6 +772,23 @@ function Sidebar({
           },
           i
         )),
+        searchConfig && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: mobileSearch, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "compass", size: 12, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "search",
+              placeholder: searchConfig.placeholder,
+              className: mobileSearchInput,
+              "aria-label": "Search",
+              onFocus: () => searchConfig.onSearchFocus?.(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") searchConfig.onSearch?.(e.target.value);
+              }
+            }
+          ),
+          searchConfig.kbd && /* @__PURE__ */ jsxRuntime.jsx("span", { children: searchConfig.kbd })
+        ] }),
         footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer, children: footer3 })
       ]
     }
@@ -871,17 +898,19 @@ 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 actions = "AppBar_actions__uqki998";
+var accentPicker = "AppBar_accentPicker__uqki99b";
+var accentSwatch = "AppBar_accentSwatch__uqki99c";
+var actions = "AppBar_actions__uqki999";
+var actionsInner = "AppBar_actionsInner__uqki99a";
 var appBar = "AppBar_appBar__uqki990";
 var brand = "AppBar_brand__uqki991";
 var brandDivider = "AppBar_brandDivider__uqki993";
 var brandName = "AppBar_brandName__uqki992";
 var brandSub = "AppBar_brandSub__uqki994";
-var searchArea = "AppBar_searchArea__uqki995";
-var searchInput2 = "AppBar_searchInput__uqki996";
-var searchKbd = "AppBar_searchKbd__uqki997";
+var searchArea = "AppBar_searchArea__uqki996";
+var searchInput2 = "AppBar_searchInput__uqki997";
+var searchKbd = "AppBar_searchKbd__uqki998";
+var searchSpacer = "AppBar_searchSpacer__uqki995";
 function AppBar({
   brandName: brandName2 = "Achery",
   brandSub: brandSub2,
@@ -900,6 +929,17 @@ function AppBar({
   onSearchFocus,
   className
 }) {
+  const searchCtx = useAppBarSearch();
+  react.useEffect(() => {
+    if (!searchCtx || !showSearch) return;
+    searchCtx.setSearchConfig({
+      placeholder: searchPlaceholder,
+      ...searchKbd2 !== void 0 && { kbd: searchKbd2 },
+      ...onSearch !== void 0 && { onSearch },
+      ...onSearchFocus !== void 0 && { onSearchFocus }
+    });
+    return () => searchCtx.setSearchConfig(null);
+  }, [showSearch, searchPlaceholder, searchKbd2, onSearch, onSearchFocus]);
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: [appBar, className].filter(Boolean).join(" "), children: [
     onMenuClick && /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -919,7 +959,7 @@ function AppBar({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: brandSub, children: brandSub2 })
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: searchArea, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: showSearch ? searchArea : searchSpacer, children: showSearch && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "compass", size: 12, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -935,32 +975,34 @@ function AppBar({
         }
       ),
       searchKbd2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: searchKbd, children: searchKbd2 })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: actions, children: [
-      onAccentChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: accentPicker, role: "group", "aria-label": "Brand colour", children: chunkLJ24EJ3N_cjs.accentColorNames.map((name) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: accentSwatch,
-          "data-active": name === accent,
-          onClick: () => onAccentChange(name),
-          "aria-label": name,
-          "aria-pressed": name === accent,
-          style: { background: chunkLJ24EJ3N_cjs.accentColors[name].main }
-        },
-        name
-      )) }),
-      onToggleTheme && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { variant: "accent", size: "sm", glyph: "plus", onClick: onNewClick, children: "New" }),
-      actions2,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: actionsInner, children: [
+        onAccentChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: accentPicker, role: "group", "aria-label": "Brand colour", children: chunkLJ24EJ3N_cjs.accentColorNames.map((name) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: accentSwatch,
+            "data-active": name === accent,
+            onClick: () => onAccentChange(name),
+            "aria-label": name,
+            "aria-pressed": name === accent,
+            style: { background: chunkLJ24EJ3N_cjs.accentColors[name].main }
+          },
+          name
+        )) }),
+        onToggleTheme && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { variant: "accent", size: "sm", glyph: "plus", onClick: onNewClick, children: "New" }),
+        actions2
+      ] }),
       avatarInitials && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { initials: avatarInitials, size: "sm", tone: "neutral" })
     ] })
   ] });