achery-ui 0.11.1 → 0.12.0

package/dist/index.cjs

@@ -2192,8 +2192,17 @@ function NavGroup({ label: label4, items, activeId, onItemClick, renderLink, col
   ] });
 }
 function NavItem({ item: item2, active, onClick, renderLink, collapsed }) {
+  const leading = item2.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: item2.icon }) : item2.glyph ? /* @__PURE__ */ jsxRuntime.jsx(
+    Glyph,
+    {
+      name: item2.glyph,
+      size: 14,
+      "aria-hidden": "true",
+      ...item2.iconColor ? { style: { color: item2.iconColor } } : {}
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", {});
   const content3 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    item2.glyph ? /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: item2.glyph, size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+    leading,
     !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { children: item2.label }),
     !collapsed && item2.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: item2.countTone === "accent" ? countAccent : navItemCount, children: item2.count })
   ] });
@@ -3441,7 +3450,7 @@ var SegmentedControl = ({
       role: "radio",
       "aria-checked": opt.value === value2,
       disabled,
-      onClick: () => onChange(opt.value),
+      onClick: () => onChange(opt.value === value2 ? null : opt.value),
       className: [
         segment,
         sizeClass,
@@ -3452,6 +3461,20 @@ var SegmentedControl = ({
     opt.value
   )) });
 };
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = react.useState(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  react.useEffect(() => {
+    const mq = window.matchMedia(query);
+    setMatches(mq.matches);
+    const handler = (e) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+};
+var useIsDesktop = (breakpoint = 768) => useMediaQuery(`(min-width: ${breakpoint}px)`);
 
 exports.AcheryProvider = AcheryProvider;
 exports.AppBar = AppBar;
@@ -3503,6 +3526,8 @@ exports.glyphCategory = glyphCategory;
 exports.glyphLabel = glyphLabel;
 exports.searchGlyphs = searchGlyphs;
 exports.useConfirm = useConfirm;
+exports.useIsDesktop = useIsDesktop;
+exports.useMediaQuery = useMediaQuery;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
 exports.vars = vars;