mywhy-ui 0.5.2 → 0.6.0

package/README.md

@@ -8,7 +8,8 @@ React component library for the [mywhy](https://github.com/mywhy/mywhy) robotics
 npm install mywhy-ui
 ```
 
-**Peer dependencies:** `react >= 18` and `react-dom >= 18`
+**Peer dependencies:** `react >= 18` and `react-dom >= 18`  
+**Node.js support:** `>= 24.0.0`
 
 ## Setup
 

package/dist/index.cjs

@@ -787,6 +787,58 @@ function FormControl({
     helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ink-light", children: helperText })
   ] });
 }
+function Navbar({
+  left,
+  center,
+  right,
+  brand,
+  items,
+  sticky = false,
+  bordered = true,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    "w-full h-16 bg-surface",
+    bordered ? "border-b border-outline" : "",
+    sticky ? "sticky top-0" : "",
+    "flex items-center px-6 gap-4",
+    "z-40",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: classes, ...props, children: [
+    (brand || left) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 flex-shrink-0", children: [
+      brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-text-primary", children: brand }),
+      left && /* @__PURE__ */ jsxRuntime.jsx("div", { children: left })
+    ] }),
+    center && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: center }),
+    items && items.length > 0 && !center && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-1", children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavbarItemComponent, { item }, idx)) }),
+    right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 flex-shrink-0 ml-auto", children: right })
+  ] });
+}
+function NavbarItemComponent({ item }) {
+  const classes = [
+    "px-4 py-2 rounded-md text-sm font-medium",
+    "transition-colors",
+    item.disabled ? "text-text-muted cursor-not-allowed" : "text-text-secondary hover:bg-surface-hover hover:text-text-primary cursor-pointer"
+  ].join(" ");
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: item.icon }),
+    item.label
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: classes, onClick: item.onClick, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: classes,
+      onClick: item.onClick,
+      disabled: item.disabled,
+      children: content
+    }
+  );
+}
 function Tabs({
   tabs,
   activeTab,
@@ -3287,6 +3339,7 @@ exports.Input = Input;
 exports.Kbd = Kbd;
 exports.Link = Link;
 exports.MultiSelect = MultiSelect;
+exports.Navbar = Navbar;
 exports.NumberInput = NumberInput;
 exports.Pagination = Pagination;
 exports.Progress = Progress;